4º Semestre HTML5, CSS3 y JavaScript

Desarrollo de Aplicaciones WEB

Ing. Allan Emmanuel López Márquez

Colegio de Estudios Científicos y Tecnológicos del Estado de México
 Índice

Contenido
HTML5................................................................................................................................................................. 6
INTRODUCCIÓN A HTML5 ............................................................................................................................... 6
PRINCIPIOS BÁSICOS EN HTML5 ...................................................................................................................... 6
¿Qué es HTML5? ............................................................................................................................................. 7
Etiquetas HTML: ................................................................................................................................................ 7
ENTREMOS EN MATERIA ................................................................................................................................. 8
Editores de Texto ............................................................................................................................................... 8
Pasos para Construir una PÁGINA WEB ........................................................................................................... 8
INSERTAR IMÁGENES ...................................................................................................................................... 9
Código para insertar IMÁGENES: ...................................................................................................................... 9
Pasos para Añadir IMÁGENES: ........................................................................................................................ 10
VÍNCULOS ..................................................................................................................................................... 11
Codigo para Añadir o Crear VÍNCULOS ........................................................................................................... 11
Pasos para crear hipervínculos: ...................................................................................................................... 11
LISTAS ........................................................................................................................................................... 12
Codigo para crear LISTAS: ............................................................................................................................... 12
Pasos para cobtruir una LISTA: ....................................................................................................................... 13
TABLAS.......................................................................................................................................................... 13
Codigo para crear TABLAS: .............................................................................................................................. 13
Pasos para crear tablas: .................................................................................................................................. 14
FORMULARIOS .............................................................................................................................................. 15
Codigo para crear FORMULARIOS: ................................................................................................................. 15
Entradas de texto “TEXT INPUT”..................................................................................................................... 17
Pasos para construir la entrada de Texto “Text Inputs” ................................................................................ 17
Crear un campo PASSWORD: .......................................................................................................................... 18
Pasos para crear campo PASSWORD: ............................................................................................................. 18
Crear caja de texto multilinea “TEXTAREA” ................................................................................................... 18
Código para crear caja de texto “TEXTAREA”: ............................................................................................... 18
Pasos para crear el “TEXTAREA”: .................................................................................................................... 18
Crear una LISTA DESPLEGABLE ....................................................................................................................... 19
Codigo para crear una LISTA DESPLEGABLE: .................................................................................................. 19
Pasos para crear una LISTA DEPLEGABLE: ...................................................................................................... 19
Crear CAJA DE VERIFICACIÓN ......................................................................................................................... 19
Código para crear una CAJA DE VERIFICACIÓN: ............................................................................................. 19
Pasos para crear una CAJA DE VERIFICACIÓN: ............................................................................................... 20
Crear un campo de opción “BOTON DE RADIO” ............................................................................................ 20
Codigo para crear un elemento de opción o “BOTON DE RADIO”: .............................................................. 20
Pasos para crear un elemento de opción o “BOTON DE RADIO”: ................................................................ 21
BOTONES DE ACCION: ..................................................................................................................................... 21
Construcción de los BOTONES: ....................................................................................................................... 21
NUEVOS ELEMENTOS EN FORMULARIOS HTML5 .......................................................................................... 22
Elemento datalist ............................................................................................................................................. 22
Elemento keygen ............................................................................................................................................. 22
Elemento meter ............................................................................................................................................... 22
Elemento output ............................................................................................................................................. 23
 Índice

Elemento Progress........................................................................................................................................... 23
NUEVOS ATRIBUTOS ..................................................................................................................................... 24
Atributo autofocus .......................................................................................................................................... 24
Atributo pattern............................................................................................................................................... 24
Atributo placeholder ....................................................................................................................................... 24
Validación ......................................................................................................................................................... 25
DIFERENTES TIPOS DE INPUT “INPUT TYPES” ................................................................................................ 25
color ................................................................................................................................................................. 25
date .................................................................................................................................................................. 26
datetime ........................................................................................................................................................... 26
datetime-local .................................................................................................................................................. 27
email ................................................................................................................................................................. 27
month ............................................................................................................................................................... 27
number ............................................................................................................................................................. 27
range ................................................................................................................................................................ 28
search ............................................................................................................................................................... 29
tel...................................................................................................................................................................... 29
time .................................................................................................................................................................. 29
url ..................................................................................................................................................................... 29
week ................................................................................................................................................................. 30
VALIDACION DE PAGINAS WEB ..................................................................................................................... 30
ETIQUETAS SEMANTICAS .............................................................................................................................. 31
Header .............................................................................................................................................................. 31
Nav ................................................................................................................................................................... 31
Section.............................................................................................................................................................. 32
Article ............................................................................................................................................................... 32
Aside ................................................................................................................................................................. 32
Footer ............................................................................................................................................................... 33
Adress ............................................................................................................................................................... 33
Hgroup ............................................................................................................................................................. 33
menu ................................................................................................................................................................ 34
command ......................................................................................................................................................... 34
OTRAS ETIQUETAS DE HTML5 ....................................................................................................................... 35
Details............................................................................................................................................................... 35
Summary/details.............................................................................................................................................. 35
dfn .................................................................................................................................................................... 35
figcaption ......................................................................................................................................................... 35
figure ................................................................................................................................................................ 35
time .................................................................................................................................................................. 36
wbr ................................................................................................................................................................... 36
AUDIO Y VIDEO ............................................................................................................................................. 36
Audio ................................................................................................................................................................ 36
Video ................................................................................................................................................................ 37
CANVAS......................................................................................................................................................... 38
Elemento canvas .............................................................................................................................................. 38
EMBED .......................................................................................................................................................... 40
Elemento embed ............................................................................................................................................. 40
SVG ............................................................................................................................................................... 40
 Índice

Elemento svg.................................................................................................................................................... 40
CSS3 .................................................................................................................................................................. 43
INTRODUCCIÓN A CSS3 ................................................................................................................................. 43
UN PEQUEÑO INSTRUCTIVO PARA AÑADIR CSS3........................................................................................... 46
COLOCAR ESTILOS CON CSS3 ........................................................................................................................ 46
Estilos en línea o Locales ................................................................................................................................. 46
Estilos Embebidos ............................................................................................................................................ 46
Enlace Externo ................................................................................................................................................. 48
REFERENCIAS CON ID Y CLASS ....................................................................................................................... 49
Referencia por palabra clave del Elemento ................................................................................................... 49
Referenciando con el atributo ID .................................................................................................................... 50
Referenciando con el atributo CLASS ............................................................................................................. 50
NUEVOS SELECTORES EN CSS3 ...................................................................................................................... 51
Selectores por atributo ................................................................................................................................... 51
not .................................................................................................................................................................... 51
nth-child ........................................................................................................................................................... 52
¿QUE PODEMOS HACER CON CSS3?.............................................................................................................. 53
Colores Hexadecimal ....................................................................................................................................... 53
Colores RGB y modo HSV ................................................................................................................................ 54
EDICION DE TEXTO ........................................................................................................................................ 55
VEAMOS COMO TRABAJAN LOS ESTILOS ....................................................................................................... 57
Font-style ......................................................................................................................................................... 57
Font-weight ...................................................................................................................................................... 57
Text-decoration ............................................................................................................................................... 57
Text-align.......................................................................................................................................................... 57
Font-family ....................................................................................................................................................... 58
Font-size ........................................................................................................................................................... 58
ATRIBUTO BORDER ....................................................................................................................................... 59
BACKGROUND............................................................................................................................................... 60
Paso a Paso ...................................................................................................................................................... 61
POSICION FLOAT ........................................................................................................................................... 62
Disposición en bloque “block” ........................................................................................................................ 63
Vista en dos columnas usando “float”............................................................................................................ 64
PROPIEDAD MARGIN..................................................................................................................................... 65
PROPIEDAD PADDING ................................................................................................................................... 67
TEXT-ALIGN ................................................................................................................................................... 69
POSICION ABSOLUTA .................................................................................................................................... 71
PSEUDO-CLASES ............................................................................................................................................ 72
Hover: ............................................................................................................................................................... 72
Focus: ............................................................................................................................................................... 73
Active:............................................................................................................................................................... 73
NUEVOS SELECTORES.................................................................................................................................... 74
Selector por atributo: ...................................................................................................................................... 74
Not: ................................................................................................................................................................... 74
 Índice

Nth-child: ......................................................................................................................................................... 74
Existen otras variantes para el selector nth-child:......................................................................................... 75
COLUMNAS ................................................................................................................................................... 75
TEXT-STROKE ................................................................................................................................................ 76
TEXT-SHADOW .............................................................................................................................................. 76
MODELO CAJA FLEXIBLE ................................................................................................................................ 77
DEGRADADOS ............................................................................................................................................... 79
BORDES CON IMÁGENES ............................................................................................................................... 81
Pasos para añadir un borde con imagen: ....................................................................................................... 81
REFLEXIONES ................................................................................................................................................ 82
BORDES REDONDEADOS ............................................................................................................................... 83
SOMBRAS BOX SHADOW............................................................................................................................... 84
TRANSFORMACIONES ................................................................................................................................... 86
TRANSISIONES Y ANIMACIONES .................................................................................................................... 88
TRANSPARENCIAS ......................................................................................................................................... 90
JavaScript .......................................................................................................................................................... 94
INTRODUCCIÓN A JAVASCRIPT ...................................................................................................................... 94
Primer script .................................................................................................................................................... 95
COLOCAR JS CORRECTAMENTE ..................................................................................................................... 95
Código en linea ................................................................................................................................................ 96
Código embebido ............................................................................................................................................ 96
Codigo externo ................................................................................................................................................ 97
FUNCIÓN alert( ) ........................................................................................................................................... 97
COMENTARIOS.............................................................................................................................................. 98
Comentario de una línea: ................................................................................................................................ 99
Comentario de varias líneas: ........................................................................................................................... 99
DECLARACIÓN DE VARIABLES .......................................................................................................................100
Declaración explícita .....................................................................................................................................100
Declaración Implícita .....................................................................................................................................101
NOMBRES DE VARIABLES .............................................................................................................................102
VARIABLES LITERALES...................................................................................................................................102
Variables Literales..........................................................................................................................................103
Concatenaciones ...........................................................................................................................................103
Métodos y Propiedades de datos literales ...................................................................................................105
slice y substring..............................................................................................................................................105
substr..............................................................................................................................................................106
concat .............................................................................................................................................................106
toUpperCase y toLowerCase.........................................................................................................................106
SECUENCIAS DE ESCAPE ...............................................................................................................................107
COMILLAS SIMPLES Y COMILLAS DOBLES .....................................................................................................108
PUNTO Y COMA ...........................................................................................................................................109
 Índice

SENTENCIAS O EXPRESIONES .......................................................................................................................110

Como está conformada una sentencia .........................................................................................................110
Clasificación de las Sentencias ......................................................................................................................110
ESPACIOS EN BLANCO E IDENTACIÓN ..........................................................................................................111
Retorno de Carro o Salto de Línea ................................................................................................................112
PALABRAS RESERVADAS ...............................................................................................................................112
INTRODUCCIÓN A LAS FUNCIONES...............................................................................................................113
Pongamos algo en práctica ...........................................................................................................................113
Ahora analicemos el código: .........................................................................................................................114
STRICT MODE ...............................................................................................................................................115
El modo estricto es de ámbito local, esto significa que: .............................................................................115
VARIABLES NUMERICAS ...............................................................................................................................116
Funciones numéricas .....................................................................................................................................116
Constantes Numéricas ..................................................................................................................................118
Objeto Math...................................................................................................................................................118
VARIABLES BOLEANAS ..................................................................................................................................121
DATOS TIPO NULL ........................................................................................................................................121
DATOS TIPO UNDEFINED ..............................................................................................................................122
 HTML5

HTML5

INTRODUCCIÓN A HTML5

La revolución de Internet, ha venido creciendo exponencialmente en la última década. El mercado

de los dispositivos móviles inteligentes, han hecho que los programadores se pongan las pilas para
aprovechar los elementos que las nuevas tecnologías proponen, y de esta manera ser competentes
en un mundo laboral sumamente demandante.

Para el día de hoy, la Web se constituye por sitios que funcionan como verdaderas aplicaciones
dinámicas e interactivas.

Los dispositivos móviles exigen la creación de sitios pensados NO únicamente para computadoras
de escritorio, que va desde el desarrollo de sitios para escritorio, y sitios móviles, o la combinación
de ambos, como los sitios responsivos y desde luego las aplicaciones nativas o híbridas que iremos
conociendo poco a poco.

PRINCIPIOS BÁSICOS EN HTML5

Haga el código lo más limpio posible:

Código HTML debe estar limpio y fácil de leer. No debe tener ninguna característica o elemento
innecesari, y debe tener el formato de una manera que sea fácil de seguir.

Estructura independiente de diseño:

Utilice HTML para la estructura y emplee CSS para el diseño.

Evitar el uso de tablas y marcos para el diseño:

Estas técnicas fueron las mejores herramientas de los diseñadores web en un momento dado, sin
embargo, el nuevo enfoque que proporciona CSS permite un código más limpio, el cual es más fácil
de trabajar al dar una estructura visual.

Comience con código válido:

Muchas veces, una página se verá perfectamente bien, pero puede haber algún error oculto y al
mostrar el trabajo al cliente nos encontramos con inconvenientes; por eso es mejor comenzar sus
proyectos con HTML valido, también veremos como validar nuestros códigos para evitar estos
contratiempos. Posteriormente veremos como validar nuestro documento en la siguiente dirección
(http://validator. w3.org)

Declaración del Documento:

La definición del tipo de documento para HTML4 o XHTML fue realmente complicado. Incluso las
personas que impartían clases y escribieron libros sobre el tema tenían que copiar y pegar cada
vez la declaración del documento.

En HTML 5 tiene la definición del documento es sencilla y limpia, lo cual simplifica la escritura de la
páginas web de memoria.

El modo de definirla es:

<!DOCTYPE html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
6
 HTML5

¿Qué es HTML5?

HTML es un lenguaje para describir las páginas web.

HTML significa Hyper Text Markup Lenguaje
HTML es un marcado lenguaje o un lenguaje de marcado es decir, emplea etiquetas o marcas para
su sintaxis.
Las etiquetas describen el contenido del documento.
Los Documentos HTML son también llamados páginas web.

Etiquetas HTML:

Etiquetas HTML son palabras clave (nombres de etiqueta) rodeadas por corchetes angulares como
< y >.
Etiquetas HTML normalmente vienen en pares como < b> y </b>.
La primera etiqueta es la de inicio, la segunda etiqueta es la etiqueta de cierre.
La etiqueta final se escribe igual que la etiqueta inicial, con una barra diagonal antes del nombre de
la etiqueta </b>.
Etiquetas inicial y final son también llamadas etiquetas de apertura y etiquetas de cierre.

¿Por qué HTML5?

A lo largo de la evolución de HTML se fueron añadiendo cosas y quitando otras. Las especificaciones
para su sintaxis fueron variando. En HTML5 encontramos la sintesis resultante de todo este proceso
evolutivo.

HTML5 no viene a remplazar HTML4 o XHTML, en realidad se trata de un concentrado de lo mejor

da cada uno de estos estándares. Lo cual encontramos resumido en el siguiente listado:

Declaración Simple: Como vimos anteriormente, la declaración de tipo de documento era

increíblemente complicada antes de HTML5, ahora solo basta colocar al inicio del documento <html>
para que los navegadores reconozcan el tipo de estándar, es decir HTML5.

Separación del contenido y el estilo: Esta práctica ya se venía dando desde XHTML, donde la
separación del estilo (CSS3), funcionalidad (JS) y contenido (HTML5), permiten mejores prácticas
para el desarrollo de sitios web.

Soporte de Validación: La W3C pone a nuestra disposición un validador web, que permite revisar
el uso correcto del estándar HTML5.

El tradicional “Modo Estricto”: HTML5 se ajusta mas al tradicional modo estricto de XHTML, que
a HTML4, es por ello que se puede seguir teniendo un código limpio y predecible para facilitar el
desarrollo.

Nuevas Capacidades: Desde luego HTML5 a través de las nuevas funcionalidades de CSS3 y JS
propone un montón de nuevos recursos (API), que permiten el desarrollo de productos
espectaculares, desde luego nos referimos a las API’s Drag and Drop, Canvas, Web Storage,
Geolocalización, etc.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
7
 HTML5

ENTREMOS EN MATERIA

Una página básica de HTML5 es muy fácil de construir. Sólo tiene que abrir un editor de texto y
agregue el siguiente código:

<!DOCTYPE html>
<html lang = "es">
<head>
<!-- Esto es un Comentario -->
<title>Primera P&aacute;gina</title>
<meta charset = "utf-8"/>
</head>
<body>
<h1>Esto es un T&iacute;tulo H1</h1>
<p>
Esto es un P&aacute;rrafo
</p>
</body>
</html>

Editores de Texto

Para escribir una página web, solo basta tener un editor de texto, el cual puede ser desde un simple
Bloc de Notas o un editor profesional como:

Pasos para Construir una PÁGINA WEB

 Comience con el tipo de documento.

 Las versiones modernas de HTML (XHTML y HTML5) tienen un atributo especial llamado el
tipo de documento, lo que indica la forma en la que sera tratado el documento HTML5 por
los navegadores. El tipo de documento para XHTML era muy confuso, y HTML 4 no tenía
un DOCTYPE en absoluto.
 Ahora en HTML5 basta con colocar esta etiqueta: <DOCTYPE html>, la cual define el tipo
de documento.
 La definición de tipo de documento debe estar en la primera linea de su sitio Web sin
espacios o lineas que la precedan.
 Si deja esto, probablemente pueda utilizar las funciones de HTML5, pero validadores tendrán
que adivinar qué forma de HTML que está utilizando.
 Añadir la etiqueta <html>
 Esta etiqueta especial indica el comienzo de una Web.
 Lo mejor es indicar en qué idioma esta escrita la página con el atributo (lang=”es”) esto para
el caso de español.
 Los atributos se colocan dentro de la etiqueta de inicio, y constan de un nombre y un valor
separados por un “=”. El valor del atributo puede permanecer sin entrecomillado si no
contiene caracteres de espacio o cualquiera de” ‘` = < o >. De lo contrario, tiene que ser
citado con comillas simples o dobles. El valor, junto con el “=”, se puede omitir por completo
si el valor es una cadena vacía.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
8
 HTML5

 Asegúrese de tener la etiqueta </html> de cierre correspondiente en la parte inferior de la

página.
 Una buena práctica es que cada vez que abramos una etiqueta la cerremos para evitar
errores futuros (existen algunas excepciones de etiquetas nones o que no tienen par las
cuales veremos posteriormente).
 Crear un área de <head>.
 La cabeza es algo así como el compartimiento del motor de un coche.
 La gente no suele ir allí, pero hay un montón de importantes funciones que ahi se realizan.
 La cabeza <head> está vacía en este simple ejemplo, pero se llenará con JavaScript y CSS
pronto.
 Especifique el juego de caracteres.
 Si bien esto no es estrictamente necesario, se considera buena forma para que el navegador
sepa qué tipo de caracteres se utilizarán al mostrar nuestra página.
 Páginas escritas en Inglés general y en nuestro caso Español, debe utilizar UTF-8, el cual
se especifica con el siguiente código: <meta charset = UTF-8/>.
 Tabule su código.
 A los navegadores no les importa si su código contiene sangrías, pero es un muy buen hábito
para facilitar la lectura del código.
 Añadir comentarios.
 Los comentarios no son estrictamente necesarias, pero nos son de mucha utilidad para
realizar pequeñas anotaciones que nos faciliten la lectura de nuestro código.
 Comentarios en HTML empiezan con <!– y terminan con –>.
 Los comentarios pueden durar varias líneas.
 Poner en un título con <title> y </title>.
 Esta etiqueta permite especificar un título de su página.
 El título lo general aparece en la barra de título del navegador Web, y También suele
aparecer en los resultados del motor de búsqueda para tu página.
 Incluya la mayor parte de la página en las etiquetas <body>.
 Si el área de la cabeza es la del compartimiento del motor, el cuerpo es el espacio para los
pasajeros.
 El cuerpo tendera la parte visible de la página web.
 La etiqueta </body> suele ser justo antes de la etiqueta </html>, y después de la etiqueta
<head>.
 Utilice etiquetas de encabezado para describir su esquema.
 La etiqueta <h1> es un ejemplo de un encabezado.
 Todas las etiquetas de título comienzan con h seguido de un número que indica su jerarquía.
 Los niveles de encabezado van desde el h1 hasta el h6.
 Coloque la mayor parte del texto en párrafos.
 Aunque HTML no requiere el uso de etiquetas de párrafo para colocar texto, siguen siendo
una muy buena idea que coloque cada párrafo dentro de <p> y </p>
 Guarde el archivo con la extensión html.
 Asegúrese de guardar el archivo con la extensión (.html).

INSERTAR IMÁGENES

Código para insertar IMÁGENES:

1. <!DOCTYPE html>
2. <html lang = "es">
3. <head>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
9
 HTML5

4. <title>Inserción de Imágenes</title>
5. <meta charset = "UTF-8" />
6. </head>
7. <body>
8. <h1>Imagen de Muestra</h1>
9. <p>
10. <img src = "codigoaccion.jpg" alt = "Imagen de Código Acción" />
11. </p>
12. </body>
13. </html>

Para este código, debe tener una imagen guardada en la dirección donde esta alojada su página.
En este ejemplo la imagen se llama (codigoaccion) y su extensión es (.jpg)
Cuando tenemos mas de una imagen en nuestro sitio, es una buena práctica tenerlas almacenadas
en una carpeta específica, generalmente llamada (img).
Para indicarle al navegador que entre a una determinada carpeta, se pone el nombre de la carpeta
antes del nombre de la imagen.

Pasos para Añadir IMÁGENES:

 Identificar la imagen que desea utilizar. Por supuesto, usted tiene que tener acceso a la
imagen antes de poder utilizarlo. Asegúrese de que tiene permiso para poder utilizar la
imagen en su sitio.
 Modificar la imagen si es necesario. Es posible que necesite ajustar la imagen para su uso
en la página. Lo mejor es cambiar el tamaño de las imágenes antes de que se utilicen en la
Web.
 Elija el tipo de imagen. Los Navegadores Web pueden mostrar .jpg .gif y .png. Si la imagen
está en otro formato, es mejor que busque un editor de imágens que le permita convertir la
imagen a alguno de estos tipos
 Ponga su imagen en el lugar correcto. El archivo de imagen debe estar en el mismo directorio
que el archivo HTML. De esta manera, al publicar su página en el servidor, la imagen
permanecerá en su lugar.
 Construye tu página de forma normal. La imagen se coloca con una etiqueta integrada en el
cuerpo.
 Utilice la etiqueta <img> para indicar la imagen. Esta etiqueta debe ser incorporada dentro
de un párrafo o div para no tener problemas en la validación.
 Utilice el atributo src para indicar el archivo que contiene la imagen. Si el archivo de la imagen
está en el mismo directorio que la página Web, todo lo que necesita es el nombre de la
imagen, si esta en una carpeta, nombre la carpeta como se muestra en el ejemplo y si el
archivo de la imagen está en otra parte de Internet, puede utilizar la URL completa que posee
la imagen

 Para entrar a una carpeta independiente llamada (img) se separa el nombre de la carpeta y
el nombre de la imagen por una barra diagonal.
1. <img src = "img/programandoLaNet.jpg" alt = "Imagen de Programando la
Net" />
 Para el URL absoluto de una imágen puede emplear el siguiente código
2. <img src="http://sphotos-a.ak.fbcdn.net/hphotos-ak-
prn1/1017226_376510372450536_1759984972_n.jpg" alt = "Imagen de
Programando la Net" />

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
10
 HTML5

 Incluya el atributo alt: El atributo alt contiene texto que describe la imagen y mejora su
posicionaminto.
 Poner fin a la etiqueta de imagen con un /. La etiqueta img es una etiqueta especial que no
posee una etiqueta de cierre. El carácter de barra al final de la etiqueta indica que la etiqueta
es impar y sirve como su propia etiqueta final.

VÍNCULOS

Los hipervínculos son más de lo que parecen. Ellos muestran el texto en la página, pero cuando el
usuario hace clic en el texto, el navegador carga una página diferente en el Internet.

Codigo para Añadir o Crear VÍNCULOS

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>Vinculos || links</title>
5. <meta charset = "utf-8" />
6. </head>
7. <body>
8. <h1>Crear Vínculos</h1>
9. <h2>Vínculo Relativo a una Imagen</h2>
10. <p>
11. Este es el texto que vincula con la imagen del logo del Colegio al dar <a href =
"img/ceytem.jpg">clic aqui</a>
12. </p>
13. <h2>Vínculo Absoluto a una URL</h2>
14. <p>
15. Este vínculo, los envia a la
<a href ="http://www.facebook.com/ProfrAllan">Página de Facebook de Profr.
Allan</a>
16. </p>
17. </body>
</html>

Para este ejemplo, necesita tener una imagen contenida en una carpeta llamada (img) dentro del
directorio donde se encuentra su documento html.
En el caso del segundo Vínculo, los dirige a mi página de Facebook, de paso me agregan.

Pasos para crear hipervínculos:

 Comience con una página normal. Los enlaces, generalmente son integrados directamente
en su página.
 Utilice la etiqueta <a> para indicar un enlace. La “A” proviene de su definición en ingles
anchorque significa ancla.
 Utilizar el atributo href (hypertext reference).

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
11
 HTML5

 El href puede ser relativo o absoluto

 Relativo: El href puede ser un simple nombre.
1. Si se vincula a un archivo que esté en el mismo directorio que la página Web, usted
puede simplemente indicar el nombre del archivo.
2. Esto se conoce como una referencia relativa debido a que el navegador asume que
el archivo vinculado está en el directorio actual.
3. En el primer ejemplo, el vinculo de la imagen apunta hacia una carpeta llamada
(img), que esta dentro del directorio y después a la imagen llamada (cecytem.jpg).
 Absoluto: El href también puede ser una dirección Web completa.
1. Si lo prefiere, usted puede dar toda la dirección de un sitio Web.
2. Esto se conoce como referencia absoluta, ya que explica cómo encontrar el
archivo, independientemente de la ubicación de la página actual.
3. Coloque el texto que será visible en el cuerpo entre la etiqueta <a> y </ a>.
Cualquier texto que aparece entre las etiquetas <a> y </ a> etiquetas se
mostrarán en la pantalla en un formato predefinido que lo indica como un
enlace.

El formato por defecto de un enlace es texto azul subrayado, pero usted encontrar la manera de
cambiar eso haciendo uso de CSS3 posteriormente.

LISTAS

Las páginas son a menudo acerca de datos, y los datos se organizan con frecuencia en las listas.

Codigo para crear LISTAS:

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>Listas</title>
5. <meta charset = "utf-8" />
6. </head>
7. <body>
8. <h2>Idiomas</h2>
9. <ul>
10. <li>Español</li>
11. <li>Ingles</li>
12. <li>Ruso</li>
13. </ul>
14. <h2>Listas Ordenadas</h2>
15. <ol>
16. <li>Uno</li>

17. <li>Dos</li>
18. <li>Tres</li>
19. </ol>
20. <h2>Lista sobre otra lista</h2>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
12
 HTML5

21. <ul>
22. <li>Español
23. <ol>
24. <li>uno</li>
25. <li>dos</li>
26. <li>tres</li>
27. </ol>
28. </li>
29. <li>Japanese
30. <ol>
31. <li>ichi</li>
32. <li>ni</li>
33. <li>san</li>
34. </ol>
35. </li>
36. </ul>
37. </body>
38. </html>

Pasos para cobtruir una LISTA:

Las listas, como la mayoría de los elementos HTML, son muy fáciles de construir.
 Designar al principio de la lista con <ul> o <ol>.
 La etiqueta <ul> indica una (única) lista desordenada, la cual aparece con viñetas
 La etiqueta <ol> se utiliza para describir una lista ordenada.
 Cuando se utiliza CSS para dar esilo a las listas, se pueden tener muchos tipos diferentes
de marcas, incluyendo números, Números romanos, viñetas, o gráficos personalizados.
 Marque cada elemento con una <li> </ li> par.
 La etiqueta <li> se utiliza para indicar un elemento de la lista. Todos los elementos de la lista
deben estar incluidos en los elementos <li>. (Opcional) Una lista dentro de otra lista.
 El <li> de una lista puede contener toda una lista nueva. Esta es la técnica utilizada para
construir las listas anidadas en el último ejemplo. Sólo asegúrese de cerrar una lista antes
de iniciar una nueva. Tabulación adecuada, ayuda a mantener un registro de lo que está
anidado.

TABLAS

Codigo para crear TABLAS:

1. <!DOCTYPE HTML>
2. <html lang = "en">
3. <head>
4. <title>Tabla</title>
5. <meta charset = "UTF-8" />
6. <style>
7. table, td, th {

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
13
 HTML5

8. border: 1px solid black;

9. }
10. </style>
11. </head>
12. <body>
13. <h1>Ejemplo de Tabla</h1>
14. <h2>HTML Superheroes</h2>
15. <table>
16. <tr>
17. <th>Hero</th>
18. <th>Power</th>
19. <th>Nemesis</th>
20. </tr>
21. <tr>
22. <td>The XMLator</td>
23. <td>Standards compliance</td>
24. <td>Sloppy Code Boy</td>
25. </tr>
26. <tr>
27. <td>Captain CSS</td>
28. <td>Superlayout</td>
29. <td>Lord Deprecated</td>
30. </tr>
31. <tr>
32. <td>Browser Woman</td>
33. <td>Megacompatibility</td>
34. <td>Ugly Code Monster</td>
35. </tr>
36. </table>
37. </body>
38. </html>

Pasos para crear tablas:

Al examinar el código, se puede ver que una tabla, es simplemente un conjunto etiquetas anidadas.
 Planifique su primera tabla.
1. Es mucho más fácil construir una tabla en HTML si ya sabemos cómo va a estar
estructurada. Usted debe saber cuántas columnas tendrá, y qué filas o columnas
serán titulares.
2. Es una buena idea esbozar su tabla en papel si no está seguro de estas cosas.
 Comience la tabla con la etiqueta <table>.
1. La etiqueta <table> y </ table> par, encierra toda la tabla.
 Crear un registro de la tabla con <tr>.
1. La tabla se define con una serie de filas. Utilice la <tr> </ tr> par, para encerrar
cada fila de datos.
 Coloque los elementos titulares de la tabla entre las etiquetas <th> y </th>.
1. A menudo, la fila superior contendrá los encabezados, (a veces la columna
izquierda también lo hará).

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
14
 HTML5

2. Utilice las etiquetas <th> y </th> par, para indicar que texto debe ser tratado
como una celda de encabezado.
3. Por defecto, el texto de estas columnas aparecen centradas y en negritas, pero
eso se puede cambiar con CSS.
 Especifique las celdas de datos comunes con las etiquetas <td> y </td>.
1. El <td> </ td> par, se utiliza para especificar una celda de datos ordinaria. La
mayoría de las células de la tabla se especifica mediante etiquetas td.
 Mantener el número de céldas consistente.
1. Cada fila debe tener el mismo número de columnas. (Aunque hay técnicas que
permiten ampliar una columna, lo cual veremos posteriormente)
 Añadir CSS según sea necesario.
1. Tablas tienen un formato básico, pero como de costumbre, usted puede cambiar
las cosas con CSS.
 He añadido estilos para el borde de este ejemplo, aunque es muy básico.
 No utilice tablas para maquetar.

Las primeras versiones de HTML no tenían suficiente apoyo para el diseño (creación de columnas y
diseño de página). Antiguamente los diseñadores empleaban las tablas para dar una determinada
estructura, lo cual ya no es un recurso eficiente ni pensable en la práctica profesional.

FORMULARIOS

Desde sus inicios las páginas web han tenido la capacidad de recopilar datos de los usuarios. HTML5
tiene un conjunto estándar bastante útiles para esta tarea. No se puede hacer nada con los datos en
HTML plano, pero de esto nos ocuparemos después con JavaScript y PHP.

Codigo para crear FORMULARIOS:

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>Formulario</title>
5. <meta charset = "utf-8" />
6. </head>
7. <body>
8. <h1>Ejemplo de Formulario</h1>
9. <form>
10. <fieldset>

11. <legend>Introducir Texto</legend>

12. <p>
13. <label>Caja de Texto</label>
14. <input type = "text" id = "myText" value = "text here" />
15. </p>
16. <p>
17. <label>Password</label>
18. <input type = "password" id = "myPwd" value = "secret" />
19. </p>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
15
 HTML5

20. <p>
21. <label>Área de Texto</label>
22. <textarea id = "myTextArea" rows = "3" cols = "80">Introduce tu texto
aquí...</textarea>
23. </p>
24. </fieldset>
25. <fieldset>
26. <legend>Selectores</legend>
27. <p>
28. <label>Lista de Opciones</label>
29. <select id = "myList">
30. <option value = "1">uno</option>
31. <option value = "2">dos</option>
32. <option value = "3">tres</option>
33. <option value = "4">cuatro</option>
34. </select>
35. </p>
36. <p>
37. <label>Casillas de verificación</label>
38. <input type = "checkbox" id = "chksi" value = "si" />
39. <label for = "chksi">SI</label>
40. <input type = "checkbox" id = "chkno" value = "no" />
41. <label for = "chkno">NO</label>
42. </p>
43. <p>
44. <label>Botones en Radio</label>
45. <input type = "radio" name = "btn_1" id = "opn_si" value = "Si" checked =
"checked" />
46. <label for = "sizeSmall">Si</label>
47. <input type = "radio" name = "btn_1" id = "opn_talvez" value = "Tal vez" />
48. <label for = "sizeMed">Tal vez</label>
49. <input type = "radio" name = "btn_1" id = "opn_no" value = "No" />
50. <label for = "sizeLarge">No</label>
51. </p>
52. </fieldset>
53. <fieldset>
54. <legend>Botones</legend>
55. <p>
56. <button type = "button">Boton Estandar</button>
57. <input type = "button" value = "Boton-X" />
58. <input type = "reset" />
59. <input type = "submit" />
60. </p>
61. </fieldset>
62. </form>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
16
 HTML5

63. </body>
64. </html>
Como puede ver, los elementos de formulario siguen muchas de las mismas reglas que hemos visto
hasta ahora, pero, para las etiquetas de los formularios, hay algunas diferencias.
Veamos las etiquetas que se emplean generalmente para la construcción de formularios:
 <form>: La etiqueta <form> es la etiqueta que contiene el formulario. La etiqueta <form>
también debe incluir el atributo (action = “”), esto le indica al navegador que no va a llamar a
un script del lado del servidor cuando se envía el formulario. Este atributo lo veremos
específicamente mas adelante.
 <fieldset>: Esta es una etiqueta especial que le permite agrupar una serie de elementos de
un formulario. No es necesario, pero puede hacer que las formas mas complejas de
formularios sean más fáciles de navegar. Por defecto, un fieldset tiene un borde a su
alrededor, pero usted puede cambiar esto con CSS. Generalmente esta se ocupa junto con
<legend>.
 <legend>: Sirve para colocar una leyenda en nuestro capo de <fieldset>. Esto le permite dar
información extra sobre el formulario.
1. <form action = "">
2. <fieldset>
3. <legend>Mi Formulario</legend>
4. <input type = "" id = ""/>
5. </fieldset>
6. </form>
 <label>: La etiqueta <label> define una etiqueta para un elemento <input>.

El fieldset, legend, y label no son necesarios, y francamente, no se utilizaron mucho en las formas
anteriores de HTML. Estas etiquetas se utilizan con mayor frecuencia en XHTML y HTML5, donde
el uso de tablas para organizar la distribución física de la página no se recomienda.
Estas etiquetas ayudan a organizar la página de modo que es más fácil para diseñar con CSS.
El uso adecuado de estas etiquetas y CSS a menudo hace que sus formularios sean mucho más
fácil de trabajar que los hacks basados en tablas.

Comencemos estudiando los principales elementos de los formularios:

Entradas de texto “TEXT INPUT”

Muchos de los elementos del formulario se basan en la etiqueta de entrada.

Atributo (type = ” “): El atributo (type) se utiliza para determinar qué tipo de elemento se creara en la
página. Por el momento, el elemento de entrada”<input>” más común es el cuadro de texto básico.
Su código es el siguiente:

1. <input id="myText" type="text" value="text here" />

Pasos para construir la entrada de Texto “Text Inputs”

 Crear un elemento de entrada “<input>”. La etiqueta <input> crea la estructura general del
elemento.
 Ajuste el tipo de “texto” (type). Esto indica que usted está construyendo un elemento de texto
estándar, no algo más elaborado.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
17
 HTML5

 Añadir un atributo id. El atributo id le permite nombrar el elemento. Esto será muy importante
a la hora de agregar JavaScript a la página, ya el código JavaScript utiliza el ID para extraer
los datos del formulario.
 Añadir los datos por defecto. Usted puede agregar los datos por defecto si lo desea,
utilizando el atributo (value). Cualquier texto que se coloca en el valor se convertirá en el
valor predeterminado del formulario.
El elemento de texto coloca una pequeña caja en la pantalla. Cuando el usuario selecciona la caja
de texto, permite que introduzca texto al formulario.
Por supuesto, si usted quiere hacer algo con este texto, tendrá que escribir algún código con JS que
posteriormente veamos. Recuerde que HTML solo da la estructura y el funcionamiento se lo daremos
con JS.

Crear un campo PASSWORD:

Para crear nuestro campo de Password debemos emplear el siguiente código:

<input type = "password" id = "myPwd" value = "secret" />

Pasos para crear campo PASSWORD:

1. El elemento de entrada “<input>” estándar tiene una prima que se utiliza a veces, llamada
password o contraseña.
2. El código de la contraseña se parece mucho al código de una entrada estándar elemento.
3. El campo de la contraseña es muy similar al campo de texto normal, pero tiene una diferencia
primaria. Cuando el usuario escribe datos en el campo de texto, el contenido del campo se
sustituye por asteriscos.
4. Esto evita que los secuaces del mal, al mirar sobre sus hombros pueda descubrir su
contraseña.
5. El campo de contraseña no proporciona ninguna seguridad real. Cuando se utiliza para
enviar una petición a un servidor web, esa solicitud se envía normalmente en la URL, donde
los secuaces del mal estarán seguros de encontrarla. Para fines de seguridad y de mantener
nuestros secretos guardados emplearemos unos trucos diferentes que posteriormente
veremos.

Crear caja de texto multilinea “TEXTAREA”

A veces tendrás la posibilidad de introducir varias líneas de texto. El área de texto es perfecto para
esta situación. Su sintaxis es un poco diferente del elemento de entrada que has visto hasta ahora.

Código para crear caja de texto “TEXTAREA”:

1. <textarea id = "miTextArea" rows = "4" cols = "100">Tu texto Aquí</textarea>

Pasos para crear el “TEXTAREA”:

1. Comience con la etiqueta <textarea>. Esta etiqueta indica el comienzo de una caja multilínea
de texto.
2. Especifique el número de filas mediante el atributo (rows = ” “). Este atributo especifica el
largo de la caja
3. Indique el número de columnas mediante el atributo (cols =” “). El número de columnas
especifica en ancho (en caracteres) del cuadro de texto.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
18
 HTML5

Crear una LISTA DESPLEGABLE

 Las listas desplegables son una característica común en las páginas Web ya que son
agradables y permite al programador especificar una serie de opciones además de no
requerir una gran cantidad de espacio en pantalla.
 Las opciones son visibles sólo cuando el usuario los selecciona.
 Al tener opciones limitadas, hace que la respuesta sea más simple de analizar.
 Cuando se permite que el usuario escriba información en un formulario, puede ser muy difícil
comprobar todas las cosas locas que el usuario puede introducir. Con una lista de opciones,
que ya ha predeterminado todas las respuestas posibles. Hay menos probabilidad de que
algo pueda salir mal.
 En HTML / XHTML, las listas desplegables se crean con dos tipos de objetos.
 La estructura general utiliza las etiquetas <select>, mientras que cada una de las posibles
opciones tiene su propia etiqueta llamada <option>.

Codigo para crear una LISTA DESPLEGABLE:

1. <select id = "miLista">
2. <option value = "1">uno</option>
3. <option value = "2">dos</option>
4. <option value = "3">tres</option>
5. <option value = "4">cuatro</option>
6. </select>

Pasos para crear una LISTA DEPLEGABLE:

1. Crear el elemento <select> primero. El contenedor de la lista será un elemento SELECT. La

lista completa está encerrada en el <select> </ select> par.
2. Dar al elemento select una identificación. Usted utilizará este ID para hacer referencia al
elemento en el código.
3. Añadir un elemento de opción para el elemento select.
4. Dé a cada etiqueta de opción un valor. El valor será la respuesta enviada a un programa
cuando el usuario elige una opción. El usuario no verá necesariamente el valor.
5. Indica el texto que verá el usuario. El texto que el usuario verá para la opción que va entre
la etiqueta <option> y </ option>. Esto puede ser diferente al valor que enviaremos al
programa (JS, PHP, etc.), o el mismo.
6. Añadir tantas opciones como desee.

Crear CAJA DE VERIFICACIÓN

A veces se tiene algún tipo de información que puede ser verdadera o falsa. El elemento de casilla
es perfecto para este tipo de entrada ya que el usuario puede hacer clic para activar o desactivar la
opción. Las casillas de verificación son otra variante de la versatilidad de etiqueta en HTML5.

Código para crear una CAJA DE VERIFICACIÓN:

1. <p>
2. <label>Casillas de verificación</label>
3. <input type = "checkbox" id = "chksi" value = "si" />
4. <label for = "chksi">SI</label>
5. <input type = "checkbox" id = "chkno" value = "no" />
6. <label for = "chkno">NO</label>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
19
 HTML5

7. </p>

Pasos para crear una CAJA DE VERIFICACIÓN:

1. Comience con un elemento de entrada “<input>”. Las casillas de verificación son sólo otra
forma de elementos de entrada.
2. Establezca el atributo (type). Esto aclara que el elemento de entrada será una casilla de
verificación.
3. Dale al elemento un identificador (id). Al igual que todos los elementos del formulario, tendrá
un campo de identificación para que su código pueda trabajarse directamente con el
elemento.
4. Especifique un valor. Se puede asignar un valor a una casilla de verificación. El usuario no
verá el valor.
5. Agregar una etiqueta <label>. Las casillas necesitan tener una etiqueta asociada a ellas,
para que el usuario entienda de que se trata la casilla. La etiqueta de una casilla de
verificación se aplica generalmente a la derecha de la casilla de verificación.
6. Agregue el atributo (for) a la etiqueta. La etiqueta tiene un atributo especial llamado (for),
que le permite especificar qué elemento de entrada corresponde a la casilla.
7. Coloque el valor del id de la casilla de verificación a este atributo de la etiqueta, esto será
útil para casillas de verificación, debido a que en la mayoría de los navegadores el usuario
puede hacer clic en cualquiera de las etiquetas o en la casilla de verificación para activar la
selección.
Asociar la marca a la casilla de verificación le da al usuario un blanco más grande para poder hacer
clic, y hace que sea una forma más fácil de usar.

Crear un campo de opción “BOTON DE RADIO”

En la superficie, los botones de radio se parecen mucho a las casillas de verificación, pero son
diferentes en varios aspectos.
Los botones de opción se colocan sólo en grupos. Usted puede tener una sola casilla de verificación
en un formulario, como vimos en el ejemplo anterior, pero los botones de radio o de opción sólo
tienen sentido cuando se colocan en grupos.
Se selecciona solo un elemento de un grupo de opciones. En un grupo de botones de radio, al
seleccionar un botón se anula la selección de los demás. Es como una radio de coche, donde
haciendo clic en uno de los botones de memorización anula la selección de los demás.
Siempre debe haber un elemento seleccionado. Cuando se construye un campo de opción, siempre
se debe hacer que un elemento del grupo esté seleccionado. De lo contrario podría ocasionar
problemas cuando empleamos JS.
La identificación (id) de cada botón de radio sigue siendo único. Cada Identificación en una página
Web debe ser único, y los elementos de identificación de cada botón de opción seguirán el mismo
principio.
Cada elemento de radio también tiene un atributo de nombre (name). Se utiliza el atributo de nombre
para especificar todas las casillas de opciones que pertenecen al mismo grupo
Todos los botones de opción de un grupo tienen el mismo nombre. HTML utiliza el nombre del
atributo para averiguar que botón de un grupo esta seleccionado y solo permitir que se seleccione
una sola opción.

Codigo para crear un elemento de opción o “BOTON DE RADIO”:

1. <p>
2. <label>Botones en Radio</label>
3. <input type = "radio" name = "btn_1" id = "opn_si" value = "Si" checked = "checked"
/>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
20
 HTML5

4. <label for = "sizeSmall">Si</label>

5. <input type = "radio" name = "btn_1" id = "opn_talvez" value = "Tal vez" />
6. <label for = "sizeMed">Tal vez</label>
7. <input type = "radio" name = "btn_1" id = "opn_no" value = "No" />
8. <label for = "sizeLarge">No</label>
9. </p>

Pasos para crear un elemento de opción o “BOTON DE RADIO”:

1. Empiece por crear un elemento de entrada “<input>”. Como de costumbre, el elemento de

entrada proporciona el fundamento básico.
2. Ajuste el tipo de radio. Utilice el atributo de tipo (type) para formar botones de radio.
3. Dé a cada elemento un identificador único (id). Como es habitual, aplicar un identificador
único para cada botón de radio.
4. Dar a todos los botones de un mismo grupo el mismo nombre en el atributo (name =” “)
nombre. Utilice el atributo de nombre (name) para identificar los botones de un mismo grupo.
5. Considere la posibilidad de agrupación visual. El usuario no será capaz de decir qué botones
son parte de un grupo. Puede ser que sea mejor utilizar fieldsets u otros trucos de formato
para ayudar al usuario a saber qué botones se encuentran en un mismo grupo. Todos los
botones de un grupo deben estar físicamente cerca uno del otro.
6. Hacer que uno de los botones este seleccionado con el atributo (checked = “checked”) de
forma predeterminada.

BOTONES DE ACCION:

Uno de los elementos más críticos en el formulario es el botón omnipresente. Hay tres principales
tipos de botones:

Botón Estandar: un botón estándar sólo se parece a un botón. Estos botones por lo general se utilizan
en la programación de JavaScript para activar algún tipo de acción en el cliente.
Botón Enviar: Este botón se utiliza normalmente en la programación del lado del servidor. Se envasa
de todos los datos en el formulario y lo envía a un programa que vive en un servidor web remoto
para ocupar los datos.

Botón Reset: Este tipo botón especial tiene una función de comportamiento. Cuando el usuario hace
clic en un botón de reset, todos los datos en el formulario se restablecen a sus valores
predeterminados originales.

Construcción de los BOTONES:

1. <input type = "button" value = "Boton de Input" />

Cuando se utiliza de esta manera, el valor de la propiedad se convierte en la etiqueta del botón, y la
propiedad type indica el tipo de botón que tiene la intención de construir.
No es necesario añadir una etiqueta a un botón porque la etiqueta está implícita.
Esta es la forma original de crear los botones en HTML, y es todavía comúnmente utilizada. Pero los
botones no se utilizan realmente para la entrada, sino que son utilizados para especificar que el
usuario quiere hacer algo. Por esa razón, una nueva sintaxis del botón ha evolucionado a:

1. <button type = "button"> Botón Estándar</button>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
21
 HTML5

Esta sintaxis introduce una etiqueta de botón con inicio y fin. El atributo de tipo se utiliza para indicar
el tipo de botón que desee utilizar. El valor predeterminado es “Enviar” o “Submit”, utilizado
principalmente en el desarrollo del lado del servidor, que no es el foco de este curso. El texto dentro
del botón indica el texto impreso en el botón.

NUEVOS ELEMENTOS EN FORMULARIOS HTML5

Elemento datalist

El elemento <datalist>, permite al desarrollador colocar una lista de sugerencias para un elemento
“input”, de tal manera que cuando el usuario coloque texto en el campo, las sugerencias aparezcan
y el pueda elegir una de ellas.

1. <label for = "listaTxt">Nombre del Curso

2. <input type = "text" list = "nombres" id = "listaTxt"/>
3. <datalist id = "nombres">
4. <option value = "HTML5">
5. <option value = "JavaScript">
6. <option value = "PHP y MySQL">
7. </datalist>
8. </label>

Elemento keygen

El elemento <keygen></keygen>, cifra algún dato para subirlo al servidor. Aunque podría parecer un
método de seguridad, es aun un tema muy debatido donde algunos expertos señalan que este
método de encriptación es poco seguro. Incluso la permanencia de <keygen></keygen> dentro del
estándar de HTML5 es dudosa.

1. <label for = "key">keygen

2. <keygen id = "key" keytype = "rsa" challenge = "variablePublica" />
3. </label>

Este elemento recibe dos parámetros:

1. kaytype: Especifica el tipo de encriptación, (“rsa” es la especificación estándar).

2. challenge: Es la cadena que pasara con la dirección pública, generalmente es especificada
por el servidor.

Elemento meter

El elemento <meter> indica un valor numérico que está comprendido en un rango. La etiqueta meter
se emplea para indicar el valor de salida de un número.

1. <p>
2. A
3. <meter min = "0" max = "10" value = "7"></meter>
4. </p>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
22
 HTML5

El elemento meter soporta una serie de atributos:

 value: Indica la representación numérica de manera gráfica de la etiqueta meter.

 max: Representa el valor máximo que puede contener la etiqueta meter
 min: Indica el mínimo valor posible.
 high: si el valor se puede definir como un rango, el atributo high representa el fin mas alto de
dicho rango.
 low: si el valor se puede definir como un rango, el atributo low representa el fin mas bajo de
dicho rango.
 optimum: Representa el valor óptimo para dicho elemento.

Tenga en cuenta que el valor de la etiqueta meter, posteriormente lo podremos cambiar

dinámicamente con JavaScript.

Elemento output

El elemento, representa el resultado de un cálculo numérico realizado a través de un script. Le

podremos dar otros usos, cuando queramos imprimir un dato en pantalla, a modo de respuesta tras
el evento de un usuario.

1. <form onsubmit="return false" oninput="res.value =parseInt(op1.value) *

parseInt(op2.value)">
2. <input name="op1" type="number" step="any"> x
3. <input name="op2" type="number" step="any"> =
4. <output name="res" for “op1 op2”></output>
5. </form>
Los atributos específicos de esta etiqueta son:

 Name: asigna un nombre al elemento output.

 Form: asocia este elemento con el formulario en el cual está incluido. Esto permite que
podamos (si queremos) situar el elemento fuera del formulario asociado.
 For: Indicamos una lista los IDs de los elementos que entran en el cálculo, esto establece
una relación entre el resultado del cálculo y los elementos del mismo.

Por el momento me interesa que usted vea el funcionamiento de la etiqueta, no se desespere en

querer entrar de lleno a código y todo eso, paso a paso iremos conociendo muchas cosas que serán
muy interesantes pero difíciles de entender sino conocemos bien las bases.

Elemento Progress

Elemento progress Indica que tanto de una tarea se ha completado (generalmente en términos de
porcentaje).

1. <p>Proceso de Descarga:
2. <progress value = "25" max = "100"></progress>
3. </p>
Desde luego posteriormente se le puede dar dinamismo a través de JavaScript.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
23
 HTML5

NUEVOS ATRIBUTOS

Así como existen nuevas etiquetas en el formulario, en el estándar de HTML5 se especifican una
serie de atributos que prometen facilitar en gran medida el desarrollo de formularios.

Atributo autofocus
Este atributo, se puede aplicar a cualquier elemento del formulario. El elemento que contenga este
atributo, será enfocado automáticamente.
Es común en la práctica que este atributo se coloque al primer elemento del formulario. Por obvias
razones este elemento solo se debe aplicar a un solo elemento.

1. <fieldset>
2. <legend>Atributo "autofocus"</legend>
3. <form action = "">
4. <label>Nombre:
5. <input type = "text" autofocus />
6. </label>
7. <label>Email:
8. <input type = "email">
9. </label>
10. </form>
11. </fieldset>
Cuando corra el siguiente código, vera como en automático se coloca la barra del cursor sobre el
campo que corresponde al nombre.

Atributo pattern

El atributo “pattern”, permite especificar un conjunto de reglas usando expresiones regulares para
validar el ingreso de un dato.
Cuando nosotros queremos que el usuario ingrese un dato bajo un determinado formato hacemos
uso de este atributo para especificar la validez, de lo contrario dependiendo el navegador aparecerá
una alerta.

1. <fieldset>
2. <legend>Atributo "pattern" Número de Telefono</legend>
3. <form action="">
4. <input type = "text" id = "txtNumero" pattern = "(d{3}) +d{3}-d{4}" title = "(722)
123-4567" />
5. <input type="submit">
6. </form>
7. </fieldset>
Como puede observar, en el código anterior, se ha empleado el atributo “title”, el cual sirve para
indicar el tipo de dato que se desea ingresar. Ademas se puede incluir instrucciones sobre como
colocar el dato correctamente.

Atributo placeholder

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
24
 HTML5

Este atributo sirve para colocar un valor temporal al campo de texto (input), en el momento en el que
él usuario active el campo, el texto que colocamos desaparecerá automáticamente.

1. <form>
2. <input type = "text" placeholder = "Mi Nombre" />
3. </form>
Este atributo se puede emplear, junto con el atributo “pattern” indicar la correcta sintaxis que
deseamos para un determinado campo.

Atributo required

Permite especificar un campo como obligatorio (el famoso campo con los asteriscos), de esta manera
el formulario no podrá ser enviado hasta que el usuario complete todos los campos.

1. <input type = "text" required />

Validación

Uno de los pasos mas laboriosos a la hora de realizar un formulario, es la validación de campos con
la finalidad de confirmar que el usuario ha ingresado los campos que deseamos y en el formato que
lo deseamos. Para esta tarea, generalmente se hace uso e JavaScript, sin embargo la visión que
propone HTML5, vislumbra un alivio para esta tarea, aunque aun nos enfrentamos al asunto de
compatibilidad con algunos navegadores, este atributo promete ser de gran utilidad para los
programadores. Para indicarle al usuario que algún campo no fue introducido de manera adecuada,
hacemos uso de CSS para indicarle, y el navegador hará el resto.

1. :invalid {
2. background-color: red;
3. }
Cuando esté este estilo presente en nuestro sitio, cualquier campo que el navegador detecte como
invalido le aplicará este formato. Si usted desea que este atributo no esté presente en algún campo,
basta con colocar el atributo “novalidate” al elemento.

DIFERENTES TIPOS DE INPUT “INPUT TYPES”

La intención de estos campos es la de proveer mayor flexibilidad a los formularios. Lo que a su vez
genera una gama bastante nutrida para la interfaz de los formularios.

color

Permite al usuario escoger un color, los diferentes navegadores despliegan un formato diferente para
escoger el color, aunque el más común es la típica paleta donde se muestran las diferentes gamas
de colores.

1. <fieldset>
2. <legend>Nuevos Elementos Input "color"</legend>
3. <form action="">
4. <input type="color" id = "color" />
5. </form>
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ
DESARROLLO DE APLICACIONES WEB
25
 HTML5

6. </fieldset>

date

Se utiliza este elemento, para pedirle al usuario que introduzca una fecha.
En navegadores como Opera y Chrome se despliega un cuadro de texto con una flecha que permite
desglosar un calendario, mientras que otros como Mozilla muestran un cuadro de texto básico,
esperemos pronto se torne universal estas características.

1. <fieldset>
2. <legend>Nuevo Elemento Input "date"</legend>
3. <form action="">
4. <input type="date" id = "date" />
5. </form>
6. </fieldset>

datetime

El elemento “datetime” combina los elementos “date” y “time” en un solo elemento.

1. <fieldset>
2. <legend>Nuevo Elemento Input "datetime"</legend>
3. <form action="">
4. <input type="datetime" id = "datetime" />
5. </form>
6. </fieldset>
En algunos navegadores se muestra un simple campo de texto, mientras que en otro se muestra un
calendario desplegable para introducir la fecha y un campo con formato para introducir la hora.

El formato oficial que recibe el elemento “datetime” es:

yyyy-mm-ddThh:mm+ff:gg

Donde cada caracter representa:

 yyyy: Los cuatro dígitos del año

 -: El caracter de guión, el cual debe colocarse entre año y mes, y mes y día.
 mm: Los dos dígitos del mes
 dd- Los dos dígitos del día
 T: La letra en mayúscula “T” representa el inicio de la parte correspondiente a la hora
 hh: Indica los dos dígitos de la hora en formato de 24hrs. (00:00 a 23:59)
 : : El caracter de los dos puntos indica la separación entre las horas y los minutos
 mm: Los dos dígitos de los minutos
 +/-/Z: El ajuste de Zona Horaria se especifica mediante el uso de la letra mayúscula “Z” (esto
si el tiempo corresponde a la zona de Zulu o GMT) o con las expresiones +/- si se trata de
otra zona horaria.
 ff: Si la zona horaria no corresponde al tiempo de Zulu, este indica el ajuste de horario de
GMT
 gg: Número de minutos que se ajustan a la zona horaria, normalmente este valor es de “00”
pero es posible que se haga un ajuste de 15, 30 o 45 minutos.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
26
 HTML5

Si el usuario ocupa un navegador que valida este campo, el formato tendría que ser este, ya que la
mayoría de los programas que gestionan estos datos para procesarlos y emitir un resultado, ocupan
esta disposición para el proceso.

datetime-local

El elemento “datetime-local” es igual que el anterior, solo que este no incluye un indicador para la
zona horaria.

1. <fieldset>
2. <legend>Nuevo Elemento Input "datetime"</legend>
3. <form action="">
4. <input type="datetime-local" id = "datetimeLocal" />
5. </form>
6. </fieldset>

email

El elemento Email, generalmente se muestra como un simple campo de texto, pero su función radica
en validar un campo correspondiente al formato de un Email.
Aunque algunos navegadores, sobretodo los móviles indican un simbolo de “@” en el campo.

1. <fieldset>
2. <legend>Nuevo Elemento Input "Email"</legend>
3. <form action="">
4. <input type="email" id = "txtEmail" />
5. </form>
6. </fieldset>

month

El elemento “month”, especifica un elemento de “input” con formato de (aaaa-mm), donde

generalmente se despliega un formato parecido al de date, aunque solo recopila estos dos datos.

1. <fieldset>
2. <legend>Nuevo Elemento Input "month"</legend>
3. <form action="">
4. <input type = "month" id = "month" />
5. </form>
6. </fieldset>

number

El elemento “number” permite el ingreso de datos numéricos.

Este elemento puede modificar dependiendo el navegador, donde se puede mostrar una flecha de
despliegue, que muestre datos numéricos, al igual que en los dispositivo celulares se muestre
solamente datos numéricos.

1. <fieldset>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
27
 HTML5

2. <legend>Nuevo Elemento Input "number"</legend>

3. <form action="">
4. <input type = "number" id = "number" max = "10" min = "0" />
5. </form>
6. </fieldset>
El elemento de “number” recibe algunos atributos extra:

 min: Este es el valor mínimo permitido que el usuario puede introducir en el formulario, en el
caso de la validación el formulario no admitirá un valor menor al especificado para este
atributo.
 max: Este es el valor máximo permitido y al igual que el anterior no se validará el formulario
si hay un valor mayor que el especificado en este campo.
 step: Especifica el número legal de intervalos, por defecto es “1”, pero lo puede modificar.
 value: Es el valor numérico que aparecerá por defecto en el campo.

range

El elemento “range” permite especificar de una manera más fácil un dato numérico.
Al igual que el elemento “number”, el elemento “range” recibe los atributos de (max, min, step y
value).

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script type="text/javascript">
5. function actualizarOutput(){
6. var miRange = document.getElementById("miRange");
7. var miOutput = document.getElementById("miOutput");
8. miOutput.value = miRange.value;
9. }
10. </script>
11. </head>
12. <body>
13. <fieldset>
14. <legend>Elemento Range</legend>
15. <form action = "">
16. <input id = "miRange" type = "range" min = "0" max = "255" value = "128" onchange
= "actualizarOutput()" />
17. <output id = "miOutput">128</output>
18. </form>
19. </fieldset>
20. </body>
21. </html>
Note que este código implementa un poco de JavaScript.
Este código es independiente del elemento “range” solo que con él podemos ver en el navegador el
valor que tiene nuestro elemento de manera numérica.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
28
 HTML5

search

El elemento “search” se emplea para realizar algún tipo de búsqueda, por el momento este campo
no tiene ningún comportamiento ya que esto queda a cargo de algún script.
Recuerde que HTML5 tiene como misión el mejoramiento semántico de los elementos y destinar a
cada parte de una página web un elemento con una acción específica y un nombre determinado,
mas no por la función que realice dicho elemento.
Ademas de que en algunos navegadores le proporcionan un formato definido a este elemento.

1. <fieldset>
2. <legend>Elemento "Search"</legend>
3. <form action = "">
4. <input type= "search" id = "search" />
5. </form>
6. </fieldset>

tel

El campo “tel” es usado para introducir números telefónicos. Este elemento se puede emplear junto
con el atributo “pattern” para especificar el formato deseado del número telefónico.

1. <fieldset>
2. <legend>Elemento "tel"</legend>
3. <form action = "">
4. <input type = "tel" id = "tel" />
5. </form>
6. </fieldset>

time

El propósito del elemento time, es permitirle al usuario el ingreso de una hora.

El formato de la hora será: hh:mm.
Y como ya hemos visto anteriormente el formato en el que aparecerá este elemento sera
especificado por el navegador.

1. <fieldset>
2. <legend>Elemento "tel"</legend>
3. <form action = "">
4. <input type = "time" id = "time" />
5. </form>
6. </fieldset>

url

El elemento “url” se emplea para introducir una dirección web.

Los navegadores que soportan este elemento revisaran el prefijo http:// y el teclado de los
dispositivos mostrara los elementos necesarios para escribir una direccion web como (:, /, – y el
.com).

1. <fieldset>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
29
 HTML5

2. <legend>Elemento "url"</legend>
3. <form action = "">
4. <input type = "url" id = "url" />
5. </form>
6. </fieldset>

week

El elemento”week” se utiliza para introducir una semana del calendario y la procesa con el formato:

yyyy-Wnn

Donde:
 yyyy: Representa los cuatro dígitos del año
 -: Separa los dígitos de la semana y el año
 W: Indica el comienzo de los dígitos correspondientes a la semana
 nn: Representa dos dígitos correspondientes a la semana.

1. <fieldset>
2. <legend>Elemento "week"</legend>
3. <form action = "">
4. <input type = "week" id = "week" />
5. </form>
6. </fieldset>
La mayoría de los navegadores muestran el calendario normal, pero cuando el usuario selecciona
un día, solo los datos de año y semana son tomados por el formulario.

VALIDACION DE PAGINAS WEB

Las directrices que se describen en esta parte por lo general le darán un sitio web decente. Sería
estupendo si tienes algún tipo de herramienta que te permita corroborar algún tipo de errores en el
código las etiquetas que faltan y otras cosas que están fuera de orden.
A veces usted tendrá basura como esa en el código, y ni siquiera sabrá que está en un problema.
Puede verse bien en su navegador, pero errores como este tienen la costumbre de aparecer cuando
estás enganchado un proyecto que muestra a cientos de personas cómo construir sitios Web.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
30
 HTML5

Desafortunadamente, no es exactamente como un código ortográfico disponible, pero el consorcio

W3, han proporcionado una herramienta que le permite comprobar cualquier página para ver si
cumple con las normas que ha declarado en el tipo de documento. Esta herramienta se llama el
validador W3, y está disponible en la siguiente dirección ingeniosamente llamado:
http://validator.w3.org
El validador es grande, pero no es perfecto. No se puede encontrar todos los errores, y por supuesto,
sólo funciona cuando está conectado a Internet. Y muchas veces los mensajes error que da a veces
son muy misterioso y no muy serviciales.
El validador de W3 comprueba XHTML y HTML5.

ETIQUETAS SEMANTICAS

HTML5 refuerza la noción del marcado semántico. Es decir, las etiquetas no deben describir cómo
una sección de la página se ve, sino que deben describir el significado de la sección en el contexto
de la página.

Header

La etiqueta <header> se utiliza sobre todo para especificar un encabezado de página. Se reemplaza
el <div id = “header”></div>

1. <header>
2. <h1> Esta es mi encabezado </ h1>
3. </header>
La cabecera contiene normalmente un h1 y otra información que pertenece a la cabecera visual de
la página. No se debe confundir el elemento <header> (que es una sección visible de la página) con
el elemento de <head> (que contiene metadatos que no se muestra al usuario). También tenga en
cuenta que el elemento <header> no pretende sustituir el <h1>.
La mayoría de los navegadores no ofrecen ningún tipo de formato predeterminado para la cabecera.
Se espera que el desarrollador web pueda añadir cualquier formato a través de CSS. Se puede
utilizar dentro de una sección o artículo para indicar que un <h1> es el título para ese elemento y no
para la página principal. Esto es útil porque una página debe tener un solo <h1>.

Nav

La etiqueta <nav> se utiliza para indicar una parte de la página reservada para navegación de
páginas. Este pretende ser un reemplazo para el <div id = “nav”>…</div>

1. <nav>
2. <h2> Menú de navegación </h2>
3. <ul>
4. <li> <a href="#"> enlace a </a> </li>
5. <li> <a href="#"> enlace b </a> </li>
6. <li> <a href="#"> enlace c </a> </li>
7. <li> <a href="#"> enlace d </a> </li>
8. <li> <a href="#"> enlace e </a> </li>
9. </ul>
10. </nav>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
31
 HTML5

El elemento de navegación no tiene un formato predeterminado. Se espera que el desarrollador web

pueda añadir CSS para determinar cómo se verá el elemento y donde se colocará en la página.

Section

Una etiqueta <section> es una división genérica de una página.

Una página o un artículo que se puede dividir en varias secciones.
El elemento de sección pretende ser más específico que las etiquetas <div>.

1. <section id = "1">
2. <h2> Sección 1 </h2>
3. <p> Cuerpo de la Sección ... </p>
4. </section>

Article

Un artículo es un subconjunto de la página. La etiqueta <article> se debe utilizar para indicar el

contenido que procede de una fuente exterior o es de alguna manera independiente de los
principales contenidos de la página. Por lo general, los artículos se utilizan para marcar las secciones
de la página que se trajeron con algún tipo de sistema de agregación.

1. <article>
2. <header>
3. <h1>
4. Aprendiendo HTML5 en <a
href="http://programandolanet.blogspot.mx/">Programando la Net</a>
5. </h1>
6. </header>
7. <p>
8. Este es un párrafo de nuestro arículo, el cual usare para recordarte, que contribuyas
en este proyecto dandole manita arriba. Gracias
9. </p>
10. </article>

La mayoría de los navegadores no agregan ningún formato especial a un artículo.

La mayoría de los artículos vinculan con un documento externo online, del cual procede dicho
artículo.
Note que la etiqueta <article> no importa datos desde una fuente externa, sólo indica que la relación
es externa.
Vea también que si nuestro artículo contiene un <header>, es adecuado colocarle uno que permita
priorizar su búsqueda.

Aside

El elemento <aside> se utiliza para indicar un fragmento de la página que está relacionada con, pero
separada de la página principal. Aparte del texto suele ser formateado como una barra lateral.
Generalmente se usa para publicidad, articulos relacionados, widgets sociales etc.

1. <aside>
2. Este es un comentario secundario

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
32
 HTML5

3. </aside>
Tenga en cuenta que la mayoría de los navegadores no se han puesto de acuerdo sobre la forma
de mostrar el elemento <aside> es totalmente a su criterio.

Footer

1. <footer>
2. <h2> Este es el pie de Página </h2>
3. <address>
4. Sigueme en Twitter <a href = "https://twitter.com/h_raulvc"> <img border="0"
height="37" src="http://2.bp.blogspot.com/-
u1C9PTlh6g4/Uc2JvoEmKiI/AAAAAAAADJU/fnAwyOAcpB8/s200/Logotipo+twitt
er+png+2.png" width="41"/></a>
5. </address>
6. </footer>

Los navegadores no ofrecen automáticamente estilo al pie de página. El estio lo implementaremos

con CSS.
La etiqueta <footer> se destina principalmente para reemplazar el ID

1. <div = "footer"> </div>

Adress

La etiqueta <address> está destinado a mantener la información del autor de una página o sección.
A pesar de que estaba disponible en HTML 4, la etiqueta <address> está destinado a ser utilizado
en el interior o bien en todo el contenido de la página ya sea dentro de una sección o artículo para
indicar el autor de dicha parte. Otras etiquetas (especialmente los vínculos a direcciones de correo
electrónico o enlaces de páginas) se pueden incrustar en la etiqueta address.

1. <address>
2. Toluca, Estado de México<br />
3. Calle M... Número XXX
4. </address>
La mayoría de los navegadores muestran las direcciones como cursiva, pero esto no está
garantizado. Al igual que las etiquetas HTML, puede modificarse con CSS.

Hgroup

La etiqueta <hgroup> se utiliza para combinar un encabezamiento y una o más subencabezados o

subtitulos en un grupo lógico. El uso de un encabezamiento <h2 > inmediato como subtitulo puede
interferir con las funciones que describen el primero, pero con un hgroup, usted puede poner varios
encabezados en un hgroup, y sólo el título inicial es considerado por herramientas automáticas de
búsqueda.

1. <hgroup>
2. <h1> Historia del mundo </ h1>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
33
 HTML5

3. <h2> Principales Teorías</ h2>

4. </hgroup>
El hgroup no proporciona ningún formato particular a la cabecera de grupo.

menu

La etiqueta <menu> se asocia con la etiqueta <command>, y se emplean para añadir varios sistemas
de menús.

1. <menu>
2. <command laberl = "uno" onclick = "alert('uno')">
3. <command laberl = "dos" onclick = "alert('dos')">
4. <command laberl = "tres" onclick = "alert('tres')">
5. </menu>

La etiqueta “menu” soporta básicamente tres tipos de aatributos para modificar su comportamiento:
 list: Presenta los comandos en forma de lista.
 context: Actua como una ventana pop-up cuando el usuario hace clic con el botón derecho
a un elemento.
 toolbar: El comando se presenta como una barra de herramientas.
Para entender el manejo de la etiqueta <menu> debemos conocer entonces los “comandos”.

command

Generalmente la etiqueta <command> sse emplea en el contexto de menu, sin embargo, se puede
emplear en cualquier parte del sitio para difinir un sistema rápido de referencia.

1. <menu>
2. <command laberl = "uno" onclick = "alert('uno')">
3. <command laberl = "dos" onclick = "alert('dos')">
4. <command laberl = "tres" onclick = "alert('tres')">
5. </menu>
La etiqueta de <command> acepta una serie de atributos:
 icon: indica la dirección de una imagen que funcionara como el icono para el comando en
cuestión.
 checked: Muestra si el comando en cuestión esta seleccionado. Esto solo tiene sentido si el
comando representa un elemento radio o casilla de verificación.
 disabled: Si este atributo está presente el comando se desactiva.
 label: Muestra el text que será mostrado al usuario.
 onclick: incluye una pequeña linea de JavaScript para ejecutar una función cuando el usuario
realice clic sobre el elemento.
 title: Muestra una pestaña sobre lo que el comando va a realizar.
 type: Especifica el tipo de comportamiento del elemento. Esto corresponde a los mismos
tipos de tipo para los elementos “input” (command, casilla de verificación, y radio).

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
34
 HTML5

OTRAS ETIQUETAS DE HTML5

Details

El elemento de detalles permite ocultar el contenido que se encuentre ente las etiquetas
<details>…</details>. Esto permite una forma conveniente para ocultar y mostrar el contenido,
aunque algunos navegadores pueden no soportar la etiqueta

1. <p>Este texto se muestra</p>

2. <details>Este texto está oculto</details>

Summary/details

Esta etiqueta trabaja en conjunto con la etiqueta <details> para proporcionar al usuario un sumario
visible. Cuando el usuario da clic en el sumario, todos los elementos contenidos en la etiqueta
<details> que estaban ocultos, son mostrados.
1. <details>
2. <summary>Identidad secreta de Batman</summary>
3. <p>Bruce Wayne</p>
4. </details>

dfn

La etiqueta <dfn> encierra un término que se desea definir. Rodea el término a definir entre las
etiquetas <dfn> y </dfn>.

1. <p>
2. <dfn> palabra:</dfn>
3. Definición de la palabra <br />
4. </p>
La mayoría de los navegadores danformato a la etiqueta <dfn> como cursiva, pero esto se puede
cambiar a través de CSS.

figcaption

La etiqueta <figcaption> proporciona un título para una figura y debe estar contenido dentro de una
etiqueta <figure>.

figure

Una figura es un elemento semántico que describe una o más imágenes con un título opcional. La
etiqueta <figure> no muestra directamente las imágenes, sino que está pensado como un contenedor
para la celebración de cualquier tipo de imagen (incluyendo la etiqueta estándar <img> pero también
podría incluir imágenes SVG o lienzo). La imagen se puede suministrar con un título opcional usando
la etiqueta <figcaption>.

1. <figure>
2. <img src = "apoyo.jpg" alt = "laguna apoyo" />
3. <figcaption> Laguna de Apoyo, Nicaragua </ figcaption>
4. </figure>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
35
 HTML5

Usted puede poner más de una imagen dentro de una figura.

Hasta ahora, los navegadores no ofrecen un estilo o formato particular para las figuras y leyendas,
pero estos artículos pueden modificarse a través de CSS. La etiqueta tiene la intención de trabajar
junto con la etiqueta de <details> para proporcionar un elemento de resumen visible para el usuario.
Cuando el usuario hace clic en el resumen, todo el contenido en el elemento de datos, que estaba
escondido, se vuelve disponible.

time

El elemento de tiempo proporciona un campo para representar una fecha u hora. Este campo
contendrá una fecha, una hora o una fecha y una hora.

1. <p>
2. El gallo cante en <time> 06:30 </time> cada mañana.
3. </p>
Los navegadores no aplican actualmente ningún formato especial a los elementos de tiempo. Los
datos codificados en elementos de tiempo deben tener el formato de una manera estándar para que
puedan ser ajustados para las zonas horarias.

wbr

El elemento wbr se utiliza para sugerir las separaciones de palabras largas. Coloque esta etiqueta
en el interior de una palabra larga para indicar el lugar apropiado para romper la palabra con fines
de ajuste en línea.

1. <p>
2. La etiqueta WBR se utiliza para marcar un espacio en una palabra larga donde sería
apro<wbr>piada romper la palabra si es necesario.
3. </p>

AUDIO Y VIDEO

Audio

La etiqueta <audio> permite al usuario integrar un archivo de audio directamente en el navegador.

1. <audio src = "cancion.ogg" controls>

2. <a href = "canción.ogg">cancion.ogg</a>
3. </audio>
Si el navegador no soporta la etiqueta <audio>, el código entre <audio> y </audio> se presentará en
su lugar, por lo que puede proporcionar un vínculo común para permitir al usuario descargar el audio.
O bien, puede incrustar un reproductor Flash para navegadores antiguos.
La etiqueta <audio> soporta varias características estándar:
 Reproducción automática (autoplay): Si este atributo está presente, el archivo de audio se
reproducirá inmediatamente cuando el navegador carga la página.En general, esta opción
no se debe utilizar, ya que es considerado de mala educación reproducir un audio sin el
permiso explícito del usuario.
 Controles (controls): Si este atributo está presente, el navegador presenta una interfaz
simple que incluyendo reproducir/pausa, control de volumen, y una especie de indicador de

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
36
 HTML5

posición. Navegadores difieren en cómo aparecen exactamente los controles. Es preferible

dar al usuario algún tipo de control ya sea a través del mecanismo de control integrado o
código JavaScript.
 Precarga (preload): Si este atributo está presente, el archivo de audio comenzará a cargar
en la memoria tan pronto como se carga la página, pero no va a reproducirse hasta que el
usuario activa el reproductor.
 Atributo (src): Indica la dirección del archivo. Tenga en cuenta que se prefiere la etiqueta
<source>, ya que permite múltiples opciones de formatos.
La mayoría de los navegadores admiten el estándar de código abierto Ogg, pero algunos
(especialmente Safari e IE9) prefieren Mp3. Si proporciona una versión de cada uno, es posible que
en cualquier navegador se reproduzca el audio. Utilice la etiqueta <source> para incluir múltiples
fuentes de audio:

1. <audio>
2. <source src = "cancion.ogg">
3. <source src = "cancion.mp3">
4. </audio>

Video

El elemento de vídeo es una de las características más esperadas de HTML 5. Con esta etiqueta,
los desarrolladores serán capaces de incrustar vídeos en una página web sin necesidad de un plug-
in como Flash.

1. <video src = "video.ogv" controls>

2. Su navegador no admite vídeo incorporado a través de HTML5.
3. </video>
La misma etiqueta <video> es bastante simple de entender, pero la ejecución real es algo complejo.
HTML5 indica una etiqueta de vídeo, pero no especifica qué formato apoyará el navegador.
Por el momento, hay tres formatos principales de vídeo en discordia.
 Ogg / Theora / Vorbis:
o Ogg es un formato contenedor que se utiliza para la codificación de audio
o Vorbis y Theora para la codificación de vídeo.
o El sistema de Ogg está apoyado por Firefox, Chrome y Opera. (También es
compatible con Safari si el usuario ha instalado el plug-in de QuickTime Vorbis.) IE9
no tiene planes para apoyar este formato en absoluto.
 MP4/H.264/AAC:
o La norma MP4 es un formato contenedor que utiliza:
 H.264 para la codificación de vídeo
 AAC para la codificación de audio.
 Los tres formatos están sujetos a restricciones de patentes. Este formato es compatible con
Safari, Chrome, iPhone y Android. IE tiene previsto apoyar en IE9.
 WebM/VP8/Vorbis: WebM es un estándar relativamente nuevo introducido por Google.
 Utiliza el formato de codificación de vídeo VP8 y codificación de audio Vorbis.
 Hay poco apoyo a WebM todavía, pero la mayoría de los navegadores están indicando
soporte para el formato en las próximas versiones.

Si desea incorporar vídeo HTML5, utilice la etiqueta <source> para incluir los principales formatos.
(Puede utilizar el FFmpeg herramienta gratuita disponible para las principales plataformas de
software para convertir sus videos.)

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
37
 HTML5

Como opción final, utilice la etiqueta <embed> dentro de su etiqueta <video> para cargar el vídeo
con un reproductor de Flash. Usted puede usar JavaScript para controlar el elemento de vídeo de la
misma manera que el control de audio.

CANVAS

Elemento canvas

La etiqueta < canvas> establece una parte de la pantalla para gráficos de control programado. El
código HTML simplemente deja a un lado una parte de la pantalla para ser utilizado como un lienzo.
Todo el dibujo y la manipulación de la imagen se realizan a través de código JavaScript.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script type="text/javascript">
5. function draw(){
6. var myCanvas = document.getElementById("myCanvas");
7. var context = myCanvas.getContext("2d");
8.
9. context.fillStyle = "blue";
10. context.strokeStyle = "red";
11. circle(context, 1, 1, 1);
12. for (i = 1; i <= 200; i+= 2){
13. circle(context, i, i, i, "blue");
14. circle(context, 300-i, 200-i, i, "red");
15. circle(context, 300-i, i, i, "blue");
16. circle(context, i, 200-i, i, "red");
17. } // end for
18. } // end draw
19. function circle(context, x, y, radius, color){
20. context.strokeStyle = color;
21. context.beginPath();
22. context.arc(x, y, radius, 0, Math.PI * 2, true);
23. context.stroke();
24. } // end circle
25. </script>
26. </head>
27. <body>
28. <canvas id = "myCanvas" width = "300" height = "200">
29. This example requires HTML5 canvas support
30. </canvas>
31. <button type = "button" onclick = "draw()">
32. click me to see a drawing
33. </button>
34. </body>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
38
 HTML5

35. </html>
Por el momento, sólo hay un contexto de dibujo 2D, pero se preeve un contexto para dibujo en 3D
que permitirá a los gráficos directamente en el navegador.
El objeto “context” controla todas las funciones de dibujo actual.

Éstos son algunos de los principales métodos del objeto “context”:

 arc():
o El comando “arc” dibuja un arco (parte de un círculo), como parte de un camino.
o El arco se define como un círculo, con un centro y un radio, pero con un inicio y din
de angulo
o Si los ángulos describen un círculo completo (de 0 a 2 x pi radianes), el comando
“arc” dibujara un círculo completo.
 beginPath():
o Este comando inicia la definición de un camino.
o Normalmente, una ruta de acceso se define por un solo comando moveTo, seguido
de una serie de comandos LineTo, y terminado por un strocke, closePath, o fill.
 closePath():
o Este comando se conecta con el último punto de un camino a la primera, creando
una figura cerrada que pudiera ser rellenada.
 drawImage():
o El comando “drawImage”, le permite dibujar una imagen (de un archivo de de imagen
externo) en el elemento <canvas>.
o Muchas implementaciones permiten la manipulación a nivel de píxeles, lo que
permite aplicar filtros y transformaciones personalizadas a sus imágenes, dándole
mucho mayor control que la etiqueta típica <img>.
 fill():
o El comando “fill” o de relleno (y sus variantes – como fillRect) permite aplicar el estilo
de relleno a elementos dibujados en la pantalla.
 fillRect():
o Este comando construye un rectángulo de un tamaño y una posición definida.
 fillStyle():
o Permite especificar el estilo de relleno. Esto puede ser un valor de color estándar, o
un gradiente predefinido.
 lineTo():
o Este comando (junto con el comando moveTo) le permite construir un camino en la
pantalla.
o El comando lineTo toma un punto como entrada y se basa en un punto previamente
definido en el punto actual.
o Tenga en cuenta que la ruta de acceso no se muestra hasta que la aplicación de la
función strocke.
 lineWidth():
o Define la anchura de la línea que se está dibujado por un comando strocke.
 moveTo:
o Utilizado en la definición de la ruta, se utiliza el comando moveTo para indicar el
punto de partida de un camino.
 stroke():
o Este comando también traza la trayectoria definida. Tenga en cuenta que los
caminos no son inmediatamente atraídos, el comando de trazo en realidad señala
la ruta en la pantalla.
 strokeRect():
o Este comando dibuja un rectángulo vacío.
 strokeStyle():

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
39
 HTML5

o Determina el estilo del siguiente trazo en ser dibujado. La mayoría de los contextos
de dibujo apoyan estilos de puntos y líneas discontinuas, pero se esperan aun más
estilos.
 text:
o Algunas implementaciones de la etiqueta canvas permiten la manipulación de texto.

La etiqueta canvas es una de las novedades más importantes de HTML5, ya que permite un control
casi ilimitado de la interfaz visual. Los desarrolladores de juegos han comenzado a crear juegos en
línea que utilizan el lienzo, y ya se ha convertido en la base de varios experimentos inovadores (en
particular, los mapas de Google.)
Para obtener más información sobre la programación del elemento canvas, visite
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html.

EMBED

Elemento embed

La etiqueta <embed> es una etiqueta universal de los elementos multimedia, por así decirlo. Se
puede utilizar para insertar cualquier tipo de contenido multimedia en la página, especificando el tipo
de medio que se va a mostrar.

1. <embed src = "peliculaflash.swf" type = "application/x-shockwave-flash" width = "400"

height = "400" />
Esta etiqueta le permite incluir los elementos multimedia que no son compatibles con otras marcas
de medios.
El elemento <embed> es todavía la mejor opción para la inclusión de elementos Flash,
especialmente en lo que una copia de seguridad de los elementos de audio o vídeo.

SVG

Elemento svg

El elemento <svg> permite al autor construir una imagen en base vectorial, directamente en la página
utilizando el lenguaje SVG.

1. <svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px"
height="100px">
2. <circle cx="50" cy="50" r="30" style="stroke:#0000ff; stroke-width: 5px;
fill:#ff0000;"/>
3. <rect x = "100" y = "0" height = "50" width = "50" stroke-width = "2px" stroke =
"#ffff00" fill = "#00ff00" />
4. </svg>
SVG utiliza un sistema de XML muy similar a XHTML. Cada elemento se describe por una etiqueta,
que tiene varios atributos que definen su tamaño, posición y color.
Los elementos SVG también pueden ser modificados por una forma de CSS.
También es posible utilizar código JavaScript para crear y modificar el código SVG en tiempo real.
SVG se utiliza a menudo para crear gráficos o otras visualizaciones de forma dinámica.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
40
 HTML5

Además, es posible exportar una imagen SVG de una herramienta como Dia o Inkscape, e incrustar
el dibujo resultante directamente en la página.
La principal ventaja de un formato de imagen basado en vectores como SVG es la capacidad de
escalar la imagen sin perder calidad.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
41
 CSS3

CSS3

INTRODUCCIÓN A CSS3

CSS3, trabaja describiendo ciertas partes de una página web, ya sea mediante una etiqueta, un
identificador, clases o subclases.
La función básica de CSS desde sus inicios, fue la aplicación de estilos a una página mediante el
uso de reglas que posteriormente veremos.
Comencemos con un ejemplo, y después describiremos algunas consideraciones generales en
CSS3:

Ejemplo de un sitio ocupando estilos:

El código de nuestro ejemplo es el siguiente:

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <title>Página Simple</title>
5. <meta charset="utf-8" />
6. <style>
7. body{
8. background-color: yellow;
9. }
10. h1{
11. color: red;
12. }
13. p{
14. color: blue;
15. background-color: white;
16. }
17. </style>
18. </head>
19. <body>
20. <h1>Página Simple con CSS3</h1>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
43
 CSS3

21. <p>El título es rojo, esto es un párrafo de color azul con fondo blanco, y el fondo, o
cuerpo de la página, es amarillo.</p>
22. </body>
23. </html>
Los nuevos elementos que hemos ocupado no tienen nada de sorprendente, pero realmente son
muy poderosos. Observe que hemos cambiado los colores de algunos elementos html, sin la
necesidad de ninguna etiqueta en el body, toda la magia ocurre en la cabeza del documento.

Algunas consideraciones que debe tener presente antes de añadir estilos a su documento html son:

 Comience con un código HTML, limpio y válido. Si nuestro código no esta correctamente
elaborado, los estilos CSS podrían responder de una manera diferente o inesperada a lo que
usted pretende.
 Existen diferentes maneras de incluir estilos a su documento. En este caso lo hicimos dentro
del documento html, entre las etiquetas <head> y </head>, es por ello que para indicarle al
navegador que nuestro fragmento de código, corresponde a estilos CSS, es necesario
colocar dicho código entre las etiquetas <style> y </style>
 Anteriormente, era necesario indicar el tipo de estilo mediante el argumento <style
type=”text/css”>, pero esto ya no es necesario, debido a que el estándar de HTML5, obvia
que cualquier tipo de estilo corresponde a CSS.

Para modificar nuestros elementos html con código css:

 Identifica la etiqueta o el elemento que deseas modificar.

 Emplee las llaves {…}, para encerrar las reglas css de un determinado elemento.
 Cada regla css, esta conformada por dos partes:
 Atributo. Ej: background-color:
 Valor. Ej: yellow
 Observe que el valor y el atributo están separados por dos puntos (:).
 Para finalizar la regla basta con colocar un punto y coma (;) al final de cada regla.
 Recuerde que una sola etiqueta puede contener varias reglas, esto nos permitirá crear cosas
muy interesantes mas adelante.

Veamos otro ejemplo de un sitio HTML5 con reglas de CSS3:

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>Estilos con CSS</title>
5. <meta charset = "UTF-8" />
6. <!--En la actualidad ya no es necesario especificar el tipo de estilo, ya que
7. por defecto los estilos se aplican con CSS-->
8. <style type = "text/css">
9. p{
10. background-color: lightblue;
11. color: blue
12. }
13. #identificador {
14. background-color: black;

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
44
 CSS3

15. color: white;

16. }
17. .clase {
18. background-color: blue;
19. color: lightblue;
20. }
21. </style>
22. </head>
23. <body>
24. <h2>Estilos con CSS</h2>
25. <p id = "identificador">
26. Esto es un párrafo con el identificador
27. </p>
28. <p>
29. Esto es un párrafo regular
30. </p>
31. <p class = "clase">
32. ESto es un párrafo con clase
33. </p>
34. <p>
35. Esto es un párrafo regular
36. </p>
37. <p class = "alternate">
38. Esto es otro párrafo con otra clase
39. </p>
40. </body>
41. </html>
Note que la magia de este documento no se encuentra entre las etiquetas <body> y </body>, sino
en entre <head> y <head>. Ubique las etiquetas <style> y </style>, las cuales se emplean para
insertar código de CSS y darle estilos a nuestro documento.

Del código anterior, lo que veremos en el navegador será:

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
45
 CSS3

UN PEQUEÑO INSTRUCTIVO PARA AÑADIR CSS3

 Comienza con un Documento HTML válido, de lo contrario algunos estilos podrían no

responder como lo deseamos.
 Existen diferentes formas de vincular estilos al documento, ya sea dentro de la misma
etiqueta, dentro del <head> y con un enlace externo, las cuales veremos posteriormente.
 En el ejemplo anterior fue dentro del <head> , y debe ser especificado mediante el uso de
las etiquetas <style> y </style>
 Después especificamos el elemento que deseamos modificar, el cual puede ser: una
etiqueta, un “id” o identificador, una clase “class”, además de otros selectores mas
específicos que posteriormente veremos.
 Después abrimos enfrente del elemento a modificar las llaves de apertura y cierre { }, dentro
de las cuales colocaremos los estilos correspondientes al elemento. La colocación y
distribución de nuestro código es indistinto, sin embargo es recomendable que mientras
estemos aprendiendo lo hagamos de la manera mas legible posible.
 La sintaxis de la mayoría de los estilos esta determinada por:
Estilo (atributo): formato (valor);
 El estilo o atributo, especifica un conjunto de características predefinidas
 El formato o valor, es la disposición que le daremos a esas características
 Note que entre el atributo y el valor hay (“:” dos puntos), y al final de cada estilo un (“;” punto
y coma).
 Y otra cosa que nos va a permitir en un futuro hacer cosas muy interesantes, es que a un
mismo elemento le podemos dar varios estilos.
 Acompáñenos en este fascinante mundo del diseño y programación Web, que con las
nuevas disposiciones y las revolucionarias tecnologías, podremos hacer cosas que creen
una emoción y toda una experiencia en nuestros clientes o usuarios de nuestros sitios web.

COLOCAR ESTILOS CON CSS3

En este capítulo veremos las diferentes maneras para aplicar estilos CSS a los elementos de nuestra
página.

Estilos en línea o Locales

Los estilos locales se aplican directamente al elemento que deseamos modificar, mediante la
siguiente sintaxis.

1. <etiqueta style = "atributo1: valor; atributo2: valor;">...</etiqueta>

Esta forma de aplicar estilos es poco recomendable, ya que en un código muy elaborado seria
imposible actualizar el contenido y el estilo de nuestro sitio.
Por lo tanto, esta forma de implementar CSS, la dejaremos en la teoría y muy pocas veces en la
práctica.

Estilos Embebidos

Esta forma de aplicar estilos, fue la empleada en el ejemplo de la lección 1, donde colocamos los
estilos en la cabecera del documento, dentro de las etiquetas. Si bien, esta forma es mas práctica
que en el caso de los Estilos en línea, ya que nos permite una mejor distribución entre el contenido
y los estilos, cuando nosotros tenemos un sitio con muchas páginas que emplean los mismos CSS,

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
46
 CSS3

tendríamos que modificar el código para cada página, por o tanto las tareas de mantenimiento se
harían muy complicadas.

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>Estilos con CSS</title>
5. <meta charset = "UTF-8" />
6. <!--Estos son los estilos Embebidos-->
7. <style type = "text/css">
8. p{
9. background-color: lightblue;
10. color: blue
11. }
12. #identificador {
13. background-color: black;
14. color: white;
15. }
16. .clase {
17. background-color: blue;
18. color: lightblue;
19. }
20. </style>
21. </head>
22. <body>
23. <h2>Estilos con CSS</h2>
24. <p id = "identificador">
25. Esto es un p&aacute;rrafo con el identificador
26. </p>
27. <p>
28. Esto es un p&aacute;rrafo regular
29. </p>
30. <p class = "clase">
31. ESto es un p&aacute;rrafo con clase
32. </p>
33. <p>
34. Esto es un p&aacute;rrafo regular
35. </p>
36. <p class = "alternate">
37. Esto es otro p&aacute;rrafo con otra clase
38. </p>
39. </body>
40. </html>
Por lo tanto, no es recomendable el empleo de esta técnica, si nuestro sito va a ser de muchas
páginas y tenemos que darle mantenimiento.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
47
 CSS3

Enlace Externo

Esta es la forma más recomendable de aplicar estilos a nuestro documento.

Y lo que tenemos que hacer es muy facil.
1. Dentro de nuestra Directorio (lugar donde guardamos los documentos html del sitio), crear
una carpeta llamada css.

2. Dentro de dicha carpeta, que en mi caso se llama css, crearemos un documento con nuestro
editor de texto llamado estilos.css (NO olviden colocarle la extensión CSS).

3. El siguiente paso, consiste en vincular nuestro documento html, el cual tiene el contenido,
con nuestro documento css, que contiene los estilos; mediante el uso de la etiqueta <link>

4. La etiqueta link tiene en este caso dos atributos:

 rel: ESpecifica la relacion del comumento que se va a enlazar
 href: que especifica la dirección del documento css que se va a enlazar. Como
recordaran en la Lección 3 del curso de HTML5, nos referimos a una dirección
relativa.
5. Esta etiqueta se coloca en la cabecera de nuestro documento html entre las etiquetas
<head> y </head>

6. Una vez hechos todos estos pasos solo basta especificar las reglas CSS a los respectivos
elementos del documento HTML, mediante la relación de etiquetas, identificadores, clases y
subclases que veremos en las siguientes lecciones.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
48
 CSS3

REFERENCIAS CON ID Y CLASS

Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de cada
documento que lo necesite es muy conveniente, sin embargo no podremos hacerlo sin buenos
mecanismos que nos ayuden a establecer una específica relación entre estos estilos y los elementos
del documento que van a ser afectados. Cuando hablábamos sobre cómo incluir estilos en el
documento, mostramos una de las técnicas utilizadas a menudo en CSS para referenciar elementos
HTML.

Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por las reglas
CSS:
 Referencia por la palabra clave del elemento
 Referencia por el atributo id
 Referencia por el atributo class

Mas tarde veremos que hay mucha flexibilidad para referencia elementos con su respecto CSS.

Referencia por palabra clave del Elemento

Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada elemento de la
misma clase en el documento. Por ejemplo, la siguiente regla cambiará los estilos de todos los
elementos <p>.
1. p {font-size: 20px}
Todos los textos envueltos en etiquetas <p> tendrán el tamaño de 20 pixeles.
Por supuesto, lo mismo funcionará para cualquier otro elemento HTML. Si especificamos la palabra
clave span en lugar de p, por ejemplo, cada texto entre etiquetas tendrá un tamaño de 20 pixeles.
¿Pero qué ocurre si solo necesitamos referenciar una etiqueta específica?, ¿Debemos usar
nuevamente el atributo style dentro de esta etiqueta?

 La respuesta es No.
Como aprendimos anteriormente, el método de “Estilos en Línea” (usando el atributo style dentro de
etiquetas HTML) es una técnica en desuso y debería ser evitada. Para seleccionar un elemento
HTML específico desde las reglas de nuestro archivo CSS, podemos usar dos atributos diferentes:
id y class.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
49
 CSS3

Referenciando con el atributo ID

El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo
no puede ser duplicado. Este nombre debe ser único en todo el documento. Para referenciar un
elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada
con el símbolo # al frente del valor que usamos para identificar el elemento:
1. #texto1 {font-size: 20px}

El siguiente estilo está en un archivo css externo, o en la cabecera del documento dentro de las
etiquetas <head>.
La especificación del “id” en el documento html sería:
1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <title>Este texto es el título del documento</title>
5. <link rel="stylesheet" href="misestilos.css">
6. </head>
7. <body>
8. <p id="texto1">Mi texto</p>
9. </body>
10. </html>
El resultado de este procedimiento es que cada vez que hacemos una referencia usando el
identificador texto1 en nuestro archivo CSS, el elemento con ese valor de id será modificado, pero
el resto de los elementos, o cualquier otro elemento en el mismo documento, no serán afectados.
Esta es una forma extremadamente específica de referenciar un elemento y es normalmente utilizada
para elementos más generales, como etiquetas estructurales. El atributo id y su especificidad es de
hecho más apropiado para referencias en Javascript.

Referenciando con el atributo CLASS

La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar
class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento
que comparte un diseño similar:
1. .texto1 { font-size: 20px }

Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes del nombre.
La ventaja de este método es que insertar el atributo class con el valor texto1 será suficiente para
asignar estos estilos a cualquier elemento que queramos.

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <title>Este texto es el título del documento</title>
5. <link rel="stylesheet" href="misestilos.css">
6. </head>
7. <body>
8. <p class="texto1">Mi texto</p>
9. <p class="texto1">Mi texto</p>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
50
 CSS3

10. <p>Mi texto</p>

11. </body>
12. </html>
Los elementos en las primeras dos líneas dentro del cuerpo del código en el código anterior, tienen
el atributo class con el valor texto1. Como dijimos previamente, la misma regla puede ser aplicada a
diferentes elementos en el mismo documento. Por lo tanto, estos dos primeros elementos comparten
la misma regla el último elemento conserva los estilos por defecto otorgados por el navegador.
Existen otras formas más complejas para referenciar estilos de CSS a elementos de HTML, las
cuales veremos mas adelante.

NUEVOS SELECTORES EN CSS3

Ahora nosotros podemos aplicar estilos específicamente a cualquier elemento que nosotros
deseemos con CSS3.
Anteriormente ya vimos los selectores con la etiqueta, con class y con id.
Ahora veremos unos más específicos, que nos permiten seleccionar cualquier elemento.

Selectores por atributo

Imaginemos una etiqueta “input” puede asumir diferentes formas de acuerdo al atributo “type” el cual
puede recibir diferentes valores como: (text, checkbox, radio, etc.) entonces mediante los selectores
de atributos podemos especificar un determinado tipo de valor.
Por ejemplo:
 Si nosotros aplicáramos estilos a la etiqueta “input”, todas aquellas etiquetas input de
diferentes tipos serán afectadas
 Con el selector de atributos podemos especificar que tipo de etiquetas input seran
modificadas
La sintaxis sería la siguiente:

1. input[type="text"]{
2. background-color: #CCCCFF;
3. }
Este selector se puede hacer sin el uso de la etiqueta, aunque pueden existir errores si usted ocupa
un atributo muy general.

not

Pueden existir ocasiones donde usted desee realizar una selección inversa.
Imagine que usted quiere aplicar un estilo a todos los párrafos, excepto a aquellos que no pertenecen
a una clase específica (para este ejemplo la clase se llamará “normal”).

1. p:not(.normal) {
2. border: 1px solid red;
3. }
El estilo anterior va a darle un borde rojo a todos los párrafos, excepto a los que esten dentro de la
clase “normal”.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
51
 CSS3

nth-child

El selector “nth-child” permite seleccionar uno o mas elementos en un grupo.

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <style>
5. p:nth-child(3){
6. background:#ff0000;
7. }
8. </style>
9. </head>
10. <body>
11. <h1>Título</h1>
12. <p>Primer párrafo</p>
13. <p>Segundo párrafo</p>
14. <p>Tercer párrafo</p>
15. <p>Cuarto párrafo</p>
16. </body>
17. </html>
Este selector puede recibir formulas algebraicas para referir su valor como an+b.

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <style>
5. p:nth-child(2n){
6. background:#ff0000;
7. }
8. </style>
9. </head>
10. <body>
11. <h1>Título</h1>
12. <p>Primer párrafo</p>
13. <p>Segundo párrafo</p>
14. <p>Tercer párrafo</p>
15. <p>Cuarto párrafo</p>
16. </body>
17. </html>
En el ejemplo anterior cada dos elementos será afectado por el estilo

Otra fórmula similar puede ser:

1. <!DOCTYPE html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
52
 CSS3

2. <html lang="es">
3. <head>
4. <style>
5. p:nth-child(2n+1){
6. background:#ff0000;
7. }
8. </style>
9. </head>
10. <body>
11. <h1>Título</h1>
12. <p>Primer párrafo</p>
13. <p>Segundo párrafo</p>
14. <p>Tercer párrafo</p>
15. <p>Cuarto párrafo</p>
16. </body>
17. </html>
También exsten una serie de palabras reservadas que pueden hacer referencias específicas, en
estos casos CSS emplea las palabras even y odd, los cuales se emplean juntos para colocar colores
alternos a una tabla grande por ejemplo.

1. p:nth-child(even){
2. background-color: red;
3. }
4.
5. p:nth-child(odd){
6. background-color: red;
7. }
También existen variaciones en la forma de escribir este selector:

 : nth-last-child(N): Trabaja igual que el “:nth-child:”, excepto que la cuanta comienza del
ultimo al primero
 : nth-of-type(N): Trabaja igual que el “:nth-child:”, excepto que discrimina un tipo específico.
 last-child: Este selector, afecta al último elemento
 last-nth-of-type(N): Trabaja igual que el “:nth-of-type(N):” solo que la cuenta comienza del
último al primero
 first-child: Este selector, afecta al primer elemento

¿QUE PODEMOS HACER CON CSS3?

Desde luego que una página web hace mucho más que cambiar los colores, pero bueno por algún
lado debemos empezar, y bien, trataremos de ir haciéndolo poco a poco.

Colores Hexadecimal

En cuanto los colores de una página web, podemos aplicarlos simplemente con su nombre en ingles.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
53
 CSS3

Los colores hexadecimales se derivan de los colores de RGB a notación numérica en base 16, no
nos detendremos a especificar este procedimiento, ya que en la práctica a lo único que nos tenemos
que limitar, es a consultar una tabla de los colores hexadecimales y aplicarlos a nuestro gusto en los
estilos de nuestro sitio web.
Una tabla que les puede resultar muy útil para buscar los colores que desee, es la siguiente:

Colores RGB y modo HSV

El RGB se refiere a los colores Rojo, Verde y Azul que nos permiten realizar infinidad de
combinaciones para crear la gran variedad de colores que existen, y ademas de la opción de
transparencia RGBA, donde “A” especifica la transparencia, con valor de de 0 – 1, donde ceroes
completamente transparente y uno totalmente opaco.
 R – red (rojo)
 G – green (verde)
 B – blue (azul)
 A – Alpha (para la transparencia)

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
54
 CSS3

Con el uso del modelo HSV que nos permita generar contrastes muy fácilmente.
 Hue (Matiz)
 Saturation (Saturación)
 Lightness (Luminosidad)

Con esta aplicación usted podrá experimentar una gama increíblemente rica en diversidad de colores
para implementarlos en su sitio web, solo basta añadirle un toque de creatividad para colocar el color
correcto en el lugar correcto y crear un aspecto profesional y de buen gusto a nuestro sitio.

Mas adelante veremos una serie de funcionalidades que CSS3 nos proporciona para realizar cosas
realmente impresionantes con colores e imágenes.

EDICION DE TEXTO

Las páginas web, en su mayoría son texto, es por ello que CSS3 nos proporciona varios estilos o
formatos que le podemos proporcionar a nuestro texto.
No nos referimos directamente a la fuente, la cual veremos posteriormente como añadir, pero si a
los clásicos de Negritas, Cursiva, Subrayado, entre otros.
Veamos el siguiente ejemplo que contiene una gran variedad de estilos en un documento.
Por fines prácticos, los estilos CSS serán embebidos dentro de las etiquetas de <head> y </head>,
pero recuerde que la que nosotros debemos emplear preferentemente el enlace externo visto en la
Lección 2 de este tutorial.

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>textManipulation.html</title>
5. <meta charset = "UTF-8" />
6. <!-- En este caso los nombres de los estilos correspondientes a
7. las clases, están en ingles para facilitar su relación con la
8. especificación del estilo en CSS, pero recuerde que usted es libre
9. de modificaros para que le sea mas fácil-->
10. <style type="text/css">
11. .italic {
12. font-style: italic;
13. }
14. .bold {
15. font-weight: bold;
16. }
17. .underline {
18. text-decoration: underline;
19. }
20. .strikeThrough {
21. text-decoration: line-through;
22. }
23. .center {
24. text-align: center;

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
55
 CSS3

25. }
26. .right {
27. text-align: right;
28. }
29. .sans {
30. font-family: sans-serif;
31. }
32. .big {
33. font-size: 200%;
34. }
35. </style>
36. </head>
37. <body>
38. <p>
39. Este párrafo no tiene estilo alguno
40. </p>
41. <p class = "italic">
42. Este parrafo tiene el estilo de cursivs
43. </p>
44. <p class = "bold">
45. Este párrafo tiene el formato "bold"
46. </p>
47. <p class = "underline">
48. Este párrafo tiene e estilo de subrayado.
49. </p>
50. <p class = "strikeThrough">
51. Este párrafo tiene el estilo de tachado
52. </p>
53. <p class = "center">
54. Este párrafo esta alineado al centro
55. </p>
56. <p class = "right">
57. Este párrafo esta alineado a la derecha
58. </p>
59. <p class = "sans">
60. Este párrfo emplea la fuente sens-serif
61. </p>
62. <p class = "big">
63. Este párrafo tiene un formato de letra grande
64. </p>
65. <p class = "center underline">
66. Este párrafo ocupa una combinación de clases
67. </p>
68. </body>
69. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
56
 CSS3

El código anterior nos muestra una serie de párrafos con una referencia de clases, la cual se
relaciona a los estilos especificados dentro del <head> y </head>, los cuales en el código están de
color azul.

Pero preste atención al último párrafo el cual emplea una combinación de clases.
Recuerde que cuando vimos referencias en CSS en la Lección 3, dijimos que el “id” se emplea para
un elemento único dentro del documento y solo puede atraer los estilos de la especificación por (#id)
en CSS, y que en el caso de “class” era mas flexible, y aquí podemos ver como a un mismo elemento,
en este caso un párrafo <p>, le podemos dar varios estilos, haciendo uso de diferentes clases las
cuales están separadas por un espacio.

VEAMOS COMO TRABAJAN LOS ESTILOS

Font-style

Con este atributo podemos dar estilo al texto de cursivas, en formato normal y oblicua (inclinado
hacia atrás)
Los valores que le podemos dar son:

1. p {
2. font-style: normal;
3. font-style: italic;
4. font-style: oblique;
5. }

Font-weight

Con este atributo especificamos si la letra aparece en negritas o normal

Los valores que le podemos dar son:

1. p {
2. font-weight: bold;
3. font-weight: normal;
4. }

Text-decoration

El atributo de text-decoration, generalmente se emplea para quitarle el formato predefinido a un

vínculo con el valor de “none”, aunque también puede proporcionar otros estilos a este atributo.
Los valores que le podemos dar son:

1. p {
2. text-decoration: underline;
3. text-decoration: overline;
4. text-decoration: line-through;
5. text-decoration: none;
6. }

Text-align

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
57
 CSS3

El atributo text-align sirve para alinear el texto o algún párrafo a la izquierda, al centro o a la derecha,
también tiene el valor para poder justificar el texto.
Los valores que le podemos dar son:

1. p{
2. text-align: center;
3. text-align: left;
4. text-align: right;
5. text-align: justify;
6. }

Font-family

Con este atributo tenemos la posibilidad de especificar el tipo de fuente de nuestro documento.
Para este atributo posteriormente les mostraré un vídeo de las diferentes maneras para implementar
las fuentes.

1. p{
2. font-family:"Times New Roman",Georgia,Serif;
3. }

Font-size

Con este atributo podemos especificar el tamaño de la letra.

Para este atributo el valor se especifica de manera numérica con diferentes unidades como (pixeles
“px”, porcentaje “%”, o em, donde esta ultima especifica una medida en relación con la letra “m” del
abecedario, la cual es la mas ancha de todas.
Tambien podemos especificar los valores con medidas predefinidas como x-small, small, medium,
larg, x-large etc.
Las diferentes formas de especificar los valores de este atributo son:

1. p{
2. font-size: xx-small;
3. font-size: x-small;
4. font-size: small;
5. font-size: medium;
6. font-size: large;
7. font-size: x-large;
8. font-size: xx-large;
9. font-size: smaller;
10. font-size: larger;
11. font-size: 12px;
12. font-size: 2em;
13. font-size: 85%;
14. font-size: inherit;
15. }

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
58
 CSS3

Bien pues hasta aquí las especificaciones para los estilos aplicados a textos, por el momento ustedes
practiquen aplicando diferentes valores a los estilos y aplíquelos uno por uno, experimente diferentes
combinaciones hasta que se sienta cómodo al emplear estos elementos.

ATRIBUTO BORDER

En CSS, es posible dar un borde a los elementos, el cual puede tener diferentes combinaciones de
estilos.
Donde su sintaxis especifica el grosor del borde, seguido del tipo o estilo de borde y finalmente el
color del borde.
Veamos el siguiente ejemplo:

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <style>
5. #solid{
6. border: 5px solid blue;
7. }
8. #double{
9. border: 5px double green;
10. }
11. #groove{
12. border: 5px groove yellow;
13. }
14. #ridge{
15. border: 5px ridge red;
16. }
17. #inset{
18. border: 5px inset purple;
19. }
20. #outset{
21. border: 5px outset blue;
22. }
23. #dashed{
24. border: 5px dashed green;
25. }
26. #dotted{
27. border: 5px dotted red;
28. }
29. </style>
30. </head>
31. <body>
32. <p id="solid">Estilo de borde <b>solid</b></p>
33. <p id="double">Estilo de borde <b>double</b></p>
34. <p id="groove">Estilo de borde <b>groove</b></p>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
59
 CSS3

35. <p id="ridge">Estilo de borde <b>ridge</b></p>

36. <p id="inset">Estilo de borde <b>inset</b></p>
37. <p id="outset">Estilo de borde <b>outset</b></p>
38. <p id="dashed">Estilo de borde <b>dashed</b></p>
39. <p id="dotted">Estilo de borde <b>dotted</b></p>
40. </body>
41. </html>
Lo que veremos en el navegador será:

Existen otros estilos que incluyen el nombre de border, pero los veremos mas tarde, ya que estos
conforman parte de los nuevos estándares de CSS3
Otra cosa que también podemos realizar, es colocar solo el trazo correspondiente a un borde
especificado, es decir, no dibujar el contorno completo del borde sino solo una linea, dos o tres. Esto
se logra de la siguiente manera:
 Para colocar el borde superior de un elemento la sintaxis sería:
border- top: 5px solid red;
 Para especificar el borde inferior de un elemento, la sintaxis sería:
border-bottom: 5px solid red;
 Para especificar el borde derecho o izquierdo de un elemento, la sintaxis sería:
border-right/left: 5px solid red;

BACKGROUND

El atributo background, nos permite colocar a toda la pantalla o alguna sección delimitada por algún
elemento un fondo, sea este un color o una imagen.
A continuación realizaremos un pequeño ejemplo donde insertemos una imagen de fondo y
coloquemos a un elemento <h1> y <p> un fondo de color.

Lo que veremos en el navegador será:

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
60
 CSS3

Paso a Paso

Crearemos una página simple con un código como el siguiente:

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. </head>
5. <body>
6. <h1>Usando el Atributo Background</h1>
7. <p>Este es un párrafo con un background de color.</p>
8. </body>
9. </html>
Ahora usaremos la etiqueta <style> dentro de las etiquetas <head> y emplearemos el atributo
background-image y background-color.

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <style>
5. body{
6. background-image: url(img/destellos.png);
7. }
8. h1{
9. background-color: rgb(154,227,200);
10. }
11. p{
12. background-color: #26FF00;
13. }
14. </style>
15. </head>
16. <body>
17. <h1>Usando el Atributo Background</h1>
18. <p>Este es un párrafo con un background de color.</p>
19. </body>
20. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
61
 CSS3

 En este ejemplo, la imagen que usamos emplea la extensión .png sin embargo recuerde que
podemos ocupar las imágenes con la extensión (.jpg o .gif)
 Para emplear la imagen, cree una carpeta llamada img dentro del directorio de nuestra
página y en ella guarde una imagen con el nombre “destellos.png”, esto claro, con fines de
este ejemplo.
 Después, dentro de las etiquetas de estilo, realice una referencia para el elemento body y
emplee el atributo background-image tal como esta en el ejemplo.
 Después emplee el elemento url()
 Dentro de los paracentesis colocamos el vinculo sea, absoluto o relativo, de la dirección de
la imagen.
 Para los elementos <h1> y <p> emplearemos el atributo background-color tal como fue
empleado en el ejemplo
 Note que el elemento <h1> ocupa la notación de color rgb(), mientras que el elemento <p>
ocupa la notación hexadecimal. Consulte la Lección 4 del curso de CSS3.
 Podemos emplear otros propiedades para el background tales como:
o background-size
o background-origin
o background-clip
o background-position
o background-attachment
o background-repeat
 Debe de tener en consideración el fondo que elija para su página:
 Que a imagen tenga relación con su contenido
 Que no se pierdan las letras entre el color del fondo y el color del texto
 Conservar el buen gusto

POSICION FLOAT

La posición flotante o float-position, funciona mediante la relación que existe entre los elementos de
una página, en lugar de definir una ubicación específica.
Esto puede resultar un poco difícil de entender al inicio, pero una vez que domine la posición flotante
será capaz de diseñar la ubicación de los elementos de toda una página web.
Ahora diseñamos un pequeño formulario sobre el cual emplearemos la posicion flotante; por el
momento el código de nuestro formulario será:

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>Formulario</title>
5. <meta charset = "UTF-8" />
6. </head>
7. <body>
8. <form action = "">
9. <fieldset>
10. <label>Nombre</label>
11. <input type = "text" id = "txtNombre" />
12. <label>Dirección</label>
13. <input type = "text" id = "txtDirec" />
14. <label>Teléfono</label>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
62
 CSS3

15. <input type = "text" id = "txtTel" />

16. <button type = "button">
17. Enviar
18. </button>
19. </fieldset>
20. </form>
21. </body>
22. </html>
Antes de trabajar con el atributo FLOAT, revisemos unas pocas cosas sobre el formulario
anteriormente visto.
 El formulario tiene un recipiente fieldset. La mayoría de los elementos del formulario son
elementos en línea por lo tanto el formulario se mostrará de la siguiente manera

 En la práctica común nosotros queremos hacer que la disposición de un formulario sea en

forma de una tabla, sin embargo las buenas prácticas nos indican no utilizar las tablas como
tal, por lo tanto debemos ocupar las reglas que CSS nos proporciona para crear esta
disposición.

Para entender como crear una disposición de tabla a nuestro formulario, debemos entender como
manejan las vistas los navegadores.

Para esto existen tres maneras de tratar las disposiciones de los elementos en un navegador.

1. INLINE: Coloca el texto tal cual los implementamos en el código sin saltos de linea o
cambios.
2. BLOCK: Los elementos cobran independencia y se colocan en su propia linea, es decir uno
debajo del otro.
3. ALTERNATIVE: Especifica una disposición distinta de los elementos, el elemento float es un
ejemplo de ello.

Disposición en bloque “block”

Conociendo estas disposiciones, veremos como aplicar a nuestro formulario del ejemplo anterior una
vista así:

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
63
 CSS3

Para esto simple basta colocar una disposición en bloque a los elementos input y button y nuestro
código quedará de la siguiente manera.

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>Formulario</title>
5. <meta charset = "UTF-8" />
6. <style>
7. input {
8. display: block;
9. }
10. button {
11. display: block;
12. }
13. </style>
14. </head>
15. <body>
16. <form action = "">
17. <fieldset>
18. <label>Nombre</label>
19. <input type = "text" id = "txtNombre" />
20. <label>Dirección</label>
21. <input type = "text" id = "txtDirec" />
22. <label>Teléfono</label>
23. <input type = "text" id = "txtTel" />
24. <button type = "button">
25. Enviar
26. </button>
27. </fieldset>
28. </form>
29. </body>
30. </html>

Vista en dos columnas usando “float”

El atributo “float” nos permite remover la disposición normal de un elemento y aplicarle una posición
flotante diferente.
El atributo “float” describe la relación entre un elemento y sus vecinos
Veamos un ejemplo:

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
64
 CSS3

Para este ejemplo, debemos sustituir los estilos del código anterior por estos:

1. <style>
2. label {
3. float: left;
4. width: 30%;
5. }
6. input {
7. display: block;
8. }
9. button {
10. display: block;
11. }
12. </style>
En este ejemplo mandamos los elementos “label” a la izquierda y les damos un tamaño de 30%
respecto al tamaño de la página.
Al darle un ancho de 30% a los elementos label y un “display: block” a los elementos input, hacemos
que los elementos input se posicionan en la derecha.

En la imagen de arriba veremos en el recuadro azul el elemento label, correspondiente al estilo “float”
y en el recuadro naranja veremos el elemento correspondiente al estilo en bloque, el cual ocupa el
espacio restante del lado derecho, es decir, el 70% restante y al no haber mas espacio, el siguiente
elemento label se posiciona debajo y así sucesivamente.

PROPIEDAD MARGIN

En la lección anterior vimos como manipular la posición de un formulario haciendo uso del atributo
float, a continuación veremos una serie de atributos que nos ayudaran a darle mas formatos de
disposición a nuestro formulario.

En esta lección veremos la propiedad margin.

El margen despeja un área alrededor de un elemento (fuera de este). El margen no tiene un color de
fondo, y es completamente transparente.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
65
 CSS3

La propiedad margin puede recibir diferentes valores:

 auto: el navegador calcula el margen automáticamente
 dimensiones: puede ser en pixeles, pulgadas o porcentajes.

Podemos especificar los margenes de manera individual de la siguiente manera:

1. margin-top:100px;
2. margin-bottom:100px;
3. margin-right:50px;
4. margin-left:50px;
O podemos hacerlo de manera abreviada, de las siguientes maneras.

 margin: 25px 50px 75px 100px;

o margin superior es 25px
o margin derecho es 50px
o margin inferior es de 75px
o margin izquierdo es de 100px
 margin: 25px 50px 75px
o margin superior es 25px
o los márgenes derecho e izquierdo son 50px
o margin inferior es de 75px
 margin: 50px 25px;
o márgenes superior e inferior son 25px
o los márgenes derecho e izquierdo son 50px
 margin: 25px;
o todos los cuatro márgenes son 25px

Ahora aplicaremos estilos a nuestro ejemplo del formulario:

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>Formulario</title>
5. <meta charset = "UTF-8" />
6. <style>
7. fieldset {
8. width: 80%;
9. margin: auto;
10. }
11. form{
12. width: 30%;
13. }
14. label {
15. float: left;
16. width: 30%;
17. margin-left: 15%;
18. }
19. input {
20. display: block;

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
66
 CSS3

21. }
22. button {
23. display: block;
24. margin: auto;
25. }
26. </style>
27. </head>
28. <body>
29. <form action = "">
30. <fieldset>
31. <label>Nombre</label>
32. <input type = "text" id = "txtNombre" />
33. <label>Dirección</label>
34. <input type = "text" id = "txtDirec" />
35. <label>Teléfono</label>
36. <input type = "text" id = "txtTel" />
37. <button type = "button">
38. Enviar
39. </button>
40. </fieldset>
41. </form>
42. </body>
43. </html>
En el formulario anterior aplicamos un margen con un valor auto, el cual le permite al navegador
ajustar un margen predefinido.
Después le colocamos un margen izquierdo a los elementos label, lo cual lo separa del borde del
“fieldset”.
Y también le colocamos un margen con valor auto al elemento button.
Desde luego usted puede implementar diferentes formas para el margen, sin embargo el objetivo de
este tutorial es que usted vea el uso de la propiedad margin.

PROPIEDAD PADDING

Las propiedades de padding CSS definen el espacio entre el borde del elemento y el contenido del
elemento.
El padding crea un área alrededor de los contenidos (en el interior del elemento). El padding se ve
afectado por el color de fondo del elemento.
Esta propiedad nos permite alejar los elementos del borde que los contiene.
Como vimos en el caso de margin podemos especificar el padding con el valor auto, el cual nos
ajusta el contenido con la configuración predefinida del navegador de manera abreviada o
especificando cada padding individualmente.

En CSS, es posible especificar diferentes tipos de pading para diferentes lados:

1. padding-top: 25px;/*Establece el padding superior*/

2. padding-bottom: 25px;/*Establece el padding Inferior*/
3. padding-right: 50px;/*Establece el padding Derecho*/

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
67
 CSS3

4. padding-left: 50px;/*Establece el padding Derecho*/

Para acortar el código, es posible especificar todas las propiedades de padding en una propiedad.
Esto se llama una propiedad abreviada.

 padding:25px 50px 30px 50px;

La propiedad de relleno puede tener de uno a cuatro valores.

 padding: 25px 50px 75px 100px;

o relleno superior es 25px
o relleno derecho es 50px
o relleno de fondo es 75px
o margen izquierdo es 100px
 padding: 25px 50px 75px;
o relleno superior es 25px
o rellenos derecha e izquierda son 50px
o relleno de fondo es 75px
 padding: 25px 50px;
o rellenos superior e inferior son 25px
o rellenos derecha e izquierda son 50px
 padding: 25px;
o los cuatro rellenos son 25px

Apliquemos el padding a nuestro ejercicio de del formulario que traemos desde las lecciones
anteriores.

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>Formulario</title>
5. <meta charset = "UTF-8" />
6. <style>
7. fieldset {
8. width: 80%;
9. margin: auto;
10. }
11. form{
12. width: 30%;
13. }
14. label {
15. float: left;
16. width: 30%;
17. margin-left: 15%;
18. padding-right: 1em;
19. }
20. input {
21. display: block;
22. }
23. button {

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
68
 CSS3

24. display: block;

25. margin: auto;
26. }
27. </style>
28. </head>
29. <body>
30. <form action = "">
31. <fieldset>
32. <label>Nombre</label>
33. <input type = "text" id = "txtNombre" />
34. <label>Dirección</label>
35. <input type = "text" id = "txtDirec" />
36. <label>Teléfono</label>
37. <input type = "text" id = "txtTel" />
38. <button type = "button">
39. Enviar
40. </button>
41. </fieldset>
42. </form>
43. </body>
44. </html>
Bien note en azul el pequeño código que fue añadido.
Copie el código en su editor de texto y corralo en su navegador y vea el cambio con la propiedad
padding y sin la propiedad para que note la diferencia.
Experimente colocando el padding en diferentes lugares para que note los cambios.
En este ejemplo ocupamos la unidad de medida “em”, la cual representa la unidad previamente
especificada, por defecto en la mayoría de los navegadores sería 16px; Bajo esta medida:
 1em – 16px
 2em – 32px

TEXT-ALIGN

La propiedad text-align especifica la alineación horizontal del texto de un elemento.

Los valores que puede asumir esta propiedad serán:

1. text-align: center;
2. text-align: justify;
3. text-align: right;
4. text-align: left;
Este atributo nos permite ajustar los ya conocidos: centrado, justificado, alineado a la derecha o
alineado a la izquierda, este último es el que los navegadores tienen por defecto.

Veamos esta propiedad en práctica dentro de nuestro código del ejemplo del formulario:

1. <!DOCTYPE HTML>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
69
 CSS3

2. <html lang = "es">

3. <head>
4. <title>Formulario</title>
5. <meta charset = "UTF-8" />
6. <style>
7. fieldset {
8. width: 80%;
9. margin: auto;
10. }
11. form{
12. width: 30%;
13. }
14. label {
15. float: left;
16. width: 30%;
17. margin-left: 15%;
18. padding-right: 1em;
19. text-align: right;
20. }
21. input {
22. display: block;
23. }
24. button {
25. display: block;
26. margin: auto;
27. }
28. </style>
29. </head>
30. <body>
31. <form action = "">
32. <fieldset>
33. <label>Nombre</label>
34. <input type = "text" id = "txtNombre" />
35. <label>Dirección</label>
36. <input type = "text" id = "txtDirec" />
37. <label>Teléfono</label>
38. <input type = "text" id = "txtTel" />
39. <button type = "button">
40. Enviar
41. </button>
42. </fieldset>
43. </form>
44. </body>
45. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
70
 CSS3

Recuerde que usted debe de experimentar todas las opciones posibles, para que se familiarice con
esta propiedad.

POSICION ABSOLUTA

CSS permite diferentes maneras de posicionar un elemento, como los anteriormente vistos de
margin, padding, text-align, float, etc. y otro es la posición absoluta.

La posición absoluta nos permite desprender de las propiedades de inline/block a nuestros

elementos y colocarlos en la posición que nosotros queramos.

Aunque no es recomendable para establecer la vista de una página, generalmente se emplea esta
propiedad junto con JS par realizar una determinada animación o movimiento de un determinado
elemento.

Veamos un ejemplo con el siguiente código HTML y CSS.

1. <!DOCTYPE HTML>
2. <html lang = "es">
3. <head>
4. <title>absolute.html</title>
5. <meta charset = "UTF-8" />
6. <style>
7. #bug {
8. position: absolute;
9. left: 100px;
10. top: 50px;
11. }
12. </style>
13. </head>
14. <body>
15. <h1>Absolute Positioning Example</h1>
16. <p>
17. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />
18. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />
19. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />
20. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />
21. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />
22. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />
23. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
71
 CSS3

24. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />
25. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />
26. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!!<br />
27. </p>
28. <p id = "bug">
29. <img src = "img/bug.gif" alt = "bug picture" />
30. </p>
31. </body>
32. </html>
El CSS cambia el comportamiento del elemento “bug” en 4 formas importantes:

 Al atributo “position” se le asigno el valor “absolute”: Esto significa que los mecanismos para
mostrar la vista serán reescritos por la posición previamente especificada.
 Al atributo “left” se le asigno un valor de 100px: Una vez que hemos asignado el atributo
absoluto a un elemento, debemos especificar, (preferentemente en pixeles), en que posición
deseamos colocarla, en el caso de “left” le indicamos cuantos pixeles queremos que se
mueva hacia la izquierda.
 Al atributo “top” se le asigna un valor de 50 px: Esto indica de cuanto será el margen en la
parte superior del elemento. En este caso nuestra referencia es la esquina superior
izquierda, y nuestras coordenadas serían (100, 50).
 El elemento ignora las reglas previamente establecidas: Es por ello que se superpone a los
elementos posteriores, esto puede resultar un problema en el diseño web en ocasiones, pero
para su uso en animaciones suele ser muy útil.

PSEUDO-CLASES

Hover:
Las pseudo-clases se utilizan para añadir efectos especiales a algunos selectores. Este se activa
cuando el cursor del mouse pasa sobre el elemento con la pseudo-clase “hover”.

Tenga presente que los dispositivos móviles pueden tener un trato diferente con respecto a esta
propiedad.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. a:hover{
6. background-color:yellow;
7. }
8. </style>
9. </head>
10. <body>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
72
 CSS3

11. <a href="http://codigoaccion.blogspot.mx/">

12. C&oacutte;digo Acci&oacutte;n</a><br />
13. <a href="http://psicocienciabc.blogspot.mx/">
14. PsicoCiencia BC
15. </a>
16. </body>
17. </html>

Focus:
Esta pseudo-clase se activa cuando un elemento de tipo “input” está a punto de recibir información.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. input:focus{
6. background-color:yellow;
7. }
8. </style>
9. </head>
10. <body>
11. <form>
12. Nombre: <input type="text" name="nombre" /><br>
13. Apellido: <input type="text" name="apellido" />
14. </form>
15. </body>
16. </html>

Active:
Los estilos se aplicaran al elemento de un formulario que se encuentre activo, es decir al que se esté
ocupando.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. a:active{
6. background-color:yellow;
7. }
8. </style>
9. </head>
10. <body>
11. <a href="http://codigoaccion.blogspot.mx/">C&oacutte;digo Acci&oacutte;n</a><br
/>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
73
 CSS3

12. <a href="http://psicocienciabc.blogspot.mx/">PsicoCiencia BC</a>

13. </body>
14. </html>

NUEVOS SELECTORES

Para aplicar un estilo a un determinado elemento, debemos seleccionarlo de una manera precisa
para asegurarnos de que el navegador no muestre resultados inesperados, anteriormente en este
mismo curso ya habíamos visto los selectores por tag name (nombre de la etiqueta), por class y por
id.
Sin embargo esto no suele ser suficiente, y es por ello que al estándar de CSS3 se le han añadido
unas formas nuevas de seleccionar los elementos de un documento HTML. Veamos cuales son:

Selector por atributo:

Ahora usted puede aplicarle estilos a un elemento que contenga un atributo determinado. Por
ejemplo, el elemento input puede adoptar diferentes normas de acuerdo a lo especificado en su
atributo type=””. Usando la nueva sintaxis de CSS3, es posible aplicarle estilos únicamente a los
elementos input de un tipo específico. Veamos un ejemplo de la sintaxis:

1. input[type="text"]{
2. background-color: #CCCFFF;
3. }
De esta manera, todos los elementos input con el atributo type=”text”, tendrán un color de fondo
#CCCCFF.

Not:
Existen ocasiones en las que se desea una selección a la inversa. Por ejemplo, imagine que desea
especificarle un determinado estilo a todos los párrafos que no pertenecen a una determinada clase:

1. p:not(.box){
2. border: 1px solid red;
3. }
De esta manera se le aplicaran los estilos {border: 1px solid red;} a todos los párrafos, excepto
aquellos que contengan la clase box.

Nth-child:
El selector nth-child te permite seleccionar uno o mas elementos en un grupo, en su versión básica
se emplea un índice para indicar que elemento deseamos modificar.

1. #miLista>li:nth-child(1){
2. border: 1px solid blue
3. }
Esto permite colocarle estilos al primer elemento de un grupo o conjunto. En este caso se le ha
aplicado un borde al primer elemento de una lista, es decir, a la primera etiqueta <li></li>.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
74
 CSS3

Incluso, el indice que recibe el selector, puede ser una formula, como por ejemplo, aplicar estilos
distintos a los elementos pares y a los elementos nones:

1. #miLista>li:nth-child(2n){
2. border: 1px solid blue;
3. }
Y para imapres seria:

1. #miLista>li:nth-child(2n+1){
2. border: 1px solid red;
3. }
Este mismo mecanismo ya esta pensado en CSS3, y para colocarle estilos distintos a los elementos
pares e impares, existen las palabras clave, “even” y “odd” respectivamente, que se colocan en vez
del índice:

1. #miLista>li:nth-child(even){
2. background: blue;
3. }
Y para impares seria:

1. #miLista>li:nth-child(odd){
2. background: red;
3. }

Existen otras variantes para el selector nth-child:

 :nth-last-child(N): Trabaja exactamente igual que nth-child, la unica diferencia es que

comienza a contar a partir del último elemento del grupo.
 :nth-of-type(N): Trabaja como nth-child; solo que solo afecta a los elementos de un
determinado tipo, y los demás son ignorados.
 last-child: Selecciona el último elemento de un grupo. Muy eficiente en el caso de listas
dinámicas donde el último elemento va cambiando.
 last-nth-of-type(N): Trabaja como nth-child; pero comienza desde el final del grupo
 first-child: Selecciona el primer elemento.

Actualmente estos selectores son soportados por todos los navegadores modernos, y a partir de IE9,
ya se pueden emplear.

COLUMNAS

Desde simple, los desarrolladores web, han buscado la manera de dar formato y diseño atractivo a
sus sitios mediante el uso de frames, tablas, elementos flotantes “float”, y finalmente CSS3 trae para
nosotros un soporte para solucionar esto, mediante la implementación de columnas.
Veamos y analicemos el siguiente código para ver como funciona.

1. #main{
2. column-count: 3;

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
75
 CSS3

3. column-gap: 2em;
4. column-rule: 5px double red;
5. -webkit-column-count: 3;
6. -webkit-column-gap: 2em;
7. -webkit-column-rule: 5px double red;
8. -moz-column-count: 3;
9. -moz-column-gap: 2em;
10. -moz-column-rule: 5px double red;
11. } // end main
Las tres características determinan o siguiente:

 column-count: indica el número de columnas.

 column-gap: El espacio entre columnas utilizando estándar CSS mediciones.
 column-rule: La línea vertical (si los hay) entre las columnas. Esta regla es definida con
exactamente los mismos parámetros que la norma frontera.

Existen algunas limitaciones y/o variaciones de navegador a navegador.

Tampoco se puede hacer que una columna sea de un tamaño diferente a las demás, ya que esto se
determina de manera automática, de acuerdo al ancho del dispositivo.
Emplear columnas para el diseño de nuestro sitio es tentador, sin embargo, el modelo de caja es
más aconsejable.
Las columnas son más adecuadas para el diseño de estilo revista con el texto que fluye entre
columnas.

TEXT-STROKE

Con CSS3, usted puede cambiar la apariencia de las fuentes de otra manera.
Usted puede especificar un color de trazo para el texto. Esto define un contorno alrededor de la letra.
Puede especificar el color del trazo (usando cualquiera de los colores estándares de CSS). También
puede cambiar el ancho de trazo (usando el atributo size).
Vea el siguiente ejemplo:
1. h2 {
2. color: yellow;
3. -webkit-text-stroke: 2px red;
4. font-size: 300%;
5. }
Algunos navegadores no soportan el estilo de text-stroke, por eso conviene especificarlo con el
soporte de -webkit-.

TEXT-SHADOW

Shadows, o sombras, son otro estilo común en los nuevos diseños de páginas web.
Las sombras añaden un efecto de profundidad a una página, pero también pueden mejorar la
legibilidad (si se utiliza correctamente) para levantar el título de la página.
El atributo text-shadow era técnicamente parte de CSS2, pero recientemente ha sido soportado por
la mayoría de los navegadores.

Para declararlo, se hace de la siguiente manera:

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
76
 CSS3

1. h2 {
2. font-size: 300%;
3. text-shadow: 3px 3px 5px #666666;
4. }
El estilo text-shadow recibe cuatro argumentos:

 offset-x:
o Determina hasta qué punto en el eje x se desplaza la sombra, sobre el texto original.
o Un valor positivo mueve la sombra a la derecha, y un valor negativo mueve a la
izquierda.
o offset-y:
o Indica hasta qué punto en el eje Y (arriba-abajo), se desplazara la sombra desde el
texto original.
o Un valor positivo mueve la sombra hacia abajo, y un negativo valor mueve la sombra
hasta
 blur:
o Especifica el radio de desenfoque de la sombra.
o Si el valor es 0px, no hay falta de definición, y la sombra se ve como el texto original.
o En general, usted querrá el desenfoque equivalente al largo de sus
desplazamientos. Esto permite a la sombra reconocerse como una sombra del texto
sin llegar a ser una distracción.
 color:
o Define el color de la sombra.
o Por lo general, un color gris oscuro es el color estándar de la sombra, pero también
puedes probar otros colores para efectos especiales.

La mayoría de los navegadores soportan este estilo, solamente IE se pone sus moños.

MODELO CAJA FLEXIBLE

El fin primordial de los diseñadores web, se centra en la apariencia y distribución de los elementos
del sitio, existen diferentes formas de hacerlo, a continuación veremos que, si no es el mejor, al
menos es un modelo que perite un diseño flexible y atractivo. Veamos como crear una distribución
de modelo de caja.

Veamos algunos scripts para ver el funcionamiento del siguiente script:

1. <div id = “a”>
2. <div id = “b”>b</div>
3. <div id = “c”>c</div>
4. <div id = “d”>
5. <div id = “e”>e</div>
6. <div id = „f“>f</div>
7. </div>
8. </div>
El siguiente script de CSS3, le proporcionara los estilos al código anterior:

1. div {
2. border: 1px solid black;

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
77
 CSS3

3. }
4. #a {
5. width: 300px;
6. height: 200px;
7. box-orient: horizontal;
8. display: box;
9. }
10. #b {
11. box-flex: 1;
12. }
13. #c {
14. box-flex: 1;
15. }
16. #d {
17. display: box;
18. box-orient: vertical;
19. box-flex: 2;
20. }
21. #e {
22. box-flex: 1;
23. box-ordinal-group: 2;
24. }
25. #f {
26. box-flex: 1;
27. }
Veamos los nuevos elementos que hemos empleado en CSS:

 Primero le especificamos a todos los elementos div, un borde, hasta aquí, NADA NUEVO.
 El div con el id=”a”, al ser el contenedor primario, le damos un alto y ancho.
 Observe que al elemento display, le hemos indicado el atributo box. Este atributo, permite
manejar el modelo de caja flexible.
 El atributo box-orient se emplea para determinar si los elementos anidados se mostrarán de
manera vertical o de manera horizontal.
 También podemos especificar el espacio que ocuparan los elementos hijos, esto se
determina con el atributo box-flex.
 Si a un elemento le damos el valor de cero, este ocupara el menor espacio como sea posible.
 Si el valor de box-flex es uno, todos ocuparan el mismo espacio
 Si un elemento tiene el valor de dos, y los demas tienen valor de uno, este elemento ocupará
el doble de espacio que todos los demás.
 Veamos el contenedor d, el cual contiene otro elemento llamado display, con el atributo box.
lo cual perite hacer al contenedor flexible.
 El elemento box-ordinal-group, indica el orden en el cual aparecerán los elementos. Por
defecto, todos contienen el valor de uno, por lo tanto aparecen en el orden en el que fueron
escritos.

Para no correr riesgos, de que los navegadores de los usuarios no soporten estos atributos, los
podemos implementar de la siguiente manera.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
78
 CSS3

1. #a {
2. width: 300px;
3. height: 200px;
4. -moz-box-orient: horizontal;
5. display: -moz-box;
6. -webkit-box-orient: horizontal;
7. display: -webkit-box;
8. }
9. #b {
10. -moz-box-flex: 1;
11. -webkit-box-flex: 1;
12. }

DEGRADADOS

Los degradados o gradientes, son secuencias de colores, donde el degradado va de un color a otro.
Los degradados mas comunes son los lineales y los circulares aunque los puede haber de muchas
mas maneras.
Anteriormente los degradados se realizaban previamente en un editor de imágenes y se colocaban
como fondeo (background-imgae). Pero ahora CSS3 nos permite implementar los degradados
directamente en el navegador.
Desafortunadamente no hay aun una sintaxis de compatibilidad definida para los gradientes.
Primero veremos la que se ocupa para Mozilla:
Comencemos con un atributo de imagen

1. background-image:
2. -moz-linear-gradient(left, blue, white);
Lo que especificamos fue:
 Un degradado lineal.
 El cual comienza del lado izquierdo
 Comienza con el color azul y termina con el color blanco.

Para el caso del WebKit la sintáis es diferente:

1. background-image:
2. -webkit-gradient(
3. linear,
4. left center, right center,
5. from(blue),
6. to(white)
7. );
Igual que con Mozilla, comenzamos especificando el gradiente a una imagen.

Lo que especificamos fue:

 En el primer parámetro el tipo de gradiente
 En el siguiente parámetro especificamos la dirección que seguirá el degradado.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
79
 CSS3

 El valor de left center, right center, especifica que el degradado se debe mover de izquierda
a derecha.
 El valor left top, right bottom crearía una linea diagonal, y así puede realizar mas
combinaciones.
 Con los parámetros from () y to () especificamos de donde a donde van los colores,
comenzando a partir de from ().

Usted puede colocar un parámetro mas, color-stop, este se coloca entre from () y to ().

 Este parámetro recibe dos valores, un porcentaje y un valor:

1. background-image:
2. -webkit-gradient(
3. linear,
4. left center, right center,
5. from(blue),
6. color-stop(51%,#901A1C),
7. to(white)
8. );
Para el caso de los degradados circulares, la sintaxis es similar, teniendo en cuenta las diferencias
tanto para mozilla como para webkit.

Par mozilla sería:

1. background-image:
2. -moz-radial-gradient(blue, white);
Lo único que tiene que especificar los colores que irían de adentro hacia afuera.

Para el caso de WebKit, a sintaxis es la siguiente:

1. background-image:
2. -webkit-gradient(
3. radial,
4. center center, 0,
5. center center, 100,
6. from(white),
7. to(blue)
8. );
Para WebKit

 Asegurarse de colocar el degradado como fondo par imagen, utilizando background-image.

 Establecer el degradado como radial
 En el siguiente parámetro determinamos el centro donde partirá e primer color, o cual se
especifica center center, 0. (el “0” representa el radio)
 En el siguiente valor colocamos el centro y radio del segundo color, e cual va a tener un
radio mayor
 Por ultimo especificamos los colores de inicio y con el que finaliza.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
80
 CSS3

BORDES CON IMÁGENES

CSS3 te permite usar una imagen como el borde de algún elemento. Este mecanismo es bastante
poderoso, ya que al colocar una imagen de borde, CSS detecta automáticamente las esquinas y
limites del contorno del elemento y posiciona la imagen, ya sea repitiéndola (repeat) o alargándola
(stretch), a los parámetros del elemento asignado.

Para colocar la imagen debe almacenarla dentro de su directorio del sitio web, y aplicar el siguiente
código CSS, el cual colocará un borde a todos los elementos <h2>…</h2> (en el caso de este
ejemplo).

1. h2{
2. text-align: center;
3. border-width: 15px;
4. border-image: url("imagenBorde.png") 25% repeat;
5. -webkit-border-image: url("imagenBorde.png") 25% repeat;
6. -moz-border-image: url("imagenBorde.png") 25% repeat;
7. }
En el caso del html, tendremos una página simple con un título h2. Y ya junto con el CSS quedaría
así:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2{
6. text-align: center;
7. border-width: 28px;
8. border-image: url("imagenBorde.png") 28 round;
9. -webkit-border-image: url("imagenBorde.png") 28 round;
10. -moz-border-image: url("imagenBorde.png") 28 round;
11. }
12. </style>
13. </head>
14. <body>
15. <h2>Elemento título con un borde</h2>
16. </body>
17. </html>

Pasos para añadir un borde con imagen:

 Almacena tu imagen en el directorio de tu sitio. Preferentemente la imagen debe poseer un

diseño adecuado para ser empleada como borde, ejemplo:

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
81
 CSS3

En el caso del ejemplo pasado, el efecto logrado sería:

 Especifica el ancho del borde

1. h2{
2. border-width: 15px;
 Especifica que tanto del borde de la imagen deseas, en este caso el ancho especificado
anteriormente, corresponde con el ancho que he asignado al borde de la imagen. En este
parámetro puedes emplear porcentajes, o por defecto pixeles. Ademas puedes agregar
cuatro valores distintos, correspondientes a los 4 lados del borde del elemento.

1. h2{
2. border-image: url("imagenBorde.png") 25% repeat;
 Finalmente añade el comportamiento deseado. Este puede adquirir diferentes valores, el
resultado de cada uno de ellos se ve a continuación:

Repeat.

Round.

Stretch.

Observe como con el comportamiento “round”, el navegador detecta automáticamente, el ajuste ideal
de la imagen para que no sufra recortes

REFLEXIONES

Una de las nuevas capacidades visuales de CSS3, es la posibilidad de crear efectos de reflexión
empleando únicamente la siguiente línea de código.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
82
 CSS3

1. .elemento{
2. -webkit-box-reflect: below 2px;
3. }
El proceso para añadir un efecto de reflexión en nuestros elementos es bastante sencillo:

 Añadimos el código CSS, haciendo referencia al elemento al que le deseamos aplicar este
efecto
 Especificar en que lugar se desea colocar la reflexión. Normalmente se coloca (below), pero
usted también puede indicar (above, left o right)
 Finalmente indicaremos una anchura a la brecha. Esta brecha generalmente se especifica
en pixeles.

Veamos un breve ejemplo:

Nota: Recuerde que las reflexiones no suelen ser copias fieles de la original. En la parte mas distal
del elemento se suele difuminar el contorno, es por ello que CSS3 nos permite añadir un degradado,
en este caso el degradado comienza desde un completo opaco, hasta un completo transparente,
recuerde que usted también puede emplear el gradiente con otros valores.

1. elemento{
2. -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
3. }
Lo que veremos en el navegador con este código será:

Reflección CSS3

BORDES REDONDEADOS

Desde tiempo atrás, el crear el efecto de bordes redondeados ha sido un desafío para todos los
diseñadores web, sin embargo con CSS3, basta una sola línea de código parra lograr este efecto
tan demandado.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
83
 CSS3

Con el siguiente código, lograremos un bonito efecto de CSS3, junto con otras propiedades de
estilos:

1. h1{
2. width: 60%;
3. background-color: #000066;
4. color: #9999ff;
5. border: #9999ff 3px groove;
6. margin: auto;
7. text-align: center;
8. border-radius: 10px;
9. }
Todo el código anterior ya se encontraba en la versión previa de CSS2, lo único nuevo es “border-
radius”. Ese parametro nos permite especificar el redondeo de las esquinas. Donde dicha esquina
será remplazada por un arco, el valor que especificamos en border-radius, equivale al radio de dicho
arco, este valor puede estar dado en pixeles, porcentajes, o cualquier otro valor reconocible por CSS.

También esta propiedad le permite especificar el borde redondeado de manera explicita, ej:

borrder-top-left-radius: 5px;

O de manera implicita, aceptando dos o cuatro valores, ej:

border-radius: 5px 10px 5px 10px;

SOMBRAS BOX SHADOW

Usted puede añadir una sombra a cualquier elemento CSS3 con el atributo “box-shadow”. Este
atributo funciona de manera similar al atributo “text-shadow”.

El siguiente código añade una atractiva sombra para un contenedor div dado. Ej:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. width: 500px;
7. height:200px;
8. }
9. .shadow{
10. box-shadow: 10px 10px 10px #000000;
11. -webkit-box-shadow: 10px 10px 10px #000000;
12. -moz-box-shadow: 10px 10px 10px #000000;
13. }
14. </style>
15. </head>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
84
 CSS3

16. <body>
17. <div class="shadow"></div>
18. </body>
19. </html>
Lo que veremos en el navegador, será:

El atributo “box-shadow” recibe los siguientes parámetros:

 x-offset o Desplazamiento horizontal de la sombra: La sombra de un elemento suele estar

un poco desplazada con respecto al elemento que la produce y su posición será en función
del ángulo con el que llegue la luz. En el caso de este ejemplo el primero de los valores,
10px, quiere decir que la sombra aparecerá 10 píxeles a la derecha. Si la sombra
quisiéramos que apareciera un poco hacia la izquierda del elemento original que la produce,
pondríamos un valor negativo a este atributo. Cuanto más desplazamiento tenga una
sombra, el elemento que la produce parecerá que está más separado del lienzo de la página.
 y-offset o Desplazamiento vertical de la sombra: El segundo valor que colocamos en el
atributo box-shadow es el desplazamiento vertical de la sombra con respecto a la posición
del elemento que la produce. Este valor es similar al desplazamiento horizontal. Valores
positivos indican que la sombra aparecerá hacia abajo del elemento y valores negativos
harán que la sombra aparezca desplazada un poco hacia arriba. En el caso del anterior
ejemplo, con -10px estamos indicando que la sombra aparecerá desplazada 10 píxeles hacia
arriba del elemento.
 cast-length o Difuminado: El tercer valor indica cuánto queremos que esté difuminado el
borde de la sombra. Si el difuminado fuera cero, querría decir que la sombra no tiene ningún
difuminado y aparece totalmente definida. Si el valor es mayor que cero, como en nuestro
ejemplo 10px, quiere decir que la sombra tendrá un difuminado de esa anchura, 10 píxeles
en el ejemplo.
 Color de la sombra: El último atributo que se indica en el atributo box-shadow es el color de
la sombra. Generalmente las sombras en el mundo real tienen un color negro o grisaceo,
pero con CSS3 podremos indicar cualquier gama de color para hacer la sombra, lo que nos
dará bastante más versatilidad a los diseños gracias a la posible utilización de sombras en
distintos colores, que puedan combinar mejor con nuestra paleta. En el ejemplo anterior
habíamos indicado una sombra con color negro.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
85
 CSS3

TRANSFORMACIONES

CSS3 incluye la habilidad de aplicar transformaciones geométricas a un elemento dado. Esto

representa una capacidad sin precedentes para el manejo de elementos en un entorno Web.
El atributo “transform” te permite aplicar cualquier tipo de transformación matemática a cualquier
elemento html, como un div, section, article, img, etc.

Los parámetros que acepta este atributo son:

 translate: Permite mover el objeto desde su posición original. Esta propiedad emplea los
valores (x, y) para indicar la nueva ubicación en la que sera posicionada el elemento.
 rotate: Gira un elemento. El valor se expresa en grados, si es positivo gira en el sentido de
las agujas del rejo, si es negativo, en el sentido contrario.
 scale: Aumenta o disminuye el tamaño del elemento; su valor normal es 1. Valores
superiores aumentan su tamaño e inferiores lo disminuyen así, 1.5 hará que se vea un 50%
más grande y 0.5 un 50% más chico; si sólo se coloca un valor, este se aplica a ambas
direcciones, caso contrario, el primero indica el ancho (x) y el segundo el alto (y). scaleX(x)
y scaleY (y) son lo mismo pero sólo afectan al ancho (X) o al alto (Y).
 skew: Skew significa sesgar o sea, inclinar y eso hace esta propiedad que también utiliza
ángulos como valor (grados), el primero afecta al eje X (horizontal) y el segundo al eje Y
(vertical). skewX(a) y skewY(a) hacen lo mismo pero sólo sobre uno de los ejes.

Observe el siguiente código, para entender un poco mejor como funciona este atributo:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #caja1, #caja2, #caja3, #caja4, #caja5{
6. width: 100px;
7. height: 80px;
8. border: 3px solid black;
9. margin: 20px;
10. }
11. #caja1{
12. background-color: blue;
13. }
14. #caja2{
15. background-color: green;
16. transform: translate(100px, 0px);
17. -webkit-transform: translate(100px, 0px);
18. -moz-transform: translate(100px, 0px);
19. }
20. #caja3{
21. background-color: red;
22. transform: rotate(45deg);
23. -webkit-transform: rotate(45deg);
24. -moz-transform: rotate(45deg);
25. }

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
86
 CSS3

26. #caja4{
27. background-color: yellow;
28. transform: scale(2) translate(100px, 0);
29. -webkit-transform: scale(2) translate(100px, 0);
30. -moz-transform: scale(2) translate(100px, 0);
31. }
32. #caja5{
33. background-color: purple;
34. transform: skew(30deg,20deg);
35. -webkit-transform: skew(30deg,20deg);
36. -moz-transform: skew(30deg,20deg);
37. }
38. </style>
39. </head>
40. <body>
41. <div id="caja1">Caja 1</div>
42. <div id="caja2">Caja 2</div>
43. <div id="caja3">Caja 3</div>
44. <div id="caja4">Caja 4</div>
45. <div id="caja5">Caja 5</div>
46. </body>
47. </html>
Lo que veremos en el navegador será:

Transformaciones.

Esto combinado con algunos elementos hover, y transiciones permite crear grandes efectos con
CSS3, cuyo único límite creativo es la imaginación. Pero esto ya es tarea de ustedes.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
87
 CSS3

TRANSISIONES Y ANIMACIONES

Quizá una de las propiedades más llamativas de CSS3 son las transiciones, o la posibilidad de
realizar pequeñas animaciones. Esta nueva propiedad junto con pseudo.clases como: hover,
realmente nos permite crear cosas muy interesantes.

Por ejemplo observemos el siguiente código, el cual consta de un título que cambia de negro a rojo
a pasar el cursor sobre el elemento.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #caja1{
6. width: 100px;
7. height: 100px;
8. border: 3px solid black;
9. }
10.
11. #caja1:hover{
12. transform: rotate(180deg);
13. -webkit-transform: rotate(180deg);
14. -moz-transform: rotate(180deg);
15. }
16. </style>
17. </head>
18. <body>
19. <div id="caja1">Caja 1</div>
20. </body>
21. </html>
Quizá esto ya lo conozca, sin embargo observe lo que sucede al añadir la propiedad transition:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #caja1{
6. width: 100px;
7. height: 100px;
8. border: 3px solid black;
9. transition: all 1s ease-in;
10. -webkit-transition: all 1s ease-in;
11. -moz-transition: all 1s ease-in;
12. }
13.
14. #caja1:hover{

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
88
 CSS3

15. transform: rotate(180deg);

16. -webkit-transform: rotate(180deg);
17. -moz-transform: rotate(180deg);
18. }
19. </style>
20. </head>
21. <body>
22. <div id="caja1">Caja 1</div>
23. </body>
24. </html>
Observe como este pequeño cambio crea un efecto totalmente nuevo, la transición de negro a rojo,
se realiza de manera sutil y elegante, dándole un sentido de gran estética a este proceso.

Y lo mejor no termina aquí, si las transiciones las combinamos junto con las transformaciones, que
de hecho es lo más usual, podremos lograr cosas realmente increíbles.

La sintaxis de transition es la siguiente:

1. p{
2. transition:[Propiedad CSS] [Tiempo] [Función de Tiempo] [Retardo];
3. }
El atributo “transition puede aceptar los siguientes valores”

Propiedad CSS: Aquí podemos colocar la propiedad CSS que será animada, podemos colocar
cualquier propiedad CSS que este en la siguiente lista:

background-color
border
border-radius
color
top
bottom
left
right
box-shadow
clip
fill
height
width
line-height
letter-spacing
margin
opacity
outline
stroke
text-shadow
vertical-align
word-spacing
visibility
z-index

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
89
 CSS3

Existe también una opción “comodín” que no importa cual propiedad o incluso si son dos esta opción
seleccionará todas las propiedades CSS:
all

Tiempo: Aquí podemos colocar el tiempo que durará nuestra animación, ¿cuánto tiempo quieres que
tarde en agregar ese borde rojo? Lo podemos colocar en unidades de segundos, cualquier cantidad
de segundos que quieras.

.1s
.5s
1s
10s

Siempre recordando que no hay que abusar de esta propiedad, pues si ponemos mucho tiempo el
usuario se aburrirá de esperar a que ocurra el efecto. Y si colocamos demasiado poco tiempo no
podrá ver la animación.

Funcion de Tiempo: Aquí es un tanto extraño para muchos que no son muy adentrados en el tema
de animaciones. Se trata de unas funciones que están predefinidas que permiten que avance mas
rápido al inicio de la animación y mas lento al final, al revés o que dure mas tiempo en el medio de
la animación.

Podemos colocar cualquiera de estas funciones que ya están definidas:

 linear.- La animación se realiza de manera uniforme

 ease.- La animación acelera al inicio se retarda un poco y se acelera al final de nuevo
 ease-in.- La animación se retarda al inicio, pero lo repone al final
 ease-out.-La animación se acelera al inicio pero se retarda al final,
 ease-in-out.- La animación se retarda al inicio se acelera un poco luego se retarda
al final de nuevo.

Cabe rescatar que aunque se retarde al inicio, al final o a la mitad de la animación siempre durá el
tiempo que le definimos en la sub-propiedad [Tiempo].

Retardo: Aqui colocaremos el tiempo que tardará la animación en iniciar. Lo debemos definir en
unidades de segundos. Tambien hay que tener un poco de tacto y ponernos en los zapatos de
nuestras visitas y no colocar demasiado tiempo.

.1s
.5s
1s
10s

Recuerde que estos efectos no están disponibles en todos los navegadores de manera nativa, es
por ello que debe emplear los prefijos -webkit- y -moz- para asegurar su funcionamiento en la mayoría
de los navegadores.

TRANSPARENCIAS

CSS3 nos permite tener un control total sobre el manejo de opacidades en imágenes. CSS3 nos
proporciona la propiedad “opacity“, la cual puede recibir valores de cero a uno, donde cero-(0) es
completamente transparente y uno-(1) es totalmente opaco.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
90
 CSS3

Observe el siguiente ejemplo de un elemento con transparencia, superpuesto en una imagen.

HTML
<div id="caja"></div>

CSS3
body{
background-image: url(http://sergimateo.com/wp-content/2012/01/fondo-
madera-negro.jpg);
}
#caja{
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 100px;
border: 1px solid red;
background-color: white;
opacity: 0.3;
}

También podemos realizar superposiciones de colores y crear combinaciones:

HTML
<div id="caja1"></div>
<div id="caja2"></div>
<div id="caja3"></div>
<div id="caja4"></div>

CSS3
#caja1{
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:5px;
left:10px;
background-color: red;
opacity: .9;

}
#caja2{
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:20px;
left:30px;
background-color: green;
opacity: .5;
}
#caja3{
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:40px;
left:50px;

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
91
 CSS3

background-color: blue;
opacity: .5;
}
#caja4{
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:60px;
left:70px;
background-color: yellow;
opacity: .5;
}

Como se puede dar cuenta esta posibilidad que nos proporciona CSS3, es muy poderosa si se le
emplea con buen gusto, pero eso ya es la tarea de cada quien.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
92
 JavaScript

JavaScript

INTRODUCCIÓN A JAVASCRIPT

JavaScript se emplea en una página web para dotarla de funcionalidades que el HTML no puede
proporcionarle.
La integración de JavaScript con HTML se logra mediante las etiquetas <script> y </script>.
La etiqueta de <script> anteriormente debía especificar el lenguaje al que hacia referencia, pero bajo
los nuevos estándares de HTML5 solo basta colocar la etiqueta <script>…el Código… </script>.

La sintaxis correcta para incluir código JS en nuestra página es:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8.
9. //-->
10. </script>
11. </head>
12. <body>
13. </body>
14. </html>
Dentro del Script encontramos las líneas <!– y //–> que corresponden a los comentarios en HTML,
se emplean para indicar que si el navegador no soporta JavaScript, se ignoren las líneas de código.
Hoy día no existe prácticamente ningún navegador que no soporte JS.

Existe otro tag que podemos incorporar a nuestras páginas, se trata de: <noscript> y </noscript> que
permiten intercalar un código alternativo en caso de que el navegador no soporte JS.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8.
9. //-->
10. </script>
11. <noscript>
12. Mala pata, amigo. Su navegador no soporta scripts.
13. <br />
14. Consiga uno nuevo o retírese de este negocio.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
94
 JavaScript

15. </noscript>
16. </head>
17. <body>
18. </body>
19. </html>
En el caso de estos ejemplos he colocado el script en la sección delimitada por las etiquetas <head>
y </head>, lo cual no tiene por que ser así, ya que los script pueden colocarse en head, o en body,
indistintamente.

Primer script

Veremos un script con la famosa frase hola mundo la cual guardaremos con el nombre de
“saludo.html”.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. alert("Hola desde Javascript");
9. //-->
10. </script>
11. </head>
12. <body>
13. Esto es el body de la página.
14. </body>
15. </html>

COLOCAR JS CORRECTAMENTE

El código JavaScript puede ser colocado en varios lugares del documento HTML: entre
<head></head> o entre las etiquetas <body></body>.
El lugar mas común para colocar el código JavaScript, es entre <head> y </head>, cerca de la parte
superior de la página.
Existen otras consideraciones a la hora de escribir, o colocar el código JavaScript dentro de nuestro
documento, por ejemplo. Cuando estamos trabajando en una versión extendida de HTML, por
ejemplo (XHTML), la manera correcta de escribir nuestro código es:

1. <script type="text/javascript">
2. <![CDATA[
3. //Nuestro código JavaScript
4. ]]>
5. </script>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
95
 JavaScript

También existen variaciones en la interpretación del JavaScript, por la versión del navegador que
ocupe el usuario, como el hecho de que navegadores antiguos no reconocen el “CDATA”, por tal
motivo es común que se coloquen a modo de comentario:

1. <script type="text/javascript">
2. //<![CDATA[
3. //Nuestro código JavaScript
4. //]]>
5. </script>
Para incorporar código JavaScript entro de nuestro documento lo podemos hacer básicamente de
tres maneras:

Código en linea

De esta manera se coloca el JavaScript dentro de una etiqueta HTML:

1. <a href="#" onclick="javascript:expand()">

Código embebido

Es una de las formas usuales para pequeños fragmentos de código. Se hace colocando el código
dentro de las etiquetas <script> y </script> dentro del <head> o el <body>.

1. <html>
2. <head>
3. <title>
4. P&aacute;gina con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var edad;
9. edad = prompt ("Introduzca su edad (en números)", "");
10. edad = parseInt (edad); //Recuerde que prompt() siempre genera una cadena literal.
11. if (edad > 17) // Se comprueba si es mayor de edad
12. {
13. alert ("Usted es adulto.");
14. } else {
15. alert ("Usted es menor de edad.");
16. }
17. //-->
18. </script>
19. </head>
20. <body>
21. </body>
22. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
96
 JavaScript

Codigo externo

Colocar el código JavaScript en un enlace externo es una de las formas mas recomendadas. Se
realiza mediante un enlace que hace referencia a nuestro archivo externo, y desde luego nuestro
archivo externo con su correspondiente código JavaScript.

1. <html>
2. <head>
3. <title>
4. P&aacute;gina con Javascript.
5. </title>
6. <script src="script/saludo.js" type="text/javascript"></script>
7. </head>
8. <body>
9. Esto es el cuerpo de la p&aacute;gina.
10. </body>
11. </html>
Esta manera de incluir código JavaScrit, nos permite:

 Un mismo archivo enlazarlo a varias páginas, de esta manera cunado desee hacer
modificaciones en su código JavaScript, con una sola módificación todas las páginas se
verán afectadas. De tener el código separado en cada página, tendría que modificar varias
veces el mismo código
 De lo anterior resulta una manera mas fácil de mantener su sitio web.
 Al tener el código JavaScript en un archivo separado, la permite al navegador almacenar
dicho archivo en la chace y por lo tanto la carga de la página se hace mas rápida.
 Hace que su sitio sea mas legible al mantener la estructura HTML y código JavaScript por
separado.

FUNCIÓN alert( )

Para empezar veremos que es una Función de JavaScript.

Una función se compone de una palabra reservada (el nombre de la función) y de unos paréntesis
argumentales.
Aquello que coloquemos entre los paracentesis argumentales, sera lo que la función ocupara para
su operativa.

Tenga presente que algunas funciones pueden tener los paracentesis vacíos, pero de todas formas
deberán ser colocados inmediatamente después del nombre de la función SIN DEJAR ESPACIO

Case Sensitive: A diferencia de HTML, JavaScript es de los lenguajes llamados Case Sensitive, lo
cual indica que detecta entre mayúsculas y minúsculas.
Por lo tanto no podemos alterar las funciones como “Alert o alert”, no las podemos alterar, de lo
contrario no serán interpretadas.

En la lección anterior del curso de JavaScript, empleamos la función alert(), la cual genera un cuadro
de aviso, deteniendo la carga de la página hasta que el usuario pulse el botón que se incluye en
dicho cuadro de aviso.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
97
 JavaScript

Esta función se emplea cuando queremos mostrarle un mensaje al Usuario, el cuadro aparecerá
pese a las acciones del usuario, bueno a no ser que desactive las ventanas emergentes, pero en la
mayoría de los navegadores se mostrara el cuadro.
Entre los paracentesis se coloca aquello que nosotros queremos que el usuario vea, puede ser un
texto literal colocado entre comillas (luego hablaremos de esto), un numero o una variable (la cual
también la discutiremos posteriormente).

1. <html>
2. <head>
3. <title>
4. P&aacute;gina con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. alert("Hola desde Javascript");
9. //-->
10. </script>
11. </head>
12. <body>
13. Esto es el body de la p&aacute;gina.
14. </body>
15. </html>
En el ejemplo anterior, recuerde que puede omitir el (language=”javascript”).
También observe el (;) a final de la función, la mayoría de las instrucciones de cualquier lenguaje se
emplean comillas salvo algunas excepcione que veremos después.
Otra cosa que debe tener presente, es que las instrucciones de deben ir en una sola línea sin pulsar
[ENTER].

Ejecute el código en su navegador y verá lo que pasa, además pruebe con otros argumentos como:

1. alert("Argumento entre comillas");

2. alert(Argumento sin comillas);
3. alert(345);
4. alert("345");
Las ultimas dos alertas son mostradas iguales, sin embargo son de tipo diferente.
 alert(345) – Es un dato de tipo “number” es decir, dato numérico
 alert(“345″) – Es un dato de tipo “string” es decir, dato literal

COMENTARIOS

Al igual que todos los lenguajes de programación nos permite colocar comentarios para documentar
el código.
Es importante que usted tenga el hábito de colocar comentarios para facilitar la comprensión de
nuestros códigos, imagine que tiene un código de 300 lineas que hace varias cosas y manipula
diferentes elementos HTML de nuestra página, tal vez no tenga problemas al manipular el código los
primeros días después de haberlo terminado, sin embargo si dentro de tres meses usted desea

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
98
 JavaScript

realizar alguna modificación, frecuentemente resulta mas viable tirar todo el trabajo y hacerlo de
nuevo a estar descifrando que hace cada cosa.
La alternativa es que el código esté profusamente documentado, con la finalidad de que usted sepa
que hace cada cosa y tenga una referencia para trabajar con él.
Y además, en la actualidad el trabajo en equipo de los programadores es indispensable y si su código
no esta bien documentado el pobre compañero que le toque realizar algún procedimiento en el
código terminara sus días con una camisa de fuerza y condenso a ver elefantes voladores de por
vida
Un dato que usted debe tener en cuenta es que al incluir comentarios, el peso de nuestro archivo irá
aumentando y su página podría tardar mas en cargar, por ello es una buena idea que realice dos
versiones de su código, uno donde tenga toda la documentación que necesite para realizar el
mantenimiento apropiado y otro que suba a su servidor sin comentarios.

En JS existen dos maneras para introducir comentarios:

Comentario de una línea:

Se indica con // (doble barra)

Estas barras dobles le indican al navegador que todo lo que esté enfrente de estas sobre la misma
linea, es decir, sin dar [Enter], es un comentario.

Comentario de varias líneas:

Se indica con /* aquí va el comentario */

Con esta indicación, el navegador ignorará todo el contenido que se encuentre ente la barra asterisco
que abre y el asterisco barra que cierra
Puede colocar el comentario en varias líneas, es decir, aunque usted oprima [Enter]

1. <html>
2. <head>
3. <title>
4. P&aacute;gina con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. /* Aquí empieza un comentario de varias líneas. Todas ellas
9. son ignoradas por el navegador.*/
10. alert ("Hola desde Javascript"); //Otro comentario.
11. //-->
12. </script>
13. </head>
14. <body>
15. Esto es el body de la p&aacute;gina.
16. </body>
17. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
99
 JavaScript

DECLARACIÓN DE VARIABLES

En este capítulo hablaremos de los distintos tipos de Datos que se pueden manejar desde
JavaScript. Y cómo manejarlos.
Primero debemos definir un término sumamente empleado en lenguajes de programacion, me refiero
a las variables.

Variable: Es una zona de la memoria del ordenador donde se guarda un dato y que se identifica con
un nombre, por ello algunos autores las llaman pares nombre-valor.
El dato que se almacena bajo ese nombre puede cambiar durante la ejecución del código; por eso
se llaman variables.

Imagine que una variable es un contenedor, dicha caja se llama variable uno, Cuando nos referimos
a este contenedor, realmente estamos teniendo acceso al contenido de la misma (es decir, al valor
de la variable). Dentro de esa caja podemos tener una cadena literal, un valor numérico o algunas
otras cosas. Cuando una variable tiene un determinado contenido y se le asigna otro, el anterior se
pierde, es decir, una variable no puede tener dos contenidos o más simultáneamente.

Para lo anterior existen algunas excepciones de las que hablaremos mas tarde.

En un código JavaScript podemos usar tantas variables como sean necearías pero para poder usar
una variable primero debemos declararla.
Declarar una variable significa decirle al navegador que reserve espacio en memoria, para el uso de
esa variable.

Existen dos maneras para declarar una Variable.

Declaración explícita

Para declarar una variable de manera explícita utilizamos la instrucción var, seguida del nombre de
la variable, como en la siguiente línea de código.

1. var VariableUno;
Una vez que la variable ha sido declarada, se ha reservado en memoria espacio para ella, pero
todavía no tiene ningún valor. Para poder usarla es necesario darle un valor inicial, esto es lo que se
conoce como Inicialización de una variable.
Para ello empleamos el operador de asignación =.

1. var VariableUno = 10;

Veamos como funciona en un código las variables:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var v1; //Declaración.
9. v1=10; //Inicialización.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
100
 JavaScript

10. alert (v1);

11. //-->
12. </script>
13. </head>
14. <body>
15. </body>
16. </html>
Para ahorrar código, al utilizar la declaración explicita de variables, podemos realizar la declaración
y la inicialización en una sol línea, tal como se muestra en el siguiente código.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var v1=10; //Declaración e inicialización.
9. alert (v1);
10. //-->
11. </script>
12. </head>
13. </html>
14. Además podemos declarar e inicializar varias variables y en la misma línea:
15. <html>
16. <head>
17. <title>
18. Página con Javascript.
19. </title>
20. <script language="javascript">
21. <!--
22. var v1=10, v2=20; //Declarar e inicializar más de una variable en la misma línea.
23. alert (v1);
24. alert (v2);
25. //-->
26. </script>
27. </head>
28. <body>
29. </body>
30. </html>

Declaración Implícita
JavaScript nos permite declarar una variable por el simple hecho de inicializarla, es decir, no es
necesario declarar la variable mediante el uso de la palabra reservada var.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
101
 JavaScript

Al inicializar la variable, el navegador le reserva espacio en la memoria.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. v1=10; //Declaración implícita.
9. alert (v1);
10. //-->
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
Es recomendable declarar e inicializar nuestras variables, con la finalidad de mantener una
organización más estricta de nuestro código que nos ayude a su mantenimiento y control del mismo.

Nota: JavaScript, no necesita que le especifiquemos el tipo de variable que le vamos a asignar, es
decir, no le tenemos que decir que el dato que almacenará será booleano, literal, entero, decimal
etc. con el simple hecho de la inicialización, el interprete sabe a que tipo de variable estamos
haciendo referencia, incluso cambiar e tipo si el programa lo requiere para su ejecución.

NOMBRES DE VARIABLES

Para escribir e nombre de las variables debemos tener en cuenta algunas consideraciones.

 Los nombres de las variables no deben empezar por un número, sino por una letra.
 Podrá contener números, letras y el guión bajo, pero ningún otro signo (ni siquiera el punto
o el guion normal).
 Los nombres de las variables solo deben contener letras del alfabeto ingles.
 No pueden contener espacios en blanco.
 No podemos usar como nombre de nuestra variable una palabra reservada de JavaScript,
si lo podemos hacer, pero no es aconsejable.
 Debemos recordar que JavaScript es sensible al uso de mayúsculas y minúsculas
 Cuando el nombre de nuestra variable está formada por más de dos palabras, es buena idea
poner la primera en minúscula y las demás con la primera letra en mayúsculas, sin separar.

En las siguientes publicaciones iremos viendo los tipos de variables, y el uso que les podemos dar.

VARIABLES LITERALES

También llamados pares nombre-valor, se emplean para almacenar un valor bajo un nombre y el
cual se puede emplear para realizar alguna operación o para devolverle al usuario un resultado.
En JavaScript, como en cualquier lenguaje de programación, se pueden manejar datos de diferentes
tipos.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
102
 JavaScript

Por ejemplo, si declaramos una variable para que contenga el nombre de un usuario, por su
naturaleza, este dato será de tipo cadena o literal, ya que el nombre de una persona esta formado
por letras.
Si declaramos otra variable que contenga su edad, esta será de tipo numérico. En el caso de las
fechas, JavaScript designa un tipo de dato específico que posteriormente veremos.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var cadena="Esto es una cadena";
9. var numero=75;
10. alert (cadena);
11. alert (numero);
12. //-->
13. </script>
14. </head>
15. <body>
16. </body>
17. </html>
El contenido del literal es lo que está escrito en las comillas. Es importante que tenga claro esto, por
lo que le ruego que ejecute el código respetando la sintaxis marcada.
Como puede ver, las comillas no aparecen, es parte de la forma de escribir las cadenas, pero no
forman parte del mensaje.

Variables Literales
En JavaScrpt podemos realizar varias operaciones con las cadenas alfanuméricas o cadenas de
texto.
Comenzaremos a ver algunos fundamentos necesarios para emplear estas funciones, ya que a lo
largo de estos cursos, usted vera los diferentes usos que les podemos dar a estos datos.

Concatenaciones
Cuando se habla de cadenas alfanuméricas, se conoce como concatenación al proceso de unir dos
o mas cadenas en una sola mediante el uso del operador +.

Veamos el siguiente ejemplo.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var cadena1="Esto es una cadena.", cadena2=" Y esto es otra.", cadena3;

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
103
 JavaScript

9. cadena3=cadena1+cadena2;
10. alert (cadena3);
11. //-->
12. </script>
13. </head>
14. <body>
15. </body>
16. </html>
Como puede ver, las dos variables aparecen unidas gracias al operador de asignación.
También podemos concatenar cadenas literales con valores numéricos:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable1="Mi edad es: ", variable2=35, variable3;
9. variable3=variable1+variable2;
10. alert (variable3);
11. //-->
12. </script>
13. </head>
14. <body>
15. </body>
16. </html>
Sin embargo esto es sumamente desaconsejable por los errores inesperados que se puedan
presentar al mezclar valores, por eso, lo mejor será redactar el código anterior con ambas variables
en literal:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable1="Mi edad es: ", variable2="35", variable3;
9. variable3=variable1+variable2;
10. alert (variable3);
11. //-->
12. </script>
13. </head>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
104
 JavaScript

14. <body>
15. </body>
16. </html>

Métodos y Propiedades de datos literales

Para hacer uso de los métodos y propiedades en JavaScript se hace uso del punto de concatenación,
mas la propiedad que se desea.
Estas propiedades realizan diferentes funciones y acciones en el manejo de variables.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Metodos y propiedades con cadenas</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. var x = "Tamaño de la cadena.";
9. alert(x.length);
10. </script>
11. </body>
12. </html>
El script anterior, hace uso de la propiedad length, la cual especifica el número de caracteres por los
que está compuesta una cadena.
Algunos métodos de las cadenas de uso común, además de substring, incluyen slice, substr, concat,
toUpperCase, toLowerCase, y el patrón de los métodos de coincidencia, match, search, y replace. A
continuación explicaremos cada uno de ellos.
Los métodos que cambian las cadenas incluyen slice, substring, substr, y concat.

slice y substring
Los métodos de slice y substring devuelven valores de cadena a base de otra cadena. Ellos aceptan
dos argumentos: la posición inicial y una posición final opcional. He aquí algunos ejemplos:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Metodos y propiedades con cadenas</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. var miCadena = "Esto es una cadena.";
9. alert(miCadena.substring(3)); //Regresa "o es una cadena"
10. alert(miCadena.substring(3,9)); //Regresa "o es u"
11. alert(miCadena.slice(3)); //Regresa "o es una cadena."
12. alert(miCadena.slice(3,9)); //Regresa "o es u"
13. </script>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
105
 JavaScript

14. </body>
15. </html>
Una diferencia sutil entre slice y substring es cómo manejan argumentos con valores negativos. El
método substring convertirá los valores negativos en 0, mientras que slice tratará argumentos
negativos como el punto de partida desde el final de la cadena (contando hacia atrás).

substr
El método substr también acepta dos argumentos:
El primero es la posición de inicio para volver
El segundo argumento es el número de caracteres a mostrar, no la posición de parada.
Por lo tanto, los ejemplos de código para slice y substring trabajan un poco diferente con substr:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Metodos y propiedades con cadenas</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. var miCadena = "Esto es una cadena.";
9. alert(miCadena.substr(3));
10. alert(miCadena.substr(3,9));
11. </script>
12. </body>
13. </html>

concat
El método de concatenación ya lo habíamos visto anteriormente.
Se trata de un método que permite unir dos o mas cadenas mediante el operador mas (+).

toUpperCase y toLowerCase
Este método permite convertir una cadena a Mayúsculas (toUpperCase) o a minúsculas
(toLoweCase).

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Metodos y propiedades con cadenas</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. var myString = "Esto es una cadena";
9. alert(myString.toUpperCase()); // "ESTO ES UNA CDENA"
10. alert(myString.toLowerCase()); // "esto es una cadena"
11. </script>
12. </body>
13. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
106
 JavaScript

Desde luego que existen muchos otros métodos para el manejo de cadenas, sin embargo, no todas
son tan comunes, si usted lo desea puede consultar mas métodos en el siguiente link,
(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf).

SECUENCIAS DE ESCAPE

Anteriormente hemos visto como una cadena literal se escribe entre comillas, pero estas no se
almacenan con la cadena.
Este es un comportamiento normal de las cadenas, sin embargo cuando deseemos que las comillas
aparezcan, debemos hacer uso de las secuencias de escape.
Las secuencias de escape están formadas por una barra invertida, seguida de un carácter o de una
letra según nos convenga.
Para lograr mostrar las comillas que rodean a la palabra “Hola” en el siguiente código lo debemos
escribir de la siguiente manera.

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable_1="Este aviso dice "Hola".";
9. alert (variable_1);
10. //-->
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
Existen diferentes secuencias de escape, con funciones distintas a solo mostrar signos restringidos,
como dar un enter, retorno al carro.

Observe la siguiente tabla, donde expongo algunas de las secuencias de escape más comunes.

CÓDIGO ASCII CARÁCTER BARRA SIGNIFICADO

8 b Retroceso (BS)

9 t Tabulador Horizontal (HT)

10 n Nueva Línea, Enter (LF)

12 f Nueva Página (FF)

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
107
 JavaScript

13 r Retorno

34 ” Comillas Dobles

39 ‘ Comillas Simples

92 Barra Invertida

Por el momento es necesario que conozca estas secuencias, para que cuando aparezcan en
capítulos posteriores, sepa de qué se trata, ademas de que en su debido momento realizaremos la
explicación adecuada para que este cociente de todo el funcionamiento del script.

COMILLAS SIMPLES Y COMILLAS DOBLES

JavaScript permite delimitar una cadena alfanumérica con comillas simples o dobles indistintamente.
Por ejemplo:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable_1='Ésto es una cadena delimitada con comillas simples.';
9. alert(variable_1);
10. //-->
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>

El uso de comillas simples o dobles, es mera cuestión de criterio. Podria ser otra forma de escribir
comillas dentro de la cadena:

1. <html>
2. <head>
3. <title>
4. Página con Javascript.
5. </title>
6. <script language="javascript">
7. <!--
8. var variable_1="Ésto es una comilla simple: ' ";

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
108
 JavaScript

9. alert(variable_1);
10. //-->
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>

Es importante que si establece comillas dobles para delimitar, se mantenga constante en su empleo,
para evitar errores futuros.

PUNTO Y COMA

El punto y coma se emplea como delimitador de las sentencias que se realizan a lo largo del código,
es una forma de indicarle al intérprete que la instrucción ha terminado en ese lugar.

Existen algunos lugares en los que podemos omitir el uso de punto y coma, y otros donde
definitivamente no se deben usar.

Incluso en algunos lugares, cuando usted omite el uso de punto y coma, el intérprete puede colocar
uno, lo cual puede o solucionar algún problema o causarlo, por ejemplo:

Suponga las siguientes líneas de código:

1. return
2. (varName);
Lo cual la manera correcta de hacerse es:

1. return(varName);
Este es uno de los casos cuando no puede dejarse espacios en blanco
Lo que el intérprete decodificará será:

1. return;
2. (varName);
Produciendo un error. Como regla general es aconsejable y una buena práctica siempre hacer uso
del punto y coma cada que termine una sentencia o declaración.
Pero, definitivamente nunca debe emplear punto y coma cuando se trate de bucles o sentencias if,
como en los siguientes ejemplos:

1. if (a == 4)
2. {
3. // code goes here
4. }
La razón es que todo el bloque de código pertenece a una misma declaración, y si se le coloca un
punto y coma, se rompería la secuencia del mismo.
Este sería un ejemplo de un código incorrecto.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
109
 JavaScript

1. if (a == 4);
2. {
3. // code goes here
4. }
Como un tip, cuando abra un bucle o una función, omita el uso del punto y coma.

SENTENCIAS O EXPRESIONES

Anterior mente ya habíamos visto algunas sentencias, como el caso de la función alert ( ), pero no
habíamos hablado del concepto general de sentencia.
Pues en esta publicación vamos a explicar a que se refiere cuando decimos una sentencia de
JavaScript, o en ingles (Statements or Expresion).
Una sentencia, es un conjunto de instrucciones que son procesadas por el “interprete” de JavaScript
y realizan una acción en concreto. Es decir, es la manera en al que nosotros le hablamos a JavaScript
para que realice “x” o “y” cosa.

Como está conformada una sentencia

Una sentencia puede estar conformada por una colección de bloques que incluyen palabras claves,
literales, separadores, operadores, identificadores, variables, constantes, los cuales se estructuran
de tal manera que tengan sentido para el interprete de JavaScript, y este pueda realizar la acción
solicitada.

Estos son algunos ejemplos de sentencias.

1. var x = 4;
2. var y = x * 4;
3. alert("Hello");

Clasificación de las Sentencias

Las sentencias se pueden clasificar básicamente en dos tipos de acuerdo a su estructura
 Simples: Una sentencia simple, comprende aquellas instrucciones que
generalmente no abarcan mas de una linea, como es el caso de las declaraciones
de variables
 Compuestas: Una sentencia compuesta, es la que comprende diferentes niveles de
lógica. Este tipo de sentencias emplea operadores, condicionales y pueden llegar a
ser sumamente largas.

Ejemplo de sentencia simple

1. var x = 4;
Ejemplo de sentencia compuesta.

1. if (siEsto == 1) {
2. // algo de código aquí
3. } else {
4. // algo de código aquí también
5. }
Bien, este tema no es tan crucial para el aprendizaje de JavaScript, sin embargo es necesario que
conozca todos estos fundamentos, para crear un aprendizaje sólido, recuerde que para que el día

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
110
 JavaScript

de mañana usted pueda crear sus propios script, es necesario conocer todos los fundamentos
teóricos para después dejar volar la imaginación y comenzar a crear.

ESPACIOS EN BLANCO E IDENTACIÓN

Para escribir su código JavaScript, no importa si deja espacios entre las sentencias, o tabula su
código. Usted puede implementar cualquier estándar de redacción que facilite la lectura de su código.
Salvo algunas excepciones, cuando se emplean palabras reservadas como return() pueden no ser
interpretadas si se escriben en la misma línea. (Después veremos un ejemplo de esto)
La ventaja de dejar espacios en blanco y tabular el código es que permiten hacer más legible su
código.

Suponga el siguiente código “sin espacio”.

1. function cubeme(incomingNum) {
2. if (incomingNum == 1) {
3. return "What are you doing?";
4. } else {
5. return Math.pow(incomingNum,3);
6. }
7. }
8. var theNum = 2;
9. var finalNum = cubeme(theNum);
10. if (isNaN(finalNum)) {
11. alert("You should know that 1 to any power is 1.");
12. } else {
13. alert("When cubed, " + theNum + " is " + finalNum);
14. }

Resulta mucho más complicado leerlo, tal vez no en la primera semana de haberlo realizado, pero
quizá dentro de unos años, y unos cientos de líneas más, se tornarán una tarea titánica la lectura
del código.

1. function cubeme(incomingNum) {
2. if (incomingNum == 1) {
3. return "What are you doing?";
4. } else {
5. return Math.pow(incomingNum,3);
6. }
7. }
8. var theNum = 2;
9. var finalNum = cubeme(theNum);
10. if (isNaN(finalNum)) {
11. alert("You should know that 1 to any power is 1.");
12. } else {
13. alert("When cubed, " + theNum + " is " + finalNum);

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
111
 JavaScript

14. }
Ambos códigos funcionan exactamente igual, pero la lectura del segundo código es mucho más
sencilla y fácil de entender.

Retorno de Carro o Salto de Línea

Relaciona estrechamente con el espacio en blanco, e incluso al punto y coma, son los saltos de
línea, a veces llamados retornos de carro. Conocido en el funcionario ECMA-262 estándar como
“Los finales de línea”, estos elementos separan una línea de código de la siguiente.
Como era de esperar, el uso más común de los saltos de línea es la de separar las líneas individuales
de código para facilitar la lectura. También puede mejorar la legibilidad de largas líneas de código.
Sin embargo, al hacerlo, tenga en cuenta que la colocación errónea de estos saltos de línea pueden
producir errores.

PALABRAS RESERVADAS

Algunas palabras, son de uso exclusivo de JavaScript, es decir, usted no la puede emplear para
nombrar a sus variables, identificadores, constantes etc. ya que si lo hace podría ocasionar
resultados inesperados, y un gran dolor de cabeza para tratar de corregir estos errores.
De acuerdo a las especificaciones de ECMA-262 edición 5.1, las sigueintes palabras son de uso
reservado para JavaScript.

break delete case do

catch finaly continue for

debugger function default if

else in instanceof var

new void return while

switch with this class

throw const try enum

typeof export import extends

super implements let private

interface package protected public

static yield

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
112
 JavaScript

No es necesario que las memorice por ahora, la práctica la hará eso por usted, pero si es importante
que sepa que estas palabras no deben ser empleadas como variables, identificadores, o constantes,
ya que esto podría ocasionar resultados inesperados.

INTRODUCCIÓN A LAS FUNCIONES

Ya hemos visto algunos ejemplos de funciones en JavaScript, tal como la función alert(), pero existen
otras tantas que veremos a continuación, y prácticamente a partir de ahora, todo el tiempo estaremos
viendo el empleo de funciones.
Una cosa que es importante destacar en el uso de las funciones de JavaScript, es que dependiendo
de la versión del lenguaje, algunas de las funciones más modernas, no van a ser visualizadas en
todos los navegadores, un recurso que les puede ayudar, a conocer todas estas cuestiones de
compatibilidad es la siguiente página web: http://www.quirksmode.org/compatibility.html
Pongamos algo en práctica
JavaScript, es uno de los lenguajes, que permite la definición de funciones por parte del usuario, así
que en este ejemplo haremos algo de esto:

Primero veamos el siguiente código:

1. <!doctype html>
2. <html>
3. <head>
4. <script>
5. function alcubo(numeroinIcial) {
6. if (numeroinIcial == 1) {
7. return "abcdef";
8. } else {
9. return Math.pow(numeroinIcial,3);
10. }
11. }
12. </script>
13. <title>Ejemplo de funciones</title>
14. </head>
15. <body>
16. <script>
17. var elNum = 2;
18. var finalNum = alcubo(elNum);
19. if (isNaN(finalNum)) {
20. alert("Usted debería saber que el 1, elevado a cualquier potencia es 1");
21. } else {
22. alert("Cuando elevamos al cubo, " + elNum + " el resultado es: " + finalNum);
23. }
24. </script>
25. </body>
26. </html>

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
113
 JavaScript

En primer lugar observe que usted puede colocar scripts tanto en las etiquetas <head></head>,
como en el cuerpo (<body></body>).

Ahora analicemos el código:

Primera Parte

1. <script>
2. function alcubo(numeroinIcial) { //Declaramos una función
3. if (numeroinIcial == 1) {//Le decimos si el número inicial es 1
4. return "abcdef"; //Conviértelo en un valor string o cadena
5. } else { //Si no, eleva dicho numero al cubo
6. return Math.pow(numeroinIcial,3);
7. }
8. }
9. </script>
Este bloque sirve primordialmente para:

 Definir la función “alcubo“

 La cual consta de dos partes, por un lado:
 Cuando recibe un valor igual a 1 convierte dicho valor en la cadena “abcdef”.
 De lo contrario, eleva dicho número al cubo.

Segunda parte
1. <script>
2. var elNum = 2; //Declaramos el valor de la variable elNum
3. var finalNum = alcubo(elNum); //Declaramos el valor de la variable alcubo(), la cual
ya hemos definido
4. if (isNaN(finalNum)) { //Esto le dice, Si se trata de un valor no numérico
5. alert("Usted debería saber que el 1, elevado a cualquier potencia es 1"); //Indica esto
6. } else {//De lo contrario
7. alert("Cuando elevamos al cubo, " + elNum + " el resultado es: " +
finalNum);//Muestra esto
8. }
9. </script>
De esta manera:
 Cuando el numero sea igual a 1 sera entonces una cadena, por lo tanto se mostrará la alerta
de “Usted debería saber que el 1, elevado a cualquier potencia es 1“
 Y si no se trata de una cadena, es decir, se trata de un número, pasara por la función
alcubo(); y aparecerá la alerta de: ” Cuando elevamos al cubo, ” + elNum + ” el resultado es:
” + finalNum”, la cual emplea los operadores de concatenación (+), para incluir las variables.

Al correr este script en su navegador usted verá:

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
114
 JavaScript

STRICT MODE

En las especificaciones de ECMA-262, en su quinta edición, se ha introducido una variante para la

redacción del código de JavaScript, se trata del modo estricto “strict mode” el cual permite disminuir
la presencia de errores frecuentes, o interpretaciones erróneas del código.
Por ejemplo, si el usuario no coloca la palabra reservada “var”, antes de la declaración de una
variable se producirá un error.
Además de algunas otras modificaciones a la función eval ( ), permiten mejorar la sintaxis del código
escritas por el programador.
La sintaxis que se emplea en el modo estricto de JavaScript, es muy parecida a la que se emplea en
Perl.

El modo estricto es de ámbito local, esto significa que:

Puede ser habilitado el modo global, al implementar la línea “use strict”, al inicio del código.
1. "use strict";
Puede ser habilitada de manera local para una función en específico, al ser colocada la línea “use
strict” dentro del cuerpo de la función.

1. function haceAlgo() {
2. "use strict";
3. // aquí va el código.
4. }
Recuerde que al implementar el modo estricto, debe de usar una redacción completa, sin obviar
palabras como var, como en el siguiente ejemplo:
1. "use strict";
2. x = 4; // Produce un error de sintaxis
En este ejemplo, se producirá un error. Cuando usted implementa el modo estricto la sintaxis tiene
que ser la siguiente.
1. "use strict";
2. var x = 4; // Esto está bien
Alguna de las cuestiones más importantes que hacen del modo estricto algo importante, son las
consideraciones que se han implementado para la función eval( );
La cual evalúa rigurosamente un valor “cadena”, que puede representar una sentencia o expresión
de JavaScript.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
115
 JavaScript

VARIABLES NUMERICAS

Cuando nos referimos a variables numéricas o valores numéricos nos referimos especialmente a
números, así de simple. No tiene nada de especial, si usted tiene experiencia con otros lenguajes de
programación, no sera un tema desconocido. Tanto los números enteros como los decimales.

Cualquiera de estos valores es válido en JavaScript:

 24
 50.34
 22
 348
 0.8654
 Oxd
El último ejemplo, es un valor hexadecimal.

En JavaScript se pueden emplear diferentes bases de numeración aparte de la decimal, tales como
la hexadecimal, binaria, Octal, por mencionar algunas de las más populares. Además se pueden
realizar operaciones aritméticas entre ellos, sin importar en que base se encuentren:

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <title>Operaciones con distintas Bases</title>
5. <script type="text/javascript">
6. var h = 0xe;
7. var i = 0x2;
8. var j = h * i;
9. alert(j);
10. </script>
11. </head>
12. <body>
13. </body>
14. </html>
Al correr el script anterior en su navegador, verá que JS realizo la operación de multiplicación sin
ningún problema, y el resultado es obtenido en base decimal, ya que es la que está establecida por
defecto.
 Lo primero que hace el script, es la declaración e inicialización de variabes.
 Variable h
 Variable i
 Variable j (la cual contiene la operación realizada).
 Finalmente hacemos uso de la función alert(), la cual lleva como argumento el contenido de
la variable j
 El resultado es una caja de texto que despliega el resultado de la operación anterior, en base
decimal.

Funciones numéricas
JavaScript tiene algunas funciones y objetos incorporados, para trabajar con valores numéricos.
Una función numérica comúnmente empleada es la función isNaN().
NaN es una abreviación de Not a Number, y representa un número inadmisible.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
116
 JavaScript

Utilice la función isNaN() para determinar si un número es legal o válido de acuerdo con la
especificación ECMA-262.

Por ejemplo:

 Un número dividido por cero sería un número ilegal en JavaScript.

 El valor de cadena “Este no es un número” obviamente, tampoco es un número.
 Aunque las personas pueden tener una interpretación diferente de lo que es y no es un
número, la cadena “four” no es un número a la función isNaN(), mientras que la cadena “4”
si lo es.
 La función isNaN() requiere un poco de yoga mental, ya que se emplea para comprobar el
hecho negativo de si una variable contiene un número.

Aquí hay un par de ejemplos en los que usted puede tratar de comprobar si un número es ilegal.
Veamos el siguiente código:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>isNaN</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. document.write("No es un número: " + isNaN("4"));
9. </script>
10. </body>
11. </html>
Como puede observar, nos devuelve un resultado false, esto es por que “4”, aunque sea una cadena,
SI es un número, por lo tanto al probar si NO era un número, nos dice “false”, ya que si es un número.

Veamos otro ejemplo:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>isNaN</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. document.write("No es un número: " + isNaN("four"));
9. </script>
10. </body>
11. </html>
Como podrá observar, nos devuelve un resultado true, esto es por que “four”, aunque sea la manera
de escribir “4”, NO es un número, por lo tanto al probar si NO era un número, nos dice “true”, ya que
no es un número. Ahora nuestra variable, es totalmente una cadena.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
117
 JavaScript

Constantes Numéricas
Dentro de los objetos de JavaScript existen algunas constantes que están habilitadas de manera
predeterminada en JavaScript.

Objeto
Constante Descripción
JavaScript

Valor que es mayor que el mayor número de punto

Infinity flotante. Infinito negativo (-Infinity) es menor que el menor Global

número de punto flotante.

MAX_VALUE El mayor número que se puede representar en JavaScript. Number

Número más cercano a cero que se puede representar en

MIN_VALUE Number
JavaScript.

Indica que una expresión aritmética ha devuelto un valor que

NaN Number
no es un número.

NEGATIVE_INFINITY Valor que es menor que el menor número de punto flotante. Number

POSITIVE_INFINITY Valor que es mayor que el mayor número de punto flotante. Number

Para ver como funcionan estos objetos, veamos algunos ejemplos.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Constantes numé</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. document.write(Number.MAX_VALUE);
9. </script>
10. </body>
11. </html>

Objeto Math
El objeto Math es una variante especial que se utiliza para trabajar con números en JavaScript, y
tiene varias propiedades que son útiles para el programador, donde se encuentran incluidas todas
las propiedades que devuelven el valor de pi, la raíz cuadrada de un número, una pseudo-número
aleatorio, y un valor absoluto, por mencionar algunas.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
118
 JavaScript

Algunas propiedades son propiedades de valor, lo que significa que devuelven un valor, mientras
que otros actúan como funciones y devuelven los valores basados en los argumentos enviados en
ellos.
Considere este ejemplo de la Math.PI el cual se trata de una propiedad de valor.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Objeto Math</title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. document.write(Math.PI);
9. </script>
10. </body>
11. </html>
En la siguiente tabla se muestran las propiedades valor del objeto Math.

Constante Descripción

Math.E Constante matemática e. Es el número de Euler, la base de los logaritmos naturales.

Math.LN2 Logaritmo natural de 2.

Math.LN10 Logaritmo natural de 10.

Math.LOG2E Logaritmo en base 2 de e.

Math.LOG10E Logaritmo en base 10 de e.

Math.PI Pi. Es la relación entre la circunferencia de un círculo y su diámetro.

Raíz cuadrada de 0,5 o, de forma equivalente, uno dividido entre la raíz cuadrada de
Math.SQRT1_2
2.

Math.SQRT2 Raíz cuadrada de 2.

En la tabla siguiente se muestran las funciones del objeto Math.

Función Descripción

Math.abs Devuelve el valor absoluto de un número.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
119
 JavaScript

Math.acos Devuelve el arcocoseno de un número.

Math.asin Devuelve el arcoseno de un número.

Math.atan Devuelve el arco tangente de un número.

Devuelve el ángulo (en radianes) del eje X a un punto representado por las
Math.atan2
coordenadas y y x proporcionadas.

Devuelve el menor entero que es mayor o igual que la expresión numérica

Math.ceil
especificada.

Math.cos Devuelve el coseno de un número.

Math.exp Devuelve e (la base de los logaritmos naturales) elevado a una potencia.

Devuelve el mayor entero que es menor o igual que la expresión numérica

Math.floor
especificada.

Math.log Devuelve el logaritmo natural de un número.

Math.max Devuelve la mayor de dos expresiones numéricas especificadas.

Math.min Devuelve el menor de dos números especificados.

Math.pow Devuelve el valor de una expresión base elevada a una potencia que se especifique.

Math.random Devuelve un número seudoaleatorio entre 0 y 1.

Math.round Devuelve una expresión numérica especificada, redondeada al entero más cercano.

Math.sin Devuelve el seno de un número.

Math.sqrt Devuelve la raíz cuadrada de un número.

Math.tan Devuelve la tangente de un número.

recuerde que no es necesario aprender todo esto de memoria, es mas importante que sepa su
existencia para cuando tenga en mente dar una instrucción sepa donde consultar.

De todas formas, conforme pase el tiempo mas la practica todos estos elementos se harán más
familiares.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
120
 JavaScript

VARIABLES BOLEANAS

Booleanos son una especie dato oculto o pasivo en JavaScript. Por oculto, o pasiva, quiero decir que
no se trabaja con valores booleanos en la misma manera en que usted trabaja con cadenas y
números, se puede definir y utilizar una variable booleana, pero por lo general usted sólo tiene que
utilizar una expresión que se evalúa como un valor booleano.
Booleanos sólo tienen dos valores, verdadero y falso, y en la práctica, rara vez se establecen las
variables como tal.
Los datos booleanos, se emplean generalmente para comprobar si una expresión if/then/else es
verdadera o se cumple o no.

1. <!DOCTYPE html>
2. <html lang="es">
3. <head>
4. <title/title>
5. </head>
6. <body>
7. <script type="text/javascript">
8. If (miNumero < 18) {
9. //Hacer algo
10. }
11. </script>
12. </body>
13. </html>
Veamos un ejemplo en acción:

var miEdad = 13;

if(miEdad >= 18){

document.write("Usted es mayor de edad")
}else{
document.write("Usted es menor de edad")
}

Una expresión booleana se utiliza para determinar si la evaluación es verdadera, y si es así se

ejecuta un determinado código. Si el contenido de la variable de miNumero es mayor que 18, la
expresión booleana será verdadera, de lo contrario, el booleana será falso.

DATOS TIPO NULL

Null es otro tipo especial de datos en JavaScript (como lo es en la mayoría de los idiomas). Null es,
simplemente, nada. Representa y evalúa como false.
Cuando un valor es nulo, no es nada y no contiene nada. Sin embargo, no hay que confundir esta
nada con estar vacía. Un valor vacío o variable es todavía completa, es sólo llenos de vacío.
El vacío es diferente de null, que es nada sencillo.

var miVariable = '';

miVariable no es un valor null.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
121
 JavaScript

DATOS TIPO UNDEFINED

Los datos “undefined” es un estado, aunque algunas veces es tomado como un valor, el cual
representa a una variable a la que aun no se le ha asignado ningún valor.

Este tipo es diferente a null, pero de igual manera, ambos pueden evaluar de igual manera. Mas
adelante aprenderemos a distinguir con mayor lujo de de detalle entre los datos de tipo null y lo datos
de tipo undefined, cuando veamos el uso de operadores y expresiones.

En el caso de una variable no inicializada es undefined. Para esto decimos que la variable es de tipo
Undefined.

ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ

DESARROLLO DE APLICACIONES WEB
122