t r e
p
g n
i t l u o s c n . HTML5 y CSS3 para Diseñadores (v. 2012) o rt C e p e x b . o Marlon Ceballos -‐ @adobexpert w d w A w http://www.xpert.co/cursos-adobe/html5-css3.htm
Adobe Community Professional / Adobe Cer;fied Instructor
Adobe Consulting Adobe Consulting
www.xpert.co
COMMUNITY PROFESSIONAL
CERTIFIED INSTRUCTOR
Design Master - Web Master
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w CERTIFIED INSTRUCTOR
Design Master / Web Master
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . o rt C e Adobe Consulting p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Historia de los o estándares t C er p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Inicios (90´s)
t r e
• Los navegadores desarrollan caracterís;cas específicas g • Algunas son adoptadas por los diseñadores w eb n i t l • Algunas de éstas caracterís;cas su e consideran o s c n . parte de HTML. t o
p
C er p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
HTML 2.0 (1995)
t r e
• Formalización de sintaxis • Estandarizó lo que ya se usaba • Poco avance.
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
HTML 3.0 (1996) • Poco avance • Nunca fué adoptado.
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
HTML 3.2 (1997)
t r e
• Agregó caracterís;cas ya soportadas por navegadores g • Problemas con las diferencias de soporte e n l os n i t l navegadores. u
p
o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Web Standards Proyect (1998)
t r e
• Impulso a un entorno basado en estándares • Agregaron importancia a las recomendaciones g W3C como estándares n i t l • Presionaron a los desarrolladores de o u s c n . navegadores para soportar o estándares y t r C e promocionaron los que l o h acían. p e
p
x b . o d ww A w
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
HTML 4.0 (1999)
t r e
• Avance significa;vo para la web • Estabilización de sintaxis y estructura de HTML g • Aún se sigue usando in
p
t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
XHTML 1.0 (2000)
t r e
• Buscó reemplazar HTML 4.0 • Basado en XML para tener una mejor estructura g • No hubo mucho apoyo por parte de lios n t l diseñadores u o
p
s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Mientras tanto... (2000 -‐>...)
t r e
• Crecimiento del ancho de banda • Flash y AJAX g • La web se quedó corta n i t l u • Se empieza a desarrollar XHTML 2.0 (hasta o s c n . 2009). o rt
p
C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Inicios d e H TML5 t o r C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
WHATWG
t r e
• Web Hypertext Applica;on Technology Working Group. Grupo que no compar;ó la dirección de XHTML 2.0 g n i t l • Decidieron seguir trabajando en eul desarrollo de o s c HTML n . o rt C e • W3C reconoce y adopta e l t rabajo d e W ATHWG p e x b . bajo el nombre do e HTML5 w (2007).
p
d w A w
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
HTML5
t r e
• Compa;ble con versiones anteriores • Nuevas e;quetas estructurales y soporte para g APIS (audio y video na;vo) n i t l • Mayor facilidad para crear contenido poara u s c n . disposi;vos móviles o rt C e p • Gran apoyo por empresas c omo A pple, G oogle y e x b . o Microsob. w d
p
A ww
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Novedades de HTML5
t r e
• Nuevas e;quetas que mejoran la semán;ca • APIS na;vas que ;enden a eliminar el uso de g plug-‐ins y facilitan la creación de aplicaciones n i t l • Soporte na;vo de video y sonido.u o
p
s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Linea de Pempo de HTML5
t r e
• 2004: Conformación del WHATWG • 2007: W3C adopta el trabajo de WHATWG g (HTML5 working drab) n i t l • 2009: Crece interés por HTML5. u o
p
s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Linea de Pempo de HTML5
t r e
• 2020: Recomendación (proyectado) • Recomendación vs Adopción • Diferencias de madurez entre partes idne g la t l especificación u o s c n . • Ya se puede usar! o rt
p
C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Soporte actual a HTML5
t r e
• www.findmebyip.com • www.caniuse.com • www.html5test.com.
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Qué es y qué no es HTML5
t r e
• hip://www.apple.com/html5/#showcase • “HTML5 is a brand” g • Qué NO es: in
p
t l – CSS3 transi+ons u o s c n . – SVG o rt C e – Geolocalización p e x b . – CSS3 @fon6acedo w w A – etc. w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
PreямБjos
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Novedades d e H TML5 t o r C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
DOCTYPE simplificado
t r e
• <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi;onal//EN" "hip://www.w3.org/TR/ xhtml1/DTD/xhtml1-‐transi;onal.dtd"> g
p
n i t l u o s c n . • <!doctype html> o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Codificación de caracteres
t r e
• <meta hip-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8" />
p
g n
i t l • <meta charset="UTF-‐8"> u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Nuevas ePquetas
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Nuevas ePquetas
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o w d • h9p://www.w3schools.com/html5/html5_reference.asp A ww • h9p://www.w3schools.com/html5/ www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Web Forms 2.0
t r e
• Formularios más usables • Menor uso de JavaScript • Nuevos elementos.
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
APIs naPvas • Video • Sonido.
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de estructura
t r e
• <sec;on></sec;on>
– “Sección genérica de un documento o aplicación... grupo temá6co de contenido, generalmente c on u n g n i encabezado...” lt
p
u o s c n . t o • Ejemplo: capítulos, descripciones, C er etc. p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de estructura
t r e
• <ar;cle></ar;cle>
– “Composición que puede ser independientemente reusada o distribuida” g
p
n i t l u o s cun • Ejemplo: post de un blog, arxculo d.e n o rt C e magazine, un widget, etc. p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de estructura
t r e
• <aside></aside>
– “Sección con contenido relacionado de forma tangencial al contenido principal pero que pg odría n i considerarse separado” lt
p
u o s c n . t o r • Ejemplo: sidebars (laterales), publicidad, etc. C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de estructura
t r e
• <header></header>
– “Grupo de ayudas de navegación o ayudas introductorias que generalmente con6ene g n i encabezados de secciones. Un documento p uede t l u tener múl6ples headers” o s
p
c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de estructura
t r e
• <hgroup></hgroup>
– “Representa el encabezado de una sección. Agrupa un conjunto de elementos h1-‐h6 para que ag ctúen n i como encabezados individuales” lt
p
u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de estructura
t r e
• <footer></footer>
– “Representa un pie de página para la sección que precede. Generalmente con6ene información c omo g in el autor, links relacionados, copyright, lt etc”
p
u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de estructura
t r e
• <nav></nav>
– “Representa una sección con vínculos de navegación (bloques mayores de navegación)” g
p
n i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de contenido
t r e
• <figure></figure>
– “Contenido que opcionalmente 6ene una leyenda (cap6on)” g
p
n i t l u o s c de • Ejemplo: ilustraciones, fotos, nejemplos . o rt C e código, etc. p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de contenido • <video></video> • <sonido></sonido>
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de contenido
t r e
• <embed></embed>
– “Representa un punto de integración para una aplicación externa o contenido interac6vo tg al como n i Flash” lt
p
u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas de contenido
t r e
• <canvas></canvas>
– “Provee scripts con un canvas basado en bitmaps que puede ser ser usado para mostrar imágenes. g in en la Permite importar, modificar y dibujar lgtraficos u página” o s
p
c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas para desarrollo
t r e
• <meter></meter> • <progress></progress> g • <;me></;me> n i t l u • <details></details> o s c n . o rt • <command></command> C e p e • <menu></menu> b .x
p
o d ww A w
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
EPquetas removidas • basefont • big • center • font •s • strike •i • u.
t r e
p
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
g n
CERTIFIED INSTRUCTOR
EPquetas removidas • frame • frameset • noframes
t r e
p
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
g n
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Modelos de coontenido t C er p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Modelo de contenido HTML4
t r e
• Block level
– div, form, h1, h2, h3, h4, h5, h6, li, ol, p, table, etc
• Inline level
p
g n
i t l etc. – a, em, img, input, label, span, strong, u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Modelo de contenido HTML5
t r e
• Metadata • Embedded g • Interac;ve n i t l u • Heading o s c n . o rt • Phrasing C e p e x • Flow b . o w d w • Sec;oning A w
p
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Contenido Metadata
t r e
• “...contenido que configura la presentación o comportamiento del resto de contenido”
p
g n
i t l • Ejemplo: base, command, link, mu eta, no oscript, s c n . script, style, ;tle, etc. o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Contenido Embedded
t r e
• “...contenido que importa otros recursos al documento”
p
g n
i t l • Ejemplo: audio, canvas, embed, iu mg, moath, s c n . object, svg, video, etc. o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Contenido InteracPve
t r e
• “...contenido orientado a interacción”
p
g • Ejemplo: a, audio, buion, details, embed, n i t l iframe, img, input, keygen, label, u menu, o bject, o s c n . select, textarea, video, etc.o t C er p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Contenido Heading
t r e
• “...define el encabezado de una sección que puede ser marcada con elementos de encabezado o implícito por el contenido g del n i encabezado” lt
p
u o s c n . o rt C ehgroup, etc. • Ejemplo: h1, h2, h3, he4, h5, p h6, x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Contenido Phrasing
t r e
• “...texto del documento así como elementos usados para marcar el texto dentro de las etructuras de párrafo” g
p
n i t l u o s c n . • Ejemplo: em, image, label, o mark, stpan, strong, r C e etc (similar a inline elements e n H TML4). p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Contenido Flow
t r e
• “...elementos que deberían ser incluídos en el flujo normal del documento”
p
g n
i t l • Ejemplo: anchor, ar;cle, aside, blockquote, u o s c n . canvas, div, em, table, etc. o t C er p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Contenido SecPoning
t r e
• “...contenido que define el alcance de headers y footers”
p
g n
i t l • Ejemplo: ar;cle, aside, nav, sec;on, h1-‐h6. u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Algoritmo de estructura
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Algoritmo de estructura
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Formularios
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Uso el DIV tag?
t r e
• Use secPon y arPcle cuando se requiera una sección con xtulo. De lo contrario, use div. • Use aside para contenido relacionado nal gtema i t principal. De lo contrario, use div.ul o s c n . • Use div para agrupar contenido. t o
p
C er p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Video y Audio oen H TML5 t C er p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Formatos de video
t r e
• .mov (QuickTime) • .flv (Flash video) • PROBLEMA: Requieren plug-‐ins.
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Video NATIVO en HTML5
t r e
• Lo bueno:
– No requiere plug-‐ins externos – Compa+bilidad entre navegadores – Fácil uso de la e+queta <video>
p
g n
i t l u o s c n . • Lo malo: o rt C e d iferentes f ormatos – Los navegadores soportan p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Video en HTML5
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
H.264
t r e
• Alta calidad de video • Soportado por Microsob y Apple • Supeditado a patentes.
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Ogg Theora
t r e
• Menor calidad que H.264 • Soportado por Firefox y Opera • Open Source.
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
VP8
t r e
• Alta calidad • Desarrollado por Google g • Open source n i t l u o • Mozilla lo impulsa para ser un esstándar.
p
c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Cómo converPr a éstos formatos
t r e
• Web:
– www.webmproject.org/tools/ – www.firefogg.org/make/
p
g n
i t l • Aplicaciones: u o s c n . – www.easyhtml5video.com#download o rt C e – www.handbrake.fr e p x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Audio en HTML5
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . CSS3o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Qué es CSS3
t r e
• Colección de módulos que ex;ende CSS2.1 • Es un drab (NO una especificación).
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Algunos módulos CSS3
t r e
• Selectors • Box Model g • Backgrounds and Borders n i t l u • Text Effects o s c n . • 2D/3D Transforma;ons Co rt e p e x • Anima;ons b . o w d w • Mul;ple Column Layout A w • User Interface.
p
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Historia de CSS3
t r e
• CSS 1.0: 1996 • CSS 2.0: 1998 g • CSS 2.1: 2004 n i t l u • CSS 3.0: En progreso (desde 2001). o s
p
c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Recursos
t r e
• www.w3.org/Style/CSS/current-‐work.en.html • www.findmebyip.com g • www.caniuse.com n i t l • www.w3schools.com/css3/. su o
p
c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Antes de usar CSS3
t r e
• CSS3 mejorará su diseño (se jus;fica)? • Verifique que el diseño no dependa de CSS3 • Verifique que su diseño no se afecte sin i eg l si;o t l web es visto en un navegador que no so oporta u s c n . CSS3. t o
p
C er p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Prefijos propietarios
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Selectores
t r e
• Tag selectors • ID Selectors g • Class selectors n i t l u • Compound selectors (descended o s selectors)
p
c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Selectores avanzados
t r e
• Sibling Selectors (Child & Adjacent)
– Mas específicos que “descended selectors” – Relación “parent-‐child” y “sibling” g
p
n i t l • Airibute selectors u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Sibling selectors
t r e
• div > id (child sibling)
– Selecciona elementos que sean “child directo” del elemento a la izquierda g
p
n i t l • h1 + p (adjacent sibling) u o s c parent) (. mismo – Selecciona los p que sean “adjacent” n t o r de h1 pero que se encuentren debajo de h1 C justo e p e x CSS3) b • h1 ~ p (general sibling -‐ N EW . o w d ue w sean “siblign” de h1 y que se – Selecciona los Ap qw encuentren bajo h1 (no necesariamente justo debajo). www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Child & Sibling selectors
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Ahribute selectors (CSS 2.1)
t r e
• a[href]
– Selecciona elementos con el atributo
p
• a[href=”home”]
g n
i t l y valor. – Selecciona elementos con el atributo u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Ahribute selectors (CSS 2.1)
t r e
• a[href~=”home”]
– Selecciona elementos con el atributo y valor que contenga el texto separado por un espacio g
p
n i t l • a[href|=”home”] u o s y. vcalor que – Selecciona elementos con el atributo n t o contenga el texto separado Cpor uen rguión o con el valor p e exacto. x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Ahribute selectors (CSS3)
t r e
• a[hrefˆ=”hip://”]
– Selecciona elementos con el valor de atributo que contenga el texto al inicio (prefijo) g
p
n i t l • a[href$=”.pdf”] u o s c que de a.tributo – Selecciona elementos con el valor n t o contenga el texto al final (sufijo) C er p e x • a[href*=”.pdf”] ob . w d wcon el valor de atributo que – Selecciona eA lementos w contenga el texto (cualquier lugar). www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Color
t r e
• Es uno de los módulos más maduros en CSS3 • hip://www.w3.org/TR/css3-‐color/ g • Igual que en CSS2 es posible definir color a n i
p
t l – Foregroud (color) u o s c n . – Background (background-‐color) o rt C e – Border (border-‐color).e p x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Formatos de Color CSS 2.1
t r e
• Generalmente: – hexadecimal – keywords
p
g n
i t l • También en CSS 2.1 (poco soporte) u o s c n . – RGB. o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Formatos de Color CSS3
t r e
• RBG:
– rgb(200, 150, 120) / rgb(65%, 40%, 10%;)
• RGBA • HSL
p
g n
i t l u o s c n . – hsl(240, 60%, 80%) o rt C e p • HSLA e x b . o d ww • CMYK A w – cmyk(.5, .65, .2, .9) www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Gradients
t r e
• CSS Gradients Webkit:
p
vendorPrefix(+poGradient, posiciónInicial, posiciónFinal, g n i color(posición, valor), color (posición, valor)); lt
u o s c n . t o r -‐webkit-‐gradient(linear, lei tC op, right bo9om, color-‐ e p e stop(0, yellow), color-‐stop(1, r ed)); x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Gradients
t r e
• CSS Gradients Mozilla:
p
vendorPrefix(posiciónInicial, color(valor, posición), color g n i (valor, posición); lt
u o s c n . t o r -‐moz-‐linear-‐gradient(center C top, #00F 0%, #0F0 100%); e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Gradients
t r e
• CSS Gradients Opera:
p
vendorPrefix(posiciónInicial, color posición, color g n i posición); lt
u o s c n . t o -‐o-‐linear-‐gradient(bo9om, #FFF C 0%, e#r0AF 100%); p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Fuentes o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Web Fonts
t r e
• Web Fonts: Uso de @font-‐face • @font-‐face permite especificar la fuente a usar g en una página web n i t l • El navegador descarga la fuente. u o
p
s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Formatos para web
t r e
• EOT (Embeddeb Open type)
– Desarrollada para IE4 – Solo soportada por IE g n i te IE9 – Unico formato soportado por IE antes ld
p
u o s c n . • WOFF (Web Open Font Format) o rt C e y o tros c olaboradores – Desarrollada por Mozilla p e x b . orking Drai en la W3C – Actualmente es W o w d w A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Por qué no uso fuentes “normales”
t r e
• TrueType / OpenType • Las licencias no permiten uso online g • Las fuentes web son aprox 40% más liivianas. n
p
t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Servicios de fuentes online
t r e
• www.typekit.com • www.fontsquirrel.com
p
g n
i t l • www.google.com/webfonts. su o c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Formatos  soportados
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Sintaxis
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Page Layout o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Flex Box Layout Module
t r e
• Permite determinar cómo se organizaran los elementos child dentro de su parent g • Actualmente ;ene un soporte muy pobre p or n i t l parte de los navegadores. u
p
o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
display
t r e
• La propiedad display permite controlar los elementos chid de un parent:
p
– display: box; – display: inline-‐box;
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
box-‐flex
t r e
• La propiedad box-‐flex permite hacer flexibles los chids de un parent con display: box
p
– box-‐flex: 1; -‐> El valor determina la proporción g n i lt – box-‐flex: 0; -‐> Respeta el tamaño
u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Flex Box Layout Module (NUEVO!)
t r e
• hip://dev.w3.org/csswg/css3-‐flexbox/ • hips://developer.mozilla.org/en/CSS/Flexbox • Actualmente compa;ble con Chromeing
p
t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Box Model o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
border-‐radius
t r e
• Un solo valor: – border-‐radius: 15px;
• Dos valores:
p
g n
i t l – border-‐radius: 5px/20px; u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
box-‐shadow
t r e
• box-‐shadow: desplHoriz desplVert blur color • box-‐shadow: 2px 2px 5px #000;
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
CSS3 Background
t r e
• background-‐size: contain
– Escala el bg proporcionalmente. No recorta
p
• background-‐size: cover
g n
i t l el – Escala el bg proporcionalmente cubriendo u o s c elemento contenedor. Puede recortar n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
CSS3 Background
t r e
• background-‐repeat: space
– Repite el bg hasta rellenar el contenido (sin recortar) y aumentando espacios si es necesario g
p
n i t l • background-‐repeat: round u o s c(sin recortar) y – Repite el bg hasta rellenar el contenido n . t o r escalando la imagen si es nC ecesario e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
MulPple Backgrounds
t r e
• Simplemente pasa mul;ples valores a la propiedad background separados por una coma
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
background-‐origin
t r e
• background-‐origin: padding-‐box
– Alinea el bg en la esquina superior izquierda del padding. Es el valor por defecto g
p
n i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
background-‐origin
t r e
• background-‐origin: border-‐box
– Alinea el bg en la esquina superior izquierda del límite externo del borde g
p
n i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
background-‐origin
t r e
• background-‐origin: content-‐box
– Alinea el bg en la esquina superior izquierda del contenido, dentro del padding g
p
n i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . CSS3 Transforms o & TrransiPons t C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
CSS3 Transforms
t r e
• hip://www.w3.org/TR/css3-‐transforms/ • CSS3 con;ene módulos de transformaciones 2D g y 3D n i t l • transform: función(valor o valores) u o s c n . • transform: scale(1.5); o rt
p
C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
CompaPbilidad
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Propiedades a transformar • Escala • Sesgado (skew) • Rotación • Translación.
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Transforms FuncPons
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
transform-‐origin
t r e
• Esta propiedad define el punto de transformación el cual es por defecto en el centro. g
p
n i t – transform-‐origin: 50% 50%; l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
CSS3 TransiPons
t r e
• hip://www.w3.org/TR/css3-‐transi;ons/ • Propuesto como estándar por WebKit g • Permiten animar cambios en las propiedades d e n i t l los objetos en un ;empo definidou o s c n . t fin. • Evita el uso de JavaScript po ara ér ste
p
C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Qué se puede animar?
t r e
• hip://www.w3.org/TR/css3-‐transi;ons/ #animatable-‐css
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
TransiPons ProperPes
t r e
• transi;on-‐property • transi;on-‐dura;on • transi;on-‐;ming-‐funcion • transi;on-‐delay
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
transiPon-‐Pming-‐funcPon
t r e
• linear: velocidad constante • ease: inicia rápido y desacelera g • ease-‐in: acelera n i t l u • ease-‐out: desacelera o s c n . o rt • ease-‐in-‐out: acelera y desacelera. C
p
e p
e x b . o d ww A w
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Shorthand notaPon
t r e
• transi;on: propiedad velocidad easing delay; • transiPon: height 1s ease-‐in .5s;
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
CompaPbilidad
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
3D TransiPons
t r e
• hip://www.webkit.org/blog-‐files/3d-‐ transforms/morphing-‐cubes.html
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Media Queries o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Media Type DeclaraPons
t r e
• <link href=”mobile.css” media=”screen”/> • Parte de CSS2 g • Muy limitado n i t l u • Muchos disposi;vos no lo interpretan o s c n . correctamente. o rt
p
C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Media Queries
t r e
• <link href=”mobile.css” rel=”stylesheet” media=” screen and (color)”/> g • Media Type: caracterís;cas n i t l • Keyword: “and”, “only”, “not” u o s c n . • Expression. o rt
p
C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Media Queries (otras sintaxis)
t r e
• <link href=”mobile.css” rel=”stylesheet” media=” screen and (max-‐width: 480px), projec;on and (color)”/> g n i t l • @import url(“mobile.css”) screen and (color); u o s c n . • @media screen and (max-‐width: o r4t80px) { C e ...es;los... p e x b . }. o w
p
d w A w
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
CaracterísPcas
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Valores mínimos y máximos
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Tipos de diseños w eb t o r C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
La web hace unos años
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
La web hoy
t r e
p
g n
i t l u o s c n . o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Fixed Layouts
t r e
• Tamaños fijos • Ningún ;po de reacción a cambios g • Orientado a resoluciones de escritorios ( no n i t l móviles) u o s c n . • Diseños “pixel perfect” o rt C e • Fáciles de crear. be .xp
p
o d ww A w
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Flexible Layouts
t r e
• Diseños web adaptables al tamaño del navegador o “view port” g • Requiere más planeación y verificación n i t l • Efectos nega;vos en pantallas muy u pequeñas. o
p
s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
Responsive Layouts
t r e
• Diseñar un si;o web para múl;ples tamaños de pantallas g • Ajuste del diseño de acuerdo al tamaño u n i t l orientación (respuesta) u o s c n . • Reorganización de elementos o rt C e p • Requiere más planeación e x b . o • CSS -‐ Media Queries. d ww
p
A w
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
AdapPve Layouts
t r e
• Complementación del responsive design • Personalización de la presentación del contenido g para cada disposi;vo n i t l • Eliminación de algunos elementos. u o
p
s c n . o rt C e p e x b . o d ww A w www.xpert.co
Adobe
Consulting
CERTIFIED INSTRUCTOR
t r e
p
g n
i t l u o s c n . Gracias! o rt C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Esta presentación (y otras)
t r e
p
g n
i t l u o s c n . o rt www.xper.co/presenta C e p e x b . o d ww A w www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR