“Los que se enamoran de la práctica sin la teoría

son como los pilotos sin timón, ni brújula, que

nunca podrán saber a dónde van.”

Leonardo Da Vinci (1452-1519) Pintor,

escultor e inventor italiano.
 ¿Por qué surge HTML5?

El uso de JavaScript y de FrameWorks,

cómo: jQuery, Dojo.js, ExtJS, etc., han
ayudado para mostrar los contenidos sin
necesidad de usar plugins.
 ¿Qué va a pasar con las Web en
HTML4?

HTML4 y HTML5 son 100% compatibles.

HTML4 seguirá funcionando sin problemas en los

navegadores.
 ¿Cómo se crea una página Web?

Tenemos que saber que una

página Web, se crea a partir
de diferentes tecnologías.

∞ HTML
∞ CSS
∞ JavaScript
 ¿Cómo se crea una página Web?

Podemos hacer 2 cosas a

la hora de generar y
maquetar una página
Web.
 ¿Cómo se crea una página Web?

1. Podemos escribir el
código de JavaScript y
CSS, dentro del
documento HTML.

Pero cómo tengas que hacer alguna

modificación, busca esta pistola .
 ¿Cómo se crea una página Web?

2. Podemos escribir el código de JavaScript y

CSS, en diferentes archivos y luego
vincularlos al documento HTML.

Esta opción te permite modificar sólo las

parte que deseamos.
 E j e m p l o d e c ó d i go c o n H T M L 5
<header>
<hgroup>
<h1>El Blog de Freddie Mercury</h1>
<h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2>
</hgroup>
</header>
<nav>
Aquí va la Barra de navegación con sus botones
</nav>
<section>
<article>Aquí va un post, con su titulo en h1</article>
<article>Aquí va un post, con su titulo en h1</article>
<article>Aquí va un post, con su titulo en h1</article>
</section>
<aside>
Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts anteriores, etc.
</aside>
<footer>
Pie de página, copyright, avisos legales, etc.
</footer>
E j e m p l o G rá f i c o d e l c ó d i go d e H T M L 5
 E j e m p l o d e l a et i q u eta a r t i c l e
<section>
<article>
<header>
<hgroup>
<h1>El Blog de Freddie Mercury</h1>
<h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2>
Meta-datos, como fecha de creación del artículo.
</hgroup>
</header>
<p>
La etiqueta <b>Article</b> debe usarse para fragmento independientes de contenido...
</p>
<aside>
Enlaces con artículos relacionados.
</aside>
<footer>
Enlaces a las redes sociales.
</footer>
</article>
</section>
 Atención: div no está muerto

Div se debe usar cuando se necesite un

contendor de objetos, como por ejemplo
una imagen. Div es un contender y no van a
tener un significado semántico.
MAQUETADO CON
PHOTOSHOP
MAQUETADO CON
PHOTOSHOP
MAQUETADO CON
PHOTOSHOP
DESPUES DE SECCIONAR
DIRECTORIO
RESULTADO
FLAT DESIGN
Buenas prácticas en el desarrollo
web
 CSS best practices
Usar un reset.css
<link> vs
@import
CSS Sprites
CSS best practices
CSS best practices
CSS best practices
 CSS best practices
Entendiendo la prioridad de los
estilos en CSS:
 Specificity
 Inheritance
 and the Cascade
 Specificity
#sidebar ul li a.myclass:hover {}

0 1 2 3
 Inheritance
 Los elementos heredan de su contenedor padre
 No todas las propiedades son heredables
Pero se puede declarar explicitamente que una
propiedad herede los estilos de su padre
Y ahora?
LESS extends CSS with dynamic
behavior
OOCSS
What’s a CSS Object?
Basically, a CSS “object” is a repeating visual pattern,
which can be abstracted into an independent snippet
of HTML, CSS, and possibly JavaScript.
Once created, an object can then be reused
throughout a site.
OOCSS
OOCSS

Un objeto debe verse igual sin importar dónde

este colocado
En javascript también!
JSLint
JSHint