Curso HTML5 y CSS3

1.1 Conceptos Web

1.1.1 Tecnologías y División Actual

En la actualidad el desarrollo web se divide en 2 grandes categorías:

• Frontend
• Backend

Frontend

Los frontends tienden a ser programadores, pero hay diseñadores que también hacen frontend. Son los encargados de maquetar la estructura semántica del contenido (HTML), codificar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (Javascript).

Algunas Tecnologías Frontend

• HTML
• Javascript
• CSS3
• SASS
• Angularjs

Backend

Un programador tiende a ser backend. Es la labor de ingeniería que compone el acceso a bases de datos y generación de plantillas del lado del servidor. En backend se encargan de implementar cosas como MySQL, Postgres, SQL Server o MongoDB. Luego, un lenguaje como PHP o JSP, o frameworks como RoR, Django, Node.JS o .NET se conectan a la base de datos.

Algunas Tecnologías Backend

• MySQL
• SQL Server
• Mongo DB
• PHP
• Ruby
• Javascript

1.2 Software de Desarrollo Open Source

Básicamente segmentaremos el software de desarrollo orientado a Frontend en 2

• Editores de Texto
• Editores WYSIWG

ATOM

Atom es un software para frontend construido en las mismas tecnologias de frontend. Vas a editar HTML y JS en un editor hecho en HTML y JS

Sublime Text

Sublime Text es un editor de texto tiene infinidad de plugins para agile web development y shortcodes además de una comunidad muy activa

EDITORES WYSIWG

Adobe Muse

Adobe - con la muerte de flash - lanzó adobe Muse como un intento por posicionar y tomar el mercado de HTML5 en el ámbito WYSIWYG. Es de pago

Adobe Dreamweaver

Adobe - con la muerte de flash - lanzó adobe Muse como un intento por posicionar y tomar el mercado de HTML5 en el ámbito WYSIWYG. Es de pago

Que vamos a usar para este curso?

Sublime Text 2

Descargar ahora! http://www.sublimetext.com/2

Package Control para Sublime Text

Instalar A- HO - RA https://packagecontrol.io/installation

EMMET

La vida sin emmet no tiene sentido http://emmet.io/

Crearse una cuenta github, deben

www.github.com

Github para Win / MAC

• https://windows.github.com/
• https://mac.github.com/

1.3 Nuevas Tecnologías y Tendencias

Cambió la forma en que escribimos para frontend

Si antes teniamos HTML + JS + CSS, ahora el estado del arte es mucho mas amplio, existen preprocesadores, precompiladores, uglificadores, minificadores que llega a ser ridiculo

Preprocesadores CSS

Un preprocesador es un punto intermedio, entre el código que escribes y el código que recibe el cliente final

Están hechos para hacer más facil la vida de quien codea

Beneficios de los preprocesadores

• Código sintacticamente mejorado
• Aumenta la mantenibilidad del codigo
• Ayudan a debuggear mas facilmente errores
• Posibilidad de minificar y seguir estandares

DRY(A)

Suficiente, estoy convencido, muestrame tus preprocesadores

CSS Old School

	nav{
		margin: 0;
	}
	nav ul{
		margin: 0;
		list-style:none;
	}
	nav ul a{
		color: red
	}

Preprocesador (SASS)

	nav {
	  margin: 0;
		ul {
			margin: 0;
			list-style: none;
			a{
				color:red;
			}
	    }
	}

CSS Old School

	a{ color: #333;}
	span{ color: #333}
	.header{ background-color: #333;}

	/*  Te Quiero ver actualizando esto a mano */

Preprocesador (SASS)

		$colorprimario : #333;

	a{ color: $colorprimario;}
	span{ color: $colorprimario}
	.header{ background-color: $colorprimario;}

HAML

Haml (HTML abstraction markup language) esta basado en un principio primario básico: el codigo de marcado deberia ser hermoso.(...) Haml acelera y simplifica la creación de templates ...

HTML

<section class="container">
	<h1 class="container"></h1>
	<h2 class="post title"></h2>
	<div class="content">
		<div class="post content"></div>
	</div> 
</div>

HAML

%section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content
					

Otras Utilidades

Para compilar el código generado por estos preprocesadores necesitamos un software intermedio, que vigile cambios en nuestros archivos y los compile. Hay varias formas de hacer esto

Codekit (MAC)

Una navaja suiza del preprocesamiento

Prepros (Win)

Una navaja suiza del preprocesamiento (si, ya lo dije)

Bonus

http://codepen.io

2.- HTML5

¿Qué es HTML5?

<!DOCTYPE html>						

No, pero enserio

La W3C despues de varios años con el antiguo standard decide dar un upgrade al soporte del standard actual, con varios motivos

• El mundo cambió, HTML no habia cambiado
• Agregar compatibilidad
• Mejorar la semantica

Historia de HTML5

• Tim Berners-Lee invented www 1989
• Tim Berners-Lee invented HTML 1991
• Dave Raggett drafted HTML+ 1993
• HTML Working Group defined HTML 2.0 1995
• W3C Recommended HTML 3.2 1997
• W3C Recommended HTML 4.01 1999
• W3C Recommended XHTML 1.0 2000
• HTML5 WHATWG First Public Draft 2008
• HTML5 WHATWG Living Standard 2012
• HTML5 W3C Final Recommendation 2014

Semantica HTML4 PLS

Semantica HTML5 PLS

Semantica de Contenido

Describe el tipo de contenido que ira dentro de los contendores, evita que las clases CSS sean usadas para determinar que tipo de contenido irá en los DIVS

Header

La mayoria de los sitios tiene un header, donde generalmente incluyes el logo y datos importantes (redes sociales por ejemplo)

NAV

Describe una barra de navegación

ARTICLE

Describe un texto o documento autoconcluyente, por ejemplo en un diario seria una noticia

SECTION

Una seccion es una representacion generica de un documento o aplicación, una sección es en contexto una agrupación tematica de contenido

ASIDE

En el elemento aside se encuentra contenido tangencialmente relacionado con el contenido, por ejemplo, enlaces a redes sociales

TAREA

Recrear semánticamente el sitio www.santander.cl

Maquetación y Semántica

Otras etiquetas nuevas de HTML5, proveen servicios multimedia, validación de datos e incorporación de graficos

Video

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
					

Soporte de Video

Ej

Audio

	<audio controls>
	  <source src="horse.ogg" type="audio/ogg">
	  <source src="horse.mp3" type="audio/mpeg">
	  Your browser does not support the audio tag.
	</audio>

Soporte Audio

Ej:

Nuevos Inputs

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

<input type="email">
<input type="number">
<input type="color">
<input type="range">
					

Ej:

Canvas

Un canvas es un area rectangular en HTML. Por defecto canvas no tiene border ni contenido

Se usa generalmente para dibujar graficos desde javascript.

Ej:

Ej:

<canvas id="micanvas" style="width:600px;height:480px;background-color:red;"></canvas>
<script>
var c = document.getElementById("micanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 
					

Soporte HTML5

HTML5 enabling script

Permite usar las etiquetas semánticas dentro de IE6, 7 y 8 como si fueran divs normales, estilizables por CSS. Sin este script, las etiquetas serían ignoradas en IE y sería imposible agregarles diseño a ellas o a cualquier elemento dentro de ellas. Para utilizarlo debes incluir esta línea en el HEAD de tu documento:

Ej:

<!--[if lt IE 9]><script src=”http://HTML5shim.googlecode.com/svn/trunk/HTML5.js”></script><![endif]-->
					

Detectar capacidades del navegador

Con Modernizr puedes detectar si el navegador tiene soporte para múltiples capacidades de Javascript, HTML5 y CSS3. Si no, tú mismo puedes codear la solución o alternativa.

¿Puedo usar esto ahora?

Con caniuse.com puedes estar seguro

Empezar con HTML5

Boilerplate es un proyecto con más de 1000 commits que anda en actualización constante y que reúne un paquete de plantillas en css y html

3 CSS-3

CSS

CSS son las hojas de estilo en cascada, es decir, es el encargado de generar los estilos de nuestro documento HTML.

	<link rel="stylesheet" href="estilos.css">

Selectores

Un selector CSS es un conjunto de reglas por las que podemos dar estilo a cualquier elemento de nuestro HTML.

	  <div class="caja">
	  		Soy una caja
	  </div>

	  .caja{
 			width:100px;
 			background-color: #333;
		}

Clase

Una clase es un selector que utilizamos para elementos que usaremos mas de una vez. Se define anteponiendo un . al nombre de la clase. Ej:

	.clase{
			{...}
	}

Id

Un id es un selector que sirve como identificador unico para un elemento. Se define anteponiendo un # al nombre del id. Ej:

	#home{
			{...}
	}

*

El selector * aplicará estilos a TODOS los elementos hijos del selector Ej:

*{
	color: red;
}

TAREA

Crea 3 divs con un texto , de colores rojo, verde y azul.

PD: puedes usar codepen ;)

	<span class="caja1">Caja 1</span>
	<span class="caja2">Caja 2</span>
	<span class="caja3">Caja 3</span>

	.caja1{color: red;}
	.caja2{color: green; }
	.caja3{color: blue;}

Propiedades

Las propiedades css, modifican los estilos de los elementos en css. Primero veremos los css para maquetación

Display

La propiedad display especifica el tipo de caja que usará un elemento html

	.caja{
		display:block;
	}

Width y Height

Especifican el alto y ancho de una caja, las medidas pueden ser expresadas en px, em o %

	.caja{
		display:block;
		width: 800px;
		height: 600px;
	}

Modelo de Caja

Ejercicio: Centrando una caja

Tomemos como ejempo la caja siguiente

	<div class="caja">
			<h1>Soy una Caja</h1>
			<p>Lorem ipsum dolor sit amet (...)</p>
	</div>

	.caja{
		width: 50%;
		margin: 10px auto;
	}

Se deberia ver

Ahora 2 cajas, de 50% cada una, una al lado de la otra

	<div class="izquierda">
			<h1>Estoy a la izquierda</h1>
	</div>
	<div class="derecha">
			<h1>Estoy a la derecha</h1>
	</div>

	.izquierda, .derecha{
		display:block;
		width:48%;
		height: 200px;
		text-align: center;
		border: 1px solid #333;
		float:left;
		margin-right:1%;
	}

Se deberia ver

Usando inline-block

La forma fácil: Basicamente es una manera de mantener los elementos alineados "en linea", pero manteniendo sus propiedades de caja, como ancho, alto, margen y padding. Un ejemplo de esto se veria asi

	
	<span class="cajauno"></span>
	<span class="cajados"></span>

	.cajauno, .cajados{
		display:inline-block;
		width: 200px;
		height:100px;
		background-color: red;
	}

La propiedad clear

La propiedad clear especifica en que lado de un elemento flotante, no esta permitido flotar, tomando el ejercicio anterior, deberiamos entonces.

	footer{
		width: 100%;
		heigh: 100px;
		display:block;
		float: left;
		clear: both;
	}

Ejercicio

Recrea el siguiente layout usando las propiedades aprendidas

Otras propiedades de Posicionamiento

Position

Esta propiedad nos permite posicionar un elemento dentro de la página. Por lo general va acompañado de las propiedades: top, right, bottom y left.

Valores de position

• static (estatico) siempre tiene la ubicación que la página da por defecto.
• relative (relativa) mueve el elemento ralativamente de su posición normal.
• absolute (absoluta) posiciona al elemento con coordinadas relativas al bloque que lo contiene.
• fixed(fija) posiciona al elemento con coordinadas relativas a la ventana del navegador.

Resumen posicion

Ejercicio

Recrea el siguiente layout usando inline-block.

Relleno o Padding

Las propiedades padding-top, padding-right, padding-bottom, padding-left se utilizan para definir los anchos de los rellenos de cada uno de los bordes por separado.Puedes definir los 4 lados o solo aquellos que necesites.

Recordando el modelo de caja

.selector {
	padding-top: valor
	padding-right: valor
	padding-bottom: valor
	padding-left: valor
}
					

Bordes

La propiedad border especifica el espesor, color y estilo de los bordes. Es la forma abreviada para definir los bordes y puede comprender en ella todas las propiedades de los bordes juntas.

Posibles Valores

thin | medium | thick | tamaño (px, pc, pt, mm, cm, in) | nombre del color(inglés) | #xxxxxx | transparent | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

 .selector {border: valor-1 valor-2 valor-n} 
					

Border Width

.selector {
	border-top-width: valor;
	border-right-width: valor;
	border-bottom-width: valor;
	border-left-width: valor;
}

Color de los Bordes

selector {
	border-top-color: valor;
	border-right-color: valor;
	border-bottom-color: valor;
	border-left-color: valor;
}

Estilo Borde

Grosor Borde

Ancho Borde

Margen

La propiedad margin se utiliza para definir el ancho del espacio que se encuentra entre el borde de un elemento y el elemento cercano a el. Esta propiedad define el ancho del margen para los cuatro lados de la caja.

Recordando el modelo de caja

Posibles valores

longitud | % | auto

p{
	margin-top:5%
	margin-right:30px
	margin-bottom:20px
	margin-left:50%
}

Dimensiones

Ejercicio

Trata de recrear el siguiente mockup con las herramientas que conoces. Recuerda utilizar la semantica correcta

"Efectos" Visuales en CSS

Los efectos visuales se utilizan entre otras cosas para definir la visibilidad de los elementos y también para establecer el comportamiento del contenedor de los mismos.

Overflow

Overflow nos permite controlar el comportamiento de una caja en caso que su contenido la desborde.

p{
	background-color: #FFFFD9;
	width: 100px;
	height: 100 px;
	overflow: scroll
}

Clip

Usamos clip cuando queremos recortar una imagen a una medida determinada. Los valores de rect son en este orden (superior derecha inferior izquierda)

img.recortada {
	position:absolute;
	clip: rect(0px 50px 100px 0px)
}

Visibility

Visibility nos define si un elemento será visible o invisible.

h3.se_ve{visibility:visible}
h3.no_se_ve{visibility:hidden}

Resumen

Pseudo Clases

Las pseudo-clases clasifican elementos con características distintas del nombre, atributo o contenido. Las pseudo-clases pueden ser dinámicas, en el sentido que un elemento puede adquirir o perder una pseudo clase cuando el usuario interactúa en la página web.

Algunas pseudo clases

• :hover, :active, :focus
• :link y :visited
• :first-child, :last-child

:hover, :active y :focus

A veces necesitamos cambiar la forma de visualizar o interpretar algún objeto en respuesta a una acción del usuario. La pseudo-clase :hover se aplica generalmente cuando el cursor se desplaza por encima de un enlace. La pseudo-clase :active se aplica cuando el elemento está siendo activado por el usuario, como por ejemplo cuando el usuario presiona un boton. La pseudo-clase :focus se aplica cuando el elemento tiene el foco

selector:hover {propiedadvalor}
selector:active {propiedadvalor}
selector:focus {propiedadvalor}

Ejemplo

Teniendo un enlace <a>

	<a href="#">Soy un Link</a>

Y el estilo

	a{
		color:green;
	}
	a:hover{
		color: red;
	}
	a:active{
		color:pink;
	}
	a:focus{
		color:blue;
	}

Resumen

Ejercicio Padawan

Crea un boton, como el de la imagen, centrado en el navegador, de fondo azul, que al posarse el mouse encima cambie de color a rojo. Y una vez visitado quede de color verde.

Ejercicio Jedi

Crea tu C.V. Sigue el diseño propuesto

Herencia

Una de las características principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad.

	  body { color: blue; }
	  <!-- HTML -->
	  <body>
	  		<h1>Hola</h1>
	  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quibusdam sequi veniam ex, praesentium dolore ducimus nemo error, maiores vel, ullam dolor rerum commodi nisi quaerat libero, totam vero facere.</p>
	  </body>

Aunque la herencia de estilos se aplica automáticamente, se puede anular su efecto estableciendo de forma explícita otro valor para la propiedad que se hereda, como se muestra en el siguiente ejemplo:

body { font-family: Arial; color: black; }
  	h1 { font-family: Verdana; }
  	p { color: red; }

Redeclaración de Estilos

En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. El problema de estas reglas múltiples es que se pueden dar colisiones como la del siguiente ejemplo:

p { color: red; }
p { color: blue; }

El método seguido por CSS para resolver la redeclaración de estilos es:

• Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.
• Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y su prioridad (palabra clave !important).
• Ordenar las declaraciones según lo específico que sea el selector. Cuanto más genérico es un selector, menos importancia tienen sus declaraciones.
• Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar.

Respecto a !important

Fondos

El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes.

Ejemplo

<div class="caja"></div>

.caja{
	display:block;
	width:100px;
	height:100px;
	background-image: url("imagen.jpg");
}

Background Repeat

Background Repeat

El valor repeat indica que la imagen se debe repetir en todas direcciones y por tanto, es el comportamiento por defecto. El valor no-repeat muestra una sola vez la imagen y no se repite en ninguna dirección. El valor repeat-x repite la imagen sólo horizontalmente y el valor repeat-y repite la imagen solamente de forma vertical.

Background position

La propiedad background-position permite indicar la distancia que se desplaza la imagen de fondo respecto de su posición original situada en la esquina superior izquierda. Si se indican dos porcentajes o dos medidas, el primero indica el desplazamiento horizontal y el segundo el desplazamiento vertical respecto del origen (situado en la esquina superior izquierda). Si solamente se indica un porcentaje o una medida, se considera que es el desplazamiento horizontal y al desplazamiento vertical se le asigna automáticamente el valor de 50%.

Ejemplo

#caja1 {
  background-image: url("images/help.png");
  background-repeat: no-repeat;
  background-position: bottom left;
}
#caja2 {
  background-image: url("images/help.png");
  background-repeat: no-repeat;
  background-position: right top;
}
#caja3 {
  background-image: url("images/help.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

Listas

Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño círculo de color negro. Los elementos de las listas ordenadas se muestran por defecto con la numeración decimal utilizada en la mayoría de países.

Ejercicio

Listas con imágenes

Cuando se requiere personalizar el aspecto de las viñetas, se debe emplear la propiedad list-style-image, que permite mostrar una imagen propia en vez de una viñeta automática.

Ejemplos

ul.ok { list-style-image: url("imagenes/ok.png"); }
ul.flecha { list-style-image: url("imagenes/flecha.png"); }
ul.circulo { list-style-image: url("imagenes/circulo_rojo.png"); }

Propiedades CSS3 visuales indispensables

Border - Radius

Define el radio del borde de un elemento caja

.caja{
	width: 100px;
	height:100px;
	border-radius: 20px;
}

Ejercicio

Recrea el siguiente Efecto

Transformaciones y Animaciones CSS3

Transformaciones

Las transformaciones de CSS3 pueden ser en 2D y en 3D, siendo estas últimas considerablemente más complejas al tener que tener en cuenta los tres ejes de coordenadas.

Las Transformaciones mas usadas son:

• Rotate. Rotate te permite rotar un elemento dándole un ángulo de giro en grados.
• Scale. Scale te permite escalar un elemento, toma valores positivos y negativos y se le pueden poner decimales.
• Translate. Translate nos permite trasladar un elemento a la vez en el eje de las X y de las Y, dándole las coordenadas iniciales y finales.

Transform

El Valor por defecto de la propiedad transform es "none"

.ejemplo {
   transform:none;
}

Ejemplo

.ejemplo {
	 -webkit-transform: rotate (45deg);
	 -moz-transform: rotate (45deg);
	 -o-transform: rotate (45deg);
	 -ms-transform: rotate (45deg);
	 transform: rotate (45deg);
}

La propiedad css es

.ejemplo {
	 transform: rotate (45deg);
}

Lo demás son prefijos según el navegador

.ejemplo {
     -webkit-transform: rotate (45deg); /* Chrome y Navegadores basados en webkit*/
	 -moz-transform: rotate (45deg); /* Firefox*/
	 -o-transform: rotate (45deg); /* Opera*/
	 -ms-transform: rotate (45deg); /* Internet Exploited */
}

Express Prefixer al rescate!

Obtener los prefijos crossbrowser automagicamente

Por defecto, el punto de referencia que toma como eje para hacer la rotación es el centro, pero también se puede especificar otro punto. Aquí un ejemplo en que se traslada el eje de rotación a la parte superior izquierda del elemento:

.ejemplo{
	transform-origin: left top;
	transform: rotate (-20deg);
}

Scale

Escala un elemento en sus valores x e y (ancho y alto)

.ejemplo{
	transform: scale(2);
}

También es posible que queramos dar dos valores diferentes según las X y las Y, con lo que creamos un efecto de escala no proporcional que nos da un efecto visual de distorsión.

	transform: scale (.5, 2);

Si lo deseamos, podemos aplicar el cambio de escala sólo en una dirección. Utilizamos scaleX para sólo escalar en el eje de las X y ScaleY para sólo escalar en el eje de las Y:

		transform: scaleY(3);

Translate

Este nombre puede llevar a confusión, ya que esta propiedad de CSS3 no hace propiamente una transición, sino que hace que un elemento pase de estar en una posición a estar en otra. Con las transiciones y las animaciones de CSS3 vamos a poder darle un efecto visual de movimiento.

.ejemplo{
		transform: translate(10px, 20px);
}

Ejercicio

Aplica las 3 transformaciones a un elemento <a> al momento de posar el mouse sobre el

Transiciones

Para activar una transición es necesario que se detecte un evento. Por ejemplo con :hover, :active o:focus. Si combinamos las transiciones con las transformaciones de CSS3, daremos un efecto de movimiento.

Ejemplo

#nav a{
	 background-color:red;
}

#nav a:hover,
#nav a:focus{
	background-color:blue;
	transition-property:background-color;
	transition-duration:2s;
}

En este ejemplo estamos indicando que la propiedad de transición a variar es el color del background y que se tome 2 segundos en hacer progresivamente el cambio de color. Las transiciones de CSS3 pueden tomar estos valores:

• transition-property
• transition-duration
• transition-delay
• transition-timing-function

Duration

Con transition-duration especificamos el tiempo que va a tardar la transición. Este tiempo se puede expresar tanto en segundos como en milisegundos. Así, 2.4s y 2400ms tendrán una misma duración.

#desplazamiento a {
position: absolute;
left: 0;

transition-property: left;
transition-duration: 2s;
}

#desplazamiento a:hover {
left:15px;
}

Retraso en la Animación

Con la propiedad transition-delay podemos indicar un tiempo de espera antes de empezar a realizar la transición. Esta propiedad puede tomar tanto valores positivos como negativos. En el caso que le demos un valor negativo, lo que sucede es que la transición tiene lugar en el momento de accionar el evento, lo que empieza en el punto que habría empezado en caso de haberlo hecho en el tiempo indicado. Así, si indico un retraso de -3s y tengo una animación de 10s, en el momento de empezar no lo hará en el segundo 0, sino en el segundo 3.

Velocidad

La propiedad transition-timing-function especifica la velocidad en que se desarrollará la transición, utilizando las llamadas curvas de Bezier. Así, podemos programar la transición para que empiece a una velocidad, luego frene y después se acelere o darle el movimiento que creamos conveniente.

Resumiendo

.elemento {
	 height: 100px;
	 transition: all 2s linear;
}

.elemento:hover {
	 height: 200px;
}

Animaciones CSS3 Facil y bonito

@Fontface y Webfonts

Otra propiedad de css3 es @font-face que permite utilizar tipografias distintas a las de sitema

Las tipografias de sistema, varian segun el sistema operativo

Servicios de Webfonts

Algunos de los servicios mas populares para la inclusión de webfonts son

• Google Web Fonts
• Typekit
• FontAwesome
• IcoMoon
• Squirrel Fonts Generator

Google Web Fonts

FontAwesome

Ejercicio

Recrea la siguiente animacion utilizando FontAwesome

el cdn de FontAwesome es https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

Preprocesadores

Un preprocesador de CSS es una herramienta que nos permite escribir pseudo-código CSS que luego será convertido a CSS real. Ese pseudo-código se conforma de variables, condiciones, bucles o funciones. Podríamos decir que tenemos un lenguaje de programación que genera CSS.

Variables

Las vairbles son la forma de reusar contenido en tu codigo, recuerda DRY(A)

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Anidación

En SCSS es muy sencillo definir la jerarquia y especificidad de los selectores, ya que esta se realiza visualmente

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

El codigo anterior se procesa y en css se transforma en

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Modularidad

Divide y vencerás! . Supongamos que tienes los estilos del layout, de botones y de tipografia separados en 3 archivos css... triste no? 3 peticiones HTTP es mucho

@import "layout";
@import "botones";
@import "tipo";

MIXINS

Los mixins son a SASS lo que las funciones son a los lenguajes de programación

Un mixin para border-radius

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Compass, un set de mixins