Clase 1 - 30 de abril de 2013

Initializr
Es la forma fcil de iniciarse en una aplicacin

Instalacin:
1 Seleccionar tipo de diseo: En este caso usaremos un Responsive Design


2. Fine tuning: Se configura todas las caractersticas que quiero para la aplicacin


Despus de seleccionar las cosas que deseo incluir, entonces descargo initilizar.

Normalize
Normaliza los estilos en todos los navegadores, debido a que cada etiqueta para cada
navegador tiene diferentes tipos.
Todas las etiquetas semnticas sean en bloque, que el HTML empiece al 100%, etc. Lo que
hace es que todas las cosas que se daan las arregla y las controla

Modernizr
Es una librera de HTML 5 que recoge todas las capacidades de los navegadores y hace su
mejor esfuerzo por usar los que ms pueda. Debe cargarse dentro de la etiqueta header

Organizacin del cdigo html
Se organiza el cdigo dentro del html usando lo que sirve y desechando lo que no

Definicin de los estilos en estilos.css

node.js
Es un servidor de eventos de javascript. Funciona como un servidor web y motor para construir
aplicaciones basadas solamente en javascript



1 Instalacin: La instalacin es comn como cualquier aplicacin


Stylus
Es un preprocesador de css

1 Instalacin
a En la ventana de comando de Windows (como administrador) digitar el comando
de instalacin de Stylus: npm - g install stylus



b En la ventana de comandos de Windows como usuario normal se comprueba que
ha quedado correctamente instalado con stylus -h


2 Creacin del archivo .styl
a Se cambia el archivo estilos.css por estilos.styl
b Para comprobar una de sus capacidades, la compilacin, le quitamos las llaves al
archivo:

3 Compilacin:
a Se ingresa por ventana de comandos a la carpeta y se ejecuta el comando
stylus estilos.styl

b Ahora ha compilado y creado un archivo estilos.css con las llaves y dems
correcciones que hayan sido necesarias:

4 Comprimir el archivo de estilos
a Ejecutaremos el comando stylus -c estilos.styl

b Quedar asi:


5 Dejar vivo para siempre el comando
a Vamos a dejar el comando vivo para que todos los cambios los compile
automticamente con el comando watch: stylus -w estilos.styl

b Ahora quedar guardando los cambios automticamente

6 Instalacin de package management para sublime text con stylus
Este paquete se instala para darle colores a los estilos del archivo estilos.styl, los cuales
son los estilos de Stylus
a Obtener el cdigo de instalacin en Esta direccin:

b El cdigo se copia en la ventana de comandos de Sublime Text
c Reiniciar Sublime Text
d En En la paleta de comandos copiar package control/install package y
seleccionar el paquete Stylus
e Reiniciar Sublime Text y reabrir el archivo de estilos. Ya quedar con colores

Conceptos generales

Iphone: Resolucin nativa: 320*480 - 480*320
Pantalla Retina Diplay: Para Iphone 4 es 960*640

CSS
id (#id) Se usa para estilos que se dan una sola vez
class (.class) Cuando se va a usar varias veces el estilo