Anda di halaman 1dari 60

HTML son las siglas de Hyper Text Media Language, el lenguaje documental empleado para

definir pginas web que pueden ser visualizadas por un navegador.

No es un lenguaje de programacin, sino un lenguaje documental que define cmo visualizar


un documento, en este caso una pgina web. Puede contener elementos de otros lenguajes,
como CSS, o Javascript (este ltimo si es un lenguaje de programacin).

En cualquier ordenador, los ficheros de datos utilizados por los programas pueden estar en
formato texto, que solo incluyen caracteres visibles, como los ficheros .txt que se editan con el
bloc de notas de Windows; o en formato binario, que incluye codificacin de caracteres no
visibles, como los antiguos ficheros .doc o .xls de Office. Esta ltima prctica, que favoreca
mantener en la oscuridad en mtodo utilizado para representar la informacin, est casi en
desuso, utilizando en su lugar ficheros de texto con lenguajes visualmente interpretables por
una persona, quizs antes comprimidos en formato zip para que ocupen menos tamao (como
por ejemplo los ficheros .docx y .xlsx de las ltimas versiones de Office).

En nuestro caso utilizaremos el lenguaje HTML en ficheros de texto, que pueden ser abiertos
por programas sencillos como el bloc de notas, aunque tambin utilizaremos programas ms
complejos que nos ayuden a trabajar mejor.

Por lo tanto, si creamos un fichero ejemplo.html, y escribimos en l algo como esto:

Si arrastramos y soltamos el fichero creado sobre un navegador, veremos como resultado que
la primera frase aparece en mayor tamao como una cabecera, y la segunda aparece de
menor tamao en una segunda lnea.

Enhorabuena, has creado tu primer fichero HTML!

Puede que no est siendo tan fcil como parece Qu problemas nos podemos encontrar
en este primer intento?

1. Si creamos el fichero con el bloc de notas de Windows, ste le aade al final la


extensin .txt por defecto. Si no tenemos activado visualizar las extensiones de
fichero, aunque le intentemos cambiar a mano la extensin, estaremos manteniendo la
antigua extensin .txt

2. Si hacemos doble click sobre el fichero, puede que el programa asociado a esa
extensin sea el bloc de notas, u otro editor instalado en el ordenador. Arrastrar y
soltar el fichero sobre el navegador abierto nos asegurar que lo que ocurra sea que
se visualice en el navegador.

Resueltos estos posibles problemas, podemos intentar facilitarnos el trabajo utilizando un


editor dedicado para HTML (aunque tan solo con el bloc de notas es posible hacer alguna
cosa sencilla). A continuacin os recomiendo varios editores gratuitos, aunque tambin existen
otras alternativas comerciales ms complejas:

Sublime Text: Para Windows, MacOS o Linux, la versin gratuita puede mostrar
mensajes ocasionales pidindonos que nos registremos. Uno de los ms utilizados por
los expertos. La versin 2 se actualiz por ltima vez en 2013, as que os recomiendo
la versin 3 aunque est etiquetada como beta.

Notepad++: Gratuito, solo para Windows, casi todo el mundo lo tiene instalado como
alternativa puntual, aunque no lo utilicemos todos los das.

Notepad2-mod: Una alternativa muy ligera al Bloc de notas de Windows, poco


conocida, pero bastante utilizada en mi caso, preferible para m incluso a Notepad++
(aunque no incorpora pestaas)

gEdit: Los usuarios de Linux lo traern ya instalado si utilizan el escritorio Gnome.

Obviamente las alternativas comerciales son totalmente vlidas, como Dreamweaver o


Webstorm, pero en este curso queremos concentrarnos en los fundamentos del lenguaje, y no
en las cualidades de una herramienta en concreto.

Si tienes curiosidad sobre qu utilizo yo habitualmente un pequeo IDE llamado


PhpDesigner, pero ms que por sus virtudes para la edicin en HTML, por su inteligente

funcionalidad de sugerencia de cdigo en PHP. Y si te interesa el uso de Vim o Emacs


buena suerte, amigo, te har falta.

En principio, si es preciso concretar un IDE para este curso, haremos referencia a Sublime
Text.

Ya tenemos en nuestras manos una herramienta para editar ficheros de texto en nuestro
ordenador, y una manera de comprobar el resultado en el navegador. Pero qu relacin
tiene esto con las pginas web alojadas en Internet?

Estos mismos archivos que vamos a crear pueden ser colocados en un servidor web, y
permitir mostrar una pgina accediendo a la direccin de internet de dicho servidor. Estos
archivos obviamente siempre mostraran el mismo resultado al acceder a la pgina, haciendo
necesario cambiar a mano el contenido del archivo para mostrar cambios en las pginas.

En los inicios de Internet, esto se haca as y se sigue haciendo cuando queremos poner en
marcha una pgina con una informacin que no cambia nunca, y que va a ser visitada por
muchsimos usuarios, por lo que se debe mostrar lo ms rpido y con el mnimo de recursos
consumidos en el servidor. Pero en la mayora de sitios web, en realidad el contenido no se
almacena en un fichero esttico, sino que un programa en un lenguaje de programacin (por
ejemplo, PHP, Java o C#), crean sobre la marcha el contenido HTML y lo envan al navegador
como si se tratara de un fichero que ya exista. Estos programas, a su vez, para almacenar los
diferentes datos sobre contenidos, usuarios y estado de las sesiones, utilizan un motor de
base de datos, como MySQL, Oracle o SQL Server. Y conforme entramos en ms detalles,
aparecen ms tecnologas y la cosa se complica.

Pero en el fondo, el contenido siempre es HTML. En la mayora de los casos, los contenidos
se almacenan en ficheros de plantilla, donde est escrito en HTML cmo se van a visualizar
algunos elementos, y luego se sustituyen unas marcas especficas por el contenido dinmico.

En definitiva lo que nos interesa saber es que todo el conocimiento que vamos a adquirir
creando ficheros HTML estticos es de utilidad inmediata para proyectos ms complejos.

Por ltimo, es preciso que hablemos un poco sobre versiones de HTML y compatibilidad.
Seguramente no ser desconocido al lector la histrica lucha en el pasado entre navegadores
(Microsoft Internet Explorer y Netscape Navigator) por controlar el estndar HTML. En la
actualidad afortunadamente la ltima versin de HTML, la 5, constituye un estndar que es
aceptado en casi todo su contenido por todos los navegadores. Aunque cada navegador
puede ofrecer funcionalidad particular adicional, HTML5 de base nos ofrece todo lo que
podemos querer utilizar. Por ello, en este curso trabajaremos siempre sobre HTML5 sin hacer
demasiada distincin sobre qu es nuevo y qu no (ya que se trata de un curso completo y no
solo vamos a tratar las novedades). Pero no podemos olvidar que siempre cabe alguna
funcionalidad de HTML5 funcione de manera diferente en distintos navegadores, cosa que

mencionaremos e incluiremos referencias para estudiar estos casos en mayor detalle.

Existen por tanto multitud de tecnologas asociadas al desarrollo web, pero en todas ellas el
HTML es un elemento indispensable.

2 Comencemos a crear ya un documento HTML. Todo documento en HTML5, incluso aunque


est totalmente en blanco, debera contener al menos el siguiente contenido.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Los espacios en blanco antes de cada lnea pueden conseguirse introduciendo espacios
individuales, pero es ms prctico utilizar la tecla tabulador para introducir de golpe la
separacin necesaria. En estos ejemplos vers las letras coloreadas como lo hara un editor
HTML como los mencionados antes, aunque en realidad estos caracteres no tienen ningn
color asociado, es solo algo que el editor hace para facilitar la lectura del documento.

Qu quieren decir todos estos caracteres? Identificamos que tenemos ciertos elementos
encerrados entre smbolos < y >, que son llamados etiquetas. ciertas etiquetas tienen la
misma palabra, pero precedida por el smbolo /. Se trata en realidad de cierre de etiquetas, y
consideramos que entre la apertura de etiqueta (la primera vez que aparece) y el cierre, todo
lo que est en medio es el contenido de la etiqueta. Vemos por tanto que una etiqueta puede
contener
a
su
vez
varias
etiquetas.

El

significado

exacto

de

estas

etiquetas

es

el

siguiente:

< !DOCTYPE html >: Esta es una etiqueta especial que indica que la versin de HTML

es la 5. Tiene esta estructura ya que procede de la sintaxis de XML, un lenguaje ms


genrico que HTML que permite definir sublenguajes como el que estamos
estudiando.

<

<

html

head

>:

>:

Inicio

de

todo

el

documento

HTML

Inicio de la cabecera del documento, donde especificaremos

metainformacin del mismo, que no forma parte del contenido visualizable


directamente
en
la
ventana
principal
del
navegador.

< title >: El texto en su contenido es el ttulo de la pgina, que ser mostrado en la

pestaa

ttulo

de

la

ventana

del

navegador,

entre

otras

cosas.

< body >: El contenido de esta etiqueta ser lo que se muestre dentro del navegador

En realidad, el ejemplo anterior como hemos dicho no muestra nada. Un ejemplo equivalente
al primero que realizamos en el apartado anterior, sera el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf8>
<title>Ttulo de la pgina</title>
</head>
<body>
<h1>Prueba fichero HTML</h1>Hola mundo!
</body>
</html>

En este caso, adems de aadir el contenido de prueba de la pgina, tenemos algunos


elementos
ms:

< meta charset=utf8 >: Indica al navegador que el contenido de la pgina est

codificado en formato UTF-8. Debe ser lo primero que aparezca en la etiqueta < head
>

Por qu es necesario incluir esta etiqueta? Resulta que aunque el texto plano solo contenga
caracteres visualizables, existen diferentes estndares para representar caracteres extendidos
(aquellos no existentes en el lenguaje ingls), como acentos o ees, o smbolos en japons,
chino, ruso, etc. Para asegurarnos que nuestra pgina utiliza bien estos caracteres, y que el
navegador los puede representar correctamente, puede ser necesario incluir esta etiqueta.

Tambin deberemos asegurarnos que el editor de texto guarda el documento con codificacin
UTF-8. Bajo Windows, la mayora de los programas trabajan con la codificacin ANSI, que no
es
la
ms
ptima
por
diversos
motivos
de
compatibilidad.

Para asegurarnos que guardamos el documento con codificacin desde Sublime Text,
elegiremos El bloc de notas de Windows no lo hace (utiliza ANSI), por lo que para esta
ocasin referenciamos a Sublime Text, elegiremos la opcin de men File, Save with
encoding, UTF-8 with BOM. En notepad2-mod, la opcin est en File, Encoding, UTF-8. En
Notepad++ est en Encoding, Encode in UTF-8. En el Bloc de notas (si, tambin puede
cambiarse aqu), est en Archivo, Guardar cmo, y en dilogo para elegir la carpeta de
destino, hay una opcin Codificacin que habr que establecer como UTF-8.

Al cambiar la codificacin, y volver a visualizar el documento en el navegador, no notaremos


un gran cambio ya que no habamos utilizado acentos en el contenido. Pero en el ttulo de
pestaa del navegador ahora deberan verse correctamente los acentos utilizados.

Si quieres profundizar en el conocimiento sobre las codificaciones de caracteres y UTF-8, un


buen punto de partida es este enlace en espaol de la W3C (World Wide Web Consortium), el
organismo
encargado
de
la
estandarizacin
de
la
web:
http://www.w3.org/International/questions/qa-what-is-encoding.es.php

Otros enlaces tiles:

https://es.wikipedia.org/wiki/Codificaci%C3%B3n_de_caracteres

https://es.wikipedia.org/wiki/UTF-8

Aunque el ejemplo anterior es un documento HTML completo correcto, por brevedad en


muchos ejemplos incluimos tan solo el contenido que debe aparecer dentro de la etiqueta <
body
> del
documento.

Habrs observado que en el ejemplo anterior, hay espacios o tabuladores introducidos que no
se han mostrado en el resultado final, as como un salto de lnea entre la cabecera y la lnea
siguiente que no hemos introducido en el texto original. Esto ocurre as porque en HTML se
ignoran los espacios iniciales y los extras que separan una palabra de otra a partir del primero.
Por tanto, estos dos ejemplos producen el mismo resultado.
<h1>Prueba

fichero HTML</h1>Hola

mundo!

<h1>
Prueba fichero HTML
</h1>
Hola
mundo!

Esto nos permite utilizar los espacios, tabuladores y nuevas lneas para formatear el cdigo
del documento HTML de forma que sea ms legible, y quede de manifiesto la anidacin de
etiquetas, sin que afecte al resultado final. Pero cmo conseguiremos entonces aadir dichos
espacios y nuevas lneas cuando lo necesitemos? Lo veremos en el siguiente apartado.
3 Ahora que podemos crear un documento HTML bsico, nos interesa conocer qu etiquetas
tenemos
a
nuestra
disposicin
y
cmo
utilizarlas.

< h1 >:

Elemento de cabecera de primer nivel

< h2 >:

Elemento de cabecera de segundo nivel

< a >:

< img >:

< p >:

< br >:

Enlace
Imagen

Prrafo
Nueva lnea

Los elementos h1, h2, h3, y sucesivos, indican textos de cabecera de primer, segundo, tercer
y sucesivos niveles. Adems de convertir representar el texto con cierto tamao, incluyen el
introducir un nuevo prrafo con cualquier contenido incluido antes y despus de estos
elementos.

El elemento a es muy importante, nos sirve para crear enlaces en nuestro documento.
Podemos ver cmo se utiliza utilizando un ejemplo donde incluiremos algunos conceptos
adicionales.

<a href="http://www.w3c.es"
id="enlace-w3c"
class="enlaces-principales"
target="_blank"
title="Enlace a web del W3C"
>Visita w3c.es</a>

Aqu vemos que la etiqueta < a >, antes del smbolo > que marca su apertura, incluye una
serie de elementos llamados atributos, seguidos de un signo igual y una serie de valores entre
comillas. De nuevo, los espacios y retorno de lneas adicionales nos sirven para dar un
formato ms inteligible al ejemplo, y hubiera sido equivalente haberlo escrito de la siguiente
manera.

<a href="http://www.w3c.es" id="enlace-w3c" class="enlaces-principales"


target="_blank" title="Enlace a web del W3C">Visita w3c.es</a>

Los atributos de este ejemplo tienen el siguiente significado:

href: Especfico de etiquetas < a >, representa el destino del enlace, que ser cargado
por el navegador al pulsar sobre ste. Puede ser a su vez de varios tipos

Enlace

Enlace

Enlace

Enlace

http

http

interno

relativo

http

otro

otro

absoluto

absoluto

otra

protocolo,

por

punto

de

otra

pgina

ejemplo

la

pgina

actual

del

mismo

dominio

otro

dominio

pgina

en

mailto

para

envo

de

email

id: Identificador nico del elemento, para su manipulacin en cuanto a estilo con CSS,
o de comportamiento mediante Javascript. No se puede repetir en el documento actual

class: Nombre de la clase del elemento, para su manipulacin en cuanto a estilo con
CSS, o de comportamiento mediante Javascript. Puede repetirse en el documento
actual, y un mismo elemento puede tener ms de una clase (separadas por espacio al
definirlas
aqu).

target: Especfico de etiquetas < a > y formularios, en este caso especifica dnde se
debe

abrir

_blank:

el

Una

enlace

nueva

al

pestaa

pulsarlo:

documento

title: Define el ttulo del enlace. Por ejemplo, en enlaces que pueden tener como texto
leer

ms,

define

el

ttulo

completo

del

artculo

de

destino.

Tenemos entonces que la etiqueta < a > representa un enlace en el documento, que al
pulsarlo llevar a lo especificado en el atributo href. Todo el contenido desde la apertura de <
a > hasta el cierre de < /a > podr ser pulsado para llevarnos al nuevo destino
.
Estos no son todos los atributos posibles de esta etiqueta. Si quieres consultar la extensa lista
de posibles atributos, tienes a tu disposicin la referencia oficial de la W3C (World Wide Web
Consortium)
en: http://www.w3.org/TR/html5/

Una referencia ms light, aunque a veces imprecisa o incluso errnea (procede con cautela),
es la que puedes encontrar en la siguiente web (no afiliada con la W3C, a pesar de su
nombre): http://www.w3schools.com/html/default.asp.

Como hemos comprobado, necesitamos alguna herramienta para introducir prrafos o


retornos de lnea, y lo conseguiremos con las etiquetas < p > y < br >.
<p>Ejemplo de un prrafo con contenido. Este texto se ha aadido para hacer que sea
lo suficientemente largo como para observar el efecto cuando no cabe en pantalla
completo en una sola lnea</p>
<p>Este es otro prrafo. Este texto se ha aadido para hacer que sea lo
suficientemente largo como para observar el efecto cuando no cabe en pantalla
completo en una sola lnea<br>
Esto debera esta en otra lnea, pero en el mismo prrafo</p>

Si nos fijamos, la etiqueta < br > no tiene cierre, ya que al representar una nueva lnea, no
tiene ningn contenido en su interior. Esto tambin podemos representarlo escribindola
como: <
br
/
>

Aunque

la

forma <

br

> est

aceptada

como

vlida

en

HTML5.

Otra etiqueta importante es < img >, que nos permitir aadir imgenes al documento. Si
colocamos una imagen de nombre prueba.jpg en el directorio que nuestro documento HTML,
podemos
escribir
un
ejemplo
como
ste
para
utilizarla.

<img src="http://openwebinars.net/media/featured_images/colabora-openwebinarscamiseta.jpg" alt="Imagen de prueba" />

En este caso la etiqueta < img > tampoco tiene contenido que incorporar, por lo que en lugar
de cerrarla con < /img >, escribimos el final de la etiqueta de apertura como /> para indicar
que se cierra automticamente. De nuevo, en HTML5 es opcional utilizar este cierre.

En

esta

hemos

definido

dos

nuevos

atributos:

src: Define la ruta absoluta o relativa a una imagen que est en un formato como
JPEG,

etiqueta,

GIF,

PNG

alt: Texto alternativo que describe a la imagen. Es de especial importancia para la


accesibilidad (dispositivos que permiten navegar a personas con problemas de visin),
as como para la optimizacin para buscadores.

Por ltimo, existen unas etiquetas que permiten hacer listas de elementos, con posibilidad de
otras listas anidadas en su interior. Un ejemplo puede ser el siguiente:
<ul>
<li>Inicio</li>
<li>Quienes somos</li>
<li>Productos
<ul>
<li>Diseo web</li>

<li>Identidad corporativa</li>
<li>Cartelera</li>
</ul>
</li>
<li>Contacto</li>
</ul>

En

este

caso,

las

etiquetas

que

estamos

utilizando

son:

ul: Lista no ordenada (cada elemento es precedido por un crculo slido, no un


nmero).

li:

Elemento

de

lista.

Puede

contener

otras

listas

su

vez

Existen muchsimas etiquetas ms, y un conocimiento profundo de todas ellas requerira un


curso completo. Pero con esto hemos visto suficientes casos como para poder avanzar en
otros contenidos, as como para poder buscar referencias puntuales cuando necesitemos
otras etiquetas.
4 Las etiquetas estructurales descritas anteriormente proporcionan una visualizacin
especfica de su contenido, aunque sta puede variar ligeramente para cada navegador.

HTML5 introduce ademas etiquetas semnticas, que no aportar de base ningn


comportamiento visual adicional, pero que nos permiten por un lado definir de forma
semntica el significado de su contenido, lo que ser muy til para el SEO (la optimizacin de
contenidos para buscadores). Posteriormente podremos aportar estilos adicionales a estas
etiquetas
mediante
CSS.
Las
etiquetas
ms
utilizadas
son:

Estructura

de

cuerpo

del

documento:

< header >: Grupo de elementos de introduccin de un documento (como los h1, h2).

No confundir con < head >, la cabecera HTML que contiene metainformacin no
visible.

< nav >: Enlaces de navegacin. Podra contener un men de navegacin horizontal,

lateral.

< section >: Define una seccin en un documento. Por ejemplo, la seccin central con

el conjunto de artculos de un blog, o podramos tener una seccin por cada categora
de
artculos,
con
un
listado
de
artculos
dentro.

< aside >: Contenidos vagamente relacionados con el resto del contenido de la

pgina. Si no es visualizado, el contenido restante seguir teniendo sentido. Por


ejemplo,
anuncios,
u
otros
contenidos.

<

>:

footer

Pie

de

Dentro

una

pgina

del

seccin.

cuerpo:

< article >: Contenido con identidad propia, que podra existir aportando informacin

de

manera

independiente

del

resto

del

Otros

documento.

elementos:

<

<

<

>:

cite

Ttulo

>:

address

time

de

>:

Fecha

una

publicacin

Direccin

fsica

hora

Como referencia para profundizar en este tema, adems de las mencionadas aadimos la
web
de
Mozilla
Developer
Network,
que
es
bastante
clara
y
concisa: https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

Siempre que queramos aadir un bloque con contenido a nuestra pgina, es til comprobar si
tiene un significado semntico de entre los incluidos en las etiquetas HTML5. En caso de no

coincidir con ninguno, simpre podeos utilizar el bloque de contenido neutro < div > o el de
texto de linea neutro < span >, que estilaremos igualmente por CSS.

Un ejemplo de estructura de pgina utilizando etiquetas semnticas HTML5 sera el siguiente

Y un ejemplo construido con cdigo quedara en completo algo as:


<!DOCTYPE html>
<html>

<head>
<meta charset=utf8>
<title>Ejemplos curso HTML, CSS y JS</title>
</head>
<body>
<header>
<h1>Ejemplos del curso sobre HTML, CSS y Javascript</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li>Ejemplos HTML</li>
<ul>
<li><a href="1-base.html"
>Documento base (blanco)</a></li>
<li><a href="2-primer.html"
>Primer ejemplo</a></li>
<li><a href="3-lista.html"
>Lista</a></li>
<li><a href="4-semanticas.html"
>Etiquetas semnticas
HTML5</a></li>
</ul>
</li>
</ul>
</nav>
<section>
<article><h1>Documento base (en blanco)</h1></article>
<article><h1>Primer ejemplo</h1></article>
<article><h1>Lista</h1></article>
<article><h1>Etiquetas semnticas HTML5</h1></article>
</section>
<footer>Fichero de ejemplo Etiquetas semnticas HTML5 del curso
sobre HTML, CSS y Javascript
</footer>
</body>
</html>

Este fichero puede servirnos para ir almacenando y enlazando los diferentes ejemplos. En
este caso, tenemos la navegacin como una lista de enlaces, en la que ms adelante
aadiremos otras categoras como CSS y Javascript. Luego una seccin donde tan solo
incluimos como artculos los ttulos de los ejemplos, pero podemos ms adelante aadir a
cada artculo una pequea captura de pantalla del cdigo de ejemplo con un enlace.
Finalmente,
un
pie
con
alguna
informacin
general
de
la
pgina.

El

resultado

visualmente

en

el

navegador

deja

mucho

que

desear

Pero precisamente el propsito de las etiquetas semnticas es no proporcionar ningn tipo de


estilo adicional, solo marcar el significado de cada una de estas secciones para poder ser
entendidas mejor por sistemas automticos, como los buscadores.
5 De entre las posibles opciones como editor de cdigo, Sublime Text destaca por ser
compatible con todos los sistemas operativos, poder utilizarse de forma gratuita (aunque con
ventanas solicitando registrarse de vez en cuando), y ser muy ligero y rpido de cargar. Su
sistema de plugins permite adems incorporar funcionalidades adicionales.

Este IDE (Integrated Development Enviroment, Ambiente de Desarrollo Integrado) tiene tantas
opciones que aprenderlas todas de nuevo requerira un curso completo. Vamos a referenciar
aqu al menos una funcionalidad esencial que nos van a facilitar mucho el trabajo.
Con Sublime podemos crear Proyectos, al que aadamos una o varias carpetas, de forma
que editemos los archivos de dichas carpetas con mayor comodidad.
Para ello, crearemos una carpeta en nuestro escritorio por ejemplo donde dejaremos los
ficheros de ejemplo que hemos estado construyendo hasta ahora, Ejemplos_curso.
En sublime, elegiremos la opcin de men Project, Save project as, para guardar en un
fichero la configuracin del proyecto actual, por ejemplo Proyecto_curso.
Luego elegiremos en el men Project, Add folder to proyect, y navegaremos hasta la
carpeta Ejemplos_curso que hemos creado antes.
Con esto tendremos nuestro entorno en sublime con el siguiente aspecto:

Conforme necesitemos aadir archivos o carpetas, podemos hacer click con el botn derecho
sobre la carpeta Ejemplos_curso en la zona izquierda de Sublime, y aadirlos con facilidad.

Al cerrar Sublime y volverlo a abrir, comenzar con el ltimo proyecto que tenamos definido.
Podemos cerrar el proyecto actual con Project, Close Project, y volverlo a abrir con Project,
Open Project o todava ms fcilmente conProject, Open Recent
Existe una comunidad muy activa que crea plugins para Sublime y los ofrece como software
libre. Para facilitar la bsqueda e instalacin de estos, es til utilizar en primer lugar el gestor
de paquetes llamado directamente Package Control: https://packagecontrol.io/
Entre los plugins que podemos utilizar, uno sencillo que facilitar trabajar con colores es
ColorHightlighter:https://github.com/Monnoroch/ColorHighlighter
Si quieres profundizar ms en los atajos de teclado y diferentes usos que puedes darle a
Sublime Text, existen innumerables guas por todo Internet. Puedes empezar por esta
referencia: http://www.emezeta.com/articulos/guia-sublime-text
6 Una herramienta de enorme utilidad a partir de este momento va a ser el inspector de cdigo
del navegador, que nos permite comprobar qu est interpretando este al abrir nuestro fichero,
tanto a nivel de HTML como de CSS y Javascript.
Por lo general, en los principales navegadores (Chrome, Firefox y Explorer/Edge) el inspector
de cdigo se despliega mediante la tecla F12.
El aspecto de cada inspector es ligeramente diferente, y no todos tienen las mismas
funcionalidades. Con el de Internet Explorer o Edge podemos probar cmo se ve la pgina
actual en versiones anterior con solo tener instalada la ltima versin. Ms informacin
en:https://dev.modern.ie/platform/documentation/f12-devtools-guide/
Firefox cuenta con una versin especial del navegador llamada Firefox Developer, con
herramientas especializadas para desarrolladores. Adems en Firefox podemos utilizar otra
herramienta alternativa llamada Firebug. Ms info en:https://www.mozilla.org/esES/firefox/developer/ https://www.mozilla.org/es-ES/firefox/developer/
Chrome es uno de los navegadores que ms ha propiciado desde el principio contar con un
inspector de cdigo avanzado desde el propio navegador sin necesidad de componentes
adicionales, por lo que el suyo funciona de manera muy rpida en ordenadores con pocos
recursos (aunque abrir muchas pestaas de Chrome agota estos rpidamente). Adems
podemos vincular los cambios de prueba que hagamos en memoria con los archivos fsicos
para utilizarlo como un editor de cdigo. Ms info en: https://developer.chrome.com/devtools
https://developer.chrome.com/devtools/docs/workspaces

Por defecto lo que veremos al abrir cualquier inspector de cdigo es una zona principal donde
se muestra toda la estructura HTML de nuestro documento, y a la derecha los diferentes
estilos CSS aplicados sobre el elemento seleccionado.
Si en algn momento cometemos un error en un documento, o queremos comprobar cmo
est estructurado cierto cdigo de ejemplo que no est hecho por nosotros, ser muy sencillo
utilizando esta herramienta.

7 Ahora que somos capaces de construir la estructura del contenido de una web, vamos a
aprender a aplicar estilos mediante CSS (Cascade Style Sheets, Hojas de Estilo en Cascada).
El cdigo CSS es un lenguaje muy diferente de HTML, que podemos encontrar incorporado en
ciertos trozos del documento HTML o enlazado mediante archivos externos que solo
contienen cdigo CSS.
Hay por tanto tres maneras de incorporar CSS en un documento HTML:

1. Estilo inline, incorporado en la propia etiqueta mediante el atributo style:

El contenido del atributo se aplica directamente al elemento.

No se recomienda utilizar esto, es mejor definir clases e identificadores, y utilizar hojas


de estilos externas

<a href="http://www.google.com" style="font-size:90px;">Enlace a


Google</a>

2. Etiquetas < style > en < head >


<html>
<head>
<style type="text/css">
.cabecera {
width: 980px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- ... -->
</body>
</html>

De esta manera incorporamos reglas CSS que se aplican a los elementos


especificados en estas. Es preferible utilizar ficheros CSS externos.

3. Enlace a archivo de estilos externo mediante etiqueta < link > en < head >
<link href="special.css" rel="stylesheet" type="text/css" />

El atributo href especificar la ubicacin del fichero de estilos, y el atributo rel


especfica que se trata de una hoja de estilos. El atributo type con el valor text/css es
opcional.

Pero, cul es el formato que tiene el cdigo CSS que vamos a escribir? Se podra resumir de
manera abstracta como una serie de reglas, en las que cada una de ellas especifica sobre
qu elementos se aplica y qu cambios visuales aplica sobre sus elementos.

(sobre qu se aplica la regla) {


(cambio propiedad visual): valor;
(cambio propiedad visual): valor;
(cambio propiedad visual): valor;
(cambio propiedad visual): valor;
}

8 Los selectores son lo que definen sobre qu elementos se aplican las reglas.
Pueden ser una combinacin de:

Nombre de etiquetas HTML

Nombres de clases, precedidos por carcter .

Identificador de elemento, precedido por carcter #

a{
color: orange;
}

.example_extract {
background-color: #ccc;
}

#example_list {
border: 1px solid #3e2f2d;
}

En el ejemplo anterior, podemos ver las siguientes reglas:

Todas las etiquetas < a > sern de color naranja (orange).

Todos los elementos de clase example_extracttendrn un color de fondo de cdigo


#ccc (gris)

El elemento con el identificador example_list tendr un borde slido de 1 pixel de


ancho, de color #3e2f2d

a.selected {
color: blue;
}

En este ejemplo, la regla afectar a todas las etiquetas < a > que tengan especificadas la
clase selected.
Otra opcin es definir en el selector condiciones de anidamiento, por ejemplo, es decir, que la
regla afecta a ciertos elementos dentro de otros elementos, separados por espacios. A su vez,
esto se puede combinar con mltiples selectores, dando lugar a reglas como esta:

#example_list a.button {
background-color: blue;
color: white;
border-radius: 7px;
}

Esta regla indica que todos los elementos < a > que tengan especificada la clase button, y
que estn dentro del elemento con identificador example_list, tendrn de color de fondo azul
(blue), el color de texto ser blanco (white) y los bordes sern redondeados con un radio de 7
pxeles.
Si tuviramos a su vez esta regla junto a las anteriores, tendramos dos sitios donde se define
el color de ciertos enlaces. Cuando esto sucede, el orden de precedencia es:

Son ms prioritarias las reglas ms especficas

En igualdad de condiciones, se aplican en orden secuencial, siendo la ltima en


aparecer la que finalmente se visualiza

Hemos visto tambin en estos ejemplos que existen propiedades mltiples, donde tras el
nombre de la propiedad se especifican tras los dos puntos varios valores.

Si quisiramos crear varias reglas que apliquen las mismas propiedades, pero a diferentes
selectores, podemos hacerlo separando los selectores diferentes por comas, como en el
siguiente ejemplo.

section.projects h1, section.projects h2, section.projects h3 {


color: #222;
}

Esta regla (o ms correctamente, conjuncin de reglas) establece que el color de texto de los
elementos < h1 >, < h2 >, < h3 > que se encuentren dentro de una etiqueta < section
> con el atributo class con valor projects.
Otra caracterstica que podemos utilizar en los selectores son los pseudo clases mediante el
carcter :, que nos permiten seleccionar solo los elementos en un estado concreto, o
las especificaciones de valores de atributos, que se incluyen entre corchetes [ y ].

a{
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

input[type=button], input[type=submit], submit {


font-size: 15px;
font-family: sans-serif;
}

En el ejemplo anterior, hemos conseguido que las etiquetas < a > no vengan subrayadas por
defecto. Pero cuando pasemos el ratn sobre ellas (la pseudo clase hover), si se aplicar la
propiedad de subrayado.
Tambin hemos hecho que las etiquetas < input > cuyo atributo type tenga el valor button o
submit, as como la etiqueta < submit >(los tres casos son casi equivalentes), tengan siempre

un texto de tamao 15 pxeles, y un tipo de letra generico sans-serif (sin bordes en los
extremos).
Una buena gua de todas las propiedades y pseudo clases disponibles en CSS es la
disponible en Mozilla Developer Network: v
No te sientas abrumado por la cantidad de propiedades, reglas, y combinaciones y trucos que
se pueden llegar a hacer con CSS. En la prctica, solo el 20% de las propiedades se utilizan
el 90% del tiempo, y casi siempre cuando necesitamos hacer algo poco habitual, podemos
buscar ejemplos donde ya est implementado y aprender de ellos.
9 Un aspecto importante de las propiedades de los elementos HTML que merece una
explicacin detallada es el llamado modelo de caja.
Cada elemento HTML ocupa un tamao en la pgina web, que viene definido por:

margin: el margen exterior del elemento

border: el tamao del borde del elemento

padding: el margen interior del elemento

Por otro lado, tenemos que hablar de cmo se posicionan los elementos en la pgina. Hemos
visto cmo algunos elementos, como h1, ocupan por defecto el 100% del ancho del
contenedor donde se encuentren. Estos elementos tienen una propiedad CSS
llamada displaycuyo valor es de tipo block, y entre ellos tenemos:

h1, h2, h3

Etiquetas semnticas como header, nav, section, article

Etiqueta de bloque genrico div

Otros elementos de tipo inline como el texto se van acumulando en la misma lnea, hasta
llegar al final de esta y continuar en la lnea siguiente. Se comportan de este modo:

El texto

Etiqueta de contenido inline generico span

Algunos elementos, como las imgenes, tienen un comportamiento de tipo inline-block, de


manera que por defecto se muestran insertadas en medio del texto.
Estos valores por defecto pueden ser alterados, de manera que convirtamos un elemento que
por defecto era de tipo block en inline-block. Al hacer esto, en lugar de ocupar el 100% del
ancho del contenedor, pasar a ocupar el mnimo ancho posible para albergar su contenido, a
menos que especifiquemos un ancho especfico con la propiedad CSS width.
Tambin se comportar como las imgenes, de manera que aparecer incluido en medio de la
lnea de texto donde se haya definido. Si a continuacin del elemento tenamos algn texto, si
no aadimos un retorno de lnea o nuevo prrafo, aparecer inmediatamente despus del
elemento.
Otra propiedad CSS que puede alterar el posicionamiento de los elementos es float, que al
definirse con valores right o left, provocar que el elemento afectado omita totalmente su
posicin actual para alinearse lo ms posible al lado indicado dentro de su misma lnea,
acumulando el resto de elementos al lado opuesto. Adems, para elementos tipo block,
pasarn a comportarse como inline-blockrespecto a su ancho, es decir, ste se ajustara o
bien al definido explcitamente, o al mnimo segn los elementos que contenga.
Si varios elementos consecutivos se definen con el mismo valor de float, estos empezarn a
acumularse (separados por sus mrgenes), hasta forzar una o varias nuevas lneas. En la
prctica, es ms deseable conseguir este efecto utilizando la propiedad display con
valorinline-block, ya que existen ciertos fallos en los navegadores antiguos (Firefox en este
caso) que hace que el comportamiento de elementos float no sea igual que en el resto de
navegadores.
Por ltimo, tenemos la propiedad position, que podemos definir con el valor fixed para que la
posicin del elemento se extraiga del flujo natural del documento, y pase a ser definido

directamente en un tamao en pixel relativo a los lados de la ventana del navegador mediante
las propiedades top, bottom, left o right.
Tambin podemos posicionar el elemento relativo a los bordes de otro elemento contenedor.
Para ello, definiremos la propiedad CSSposition como relative en el elemento contenedor, de
manera que cualquier elemento interior tendr la propiedad position comoabsolute.
Todo esto resulta confuso? Vemoslo mejor con un ejemplo completo. Sobre el mismo
documento con la lista de ejemplos que preparamos para las etiquetas semnticas HTML5,
vamos a aadir la siguiente hoja de estilos:

/* Reglas generales */
* { font-family: sans-serif; }
body { margin: 0 }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* Cabecera y navegacin */
header {
background-color: #DFD493;
color: white;
position: fixed;
top: 0;
width: 100%
}
header h1 {
margin: 0; padding: 10px 10px;
font-size: 25px;
}
nav {
background-color: #EAE2B8;
padding: 10px 10px;
width: 100%
}

nav ul {
list-style-type: none;
display: inline-block;
margin: 0; padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 6px;
}
/* Secciones centrales */
section {
width: 980px;
margin: 30px auto;
padding-top: 60px;
}
article {
display: inline-block;
background: #ccc;
width: 240px; height: 240px;
margin: 2px 2px;
padding: 15px 15px;
}
article h1 {
font-size: 15px;
}
/* Pie */
footer {
background-color: #CBCD00;
padding: 10px 10px;
margin: 0;
}

Y el resultado es el siguiente:

Un cambio bastante radical frente al mismo documento sin estilos. Vemos como un buen
cdigo HTML se la base adecuada para poco a poco tener un aspecto sofisticado a base de ir
definiendo reglas CSS.

10 Hemos visto que muchas etiquetas, como < h1 >, son dibujadas por el navegador con
ciertos estilos predeterminados (tipo de letra, tamao de letra, mrgenes), aunque nosotros no
los hayamos definido.
En algunos casos la implementacin de esta renderizacin por defecto difiere en los diferentes
navegadores, por lo que es necesario indicarla en nuestros propios ficheros, aunque incluso
queramos utilizar los valores por defecto.
Tambin es posible utilizar una hoja de estilos que resetee todos los estilos por defecto, de
manera que durante el desarrollo nos aseguremos que el resultado visual es consistente en
todos los navegadores sin tener que hacer constantes pruebas en cada uno. Un ejemplo de
este tipo de reglas de reseteo es el siguiente: http://html5doctor.com/html-5-reset-stylesheet/
11 Con la llegada de HTML5 tambin llega una nueva versin de CSS3 que, adems de
estandarizar mucho ms el efecto de reglas ya conocidas, introduce algunas nuevas
enormemente tiles para conseguir resultados muy efectistas de manera sencilla con muy
poco cdigo.

border-radius:
Hasta hace poco implementada como un idiom de cada navegador, especifica el radio
para el que los bordes de un elemento ser redondeado.

opacity:
Indica en tanto por uno el nivel de opacidad (o transparencia) del elemento.

transition-duration:
Cuando definamos con una pseudo clase como hover alguna propiedad diferente, la
transicin al pasar el ratn sobre el elemento no ser instantnea, sino que se
realizar de manera fluida segn la duracin indicada.

box-shadow:
Define la sombra del elemento

text-shadow:
Define la sombra del texto contenido en el elemento

transform:
Define una transformacin sobre el elemento original, que puede tener como valores:

scale:
escalado

rotate:
rotacin

skew:
inclinacin

translate:

traslacin
Otras adiciones interesantes son sobre las propiedades que define colores. Con CSS3
podemos definir de color de fondo complejos gradientes, mediante el valor de propiedad
gradient sin tener que utilizar ninguna imagen para ello. Construir el cdigo para estos
gradientes de forma visual sin es sencillo utilizando servicios como los de la siguiente
pgina: http://www.colorzilla.com/gradient-editor/.
12 Los formularios web permiten introducir datos y enviarlos mediante el navegador. Solo con
conocimientos de HTML, CSS y JavaScript no podemos hacer casi nada con los datos de
estos formularios, pero darles estilo, y validar su contenido previamente a su envo es una
labor fundamental que hacer con estas tecnologas.
Todo formulario debe tener sus elementos en una etiqueta < form >, cuyos principales
atributos son:

action: URL destino que cargar el navegador al enviar el formulario, pasando a sta
el valor de todos los campos rellenados.

method: Mtodo de envo, que puede tener valor get para codificar los datos del
formulario de manera visible en la URL destino, o post para enviarse durante la
conexin de manera no tan visible por el usuario (aunque no totalmente privada).

enctype: Codificacin a realizar en el envo del formulario. Se especifica con el valor


multipart/form-data para el envo de formularios con campos fichero.

Dentro de la etiqueta < form >, nos encontraremos las siguientes etiquetas:

< input >: Control de formulario:

type=text: Permite introducir una lnea de texto

type=radio: Elemento que permite marcar uno solo de un conjunto que


tenga el mismo valor en el atributo name.

type=checkbox: Elemento que permite ser marcado o desmarcado de


forma autnoma.

type=hidden: Elemento invisible, que puede almacenar un valor y ser


enviado al enviar el formulario. Puede ser cambiado mediante programacin
con JavaScript.

type=button: Botn, sin ningn comportamiento al pulsarlo por defecto, pero


que puede ser cambiado mediante programacin con JavaScript.

< textarea >: Permite introducir varias lneas de texto. Los atributos cols y rows
indican las filas y columnas de tamao

< select >: Selector entre una de mltiples opciones


o

< option >: Especifica una de las opciones seleccionables. Si tiene definido el
atributo default, ser la por defecto nada ms cargar el formulario. Si tiene
definido el atributo value, el valor de ste ser el enviado en los datos del
formulario aunque se muestre otro texto.

< button> : Equivalente a < input type=button >

< submit >: Muestra un botn que, al pulsarlo, ocasiona que se enve el formulario. En
todos los botones al especificar el parmetro value se establece el texto dentro del
mismo. Equivalente a < input type=submit >
Trabajaremos ms a fondo con los elementos de formulario en la seccin sobre
JavaScript.

Clase 2
1 HTML5 ha incorporado con algo de controversia etiquetas < video > y < audio > para
incrustar elementos multimedia en las pginas web sin necesidad de recurrir a plugins de
terceros como Flash.

El problema es que los responsables de navegadores no se han puesto de acuerdo en cuanto


a qu formato de codificacin deben tener esos ficheros. La situacin al respecto en estos
momentos en la siguiente:

Fuente: https://msdn.microsoft.com/es-es/hh552485.aspx
En Septiembre de 2015 Microsoft ha anunciado que dotar en el futuro de soporte nativo a
VP8 en su navegador Edge, lo que da buenas esperanzas para la estandarizacin mediante
este formato.
La solucin pasa por incluir en la etiqueta < video > o < audio > varias fuentes con diferentes
codificaciones, pero el mismo contenido, de manera que el navegador seleccione el que sea
compatible. Un ejemplo de cmo se consigue esto es el siguiente:

< video controls >

< source src="devstories.webm"


type='video/webm;codecs="vp8, vorbis"'/>
< source src="devstories.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
< /video >

Por lo dems, a estas alturas el uso general de etiquetas y atributos debe ser bastante
conocido, por lo que si queremos hacer un uso complejo de < video > o < audio >, solo nos
queda investigar las referencias a todos los atributos especficos de estas:

https://developer.mozilla.org/enUS/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

http://www.html5rocks.com/en/tutorials/video/basics/

Las tipografas web requieren aclarar ciertos conceptos previos. En principio, podemos definir
que un texto utilice una tipografa mediante la propiedad CSS font-family. Pero solo tendr en
cuenta tipografas muy genricas, o aquellas que ya estn instaladas en el ordenador.
Si lo que queremos es utilizar una tipografa original, CSS3 define un estndar para enlazar
nuestra web con el fichero tipogrfico con la informacin necesaria para representarla. Pero
de nuevo aqu hay varios estndares y no ha habido un acuerdo definitivo sobre qu formato
utilizar, por lo que lo ms sencillo es delegar este problema en servicios de tipografa web
como el gratuito Google Fonts o Adobe Typekit.

https://www.google.com/fonts

https://typekit.com/

Utilizando el primero como ejemplo, podemos buscar una tipografa que nos parezca
interesante para nuestra pgina. Para utilizarla, deberemos enlazar en la seccin < head > de
nuestro documento con la ubicacin de la tipografa de la manera:
<
link
href='https://fonts.googleapis.com/css?family=Lobster'
type='text/css' >

rel='stylesheet'

Y luego en el fichero CSS, tendremos que agregar la siguiente regla en el selector al que
queramos dotar de esta tipografa:

font-family: 'Lobster', cursive;

El especificar cursive como fuente alternativa permitir que si por alguna razn no se puede
utilizar la primera opcin indicada, haya una segunda con una visualizacin diferente a la que
tienen por defecto otros elementos de la pgina.

2 Compatibilidad en navegadores, arreglos de fallos conocidos


Un problema que nunca hay que olvidar, es que cada navegador puede representar nuestro
cdigo HTML y CSS de formas distintas. Esto presenta un problema en tres situaciones:

El navegador es muy antiguo, por lo que representa de forma diferente elementos muy
bsicos ya que anteriormente haba poco
desarrolladoras de respetar los estndares web.

compromiso

por

las

empresas

El navegador es antiguo, y no sabe interpretar algunos nuevos elementos de HTML5 y


CSS3.

El navegador no es antiguo, pero ciertos elementos de HTML5 y CSS3 todava no los


interpreta de la misma manera de otros navegadores (o no est bien definido el
estndar de cul es el comportamiento ms correcto).

Una muy buena referencia de cmo una caracterstica web funciona en diferentes
navegadores y sus versiones es la siguiente:http://caniuse.com/
Una problemtica habitual es que algunos navegadores introducen caractersticas de HTML5
y CSS3 cuando todava estn en borrador. Para asegurarse que no rompen otros cdigos
vlidos, lo que hacen es anteponer a las reglas CSS un prefijo con un guin y las siglas de su
navegador. Por esto en muchos ejemplos sacados de Internet nos encontramos reglas
repetidas, en cada copia con diferente prefijo, de forma que nos aseguremos que todos los
navegadores lo entienden. Un cdigo de este tipo sera el del siguiente ejemplo para definir el
fondo como un gradiente:

background: #1e5799; /* Old browsers */


background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799),
color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background:
-webkit-linear-gradient(top,
Chrome10+,Safari5.1+ */

#1e5799

0%,#7db9e8

100%);

/*

background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */


background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(
endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

startColorstr='#1e5799',

La primera regla se incorpora para asegurar que en el peor de los casos, el elemento tendr al
menos un color de fondo slido. La ltima est preparada para versiones antiguas de Internet
Explorer, donde a pesar de no contar con ningn soporte para esta funcionalidad, se puede
emular mediante filtros DirectX que solo este navegador interpreta.
Los ejemplos as construidos son muy compatibles, pero largos y engorrosos de estudiar, por
lo que en este manual solo especificaremos en todos los casos la versin de cdigo ms
compatible (en este ejemplo, la marcada como W3C), quedando como labor para el alumno
asegurarse si funciona en otros navegadores, y proporcionar los cdigos adicionales
equivalentes.
Como referencia para evaluar nuestras pginas frente a navegadores, adems de comprobar
directamente con aquellos que tengamos instalados, podemos utilizar servicios externos
como BrowserStack, que realiza una batera de pruebas y nos enva los resultados como
capturas de pantalla por email: https://www.browserstack.com/screenshots
Ya comentamos antes tambin que Internet Explorer y Edge, al desplegar con F12 el inspector
de cdigo, permiten seleccionar si queremos ver cmo se visualiza la pgina actual en
versiones anteriores del navegador de Microsoft.
Cuando un navegador no implemente una caractersticas estndar de CSS3 o HTML5,
podemos utilizar libreras JavaScript que aadan esa funcionalidad. Este tipo de herramientas
sustitutivas se llaman Polyfill, y una de las ms utilizadas es Modernizr:http://modernizr.com/
La necesidad de asegurar la compatibilidad en navegadores y en qu versiones deber ser
evaluada antes de comenzar cada proyecto. Cuanto ms compatible queremos que sea la
pgina, sobre todo con navegadores antiguos, ms trabajo de revisin y bsqueda de
alternativas a las incompatibilidades deberemos realizar. Esta es una labor bastante compleja,
que queda para estudio particular una vez se haya asimilado el uso correcto de los estndares
en las situaciones ms favorables.

3 Hemos dado un vistazo a las sintaxis de HTML y CSS, las etiquetas y propiedades ms
utilizadas, y por donde expandir nuestro conocimiento de ellas. Un par de referencias
adicionales para completar este captulo son las de los validadores y preprocesadores.

Si durante los ejemplos has escrito alguno mal y has comprobado el resultado en el
navegador, habrs visto que se desbarata toda la visualizacin de la pgina. Pero tambin
puedes haber comprobado que pequeos errores u omisiones son corregidos de forma
automtica por el navegador, de forma que en el inspector de cdigo el resultado que ste
visualiza es la mejor aproximacin que ha conseguido hacer al cdigo correcto.
Para comprobar que nuestro fichero carece de estos pequeos errores, que pueden
convertirse en errores graves o incompatibilidades en navegadores, podemos utilizar el
servicio de validacin del W3C https://validator.w3.org/ http://jigsaw.w3.org/css-validator/
Los preprocesadores son otra herramienta til, que nos permite definir cdigo CSS pero en un
lenguaje previo, como LESS o SASS, de manera que podamos aadir a nuestra
especificacin visual el uso de variables y expresiones.
Gracias a esto, si necesitamos cambiar un atributo como un color utilizado en varios sitios de
la especificacin de los estilos, tan solo tendremos que cambiarlo una vez en la especificacin
de la variable.
Un ejemplo de sintaxis de LESS

@lightRed: #fdd;
@lightGreen: #dfd;
@lightBlue: #ddf;

@defaultThemeColor:@lightGreen;
.shape{
display:inline-block;
width:200px;
height:200px;
background:@defaultThemeColor;
margin:20px;
}

Otro ejemplo de sintaxis de SASS.

$font-stack:

Helvetica, sans-serif;

$primary-color: #333;

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

Eso si, ser necesario que generemos el fichero CSS a partir del cdigo LESS o SASS
previamente a su utilizacin, con herramientas llamadas preprocesadores de CSS, y a la
accin de generar el fichero CSS, compilacin. Ms referencias en:

http://sass-lang.com/

http://lesscss.org/

4 Responsive Web Design (RWD), o diseo responsivo, es la tendencia moderna en cuanto a


desarrollo de pginas web, segn la cual se disea una nica pgina con una misma
codificacin, que debe adaptarse a los diferentes dispositivos en cuanto a tamaos de
pantalla, densidad de pxeles, orientacin vertical u horizontal, y elementos de interaccin
como ratn o pantalla tctil.
Los primeros telfonos que contaron con navegadores de Internet tenan poca potencia, un
tamao de pantalla muy pequeo, y estos navegadores podan realizar pocas funciones. Por
esto era prctica comn detectar si el navegador corresponda a un mvil para enviarle una
versin diferente de la pgina, mucho ms sencilla y con pocas funciones.
Pero hoy en da los mviles y tablets tienen resoluciones en muchos casos superiores a los
ordenadores. Su pantalla puede utilizarse en horizontal o vertical, y no contamos con cursores
o ratn para desplazarnos o seleccionar elementos, sino que tenemos que hacerlo pulsando
con el dedo (las zonas tctiles tiene por tanto que tener mayor tamao).
En muchos casos se mantena esa versin mvil ms limitada de las pginas, lo que ofreca
una experiencia de usuario horrible en dispositivos modernos.
El nuevo estndar CSS3 proporciona reglas que permiten construir un solo interfaz que, sin
necesidad de recargar siquiera la pgina actual, se transforma en funcin del tamao de la
pantalla del navegador, de manera que proporcionamos al usuario la mejor representacin
posible de la pgina en todas las circunstancias.

Se teoriza que en el futuro el volver el diseo adaptable, en el que se enva al navegador una
versin especfica adaptada a sus capacidades, pero con idea una vez ms de proporcionar la
mejor experiencia de usuario posible al navegante.

5 Necesitamos en primer lugar conocer las diferentes resoluciones de pantalla de los


dispositivos que van a ser nuestro objetivo. Podemos consultar una extensa tabla en la
siguiente referencia: http://dpi.lv/
Comparemos algunas caractersticas de dispositivos como los siguientes:
Tamao diagonal
pantalla

Resolucin

Densidad Pxeles por Pulgada


(PPI)

Monitor PC
convencional

21''

1980
1090

166

iPhone 6 Plus

5,5''

1080x1980

401

Samsung Galaxy S6

5.1''

1920x1080

532

iPad Air

9,7

2048
1536

264

Nos damos cuenta de que tan solo fijndonos en la resolucin, no tenemos una informacin
fidedigna de las caractersticas del sistema utilizado por el usuario. Un monitor de un PC
convencional puede tener la misma resolucin que un iPhone 6 o un Samsung Galaxy S6,
pero al ser estas pantallas mucho ms pequeas (lo que se comprueba examinando la
densidad de pxeles), al usuario le costara mucho interactuar con la misma pgina si se
representara de forma equivalente en estos dispositivos.
Adems, una pgina diseada para ordenador tiene en cuenta que la interaccin principal se
realizar con el ratn, donde la precisin del cursor es muy grande. En un dispositivo tctil, el
tamao de nuestros dedos sobre un mvil tiene un tamao considerable, y sera deseable que
los elementos a pulsar fueran de un tamao similar a nuestra huella.
6 Afrontar este reto de diseo no es fcil. Para ello est demostrado que es mucho ms
prctico adoptar una filosofa mobile first, donde en primer lugar se disee cmo se va a
visualizar el contenido en un dispositivo mvil, de manera conceptual y creando el cdigo

HTML y CSS; para luego especificar cmo alteramos el interfaz para aprovechar las
caractersticas de la visualizacin en escritorio.

Fuente: http://metamonks.com/mobile-first-vs-responsive/
En general, el diseo mobile first debe tener en cuenta algunos patrones muy comunes de
usabilidad:

La cabecera no debe ser muy grande, de manera que el contenido no quede muy
abajo.

Los mens de navegacin debern aparecer condensados, desplegndose solo al


pulsar alguna opcin para ello.

Un conjunto de artculos es apropiado mostrarlos de arriba a abajo, ocupando cada


uno el 100% del ancho (o el 50% en dispositivos como tablets con algo ms de
tamao).

Cualquier contenido lateral no relacionado con el contenido principal, es mejor


trasladarlo a que se muestre al pie del documento.

Cualquier enlace que se podra mostrar como un texto, es preferible hacerlo como un
botn que tenga un tamao fcil de pulsar.

Si un artculo se puede expandir para visitar su contenido ampliado, hacer tanto el


ttulo como la imgen y el texto resumen del artculo pulsables para visitar la versin
expandida de la misma.

7 Conseguir todo puede parecer muy complicado, pero en realidad se consigue siempre de la
misma manera. Utilizaremos una nueva caracterstica de CSS3 llama media queries.

Utilizando la palabra clave media, podemos establecer entre corchetes que un conjunto de
reglas solo se tenga en cuenta para un medio en concreto (la pantalla, o la versin de
impresin), o para un rango de resolucin especfico. En nuestro ejemplo podemos utilizar
unas reglas como estas:

@media screen and (max-width: 300px) {


nav { display: none; }
article {
width: 100%;
height: 100px;
}
}

En el resultado comprobamos al reducir el tamao del navegador que el comportamiento de la


lista de ejemplos ya no es conformar una red de 3 elementos de ancho, sino una lista donde
todos tiene un ancho del 100%. Tambin hemos ocultado el men superior, aunque sera
necesario aadir un men alternativo desplegable.
Otro factor que tenemos que tener en cuenta, es que los dispositivos tctiles al facilitar el
hacer zoom pellizcando la pantalla, pueden mostrar un ancho de sta diferente del ancho del
documento. Para forzar a que el documento se muestre exactamente con el ancho de la
pantalla, utilizaremos una etiqueta en la cabecera como esta:

< meta name="viewport" content="width=device-width" >

El ejemplo anterior nos ha funcionado reduciendo el tamao del navegador, y funcionara con
pantallas de poca resolucin. Pero los dispositivos de pantalla tipo retina, con muchos pixels
por pulgada, requerirn reglas en las que utilicemos este factor en lugar del ancho en pxeles.

@media
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {

/* Reglas para dispositivos retina */


}

Definir todas estas particularidades poco a poco es posible, pero siempre es mejor utilizar
plantillas o ejemplos ya construidos y aplicarlos al completo. Veremos en la seccin sobre
Bootstrap como beneficiarnos de un montn de reglas preconstruidas para que las utilicemos
de manera sencilla sin tener que definir apenas nada en el CSS.
8 Hemos visto cmo afecta tanto el ratio de pxeles de la pantalla como la densidad para la
experiencia a la hora de construir CSS. Pero, qu pasa con las imgenes?
En una pantalla de mucha resolucin pero pequeo tamao, vamos a querer ampliar la
imagen respecto al tamao de pxel de un ordenador de escritorio. Pero si lo hacemos
utilizando la misma imagen original, estaremos desaprovechando la mayor resolucin a
nuestra disposicin.
La solucin est en utilizar ficheros de imagen alternativos para pantallas de alta densidad.
Cuando se definan mediante CSS y media queries, tenemos que especificar en estas reglas
alternativas los nuevos ficheros como cualquier otra regla particular para esa resolucin. Ms
referencias en: http://www.html5rocks.com/en/mobile/high-dpi/
Cuando los utilicemos en etiquetas

, podemos emplear la propiedad srcset para

especificar un conjunto de alternativas a la imagen original definida en la propiedad src.


Un ejemplo de uso de srcset sera el siguiente:

< img alt="my awesome image"


src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w
2x" >

9 Ahora que tenemos forma de definir el contenido de la pgina en HTML, y el aspecto visual
en CSS, vamos a aadir algo de programacin mediante JavaScript.
Al igual que pasara con CSS, tenemos varias formas de incorporar cdigo JavaScript a nuetro
fichero HTML.
1. Referenciando un fichero .js en la cabecera < head >

< script src="mificherojs.js" type="text/JavaScript" / >

Especificar el atributo type es opcional en HTML5, ya que por defecto se asume que es
JavaScript.
2. Incorporando cdigo incrustado en cualquier parte de la pgina mediante la etiqueta <
script >

< script type="text/JavaScript" >


alert('Hola Mundo');
< /script >

Este cdigo se ejecuta siempre inmediatamente en el momento que el navegador lo recibe,


aunque no haya terminado de procesar el documento HTML completo.
3. Incorporando cdigo directamente dentro de una etiqueta, como valor de un atributo de
evento
< a href="#" onclick="JavaScript: alert('Hola Mundo');" >saludar<="" a=""> < /a >

Clase 3
1 El lenguaje JavaScript es muy directo y convencional a la hora de definir variables,
funciones y operadores. La sintaxis es parecida a C, C++ y C#, e incluso un poco a PHP.
Cada instruccin se termina en ;, y los caracteres { y } se utilizan para delimitar el mbito
de las funciones y otros elementos como objetos JSON (los veremos ms adelante).

< script >


function muestrasuma(numero1, numero2) {
var resultado;
resultado = numero1 + numero2;
alert(resultado);

muestrasuma(10, 2);

Las variables en JavaScript no tienen un tipo determinado, por lo que habr que tener mucho
cuidado a la hora de mezclar diferentes tipos de datos en las operaciones.
2 Las cadenas de texto en JavaScript son objetos complejos, que incorporan toda una serie
de mtodos para manipularlas. La concatenacin de cadenas se realiza con el operador +.
Las cadenas pueden estar definidas utilizando comillas simples o dobles, siempre que se
utilice el mismo tipo de comillas para abrir y cerrar la cadena.
< script >
var a = "Hola";
var b = "Mundo";
alert(a + " " + b);
< /script >

3 En JavaScript ejecutado desde un documento HTML, contamos con toda una serie de
objetos y sus mtodos predefinidos que representan todos los objetos visuales del documento,
de manera que podamos manipularlos con facilidad. A esto se le llama Document Object
Model (DOM).
El objeto document que representa a todo el documento cuenta con un mtodo
getElementById, que devuelve un objeto especificando su atributo id, para que luego podamos
manipularlo.

< a href="#" id="mienlace" style="background-color: orange;">Enlace demo< /a >


< script >
document.getElementById("mienlace").style.backgroundColor="orange";
< /script >

4 JavaScript es un lenguaje que adems de ser funcional (permite la declaracin directa de


funciones) tambin es basado en objetos.

Para aquellos que tengan nociones de orientacin a objetos, decir que la diferencia en ser
basado en objetos, es que carecemos de mecanismos sencillos en el lenguaje para definir
clases y herencias, y exigir comprobaciones de pertenencia a dichas clases.
Si todo esto no te dice nada, no te preocupes. Lo importante es que en JavaScript en el
navegador el DOM nos proporciona toda una serie de objetos equivalente a todos los
elementos de la pgina web, que estn atribuidos con sus respectivas propiedades
equivalente segn se ven en cada momento en la pgina.
Gracias al DOM cualquier cambio que hagamos en estos objetos se
automticamente en un cambio en la representacin visual del mismo en la web.

traduzca

Pero, cmo se utiliza esto para programar? cmo se acceden a estos objetos y mtodos?
En primer lugar, partimos de un objeto principal llamado document, que contiene a todo el
documento HTML.
ste tiene un mtodo getElementByID que nos permite obtener un objeto concreto del
documento, sabiendo su identificador. A partir de ah, podramos por ejemplo acceder a la
propiedad style que define todos los estilos CSS del objeto, y de nuevo a la
propiedad border, que permite definir un nuevo estilo para el borde. En conjunto, todo esto se
hace con la siguiente linea de cdigo:

document.getElementById('menu-principal').style.border = '1px solid red';

Un truco muy comn es cambiar la propiedad CSS display de un objeto de block para que sea
visible, a none para que quede oculto. Esto lo podramos conseguir as:

document.getElementById('menu-principal').style.display = 'none';

La consola de cdigo de Chrome es muy til a la hora de explorar las propiedades JavaScript
que tiene un objeto, para ello habr que seleccionar el nodo que queremos inspeccionar, y
pulsar en la pestaa de la derecha llamada Properties.

Otro truco til es utilizar la consola JavaScript del inspector de cdigo. Cuando en ella
escribimos cdigo JavaScript, se ejecuta inmediatamente sobre la pgina actual. Para los
diferentes objetos del DOM, si los almacenamos en una variable nos ofrece adems
completacin inteligente del cdigo.

Unas buenas referencias al DOM las podis encontrar en las siguientes webs:

https://developer.mozilla.org/es/docs/DOM http://www.w3.org/DOM/DOMTR http://www


.w3schools.com/js/js_htmldom.asp

5 En JavaScript es posible definir como parmetro, en lugar de un valor para una variable,
directamente una funcin annima a ejecutar. Piensa por ejemplo en un mtodo de evento,
que nos est pregunta Qu funcin ejecuto al pulsar esto?, y la respuesta no es el nombre
de la funcin, sino directamente la funcin.

Como cada funcin define su propio mbito, donde las variables definidas no afectan al resto
del cdigo, muchas veces se definen directamente sin que se haya pedido una funcin
annima que se ejecuta directamente, solo para asegurarnos que el cdigo que contiene no
afecta a las variables definidas fuera de sta.

< script >


(function(){
alert('Funcin annima para aislar el mbito');
})();
< /script >

6 Obviamente el inspector de cdigo del navegador permite revisar el cdigo JavaScript


incorporado en el documeto as como el referenciado en archivos externos.
Adems siempre contamos con una consola de cdigo, donde se mostrar cualquier error
JavaScript ocurrido, o cualquier mensaje enviado a la consola mediante console.log() (no
disponible en versiones antiguas de Internet Explorer).
La consola nos permite tambin introducir comandos JavaScript sobre la marcha, en el mismo
entorno de la pgina en el que se est ejecutando todo nuestro JavaScript principal, por lo que
es fcil probar comandos o incluso pegar grandes trozos de cdigo para comprobar su efecto
antes de incorporarlo en los ficheros.
Tambin contamos siempre con un avanzado depurador, que nos permite incorporar puntos
de interrupcin al cdigo, que detendrn la ejecucin del cdigo JavaScript al llegar a ellos,
permitindonos inspeccionar el contenido de las variables, o utilizar la consola para realizar
pruebas sobre ese punto concreto del cdigo. No es difcil de utilizar si ya has utilizado antes
un depurador de cdigo en cualquier otro lenguaje de programacin.
7 El cdigo JavaScript, as como HTML y CSS, permite utilizar espacios y tabulaciones para
separar el contenido de forma que est ms organizado, y sea ms sencillo entender a simple
vista su estructura.
Todos estos espacios en realidad no aportan nada al navegador, por lo que podramos pensar
en una versin equivalente de estos ficheros donde se omitieran, ganando a cambio algo de
reduccin de tamao de ficheros. Cuando tenemos miles de usuarios cargando el contenido
de nuestras pginas, esta reduccin puede suponer un gran ahorro.
Otro efecto importante de cara a la carga de la pgina, es que es ms ptimo cargar un solo
fichero CSS o JS grande, que muchos ficheros separados pequeos. Como tambin por orden

podemos querer tenerlos separados, otra optimizacin posible es juntar todos estos pequeos
ficheros en uno solo.
Si estamos utilizando un CMS, estos tienen a su disposicin herramientas o plugins que
permiten automatizar estos procesos.
8 Las funcionalidades que nos ofrece el DOM son muy amplias, pero dada la complejidad que
a da de hoy se le exigen a las pginas webs, se han incoporado a HTML5 una serie de APIs
adicionales que permiten una programacin de funcionalidades ms compleja.
A continuacin incluimos un listado de las mismas junto con una descripcin para que sirva de
referencia frente a profundizar ms con alguna de ellas:

Canvas: Librera que permite la realizacin de dibujos complejos y animaciones en


zonas especficas de la pgina con la etiqueta< canvas >

Drag&Drop: Ofrece una gestin unificada de la funcionalida de arrastrar y soltar en el


navegador, independiente de cul se trate y del sistema operativo.

Geolocation: Permite relizar consultas para solicitar el geoposicionamiento del usuario.

Storage: Ofrece mecanismos para el almacenamiento y consulta de grandes


cantidades de informacin, como con una base de datos.

File: Gestin de la interaccin con el sistema de ficheros. Communication: Apertura de


puertos (sockets) para la comunicacin directa con otras aplicaciones.

Web workers: Facilita el definir procesos que sern realizados en segundo plano
mientras continua la ejecucin principal del cdigo.

History: Ofrece una interfaz comn para la gestin del historial del navegador, para
aquellas web cuya funcionalidad no requiera ir cargando pginas nuevas.

Offline: Funcionalidad para ofrecer soporte al trabajo sin conexin de la pgina, como
si se tratase de una aplicacin cualquiera.

Clase 4
1 No tenemos que crear todo el cdigo que necestemos en JavaScript por nosotros mismos,
podemos apoyarnos en el uso de libreras JavaScript que ponen en nuestras manos una gran
cantidad de cdigo y facilidades para su uso. Entre las principales libreras estn:

jQuery: Una de las ms utilizadas, ofrece funcionalidades de base muy interesantes


que veremos ms adelante. Dispone de componentes visuales a travs de otras
libreras adicionales como jQuery UI y jQuery Mobile. https://jquery.com/

ExtJS: Un sistema de Widgets que permite construir interfaces y aplicaciones web tan
complejas como una aplicacin de escritorio. El nico de esta lista que no es software
libre,
requiriendo
licencia
para
proyectos
comerciales.https://www.sencha.com/products/extjs/

ReactJS: Un complejo framework basado en el patrn MVC (modelo, vista,


controlador), donde es posible utilizar tan solo la parte de vista para dibujar Widgets.
Permite crear controles de interfaz de usuario con estado interno que reaccionan ante
el cambio del mismo, actualizndose automticamente. http://facebook.github.io/react/

Angular JS: Otro complejo framework para construir aplicaciones web basadas en el
patrn MVC (modelo, vista y controlador). Se utiliza programando en Typescript (una
especie de variante de JavaScript ms formal), se obtiene el mayor rendimiento con l
cuando se utiliza su sistemtica de trabajo para todo el desarrollo de la
aplicacin. https://angularjs.org/

jQuery
Esta librera es la ms utilizada en proyectos web, ofreciendo una serie de funcionalidades
bsicas sobre las cuales otras libreras pueden complementar con funciones ms complejas
(por ejemplo, aadiendo widgets, elementos visuales de interfaz de usuario).
En pocas palabras, jQuery permite especificar un selector de una forma equivalente a la que
se utiliza en CSS, para sobre el conjunto de elementos seleccionados, realizar operaciones
estndar DOM sobre ellas, u otras adicionales que jQuery proporciona.
En su origen, jQuery tena la gran virtud de que estos mtodos adicionales proporcionados
eran compatibilizados respecto a todos los navegadores, permitiendo un cdigo nico,
compacto y sencillo. Hoy en da los navegadores modernos se comportan muy bien respecto
a los estndares, pero an as jQuery ofrece una forma de programar cosas muy interesantes
en solo un par de lneas muy comprensibles (ver http://youmightnotneedjquery.com/ ).
Para utilizar jQuery, podemos descargarnos y enlazar la librera (normalmente ya minificada)
desde https://jquery.com/, o bien podemos enlazar directamente con la que Google hospeda
online para su uso por cualquiera utilizando la siguiente lnea en la cabecera, lo que ser ms
rpido:

< script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">

Ms
informacin
sobre
el
hospedaje
en: https://developers.google.com/speed/libraries/?hl=es

de

libreras

por

Google

Si nos descantamos por esta ltima opcin, es importante recordar que necesitaremos tener
conexin a internet para que funcione nuestra funcionalidad con jQuery.
jQuery fundamenta en el uso del operador $, que como hemos mencionado, devuelve un
elementos o elementos coincidentes con el selector CSS proporcionado.

$('section#blogroll article ul').addClass('milista');

En el ejemplo anterior, obtendramos todos los elementos de lista que estuvieran dentro de
artculos < article >, que a su vez estuvieran dentro de el elemento < section > con
identificador blogroll. A estos elementos, le aadiramos la clase CSS milista, en adicin a
cualquier clase que tuvieran ya establecida.
A continuacin una serie de llamadas de ejemplo de jQuery nos permiten comprobar qu tipo
de cosas se pueden hacer con esta librera

//Retirar clase CSS


$(el).removeClass(className);

//Ocultar elemento/s
$(el).hide();

//Mostrar elemto/s
$(el).show();

//Ejecuta una funcin sobre cada elemento


$(selector).each(function(i, el){
//...
});

//Coincide con selector


$(el).is('.my-class');

//Obtener coordenadas
$(el).offset();

//Establecer estilo
$(el).css('border-width', '20px');

//Aadir evento Off


$(el).off(eventName, eventHandler);

//Aadir evento On
$(el).on(eventName, eventHandler);

//Ejecutar cuando el documento HTML est preparado


$(document).ready(function(){
//...
});

2 Para complementar la reuitilizacin de una base a la hora de trabajar en proyectos web,


adems de las libreras JavaScript, contamos con los frameworks web, que proporcionan
definiciones CSS de base (tambin llamadas boilerplate), para definir cabeceras, mensajes
popup, distribuciones en columnas, etc. Estas adems estn perfectamente diseadas para
un comportamiento responsive frente al paradigma del diseo mobile first.
Entre estos frameworks, los ms utilizados son:

BootStrap: Desarrollado por Twitter como software libre, el ms utilizado. Integra


sistema de rejilla responsive, normalizacin frente a diferencias entre navegadores,
clases para elementos visuales comunes, un tema de colores y tipografa, y
opcionalmente algunos widgets jQueryUI. Hablaremos extensivamente de l ms
adelante.

Foundation: Similar a Bootstrap, es compatible con navegadores ms antiguos, y su


estilo visual es ms sobrio y funcional.

HTML Kickstart: Adems del framework, contamos con modelos en Photoshop de


todos los elementos de interfaz de usuario para ser utilizados en la creacin de
bocetos por los diseadores. http://www.99lime.com/elements/

Adems de estos, existen otros frameworks ms complejos que anan adems a su vez
AngularJS o ReactJS.
3 Podemos descargar Bootstrap de su pgina para enlazar con los ficheros CSS y JS
necesarios, o bien al igual que con jQuery, podemos utilizar una fuente externa (en este caso
de MaxCDN), para enlazar directamente con los ficheros de BootStrap alojados por ellos,
incluyendo este cdigo en la cabecera de la siguiente forma:
<!-- ltima versin compilada y minificada de CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Tema opcional -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstraptheme.min.css">

Una vez hecho esto, podemos escribir el cdigo HTML que deseemeos, y utilizar las clases y
utilidades que nos ofrece.
Tomemos como ejemplo el siguiente cdigo para < body> , modificado desde uno de los
propios ejemplos proporcionados en la pgina de BootStrap:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a
large callout called a jumbotron and three supporting pieces of content.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more
&raquo;</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">

<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus. </p>
<p><a class="btn btn-default" href="#" role="button">View details
&raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details
&raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Vestibulum id ligula porta felis euismod semper.</p>
<p><a class="btn btn-default" href="#" role="button">View details
&raquo;</a></p>
</div>
</div>
<hr>
<footer>
<p>&copy; Company 2015</p>
</footer>
</div> <!-- /container -->

Comprobamos que tenemos una barra superior, un encabezado grande, y tres elementos en
tres columnas para terminar con un breve pie. Adems los enlaces aparecen estilados como
atractivos botones.
Para ello, hemos utilizado las siguentes clases CSS:

navbar y derivados: definicin de la barra superior jumbotron: encabezado con letras


grandes btn y derivados: estilado de un enlace como un botn. row: define el comienzo
de una fila (en el ejemplo tan solo hay una).

col-md-4: Establece que tendremos 3 columnas del mismo ancho (el nmero 4 de la
clase es engaoso, no tiene nada que ver con la distribucin de columnas), y que en
dispositivos mviles se reduciran a una para aumentar la legibilidad.

No es necesario que memoricemos estas clases. Tenemos un listado con ejemplos de todos
los
elementos
visuales
de
tema
con
ejemplos
en
la
siguiente
referencia: http://getbootstrap.com/examples/theme/
Cambiando las clases que definimos en las columnas, podemos hacer que se repartan en
proporciones diferentes de ancho. Tambin podemos aadir clases adicionales que modifican
nicamente el comportamiento que tendrn estas columnas solo para dispositivos mviles.

Tenemos ejemplos de las diferentes composiciones de rejillas en filas y columnas en las


referencias:
http://getbootstrap.com/examples/grid/
http://getbootstrap.com/2.3.2/scaffolding.html

Un resumen terico del Bootstrap schafolding (grid system) muy asequible lo encontraris
en:
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
El aspecto de este mismo ejemplo cuando reducimos el ancho del navegador, est totalmente
adaptado a una perspectiva de uso de dispositivos mviles, sin que hayamos tenido que hacer
nada ms para ello:
Si quieres ms informacin sobre cmo comenzar a utilizar BootStrap, puedes consultar su
pgina en: http://getbootstrap.com/getting-started/
4 Hemos visto que podemos trabajar con BootStrap aplicando al 100% las clases que ya
define, sin tener que construir ningn cdigo CSS por nuestra parte para personalizar el
aspecto de los elementos.
Tambin es posible aadir reglas CSS propias que modifiquen de forma particular algn
elemento. Para hacer esto, tan solo tendremos que aadir nuestra hoja de estilos en < head
> al final de las de BootStrap (para que se apliquen en segundo lugar, y puedan sobreescribir
comportamientos previos).
Pero habr que tener mucho cuidado, ya que las reglas de BootStrap son complejas, y tienen
en cuenta la representacin de los elementos en todo tipo de resoluciones. Una prctica
obligatoria ser comprobar siempre que las modificaciones que realicemos no rompen la
correcta visualizacin en resoluciones menores que la del escritorio (o mayores densidades de
pxeles) para dispositivos.
Siempre es mejor construir clases adicionales que aadamos a las ya existentes para un
elemento. Un ejemplo lo podemos encontrar en la web translate.twitter.com , en la que para
personalizar un botn (definido por la clase btn), han creado una clase propia llamada btn-tt:

/* Modificar el texto y el color de fondo en los tres estados


principales del botn: default, hover y active. */
.btn-ttc,

.btn-ttc:hover,
.btn-ttc:active {
color: white; background-color: #007da7;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* Fondo con gradiente de colores */


.btn-ttc {
background-repeat: repeat-x;
background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
}

Si creamos dos botones con el estilo por defecto, y el especificado por nuestra nueva clase,
notaremos la diferencia:

< a class="btn btn-default" href="#" role="button">View details < /a>


< a class="btn btn-ttc" href="#" role="button">View details < /a>

Y el resultado del botn usando el estilo por defecto, y el especificado por nosotros:

Existen herramientas que nos permiten de manera sencilla modificar los colores del tema base
de BootStrap de manera visual, y obtener el fichero CSS resultante de la nueva
especificacin, como la de la siguiente referencia: http://stylebootstrap.info/
Tambin podemos revisar y descargar temas alternativos ya creados desde repositorios como
el siguiente gratuito:http://bootswatch.com/
Incluso existen editores visuales donde podemos construir la totalidad de la web basada en
BootStrap sin tener que escribir una sola linea de cdigo, aunque es un servicio en la nube
que no ofrece un plan gratuito: https://jetstrap.com/

Otra alternativa es modificar los ficheros de variables del tema que viene con BootStrap. ste
no est directamente codificado en CSS, sino en un lenguaje intermedio llamado LESS que
permite utilizacin de variables y expresiones, con el que luego se generan los ficheros CSS.
Un
fichero
a
modificar
en
LESS
para
alterar
los
colores
variables.lesshttps://github.com/twbs/bootstrap/blob/master/less/variables.less

sera

Tambin podemos crear nuestros propios ficheros LESS, y seleccionar qu mdulos de


BootStrap vamos a utilizar para generar desde los ficheros LESS originales solo el cdigo
CSS estrctamente necesario, lo que nos aportar rapidez en la descarga de la pgina, y
mayor fluidez en su funcionamiento.
5 Algunos de los plugins de BootStrap requieren jQuery, pero su uso es opcional. Si lo
queremos incorporar, as como todos los plugins compilados en un solo fichero, tendremos
que aadir en el cuerpo del documento:
<!-- jQuery (necesario para alguno de los plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- ltima versin compilada y minificada de JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Existen muchas cosas en la web que no se pueden conseguir solo con HTML y CSS, y
BootStrap incorpora ciertos plugins de uso comn en JavaScript para seguir facilitndonos el
trabajo.
Uno de ellos nos permite dibujar una ventana modal, que se muestre encima de nuestra web
<!-- Botn que lanza ventana modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" datatarget="#myModal">
Lanzar ventana modal
</button>
<!-- Ventana modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" arialabel="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Ttulo modal</h4>
</div>

<div class="modal-body">
Mensaje ventana modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" datadismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar</button>
</div>
</div>
</div>
</div>

Al probar el ejemplo y pulsar el botn etiquetado Lanzar ventana modal, aparecer sobre
nuestra pgina una ventana con el siguiente mensaje:

Otras funcionalidades que podemos encontrar en JavaScript con BootStrap son:

Dibujado mens dropdown

ScrollSpy: mens donde se resalta la subseccin en la que est el scroll dentro de un


documento

Pestaas

Tooltips: Mensajes emergentes al pasar el ratn

Popover: Mensajes emergentes ms avanzados

Alertas: Barra de mensaje ocultable

Acciones adicionales sobre botones

Zonas colapsables

Acordeon

Carrousel: Galera deslizante de imgenes

Afix: Posiciona un elemento fijo solo cuando va a salir por la zona superior de la
ventana del navegador.

Una referencia exhaustiva de las funcionalidades JavaScript que obtenemos con BootStrap la
encontramos explicada en el siguiente enlace: http://getbootstrap.com/javascript/

Anda mungkin juga menyukai