curso desarrollo frontend: html - css - jquery

CASCADING STYLE SHEETS

FUNDAMENTOS

LENGUAJE DE REGLAS

!3

‣ Disposición

‣ Color

‣ Tipografía

‣ Espaciado

‣ Dimensiones

SINTAXIS

!4

selector { propiedad: valor; }

!

SELECTORES SIMPLES

!5

p

.menu

#nav

Etiquetas

Clases

Identificadores

EJEMPLO

<article id="feature">

<div class="row custom">

<div class="info">

<h4>Customize</h4>

<p>Is a prime example of when a brand new well established.</p>

<p class="tip">Select layout and theme options in preferences.</p>

</div>

</div>

</article>

p {}

.row {}

.custom {}

#feature {}

SELECTORES SIMPLES

!7

p

.menu

#nav

Etiquetas

Clases

Identificadores

SELECTORES COMPLEJOS

!8

.menu p

p.claim

Descendentes

Compuestos

!9

SELECTORES COMBINADOS

‣ > descendientes directos

‣ + adyacentes

EJEMPLO

<article id="feature">

<div class="row custom">

<div class="info tip">

<h4>Customize</h4>

<p>Is a prime example of when a brand new well established.</p>

<p class="tip">Select layout and theme options in preferences.</p>

</div>

</div>

</article>

.info h4 {}

!

p.tip {}

!11

PSEUDO SELECTORES

‣ :hover, :focus

‣ :after, :before

‣ :target

‣ :first-child

!12

UNIDADES DE MEDIDA

‣ px

‣ %

‣ em, rem

HERENCIA

‣ Relativas a tipografía

‣ Enlace <a>

‣ Forzar herencia: inherit

!13

FONT

‣ size

‣ family

‣ weight

‣ variant

‣ style!14

TEXT

‣ transform

‣ align

‣ indent

‣ decoration

‣ text-shadow!15

TIPOGRAFÍA

‣ line-height

‣ letter-spacing

!16

DISPLAY

‣ block

‣ inline

‣ inline-block

‣ none

!17

VISIBILIDAD

‣ visibility

‣ opacity

!18

MODELO DE CAJA

!19

width, height

padding

margin

border

LAYOUT

‣ table

‣ float

‣ position

‣ flexbox

!20

LAYOUT

‣ table

‣ float

‣ position

‣ flexbox?

!21

FLOATS

‣ left, right

‣ none

‣ overflow

‣ clear

!22

POSITION

‣ static, relative

‣ absolute, fixed

‣ left, top, bottom, right

‣ z-index

!23

BACKGROUND

‣ image, repeat, position

‣ color, attachment

!

‣ background-size

!24

VENDOR PREFIXES

‣ -webkit-

‣ -moz-

‣ -ms-

‣ -o-

!26

DECORACIÓN COMPLEJA

‣ Multiples fondos

‣ Bordes

‣ Circulos

!27

TRANSFORMATION

‣ transition

‣ transform

‣ animation

!28

RESPONSIVE

‣ liquid layout

‣ flexible media

‣ em, rem

‣ media queries

‣ meta!30

FLUID LAYOUT

px > %

!

elemento * 100

contexto

!31

FLEXIBLE MEDIA

‣ img { max-width: 100%; }

!32

SCALABLE FONTS

‣ .parent { font-size: 1.2em; }

!33

MEDIA QUERIES

‣ @media (cond) and cond()

‣ max-width desktop->mobile

‣ min-width mobile->desktop

!34

MEDIA QUERIES

‣ orientation

‣ device-width, device-height

‣ device-aspect-ratio

‣ min-device-pixel-ratio

!35

META

‣ <meta name="viewport"

content="width=device-

width, initial-scale=1">!36

OLVÍDATE DEL PIXEL Y PIENSA

EN PROPORCIONES

FUNDAMENTOS HTML, CSS Y

JQUERY

!2

CÓMO FUNCIONA INTERNET

PETICIÓN

CLIENTE SERVIDOR

!3

HTML

JSCSS

LENGUAJES CLIENTE

!4

SEMÁNTICA,ESTRUCTURA REGLAS DE PRESENTACIÓN FUNCIONALIDAD EXTRA

HTML CSS

JS

LENGUAJES CLIENTE

!5

HTML

!

HYPERTEXT MARKUP LANGUAGE

!

HTTP://

!6

ETIQUETA

<h1>Hola!</h1>

!7

ETIQUETA

<h1>Hola!</h1>APERTURA CIERRECONTENIDO

!8

ATRIBUTOS

<p class=”claim”>

!9

DISPLAY

BLOCK INLINE

!10

ANATOMÍA DE HTML

<html> <head> info de página <head> <body> contenido visible </body> </html>

!11

ETIQUETAS COMUNES

H1…H6 P UL, OL, LI, DL, DT, DD A

IMG BR DIV SPAN

SUBLIME TEXT +EMMET

HTML 5

!14

NOVEDADESDECLARACIÓN

NUEVAS ETIQUETAS

NUEVOS ATRIBUTOS

REGLAS

JS APIs

DECLARACIÓN<!DOCTYPE HTML>

HTML Y PUNTO

NUESTRA RESPONSABILIDAD

EL NAVEGADOR CONFÍA

!15

ETIQUETASSEMÁNTICAS Y ESTRUCTURALES

DEFINEN ESTRUCTURA

AFECTAN AL OUTLINE

DIV PARA DECORACIÓN

!16

ETIQUETASSEMÁNTICAS Y ESTRUCTURALES

ARTICLE, ASIDE, FIGURE,

FIGCAPTION, FOOTER, HEADER,

HGROUP, NAV, SECTION, TIME,

AUDIO, VIDEO, CANVAS,

MAIN?, PICTURE? !17

ETIQUETASSECTION

CONTENIDO GENÉRICO

ESTRUCTURADO

!

ARTICLE, ASIDE, NAV!18

ETIQUETASARTICLE

CONTENIDO ESTRUCTURAL

DISTRIBUIBLE DE MANERA

INDEPENDIENTE

!

!19article_01.html

ETIQUETASASIDE

CONTENIDO SECUNDARIO

RELACIONADO A ELEMENTO

!

!20aside_01.html

ETIQUETASNAV

SECCIÓN RELATIVA A ENLACES

DENTRO DEL DOCUMENTO O DE

LA PÁGINA

!

!21nav_01.html

ETIQUETASFIGURE

SECCIÓN DE CONTENIDO VISUAL

MULTIPLES MEDIOS

!22figure_01.html

ETIQUETASFIGCAPTION

LEYENDA O PIE RELATIVO AL

CONTENIDO VISUAL DE FIGURE

UNICO POR FIGCAPTION

PUEDE CONTENER SEMÁNTICA!23figure_01.html

ETIQUETASHEADER

CONTENIDO INTRODUCTORIO

ELEMENTOS NAVEGACIÓN

SUELE CONTENER H

!24header_01.html

ETIQUETASFOOTER

CONTENIDO SECUNDARIO

NO PRESCINDIBLE

!25footer_01.html

!26

LA SEMÁNTICA DE LAS ETIQUETAS

NO DEFINE SU POSICIÓN

EN EL LAYOUT

ETIQUETASTIME

CONTENIDO RELATIVO A TIEMPO

HORAS, SEMANAS, AÑOS...

CONTEXTO ESCRITO

!27time_01.html

ETIQUETASVIDEO & AUDIO

NATIVO, SIN PLUGIN FLASH

USABILIDAD

ATRIBUTOS ESPECÍFICOS

!

FALLBACK !28video_01.html

ETIQUETASCANVAS

DEPENDIENTE DE JS

DINÁMICOS / INTERACTIVOS

JUEGOS

!29canvas_01.html

ATRIBUTOSMÁS ESPECÍFICOS

FUNCIONALES -> UX

!30

ATRIBUTOSFORMULARIOS

EMAIL, TEL, NUMBER, URL,

SEARCH, COLOR, DATE, RANGE

!

AUTOFOCUS, REQUIRED, MAX,

MIN, PLACEHOLDER !31

REGLASMAYOR Y MEJOR SEMÁNTICA

CIERRE DE ETIQUETAS

ANIDACIÓN

ELIMINAR REDUNDANCIA

!32

JAVASCRIPT Y JQUERY

!2

FUNDAMENTOS

FRAMEWORK

JAVASCRIPT

LENGUAJE DE PROGRAMACIÓN

!3

LAS TRES INCÓGNITAS

QUIÉN

CUÁNDO

QUÉ

!4


QUIÉN

CUÁNDO

QUÉ

ELEMENTOS

EVENTOS

ACCIONES

!5


QUIÉN

CUÁNDO

QUÉ

HTML (DOM)

USUARIO, CARGAS…

MODIFICACIONES, CÁLCULOS

!6


a { color: #999; }

a:hover { color: #EEE; }

!

!7


!

a:hover { color: #EEE; }

!

QUIÉN ELEMENTO

CUÁNDO EVENTO

QUÉ ACCIÓN

QUIÉN

ELEMENTO(s) HTML

WINDOW

DOCUMENT

!8


CUÁNDO

USUARIO (click, keydown)

CARGAS EXTERNAS

IMPLÍCITAS

!9


!10

CUANDO: EVENTOS

USUARIO

RUTINAS INTERNAS

!

.on(‘click’), .on(‘load’), .on(‘resize’)

QUÉ

ACCIONES

ABSTRACCIÓN

FUNCIONES (MÉTODOS)

!11


!12

QUÉ: FUNCIONES

CONJUNTO DE ÓRDENES

DECLARACIÓN Y LLAMADA

!13

controlMenu(); !

!

!

function controlMenu(){ // acciones };

LLAMADA !

!

DECLARACIÓN !

FUNCIONES

!14

!

$(‘.next’).on(‘click’, avanza); !

!

function avanza(){ // acciones };

EJEMPLO

!15

!

alert(‘mensaje’) !

console.log(‘mensaje’)

FEEDBACK

!16

FUNDAMENTOS PROGRAMACIÓN

!17

FUNDAMENTOS

VARIABLES

OPERADORES

SENTENCIAS

VARIABLES

!18

SE DECLARAN UNA VEZ

SE EMPLEAN MUCHAS VECES

ALMACENAN VALORES

CONTENIDO DEFINE SU TIPO

!19

!

var velocidad = 20; !

var nombre = ‘Inés’; !

var misionCompletada = false;

VARIABLES

!20

saluda(‘Pedro’);

!

function saluda(quien){

alert(‘Hola ’+quien)

};

ARGUMENTOS

OPERADORES

!21

ASIGNACIÓN

ARITMÉTICOS

COMPARATIVOS

!22

!

var velocidad = 20; !

velocidad = velocidad + 15; !

OPERADORES

SENTENCIAS

!23

CONDICIONALES

REPETICIÓN

!24

!

if ( velocidad > 50 ){ !

bonus = true; !

}

SENTENCIAS

!25

JQUERY

!26

JQUERY

HTTP://JQUERY.COM/DOWNLOAD/

!

HTTP://API.JQUERY.COM/

!27

JQUERY!

<script src=“jquery.min.js”></script> !

<script src=“jquery.plugin.js”></script> !

<script src=“mi_app.js”></script> !

!28

JQUERY<script src=“jquery.min.js”></script> !

<script> !

// mi código !

</script>

!29

JQUERY: ESTILOS!

.addClass(‘clase’);

.removeClass(‘clase’);

.toggleClass(‘clase’);

!30

JQUERY: ESTILOS!

.css(‘propiedad’, ‘valor’);

.css( { prop1: ’valor1’, prop2: ’valor2’ } );

!

!important

!31

JQUERY: EFECTOS!

.hide()

.show()

.toggle()

!32

JQUERY: EFECTOS!

.fadeOut()

.fadeIn()

.fadeToggle()

.fadeTo(duration, opacity)

!33

JQUERY: DESPLIEGUE!

.slideUp()

.slideDown()

.slideToggle()

!34

JQUERY: EFECTOS!

.animate({ prop1: ’valor1’ }, duration );

!

.stop(true)

.delay(duration)

!35

CALLBACKS

FUNCIÓN A EJECUTAR AL

FINALIZAR LA ACCIÓN

!

EFECTOS, CARGAS…

!36

JQUERY: CALLBACKS.fadeOut(, cb);

.fadeIn(, cb)

.fadeToggle(, cb)

.fadeTo(, cb)

!

.slideDown(, cb)

.slideUp(, cb)

.slideToggle(, cb)

.animate(, cb);

!37

$(this)

THIS

!38

INDIVIDUO RESPECTO AL GRUPO

!

CAMBIA DEPENDIENDO

DE QUÉ LO INVOQUE

!39

THIS$(‘.lista li’).on(‘click’, seleccionaItem);

!

function seleccionaItem(){

$(this).addClass(‘pulsado’);

}

!40

THIS$(‘.hero’).fadeIn(despliega);

!

function despliega(){

$(this).slideDown();

}

!41

QUIEN: ELEMENTOS

SELECTORES CSS

OBJETOS

$(‘.menu a’), $(‘p’), $(window)

!

!42

QUIEN: ELEMENTOS

SELECTORES CSS

OBJETOS

$(‘.menu a’), $(‘p’), $(window)

$(this)

ELEMENTOS

!43

PUNTO DE PARTIDA:

!

GLOBAL VS $(THIS)

!44

ELEMENTOS!

.find(selector)

.parent()

.next()

.prev()

!45

JQUERY: EVENTOSUSUARIO

mouse

keyboard

screen

touch, scroll

SISTEMA

load

!46

MOUSE

click, mousedown, mouseup,

mousemove,

mouseenter, mouseleave,

mouseover, mouseout

JQUERY: EVENTOS

!47

KEYBOARD

keydown, keyup

!

SCREEN

resize

JQUERY: EVENTOS

!48

TOUCH

touchstart

touchmove

touchend

JQUERY: EVENTOS

!49

saluda(‘Pedro’);

!

function saluda(quien){

alert(‘Hola ’+quien)

};

ARGUMENTOS

!50

LA FUNCIÓN ASOCIADA AL OBJETO

MEDIANTE UN EVENTO, RECIBE DE

MANERA IMPLÍCITA EL PROPIO

EVENTO COMO ARGUMENTO

JQUERY: EVENTOS

!51

ARGUMENTOS$(‘.lista li’).on(‘click’, seleccionaItem);

!

function seleccionaItem(e){

// e -> mouseEvent

}

!52

ARGUMENTOS$(‘.menu a’).on(‘click’, seleccionaItem);

!

function seleccionaItem(e){

e.preventDefault();

}

!53

CONTENIDOS!

ETIQUETAS Y ATRIBUTOS

!

getters (obtener valor)

setters (dar valor)

!54

CONTENIDOSETIQUETAS

!

.text()

.text(valor)

.html()

.html(valor)

ATRIBUTOS

!

.attr(‘atributo’)

.attr(‘atributo’, valor)

.data(data)

!55

MANIPULACIÓN.append(obj)

.prepend(obj)

.clone()

.remove()

!56

DIMENSIONES!

.width()

.height()

!

var ancho = $(obj).css(‘width’)

!57

DIMENSIONES.innerWidth()

.innerHeight()

!

.outerWidth(true)

.outerHeight(true)

!58

POSICIONAMIENTORELATIVO

!

.position().left

.position().top

ABSOLUTO

!

.offset().left

.offset().top

!59

FILTROS.first()

.last()

.eq(indice)

$(obj:odd)

$(obj:even)

curso desarrollo frontend: html - css - jquery

Technology