Sie sind auf Seite 1von 56

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:

John Freddy Vega @freddier


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
John Freddy Vega @freddier
A pesar de que Android vende ms, iOS es mucho ms usado en el planeta para conectarse a
la web mvil #mejorandocurso
John Freddy Vega @freddier
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


John Freddy Vega @freddier
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)

John Freddy Vega @freddier


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"><!-- Obligatorio -->
<head>
<meta charset="utf-8"/><!-- Obligatorio -->
<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:
John Freddy Vega @freddier
CSS siempre debe cargar primero que JS. Los JS "bloquean" la carga del sitio. Los CSS
descargan en paralelo. #mejorandocurso
John Freddy Vega @freddier
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"> <!-- forza al sitio
abierto en ie arrancar en chrome -->
<title>Nuevo AVE0 2013</title>
<meta name="description" content="Menos gasolina, ms HTML5"> <!-- descripcin en
google -->
<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
John Freddy Vega @freddier
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:
John Freddy Vega @freddier
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