sábado, 10 de mayo de 2014

JavaScript: Primer contacto

Después de tener un concepto sobre HTML + CSS y un mínimo de noción y uso, es el momento de comenzar con JavaScript, ya que es un lenguaje esencial para el desarrollo de páginas Web. Un "Script" es un poco de código que hace algo en una página web, o sea, hace una página Web dinámica. Este código está hecho con un lenguaje llamado JavaScript inventado por Netscape. Las cosas que pueden hacerse con JavaScript van mucho más allá de lo que permite el lenguaje HTML, pero también es mucho más difícil su aprendizaje. No obstante lo que aprenderemos en este blog será bastante simple. En esta entrada vamos a desarrollar un programa partiendo del siguiente enunciado:


Como podemos observar, necesitamos pedirle al usuario 4 datos, uno de ello será un nombre y los otros tres serán las notas, dichos datos tendremos que procesarlos y la salida por pantalla dependerá del resultado. La forma de procesarlos será mediante funciones "if", si cumple la función mostrará un resultado, sino, mostrará otro. Para hacerlo un poco más interesante, lo voy a realizar con funciones propias, o sea, una función para calcular la media, otra función para calcular la nota máxima y otra función para calcular la calificación de la nota media, todo ello concatenando variables y cadenas de textos. El resultado del script seria algo parecido al siguiente:



Por último voy a explicar un poco el código de abajo, los scripts deben de comenzar mínimamente con "<script>" y terminar con "</script>". La sintaxis de cada función está indicada por las llaves de apertura y cierre {}, todas las variables de su interior son privadas, o sea que sólo son usadas dentro de la función. A dichas funciones se les pasa unos valores iniciales dentro de los (), normalmente se usa funciones para calculos matemáticos, como en el ejemplo de abajo. JavaScript está lleno de funciones, además de las que podemos desarrollar nosotros, trae incorporadas muchas más como writeln(). Para llamar a una función lo único que tenemos que hacer es escribir el nombre de la función y los valores que necesite. Para concatenar variables se utiliza el símbolo "+" que es el mismo que se utiliza para sumar dos variables, al recibirlas con la función prompt() los trata como "strings" así que debemos de utilizar la función parseInt() para convertirlas en números enteros. Para terminar se usa document.writeln() para imprimir por pantalla, "document" sería el objeto, nuestra propia página y sobre ella realizamos la función writeln(), o sea, escribir el valor que le indiquemos, ya sea una variable o una cadena entre comillas.

<script type="text/javascript">

   function media2(x, y) {
     var media;
     media  = (x + y) / 2;
     return media;
   }

   function maximo2(x, y) {
     if(x > y) {
        return x;
     } else {
        return y;
       }
   }

   function nota(n) {
     var calificacion;
        if(n < 5) {
           calificacion = 'suspenso';
     return calificacion;
        } else {
           if (n <= 8) {
              calificacion = 'notable';
              return calificacion;
        } else {
              calificacion = 'sobresaliente';
              return calificacion;
        }
        }

   }
 var nombre = prompt('ingrese su nombre:', 'Pepe');
 var nota1 = parseInt(prompt('ingrese su nombre:', '6'));
 var nota2 = parseInt(prompt('ingrese su nombre:', '7'));
 var nota3 = parseInt(prompt('ingrese su nombre:', '2'));

 document.writeln ('Hola ' + nombre + '<br>');
 var media = media2(nota1, media2(nota2, nota3));

 if ( media > 5 ) {
    document.writeln ('Felicidades <br> Has aprobado con un ' + media.toFixed() + ' de media.<br>');
 } else {
    document.writeln ('Lo siento <br> Has suspendido con un ' + media.toFixed() + ' de media.<br>');
 }

 var maximo = maximo2(nota1, maximo2(nota2, nota3));

 document.writeln ('La nota m&aacute;s alta es un ' + maximo + '<br>');

 var nombrenota;
 nombrenota = nota(media);
 document.writeln ('Tu nota ser&iacute;a de ' + nombrenota);

</script>

viernes, 9 de mayo de 2014

CSS: Formulario con estilo

Esta entrada la voy a dedicar a hablar sobre los formularios en HTML, que son y como darle un aspecto visual agradable sin usar tablas ni APIS. Los formularios HTML nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios que la visitan, estos están compuestos por controles. Las principales etiquetas de un formulario es <form> que encierra todos los contenidos del formulario, ya sean botones, cuadros de texto, listas desplegables, la etiqueta <input> que permite definir varios tipos de elementos y la etiqueta <button>. Dentro de la etiqueta <form> encontramos dos atributos:
  • El atributo "action" indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios, además, esta aplicación también se encargará de generar la respuesta que muestra el navegador.
  • El atributo "method" establece la forma en la que se envían los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST.
Como ya he dicho el elemento "input" inserta uno de muchos tipos de controles en un formulario, el tipo de control mostrado depende del atributo "type" que puede tomar diez valores distintos, algunos de ello son:
  • text: Usado para mostrar entrada de texto.
  • password: Este control trabaja de manera exacta a los controles de tipo "text", con la excepción de que oculta visualmente los caracteres ingresados reemplazándolos por puntos o asteriscos.
  • checkbox: Este control permite a los usuarios cambiar entre dos valores: marcado y no marcado.
  • radio: Estos trabajan de forma muy similar a los anteriores, la diferencia radica en la exclusividad, ya que no pueden estar marcados los que contengan el mismo valor.
Antes para agregar un botón a nuestro formulario se usaba la etiqueta <input> indicándole que fuera de tipo botón, pero  actualmente disponemos de la etiqueta <button> que dispone de más opciones, como usar una imagen de botón, algunos atributos de este control pueden ser:
  • submit: Es un botón de envío, el cual envía automáticamente el contenido del formulario a la página que procesará la información.
  • reset: Cuando es presionado, lleva la información en todos los controles del formulario a sus valores iniciales.
  • button: Este tipo de control crea un botón regular (que luce igual a los botones submit y reset) que, a diferencia de los anteriores, no tiene ninguna acción asociada predeterminada.
Otros elementos usados en los formularios, concretamente en el que vamos a ver más abajo son:
  • textarea: Con este control los usuarios podrán introducir texto en una o más líneas.
  • select: Para insertar menú y listas desplegables
Después de esta pequeña introducción, vamos a ver un ejemplo con los controles visto anteriormente, pero le vamos a dar un aspecto visual agradable, como dije antes, sin el uso de tablas. El aspecto del formulario sería:


Lo mejor es ver el código fuente, pero antes voy a explicar un poco los pasos realizados. He creado un "div" con "id=formulario" para poder darle unas características concretas, por ejemplo "sombra". Luego le he dado un estilo a los "label" como puede ser un tamaño fijo a todos por igual. Seguidamente he creado una clase ".input" para darle formato a los controles input, en este caso darles la misma apariencia, al igual que con "textarea". He echo lo mismo para los botones, crearles una clase y un "id" para poder configurarlos en todos sus aspectos de diseño y movilidad como por ejemplo centrarlos. También he creado un "hover" y "focus" para los campos donde hay que ingresar texto, para darle un aspecto distinto cuando se está actuando con ellos. Para terminar indicar que con el atributo "linear-gradient" sirve como su nombre indica para crear degradados de colores, aunque ya hablaré en otra entrada sobre ello, ya que hay que especificar unas etiquetas para representar a cada navegador.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>

<style type="text/css">

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 100%;
    background-color: #000000;
}

#formulario{
    position:relative;
    margin:0 auto;
    background-color:#D8D8D8;
    width:700px;
    padding:2px 2px 2px 10px;
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    box-shadow: 5px 10px 30px #358077;
}

label {
    background-color: #BDBDBD;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: bold;
    height: 24px;
    margin: 0 10px 0 0;
    padding: 5px 2px 0px 5px;
    width: 150px;
  
}

.input {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    height: 30px;
    padding: 7px;
    width: 200px;
}

textarea {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    height: 200px;
    padding: 7px;
    width: 435px;
    border-radius:10px;
    font-family: Arial;
}
textarea:hover, textarea:focus, textarea:visited, input:hover, 
input:focus, input:visited, select:hover {
    color: #435266;
    background: #EFDFB6;
    border: 1px inset #600;
    cursor: pointer;
}

.select {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    height: 32px;
    padding: 4px;
    width: 435px;
}

.buton{
    border: 1px solid #DBE1EB;
    font-size: 18px;
    font-family: Arial, Verdana;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 4px;
    background: #A4A4A4;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    background: linear-gradient(left, #A4A4A4, #585858);
    background: -moz-linear-gradient(left, #A4A4A4, #585858);
    background: -webkit-linear-gradient(left, #A4A4A4, #585858);
    background: -o-linear-gradient(left, #A4A4A4, #585858);
    color: #000000;

}
   
.buton:hover
{
    background: #365D9D;
    color: #000000;
    border-color: #000000;
    background: linear-gradient(left, #365D9D, #436CAD);
    background: -moz-linear-gradient(left, #365D9D, #436CAD);
    background: -webkit-linear-gradient(left, #365D9D, #436CAD);
    background: -o-linear-gradient(left, #365D9D, #436CAD);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    cursor: pointer;
}

h1{
    width:auto;
    text-align: center;
    color: #000000;
}

#boton{
    margin-left: 250px;
    width:200px;
}

</style>
</head>
<body>
<div id="formulario">
<form id="form" method="post" action="mipagina.php">
<h1>Formulario de sugerencias</h1>

<p><label>Nombre:</label>
<input type="text" name="name" class="input"></p>
<label>Password:</label>
<p><input type="password" name="password" class="input"></p>

<p><label>Consulta:</label>
<textarea class="textarea"></textarea></p>

<p><label>Provincia:</label>
<select name="provincia" class="select">
<option value="">- selecciona -</option>
<option value="1">A coru&#241;a</option>
<option value="2">&#193;lava</option>
<option value="3">Albacete</option>
<option value="4">Alicante</option>
</select></p>

<p>Marca la casillla si has leido las condiciones:
<INPUT type="checkbox" name="chk" value="condiciones"></p>
<p>Tipo de respuesta deseada:
<INPUT type="radio" name="respuesta" value="mail">Mail
<INPUT type="radio" name="respuesta" value="sms">SMS
<INPUT type="radio" name="respuesta" value="wasap">Whatsapp</p>

<div id="boton">
<button type="submit" class="buton">Enviar</button>
<button type="reset" class="buton">Limpiar</button
</div>

</form>
</div>

</body>
</html>

CSS: Hojas de estilo

Vamos a dar un salto cualitativo en nuestro aprendizaje HTML, para ello vamos a aprender lo que son las hojas de estilos en cascada, su estructura y cómo relacionarlas con nuestra página Web. Las hojas de estilos en cascada (CSS) representan un avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas ya que el código HTML es muy limitado para esta función . Al principio los usuarios se preocupaban más por el contenido que por el diseño, pero hoy en día, tienen la misma importancia. Con las hojas de estilo es más fácil especificar la cantidad de espacio entre líneas, el sangrado de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y otros muchos detalles.

Para mi la caracteristica más importante del CSS es la posibilidad de separar los elementos formales de los de contenido. De esta forma, sólo con una pequeña modificación de la hoja de estilo es posible cambiar el aspecto de todas las páginas en las que se aplica esa hoja.

La Herencia en los estilos


Cuando creamos un estilo, las especificaciones que se realicen para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body> todos aquellos elementos que puedan heredar las características se presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra salvo que especifiquemos lo contrario.

También debemos de tener en cuenta que se establece un orden de prioridad para la aplicación de las normas en caso de que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente:

- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se enlaza nuestra página.

Si tenemos en cuenta el orden mencionado, lo más razonable es crear una hoja de estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros procedimientos que deberían resultar preferentes por ser más específicos. Para vincular un archivo independiente en nuestra página lo haremos de la siguiente forma:


<link rel="stylesheet" type="text/css" href="urlhojadeestilos.css">

La estructura de una hoja de estilo podria ser algo parecido a la siguiente imagen:


Otra alternativa, aunque menos recomendable, pero bien válida es incluir el estilo en la propia página HTML, o sea, internamente. Necesitamos añadir un elemento <style> y la hoja de estilo estará en el interior de ese elemento. En resumidas cuentas las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:
  1. el selector (en el ejemplo siguiente: "body"), el cual le dice al navegador la parte del documento que se verá afectada por la regla.
  2. la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse;
  3. y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.

<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
    SunSans-Regular, sans-serif }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

jueves, 8 de mayo de 2014

Los Frames y Frameset

Aunque los frames dejaron de usarse hace ya varios años, vamos a aprender a trabajar con ellos, con la idea de empezar a relacionarnos y crear contenido dinámico, esto nos ayudará a entender y organizar futuros proyectos webs. Con las frames es posible dividir la ventana del navegador en varias subregiones (frames), permitiendo mostrar una URL distinta en cada una de ellas. En cada frame se nos permite:
  • Mostar su propia URL, diferenciada del resto de las frames de la pantalla, de esta forma un hiperenlace puede tener como destino un documento y la frame en el que se mostrará.
  • Tendrán asociado un nombre, que las distinguirán del resto de las frames de la pantalla y permitirá usarlo en los hiperenlaces.
  • En el caso que se cambie el tamaño de la ventana, se podrá determinar si la frame se ajusta a este tamaño o mantiene su tamaño intacto.
Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendrá una región estática (lista de enlaces, barra de botones, formulario) y otra zona dinámica en la que se mostrará el resultado. De esta forma una de las principales utilidades de las frames es la creación de páginas con un índice (por ejemplo un manual) o una cabecera estática, consiguiendo así una mejora de la navegación al poder acceder al índice de una manera más rapida y efectiva. Un documento con frames se define de manera diferente a un documento normal, siendo la estructura del documento distinta, en este caso no se define la etiqueta BODY. Su estructura es la siguiente:


<HTML>
      <HEAD>
          Definiciones de la cabecera 
      </HEAD> 
      <FRAMESET>
         Definición de los frames que forman el documento. 
      </FRAMESET> 
      <NOFRAMES>
        Instrucciones HTML que se mostrará en los navegadores que no lo soporten. 
      </NOFRAMES>    
</HTML>

Una vez definido el documento que contendrá los frames, es hora de saber la estructura, con la siguiente instrucción definiremos las frames que formarán el documento, su sintaxis es similar a la de las tablas, permitiendo definir muy distintos tipos de frames. Su formato es el siguiente:

    <FRAMESET ROWS=filas o COLS=columnas>
        <FRAME SRC=URL_1 NAME="Nombre del frame1"> 
        <FRAME SRC=URL_2 NAME="Nombre del frame1"> 
        . . . 
        <FRAME SRC=URL_N NAME="Nombre del frameN"> 
    </FRAMESET>

Es importante indicar que sólo se podrá definir uno de los atributos, o la lista de filas (ROWS) o la lista de columnas (COLS).
  • ROWS: Se definirá separado por comas el tamaño de cada una de las frames. De esta forma se dividirá la pantalla de forma horizontal, según cada una de las filas definidas. El tamaño de la frame, puede expresar en porcentaje o píxeles.
  • COLS: Toma los mismos posibles valores que ROWS, pero en este caso para las columnas, se definirán las frames de forma vertical.
Una vez definida el número de frames por fila o por columna se definirá el contenido de cada una de estas con la etiqueta FRAME, pero igualmente se podría definir frames dentro de frames, de forma que cada una de las definidas anteriormente podría estar divida en varias frames, esto se hará incluyendo dentro de la instrucción FRAMESET, nuevas instrucciones FRAMESET que dividirán esta en los frames indicados.

Los atributos importantes de la etiqueta frame son:
  • SRC="URL": especifica el documento HTML o fichero que se mostrará en la frame definido.
  • NAME="Nombre del frame": Indica el nombre de la frame, este nombre es importante ya que se usará en los hiperenlaces.
  • SCROLLING=YES | NO | AUTO:  Indica sil frame tendrá o no una barra de scroll, la barra de scroll se muestra en el lateral y permite desplazarse por el documento, pulsando con el ratón en ella.
  • NORESIZE: Indica quel frame no debe ser variada de tamaño por el usuario
  • TARGET: Indicará el frame de destino de la operación.
Después de toda la teoría, vamos a ver un ejemplo practico, es muy típico que las páginas estén formadas por un encabezado para colocar una imagen tipo logotipo, debajo podemos tener a la izquierda un menú de navegación, donde iremos visualizando los enlaces en el centro de la página, y a la derecha podríamos dejar una zona auxiliar para poner información extra, para terminar podríamos colocar un pié donde poner información de nosotros. Para verlo mejor está la imagen siguiente:


El código necesario para crear esa estructura es el siguiente:


<frameset rows="200,600,100" frameborder="yes" border="0" framespacing="0">
<frame name="logo" src="cabecera.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame">
</frame>
<frameset cols="200,700,*">
<frame name="izquierda" src="menu.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" NORESIZE>
</frame>
<frame name="centro" src="principal.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" NORESIZE>
</frame>
<frame name="derecha" src="derecha.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" NORESIZE>
</frame>
</frameset>
</frame>
<frame name="pie" src="pie.html" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" NORESIZE>
</frameset>

HTML: Tablas

Además de las listas, otro elemento para ordenar una página Web son las tablas. La mayoría de las páginas Web antiguamente basaban su diseño en tablas, ya que eran de gran utilidad en su diseño. En las páginas Web todos los objetos se alinean por defecto a la izquierda, pero el uso de tablas permite distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse. El HTML básico para utilizar tablas se compone de las siguientes etiquetas:
  • <table> y </table> que se utiliza para crear una tabla.
  • <tr> y </tr> que identifica el principio de una fila en una tabla.
  • <td> y </td> que identifica una celda dentro de una fila. Las celdas, son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.


Para las etiquetas <td> y <th> existen los atributos "colspan" y "rowspan", que se utilizan para combinar celdas. A través del atributo colspan se especifica el número de columnas que serán combinadas, y a través del atributo rowspan se especifica el número de filas que se combinarán, que por defecto siempre será una. Veamos un simple ejemplo con el atributo "colspan"


Un resumen dentro de una tabla de los atributos que podemos usar:

Atributo
Significado
Valores
width
    Ancho de la tabla
Número de pixels, o un % cuando se desee ajustar al ancho de la ventana
height
Espacio entre el contenido de las celdas y el borde
Número de pixels, o un % cuando se desee ajustar al ancho de la ventana
cellpadding
Espacio entre el contenido de las celdas y el borde
Número de pixels
cellspacing
Espacio entre celdas
Número de pixels
border
Espesor del borde
Número de pixels
align
Alineación de la tabla dentro de la página
Left    (izquierda)
Right   (derecha)
Center   (centro)
bgcolor
Color de fondo
Número hexadecimal o nombre del color
background
Imagen de fondo
Uso de <img> con src
bordercolor
Color del borde
Número hexadecimal o nombre del color.

miércoles, 7 de mayo de 2014

HTML: Listas

Además de títulos, párrafos, imágenes, un sitio web puede tener una forma de organizar la información en la pagina y esto se puede hacer a través de las listas. En esta entrada vamos a centrarnos en dos tipos de listas compatibles en HTML:
  • Listas sin ordenar: Están formadas por elementos junto a los que aparece una viñeta. La etiqueta <ul> identifica una lista desordenada y dentro de la lista, cada elemento se identifica con la etiqueta <li>. La etiqueta <ul> es compatible con un atributo type que permite cambiar el tipo de viñeta. Los valores que se pueden asignar son:
    • disc que muestra un circulo relleno
    • circle que muestra un circulo vacío
    • square que indica un cuadrado relleno
    • Si no usamos el atributo type, las listas utilizan la viñeta disc como predeterminada.
  • Listas ordenadas: Las listas ordenadas son similares a las listas desordenadas, pero éstas se identifican mediante números, en lugar de viñetas. La etiqueta <ol> identifica la lista ordenada y dentro de la lista cada elemento se identifica con la etiqueta <li>

La idea para Generar una lista dentro de Otra lista, es de tener una lista General y dentro de Cada elemento de esta lista colocar otra Lista, teniendo así como elemento de la lista General otro lista:

Artículo sustraído de: http://neytortec1.blogspot.com.es/2013/05/listas-dentro-de-listas-en-html.html
La idea para Generar una lista dentro de Otra lista, es de tener una lista General y dentro de Cada elemento de esta lista colocar otra Lista, teniendo así como elemento de la lista General otro lista:

Artículo sustraído de: http://neytortec1.blogspot.com.es/2013/05/listas-dentro-de-listas-en-html.html
También podemos realizar listas anidadas, estás consisten en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. En el siguiente ejemplo se puede apreciar claramente como es la estructura de las listas anidadas

La idea para Generar una lista dentro de Otra lista, es de tener una lista General y dentro de Cada elemento de esta lista colocar otra Lista, teniendo así como elemento de la lista General otro lista:

Artículo sustraído de: http://neytortec1.blogspot.com.es/2013/05/listas-dentro-de-listas-en-html.html
La idea para Generar una lista dentro de Otra lista, es de tener una lista General y dentro de Cada elemento de esta lista colocar otra Lista, teniendo así como elemento de la lista General otro lista:

Artículo sustraído de: http://neytortec1.blogspot.com.es/2013/05/listas-dentro-de-listas-en-html.htm
La idea para Generar una lista dentro de Otra lista, es de tener una lista General y dentro de Cada elemento de esta lista colocar otra Lista, teniendo así como elemento de la lista General otro lista:

Artículo sustraído de: http://neytortec1.blogspot.com.es/2013/05/listas-dentro-de-listas-en-html.htm

martes, 6 de mayo de 2014

HTML: Mapeando

Sabemos cual es el elemento básico de navegación de una web: El enlace hipertexto. Sabemos que estos enlaces son palabras, textos o imágenes que, al pinchar sobre ellos, nos envían a otras páginas o zonas. Los mapas de imágenes es un nuevo planteamiento de navegación que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geométricas y funcionan exactamente del mismo modo que los otros enlaces. No tiene que ser toda la imagen, puede ser parte de ella la que sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las tags usadas para esto son:
  • Las tags <map>.....</map> identifican que vamos a crear un mapa de imágenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa.
  • El tag <area> define las áreas que vamos a poder activar en esa imagen. A esta tag le acompañan los siguientes atributos:
    • shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse de:
      • rect (rectangular)
      • poly (poligonal)
      • circle (circular).
  • Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.
  • Href= Como ya sabe, indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada.
Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en la tag de imagen correspondiente a la imagen a mapear el atributo:
usemap="#nombre del mapa". Un ejemplo de una imagen mapeada es la siguiente, donde tiene un enlace en una zona específica.

Y un ejemplo del código es el siguiente:

<img src="campo_fsala2.jpg" alt="Prueba" width="500" height="260" border="0" usemap="#campo">

<map name="campo">

<area alt="centro del campo" shape="circle" coords="250,125,33" href="http://www.tostring.es">
<area alt="area defensa" shape="poly" coords="12,196,61,181,83,144,83,94,62,60,11,50" href="http://www.tostring.es">
<area alt="area defensa" shape="poly" coords="486,201,439,188,418,158,418,106,441,67,486,54" href="http://www.tostring.es">
</map>