Escolar Documentos
Profissional Documentos
Cultura Documentos
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.
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.
Puede que no est siendo tan fcil como parece Qu problemas nos podemos encontrar
en este primer intento?
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.
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.
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
Existen por tanto multitud de tecnologas asociadas al desarrollo web, pero en todas ellas el
HTML es un elemento indispensable.
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
<
<
html
head
>:
>:
Inicio
de
todo
el
documento
HTML
< 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>
< 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.
https://es.wikipedia.org/wiki/Codificaci%C3%B3n_de_caracteres
https://es.wikipedia.org/wiki/UTF-8
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 >:
< h2 >:
< a >:
< 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.
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
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.
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.
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
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:
li:
Elemento
de
lista.
Puede
contener
otras
listas
su
vez
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
<
>:
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.
<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
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:
3. Enlace a archivo de estilos externo mediante etiqueta < link > en < head >
<link href="special.css" rel="stylesheet" type="text/css" />
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.
8 Los selectores son lo que definen sobre qu elementos se aplican las reglas.
Pueden ser una combinacin de:
a{
color: orange;
}
.example_extract {
background-color: #ccc;
}
#example_list {
border: 1px solid #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:
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.
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;
}
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:
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
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
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).
Dentro de la etiqueta < form >, nos encontraremos las siguientes etiquetas:
< textarea >: Permite introducir varias lneas de texto. Los atributos cols y rows
indican las filas y columnas de tamao
< 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.
< 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.
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:
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:
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.
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
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:
#1e5799
0%,#7db9e8
100%);
/*
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;
}
$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/
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.
Resolucin
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.
Cualquier enlace que se podra mostrar como un texto, es preferible hacerlo como un
botn que tenga un tamao fcil de pulsar.
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:
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) {
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
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 >
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 >
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).
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.
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:
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:
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.
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:
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:
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/
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:
Ms
informacin
sobre
el
hospedaje
en: https://developers.google.com/speed/libraries/?hl=es
de
libreras
por
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.
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
//Ocultar elemento/s
$(el).hide();
//Mostrar elemto/s
$(el).show();
//Obtener coordenadas
$(el).offset();
//Establecer estilo
$(el).css('border-width', '20px');
//Aadir evento On
$(el).on(eventName, eventHandler);
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
»</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
»</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
»</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
»</a></p>
</div>
</div>
<hr>
<footer>
<p>© 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:
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.
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:
.btn-ttc:hover,
.btn-ttc:active {
color: white; background-color: #007da7;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
Si creamos dos botones con el estilo por defecto, y el especificado por nuestra nueva clase,
notaremos la diferencia:
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
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">×</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:
Pestaas
Zonas colapsables
Acordeon
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/