introduccionAlDisenoWeb PDF

Introduccin a HTML5
Hablar de HTML5 es ms bien hablar de una familia, la cual est constituida por HTML, CSS3 y JavaScript.
En la versin anterior de HTML ya se podan utilizar estas otras dos tecnologas, pero ahora HTML5 las soporta de
manera nativa, o sea, que al definir un script se sobreentiende que utilizaremos JavaScript, y lo mismo ocurre con
los estilos, se toma CSS3 por defecto. Tampoco hace falta indicarle al navegador la versin de HTML que estamos
utilizando, basta con slo indicar que es HTML.
Antes tenamos que escribir de la siguiente forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hola Mundo!</title>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
Ahora lo haremos de la siguiente manera:

<!doctype html>
<html>
<head>
<title>Hola Mundo!</title>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
Qu es HTML5?
HTML5 es un lenguaje de marcado, sus siglas significan Lenguaje de Marcado de HiperTexto. Sirve para
estructurar y presentar contenido para la web. Se trata de un sistema para darle formato al "layout" de nuestras
pginas. La diferencia principal con su predecesor es el nivel de sofisticacin del cdigo que podemos construir
usando HTML5.
El lenguaje HTML funciona a travs de marcas de sentido llamadas etiquetas, stas son la herramienta
fundamental para que los navegadores puedan interpretar el cdigo y permitirnos ver imgenes, textos y
estructuras. Los navegadores juegan el papel de traductores de etiquetas.
Caractersticas que aporta HTML5

Contenido multimedia, audio y video sin la necesidad de plug-ins externos
Almacenamiento de datos del lado del cliente
Trazado de formas, figuras, colores, etc.
Animaciones sin utilizar Flash ni Silverlight
Geolocalizacin
Etiquetas semnticas
www.nebaris.com
Estas etiquetas no tienen una representacin especial en pantalla, ya que todas se comportan como un div o un
span , pero agregan un significado superior. Los divs se siguen utilizando para cuando se necesitan cajas con
objetivos de diseo grfico o cosas que no tengan significado semntico.

<header> : Se cre para reemplazar divs del estilo <div id="header">
<nav> : Slo se puede tener un <nav> por pgina y representa la botonera de navegacin. Se recomienda
utilizar listas <ul> , aunque se puede incluir cualquier cosa dentro.

<section> : Representa una seccin genrica de un documento. Agrupa un contenido temtico. Pueden ser
captulos, pginas en tabs, las secciones de una tesis, etc.

<article> : Representa una composicin completa y autocontenida en una pgina. Puede ser un post en un
foro, un artculo en una revista, una entrada de blog, un comentario de un usuario, un widget interactivo o
cualquier otro contenido independiente.
<aside> : Ac se coloca todo contenido que no est relacionado con el objetivo primario de la pgina.
<footer> : Se cre para reemplazar a divs del estilo <div id="footer">
Ms etiquetas
Estas son las etiquetas por las cuales todos se estn volviendo locos por HTML5.
<video> : Agrega video sin necesidad de plugins. Cada navegador soporta codecs diferentes, por lo cual es
necesario recodificar el video en mltiples codecs.

<audio> : Agrega audio. Permite mltiples formatos.
<input *> : Se agregaron nuevos campos como cajas de email auto validadoras, sliders, calendarios, etc.
<canvas> : Es un API de dibujo para JavaScript. Otorga un rea de dibujo vectorial y de bitmaps.
<svg> : Es igual que <img> , pero sirve para insertar dibujos y animaciones vectoriales al estilo Flash, basado en
el estndar SVG (Grficos de vector escalable - deriva de XML).
www.nebaris.com
Introduccin a CSS
CSS (Cascading Style Sheets u Hojas de Estilo en Cascada) es el responsable de describir la apariencia de los
elementos HTML.
Fue presentado junto a la versin 4 de HTML por el W3C para ayudar a solucionar los problemas que estaban
teniendo los desarrolladores con la versin 3.2, la cual inclua muchas tag de presentacin. Como HTML nunca fue
pensado para incluir tags de presentacin, el desarrollar y mantener pginas era bastante complicado.
Al separar el contenido de la presentacin, CSS hizo que HTML fuera ms semntico y mantenible, adems, hizo
que fuera ms simple el acceso a dispositivos como computadoras, impresoras, dispositivos mviles, etc.
Estado actual
Actualmente, CSS se encuentra en la versin 2.1 como estndar oficial, con partes de la versin 3 en estado de
recomendacin. Por suerte la W3C dividi las especificaciones de CSS3 en una serie de mdulos a ser
implementados de manera separada e independiente. Esto permiti que los navegadores pudieran implementar
mdulos sin tener que esperar a que toda la especificacin est finalizada.
Conceptos fundamentales
Cascada
La cascada determina qu propiedades son asignadas a un elemento. Existen 3 conceptos principales que
determinan qu propiedades se asignan a un elemento: importancia, especificidad y orden.
Importancia
La importancia depende del origen de la hoja de estilo. Las hojas de estilo pueden tener diferentes orgenes como:
estilos de agente de usuario, estilos de usuario y estilos de autor.
Estilos de agente de usuario: Son los estilos que aplica el navegador por defecto. Cada navegador tiene
sus estilos y es por eso que existen diferencias visuales entre uno y otro.
Estilos de usuario: Son los estilos especificados por el usuario. Generalmente son aplicados por usuarios
con necesidades especiales (fuentes grandes, colores especficos, contraste, etc.)
Estilos de autor: Son los estilos definidos por el diseador del sitio. Son las reglas que ms peso tienen.
Especificidad
La especificidad determina cul de las reglas CSS es aplicada por el navegador. Una vez que se decidi la
importancia de una regla, se asigna la especificidad. Si dos reglas se aplican sobre el mismo elemento, la regla
con el selector ms especfico obtiene precedencia.
Orden
Se refiere al orden del cdigo en el que los estilos son enlazados, incluidos o importados. Si hay dos hojas de
estilo enlazadas, la ltima tiene precedencia sobre la primera. O si dos reglas afectan al mismo elemento y tienen
la misma importancia y especificidad, la que aparezca ltima en la hoja de estilo, es la que ser aplicada.
www.nebaris.com
Herencia
La herencia indica que el valor de una propiedad es copiada del valor de la misma propiedad del elemento padre.
Por lo tanto, cuando se indica que una propiedad hereda, significa que el valor ser determinado por la herencia, a
menos que se especifique lo contrario. Por ejemplo, si en el elemento body se especifica que el color de la letra va
a ser rojo, todos los elementos p van a tener el color rojo de letra, a menos que se especifique otra cosa.
No todas las propiedades son heredadas, pero se puede forzar este comportamiento utilizando el valor inherit .
Reglas
Las reglas le dicen al navegador cmo debe mostrar los elementos. Una regla est compuesta por dos elementos:
un selector y una o ms declaraciones.
Selector
El selector es la parte que indica el elemento HTML al cual se le va a especificar un conjunto de propiedades. Los
selectores pueden contener ms de un elemento, pueden ser una combinacin de elementos, clases, id; como as
tambin utilizar combinadores que expliquen la relacin entre ellos.
Declaracin
Todo lo que est dentro de las llaves forma parte de la declaracin. Consiste en 1 o ms propiedades seguidas de
dos puntos y un valor.
Propiedad y valor
Son un conjunto de parmetros que definen la forma en que se muestra un documento, indican que parte hay que
modificar. Cada propiedad es seguida por un valor que especifica cmo debe estar determinada la propiedad.
Modelo de cajas
Una de las cosas bsicas al empezar a estudiar CSS, es entender el modelo de cajas. Cada elemento HTML,
puede ser pensado como una caja rectangular de contenido, relleno (padding), bordes (border) y mrgenes
(margin).
www.nebaris.com
El rea del centro es el contenido, el cual es el corazn del elemento. Puede contener texto, imgenes, etc.
El rea de padding rodea al contenido y la separa del borde.
El rea del borde es la parte ms alejada del contenido y sirve para delimitarlo.
Finalmente el rea de margen existe por fuera de la caja y es el espacio al rededor del elemento que lo
separa de los dems elementos.
Agregar CSS
Existen cuatro formas de agregar CSS a una pgina web.
Estilos inline
Los estilos inline mezclan el contenido con la presentacin. Para agregarlos se utiliza el atributo style dentro de un
elemento HTML.
<p style="color: red">...</p>
Estos estilos se encuentran en la parte ms baja de la cascada, lo cual indica que sobrescribirn a cualquier otro
estilo declarado.
No es recomendable usarlos, ya que si necesitamos cambiarlos, deberemos modificar directamente el contenido
(uno por uno). A pesar de eso, son buenos para crear prototipos o para utilizar estilos temporales que no se van a
compartir con otros elementos de la pgina.
Estilos internos
www.nebaris.com
Se incluyen en la cabecera de la pgina y se definen utilizando la etiqueta <style> . Con este mtodo se pueden
escribir todas las reglas dentro del archivo HTML.
<style>
p {
color: red;
}
</style>
Son tiles para uso temporal o para testing; para otro uso no estn indicados, ya que si tenemos una web grande,
con muchas pginas, tendremos que estar repitiendo el estilo en cada una de ellas, lo cual hara del
mantenimiento una tarea imposible.
Estilos enlazados (o externos)

Con un estilo externo podemos cambiar el diseo de un website entero con un solo archivo. Para utilizarlo se lo
define en la cabecera de las pginas utilizando el elemento <link> .
<link rel="stylesheet" href="styles.css">
El atributo rel indica la relacin entre el documento actual y el documento que est siendo enlazado, que en este
caso es una hoja de estilo. El atributo href hace referencia a la ruta donde se encuentra el archivo a enlazar.
Una de las ventajas de esta forma, es que una vez descargada la hoja de estilos, esta queda almacenada en el
navegador y no se vuelve a descargar en cuanto navegamos a otra pgina de la misma web. Esto reduce
considerablemente el tiempo de carga de nuestras pginas.
Este es el mtodo ms utilizado a la hora de agregar CSS a una pgina.
Estilos importados
Este mtodo nos permite importar CSS desde otros archivos, con lo cual comparte algunas de las ventajas de los
estilos externos. La regla @import se puede utilizar en pginas o en hojas de estilo.
Con este mtodo podemos hacer que nuestras hojas de estilo sean ms modulares, separando el cdigo en
diferentes archivos.
@import 'botones.css';
@import 'tipografia.css';
@import 'imagenes.css';
La contra, es que cada llamada @import es un nuevo HTTP request, lo cual hace que nuestra web tarde ms en
cargar.
www.nebaris.com
Introduccin a jQuery
Aunque ya hemos hablado en muchas ocasiones sobre jQuery, varias personas me preguntaron si poda hacer un
artculo introductorio. As que para ayudar a todos los que todava no saben jQuery, hoy vamos a empezar por el
principio.
JavaScript es un lenguaje de programacin del lado del cliente, utilizado para aadirle interactividad (o
comportamiento) a una pgina.
jQuery es una librera JavaScript que incluye muchsimas funcionalidades como: manejo de eventos, navegacin
del DOM, animaciones, interaccin Ajax, etc. jQuery realmente simplifica la programacin JavaScript.
Para incluir jQuery en tu proyecto lo nico que necesits es descargarlo desde la pgina jQuery.com y hacer una
llamada en tu pgina al archivo jquery.js.
<script src="jquery.js"></script>
La funcin jQuery
Lo ms importante es saber cmo seleccionar elementos HTML con jQuery. jQuery es una funcin a la que se le
pueden pasar argumentos, del cual el ms comn es un string con un selector CSS. Estos selectores permiten
indicar cules son los elementos HTML deseados para aplicarles un comportamiento.
Si queremos seleccionar todos los prrafos lo haramos de la siguiente manera:
jQuery('p');
Por suerte, como jQuery utiliza los selectores de la misma forma que CSS, el llegar a los elementos es realmente
simple, si ya tenemos conocimientos de CSS.
Para agilizar las cosas, cuando trabajamos con jQuery, existe una forma abreviada de llamar al mtodo jQuery:
utilizando el smbolo "$". Por lo tanto la anterior lnea de cdigo la haramos de la siguiente forma:
www.nebaris.com
$('p');
Para obtener la misma funcionalidad con JavaScript tendramos que hacer lo siguiente:
document.getElementsByTagName('p');
Formas de seleccin:
Elemento: $('tag html') - ejemplo $('blockquote');
ID: $('#id') - ejemplo $('#contenedor');
Clase: $('.clase') - ejemplo $('.importante');
Tambin podemos hacer una conjuncin de varias de estas formas, para lograr un selector realmente complejo:
// selecciona el span marcado con clase actual,
// dentro de una etiqueta a
// dentro de un div con ID navegacin
$('div#navegacion a span.actual');
Para asegurarnos que el cdigo se ejecute una vez que la pgina est correctamente cargada, podemos hacer
uso del evento ready (esto nos puede evitar muchos problemas a futuro):
$( document ).ready(function() {
// cdigo
});
Propiedades y atributos
Ahora que ya sabemos seleccionar elementos, es momento de hacer algo con ellos. Hay varias funciones que
podemos aplicar y la forma de utilizarlas es agregndolas al final del elemento seleccionado. Por ejemplo, para
cambiar el color del texto de los elementos "p", tenemos que hacer lo siguiente:
// todos los elementos p tendrn el texto en color rojo
$('p').css('color', 'red');
Si en cambio queremos modificar la clase de un elemento, podemos utilizar la funcin addClass() (removeClass
nos permite quitar una clase):
$('a').addClass('importante');
Si queremos saber la clase de un elemento obtenido por ID:

$('#divContenedor').attr('class');
Para manipular textos podemos hacerlo a travs de la funcin text()

$('p span').text('Hola mundo');
www.nebaris.com
O a travs de la funcin html() que adems acepta cdigo html.

$('p span').html('<strong>Hola mundo</strong>');
Eventos
Hasta ahora, las cosas son bastante estticas. Para interacutar con los elementos se utilizan los manejadores de
eventos. Por ejemplo, cuando se haga click sobre un enlace, ocultaremos un texto:
$('a #ocultar').click(function() {
$('span #aOcultar').hide();
});
Es interesante observar que como parmetro, la funcin click recibe una funcin annima (sin nombre), en la cual
indicamos lo que va a ocurrir cuando se de dicho evento.
Existe una gran cantidad de eventos que nos proporciona jQuery, para poder verlos todos, pods consultar la
pgina de eventos de jQuery.
Animaciones
Otra cosa interesante que podemos hacer con jQuery, es animar elementos. Para ello, slo tenemos que indicarle
a la funcin animate() cules son las propiedades CSS que van a cambiar del elemento y la velocidad de la
animacin.
$("#divAnimado").animate(
{
width: "500px",
height: "700px"
}, 2000);
Tambin podemos hacer uso de las funciones slide, que nos permiten mover los elementos por la pantalla.
$("#divAnimado").slideDown("fast", function() {
// cdigo
}
$("#divAnimado").slideUp("slow", function() {
// cdigo
}
www.nebaris.com
10
Introduccin a Google Chrome Developer Tools

Cuando comenzamos a desarrollar pginas web, identificar errores de manera simple y rpida se convierte en una
necesidad. La mayora de los navegadores modernos poseen herramientas de desarrollo para inspeccionar la
pgina, el diseo y el cdigo JavaScript. En este artculo, vamos a ver las funcionalidades que Google Chrome
Developer Tools nos provee para agilizar nuestro tiempo de desarrollo web.
Invocar las herramientas del desarrollador

Existen varias formas de abrir la venta de las Developer Tools:
apretando la tecla F12
botn derecho > Inspeccionar elemento
desde el men > Herramientas > Herramientas del desarrollador
Anatoma
Developer Tools contiene varios elementos de los cuales podemos hacer uso. Vamos a enumerarlos para entender
mejor su funcin.
Nota: si al abrir las herramientas, estas aparecen adosadas a la ventana, utilizando el cono que se encuentra en
la esquina inferior izquierda, pods hacer que se muestre en una ventana nueva.
1. Elemento que est siendo inspeccionado
2. Tabs que nos ofrecen acceso a los diferentes recursos
3. Panel de propiedades
4. Modificar las configuraciones
5. rbol DOM desde la raz hasta el elemento inspeccionado
www.nebaris.com
11
6. Volver a mostar las herramientas dentro de la ventana de la pgina

7. Mostar consola JavaScript
8. Herramienta para inspeccionar elementos
Manipulando el CSS
Tenemos seleccionada la tag h1 y podemos ver en el Panel de propiedades todos los estilos que se le aplican a
ese elemento.
1. Nos indica cmo se llama el archivo CSS donde est incluida la regla, junto con la lnea de dicho archivo
2. Nos indica la regla exacta
3. Nos permite activar/desactivar una propiedad
Haciendo click sobre el nombre de la propiedad o el valor, podemos modificarlos y ver automticamente este
cambio reflejado en la pgina. Tambin es posible, haciendo un click en la llave de cierre, agregar una nueva
propiedad.
Consola
Supongamos que tenemos un error en nuestro script y no sabemos donde. Al abrir la consola, podremos ver algo
como lo siguiente:
Nos indica cul es el error, en dnde est (archivo y lnea) y en la esquina derecha inferior nos muestra un cono
con la cantidad de errores encontrados.
Si hacemos un click en el nombre del script, pasaremos a la ventana Sources, donde podremos ver claramente
www.nebaris.com
12
dnde est el error en nuestro cdigo.
Tambin podemos agregar cdigo a la pgina. Por ejemplo, hacemos por jQuery que cada vez que se hace click
en un elemento h1, este cambie su color por el rojo.
Hacemos click sobre el ttulo y comprobamos, que a pesar de no estar en el cdigo original, al agregar nuestro
cdigo jQuery la pgina funciona como esperamos. Esto nos permite hacer pruebas de manera real antes de
agregar nuestro cdigo al archivo.
www.nebaris.com
13
Debug
Cuando necesitamos hacer un seguimiento paso a paso del cdigo para verificar una condicin o error, tenemos
que agregar al cdigo JavaScript la siguiente sentencia:
debugger;
Con eso, mientras tengamos las herramientas activas, al llegar a esa parte del cdigo la pgina dejar de cargarse
y las Developer Tools tomarn el control del flujo.
Ac podemos ver varias cosas interesantes:

1. Indica el archivo en el cual estamos parados
2. Pausa o reinicia la ejecucin
3. Control de la ejecucin
4. Activar/Desactivar los breakpoints (o puntos de interrupcin)
5. Al hacer click en el margen podemos agregar breakpoints
6. Si dejamos el mouse sobre una variable unos segundos nos mostrar el valor de la misma
www.nebaris.com
14
7. Los checkboxes nos permiten activar/desactivar breakpoints

Si necesitamos agregar watch expressions (expresiones a observar) para ver cmo se van modificando, tenemos
que apretar el botn de "+" que tenemos en la esquina superior derecha del Panel de propiedades.
Si ests trabajando con un archivo minificado, pods utilizar el botn de Pretty print para que sea fcil leerlo.
Resources
www.nebaris.com
15
La vista de recursos bsicamente muestra todos los recursos que son utilizados por la pgina, incluyendo
almacenamiento de sesin, cookies, almacenamiento local, imgenes, scripts, estilos, etc.
Desde esta ventana se pueden eliminar cookies, aadir valores al almacenamiento local, etc.
Network
Esta ventana muestra con mucho detalle los tiempos de carga de cada uno de los recursos que utiliza la pgina.
Esto nos sirve para hacer diagnsticos sobre problemas que tengamos con la lentitud de nuestro proyecto.
www.nebaris.com
16
www.nebaris.com
17
Introduccin a los prepocesadores CSS

Los preprocesadores CSS toman cdigo escrito en un lenguaje de preproceso y lo convierten a cdigo CSS.
Debido a que en realidad no son CSS, no estn atados a sus limitaciones. El lenguaje de preproceso puede darte
ms funcionalidad que la que otorga CSS, al mismo tiempo que verifica que todo funcione perfecto con los
navegadores. Existen varios lenguajes (siendo LESS y Sass los ms utilizados), los cuales intentan dotar a CSS de
caractersticas de los lenguajes de programacin, como: funciones, anidamiento, variables y mixins.
Cmo funcionan?
Bsicamente, el flujo de trabajo es el siguiente:
Se escribe cdigo en un lenguaje de preproceso
Mediante un cliente, se compilan los archivos de cdigo
Se obtiene una hoja de estilos en CSS
Inconvenientes de utilizar un preprocesador

Existen algunas cosas a tener en cuenta con respecto al uso de preprocesadores:
Todo el equipo debe utilizar el mismo preprocesador. No es posible que unos utilicen Sass y otros LESS, por
ejemplo.
Una vez modificado el CSS a mano, se debe seguir ese camino.
Se debe trabajar de manera local, en vez de editar los archivos en produccin.
Sintaxis
Veamos algunos ejemplos bsicos escritos en Sass, LESS y el resultado que producen en CSS; para ver las
diferencias.
Variables: Los preprocesadores permiten definir variables, lo que hace al cdigo ms mantenible. Modificar un
slo valor, es mucho ms fcil que modificar varios en toda la hoja de estilo.
/* sass */
$colorBlanco: #fff;
body {background:
$colorBlanco;}
/* less */
@colorBlanco: #fff;
body {background:
@colorBlanco;}
/* resultado */
body {background:
#fff;}
Las variables no slo se pueden usar como valor, sino que tambin se pueden concatenar con strings o con las
propiedades de CSS.
/* sass */
www.nebaris.com
18
$lado: top;
border-#{$lado): 1px solid #000;
/* resultado */
border-top: 1px solid #000;
/* less */
@base-url: "http://www.nebaris.com";
background-image: url("@{base-url}}/imagenes/bg.png");
/* resultado */
background-image: url("http://www.nebaris.com/imagenes/bg.png");
Anidamiento: El anidamiento viene a solucionar el problema de tener que escribir muchas veces el mismo padre
para muchos elementos.
/* sass y less */
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
}
/* resultado */
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
Mixins: Los mixins son funciones que permiten reusar propiedades en la hoja de estilo.
/* sass - mixin error con argumento opcional */
/* en caso de no pasarle argumentos, por defecto es 2px */
@mixin error($anchoBorde: 2px) {
border: $anchoBorde solid #F00;
www.nebaris.com
19
color: #F00;
}
.error-generico {
padding: 20px;
margin: 4px;
@include error();
}
.error-login {
left: 12px;
position: absolute;
top: 20px;
@include error(5px);
}
/* less - mixin error con argumento opcional */

/* en caso de no pasarle argumentos, por defecto es 2px */
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.error-generico {
padding: 20px;
margin: 4px;
.error();
}
.error-login {
left: 12px;
position: absolute;
top: 20px;
.error(5px);
}
/* resultado */
.error-generico {
padding: 20px;
margin: 4px;
border: 2px solid #f00;
color: #f00;
}
.error-login {
left: 12px;
position: absolute;
top: 20px;
border: 5px solid #f00;
color: #f00;
}
Herencia: La herencia es la habilidad de los selectores de poseer las propiedades de un selector padre. En este
caso, solo veremos el ejemplo para Sass, ya que Less no soporta la herencia.
/* sass */
www.nebaris.com
20
.block {
margin: 10px 5px;

padding: 2px;
}
p {
@extend .block; /* hereda los estilos de ".block" */
border: 1px solid #EEE;
}
ul, ol {
@extend .block; /* hereda los estilos de ".block" */
color: #333;
text-transform: uppercase;
}
/* resultado */
.block, p, ul, ol {
margin: 10px 5px;
padding: 2px;
}
p {
border: 1px solid #EEE;
}
ul, ol {
color: #333;
text-transform: uppercase;
}
Importacin: En la comunidad CSS la importacin no est bien vista, ya que requiere mltiples pedidos HTTP.
Con los preprocesadores, al importar un archivo, ste se incluye durante la fase de compilacin, creando un slo
archivo CSS.
/* sass y less */
/* tipo debe reemplazarse por la extensin del preprocesador, .less o .scss */
/* estilo.{tipo} */
body {
background: #EEE;
}
@import "reset.css";
@import "estilo.{tipo}";
p {
background: #0982C1;
}
/* resultado */
@import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
www.nebaris.com
21
}}
Principales preprocesadores
A la hora de elegir, existen varios preprocesadores CSS. Bsicamente todos tienen la misma funcionalidad,
agilizan la creacin de archivos CSS. La eleccin de uno sobre otro es ms una cuestin de gustos.
Te dejo una lista de los principales preprocesadores, para que puedas elegir cul utilizar.
Less
Sass
Switch CSS
More CSS
CSS Cacheer
CSS Preprocessor
Stylus
DtCSS
www.nebaris.com
22
Casos de prueba reducidos en desarrollo frontend

Hoy vamos a hablar sobre cmo resolver problemas que nos aparezcan al desarrollar la interfaz de usuario de una
pgina web.
Cuando tenemos problemas con el cdigo y no encontramos por dnde viene el error, lo mejor que podemos hacer
es crear un caso de prueba reducido.
Al crear un caso de prueba reducido podemos: aislar el problema y resolverlo, o pasar el bug a la gente
responsable
Qu es un caso de prueba reducido?

Bsicamente, es una pgina de ejemplo que creamos para reproducir un problema que estamos teniendo, tratando
de poner en ella el menor cdigo posible: slo el HTML, CSS y JavaScript realmente necesario.
Los casos de prueba reducidos se utilizan mucho tanto en el desarrollo backend como en el frontend. El
aislamiento que obtenemos al utilizarlos nos permite centrarnos en lo que realmente est causando el error y
focalizarnos para solucionarlo.
Pasos para encontrar y resolver problemas

1 - Identificar el problema
El primer paso para resolver un problema es identificarlo correctamente. Tenemos que estar seguros que el error
que se produce no proviene de cdigo de backend, sino que es algo que no est correcto en el frontend.
2 - Hacer la pgina esttica

Ya sabemos que tenemos un problema en el frontend, entonces lo mejor es separar el frontend del backend, o
sea, hacer que la pgina pase de ser dinmica a esttica. Para eso, vemos el cdigo fuente de la pgina y lo
copiamos a un nuevo documento. Con esto podremos empezar nuestro caso reducido. Tambin tenemos que
poner este nuevo documento en una carpeta aparte, especial para nuestras pruebas.
3 - Aislamiento
Ya tenemos la pgina de prueba, ahora tenemos que copiar todos los recursos necesarios (imgenes, archivos
CSS y JavaScript externos, etc.) en el nuevo directorio que creamos. Ya tenemos creado un pequeo entorno de
pruebas que nos va a permitir tocar por aqu y por all sin que nada de lo importante se rompa.
Al trabajar de estar forma, no slo podemos estar tranquilos de los cambios, sino que hacemos que el caso de
prueba sea portable, para poder replicarlo en otro lado.
4 - Trabajar de arriba a abajo

En general es mejor empezar a trabajar desde el inicio del documento, o sea, por el head y finalmente ir al body . Si
trabajamos de esta forma podemos ir reduciendo un elemento a la vez. Empezamos entonces por la etiqueta head
que contiene enlaces a archivos CSS, JavaScript y dems. Quitamos un elemento, guardamos y verificamos en el
navegador que el problema sigue persistiendo. Si al quitar un bloque de cdigo el problema desaparece, ya
habremos encontrado la causa. Volvemos a colocarlo para verificar que el problema se vuelve a dar y
www.nebaris.com
23
continuamos.
5 - Archivos externos
Si utilizamos archivos externos y detectamos que al agregarlos tenemos un problema, lo mejor es tratar de poner
estos archivos en el documento de prueba que estamos utilizando.
Remplazar las tags link por style , poniendo los selectores en la pgina
Reemplazar los enlaces de script por cdigo embebido
Reemplazar los enlaces de las imgenes por la direccin equivalente en la carpeta para el test
6 - Reducir
Una vez que terminamos con la etiqueta head , tenemos que empezar a reducir el cdigo de la etiqueta body . Este
va a ser el lugar donde ms pasemos el tiempo, ya que podemos tener muchsimas lneas de cdigo para analizar.
La regla general es ir eliminando etiquetas de forma entera (desde la apertura hasta el cierre). Teniendo en cuenta
que cada vez que eliminemos un elemento, debemos guardar y volver a refrescar el navegador para constatar los
cambios.
7 - Documentar
Si existen partes del cdigo que suponemos que pueden ser el problema, deberamos indicarlo poniendo
comentarios en el cdigo. Esto va a ayudar a la tarea de los que sean responsables de solucionar dicho error.
8 - Poner el material en lnea

Si estuvimos trabajando de manera local y no pudimos resolver el problema, tenemos que subir los archivos a un
repositorio (Git, SVN, Mercurial, etc.) o una carpeta compartida (Dropbox, SugarSync, etc.) para que otro equipo
pueda observar lo que hicimos e intentar solucionar el problema.
Herramientas
Existen varias herramientas que nos pueden ayudar al momento de tener que lidiar con bugs en el frontend. La
siguiente es una pequea lista de ellas:
Editores de texto con sintxis coloreada:
Notepad++
Sublime Text
Analizadores del DOM. Permiten hacer modificaciones en vivo sobre el documento, as como tambin jugar
con los estilos y scripts
Firebug
Google Chrome Developer Tools
DOM Inspector permite inspeccionar y editar
JSFiddle nos permite hacer un pequeo caso de prueba sin tener que implementarlo de forma local
Validadores
The W3C HTML Validator
The W3C CSS Validator
JSLint
JSHInt
www.nebaris.com
24
Introduccin a CoffeeScript
CoffeeScript es un lenguaje que se compila a JavaScript y que se ha vuelto muy popular dentro de la comunidad
Node.js y Rails. Si la sintxis de JavaScript (llena de llaves, parntesis y puntos y comas) no termina de gustarte;
quizs CoffeeScript sea lo que ests necesitando.
Qu es CooffeeScript?
Bsicamente es una reescritura sintctica de JavaScript. La sintaxis que utiliza CoffeeScript es muy parecida a
Ruby o Python. El cdigo en archivos .coffee no se interpreta como JavaScript, sino que se compila a archivos .js.
Por qu utilizar CoffeScript?

As como los preprocesadores CSS nos ayudan a escribir CSS de forma ms simple, CoffeeScript nos permite
trabajar de forma ms sencilla con el cdigo JavaScript. Podemos escribir menos cdigo, sabiendo que adems
vamos a estar siguiendo buenas prcticas y nuestro proyecto ser ms legible.
Es una buena idea leer el resultado compilado de nuestro cdigo, ya que como CoffeeScript sigue patrones
establecidos, podemos aprender varias cosas nuevas.
Instalacin
Para poder trabajar, es necesario instalar CoffeeScript en nuestra computadora.
Windows
Hay que visitar el sitio http://nodejs.org/, descargar el instalador y seguir los pasos que ste nos indique.
Una vez instalado Node.js, abrir una consola y tipear el siguiente comando:
npm install -g coffee-script
Verificamos que se haya instalado correctamente:

coffee -v
OS X
Podemos instalar CoffeeScript utilizando Homebrew, que es un administrador de paquetes de cdigo abierto para
OS X.
Verificamos que Homebrew est actualizado ejecutando en la terminal el siguiente comando:
brew update
Primero tenemos que instalar Node.js, ejecutando en la terminal:

brew install node
www.nebaris.com
26
Y luego instalamos CoffeeScript

npm install -g coffee-script
Verificamos que se haya instalado correctamente:

coffee -v
Cmo trabajar?
Existen diferentes formas de trabajar con CoffeeScript:
1 - REPL
Si en la consola escribimos el comando coffee sin parmetros, se abrir un shell interactivo parecido al IRB de
Ruby. Es una buena herramienta para experimentos rpidos.
2 - Compilacin a demanda
Podemos indicarle a CoffeeScript que queremos compilar todos los archivos de un directorio y que el resultado lo
coloque en otro directorio. Para ello, tenemos que ejecutar el siguiente comando:
coffee -o directorioSalida/ -c directorioEntrada/
3 - Compilacin al vuelo
De la forma anterior, cada vez que hacemos un cambio y queremos que se compile, tenemos que ejecutar el
comando. Si en su lugar queremos que CoffeScript est vigilando si hay cambios y que automticamente compile,
podemos ejecutar este comando:
coffee -w -o directorioSalida/ -c directorioEntrada/
4 - Compilacin en un solo archivo

Las opciones anteriores producirn un archivo JavaScript por cada archivo CoffeeScript. Muchos archivos
JavaScript incrementan la cantidad de peticiones HTTP del navegador. Para evitarlo, podemos hacer que todos los
archivos compilen en uno solo.
coffee -j directorioSalida/archivo.js -c directorioEntrada/*.coffee
Utilizamos el asterisco como comodn.
Sintaxis
Variables
En CoffeeScript, las variables no requieren la palabra reservada var . Solamente indicamos su nombre y el valor
que va a poseer.
www.nebaris.com
27
nombre = "Gabriel"
edad = 28
Con los strings, podemos utilizar el smbolo # seguido de llaves, para agregar el contenido de una variable a otra:
// mostrar Gabriel Kaplan
apellido = "#{nombre} Kaplan"
Funciones
Las funciones se definen de la siguiente manera:
<nombre> = (<parmetros, si hubiera>) ->
<linea de cdigo 1>
<linea de cdigo 2>
...
No se indica la palabra return, ya que siempre se devuelve el resultado de la ltima lnea de cdigo.
Vamos a ver un par de ejemplos:
saludar = ->
"Hola mundo"
saludo = (nombre) ->
"Hola #{nombre}"
Las funciones pueden llamarse utilizando o no los parntesis:

saludo "Gabriel"
Arreglos
Se pueden inicializar arreglos de diferentes formas:
// forma 1 - una sola lnea
arreglo = ["Hola", "como", "estan?"]
// forma 2 - multi lnea
arreglo = [
"Hola",
"como",
"estan?"
]
// forma 3 - sin comas
arreglo = [
"Hola"
"como"
"estan?"
]
www.nebaris.com
28
// forma 4 - mezcla
arreglo = [
"Hola", "como",
"estan?"
]
Objetos
Al crear objetos JSON, podemos evitar las comas y las llaves, de la siguiente forma:
kiss =
miembro:
nombre: "Gene Simmons",
instrumento: "bajo"
miembro:
nombre: "Paul Stanley",
instrumento: "guitarra"
miembro:
nombre: "Ace Frehley",
instrumento: "guitarra"
miembro:
nombre: "Peter Criss",
instrumento: "batera"
Rangos
Los rangos no son un estructura estndar de JavaScript, por lo cual se compilan como arreglos. Se crean
indicando dos enteros separados por dos puntos en medio de corchetes.
dias = [1..7]
Clases
Las clases se crean indicando la palabra class en conjunto con el nombre de la misma. Los mtodos que posea
esta, se indican con dos puntos seguidos del operador -> .
Los atributos de la clase se indican con un arroba.
// forma 1
class Auto
constructor: (marca) ->
@marca = marca
// forma 2 - indicando la propiedad en la lista de argumentos
class Auto
constructor: (@marca) ->
Para crear una instancia de la clase se utiliza el operador new

miAuto = new Auto
www.nebaris.com
29
Equivalencias
CoffeeScript nos provee de alias para los operadores de JavaScript, lo cual ayuda a que nuestro cdigo sea ms
legible.
COFFEESCRIPT
JAVASCRIPT
is
===
isnt
!==
not
and
&&
or
||
yes, on
true
no, off
false
of
in
Por ejemplo:
// CoffeeScript
mostrar() if luz is on
// JavaScript
if(luz === true) {
mostrar();
}
// CoffeeScript
ganador = yes if numero in [47, 92, 13]
// JavaScript
if(numero === 47 || numero === 92 || numero === 13) {
ganador = true;
}
Adems, nos provee de un operador nuevo llamado "operador existencial"; el cual es un signo de pregunta ? . Este
operador nos devuelve verdadero a menos que la variable sea null o undefined .
// CoffeeScript
volumen = 5 if musica?
// JavaScript
if(typeof musica !== "undefined" && musica !== null) {
volumen = 5;
}
www.nebaris.com
30
Qu es Emmet?
Emmet es un plugin gratuito, para la mayora de los editores de texto, que nos ayuda a escribir de forma ms
rpida HTML y CSS. En este artculo vamos a ver cmo se usa y qu ventajas aporta.
Introduccin
La mayora de los editores de texto permiten guardar y reutilizar pedazos de cdigo llamados: spnippets. Los
snippets son muy tiles para mejorar la productividad, pero tienen dos problemas importantes:
Antes de usarlos hay que definirlos
No se pueden extender en tiempo de ejecucin
Emmet lleva el concepto de snippets al siguiente nivel, permitiendo escribir expresiones parecidas a CSS que
pueden ser convertidas dinmicamente y cuya salida producida depende de lo que hayamos tipeado en la
expresin.
Emmet est pensado para desarrolladores web que trabajan con HTML/XML y CSS, pero puede tambin ser
utilizado con lenguajes de programacin.
Pods instalar Emmet en la mayora de los editores de texto:
Visual Studio
Sublime Text
Eclipse
Dreamweaver
Coda
Brackets
Entre otros
Adems, muchos servicios online permiten el uso de Emmet, como:
http://jsfiddle.net/
http://codepen.io/
http://jsbin.com/
Cmo funciona?
www.nebaris.com
31
Como dijimos antes, Emmet utiliza una sintaxis parecida a CSS. Escribimos una expresin, colocamos el cursor al
final de la misma y apretamos la tecla tab , lo cual va a expandir la expresin y obtendremos el cdigo HTML o
CSS deseado.
Como se ve en la imagen, Emmet nos permite concatenar varias declaraciones. La siguiente es una lista de
algunos de los operadores soportados:
Elemento
Tipeando el nombre del elemento y apretando tab se expandir.
div se expandir a <div></div>
a se expandir a <a href=""></a>
Elemento con id
Se utiliza el numeral para aplicar un id a un elemento.
div#contenido se expandir a <div id="contenido"></div>
Elemento con clase

Se utiliza el punto para aplicar una clase a un elemento.
div.importante se expandir a <div class="importante"></div>
Elemento hijo
Se utiliza el caracter > para crear elementos hijos.
div>a se expandir a
<div>
<a href=""></a>
</div>
Elemento hermano
Se utiliza el ms, para crear un elemento hermano.
div+a se expandir a
<div></div>
www.nebaris.com
32
<a href=""></a>
Multiplicacin de elementos
Se utiliza el asterisco para crear mltiples elementos.
ul>li*3 se expandir a
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Numeracin de tems
Se utiliza el smbolo pesos para crear una numeracin de tems.
ul>li.item$*3 se expandir a
<ul>
<li class="item1"></li>
</ul>
Cambiar contexto
Se utiliza el operador ^ para subir un nivel en el rbol del documento y cambiar el contexto donde aparecern los
siguientes elementos.
div>a^p se expandir a
<div>
<a href=""></a>
</div>
<p></p>
Agrupar
Se utilizan los parntesis para agrupar expresiones complejas.
(div>ul>li*3)+p>a se expandir a
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p>
<a href=""></a>
</p>
www.nebaris.com
33
Aadir texto
Las llaves permiten aadir texto a un elemento.
a{click aqu} se expandir a <a href="">click aqu</a>
Abreviaturas para CSS

Hasta ahora las expresiones que vimos sirven todas para crear elementos HTML, pero Emmet tambin provee
snippets para CSS. Por ejemplo:
m se expandir a margin: ; .
Pero si queremos agregar un valor al margen, podemos hacer lo siguiente:

m10 se expandir a margin: 10px; .
O podemos utilizar un guin para separar diferentes valores:

m10-20 se expandir a margin: 10px 20px; .
Unidades
Por defecto, las unidades son los pixeles, si queremos incluir otras tendremos que indicarlo en la expresin.
Emmet nos otorga alias para las unidades ms utilizadas:
p -> %
e -> em
x -> ex
m10p se expandir a margin: 10%; .
Colores
Emmet utiliza los valores hexadecimales para indicar los colores y la forma de hacerlo es utilizando el numeral.
c#0 se expandir a color: #000 .
Como el numeral es un separador, no hace falta utilizar guiones, por lo cual podemos sumarlo a un valor de
medida, por ejemplo:
bd2#fs se expandir a border: 2px #fff solid;
Los colores se pueden indicar con varios caracteres:

#f -> #ffffff
#fc -> #fcfcfc
#fc3 -> #ffcc33
Valores de propiedades sin unidades

Algunas propiedades de CSS poseen valores que se indican sin unidades (z-index, line-height, opacity, etc.), por
lo que Emmet no les agregar unidades al expandir las expresiones:
lh2 se expandir a line-height: 2;
www.nebaris.com
34
Qu es Brackets?
Brackets es un nuevo editor de cdigo enfocado en el diseo web desarrollado por Adobe. En este artculo
veremos algunas de sus principales caractersticas.
Introduccin
Brackets es un proyecto de cdigo abierto que est desarrollado para todo aquel que trabaje con HTML, CSS y
JavaScript. Lo interesante de este programa es que est desarrollado ntegramente en HTML, CSS y JavaScript, y
es utilizado para desarrollar el proyecto Brackets (inception de editores de cdigo).
Provee caractersticas interesantes como la edicin rpida, el desarrollo en vivo, etc.
Si SublimeText te parece muy caro, pero Notepad++ no te convence, Brackets puede ser tu nueva herramienta de
trabajo.
Las premisas de Brackets son:
Las herramientas no deben interponerse. El cdigo debe ser lo ms importante.
Sincronizacin con el navegador utilizando el desarrollo en vivo.
Hacerlo uno mismo. Todos pueden ayudar a mejorar el proyecto.
Edicin rpida
Muchas veces nos ocurre que queremos modificar una regla CSS aplicada a un elemento HTML, para lo cual hay
que abrir el archivo CSS y navegarlo hasta encontrar la regla que buscamos.
Brackets nos ofrece la posibilidad de editar una regla CSS de un elemento HTML directamente sobre el archivo
HTML. Para ello tenemos un comando (Ctrl + E / Cmd + E) que nos mostrar la regla asociada a dicho elemento.
La edicin rpida tambin funciona en atributos de tipo clase e id.
Desarrollo en vivo
Si modificamos un archivo y queremos ver el resultado de dicha modificacin, tenemos que guardar el archivo, ir al
navegador y refrescar la pgina.
Brackets nos ofrece una conexin con el navegador, con lo cual, a medida que modificamos el cdigo, la pgina se
va refrescando sola. Esto se logra haciendo click en el cono del rayo, que se encuentra arriba a la derecha:
www.nebaris.com
35
Actualmente, el desarrollo en vivo slo funciona para cambios en archivos HTML y CSS y nicamente con el
navegador Google Chrome. Los cambios en archivos JavaScript son recargados cuando se guardan.
Adems, nos provee un resaltado de los elementos que estemos modificando, como cuando los seleccionamos
utilizando el Developer Tools del navegador.
Vista rpida
A la hora de utilizar colores, puede pasar que no sepamos qu color es un valor hexadecimal o RGB determinado.
Con Brackets, podemos poner el mouse sobre un valor y nos dar una vista rpida del color indicado.
Tambin se puede utilizar al posicionarnos sobre el atributo src de una imagen.
Plugins
Como la mayora de los editores de cdigo, Brackets acepta plugins para agregar funcionalidad que el programa
no posee de fbrica. Existen montones de extensiones que podemos agregar para mejorar nuestra experiencia y
agilizar nuestro trabajo.
Para poder ver los plugins disponibles tenemos que ir a Archivo > Gestionar Extensiones...
Para aprender a crear extensiones pods leer este artculo en Github.
Ayudas en el cdigo
Brackets puede distinguir distintos tipos de archivo (utilizando sus extensiones) y con ello ofrecernos coloracin del
cdigo, lo cual es un punto muy importante a la hora de codificar.
www.nebaris.com
36
Adems, nos ofrece ayudas visuales sobre los parmetros de las funciones, por ejemplo:
Si colocamos metadata a la funcin, Brackets puede utilizarla para ayudarnos.
A su vez, tambin nos ayuda al momento de elegir la funcin a utilizar.
Cdigo abierto
Todos pueden ayudar a crecer a Brackets. El programa se distribuye con licencia MIT y se puede descargar desde
la pgina de Github. La licencia MIT significa que pods utilizar el proyecto dentro de tu proyecto, que pods
vender dicho proyecto y que no ests obligado (legalmente) a darle dinero a Adobe.
Podemos, tambin, ver el curso del proyecto, observando las cosas que van implementando en los sprints
mediante el tablero Kanban en Trello.
Finalmente, se los puede contactar mediante los siguientes canales:
www.nebaris.com
37
Twitter: @brackets
Blog: http://blog.brackets.io/
IRC: #brackets on freenode
Developers mailing list: http://groups.google.com/group/brackets-dev
www.nebaris.com
38

introduccionAlDisenoWeb PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

introduccionAlDisenoWeb PDF

Cargado por

Copyright:

Formatos disponibles

Introduccin a HTML5

Ahora lo haremos de la siguiente manera:

Caractersticas que aporta HTML5

objetivos de diseo grfico o cosas que no tengan significado semntico.

utilizar listas <ul> , aunque se puede incluir cualquier cosa dentro.

captulos, pginas en tabs, las secciones de una tesis, etc.

necesario recodificar el video en mltiples codecs.

el estndar SVG (Grficos de vector escalable - deriva de XML).

Estilos enlazados (o externos)

Si queremos saber la clase de un elemento obtenido por ID:

Para manipular textos podemos hacerlo a travs de la funcin text()

O a travs de la funcin html() que adems acepta cdigo html.

Introduccin a Google Chrome Developer Tools

Invocar las herramientas del desarrollador

6. Volver a mostar las herramientas dentro de la ventana de la pgina

dnde est el error en nuestro cdigo.

Ac podemos ver varias cosas interesantes:

7. Los checkboxes nos permiten activar/desactivar breakpoints

Introduccin a los prepocesadores CSS

Inconvenientes de utilizar un preprocesador

/* less - mixin error con argumento opcional */

margin: 10px 5px;

Casos de prueba reducidos en desarrollo frontend

Qu es un caso de prueba reducido?

Pasos para encontrar y resolver problemas

2 - Hacer la pgina esttica

4 - Trabajar de arriba a abajo

8 - Poner el material en lnea

Por qu utilizar CoffeScript?

Verificamos que se haya instalado correctamente:

Primero tenemos que instalar Node.js, ejecutando en la terminal:

Y luego instalamos CoffeeScript

Verificamos que se haya instalado correctamente:

4 - Compilacin en un solo archivo

Utilizamos el asterisco como comodn.

Las funciones pueden llamarse utilizando o no los parntesis:

Para crear una instancia de la clase se utiliza el operador new

Elemento con clase

Abreviaturas para CSS

Pero si queremos agregar un valor al margen, podemos hacer lo siguiente:

O podemos utilizar un guin para separar diferentes valores:

Los colores se pueden indicar con varios caracteres:

Valores de propiedades sin unidades

La edicin rpida tambin funciona en atributos de tipo clase e id.

Tambin se puede utilizar al posicionarnos sobre el atributo src de una imagen.

Si colocamos metadata a la funcin, Brackets puede utilizarla para ayudarnos.

A su vez, tambin nos ayuda al momento de elegir la funcin a utilizar.

También podría gustarte