Curso desarrollo frontend: HTML - CSS - jQuery
-
Upload
redradix -
Category
Technology
-
view
279 -
download
1
Transcript of Curso desarrollo frontend: HTML - CSS - jQuery
![Page 1: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/1.jpg)
CASCADING STYLE SHEETS
![Page 2: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/2.jpg)
FUNDAMENTOS
![Page 3: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/3.jpg)
LENGUAJE DE REGLAS
!3
‣ Disposición
‣ Color
‣ Tipografía
‣ Espaciado
‣ Dimensiones
![Page 4: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/4.jpg)
SINTAXIS
!4
selector { propiedad: valor; }
!
![Page 5: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/5.jpg)
SELECTORES SIMPLES
!5
p
.menu
#nav
Etiquetas
Clases
Identificadores
![Page 6: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/6.jpg)
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 {}
![Page 7: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/7.jpg)
SELECTORES SIMPLES
!7
p
.menu
#nav
Etiquetas
Clases
Identificadores
![Page 8: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/8.jpg)
SELECTORES COMPLEJOS
!8
.menu p
p.claim
Descendentes
Compuestos
![Page 9: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/9.jpg)
!9
SELECTORES COMBINADOS
‣ > descendientes directos
‣ + adyacentes
![Page 10: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/10.jpg)
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 {}
![Page 11: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/11.jpg)
!11
PSEUDO SELECTORES
‣ :hover, :focus
‣ :after, :before
‣ :target
‣ :first-child
![Page 12: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/12.jpg)
!12
UNIDADES DE MEDIDA
‣ px
‣ %
‣ em, rem
![Page 13: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/13.jpg)
HERENCIA
‣ Relativas a tipografía
‣ Enlace <a>
‣ Forzar herencia: inherit
!13
![Page 14: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/14.jpg)
FONT
‣ size
‣ family
‣ weight
‣ variant
‣ style!14
![Page 15: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/15.jpg)
TEXT
‣ transform
‣ align
‣ indent
‣ decoration
‣ text-shadow!15
![Page 16: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/16.jpg)
TIPOGRAFÍA
‣ line-height
‣ letter-spacing
!16
![Page 17: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/17.jpg)
DISPLAY
‣ block
‣ inline
‣ inline-block
‣ none
!17
![Page 18: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/18.jpg)
VISIBILIDAD
‣ visibility
‣ opacity
!18
![Page 19: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/19.jpg)
MODELO DE CAJA
!19
width, height
padding
margin
border
![Page 20: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/20.jpg)
LAYOUT
‣ table
‣ float
‣ position
‣ flexbox
!20
![Page 21: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/21.jpg)
LAYOUT
‣ table
‣ float
‣ position
‣ flexbox?
!21
![Page 22: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/22.jpg)
FLOATS
‣ left, right
‣ none
‣ overflow
‣ clear
!22
![Page 23: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/23.jpg)
POSITION
‣ static, relative
‣ absolute, fixed
‣ left, top, bottom, right
‣ z-index
!23
![Page 24: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/24.jpg)
BACKGROUND
‣ image, repeat, position
‣ color, attachment
!
‣ background-size
!24
![Page 25: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/25.jpg)
CSS3
![Page 26: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/26.jpg)
VENDOR PREFIXES
‣ -webkit-
‣ -moz-
‣ -ms-
‣ -o-
!26
![Page 27: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/27.jpg)
DECORACIÓN COMPLEJA
‣ Multiples fondos
‣ Bordes
‣ Circulos
!27
![Page 28: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/28.jpg)
TRANSFORMATION
‣ transition
‣ transform
‣ animation
!28
![Page 29: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/29.jpg)
RWD
![Page 30: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/30.jpg)
RESPONSIVE
‣ liquid layout
‣ flexible media
‣ em, rem
‣ media queries
‣ meta!30
![Page 31: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/31.jpg)
FLUID LAYOUT
px > %
!
elemento * 100
contexto
!31
![Page 32: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/32.jpg)
FLEXIBLE MEDIA
‣ img { max-width: 100%; }
!32
![Page 33: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/33.jpg)
SCALABLE FONTS
‣ .parent { font-size: 1.2em; }
!33
![Page 34: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/34.jpg)
MEDIA QUERIES
‣ @media (cond) and cond()
‣ max-width desktop->mobile
‣ min-width mobile->desktop
!34
![Page 35: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/35.jpg)
MEDIA QUERIES
‣ orientation
‣ device-width, device-height
‣ device-aspect-ratio
‣ min-device-pixel-ratio
!35
![Page 36: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/36.jpg)
META
‣ <meta name="viewport"
content="width=device-
width, initial-scale=1">!36
![Page 37: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/37.jpg)
OLVÍDATE DEL PIXEL Y PIENSA
EN PROPORCIONES
![Page 38: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/38.jpg)
FUNDAMENTOS HTML, CSS Y
JQUERY
![Page 39: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/39.jpg)
!2
CÓMO FUNCIONA INTERNET
PETICIÓN
CLIENTE SERVIDOR
![Page 40: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/40.jpg)
!3
HTML
JSCSS
LENGUAJES CLIENTE
![Page 41: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/41.jpg)
!4
SEMÁNTICA,ESTRUCTURA REGLAS DE PRESENTACIÓN FUNCIONALIDAD EXTRA
HTML CSS
JS
LENGUAJES CLIENTE
![Page 42: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/42.jpg)
!5
HTML
!
HYPERTEXT MARKUP LANGUAGE
!
HTTP://
![Page 43: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/43.jpg)
!6
ETIQUETA
<h1>Hola!</h1>
![Page 44: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/44.jpg)
!7
ETIQUETA
<h1>Hola!</h1>APERTURA CIERRECONTENIDO
![Page 45: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/45.jpg)
!8
ATRIBUTOS
<p class=”claim”>
![Page 46: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/46.jpg)
!9
DISPLAY
BLOCK INLINE
![Page 47: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/47.jpg)
!10
ANATOMÍA DE HTML
<html> <head> info de página <head> <body> contenido visible </body> </html>
![Page 48: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/48.jpg)
!11
ETIQUETAS COMUNES
H1…H6 P UL, OL, LI, DL, DT, DD A
IMG BR DIV SPAN
![Page 49: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/49.jpg)
SUBLIME TEXT +EMMET
![Page 50: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/50.jpg)
HTML 5
![Page 51: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/51.jpg)
!14
NOVEDADESDECLARACIÓN
NUEVAS ETIQUETAS
NUEVOS ATRIBUTOS
REGLAS
JS APIs
![Page 52: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/52.jpg)
DECLARACIÓN<!DOCTYPE HTML>
HTML Y PUNTO
NUESTRA RESPONSABILIDAD
EL NAVEGADOR CONFÍA
!15
![Page 53: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/53.jpg)
ETIQUETASSEMÁNTICAS Y ESTRUCTURALES
DEFINEN ESTRUCTURA
AFECTAN AL OUTLINE
DIV PARA DECORACIÓN
!16
![Page 54: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/54.jpg)
ETIQUETASSEMÁNTICAS Y ESTRUCTURALES
ARTICLE, ASIDE, FIGURE,
FIGCAPTION, FOOTER, HEADER,
HGROUP, NAV, SECTION, TIME,
AUDIO, VIDEO, CANVAS,
MAIN?, PICTURE? !17
![Page 55: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/55.jpg)
ETIQUETASSECTION
CONTENIDO GENÉRICO
ESTRUCTURADO
!
ARTICLE, ASIDE, NAV!18
![Page 56: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/56.jpg)
ETIQUETASARTICLE
CONTENIDO ESTRUCTURAL
DISTRIBUIBLE DE MANERA
INDEPENDIENTE
!
!19article_01.html
![Page 57: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/57.jpg)
ETIQUETASASIDE
CONTENIDO SECUNDARIO
RELACIONADO A ELEMENTO
!
!20aside_01.html
![Page 58: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/58.jpg)
ETIQUETASNAV
SECCIÓN RELATIVA A ENLACES
DENTRO DEL DOCUMENTO O DE
LA PÁGINA
!
!21nav_01.html
![Page 59: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/59.jpg)
ETIQUETASFIGURE
SECCIÓN DE CONTENIDO VISUAL
MULTIPLES MEDIOS
!22figure_01.html
![Page 60: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/60.jpg)
ETIQUETASFIGCAPTION
LEYENDA O PIE RELATIVO AL
CONTENIDO VISUAL DE FIGURE
UNICO POR FIGCAPTION
PUEDE CONTENER SEMÁNTICA!23figure_01.html
![Page 61: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/61.jpg)
ETIQUETASHEADER
CONTENIDO INTRODUCTORIO
ELEMENTOS NAVEGACIÓN
SUELE CONTENER H
!24header_01.html
![Page 62: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/62.jpg)
ETIQUETASFOOTER
CONTENIDO SECUNDARIO
NO PRESCINDIBLE
!25footer_01.html
![Page 63: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/63.jpg)
!26
LA SEMÁNTICA DE LAS ETIQUETAS
NO DEFINE SU POSICIÓN
EN EL LAYOUT
![Page 64: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/64.jpg)
ETIQUETASTIME
CONTENIDO RELATIVO A TIEMPO
HORAS, SEMANAS, AÑOS...
CONTEXTO ESCRITO
!27time_01.html
![Page 65: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/65.jpg)
ETIQUETASVIDEO & AUDIO
NATIVO, SIN PLUGIN FLASH
USABILIDAD
ATRIBUTOS ESPECÍFICOS
!
FALLBACK !28video_01.html
![Page 66: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/66.jpg)
ETIQUETASCANVAS
DEPENDIENTE DE JS
DINÁMICOS / INTERACTIVOS
JUEGOS
!29canvas_01.html
![Page 67: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/67.jpg)
ATRIBUTOSMÁS ESPECÍFICOS
FUNCIONALES -> UX
!30
![Page 68: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/68.jpg)
ATRIBUTOSFORMULARIOS
EMAIL, TEL, NUMBER, URL,
SEARCH, COLOR, DATE, RANGE
!
AUTOFOCUS, REQUIRED, MAX,
MIN, PLACEHOLDER !31
![Page 69: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/69.jpg)
REGLASMAYOR Y MEJOR SEMÁNTICA
CIERRE DE ETIQUETAS
ANIDACIÓN
ELIMINAR REDUNDANCIA
!32
![Page 70: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/70.jpg)
JAVASCRIPT Y JQUERY
![Page 71: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/71.jpg)
!2
FUNDAMENTOS
FRAMEWORK
JAVASCRIPT
LENGUAJE DE PROGRAMACIÓN
![Page 72: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/72.jpg)
!3
LAS TRES INCÓGNITAS
QUIÉN
CUÁNDO
QUÉ
![Page 73: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/73.jpg)
!4
LAS TRES INCÓGNITAS
QUIÉN
CUÁNDO
QUÉ
ELEMENTOS
EVENTOS
ACCIONES
![Page 74: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/74.jpg)
!5
LAS TRES INCÓGNITAS
QUIÉN
CUÁNDO
QUÉ
HTML (DOM)
USUARIO, CARGAS…
MODIFICACIONES, CÁLCULOS
![Page 75: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/75.jpg)
!6
LAS TRES INCÓGNITAS
a { color: #999; }
a:hover { color: #EEE; }
!
![Page 76: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/76.jpg)
!7
LAS TRES INCÓGNITAS
!
a:hover { color: #EEE; }
!
QUIÉN ELEMENTO
CUÁNDO EVENTO
QUÉ ACCIÓN
![Page 77: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/77.jpg)
QUIÉN
ELEMENTO(s) HTML
WINDOW
DOCUMENT
!8
LAS TRES INCÓGNITAS
![Page 78: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/78.jpg)
CUÁNDO
USUARIO (click, keydown)
CARGAS EXTERNAS
IMPLÍCITAS
!9
LAS TRES INCÓGNITAS
![Page 79: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/79.jpg)
!10
CUANDO: EVENTOS
USUARIO
RUTINAS INTERNAS
!
.on(‘click’), .on(‘load’), .on(‘resize’)
![Page 80: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/80.jpg)
QUÉ
ACCIONES
ABSTRACCIÓN
FUNCIONES (MÉTODOS)
!11
LAS TRES INCÓGNITAS
![Page 81: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/81.jpg)
!12
QUÉ: FUNCIONES
CONJUNTO DE ÓRDENES
DECLARACIÓN Y LLAMADA
![Page 82: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/82.jpg)
!13
controlMenu(); !
!
!
function controlMenu(){ // acciones };
LLAMADA !
!
DECLARACIÓN !
FUNCIONES
![Page 83: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/83.jpg)
!14
!
$(‘.next’).on(‘click’, avanza); !
!
function avanza(){ // acciones };
EJEMPLO
![Page 84: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/84.jpg)
!15
!
alert(‘mensaje’) !
console.log(‘mensaje’)
FEEDBACK
![Page 85: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/85.jpg)
!16
FUNDAMENTOS PROGRAMACIÓN
![Page 86: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/86.jpg)
!17
FUNDAMENTOS
VARIABLES
OPERADORES
SENTENCIAS
![Page 87: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/87.jpg)
VARIABLES
!18
SE DECLARAN UNA VEZ
SE EMPLEAN MUCHAS VECES
ALMACENAN VALORES
CONTENIDO DEFINE SU TIPO
![Page 88: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/88.jpg)
!19
!
var velocidad = 20; !
var nombre = ‘Inés’; !
var misionCompletada = false;
VARIABLES
![Page 89: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/89.jpg)
!20
saluda(‘Pedro’);
!
function saluda(quien){
alert(‘Hola ’+quien)
};
ARGUMENTOS
![Page 90: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/90.jpg)
OPERADORES
!21
ASIGNACIÓN
ARITMÉTICOS
COMPARATIVOS
![Page 91: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/91.jpg)
!22
!
var velocidad = 20; !
velocidad = velocidad + 15; !
OPERADORES
![Page 92: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/92.jpg)
SENTENCIAS
!23
CONDICIONALES
REPETICIÓN
![Page 93: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/93.jpg)
!24
!
if ( velocidad > 50 ){ !
bonus = true; !
}
SENTENCIAS
![Page 94: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/94.jpg)
!25
JQUERY
![Page 95: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/95.jpg)
!26
JQUERY
HTTP://JQUERY.COM/DOWNLOAD/
!
HTTP://API.JQUERY.COM/
![Page 96: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/96.jpg)
!27
JQUERY!
<script src=“jquery.min.js”></script> !
<script src=“jquery.plugin.js”></script> !
<script src=“mi_app.js”></script> !
![Page 97: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/97.jpg)
!28
JQUERY<script src=“jquery.min.js”></script> !
<script> !
// mi código !
</script>
![Page 98: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/98.jpg)
!29
JQUERY: ESTILOS!
.addClass(‘clase’);
.removeClass(‘clase’);
.toggleClass(‘clase’);
![Page 99: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/99.jpg)
!30
JQUERY: ESTILOS!
.css(‘propiedad’, ‘valor’);
.css( { prop1: ’valor1’, prop2: ’valor2’ } );
!
!important
![Page 100: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/100.jpg)
!31
JQUERY: EFECTOS!
.hide()
.show()
.toggle()
![Page 101: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/101.jpg)
!32
JQUERY: EFECTOS!
.fadeOut()
.fadeIn()
.fadeToggle()
.fadeTo(duration, opacity)
![Page 102: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/102.jpg)
!33
JQUERY: DESPLIEGUE!
.slideUp()
.slideDown()
.slideToggle()
![Page 103: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/103.jpg)
!34
JQUERY: EFECTOS!
.animate({ prop1: ’valor1’ }, duration );
!
.stop(true)
.delay(duration)
![Page 104: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/104.jpg)
!35
CALLBACKS
FUNCIÓN A EJECUTAR AL
FINALIZAR LA ACCIÓN
!
EFECTOS, CARGAS…
![Page 105: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/105.jpg)
!36
JQUERY: CALLBACKS.fadeOut(, cb);
.fadeIn(, cb)
.fadeToggle(, cb)
.fadeTo(, cb)
!
.slideDown(, cb)
.slideUp(, cb)
.slideToggle(, cb)
.animate(, cb);
![Page 106: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/106.jpg)
!37
$(this)
![Page 107: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/107.jpg)
THIS
!38
INDIVIDUO RESPECTO AL GRUPO
!
CAMBIA DEPENDIENDO
DE QUÉ LO INVOQUE
![Page 108: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/108.jpg)
!39
THIS$(‘.lista li’).on(‘click’, seleccionaItem);
!
function seleccionaItem(){
$(this).addClass(‘pulsado’);
}
![Page 109: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/109.jpg)
!40
THIS$(‘.hero’).fadeIn(despliega);
!
function despliega(){
$(this).slideDown();
}
![Page 110: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/110.jpg)
!41
QUIEN: ELEMENTOS
SELECTORES CSS
OBJETOS
$(‘.menu a’), $(‘p’), $(window)
!
![Page 111: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/111.jpg)
!42
QUIEN: ELEMENTOS
SELECTORES CSS
OBJETOS
$(‘.menu a’), $(‘p’), $(window)
$(this)
![Page 112: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/112.jpg)
ELEMENTOS
!43
PUNTO DE PARTIDA:
!
GLOBAL VS $(THIS)
![Page 113: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/113.jpg)
!44
ELEMENTOS!
.find(selector)
.parent()
.next()
.prev()
![Page 114: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/114.jpg)
!45
JQUERY: EVENTOSUSUARIO
mouse
keyboard
screen
touch, scroll
SISTEMA
load
![Page 115: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/115.jpg)
!46
MOUSE
click, mousedown, mouseup,
mousemove,
mouseenter, mouseleave,
mouseover, mouseout
JQUERY: EVENTOS
![Page 116: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/116.jpg)
!47
KEYBOARD
keydown, keyup
!
SCREEN
resize
JQUERY: EVENTOS
![Page 117: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/117.jpg)
!48
TOUCH
touchstart
touchmove
touchend
JQUERY: EVENTOS
![Page 118: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/118.jpg)
!49
saluda(‘Pedro’);
!
function saluda(quien){
alert(‘Hola ’+quien)
};
ARGUMENTOS
![Page 119: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/119.jpg)
!50
LA FUNCIÓN ASOCIADA AL OBJETO
MEDIANTE UN EVENTO, RECIBE DE
MANERA IMPLÍCITA EL PROPIO
EVENTO COMO ARGUMENTO
JQUERY: EVENTOS
![Page 120: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/120.jpg)
!51
ARGUMENTOS$(‘.lista li’).on(‘click’, seleccionaItem);
!
function seleccionaItem(e){
// e -> mouseEvent
}
![Page 121: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/121.jpg)
!52
ARGUMENTOS$(‘.menu a’).on(‘click’, seleccionaItem);
!
function seleccionaItem(e){
e.preventDefault();
}
![Page 122: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/122.jpg)
!53
CONTENIDOS!
ETIQUETAS Y ATRIBUTOS
!
getters (obtener valor)
setters (dar valor)
![Page 123: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/123.jpg)
!54
CONTENIDOSETIQUETAS
!
.text()
.text(valor)
.html()
.html(valor)
ATRIBUTOS
!
.attr(‘atributo’)
.attr(‘atributo’, valor)
.data(data)
![Page 124: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/124.jpg)
!55
MANIPULACIÓN.append(obj)
.prepend(obj)
.clone()
.remove()
![Page 125: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/125.jpg)
!56
DIMENSIONES!
.width()
.height()
!
var ancho = $(obj).css(‘width’)
![Page 126: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/126.jpg)
!57
DIMENSIONES.innerWidth()
.innerHeight()
!
.outerWidth(true)
.outerHeight(true)
![Page 127: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/127.jpg)
!58
POSICIONAMIENTORELATIVO
!
.position().left
.position().top
ABSOLUTO
!
.offset().left
.offset().top
![Page 128: Curso desarrollo frontend: HTML - CSS - jQuery](https://reader035.fdocuments.us/reader035/viewer/2022062308/55a2c9a11a28ab1a6c8b4671/html5/thumbnails/128.jpg)
!59
FILTROS.first()
.last()
.eq(indice)
$(obj:odd)
$(obj:even)