Capítulo 1 - Páginas estáticas (Parte 07 de 09)

 7. Menú web

El menú de opciones es una parte integral de una aplicación web. El crearlo se vuelve bastante sencillo, si se utiliza la librería “jQuery”, por lo que primero se debe insertarlo en el código de la página con las siguientes sentencias:

La carpeta “menú” es la que contiene el plugin que ayuda a desarrollar la barra de menú; como se ve en el código siguiente, el menú es simplemente un conjunto de listas <ul> con divisiones <div> que pertenecen a una clase CSS determinada. El siguiente código genera un menú con sus opciones:

<div id="menu"> <ul class="menu" style="width: 100%"> <li><a href="#" class="parent"><span>Mis Datos</span></a> <div> <ul> <li><a href="#"><span>Cambiar Password</span></a></li> <li><a href="#"><span>Cerrar Sesi&oacute;n</span></a></li> </ul> </div> </li> <li> <a href="#" class="parent"><span>Categor&iacute;as</span></a> <div> <ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <div> <ul> <li><a href="#" class="parent"><span>Sub Item 1.1</span></a> <div> <ul> <li><a href="#"><span>Sub Item 1.1.1</span></a></li> <li><a href="#"><span>Sub Item 1.1.2</span></a></li> </ul> </div> </li> <li><a href="#"><span>Sub Item 1.2</span></a></li> <li><a href="#"><span>Sub Item 1.3</span></a></li> <li><a href="#"><span>Sub Item 1.4</span></a></li> <li><a href="#"><span>Sub Item 1.5</span></a></li> <li><a href="#"><span>Sub Item 1.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 1.7</span></a> <div> <ul> <li><a href="#"><span>Sub Item 1.7.1</span></a></li> <li><a href="#"><span>Sub Item 1.7.2</span></a></li> </ul> </div> </li> </ul> </div> </li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#"><span>Sub Item 3</span></a></li> </ul> </div> </li> <li><a href="#" class="parent"><span>Productos</span></a> <div> <ul> <li><a href="#"><span>Sub Item 1</span></a></li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#" class="parent"><span>Sub Item 3</span></a> <div> <ul> <li><a href="#" class="parent"><span>Sub Item 3.1</span></a> <div> <ul> <li><a href="#"><span>Sub Item 3.1.1</span></a></li> <li><a href="#"><span>Sub Item 3.1.2</span></a></li> </ul> </div> </li> <li><a href="#"><span>Sub Item 3.2</span></a></li> <li><a href="#"><span>Sub Item 3.3</span></a></li> <li><a href="#"><span>Sub Item 3.4</span></a></li> <li><a href="#"><span>Sub Item 3.5</span></a></li> <li><a href="#"><span>Sub Item 3.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 3.7</span></a> <div> <ul> <li><a href="#"><span>Sub Item 3.7.1</span></a></li> <li><a href="#"><span>Sub Item 3.7.2</span></a></li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> <li class="last"> <a href="#"><span>Cerrar Sesi&oacute;n</span></a> </li> </ul> </div>

Capítulo 1 - Páginas estáticas (Parte 09 de 09)

 9. Componentes Bootstrap

Boostrap tiene muchos componentes, todos ellos son responsive, que se pueden usar en el desarrollo de los proyectos web. Entre ellos podemos apreciar los siguientes:

Botones:

Dropdown:

Jumbotron:

Alert:

Paneles:

Capítulo 1 - Páginas estáticas (Parte 08 de 09)

 8. Etiquetas avanzadas HTML

Con la última versión de HTML (5) han surgido unas características especiales que son bastante útiles al momento de realizar páginas web. Dentro de esas características se pueden resaltar las siguientes.

8.1 Canvas

Elemento que, a través de un lienzo, permite desarrollar elementos gráficos.

<canvas id="marco" style="border: 1px solid blue; width: 200px; height: 100px"></canvas> <script type="text/javascript"> var canvas = document.getElementById('marco'); var context = canvas.getContext('2d'); context.fillStyle = '#ff8f43'; // color de fondo context.fillRect(20, 30, 100, 50); </script>

8.2 SVG

A diferencia del elemento canvas (gráficos planos), SVG se utiliza para gráficos vectoriales.

<svg width=100 height=100 style="border: 1px solid blue"> <circle cx=50 cy=50 r=20 stroke="green" stroke-width=3 fill="red"/> </svg>

8.3 Audio

Hace posible la reproducción de un archivo de sonido.

<audio src="audio.mp3" preload="auto" controls></audio>

"auto" almacena, temporalmente, el archivo multimedia para su reproducción continua.

controls: muestra los controles estándar para la reproducción del audio.

8.4 Video

Hace posible la reproducción de un archivo de video.

<video src="video.mp4" controls></video>

controls: muestra los controles estándar para la reproducción del video.

8.5 HTML Geolocation

Hace posible el reconocimiento de la ubicación geográfica del usuario, siempre y cuando esté usando un navegador que tenga implementado este servicio y que brinde su permiso.

8.5 Drag and Drop

Para arrastrar objetos de un lugar a otro, solo hay que establecer el atributo draggable=true en el elemento que se quiere mover. Drag and Drop se puede implementar prácticamente en cualquier elemento, incluidos archivos, imágenes, enlaces u otros nodos DOM.

8.6 Local Storage

Permite generar y administrar un espacio local en el disco que puede reemplazar a las cookies de versiones anteriores.

8.7 Application Cache

Representa a un mecanismo de memoria temporal para permitir que las aplicaciones basadas en la web se ejecuten sin conexión. Los desarrolladores pueden usar la interface de Application Caché (AppCache) para especificar los recursos que el navegador debería guardar en memoria temporal y tener disponibles para los usuarios cuando no estén conectados.

8.8 Web Workers

Permiten activar secuencias de comandos para ejecutar tareas intensivas de computación, sin bloquear la interfaz de usuario u otras secuencias de comandos para gestionar las interacciones del usuario.

8.9 Server-Sent Events (SSE)

Los Server-Sent Events (SSE) representan a una forma estandarizada de enviar información a un grupo de clientes; por ejemplo, puede utilizarse un feed de noticias que pasa por un servidor y que entrega ciertos datos, en forma regular, a un grupo de subscriptores.

Capítulo 1 - Páginas estáticas (Parte 06 de 09)

6. Formularios

En HTML, el tag <form> contiene todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input>, permite definir diferentes elementos (botones y cuadros de texto), como se aprecia según el cuadro siguiente:

<form>

Atributos específicos

• action = "url" – Dirección de envío de los datos del formulario.
• method = "POST o GET" - empleado al enviar el formulario.
• enctype = "application/x-www-form-urlencoded o multipart/form-data" - Codificación empleada para envío de información.
• accept = "tipo_de_contenido" - Lista separada por comas de todos los tipos de documentos aceptados por el servidor.
• autocomplete: define el autocompletado.
• novalidate: deja de validar el formulario.
• Otros: accept-charset, onsubmit, onreset

Tipo de elemento

• Bloque

Descripción

• Se emplea para insertar un formulario en la página.

Los formularios utilizan los atributos action y method.

El atributo action, indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios, esta aplicación también se encarga de generar la respuesta que muestra el navegador.

El atributo method, específica como se envían los datos del formulario al servidor. Los valores para method son GET y POST, siendo GET por defecto. El método POST hace posible el envío de mayor cantidad de información que GET; este envía hasta 500 bytes de información, no permite el envío de archivos adjuntos. Asimismo, GET hace que los datos se vean en la barra de direcciones del navegador, mientras que con POST no se pueden ver.

Los formularios agrupan objetos visuales para ser llenados con datos o seleccionar datos de estos objetos. La siguiente lista muestra un resumen:

<input>

Atributos específicos

• type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button | color | date | time | email | color | datetime" - Tipo de objeto contenido en formulario
• name = "texto" – Nombre de objeto
• value = "texto" – Asigna valor en objeto
• maxlength = "numero" – Cantidad de caracteres para los controles de texto y de password
• checked = "checked" – Marca a los checkbox y radiobutton indicando seleccionado.
• disabled = "disabled" – Deshabilita el objeto, no hay acceso a él.
• readonly = "readonly" – Contenido solo de lectura.
• src = "url" – En botones con imágenes se da la dirección de la imagen.
• alt = "texto" – Texto alternativo para el objeto.
• Autocomplete = Permite el autocompletado
• Autofocus = Enfoca el objeto

Tipo de elemento

• En línea y etiqueta vacía

Las etiquetas <fieldset> agrupa conjuntos de objetos del formulario y <legend> da un título al conjunto.

<fieldset>

• Se emplea para agrupar varios objetos de un formulario.

Tipo de elemento

• Bloque

<legend>

• Título de un conjunto de objetos del formulario agrupados con fieldset.

Tipo de elemento

• En línea

Una etiqueta es texto, solo de lectura, que describe o indica, el ingreso o selección, que debe hacer el usuario y se crea con la etiqueta <label>.

<label>

• Se emplea para indicar el ingreso o selección que debe hacer el usuario

Atributos específicos

• for = "id_de_elemento" – Identificador de objeto al cual hace referencia.
• Otros: accesskey, onfocus y onblur

Tipo de elemento

• En línea

form

• Indica a que formulario pertenece.

Para ingresar texto de varias líneas se usa la etiqueta <textarea>.

<textarea>

Se emplea para incluir un área de texto en un formulario.

Atributos específicos

• rows = "numero" - Cantidad de filas del textarea.
• cols = "numero" - Cantidad de columnas del textarea. Una columna es un carácter.
• Otros: name, disabled, readonly, onselect, onchange, onfocus, onblur, autofocus, required

Tipo de elemento

• En línea

En el caso de listar elementos, se puede usar la etiqueta <select> y cada ítem de la lista, se define con <option>.

<select>

Para una lista desplegable en un formulario.

Atributos específicos

• size = "numero" – Cantidad de elementos que muestran la lista (por defecto, solo muestra un elemento).
• multiple = "multiple" - Permite seleccionar más de un elemento.
• Otros: name, disabled, onchange, onfocus, onblur, autofocus, required

Tipo de elemento

• En línea

<option>

Define a cada ítem de la lista.

Atributos específicos

• selected = "selected" – Para seleccionar ítem de lista por defecto.
• Otros: label, disabled

Tipo de elemento

• En línea

Number: caja de texto que permite presentar un valor inicial el cual puede ser un incremento o decremento, según su atributo step.

<input type="number" step="1" value="10"/>

Date: para mostrar un calendario, a partir del cual se puede seleccionar una fecha.

<input type="date" value="2015-06-30"/>

Time: utilizado para mostrar datos sobre el tiempo en diferentes formatos:

<time datetime="21:00">9pm</time><br/> <time datetime="2015-09-12">12 de septiembre del 2015</time><br/> <time datetime="2015-09-12T13:30">12 de septiembre del 2015 a las 1:30pm</time>

Capítulo 1 - Páginas estáticas (Parte 05 de 09)

 5. Diseño responsive con Bootstrap

Si se desea crear una web responsive, es decir, que se ajuste automáticamente a las distintas resoluciones de pantalla de los dispositivos en los que se va a mostrar, entonces una buena alternativa es usar el framework Bootstrap.

Boostrap funciona con la base de otro frmaework llamado jQuery, por lo tanto, se tiene que hacer una configuración previa en el desarrollo de la página HTML, con las siguientes líneas:

Dentro de la sección head se colocan los estilos (CSS), en este ejemplo los Boostrap y al final de la sección body, van los javascript (JS).

Para distribuir las diversas filas (row) dentro de un contenedor (container) de Boostrap, se puede proceder de la siguiente forma, si se quiere obtener la presentación de la diapositiva:

Para entender el significado de las clases col-xs-, col-sm-, col-md- y col-lg- se muestra la siguiente tabla.

Entonces, según el ancho de la pantalla se va ajustando la presentación de los elementos dentro de row.

Esta sería la salida de la distribución en md y lg:

Esta sería la salida de la distribución en sm:

Esta sería la salida de la distribución en xs:

Imágenes, formularios y tablas responsive

Con Boostrap se puede mostrar imágenes que se ajustan al ancho de la pantalla, con esta simple sentencia:

También, se pueden personalizar las imágenes con (.img-rounded y .img-circle):

Los formularios con Boostrap son completamente responsive y cambian de forma, según el ancho de la pantalla; por ejemplo:

El mismo código respondiendo a una pantalla menos ancha:

Fragmento de código del formulario:

Si necesitan ese código es el siguiente:

<div class="container" style="padding: 40px 16px"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="form-group"> <label for="tipoVisita">Tipo de Visita</label> <select id="tipoVisita" class="form-control"> <option value="Personal">Personal</option> <option value="Empresa">Empresa</option> <option value="Familiar">Familiar</option> </select> </div> </div> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <div class="input-group" style="width: 100%"> <label for="horaInicioVisita">Hora Inicio</label> <input type="text" id="horaInicioVisita" class="form-control"/> </div> </div> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <div class="input-group" style="width: 100%"> <label for="horaFinVisita">Hora Fin</label> <input type="text" id="horaFinVisita" class="form-control"/> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><div class="input-group" style="width: 100%"> <label for="personaVisitada">Persona Visitada</label> <input type="text" id="personaVisitada" class="form-control"/> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class="input-group" style="width: 100%"> <label for="areaVisitada">Area</label> <input type="text" id="areaVisitada" class="form-control"/> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class="input-group" style="width: 100%"> <label for="cargoVisitada">Cargo</label> <input type="text" id="cargoVisitada" class="form-control"/> </div> </div> </div> <div class="row" style="margin-top: 16px"> <div class="col-xs-1 col-sm-2 col-md-4 col-lg-4">&nbsp;</div> <div class="col-xs-10 col-sm-8 col-md-4 col-lg-4"> <button type="button" class="btn btn-default" style="width: 100%"> <span class="glyphicon glyphicon-save" aria-hidden="true"></span> Grabar Datos </button> </div> <div class="col-xs-1 col-sm-2 col-md-4 col-lg-4">&nbsp;</div> </div> </div>

También las tablas ajustan su ancho, según la pantalla en las que son mostradas, como, por ejemplo:

Fragmento de código de la tabla:

Si necesitan el código, es el siguiente:

<div class="container" style="padding: 40px 16px"> <div class="panel panel-default"> <div class="panel-heading"> Lista de Clientes </div> <table class="table"> <thead> <tr> <th>#</th> <th>Cliente</th> <th>Correo</th> <th>Teléfono</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Juan Pérez</td> <td>jperez@hotmail.com</td> <td>999 678 456</td> </tr> <tr> <th scope="row">2</th> <td>Julia Ramos</td> <td>jramos@yahoo.es</td> <td>889 765 344</td> </tr> <tr> <th scope="row">3</th> <td>Luis Abanto</td> <td>labanto@gmail.com</td> <td>798 887 667</td> </tr> <tr> <th scope="row">4</th> <td>Carmen Valdiviezo</td> <td>cvaldiviezo@gmail.com</td> <td>998 867 667</td> </tr> </tbody> </table> </div> </div>

Capítulo 1 - Páginas estáticas (Parte 04 de 09)

 4. Diagramación de páginas

HTML5 cuenta con etiquetas que permiten la distribución de la información en la

pantalla de una forma legible. Las etiquetas que permiten realizar este diseño son las

que se muestran en el gráfico.

<header></header>: es la cabecera del documento y en ella puede llevar algún logotipo, el título de la página o quizás una descripción de la misma. No es una etiqueta obligatoria, pero se recomienda su uso, si realmente las páginas tienen algún bloque de código que se pueda entender como "cabecera".

<nav></nav>: representa a una barra de menú con opciones para navegar a diversos documentos del proyecto Web. No es obligatorio su uso, pero ayuda en la navegación del usuario si es que se usa.

<section></section>: usado para presentar información que tiene valor semántico, es decir, que aporta un significado al contenido de la página que se está mostrando.

<aside></aside>: usado para elementos complementarios, como un calendario de eventos, bloques publicitarios, enlaces externos, citas y otros.

<footer></footer>: utilizado para mostrar información al pie del documento. Esta información podría ser: comentarios sobre el copyright (derechos de autor), una política del portal, enlaces a otras páginas web relacionadas, etc.

Los elementos de seccionado HTML5 no son obligatorios para definir un esquema, aún se pueden realizar a base de “divs” y CSS.

Si desea más información sobre esta característica del lenguaje, a continuación, encontrará un enlace muy útil y completo sobre el tema: https://developer.mozilla.org/es/docs/Sections_and_Outlines_of_an_HTML5_document

Capítulo 1 - Páginas estáticas (Parte 03 de 09)

 3. Hojas de estilo (CSS)

CSS presenta todo un conjunto de atributos para modificar la apariencia del texto, como, por ejemplo: color, font-family, font-size, font-weight, font-style y otros.

En CSS, el color se utiliza para establecer el color del texto, según el siguiente cuadro:

COLOR

Valores

• color | inherit
• Por ejemplo: #ffffff o white

Aplica a

• Todos los elementos

Valor inicial

• Según el navegador

Aunque el color del texto depende del navegador, la mayoría de estos utiliza el color negro.

Para establecer el color del texto existen varias formas:

h1 { color: #369; }

p { color: black; }

a, span { color: #b1251e; }

div { color: rgb(71, 98, 176); }

Si se quiere cambiar el tipo de letra se puede utilizar el atributo font-family. En el cuadro siguiente, se muestra un resumen:

FONT-FAMILY

Valores

• (( nombre_familia | familia_generica ) (,nombre_familia | familia_generica)* ) | inherit

Aplica a

• Todos los elementos

Valor inicial

• Según el navegador

El tipo de texto por aplicar se puede indicar de dos formas:

• Por nombre del tipo: "Arial", "Verdana", "Garamond", etc.
• Por nombre genérico del tipo de letra: Helvética, Georgia, Times, Courier y otros.

Si el desarrollador utiliza la propiedad font-family con algún valor poco común, tal vez el navegador de internet no tenga dicho tipo de texto; entonces, será reemplazado por el valor por defecto que usa el navegador. Este inconveniente es resuelto agregando más de un valor en el atributo font-family, como, por ejemplo:

font-family: Arial, Helvética, sans-serif;

font-family: "Times New Roman", Times, serif;

font-family: "Courier New", Courier, monospace;

font-family: Georgia, "Times New Roman", Times, serif;

font-family: Verdana, Arial, Helvetica, sans-serif;

También, se puede cambiar el tamaño del texto mediante el atributo font-size.

FONT-SIZE

Valores

• tamaño_absoluto | tamaño_relativo | medida | porcentaje | inherit

Se aplica a

• Todos los elementos

Valor inicial

• Médium

El tamaño es dado por un valor, pero también se puede utilizar otras expresiones para definir el tamaño. Existen 2 formas de definir el tamaño:

• Absoluto, define el tamaño mediante las siguientes palabras: xx-small, x-small, small, medium, large, x-large, xx-large.
• Relativo, define el tamaño mediante las siguientes palabras: larger, smaller; tomando como referencia el tamaño de letra del elemento padre.

CSS recomienda cambiar el tamaño del texto en unidades em o en porcentaje (%); además, se especifica el tamaño del texto en puntos (pt) cuando el documento está diseñado para imprimirse.

Después de modificarse el tipo y el tamaño de letra, es posible variar otras características como su grosor (texto en negrita) y su estilo (texto en cursiva). El atributo que controla el ancho de la letra es font-weight.

FONT-WEIGHT

Valores

• normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Se aplica a

• Todos los elementos

Valor inicial

• Normal

El valor que se usa por defecto es el normal y para los textos en negrita bold. El valor normal equivale al valor numérico 400 y el valor bold al valor numérico 700.

También, se puede definir estilo del texto con el atributo font-style.

FONT-STYLE

Valores

• normal | italic | oblique | inherit

Se aplica a

• Todos los elementos

Valor inicial

• Normal

 El siguiente es un ejemplo de estos atributos.

La información de este tema, es obtenida o basada de http://www.librosweb.es.

CSS permite mejorar la presentación de los elementos HTML y es posible definir bibliotecas de estilos que pueden ser reutilizables en otros proyectos web; por ejemplo, es posible crear la clase formal, para los tags: anchor, table, form y otros.

Entonces, esta clase formal es un conjunto de atributos CSS que se pueden reutilizar más adelante, en otros desarrollos.

La forma como se llama a una clase en un tag de HTML es a través del atributo class del tag, por ejemplo:

El primer anchor (línea 11) llama a la clase formal. El segundo anchor (línea 16) llama a la clase verde.

También, es posible generar estilos para los enlaces, como, por ejemplo:

a.normal:active, a.normal:link, a.normal:visited {
color: #444;
font-weight:bold;
text-decoration: underline;
}

 a.normal:hover {
color: #900;
font-weight:bold;
text-decoration: none;
}

Al igual que las bibliotecas para los tags anchors de HTML visto en el anterior tema, también es necesario crear las bibliotecas para tablas, de tal forma que éstas mejoren, sustancialmente, en su presentación.

En la actualidad se acostumbra a crear tablas cebradas, es decir, que las filas pares (even) tengan un color y las impares (odd) otro color; asimismo, cuando el mouse pasa sobre algunas de estas filas, ésta se ilumina indicando al cliente en qué fila se encuentra.

El tipo odd indica que la fila es impar y el tipo even que la fila es par; además, cuando el mouse pasa sobre la fila se produce el evento hover, visto en el siguiente ejemplo de bibliotecas para tablas.

Ejemplo de bibliotecas de estilos para tablas: