HTML5 y CSS3 para diseñadores

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