Cómo se escribe una página web correcta.
- Aprender a crear páginas web con tablas e imágenes.
- Aprender a válidar el código HTML para crear páginas web correctas.
- Aprender las principales novedades de HTML5.
¿Estás escribiendo bien tus páginas?
HTML: juego de caracteres
El juego de caracteres, también llamado codificación de caracteres.
- Utiliza siempre el mismo juego de caracteres.
- Utiliza UTF-8 sin BOM. Permite mezclar texto de diferentes idiomas sin ningún problema.
2. ¿Qué es el BOM?
- Diferencias entre ISO-8859-1 (Latin1) e ISO-8859-15 (Latin9) (Simbolo del euro).
- Cómo se indica el juego de caracteres en HTML (etiqueta meta).
<head>
Diferencias entre HTML4, XHTML1 y HTML5.
UTF-8 sin BOM
BOM: marca de orden de bytes.
PHP utf-8 sin bom. Ya que cuando se usa almacena un salto de línea al comienzo del fichero. Con el Sin BOM, se elimina dicho problema.
tablas
table head cell: Son utilizadas para dar semantica a la tabla. Son utilizadas en el comienzo y final de la tabla.
THEAD: Agrupa filas de cabecera.
TBODY: Agrupa filas de cuerpo.
TFOOT: Agrupa filas de pie.
Estilos por columnas.
<html>
<head>
<title>Desempleo</title>
<style>
table, tr, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
El desempleo en España
La siguiente tabla muestra la evolución del desempleo en España, comparado con la media de los 27 países de la Unión Europea, Grecia, que compite con España en ser el primero en esta vergonzosa competición y Estados Unidos y Japón, dos de las primeras economías mundiales.
<table>
<b>
<thead>
<tr>
<td>País</td>
<td>2000</td>
<td>2001</td>
<td>2002</td>
<td>2003</td>
<td>2004</td>
<td>2005</td>
<td>2006</td>
<td>2007</td>
<td>2008</td>
<td>2009</td>
<td>2010</td>
<td>2011</td>
<td>2012</td>
<td>2013</td>
</tr>
</thead>
</b>
<tbody>
<tr>
<td>UE (27 países)</td>
<td>8.9</td>
<td>8.7</td>
<td>9</td>
<td>9.1</td>
<td>9.3</td>
<td>9</td>
<td>8.2</td>
<td>7.2</td>
<td>7</td>
<td>9</td>
<td>9.6</td>
<td>9.6</td>
<td>10.4</td>
<td>10.8</td>
</tr>
<tr>
<td>España</td>
<td>11.9</td>
<td>10.6</td>
<td>11.5</td>
<td>11.5</td>
<td>11</td>
<td>9.2</td>
<td>8.5</td>
<td>8.2</td>
<td>11.3</td>
<td>17.9</td>
<td>19.9</td>
<td>21.4</td>
<td>24.8</td>
<td>26.1</td>
</tr>
<tr>
<td>Grecia</td>
<td>11.2</td>
<td>10.7</td>
<td>10.3</td>
<td>9.7</td>
<td>10.6</td>
<td>10</td>
<td>9</td>
<td>8.4</td>
<td>7.8</td>
<td>9.6</td>
<td>12.7</td>
<td>17.9</td>
<td>24.5</td>
<td>27.5</td>
</tr>
<tr>
<td>Estados Unidos</td>
<td>4</td>
<td>4.8</td>
<td>5.8</td>
<td>6</td>
<td>5.5</td>
<td>5.1</td>
<td>4.6</td>
<td>4.6</td>
<td>5.8</td>
<td>9.3</td>
<td>9.6</td>
<td>8.9</td>
<td>8.1</td>
<td>7.4</td>
</tr>
<tr>
<td>Japón</td>
<td>4.7</td>
<td>5</td>
<td>5.4</td>
<td>5.3</td>
<td>4.7</td>
<td>4.4</td>
<td>4.1</td>
<td>3.9</td>
<td>4</td>
<td>5.1</td>
<td>5.1</td>
<td>4.6</td>
<td>4.3</td>
<td>4</td>
</tr>
</tbody>
</table>
Fuente: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsdec450&plugin=1">Índice de desempleo anual</a>, Eurostat
</body>
</html>
imágenes
- El concepto de hipermedia, la etiqueta img, sus atributos obligatorios (src (ruta donde se encuentra la imagen), alt(texto alternativo que se debe viaualizar cuando la imagen no se ha cargado o no se puede cargar)), opcionales (width, height, (dimensiones de la imagen), longdesc (para proporcionan una descripcion larga de la imagen), ismap, usemap (mapas de imagen)) y los atributos desaconsejados (align, border, hspace,vspace).
- Las características de los formatos gráficos (GIF, JPG/JPEG, PNG), los mapas de imagen y su uso (map, area, atributos usemap e ismap).
Se suele utilizar una tecnica llamada Dithering, para representar una imagen de color verdadero con solo 256 colores. Técnica que se utiliza colocando dos puntos de diferentes colores uno al lado del otro, generando de esta manera un tercer color que no es representado con los 256.
Permite trabajar con imágenes con más de 16 millones de colores y permite trabajar ficheros con tamaños muy pequeños. Usa algoritmos con compresión con perdidas.
PNG: formato sin perdidas, es mejor que jpg.
Cada zona activa o sensible se define mediante una figura geométrica.
Existen tres tipos de figuras geométricas:
-<area shape="" coords="" href="" alt="" />
shape: tipo de figura geométrica.
coords: coordenadas de la figura geométrica.
href: URL del destino del enlace.
alt: texto alternivo que representa la figura.
---rect: define un rectangulo (shape="rect" coords="x1,y1,x2,y2")
Existen tres tipos de figuras geométricas:
-<area shape="" coords="" href="" alt="" />
shape: tipo de figura geométrica.
coords: coordenadas de la figura geométrica.
href: URL del destino del enlace.
alt: texto alternivo que representa la figura.
---rect: define un rectangulo (shape="rect" coords="x1,y1,x2,y2")
validación del código
- Se explica la validación del código HTML.
- Se muestran las diferentes versiones que existen de HTML.
- Se explica qué es el DOCTYPE y qué valor de DOCTYPE se debe usar.
- Se muestra una lista de DOCTYPEs populares.
- Se presentan los servicios de validación más populares, como W3C Markup Validator, WDG HTML Validator, Validator.nu.
- Se realiza una demostración de validación de tres páginas.
¿Qué es HTML5?
- HTML5.
El DHTML (HTML dinámico) es la unión de HTML (lenguaje de marcado), CSS (hojas de estilo), DOM (jerarquía de objetos) y del JAVASCRIPT..
El AJAX (técnica que permite crear aplicaciones interactivas que se ejecutan en el navegador, Asynchronous JavaScript And XML y permite crear páginas web en las que cambia su contenido sin que se tenga que recargar la página.) es la unión de DHTML, XHR (Api de programación, xhtml, http request), XML (Metalenguaje) y JSON (Formato de intercambio de datos,JavaScript Object Notation y se emplea para serializar estructuras de datos en JavaScript.) .
HTML5 = HTML + XHTML
- Canvas. Permite especificar un área en la que se puede dibujar mediante una .... para JAVASCRIPT.
<canvas id="myDrawing" width="200" height="200">
<p>Tu navegador no admite canvas. </p>
</canvas>
- SVG. Lenguje de etiquetas basado en XML, que permite crear gráficos vectoriales.
- Geolocalización (API de geolocalización para javascript, que permite optener la localización del usuario siempre que el dispositivo que se utilice proporcione esa información y el usuario lo permita ) .
navigator.geolocation.getCurrentPosition(
function (positio) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showLocation(lat,lon);
}
);
- Caché. Permite guardar aquellos recursos, que se quiere que se almacenen de forma local.
Permite mejorar el rendimiento.
- Base de datos. Permite almacenar información de manera local, en una base de datos SQLite.
- Web workers. Es una API para JavaScript que permite crear multiples hilos de ejecución, que se pueden ejecutar en paralelo.
Páginas que permiten determinar, cuáles navegadores soportan qué:
http://fmbip.com/ Ofrece los niveles de compatividad de los diferentes navegadores.
http://www.html5rocks.com/es/ para aprender más sobre HTML5. (Desarrollado por Google)
de HTML4 a HTML5
<header>
<nav>
<main>
<article>
<section>
<aside>
<figure><fidcaption> imagen, fragmento de código o artículo.
<footer>
Los formularios en HTML5
nuevos controles de HTML5:
- url.
<nput type="url" name="url" />
Se usa en aquellos campos que van a contener una URL, valida el valor del campo al momento de enviar el formulario.
En los dispositivos moviles cambia el teclado.
- tel.
<input type="tel" name="telf" pattern="(+[0-9]{2}) [0-9]{9}" />
Se usa para campos donde se debe introducir un nro de teléfono.
En los dispositivos moviles cambia el teclado.
- email.
<input type="email" name="email" />
Para introducir una dirección de correo electronico valida.
En los dispositivos moviles cambia el teclado.
- number.
<input type="number" name="cantidad" min="1" max="5" value="2" />
Permite realizar restricciones sobre el nro que se esta ingresando.
- color.
<input type="color" name="favcolor" value="#123456" />
Se usa para aquellos campos donde se puede seleccionar un color desde una paleta de colores. Si no se define un color por defecto asigna el color negro.
- search.
<input type="search" name="buscador" />
Se usa para definir campos de busqueda en formato de texto.
- range.
<input type="range" name="puntos" min="1" max="10" />
Se usa para definir un valor numerico que este dentro de un rango especifico.
- datetime.
<input type="datetime" name="fechahora" />
Permite seleccionar la hora completa ademas del dia, mes, año y zona horaria.
- datetime-local.
Permite seleccionar la hora completa ademas del dia, mes, año.
- date.
<input type="date" name="fecha" />
Permite seleccionar una fecha completa por dia, mes y año.
- month.
Permite al usuario seleccionar un mes y un año específicos.
- week.
Permite al usuario seleccionar una semana de un año especificos
- time.
Permite al usuario seleccionar la hora en formato de horas y minutos.
Si no son soportados en el navegador se comportaran por defecto como un campo de tipo texto.
- autocomplete.
<form automplete="on">
<input type="email" name="email" autocomplete="off">
funciona con text, search, url, tel, email, date pickers, password, range, color.
- autofocus.
<input type="text" name="nombre" autofocus />
Especificar en qué campo de entrada se coloque automáticamente el cursor. Solo se debe definir un solo elemento con este atributo en la misma página.
Puede causar problemas de accesabilidad y usabilidad, por tanto cuando se use este atributo, se debe estar seguro que todos los usuarios vayan a usar ese campo unicamente.
- min.
- max.
funcionan con los tipos de input: number, range, date, datetime, datetime-local, month, time, week.
- step.
<input type="number" name="puntos" min="2" max="14" step="2" value="2" />
Especifica los nros de intervalos numéricos validos para un elemento input. Puede ser usado con los atributos max y min.
funcionan con los tipos de input: number, range, date, datetime, datetime-local, month, time, week.
- pattern.
<input type="text" name="prefijo_pais" pattern="[A-Za-z]{3}" title="Código de 3 letras" />
Se especifican los caracteres que se deben introducir en el campo de texto.
funcionan con los tipos de input: text, search, url, tel, email, password.
- placeholder.
<input type="text" name="nombre" placeholder="Juan Pérez" />
Permite mostrar una pista de lo que el usuario debe introducir en el campo de entrada.
funcionan con los tipos de input: text, search, url, tel, email, password.
- required.
<input type="text" name="nombre" required />
Especifica que el input que lo contiene debe ser rellanado antes de enviar el formulario por el usuario.
funcionan con los tipos de input: text, search, url, tel, email, date pickers, password, number, checkbox, radio, file.
qué es Modernizr y los polyfills.
Modernizr: es una librería JAVASCRIPT que nos permite conocer la compatibilidad del navegador del usuario con las nuevas características del HTML5 y CSS3.
Polyfills: son librerías JAVASCRIPT que nos permiten cubrir las capacidades HTML5 y CSS3 que los navegadores no soportan.
La unión de estos permite ahorro de trabajo para los desarrolladores.
Ejemplo de formulario
¿Por qué es importante escribir código correcto?
DOM: Modelo de Objetos de documentos. ES una interfaz de programacion de aplicaciones(API) ñpara documentos validos HTML y bien construidos XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula.
En DOM, los documentos tienen una estructura lógica que es muy parecida a un árbol; para se más preciso, es más bien como un "bosque" o una "arboleda" que puede contener más de un arbol. Cada documentos contiene cero o un nodo doctype, un nodo de elemento de documento, y cero o más comentarios o instrucciones de tratamiento; el elemento del documento sirve como la raíz del árbol para el documento.
HTML: ¿migrar a un nuevo juego de caracteres?
XML: HTML y XHTML
No hay comentarios.:
Publicar un comentario