Htmll5

Curso de HTML5 | Mejorandola.la
Apuntes por @geninteractive

Las notas a continuación son apuntes de @geninteractive de las sesiones de mejorando.la curso de HTML, no es material emitido u oficialdel 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.

Sesión 1

Introducción

Como era laWeb:

Stack de tecnologías actual:

MongoDB: Base de datos no relacional

NodeJS: Del lado del servidor - Trabaja en tiempo real

HTML5: No es un lenguaje de programación, es un lenguaje demodelado de información
En HTML no se diseña, se diseña en CSS3!!!

CSS3 Lenguaje de diseño

JS (Javascript): trabaja del lado del cliente

John Freddy Vega ‏@freddier
Javascript NUNCA seconecta directamente a una base de datos. Cuando preguntan cómo hacerlo, un grillo muere en Kyoto#mejorandocurso

Contenido:

Más info en Introducción a HTML5
PDF Intro HTML5 de Mejorando.laEjemplos: Animación 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 móvil

Diseño paramóviles:

El tamaño de un dedo para apple y android:

John Freddy Vega ‏@freddier
Los diseñadores intelectuales y atractivos jamás colocan una fuente en web apps o movil de menos de 16px#mejorandocurso

Fuentes para móviles ideal 16 px.
No hay hover!
Responsive

Clabie.com un sitio responsive por @neojp

Retina display:
Mobile
Tablet
Desktop

Generar imágenes para retinaDesde el CSS

Con html

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

Qué significa Retina Display en el diseño web
Por: @freddier | Cristalab

“La solución es fácil: Pública tus imagenes aldoble de resolución. 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...