HTML



HTML básico

Hypertext Markup Language (HTML)

Atributos de las etiquetas HTML

Algunas etiquetas pueden contener información adicional llamadas atributos

Algunas etiquetas no tienen contenido y se pueden abrir y cerrar en una etiqueta

HTML 5

Estructura de una página HTML 

<!DOCTYPE html>
<html lang="es">
	<head>
    <meta charset="utf-8">
    <meta name="description" content="Contenido">
    <meta name="keywords" content="key1, key2">
    <meta name="author" content="Adan Perez">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Título de la página</title>
    <link rel="stylesheet" href="style.css">   
    <script src="script.js"></script>
	</head>
	<body>
		contenido visible de la página
	</body>
</html>

Comentarios: <!-- ... -->

comentarios para documentar el fichero HTML o el texto

<!-- Mi página web, por Jaimito Pérez 
     Ingeniería Web, ETSIIT       -->
<p>la asignatura <!-- NO --> es divertida!</p>

Etiquetas HTML - Tabla de etiquetas comunes (1/2)

Hay muchos tipos de etiquetas HTML. Una lista de las más usadas sigue. Se puede ver la lista completa en este enlace. A menos que se especifique lo contrario se considera que las etiquetas se usan dentro del <body>

Etiqueta Descripción
<title> Page title (in <head>)
<meta> Meta information tag (in <head>)
<p> Paragraph tag
<h1> ... <h6> Heading tags
<header>, <footer> Header/Footer tags
<article>, <section> Article and section tags
<hr /> Horizontal rule tag
<br /> Line break tag
<a> Anchor tag (page links)

Etiquetas HTML - Tabla de etiquetas comunes (2/2)

Tag Description
<img /> Image tag
<em>, <strong> Emphasis (italic) and strong (bold) tags
<del>, <ins> Deletion (strikethrough) and insertion tags
<abbr> Abbreviation tag
<ul>, <ol> Unordered and ordered list tags
<li> List item tag (used as children of <ul> or <ol> list tags)
<dl>, <dt>, <dd> Definition list tags
<blockquote>, <q> Block and inline quotation tags
<code> Computer code tag
<pre> Preformatting tag

Título de la página: <title>

describe el título de la página

<title>Tema 2: HTML Básico</title>

Metadatos de la página Web: <meta>

información sobre la página (para el navegador, buscador, etc.) 

<meta charset="utf-8" />
<meta name="description"
   content="Sitio Web de los autores de programas Java." />
<meta name="keywords" content="java, textbook" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Encabezados: <h1>, <h2>, ..., <h6>

encabezados o títulos para separar las partes principales de la página (block)

<h1>Universidad de Cantabria</h1>
<h2>Departamento de Matemática Aplicada y Ciencias de la Computación</h2>
<h3>Escuela de Ingenieros Industriales y de Telecomunicación</h3>

Párrafo: <p>

párrafos del texto (block)

<p>Neque porro quisquam est qui dolorem ipsum quia 
dolor sit amet, consectetur, adipisci velit...
</p>

Enlaces: <a>

enlaces, o "anclas (anchors)", a otras páginas (inline)

<p>
	Buscar 
	<a href="http://www.google.com/">Google</a> o 
  <a href="../index.html">Lecture Notes</a>.
</p>

Imágenes: <img>

inserta una imagen en la página (inline)

<img src="images/gollum.jpg" alt="Gollum de LOTR" />

Más detalles sobre imágenes

<a href="http://theonering.net/">
	<img src="images/gandalf.jpg" alt="Gandalf del LOTR"
	     title="No pasarán!" />
</a>

Imágenes adaptables

<a href="http://theonering.net/">
	<img src="images/gandalf.jpg" alt="Gandalf del LOTR" 
	 style="width:30%;"   title="No pasarán!" />
</a>

Imágenes con descripción: <figure>

inserta una descripción al pie de la imagen

<figure> 
<img src="images/gollum.jpg" alt="Gollum de LOTR" />  
<figcaption>Personaje Gollum en LOTR </figcaption>
</figure>

Etiquetas Semánticas:

No influyen en la apariencia de la página, sino en la estructura de la página

semantic tags layout

Más etiquetas semánticas

Línea Horizontal: <hr>

línea horizontal para separar visualmente secciones de una página (bloque)

<p>Primer párrafo</p>
<hr>
<p>Segundo párrafo</p>

Salto de línea: <br>

fuerza un salto de línea en medio de un elemento block (inline)

<p>La calidad nunca es un accidente, <br> siempre es el resultado 
de un esfuerzo de la inteligencia</p>
<p>Dos cosas me admiran: la inteligencia de las bestias <br>  y la 
bestialidad de los hombres.</p>

Elementos de frase: <em>, <strong>

em: texto enfatizado (representado normalmente en italica)
strong: texto muy enfatizado (representado normalmente en negrita) 

<p>
	HTML es <em>realmente</em>,
	<strong>REALMENTE</strong> divertido!
</p>

Eliminaciones e Inserciones: <del>, <ins>

contenido que debe ser eliminado o añadido al documento (inline)

<p>
	<del>Final Exam</del> <ins>Midterm</ins> is on <del>Aug 29</del> <ins>Apr 17</ins>.
</p>

Abreviaciones: <abbr>

una abreviatura, acrónimo, o término corriente (inline)

<p>
	Los buzos cuidadosos siempre recuerdan comprobar sus equipos
	<abbr title="Self-Contained Underwater Breathing Apparatus">SCUBA</abbr> .
</p>

Listas sin ordenar: <ul>, <li>

ul representa una lista con viñetas (block)
li representa un elemento simple dentro de la lista (block) 

<ul>
	<li>Sin zapatos</li>
	<li>Sin camiseta</li>
	<li>No hay problema!</li>
</ul>

Más sobre listas sin ordenar

<ul>
	<li>Simpsons:
		<ul>
			<li>Homer</li>
			<li>Marge</li>
		</ul>
	</li>
	<li>Familia del individuo:
		<ul>
			<li>Peter</li>
			<li>Lois</li>
		</ul>
	</li>
</ul>

Listas ordenadas: <ol>

ol representa una lista ordenada de elementos (block) 

<p>Grados ofertados en la Escuela:</p>
<ol>
	<li>Ingeniería de Tecnologías de Telecomunicación</li>
	<li>Ingeniería en Tecnologías Industriales</li>
	<li>Ingeniería Eléctrica</li>
	<li>Ingeniería Electrónica Industrial y Automática</li>
	<li>Ingeniería Mecánica</li>
	<li>Ingeniería Química</li>
</ol>

Lista de definición: <dl>, <dt>, <dd>

dl representa una lista de definiciones de términos (block)
dt representa cada término y dd su definición 

<dl>
	<dt>SGML</dt> <dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
	<dt>XML</dt> <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
	<dt>XHTML</dt> <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>

Citas: <blockquote>

cita larga (block) 

<p>Tim Berners Lee, creador de la WWW:</p>
<blockquote>
	<p>El poder de la web está en su universalidad. 
	         El acceso para todos sin importar su discapacidad es un aspecto esencial.</p>
</blockquote>

Citas Inline: <q>

cita corta (inline)

<p>Dijo Miguel de Cervantes: <q>Cada uno es artífice de su ventura</q></p>

No se usa comillas " por dos razones:

  1. HTML no debe contener caracteres de comillas dobles; deben ser escritas como &quot;
  2. el uso de <q> nos permite aplicar estilos CSS a las citas (ver más adelante)

No se usa comillas " por dos razones:

  1. HTML no debe contener caracteres de comillas dobles; deben ser escritas como &quot;
  2. el uso de <q> nos permite aplicar estilos CSS a las citas (ver más adelante)

Código de oredenador: <code>

parte de código de ordenador (mostrado habitualmente en un tipo de letra de ancho fijo)

<p>
	Las etiquetas <code>ul</code> y <code>ol</code>
	crean listas.
</p>

Texto preformateado: <pre>

parte de un texto pre-formateado (block)

<pre>
         Steve Jobs speaks loudly
            reality distortion
           Apple fans bow down
</pre>

Etiquetas anidadas

<p>
	HTML es <em>realmente,
	<strong>REALMENTE</em> muy</strong> divertido!
</p>

Elementos block e inline (explicación)

elements

Estándares Web

W3C HTML Validator

Representación de Carateres HTML

manera de representar cualquier caracter Unicode dentro de una página Web

caracter(es) entidad
< >&lt; &gt;
é è ñ&eacute; &egrave; &ntilde;
™ ©&trade; &copy;
π δ Δ&pi; &delta; &Delta;
И&#1048;
" &&quot; &amp;

HTML-encoding text

&lt;p&gt;
	&lt;a href=&quot;http://google.com/search?q=marty&amp;ie=utf-8&quot;&gt;
		Search Google for Marty
	&lt;/a&gt;
&lt;/p&gt;

Iconos ("favicon")

<link href="filename" type="MIME type" rel="shortcut icon" />

<link href="yahoo.gif" type="image/gif" rel="shortcut icon" />
favicon favicon

Tablas

Tablas en HTML: <table>, <tr>, <td>

Una tabla 2D de filas y columnas de datos (block element) 

<table>
	<tr><td>1,1</td><td>1,2 okay</td></tr>
	<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>
1,11,2 okay
2,1 ancho real2,2

Cabeceras de tablas, títulos: <th>, <caption> 

<table>
	<caption>Mis datos valiosos</caption>
	<tr><th>Columna 1</th><th>Columna 2</th></tr>
	<tr><td>1,1</td><td>1,2 okay</td></tr>
	<tr><td>2,1 ancho real</td><td>2,2</td></tr>
</table>
Mis datos valiosos
Columna 1Columna 2
1,11,2 okay
2,1 ancho real2,2

Estilo de las tablas 

table { border: 2px solid black; caption-side: bottom; }
tr { font-style: italic; }
td { background-color: yellow; text-align: center; width: 30%; }
Mis datos valiosos
Columna 1Columna 2
1,11,2 okay
2,1 ancho real2,2

La propiedad border-collapse 

table, td, th { border: 2px solid black; }
table { border-collapse: collapse; }
Sin border-collapse
Column 1Column 2
1,11,2
2,12,2
Con border-collapse
Column 1Column 2
1,11,2
2,12,2

Los atributos rowspan y colspan

<table>
	<tr><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th></tr>
	<tr><td colspan="2">1,1-1,2</td>
		<td rowspan="3">1,3-3,3</td></tr>
	<tr><td>2,1</td><td>2,2</td></tr>
	<tr><td>3,1</td><td>3,2</td></tr>
</table>

Estilos de columna: <col>, <colgroup> 

<table>
	<col class="urgente" />
	<colgroup class="destacar" span="2"></colgroup>
	
	<tr><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th></tr>
	<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
	<tr><td>2,1</td><td>2,2</td><td>2,3</td></tr>
</table>

No usar tablas para maquetar!

Formularios

Datos en Web

Cadenas de consulta y parámetros 

URL?name=value&name=value...

http://www.google.com/search?q=Obama
http://example.com/student_login.php?username=perez&id=1234567

Formularios HTML

HTML form

Formulario HTML: <form> 

<form action="URL de destino">
	controles del formulario
</form>

Ejemplo Formulario 

<form action="http://www.google.com/search">
	<div>
		Busquemos en Google:
		<input name="q" />
		<input type="submit" />
	</div>
</form>

Elementos de formularios

Una lista parcial de elementos de formularios HTML. Para más información en los elementos de formularios, consultar MDN.

Elementos de formularios: <input> 

<!-- 'q' es el nombre del parametro requerido por Google -->
<input type="text" name="q" value="Informe Pisa" />
<input type="submit" value="Venga!" />

Campos de Texto: <input> 

<input type="text" size="10" maxlength="8" /> NetID <br />
<input type="password" size="16" /> Password
<input type="submit" value="Log In" />

Cajas de Texto: <textarea>

un area de texto multi-línea (inline) 

<textarea rows="4" cols="20">
Escribe tus comentarios aquí.
</textarea>

Checkboxes con: <input>

opciones si/no que se pueden seleccionar o deseleccionar (inline) 

<input type="checkbox" name="lechuga" /> Lechuga
<input type="checkbox" name="tomate" checked="checked" /> Tomate
<input type="checkbox" name="pepino" checked="checked" /> Pepino

Botones tipo Radio: <input>

conjuntos de opciones mutuamente exclusivos (inline) 

<input type="radio" name="cc" value="visa" checked="checked" /> Visa
<input type="radio" name="cc" value="mastercard" /> MasterCard
<input type="radio" name="cc" value="amex" /> American Express

Etiquetas: <label> 

<label><input type="radio" name="cc" value="visa" checked="checked" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label>
<label><input type="radio" name="cc" value="amex" /> American Express</label>

Listas desplegables: <select>, <option>

menú de opciones que se expanden y contraen (inline) 

<select name="favoritecharacter">
	<option>Jerry</option>
	<option>George</option>
	<option selected="selected">Kramer</option>
	<option>Elaine</option>
</select>

Uso de <select> en listas

<select name="favoritecharacter[]" size="3" multiple="multiple">
	<option>Jerry</option>
	<option>George</option>
	<option>Kramer</option>
	<option>Elaine</option>
	<option selected="selected">Newman</option>
</select>

Grupos de opciones: <optgroup> 

<select name="favoritecharacter">
	<optgroup label="Major Characters">
		<option>Jerry</option>
		<option>George</option>
		<option>Kramer</option>
		<option>Elaine</option>
	</optgroup>
	<optgroup label="Minor Characters">
		<option>Newman</option>
		<option>Susan</option>
	</optgroup>
</select>

Botones Reset 

Name: <input type="text" name="name" /> <br />
Food: <input type="text" name="meal" value="pizza" /> <br />
<label>Meat? <input type="checkbox" name="meat" /></label> <br />
<input type="reset" />

Parámetros de entrada ocultos 

<input type="text" name="username" /> Nombre <br />
<input type="text" name="sid" /> ID <br />
<input type="hidden" name="universidad" value="UC" />
<input type="hidden" name="anno" value="2014" />

Agrupación de inputs: <fieldset>, <legend>

grupos de campos de entrada con etiqueta opcional (block) 

<fieldset>
	<legend>Tarjetas de crédito:</legend>
	<input type="radio" name="cc" value="visa" checked="checked" /> Visa
	<input type="radio" name="cc" value="mastercard" /> MasterCard
	<input type="radio" name="cc" value="amex" /> American Express
</fieldset>

Estilo de controles de formulario 

elemento[atributo="valor"] {
	propiedad : valor;
	propiedad : valor;
	...
	propiedad : valor;
}

input[type="text"] {
	background-color: yellow;
	font-weight: bold;
}

Envío de Datos

Problemas cuando se envían datos

<label><input type="radio" name="cc" /> Visa</label>
<label><input type="radio" name="cc" /> MasterCard</label> <br />
Personaje favorito Big Bang:
<select name="startrek">
	<option>Sheldon Cooper</option>
	<option>Rajesh Koothrappali</option>
</select> <br />

El atributo value

<label><input type="radio" name="cc" value="visa" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label> <br />
Personaje favorito Big Bang:
<select name="startrek">
	<option value="sheldon">Sheldon Cooper</option>
	<option value="rajesh">Rajesh Koothrappali</option>
</select> <br />

Codificación URL

Envío de datos a un servidor web

HTTP GET vs. POST requests

Ejemplo de formulario POST

<form action="http://foo.com/app.php" method="post">
	<div>
		Nombre: <input type="text" name="nombre" /> <br />
		Alimento: <input type="text" name="comida" /> <br />
		<label>Carne? <input type="checkbox" name="carne" /></label> <br />
		<input type="submit" />
	<div>
</form>

¿Qué es una validación de formulario?

Validación en lado Cliente y Servidor

La validación se puede realizar:

Problema: Usuarios que envían contenido HTML

Elementos nuevos en HTML 5

Elementos nuevos en HTML5, continuación

Multimedia

Formatos de ficheros multimedia

Formatos de ficheros de imagen

Gráficos Raster y vectorial

bitmap vs. vector

Formatos de ficheros Audio

Formatos de fichero Video

Enlaces a ficheros multimedia

<a href="video.avi">My video</a>

Tipos de ficheros y plugins

browser plugins

Inserción de audio 

<audio controls> 
  <source src="horse.mp3" type="audio/mpeg">
</audio>

Inserción de video 

<video controls > 
  <source="video.mp4" type="video/mp4"> 
</video>

Inclusión de video YouTube con iframe


Referencia a ficheros en la nube (audio/video)

Objetos incrustados: <object>

<object data="video.avi" type="video/avi"></object>

Parámetros: <param>

<object id="slider1" width="100" height="50">
	<param name="BorderStyle" value="thick" />
	<param name="MousePointer" value="hourglass" />
	<param name="Enabled" value="true" />
	<param name="Min" value="0" />
	<param name="Max" value="10" />
</object>

Canvas

Javascript DrawingPanel!

  1. Crear un elemento canvas 
    <canvas id="mycanvas" width="200" height="150"></canvas>
  2. Obtener una referencia del context a partir del cual se puede dibujar cosas, recuerda Graphics g 
    var ctx = document.getElementById("mycanvas").getContext("2d");
  3. Ir a los nodos "DrawingPanel"! 
    ctx.fillStyle = "#FF0000";
ctx.strokeStyle = "#00FF00";
for (var i = 0; i < 10; i++) {
	ctx.fillRect(i * 20, i * 10, 400 - i * 40, 200 - i * 20);
	ctx.strokeRect(i * 20, i * 10, 400 - i * 40, 200 - i * 20);
}

Métodos del contexto Canvas

método canvas análogo DrawingPanel
ctx.fillText(string, x, y); g.drawString(str, x, y);
ctx.fillRect(x, y, width, height); g.fillRect(x, y, width, height);
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke(); 		g.drawOval(x, y, width, height);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.arc(x2, y2);
ctx.stroke(); 		g.drawLine(x1, y1, x2, y2);
ctx.fillStyle = "#FF0000" g.setColor(color);

Más cosas sobre canvas

Diseño Web. Usabilidad

Que es usabilidad?

Dilbert

Visibilidad y realimentación

visibility example

Problemas comunes en la usabilidad web

Problemas de usabilidad en el contenido

Problemas de usabilidad de enlace

Problemas de usabilidad funcional

Sugerencias en el diseño Web

Sugerencias en el diseño Web

Portales sobre diseño Web

Escribiendo para la Web

Páginas web a evitar

Usabilidad y formularios

Optimización en buscadores

Diseño accesible

Herramientas y recursos

Herramientas

Recursos