Curso de HTML5 - Mejoran..

Curso de HTML5 | Mejorandola.
la
Apuntes por @geninteractive (follow me)
Las notas a continuacin son apuntes de @geninteractive de las sesiones de mejorando.la
curso de HTML, no es material emitido u oficial del curso pero pueden ser de apoyo para el
proceso de los interesados. Mejorando.la compartir sus videos y contenidos oficiales en la
plataforma del curso.
---> Si estas en el curso, la mejor manera de agradecer para segui adelante es

dejarme un punto! ;) AQUI <---
http://tinyurl.com/mejorandoeldocumento
Indice:
Sesin1 - Introduccin html
Sesin2 - html css
Sesin3 - html css js
Sesin4 - Node.js
Sesin5 - Django - Python
Adicionales
Sesin 1
Introduccin
Como era la Web:
Stack de tecnologas actual:
MongoDB: Base de datos no relacional

NodeJS: Del lado del servidor - Trabaja en tiempo real
HTML5: No es un lenguaje de programacin, es un lenguaje de modelado de informacin
En HTML no se disea, se disea en CSS3!!!

CSS3 Lenguaje de diseo
JS (Javascript): trabaja del lado del cliente
John Freddy Vega @freddier
Javascript NUNCA se conecta directamente a una base de datos. Cuando preguntan cmo
hacerlo, un grillo muere en Kyoto#mejorandocurso
Contenido:
Ms info en Introduccin a HTML5

PDF Intro HTML5 de Mejorando.la
Ejemplos: Animacin con css
Stylus (imagen abajo: CSS plano - imagen abajo a la derecha con Stylus)
Esto es todo lo que necesitas para programar un Chat: [Node.Js]
El futuro es mvil
Diseo para mviles:
El tamao de un dedo para apple y android:

Los diseadores intelectuales y atractivos jams colocan una fuente en web apps o movil de
menos de 16px #mejorandocurso
Fuentes para mviles ideal 16 px.
No hay hover!
Responsive
Clabie.com un sitio responsive por @neojp
Retina display:
Mobile
Tablet
Desktop
Generar imgenes para retina

Desde el CSS
Con html
Se deben exportar (desde PSD) al 50% la imagen.
Qu significa Retina Display en el diseo web

Por: @freddier | Cristalab
La solucin es fcil: Pblica tus imagenes al doble de resolucin. Si quieres
que un logo se vea bien a 100x100 en Retina, crea una imagen de 200x200 y
ponla de 100x100 usando CSS. Lo mismo con HTML para las imagenes de tu
contenido. No hay mejores soluciones.
Ver articulo completo
Trabajemos para los OS mas usados IOS

y Android
A pesar de que Android vende ms, iOS es mucho ms usado en el planeta para conectarse a
la web mvil #mejorandocurso
En el mundo hispano, en USO, Android tiene el 46.5% y iOS el 41.5% (BB tiene el 6.59%)
#mejorandocurso
Chrome Lider en navegadores, 2do lugar IE

Chrome es el navegador #1 de la web en espaol, con el 40% del total en el 2012
#mejorandocurso
-- Veamos morir IE en ie6countdown -Ie Actualmente (informacin no actualizada)

Internet Explorer 9 e Internet Explorer 10 son navegadores buenos (en serio) con buen soporte
HTML5 y CSS3. #mejorandocurso
En caniuse.com pueden ver, actualizado, qu capacidades de HTML5 y CSS3 soportan todos
los navegadores #mejorandocurso
/
Ejercicio HTML
Estructura HTML5
<meta charset="utf-8"/>: para la codificacin de idioma (tildes, ees etc..)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Mi primer proyectito</title>
</head>
<body>
</body>
</html>
Recomendacin: Usar los JS al final del doc html
Boilerplate Aplicacin web tipo template.

Algunas lneas interesantes del index.html de boilerplate
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Chrome hackea internet explorer y renderea Chrome - Fuerza a Chrome a ejecutarse.
<meta name="description" content="">
Es la Descripcin que sale en la busqueda de google
Stylus:
Para instalar Stylus debes Instalar Node.js (Como instalar Node.js) luego copiar y pegar en la
consola
$ npm install stylus
Coffee Script es un stylus para JS

Normalize: Es un archivo CSS que normaliza el doc estandarizando los elementos.
//REGULADOR//
Descargar el CSS y vincularlo (en el head) Ver archivos fuente:
<link rel="stylesheet" href="normalize.css">
reset.css es un CSS que pone todo en ceros, el h1 es igual al p, etc...No es eficiente.
Prefix Free
Nos evita poner los prefijos propietarios: -webkit- -moz- o -msEj: Asi seria sin Prefix
Asi es con Prefix Free:
#rigazzi
{
border-radius: 25px;
}
Descargar el JS y vincularlo (en el head) Ver archivos fuente:
<script type="text/javascript" src="prefixfree.min.js"></script>
Nota:
CSS siempre debe cargar primero que JS. Los JS "bloquean" la carga del sitio. Los CSS
descargan en paralelo. #mejorandocurso
prefix-free, la librera para evitar el -motor- al usar CSS3 SOLO funciona desde un servidor,
no en *local. #mejorandocurso
*Es decir ejecutando el HTML directamente en el navegador (HD/usuario/desktop/index.html)
Usa Mamp (mac) o Wamp (Win) para un servidor local.
Video-tutorial de apoyo para la instalacin del servidor local
Estructura Final:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Nuevo AVE0 2013</title>
<meta name="description" content="Menos gasolina, ms HTML5"> 
<link rel="stylesheet" href="normalize.css">
<script type="text/javascript" src="prefixfree.min.js"></script>
</head>
<body>
<header>
<h1>Nuevo AVEO 2013</h1>
<h2>Menos gasolina, ms HTML5</h2>
</header>
</body>
</html>
Descargar archivos fuente de la sesin1
Sesion 2
Este el EL mockup
Estructura HTML
Normalize debe ponerse de 1ro - INDISPENSABLE
Las imagenes se ponen en la etiqueta figure dentro un img y luego un figcaption
@GOLLUM23
La diferencia es que el figure se usa para contener una imagen o canvas, el figcaption va dentro de la etiqueta
figure y lo que tienes es el texto descriptivo de la imagen o canvas.
@Vheisssu
Se puede decir que si es meramente semntico, como la etiqueta <hgroup> a la hora de usar varios <h2> <h3>
etc. Su uso ms que nada es para marcar contenido que tiene imgenes, diagramas, fotos, etc.
Puedes ver ms informacin de su uso en la W3C: http://dev.w3.org/html5/markup/figure.html
Estilos CCS
Em: Es una variable de medida por defecto. (teoria en librosdelweb.es)
Al modificar esa variable (a futuro) modificando el valos del em
Es un error ponerle a todos los mrgenes 10px. Es una mejor prctica usar 1em
#mejorandocurso
Padding: margen interno
Margin: margen externo
1. margin: a b c d; // 4 valores es un valor para cada lado en sentido de las manecillas del
relog (arriba der, abajo, iz)
2. margin: a b c; // valor A arriba, valor B abajo, valor C izq y der.
3. margin: a b; // valor A =arriba y abajo, valor B = izq derecha.
4. margin: a; valor para todos los lados
Hgroup: elemento semntico para agrupar Hs
En el H1 el em no es de 16 px sino del valor interno del h1, si el h1 tiene 2 em y yo
modifico el em entonces ahora es como 4em. @freddier
Sombra CSS:
text-shadow: #0ff 5px 5px 0px;
color
movimiento en x
movimiento en y
blur
Colores en RGBA
rgba (rojo, verde, azul, alpha)
Rgb de 0 a 255
Alpha va de 0 a 1 es decir 0.1, 0.2, 0.3 etc..
Doble fondo en una equiteta:

header
{
background: url("logo.png") no-repeat 95% center, /*funciona como capas */
url("fondo.png");
background-size: 200px ,100px 100px;
}
Mas arriba mas al frente, mas abajo mas al fondo
en background-size, el valor 130px es para el 1 url, despues de la coma se ponen las

dimensiones del 2do (fondo)
en el bground1 (logo.png) no-repeat (pues no repite) y 98% es la posicin que tiene en el eje x,
si fuera 100% iria hasta la derecha totalmente, Center es para centrar verticamente el logo.
(Este man va VOLANDO!)
_____ Artculo sobre EM _____
Aclaraciones sobre la unidad "em" de CSS. Si se quedaron con dudas aca

las resolveremos.
@luciano_sds
Debido a que he visto comentarios donde estn diciendo que un em es el equivalente a 16px me doy
cuenta de que el concepto explicado por @freddier no ha quedado del todo claro, por lo cual me permito
crear esta aclaracin en la seccin preguntas para que pueda ser vista por cualquier alumno.
El em es una unidad de medida relativa al tamao en pixels mas cercano de un contenedor padre.
Como puede ser que no sea tan explicativa esa definicin lo mejor va a ser explicarlo con cdigo.
Supongamos que tenemos este HTML:
<body>
<section>
<p>Esto es un parrafo</p>
</section>
</body>
Y nuestro CSS es el siguiente:
body {
font-size: 16px;
}
p{
font-size: 1m;
}
body{
font-size: 16px;
}
p{
font-size: 1em;
}
En este caso la etiqueta <p> tiene un tamao de 1em, y si nos guiamos por la definicin, el valor en
pixels mas cercano de un elemento padre son los 16px del body, es decir, 1em = 16px.
Pero ahora supongamos que nuestro CSS es este otro:
body {
font-size: 16px;
}
header {
font-size: 20px;
}
body p {
font-size: 1m;
}
body{
font-size: 16px;
}
header{
font-size: 20px;
}
p{
font-size: 1em;
}
Ahora el elemento padre mas cercano a nuestro <p> que contiene un valor en pixels deja de ser <body>
y pasa a ser <header> que contiene un tamao de fuente de 20px, por lo que en este caso, para nuestro
prrafo 1em = 20px.
Espero se haya entendido mi explicacin y sino pregunten que trataremos de responderle sus dudas.
Y si alguien nota que hay algo mal (recuerden que yo tambin estoy aprendiendo) entonces seran
bienvenidas las correcciones.
_____ Fin del artculo sobre EM _____
Usen este lorem Ipsum para simular los textos.
Por que no usar Lorem ipsum

Lorem ipsum tiene metricas perfectas a nivel de texto. Se generan expectativas irreales a como
se va a ver el texto.
Orden en el CSS (Entra en el examen ojo...)

No se debe usar el css en orden de aparicin
*Organizar alfabeticamente los atributos - Recomendacin.
El orden debe ser:

Alfabtico
1. etiquetas
2. id
3. clases
@prigazzi
Primero, deberan incluir el CSS de elementos puros.
Luego los CSS referenciados por ID.
Y finalmente, las clases.
Y dentro de cada definicin, los parmetros ordenados alfabticamente.
Ej:
body {
font-size: 16px;
}
header {
border-radius: 15px;
width: 100%;
}
#historia {
margin: 2em;
padding: 1em;
}
.imagenes {
width: 100%;
}
(Seguir el cdigo de @freddier y tomar notas es moe complicado.)

#historia / CERO PNGs (Se han generado los efectos con shadows en box y text con CSS)
Con CSS3 ya Se pueden hacer columnas

Funciona en ie10 y en navegadores sensatos con prefijo
Asi se ve:
Hacer imagenes responsive:

Se le pone ancho 100% Y YA! WTF
Usen max-width
Para margenes comunes usar: margin 1em
Como poner un elemento al lado del otro Float???

En css 3 tenemos algo mucho mejor: (se le agrega a ambos estilos.)
Display: inline-block
Dos cajas pueden estar en el mismo renglon@
Si hay espacio! si no hay la pone abajo.
El vertical align las alinea arriba
Y es responsive!!! Esto es hermoso / @freddier
En realidad no es responsive, es elstico.
@edy_rr
Este artculo me parece interesante y lo comparto para todos aquellos que quieran ver mas de
Responsive Design
Explicacin:
GOLLUM23
Es util utilizar
display:inline-block;
cuando haces tus diseos y mas si son pensados en responsive (como debe ser), ya que el float tiene el
problema que no redimensiona a su contenedor padre si tienes dos bloques uno al lado del otro en la resolucion
de desktop al pasarlo a movil quedara uno abajo del otro pero su contenedor padre no se extiende se tiene que
usar un fix en un div consecutivo que tenga una clase con una propiedad que es
clear:both;
Con inline-block te evitas este problema.
Poner el footer fijo

En el ejemplo es un NAV con enlaces de personalizar, comprar y contactar
Recomendacin: Usar un solo NAV en cada HTML
Se pone el Nav como fixed
left y bottom para que quede pegada abajo.

Como se monta en el fig, se pone margin bottom para evitarlo.
Display inline-block alinea horizontalmente los li.
Animando los rollovers del Nav
Adobe Edge herramienta para animar en CSS y es gratis por este ao.
Preguntas:
Gradientes en CSS: pueden usar Colorzilla
Relative y absolute: Depende de tu diseo.
Centrar con margin 0 auto - es apropiado y comodo.
Border radius a las imagenes? SI! a videos etc...
No hay margin por defecto en el display inline-block - Leonidas dice... poner margin 0 en el
font-size de la caja padre.
por que strong y no B: HTML no es para diseo... usar strong.
Maxima cantidad de fondos posibles: 1 Byte / 256
Es mas rapido el rendero hacer Class
Como exportar a RetinaDisplay:
Truco para imgenes para Retina Display livianas y hermosas: Exporten al doble de la
resolucin, pero calidad JPG 50%#mejorandocurso
Fin de la clase.
Los archivos fuente quedan en la plataforma
Sesin 3
Estndares en Video y HTML5

@cvander
etiqueta video:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Enlaces sobre video HTML5

Videosws
html5video
video.js
Chrome navegador Geek
Chrome y safari tienen base -webkithtml5 no esta terminado como standard
Cada navegador tiene su formato de video (codificacion)
h.264 tiene patentes - Mas popular
Apple adobe blueray ytube
avi, mkv, mp4
Theora Gratis! Ogg
linuz firefox
VP8 webM chrome Android
Google compra ON2 y va royalty free
No lo apoyan msoft, apple, adobe..
Audio
mp3
2canales
No se puede usar libremente
AAC
patentes - No se puede usar libremente
itunes DRM
48 Canales
Vorbis
Para que el video se pueda ver por todos se deben usar muchos formatos.
No hay conbinacion universal.
WebM - VP8... fuck por que estoy copiando...
Asi se hace BITCHES:
Ancho y alto en video y controles.
Para audio
Formatos de fuente para HTML5
Font squirrel convierte a @font-face
Y el ms: Google Fonts

@geninteractive: Adobe Web Fonts
@willrre
Te recomiendo esta!!
http://openfontlibrary.org/
@kcam
De hecho Squirrel me limit muchas veces con respecto a fuentes Helvetica, el siguiente font-face generator me
solucion ese problema:
http://fontface.codeandmore.com
OneKmilo
FontSquirrel es bueno y hasta divertido de usar, pero no es buena idea para proyectos en espaol, muchas veces
tiene problemas de kerning, altura de linea, etc, sobretodo para renderear caracteres latinos, por ejemplo,
usando el fon-face generator la mayora de las veces (no siempre) van a aparecer como OUIAE N por el
problema de altura de linea.
Mi recomendacin es revisar muy bien las letras latinas en Altas y bajas despus de usar el generador porque no
todas las fuentes se van a renderear bien, y recomiendo an ms usar Google web fonts:
http://www.google.com/webfonts o Adobe Edge Web Fonts http://html.adobe.com/edge/webfonts/ estas libreras
de fuentes crecen todo el tiempo, no son las fuentes clsicas que todo el mundo ama, pero buscando bien hay
unas que se ven super profesionales y adems son muy fciles de usar.
@Freddier
Jquery
Es una librera para hacer JS ms sencillo.
Como agregar jquery
Se descarga y guarda en la carpeta de trabajo.
Se linkea con el <script... abajo del prefixfree
Se crea el archivo.js (ej: codiguito)
primer cdigo en el .js
$ significa jquery
$(document) manipula todo el documento
.on significa cuando... click o ready cuando este listo el doc y se le asigna una funcion...
se define la funcion despues...
function inicio (parametros)
{
alert (cadena de texto / mensaje)
}
Por que esta mal el clasico document ready?
1. Es ms legible la 2da (con .on)

2. Queda en ram y es pesado
3. Se apaga con OFF - $(document).off("ready", inicio);
Usar la 2da!
Mover el bloque de texto
Se crea un ID para el bt personalizar.
en el js se invoca y on click se crea una funcin.
La funcin ser esconder la caja.
As fue brusco!
mejor asi: Slide up se desliza hacia arriba.
Se le agrego una transicion a #historia para que se anime hacia la izquierda.
Y se controla desde el js el CSS

la var cambios manejara los CSS
overflow hidden oculta las cosas que se salen... pero se sigue viendo, entonces se va padding a
0 y margin a 0.
quedaria asi:
Mockup: (primero se define la estructura semantica antes de pensar en el CSS)
el nuevo section se crea a la misma altura de la figura y el article. ahi se maqueta el modulo de
personalizacin.
para los colores se usa 6 divs con un espacio y se asignan ides para cada uno.
Cada llanta va en un un figure con id llanta 1 y 2, lo mismo con techo cada parte en un article.
El id del section personalizacin

article: color
article: llanta
article: techo
CSS para el section #personalizacion
Inset da la sombra interna.

Agrega la misma transicion para que sicronize con la que desaparece
Modificando los article.
para crear una grilla de los div de color
cursor pointer para que salga la manito

Opacity 0.8: transparencia del 20%
Agrega transition all 1s ease...
para los colores
Animacion para el hover de los colores
Diseo llantas y techo (con herencia se hacen las 2 al tiempo)

Todas las imagenes deben tener w de 100%
Transicin en los figure para que en hover rote la llanta
@freddier
Desaparecer personalizacion:
en el JS
Google web Fonts:

quick use - copiar el codigo y pegarlo en el head:
Fontsquirrel
pestaa font-face kids
se selecciona y buscar el font-face kits
descarga un demo, la licencia y el eot, el svg el bof... se copian todos en la carpeta de trabajo,
en el doc.css esta el codigo que debemos pegar encima del body
Luego se invoca en el css a la etiqueta.

Pintar el carro:
Detecta el id que seleccion. (datos.currentTarget.id)
a la etiqueta img cambiele el atributo src El c se refiere a la inicial de la imagen mas la variable
col que trae el id de currentTarget
Preguntas
Con opacity y transicin se puede hacer la aparicin
que es raphael - Permite manipulacion y creacin de objetos grficos con js
Problemas con jquery y mootools?
Los archivos fuente quedan en la plataforma

Ejercicio terminado por @carcmongecarcmonge
Archivos finales por Miguel Nieva
Datos Adicionales Interesantes

Una pequea lista con las mejores herramientas CSS3 en la web.
@Vheisssu
Cubic-bezier | http://cubic-bezier.com
Cubic Bezier muchos ya lo conocern, es una herramienta que creo Lea Verou para modificar los intervalos de
las animaciones CSS, ya sea con efectos Ease-In, Ease-Out, Ease, etc.
Animatable | http://leaverou.github.com/animatable/
Animatable es otro de los geniales proyectos de Lea Verou, es un conjunto de varias animaciones bastante
atractivas a la vista, para implementarlas a la hora de hacer nuestros proyectos.
CSS3 Button Maker | http://css-tricks.com/examples/ButtonMaker/
Los chicos de CSS-Tricks se han pasado con esta herramienta, Button Maker es un generador de botones
usando toda la tecnologa que nos provee CSS3, degradados, transformaciones, hovers, todo eso y ms ofrece
esta herramienta.
Border Radius | http://border-radius.com/
Personalmente una de mis favoritas, Border Radius como su nombre nos lo indica, es un generador de bordes
redondeados con controles muy fciles de usar.
3D CSS Text | http://www.3dcsstext.com/
Aprovechando al mximo el poder de CSS3, esta herramienta nos permite crear texto con efecto 3D usando
controles muy sencillos de manejar. Otra de mis favoritas.
Mother Effing Text Shadow | http://mothereffingtextshadow.com/
Una herramienta muy parecida a la anterior, esta crea valores de sombra para aplicarlos a nuestros textos.
CSS3 Transforms | http://westciv.com/tools/3Dtransforms/index.html
Brutal Herramienta para crear facilmente nuestras transformaciones en CSS3, desde degradados hasta
animaciones con transformaciones.
Espero les sirvan algn da. Saludos.
Atajos de teclado para Sublime Text 2

@pdvera
50 herramientas fantsticas para responsive web design

@guillermo_lc
yoder.santiag
Yo he capturado algunos links interesantes y los he puesto en delicious.com si les interesa los pueden revisar.
http://delicious.com/christmo/curso_html5
Video tutorial JavaScript

laychopy
Aqui les dejo el link, es una serie de tutoriales desde lo mas basico hasta objetos, array y cosas mas complida
Sesin 4
Node.JS
Para empezar cualquier proyecto se empieza con :
Especial atencion por la version de instalacion

se corre NPM...
y se rellenan las dependencias
en server.js:
lo que parezca en la url va ir al sitio web

Siempre se cierra njs para guardar cambios
El anterior ejericio permite pasar la url al mensaje:
Se declara una variable global lastRes

Con el if lastRes se le va a mandar el mensaje a la siguiente persona
Server: http://siedrix6.curso-mejorandola-online.siedrix6.jit.su/
Cod del final
Node trabaj de manera asincrona por eso el mensaje llega al ser enviado.
Nuevo ejercicio:
Se guarda en variable los New
Se resetea el server cada vez que se haga un cambio
Se genera una lista de mensajes con una funcion

.
El usuario hace un requerimiento a node se le pasa a express y este define que resputa dar
PeticionesPendientes guarda los nuevos mensajes

Otro ejemplo.. cargando un HTML (este seria el html)
Se agregan los archivos jquery y grid y styles.css en un directorio public
Se crea main.js
Sesin 5
Arturo Jamaica
Instagram y pinterest estan hechos en django
Python lenguaje de programacin -
Para iniciar en la consola iniciian python.

Desde la consola
para salir CMD D
desde un texmade y ejecutado en la consola (arriba.)
Como usar estos tipo de datos

declarando variables:
Arreglo con diferentes tipos de datos.
Identacion obligatoria
Ejemplo de variables
Funciones
Mostrar rangos, enteros, listar con map
declarando una clase, se guarda como .py
While
Ejemplo de range
Django
Para corre django
Nos da una ip local y listo.
Sesion 6
Phone gap = Cordova
Es una plataforma para crear app en web.
Ejemplo:
El meta para el ancho de dispositivo
jquery mobile
Los data-role
http://jquerymobile.com/themeroller/
Responsive Design
1. Nuevo meta Viewport
@media
Recomendacin usar: Display: block y width: auto

Curso de HTML5 - Mejoran..

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso de HTML5 - Mejoran..

Uploaded by

Copyright:

Available Formats

Curso de HTML5 | Mejorandola.

---> Si estas en el curso, la mejor manera de agradecer para segui adelante es

Stack de tecnologas actual:

MongoDB: Base de datos no relacional

HTML5: No es un lenguaje de programacin, es un lenguaje de modelado de informacin

En HTML no se disea, se disea en CSS3!!!

Ms info en Introduccin a HTML5

Esto es todo lo que necesitas para programar un Chat: [Node.Js]

John Freddy Vega @freddier

Generar imgenes para retina

Se deben exportar (desde PSD) al 50% la imagen.

Qu significa Retina Display en el diseo web

Trabajemos para los OS mas usados IOS

Chrome Lider en navegadores, 2do lugar IE

-- Veamos morir IE en ie6countdown -Ie Actualmente (informacin no actualizada)

John Freddy Vega @freddier

Boilerplate Aplicacin web tipo template.

Coffee Script es un stylus para JS

Asi es con Prefix Free:

Descargar archivos fuente de la sesin1

Doble fondo en una equiteta:

en background-size, el valor 130px es para el 1 url, despues de la coma se ponen las

Aclaraciones sobre la unidad "em" de CSS. Si se quedaron con dudas aca

_____ Fin del artculo sobre EM _____

Usen este lorem Ipsum para simular los textos.

Por que no usar Lorem ipsum

Orden en el CSS (Entra en el examen ojo...)

El orden debe ser:

(Seguir el cdigo de @freddier y tomar notas es moe complicado.)

Con CSS3 ya Se pueden hacer columnas

Hacer imagenes responsive:

Para margenes comunes usar: margin 1em

Como poner un elemento al lado del otro Float???

Poner el footer fijo

left y bottom para que quede pegada abajo.

Estndares en Video y HTML5

Enlaces sobre video HTML5

Asi se hace BITCHES:

Ancho y alto en video y controles.

Formatos de fuente para HTML5

Font squirrel convierte a @font-face

Y el ms: Google Fonts

1. Es ms legible la 2da (con .on)

Se le agrego una transicion a #historia para que se anime hacia la izquierda.

Y se controla desde el js el CSS

Mockup: (primero se define la estructura semantica antes de pensar en el CSS)

El id del section personalizacin

Inset da la sombra interna.

para crear una grilla de los div de color

cursor pointer para que salga la manito

Animacion para el hover de los colores

Diseo llantas y techo (con herencia se hacen las 2 al tiempo)

Transicin en los figure para que en hover rote la llanta

Google web Fonts:

Luego se invoca en el css a la etiqueta.

Detecta el id que seleccion. (datos.currentTarget.id)

Los archivos fuente quedan en la plataforma

Datos Adicionales Interesantes

Atajos de teclado para Sublime Text 2

50 herramientas fantsticas para responsive web design

Video tutorial JavaScript

Especial atencion por la version de instalacion

y se rellenan las dependencias

_ Fin del artculo sobre EM _