lunes, 18 de enero de 2016

Formulario de prueba de HTML5

Módulo 4. Actividad 4.14


Formulario de prueba de HTML5

En código HTML5:


<!doctype html>

<html lang="es">

<head>

<meta charset="utf-8">
<title> Formulario de prueba de HTML5 </title></head>
<body>
<h1> Formulario de prueba de HTML5 </h1>
<form action="" method="get">
<p> Nombre: <input type="text" name="name_control" autofocus required/></p>
<p> Correo Electrónico: <input type="email" name="email_control" required/></p>
<p> URL: <input type="url" name="url_control" placeholder="Escribe la URL de tu página web personal"/></p>
<p> Fecha: <input type="date" name="date_control"/></p>
<p> Tiempo: <input type="time" name="time_control"/></p>
<p> Fecha y Hora: <input type="datetime" name="datetime_control"/></p>
<p> Mes: <input type="month" name="month_control"/></p>
<p> Semana: <input type="week" name="week_control"/></p>
<P> Número (min -10, max 10): <input type="number" name="number_control" min="-10" max="10" value="0"/></P>
<p> Teléfono: <input type="tel" name="tel_control"/></p>
<p> Término de búsqueda: <input type="search" name="search_control"/></p>
<p> Color favorito: <input type="color" name="color_control"/></p>
<p> <input type="submit" value="Enviar"/></p>
</form>
</body>
</HTML>

Y en Google Chrome se ve así:

Formulario de prueba de HTML5

Nombre: 
Correo Electrónico: 
URL: 
Fecha: 
Tiempo: 
Fecha y Hora: 
Mes: 
Semana: 
Número (min -10, max 10): 
Teléfono: 
Término de búsqueda: 
Color favorito: 
Publicado por en No hay comentarios:
Etiquetas: ,

Nuevas características de HTML5 en formularios

Módulo 4. Actividad 4.14

Nuevas características de HTML5 en formularios

En código HTML5:



<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Nuevas características de HTML5 en formularios</title>
</head>
<body>
<h1> Nuevas características de HTML5 en formularios</h1>
<p> Este es un ejemplo sobre las nuevas características de HTML5 en formularios</p>
<form id="form-order">
<p>
<label for="name"> Nombre (obligatorio)</label>
<input type="text" name="name" id="name" placeholder="Juan Pérez"
autofocus
autocomplete
required/>
</p>
<p>
<label for="passwd"> Contraseña (obligatoria)</label>
<input type="password" name="passwd" id="passwd" placeholder="qwe1234"
pattern="[a-z]{3}[0-9]{4}"
required/> (la contraseña debe contener 3 letras y 4 números en este orden)</p>
<p>
<label for="phone"> Teléfono </label>
<input type="tel" name="phone" id="phone" placeholder="+7965453635"/></p>
<p>
<label for="email"> Email</label>
<input type="email" name="email" id="email" placeholder="ejemplo@email.com"/></p>
<p>
<label for="website"> Tu página web </label>
<input type="url" name="url" id="url" placeholder="http://www.tuweb.com"/></p>
<p>
<label for="numberexample"> Nº de temas </label>
<input type="number" name="numberexample" id="numberexample" min="2" max="14" placeholder="2" step="2"/> (entre 2 y 14, solo pares) </p>
<p>
<label for="deliverydate"> Fecha de envío </label>
<input type="date" name="deliverydate" id="deliverydate" placeholder="Día/Mes/Año" min="2015-07-16" (mínimo 16 de julio de 2015) </p>
<p>
<label for="colorexample"> Color del ítem </label>
<input type="color" name"colorexample" id="colorexample" value="#1A33FF"/></p>
<p>
<label for="search"> Buscar </label>
<input type="search" name="search" id="search"/></p>
<p>
<label for="points"> Rango de valores </label>
<input type="range" name="points" id="points" min="1" max="10"/> (entre 1 y 10) </p>
<p>
<fieldset>
<legend> Selecciona una prioridad </legend>
<p><label> <input type="radio" name="priority" value="baja" checked/> Baja </label></p>
<p><label> <input type="radio" name="priority" value="media"/> Media </label></p>
<p><label> <input type="radio" name="priority" value="alta"/> Alta </label></p>
</fieldset></p>
<p>
<fieldset>
<legend> Selecciona el tipo de envío </legend>
<p><label> <input type="checkbox" name="deliverytype" value="urgente" checked/> Urgente </label></p>
<p><label> <input type="checkbox" name="deliverytype" value="acuse"/> Con acuse de recibo </label></p>
<p><label> <input type="checkbox" name="deliverytype" value="reembolso" /> Contra reembolso </label></p>
</fieldset></p>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Y en navegadores se ve así:


Nuevas características de HTML5 en formularios

Este es un ejemplo sobre las nuevas características de HTML5 en formularios
 
  (la contraseña debe contener 3 letras y 4 números en este orden)

 

 (entre 2 y 14, solo pares)



 (entre 1 y 10)

Selecciona una prioridad



Selecciona el tipo de envío



Publicado por en No hay comentarios:
Etiquetas: ,

domingo, 3 de enero de 2016

¿Qué sitio web tiene más errores de validación?

Módulo 4. Actividad 4.7


¿Qué sitio web tiene más errores de validación?
He analizado con los servicios de validación validator.w3.org y con validator.nu el código HTML de varios periódicos de España:
  1. La Voz de Galicia
  2. El Correo Gallego
  3. El Mundo
  4. El País
  1. La Voz de Galicia:
    entre advertencias y errores salen 58 líneas.
  2. El Correo Gallego:
    entre advertencias y errores salen 249 líneas.
  3. El Mundo :
    entre advertencias y errores salen 873 líneas.
  4. El País:
    entre advertencias y errores salen 313 líneas.

Por lo tanto, el diario "El Mundo" es sin duda, el que más errores de validación tiene.
Publicado por en No hay comentarios:
Etiquetas: , ,

Casos Prácticos Tablas HTML

Módulo 4. Casos Prácticos Tablas HTML 4.5


En código HTML:

<html>
<table border="1">
<caption>INGRESOS 1</caption>
<thead>
<tr><th colspan="2" ALIGN=CENTER>2012</th></tr></thead>
<body>
<tr><td colspan="2" ALIGN=CENTER>ENERO</td></tr>
<tr>
<td>100€</td>
<td>50€</td></tr>
<tr><td>FEBRERO</td>
<td>75€</td></tr>
</table></body>
<br/>
<br/>
<table border="1">
<caption>INGRESOS 2</caption>
<thead>
<tr><th colspan="3" ALIGN=CENTER>2013</th></thead></tr>
<body>
<tr><td rowspan="3">ENERO</td></tr>
<tr><td>1</td>
<td>100€</td>
</tr>
<tr>
<td>2</td>
<td>50€</td></tr>
<tr>
<td colspan="2">FEBRERO</td>
<td>75€</td></tr>
</table></body>
</html>

Y en navegadores:

INGRESOS 1
2012
ENERO
100€50€
FEBRERO75€


INGRESOS 2
2013
ENERO
1100€
250€
FEBRERO75€
Publicado por en 1 comentario:
Etiquetas: ,

Desempleo

Módulo 4. Actividad 4.5


El desempleo en España


En código HTML:


<html>
<head>
<tittle>Desempleo</tittle>
<style>table, tr, th, td {border: 1px solid black;}</style>
</head>
<body>
<h1>El desempleo en España</h1>
<p>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.</p>
<table>
<tr>
<th>País</th>
<th>2000</th>
<th>2001</th>
<th>2002</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
<th>2007</th>
<th>2008</th>
<th>2009</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
</tr>

<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><strong>España</strong></td>
<td><strong>11.9</strong></td>
<td><strong>10.6</strong></td>
<td><strong>11.5</strong></td>
<td><strong>11.5</strong></td>
<td><strong>11</strong></td>
<td><strong>9.2</strong></td>
<td><strong>8.5</strong></td>
<td><strong>8.2</strong></td>
<td><strong>11.3</strong></td>
<td><strong>17.9</strong></td>
<td><strong>19.9</strong></td>
<td><strong>21.4</strong></td>
<td><strong>24.8</strong></td>
<td><strong>26.1</strong></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>
</table>
</tr>
<p>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</p>
</body>
</html>


En navegadores se ve así:







Desempleo

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.
País20002001200220032004200520062007200820092010201120122013
UE (27 países)8.98.799.19.398.27.2799.69.610.410.8
España11.910.611.511.5119.28.58.211.317.919.921.424.826.1
Grecia11.210.710.39.710.61098.47.89.612.717.924.527.5
Estados Unidos44.85.865.55.14.64.65.89.39.68.98.17.4
Japón4.755.45.34.74.44.13.945.15.14.64.34
Fuente: Índice de desempleo anual, Eurostat

Publicado por en No hay comentarios:
Etiquetas: , ,
Suscribirse a: Entradas (Atom)