Posicionamiento Front End

CICE POSICIONAMIENTO FRONT-END MASTERCLASS - ABRIL 2013

DESARROLLO WEB DESDE 1999 INSTRUCTOR EN CICE DESDE 2005 [email protected]
@luishj ACERCA DE MI

CÓMO FUNCIONA CLIENTE SERVIDOR PETICIÓN

LENGUAJES HTML, CSS, JS MYSQL, PHP , ASP ...

SITIO WEB - FRONT END HTML JS CSS

SITIO WEB - FRONT END CONTENIDO FUNCIONALIDAD PRESENTACIÓN HTML JS
CSS

LENGUAJE DE ETIQUETADO DE CONTENIDOS ESTRUCTURADOS, SEMÁNTICOS Y ACCESIBLES

ETIQUETA <h2 class=”title”>HTML</h2>

ETIQUETA <h2 class=”title”>HTML</h2> APERTURA CIERRE

ETIQUETA <h2 class=”title”>HTML</h2> ATRIBUTO

ETIQUETA <h2 class=”title”>HTML</h2> CONTENIDO

CONTENT IS KING

CONTENIDO ¿CÓMO SE DEFINE? ¿QUÉ SIGNIFICA? ¿QUIÉN ACCEDE A ÉL?

CONTENIDO ¿CÓMO SE DEFINE? ¿QUÉ SIGNIFICA? ¿QUIÉN ACCEDE A ÉL?
ESTRUCTURA SEMÁNTICA ACCESIBILIDAD

HTML5 ESTRUCTURA LOS CONTENIDOS APORTA SIGNIFICADO SEMÁNTICO ATRIBUTOS AÑADEN ESPECIFICIDAD
ACCESIBILIDAD

ANATOMÍA DE UN DOCUMENTO HTML <!DOCTYPE html> <html lang="es"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init <meta name="description" content="Desarrollo web multid <meta name="google-site-veriﬁcation" content="3co5YkFY <title>Nombre de la empresa</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <hgroup> <h1>Nombre de la empresa</h1> <h2>Claim de la empresa</h2> </hgroup> <nav class="nav"> <ul> <li><a href="#">Trabajos</a></li> <li><a href="#">Formación</a></li> <li><a href="#">Artículos</a></li> <li><a href="#">Sobre mi</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </header>

EJEMPLOS ETIQUETAS hgroup figure article footer aside nav header section

EJEMPLOS ATRIBUTOS type=”email” type=”tel” type=”number” type=”url” required placeholder autoplay controls

BUENAS PRÁCTICAS

BUENAS PRÁCTICAS URL + TITLE + H1 SITEMAP ÚNICO SITIO
WEB GOOGLE

GOOGLE DEVELOPERS

GOOGLE HTML5 RESPONSIVE / ADAPTIVE WEB DESIGN TIEMPOS DE CARGA

RESPONSIVE WEB DESIGN

FLUJO DE TRABAJO HASTA 2010

A LIST APART

RWD LAYOUT FLUIDO MEDIOS FLEXIBLES MEDIA QUERIES VIEWPORT

“IT'S NOT ENOUGH TO SIMPLY MODIFY THE LAYOUT BY MOVING
STUFF AROUND ON THE SCREEN AND ENLARGING OR DIMINISHING PARTICULAR DESIGN ELEMENTS” JACOB NIELSEN

SMASHING MAGAZINE

RWD ADAPTIVE WEB DESIGN

JS CSS HTML ADAPTIVE WEB DESIGN

CÓMO FUNCIONA CLIENTE SERVIDOR PETICIÓN

LATENCIA CLIENTE SERVIDOR PETICIÓN PETICIÓN OPERADOR

http://www.besquare.me/session/cutting-the-mustard/ https://speakerdeck.com/tmaslen/cutting-the-mustard-future-friendly-browser-support

ACCESIBILIDAD

ROBIN CHRISTOPHERSON HEAD OF DIGITAL INCLUSION, ABILITYNET @USA2DAY

ACCESIBILIDAD ENLACES SOCIALES ESTRUCTURA Y JERARQUÍA TIEMPOS DE CARGA

“IF SOMEONE SAYS THERE'S ONLY ONE TRUE WAY OF WORKING
AND DESIGNING ONLINE, LOOK AT THEM FUNNY” ETHAN MARCOTTE

Posicionamiento Front End

Posicionamiento Front End

Other Decks in Education

Featured

Transcript