Diseno de Aplicaciones Web

Juan Morales del Olmo

24 de Febrero de 2015

CSS Avanzado

Media queries

Para hacer responsive design

@media (max-width: 600px) {

.sidebar {

display: none;

}

}

Media queries

Para hacer responsive design

@media (max-width: 600px) {

.sidebar {

display: none;

}

}

Media queries

@media screen {

body {

width: 75%;

}

}

@media print {

body {

width: 100%;

}

}

Media queries

@media screen {

body {

width: 75%;

}

}

@media print {

body {

width: 100%;

}

}

Modelo de caja

box-sizing: border-box;

I content-box: Es el valor por defecto.

I visible = width|height + padding + border

I border-box: Cambia las reglas de tamanos. (padding yborder interiores)

I visible = width|height

I Profundizar: box-sizing

box-sizing: border-box;

I content-box: Es el valor por defecto.

I visible = width|height + padding + border

I border-box: Cambia las reglas de tamanos. (padding yborder interiores)

I visible = width|height

I Profundizar: box-sizing

box-sizing: border-box;

I content-box: Es el valor por defecto.

I visible = width|height + padding + border

I border-box: Cambia las reglas de tamanos. (padding yborder interiores)

I visible = width|height

I Profundizar: box-sizing

box-sizing: border-box;

I content-box: Es el valor por defecto.

I visible = width|height + padding + border

I border-box: Cambia las reglas de tamanos. (padding yborder interiores)

I visible = width|height

I Profundizar: box-sizing

box-sizing: border-box;

I content-box: Es el valor por defecto.

I visible = width|height + padding + border

I border-box: Cambia las reglas de tamanos. (padding yborder interiores)

I visible = width|height

I Profundizar: box-sizing

CSS transitions

I Pequenas animaciones que se lanzan cuando alguna propiedadcambia de estado

transition: background-color 500ms ease-out 1s;

I Mas eficientes que las transiciones de Javascript. (Animadaspor hardware)

I Lista de propiedades que se pueden animarI Easing functions

CSS transitions

I Pequenas animaciones que se lanzan cuando alguna propiedadcambia de estado

transition: background-color 500ms ease-out 1s;

I Mas eficientes que las transiciones de Javascript. (Animadaspor hardware)

I Lista de propiedades que se pueden animarI Easing functions

CSS transitions

I Pequenas animaciones que se lanzan cuando alguna propiedadcambia de estado

transition: background-color 500ms ease-out 1s;

I Mas eficientes que las transiciones de Javascript. (Animadaspor hardware)

I Lista de propiedades que se pueden animar

I Easing functions

CSS transitions

I Pequenas animaciones que se lanzan cuando alguna propiedadcambia de estado

transition: background-color 500ms ease-out 1s;

I Mas eficientes que las transiciones de Javascript. (Animadaspor hardware)

I Lista de propiedades que se pueden animarI Easing functions

CSS transitions

#paco {

transition: background-color 0.7s ease,

padding-right 0.7s ease;

background-color: red;

padding-right: 0px;

height: 90px;

width: 90px;

}

#paco:hover {

background-color: blue;

padding-right: 400px;

}

Herramientas para frontend

Compiladores y paquetes

I La web no necesita compiladores de por s

I Herramientas opcionales, pero agilizan el desarrollo enproyectos grandes

I Normalmente se usa javascript para desarrollar herramientasde desarrollo para frontend

I Node.js es javascript en servidor

I Es la maquina virtual de Chrome (V8)

Compiladores y paquetes

I La web no necesita compiladores de por s

I Herramientas opcionales, pero agilizan el desarrollo enproyectos grandes

I Normalmente se usa javascript para desarrollar herramientasde desarrollo para frontend

I Node.js es javascript en servidor

I Es la maquina virtual de Chrome (V8)

Compiladores y paquetes

I La web no necesita compiladores de por s

I Herramientas opcionales, pero agilizan el desarrollo enproyectos grandes

I Normalmente se usa javascript para desarrollar herramientasde desarrollo para frontend

I Node.js es javascript en servidor

I Es la maquina virtual de Chrome (V8)

Compiladores y paquetes

I La web no necesita compiladores de por s

I Herramientas opcionales, pero agilizan el desarrollo enproyectos grandes

I Normalmente se usa javascript para desarrollar herramientasde desarrollo para frontend

I Node.js es javascript en servidor

I Es la maquina virtual de Chrome (V8)

Herramientas muy utilizadas

I npm: Gestor de paquetes de node.js (como gemas en ruby opip en python)

I bower: Un npm solo para frontend

I grunt: Como Makefiles para node.js

I uglify: Librera en javascript para compactar CSS y JS (.min)

Herramientas muy utilizadas

I npm: Gestor de paquetes de node.js (como gemas en ruby opip en python)

I bower: Un npm solo para frontend

I grunt: Como Makefiles para node.js

I uglify: Librera en javascript para compactar CSS y JS (.min)

Herramientas muy utilizadas

I npm: Gestor de paquetes de node.js (como gemas en ruby opip en python)

I bower: Un npm solo para frontend

I grunt: Como Makefiles para node.js

I uglify: Librera en javascript para compactar CSS y JS (.min)

Preprocesadores de CSS

I Lenguajes que compilan a CSS

I Anaden variables, funciones, prefijos, selectores anidados . . .I Ayudan con el manejo de colores, medidas e imagenes

Preprocesadores de CSS

I Lenguajes que compilan a CSSI Anaden variables, funciones, prefijos, selectores anidados . . .

I Ayudan con el manejo de colores, medidas e imagenes

Preprocesadores de CSS

I Lenguajes que compilan a CSSI Anaden variables, funciones, prefijos, selectores anidados . . .I Ayudan con el manejo de colores, medidas e imagenes

Preprocesadores de CSS

I Less

I Bastante sencilloI Requiere Node

I Sass

I El mas usadoI Requiere Ruby (salvo usar libsass)I Framework enorme: Compass

I Stylus

I Menos usado, pero muy ligeroI Requiere Node

Preprocesadores de CSS

I Less

I Bastante sencilloI Requiere Node

I Sass

I El mas usadoI Requiere Ruby (salvo usar libsass)I Framework enorme: Compass

I Stylus

I Menos usado, pero muy ligeroI Requiere Node

Preprocesadores de CSS

I Less

I Bastante sencilloI Requiere Node

I Sass

I El mas usadoI Requiere Ruby (salvo usar libsass)I Framework enorme: Compass

I Stylus

I Menos usado, pero muy ligeroI Requiere Node

Frameworks CSS

I Normalice.css

I Si quereis disenar un estilo desde 0. Unifica los valores pordefecto de los navegadores.

I Modernizr

I Detecta, al cargar la pagina web, las caractersticas css quesoporta el navegador. Nos sirve para adaptar el estilo adiferentes navegadores.

I Frameworks Base: Bootstrap, Foundation, Pure, Skeleton . . .

Frameworks CSS

I Normalice.css

I Si quereis disenar un estilo desde 0. Unifica los valores pordefecto de los navegadores.

I Modernizr

I Detecta, al cargar la pagina web, las caractersticas css quesoporta el navegador. Nos sirve para adaptar el estilo adiferentes navegadores.

I Frameworks Base: Bootstrap, Foundation, Pure, Skeleton . . .

Frameworks CSS

I Normalice.css

I Si quereis disenar un estilo desde 0. Unifica los valores pordefecto de los navegadores.

I Modernizr

I Detecta, al cargar la pagina web, las caractersticas css quesoporta el navegador. Nos sirve para adaptar el estilo adiferentes navegadores.

I Frameworks Base: Bootstrap, Foundation, Pure, Skeleton . . .

Frameworks CSS

I Normalice.css

I Si quereis disenar un estilo desde 0. Unifica los valores pordefecto de los navegadores.

I Modernizr

I Detecta, al cargar la pagina web, las caractersticas css quesoporta el navegador. Nos sirve para adaptar el estilo adiferentes navegadores.

I Frameworks Base: Bootstrap, Foundation, Pure, Skeleton . . .

Frameworks CSS

I Normalice.css

I Si quereis disenar un estilo desde 0. Unifica los valores pordefecto de los navegadores.

I Modernizr

I Detecta, al cargar la pagina web, las caractersticas css quesoporta el navegador. Nos sirve para adaptar el estilo adiferentes navegadores.

I Frameworks Base: Bootstrap, Foundation, Pure, Skeleton . . .

Bootstrap

Que es bootstrap?

Figure : proyecto No 1 en GitHub

Que es bootstrap?

I Framework de CSS para desarrollar el frontend de manera masrapida y facil

I Disenado en primer lugar para moviles (responsive design)

I Facilita la maquetacion con su sistema de cuadrcula

I Incluye 2 estilos CSS, y componentes Javascript (opcionales)

I Personalizable con Less o Sass

I http://getbootstrap.com/

Que es bootstrap?

I Framework de CSS para desarrollar el frontend de manera masrapida y facil

I Disenado en primer lugar para moviles (responsive design)

I Facilita la maquetacion con su sistema de cuadrcula

I Incluye 2 estilos CSS, y componentes Javascript (opcionales)

I Personalizable con Less o Sass

I http://getbootstrap.com/

Que es bootstrap?

I Framework de CSS para desarrollar el frontend de manera masrapida y facil

I Disenado en primer lugar para moviles (responsive design)

I Facilita la maquetacion con su sistema de cuadrcula

I Incluye 2 estilos CSS, y componentes Javascript (opcionales)

I Personalizable con Less o Sass

I http://getbootstrap.com/

Que es bootstrap?

I Framework de CSS para desarrollar el frontend de manera masrapida y facil

I Disenado en primer lugar para moviles (responsive design)

I Facilita la maquetacion con su sistema de cuadrcula

I Incluye 2 estilos CSS, y componentes Javascript (opcionales)

I Personalizable con Less o Sass

I http://getbootstrap.com/

Que es bootstrap?

I Framework de CSS para desarrollar el frontend de manera masrapida y facil

I Disenado en primer lugar para moviles (responsive design)

I Facilita la maquetacion con su sistema de cuadrcula

I Incluye 2 estilos CSS, y componentes Javascript (opcionales)

I Personalizable con Less o Sass

I http://getbootstrap.com/

Como empezar?

I Lo mas facil es usar un CDN

I Bueno para reducir trafico y mejorar rapidez

I Descargar precompilado

I CSS base y temaI Componentes javascriptI Fuentes (iconos)

I Descargar fuentes

I Originalemente desarrollado en Less, portado a Sass

I Empezar por las plantillas de ejemplo

Como empezar?

I Lo mas facil es usar un CDN

I Bueno para reducir trafico y mejorar rapidez

I Descargar precompilado

I CSS base y tema

I Componentes javascriptI Fuentes (iconos)

I Descargar fuentes

I Originalemente desarrollado en Less, portado a Sass

I Empezar por las plantillas de ejemplo

Como empezar?

I Lo mas facil es usar un CDN

I Bueno para reducir trafico y mejorar rapidez

I Descargar precompilado

I CSS base y temaI Componentes javascript

I Fuentes (iconos)

I Descargar fuentes

I Originalemente desarrollado en Less, portado a Sass

I Empezar por las plantillas de ejemplo

Como empezar?

I Lo mas facil es usar un CDN

I Bueno para reducir trafico y mejorar rapidez

I Descargar precompilado

I CSS base y temaI Componentes javascriptI Fuentes (iconos)

I Descargar fuentes

I Originalemente desarrollado en Less, portado a Sass

I Empezar por las plantillas de ejemplo

Como empezar?

I Lo mas facil es usar un CDN

I Bueno para reducir trafico y mejorar rapidez

I Descargar precompilado

I CSS base y temaI Componentes javascriptI Fuentes (iconos)

I Descargar fuentes

I Originalemente desarrollado en Less, portado a Sass

I Empezar por las plantillas de ejemplo

Como empezar?

I Lo mas facil es usar un CDN

I Bueno para reducir trafico y mejorar rapidez

I Descargar precompilado

I CSS base y temaI Componentes javascriptI Fuentes (iconos)

I Descargar fuentes

I Originalemente desarrollado en Less, portado a Sass

I Empezar por las plantillas de ejemplo

Como empezar?

I Lo mas facil es usar un CDN

I Bueno para reducir trafico y mejorar rapidez

I Descargar precompilado

I CSS base y temaI Componentes javascriptI Fuentes (iconos)

I Descargar fuentes

I Originalemente desarrollado en Less, portado a Sass

I Empezar por las plantillas de ejemplo

Cuadrcula (grid)

Figure : Grid de 12

Figure : Escritorio

Figure : Movil

Componentes

Javascript

CSS AvanzadoHerramientas para frontendBootstrap