Mapas de imagen

Aunque el uso de los mapas de imagen se ha reducido drásticamente en los últimos años, aún se utilizan en algunos sitios especializados. Muchas agencias de viaje y sitios relacionados utilizan mapas geográficos para seleccionar el destino del viaje. La mayoría de mapas se realiza hoy en día mediante Flash, aunque algunos sitios siguen recurriendo a los mapas de imagen.
Un mapa de imagen permite definir diferentes zonas "pinchables" dentro de una imagen. El usuario puede pinchar sobre cada una de las zonas definidas y cada una de ellas puede apuntar a una URL diferente. Siguiendo el ejemplo anterior, una sola imagen que muestre un mapa de todos los continentes puede definir una zona diferente para cada continente. De esta forma, el usuario puede pinchar sobre la zona correspondiente a cada continente para que el navegador muestre la página que contiene los viajes disponibles a ese destino.
Las zonas o regiones que se pueden definir en una imagen se crean mediante rectángulos, círculos y polígonos. Para crear un mapa de imagen, en primer lugar se inserta la imagen original mediante la etiqueta <img>. A continuación, se utiliza la etiqueta <map> para definir las zonas o regiones de la imagen. Cada zona se define mediante la etiqueta <area>.

Etiqueta	<map>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	name = "texto" - Nombre que identifica de forma única al mapa definido (es obligatorio indicar un nombre único)
Tipo de elemento	Bloque y en línea
Descripción	Se emplea para definir mapas de imagen

Etiqueta	<area>
Atributos comunes	básicos, internacionalización, eventos y foco
Atributos propios	href = "url" - URL a la que se accede al pinchar sobre el área nohref = "nohref" - Se emplea para las áreas que no son seleccionables shape = "default | rect | circle | poly" - Indica el tipo de área que se define (toda la imagen, rectangular, circular o poligonal) coords = "lista de números" - Se trata de una lista de números separados por comas que representan las coordenadas del área. Rectangular = X1,Y1,X2,Y2 (coordenadas X e Y del vértice superior izquierdo y coordenadas X e Y del vértice inferior derecho). Circular = X1,Y1,R (coordenadas X e Y del centro y radio del círculo). Poligonal = X1,Y1,X2,Y2,...,XnYn (coordenadas de los vértices del polígono. Si las últimas coordenadas no son iguales que las primeras, se cierra automáticamente el polígono uniendo ambos vértices)
Tipo de elemento	Etiqueta vacía
Descripción	Se emplea para definir las distintas áreas que forman un mapa de imagen

Si una imagen utiliza un mapa de imagen, debe indicarlo mediante el atributo usemap. El valor del atributo debe ser el nombre del mapa de imagen definido en otra parte del mismo documento HTML:

<img src="mapa_mundo.gif" usemap="#continentes" />
...
<map name="continentes">
  ...
</map>

Las áreas se definen mediante el atributo shape que indica el tipo de área y coords que es una lista de coordenadas cuyo significado depende del tipo de área definido. El enlace de cada área se define mediante el atributo href, con la misma sintaxis y significado que para los enlaces normales.
El siguiente ejemplo muestra una imagen sencilla que contiene cuatro figuras geométricas:

Figura 6.2 Ejemplo de imagen que incluye un mapa de imagen

Utilizando un círculo, dos rectángulos y un polígono se pueden definir fácilmente cuatro zonas pinchables en la imagen mediante el siguiente código HTML:

<img src="imagen.gif" usemap="#mapa_zonas" />
 
<map name="mapa_zonas">
  <area shape="rect" coords="20,25,84,113" href="rectangulo.html" />
  <area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24" href="triangulo.html" />
  <area shape="circle" coords="130,114,29" href="circulo.html" />
  <area shape="rect" coords="19,156,170,211" href="mailto:rectangulo@direccion.com" />
  <area shape="default" nohref="nohref" />
</map>

Cómo indicar el juego de caracteres en una hoja de estilo

Si una hoja de estilo en cascada (CSS) contiene caracteres que no pertenecen al juego de caracteres ASCII, como por ejemplo las vocales acentuadas (áéíóú) o caracteres especiales como el símbolo de copyright © o las flechas izquierda y derecha (← →), se pueden producir problemas con su uso si no se utiliza el juego de caracteres apropiado.
En Declaring character encodings in CSS del W3C se indica que siempre se debe emplear UTF-8 como juego de caracteres para las páginas web HTML y para las hojas de estilo CSS. Si en el página web se indica el juego de caracteres, entonces no es necesario volver a indicarlo en la hoja de estilo. Sin embargo, se pueden dar situaciones en las que se combinen páginas web y hojas de estilo con distintos juegos de caracteres. En estos casos se debe indicar la codificación empleada en la hoja de estilo.
En la especificación CSS3 Syntax se indican los métodos que se pueden emplear para definir la codificación de una hoja de estilo, de mayor a menor importancia:

1. El valor Byte Order Mark (BOM) de Unicode situado al principio del fichero.
2. El valor indicado por la cabecera HTTP Content-Type o por un protocolo similar cuando se transmite el fichero.
3. El valor indicado por la regla @charset en el propio fichero.
4. El juego de caracteres empleado en el documento que enlaza el documento.
5. Si no se indica nada, se asume que es UTF-8.

Sin embargo, no todos los navegadores web cumplen estas reglas correctamente. Además, una hoja de estilo se puede utilizar en local, por lo que no existirá una cabecera HTTP que indique el juego de caracteres. O también se puede mover a otro servidor web que no haga uso de la cabecera HTTP para indicar el juego de caracteres. Por tanto, lo mejor es indicar siempre el juego de caracteres con la regla @charset.

La regla @charset

El uso de la regla @charset debe cumplir lo siguiente:

• La regla @charset debe ser lo primero que se indique en una hoja de estilo, no puede existir ningún carácter previo, ni siquiera comentarios.
• Si se definen varias reglas @charset, sólo la primera será utilizada.
• No se debe emplear cuando la hoja de estilo esté integrada (embebida) en la propia página web con la etiqueta <style>. Sólo se debe emplear cuando la hoja de estilo está vinculada de forma externa.

Por ejemplo, al principio de una hoja de estilo en cascada se puede escribir:

@charset "UTF-8";

O también:

@charset "iso-8859-15";

En el ejemplo anterior se indica el juego de caracteres ISO-8859-15 (Latin-9), que es similar a ISO-8859-1 pero con la diferencia importante de que incluye el símbolo del euro (€).
Los siguientes dos ejemplos no son correctos:

/* Hay un espacio en blanco antes de la regla @charset */
 @charset "UTF-8";
/* El valor del juego de caracteres se debe indicar entrecomillado */
@charset UTF-8;

El atributo charset en el elemento link

En las versiones anteriores de HTML se indicaba que se podía utilizar el atríbuto charset en la etiqueta <link> para indicar el juego de caracteres de la hoja de estilo enlazada. Sin embargo, el uso de este atributo en <link> está declarado como obsoleto en HTML5 y por tanto no se debe utilizar.

Formularios en HTML5

Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programar y diseñar que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y al darle una devolución inmediata acerca de la información ingresada. También proveen esta experiencia a los usuarios que han deshabilitado javascript en sus navegadores.
Este documento describe los elementos nuevos o que han cambiado que están disponibles en Gecko/Firefox.

El elemento <input>

El elemento <input> tiene nuevos valores para el atributo type.

• search: El elemento representa una caja de búsqueda. Los saltos de línea son quitados del valor ingresado pero no se modifica ninguna otra sintaxis.
• tel: El elemento representa un control para editar un número de teléfono, porque los números teléfonicos varían ampliamente en el mundo. Puedes usar atributos como pattern y maxlength para restringir los valores ingresados en la caja.
• url: El elemento representa un control para editar una URL. Se quitan los saltos de línea y espacios en blanco antes y después del valor ingresados.
• email: El elemento representa una dirección de correo electrónico. Los saltos de línea se quitan automáticamente del valor ingresado. Puede ingresarse una direccón de correo no válida, pero el campo de ingreso sólo funcionará si la dirección ingresada satisface la producción ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde atext está definida en RFC 5322, sección 3.2.3 y ldh-str está definida en RFC 1034, sección 3.5.
  
  Nota: si el atributo multiple está agregado, pueden ingresarse muchas direcciones de correo electrónico en ese campo <input>, como una lista separada por espacios, pero no está implementado actualmente en Firefox.

El elemento <input> también tiene nuevos atributos:

• list: El ID de un elemento <datalist> cuyo contenido, los elementos <option>, van a ser usados como ayudas y serán mostrados como propuestas en el área de sugerencias del campo input.
• pattern: Una expresión regular contra la que es verificado el valor del control, que puede ser usada con valores de type de text, tel, search, url y email.
• formmethod: Una cadena que indica qué método HTTP (GET, POST, PUT o DELETE) debe ser usado cuando se envía; sobrescribe el method del elemento <form>, si se define. El formmethod sólo se aplica cuando el type es image o submit, y, para los métodos PUT y DELETE, sólo funcionará con un destino que esté en el mismo dominio (política del mismo origen).

El elemento <form>

El elemento <form> tiene un nuevo atributo:

• novalidate: Este atributo previene que el formulario sea validado antes del envío.

El elemento <datalist>

El elemento <datalist> representa la lista de elementos <option> como sugerencias cuando se llena un campo <input>.
Puedes usar el atributo list en un elemento <input> para enlazar a un campo de ingreso específico con un elemento <datalist> determinado.

<label>Superhéroe favorito</label>
<input list="superheroes" name="list" />
<datalist id="superheroes">
    <option label="Iron Man" value="Iron Man">
    <option label="The Hulk" value="The Hulk">
</datalist>

El elemento <output>

El elemento <output> representa el resultado de un cálculo.
Puedes usar el atributo for para especificar una relación entre el elemento output y otros elementos en el documento que afectan el cálculo (por ejemplo, ingreso de datos o parámetros). El valor del atributo for es una lista separada por espacios de IDs de otros elementos.

El atributo placeholder

El atributo placeholder en elementos <input> y <textarea> provee una ayuda a los usuarios acerca de qué debe ser ingresado en el campo. El texto introducido en el placeholder no debe contener «enters» o saltos de línea.

<input type="email" id="user-email" placeholder="e.g. john.doe@mozilla.com" required/>

El atributo autofocus

El atributo autofocus te permite especificar que una parte del formulario debe tener foco para ingresar información cuando se carga la página, a menos que el usuario lo cambie, por ejemplo al escribir en otro lugar. Sólo un elemento del formulario en un documento puede tener el atributo autofocus, que es de tipo boolean. Este atributo puede ser aplicado a los elementos <input>, <button>, <select> y <textarea>. La excepción es que autofocus no puede ser aplicado a un elemento <input> si el atributo type hidden está seleccionado (esto quiere decir, no se puede enfocar automáticamente un elemento escondido).

<input type="text" id="user" autofocus />

La propiedad label.control del DOM

La interface HTMLLabelElement DOM brinda una propiedad extra, sumadas a las propiedades que corresponden a los atributos del elemento <label> de HTML. La propiedad control devuelve el controlador etiquetado, es decir el controlador para quien está hecha la etiqueta, que está determinado por el atributo for (si está definido) o por el primer elemento controlador descendiente.

Validación restringida

El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la validación del lado del servidor, que todavía es necesaria por seguridad e integridad de la información, la validación del lado del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta inmediata acerca de la información ingresada.

Sintaxis de HTML para la validación restringida

Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario.

• El atributo required en los elementos <input>, <select> y <textarea> indica que se debe ingresar algún dato. (En el elemento <input>, required sólo se aplica con ciertos valores del atributo type.)
• El atributo pattern en el elemento <input> restringe el valor para que concuerde con una expresión regular específica.
• Los atributos min y max del elemento <input> restringen los valores máximos y mínimos que pueden ser ingresados.
• El atributo step del elemento <input> (cuando se usa en combinación con los atributos min y max) restringe la granularidad de los valores ingresados. Un valor que no se corresponda con un valor permitido no será validado.
• El atributo maxlength de los elementos <input> y <textarea> restringe el máximo número de caracteres (en puntos de código unicode) que el usuario puede ingresar.
• Los valores url y email para type restringen el valor para una URL o dirección de correo válida respectivamente.

Además, puedes prevenir la validación restringida especificando el atributo novalidate en el elemento <form>, o el atributo formnovalidate en el elemento <button> y en el elemento <input> (cuando type es submit o image). Estos atributos indican que el formulario no será validado cuando se envie.

API de validación restringida

Las siguientes propiedades y métodos del DOM relacionadas con la validación restringida están disponibles para scripts del lado del cliente:

• En objetos HTMLFormElement, el método checkValidity(), que devuelve verdadero si todos los elementos asociados del formulario que necesitan validación satisfacen las restricciones y falso si no lo hacen.
• En elementos asociados al formulario:
  • la propiedad willValidate, que es falso si el elemento no satisface las restricciones.
  • la propiedad validity, que es un objeto ValidityState que representa los estados de validación en que está el elemento (p.e., condiciones de restricción que han fallado o exitosas).
  • la propiedad validationMessage, que es un mensaje que contiene todas las fallas en las restricciones que pertenecen a ese elemento.
  • el método checkValidity(), que devuelve falso si el elemento falla en satisfacer alguna de las restricciones o verdadero si pasa lo contrario.
  • el método setCustomValidity(), que establece un mensaje de validación personalizado, permitiendo imponer y validad restricciones más allá de las que están predefinidas.
  
  URL DEL RECURSO AQUI
  

Dilema para enlazar dominio y servidor

Chamo... La universidad me ha tenido full estos días, no me he sentido tan bien que digamos. Menos mal hoy es primero de mayo y estoy libre. Aunque el fin de semana he estado bastante despejada también. Dentro de un rato debo empezar a estudiar para matemáticas porque ya con álgebra estoy lista y no me preocupa tanto. Luego que estudie, seguiré con el servicio que acabo de configurar en

www.000webhost.com, cuya pagina web que he creado se llama dayacristiescobar.000webhostapp.con

Y también tengo un dominio gratis que registre en myfreenom llamado

dayacristiescobar.tk

Ahora el detalle es como enlazar el hosting con el nombre de dominio. Me pondré a investigar. No se por que pero la boca me sabe a espagueti con carne y aun no como nada hoy

¿Cómo nos conectamos a internet?

Existen 3 formas para conectarse a internet:

• ADSL
• FIBRA OPTICA
• CABLE: son redes híbridas, una parte de fibra y otra de cable coaxial. Llevan la fibra hasta el hogar, lo que se denomina FTTH, o fiber to the home.

Acá dejaré un video que explica los térnimos generales de cada conexión.

Tim Berners-Lee, el padre de la Web

Sir Timothy "Tim" John Berners-Lee, KBE (Londres, Reino Unido, 8 de junio de 1955) es un científico de la computación británico, conocido por ser el padre de la Web. Estableció la primera comunicación entre un cliente y un servidor usando el protocolo HTTP en noviembre de 1989. En octubre de 1994 fundó el Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet.

Ante la necesidad de distribuir e intercambiar información acerca de sus investigaciones de una manera más efectiva, Berners-Lee desarrolló las ideas fundamentales que estructuran la web. Él y su grupo crearon lo que por sus siglas en inglés se denomina Lenguaje HTML (HyperText Markup Language) o lenguaje de etiquetas de hipertexto, el protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL (Uniform Resource Locator).

Es posible encontrar muchas de las ideas plasmadas por Berners-Lee en el proyecto Xanadú lo que por sus siglas en inglés se denomina Lenguaje HTML (HyperText Markup Language) o lenguaje de etiquetas de hipertexto, el protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL (Uniform Resource Locator).

Es posible encontrar muchas de las ideas plasmadas por Berners-Lee en el proyecto Xanadú (que propuso Ted Nelson) y el memex (de Vannevar Bush).

 

Bueno, como pueden ver ya tengo mi articulo de prueba que me mandaron a hacer. Chévere, ¿no?. Esto es sólo el comienzo de mi carrera como desarrolladora de páginas web. Hasta la próxima chamitos.