Después habrá que añadir sitios a Sites to search y darle al botón de getCode.

Dominio

Un dominio no es más que un nombre único que identifica a un sitio web en Internet.

La dirección IP es como el número de la seguridad social o el número de teléfono que nos identifica en Internet. Pero, como puedes comprobar, este número ni es fácil de recordar ni nos da información sobre el sitio web al que corresponde. Aquí es donde entra lo que hoy conocemos como dominio, en este caso este número corresponde al dominio intermonoxfam.org.

El sistema de nombres de dominio, se creó para facilitar la manera de localizar maquinas en la web y por lo tanto para nombrar y encontrar sitios web alojados en esas máquinas. En realidad, un dominio es un nombre que apunta hacia una máquina que esta conectada a Internet, identificada mediante una dirección IP y en la cual están guardados unos archivos que conforman una página web.

Alojamientos gratuitos

Ver video con comparativa de varios servicios de alojamiento.

Ejercicio – Proyecto.

Hacer una página web de temática libre que cuente con los siguientes elementos:

  • Una botonera hecha a partir de una lista.
  • Una galería de fotos.
  • Una sección de links favoritos.

En la raíz del proyecto tendremos el fichero index.html, y las carpetas css e images.

HTML5: definición y ejemplos

HTML5 es un compendio de nuevas tecnologías(http://www.w3.org/html/logo/), entre las que tenemos:

  • Nuevas etiquetas.
  • Almacenamiento offline.
  • Integración los sensores de los dispositivos que lo utilicen (geolocalización, etc).
  • Posibilidad de conectividad entre dispositivos (chat, etc.).
  • Reproducción de multimedia sin recurrir a plugins de terceros.
  • Gráficos 3D y efectos visuales.
  • Multitarea.
  • CSS3. No forma parte de la especificación de HTML5, pero se está haciendo la mismo tiempo.

Links de interés

Algunos ejemplos

Soporte de HTML5

Para evaluar en que medida tu navegador a la especificación html5: http://html5test.com/

No todos los navegadores implementan todas todas las nuevas características de html5. Es posible consultar el estado de implementación en que se encuentran en el siguiente enlace: http://caniuse.com/

HTML5 vs HTML4

DOCTYPE simplificado

HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(Con sus versiones strict, transient, frameset)

HTML5:

<!DOCTYPE HTML>
(Simplemente indica que el documento es un fichero html)

Codificación de caracteres

HTML4:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

HTML5:

<meta charset="UTF-8" /> 

Etiquetas obsoletas

Presentación

basefont, big, center, font, s, strike, tt, u

Accesibilidad

frame, frameset, noframes

Otras etiquetas

acronym, applet, isindex, dir

Atributos obsoletos

  • body -> background
  • a, link -> rev, charset
  • img -> hspace, vspace, longdesc, name
  • html -> version
  • body, table, tr, th, td -> bgcolor
  • table -> valign, border, cellpadding, cellspacing
  • td, th -> height, width
  • th -> abbr
  • td -> scope
  • Para todos -> align

contenteditable=”true”

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<section contenteditable="true">
			<p>
				Contenido de la página
			</p>
			<article>
				<h2>Titulo del artículo</h2>
				<p>Contenido del artículo</p>
			</article>
			<aside>
				Contenido tangencial
			</aside>
		</section>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

Soporte para textos asiáticos

<ruby>私<rt>わたし</rt></ruby>
の<ruby>名前は<rt>なまえ</rt></ruby>は
			
パブロ  です :D

Ejercicio

div semánticos

Un div nos sirve para organizar la información a nivel de diseño de la página. Podemos usar div’s indistintamente para cualquier parte de la página.

header, footer, section, nav, aside son los div con un valor semántico añadido. La propia etiqueta nos indica que tipo de información contiene, esto no ocurría con los div.

Ventajas:

  • Facilitan a los motores de búsqueda la indexación de la página.
  • Mejora la accesibilidad para personas con deficiencias visuales.
  • Hace más fácil al programador entender la página.

Los siguientes elementos contienen información de la sección a la que pertenecen. Pueden usarse dentro de cualquier elemento flotante, exceptuando sí mismos, el otro elemento y el elemento address. <header> contiene una cabecera (logo, titulo, menus, etc. ). <footer>(para el año de publicación, copyright).

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<p>
			Contenido de la página
		</p>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<section> – es como un div, en el sentido de que agrupa elementos. La diferencia es que un section implica una relación semántica entre los elementos que contiene, y el div no. Puede dividirse en diferentes entradas o artículos.

Es un área dentro del documento que queremos distinguir por algún motivo. Generalmente de estilo.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<section>
			<p>
				Contenido de la página
			</p>
			</section>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<article> – artículos, suelen ir dentro de la sección, aunque no es necesario

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<section>
			<p>
				Contenido de la página fuera de los artículos
			</p>
			<article>
				<h2>Titulo del artículo</h2>
				<p>Contenido del artículo</p>
			</article>
		</section>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<aside> – contenido tangencial

Se usa para poner notas, trucos, una explicación, una leyenda, etc.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<section>
			<p>
				Contenido de la página
			</p>
			<article>
				<h2>Titulo del artículo</h2>
				<p>Contenido del artículo</p>
			</article>
			<aside>
				Contenido tangencial
			</aside>
		</section>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<nav> – almacena los menús de navegación. Habitualmente están en el header de la página.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Página sencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
			<nav>
				<ul>
					<li><a href="#">Enlace 1</a></li>
					<li><a href="#">Enlace 2</a></li>
					<li><a href="#">Enlace 3</a></li>
				</ul>
			</nav>
		</header>
		<p>
			Contenido de la página
		</p>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<video>

<video src="leon.mp4" controls="controls" width="400" height="300" poster="leon.jpg"  preload="preload">
	Tu navegador no soporta html5
</video>

El atributo preload hace que el recurso se vaya descargando al ingresar en la página

Videos

No todos los navegadores son capaces de reproducir todos los formatos de video, por tanto, de momento será más correcto que la etiqueta video tenga varios source.

<video  poster="leon.jpg" controls autoplay loop>
	<source src="leon.mp4" type="video/mp4"/>
	<source src="leon.ogg" type="video/ogg"/>
	<source src="leon.webm" type="video/webm"/>

	Tu navegador no soporta html5
</video>

Notas:

  • controls, preload, autoplay, loop son atributos booleanos. Si están presentes, se aplican, si no, no.

Ejercicio

Reproducir el video del león utilizando HTML5. Uno está cargado con el atributo src y el otro mediante la etiqueta source.

Ejercicio

Utilizando la etiqueta <audio> en lugar de la etiqueta <video> insertar un reproductor para los siguientes ficheros de audio:

Enlaces:

<svg>

SVG
<svg id="circulo" width="400" height="400">
	<circle  cx="200" cy="200" r="100" fill="blue"/>
	<rect width="100" height="100" fill="green"/>
	<line x1="100" y1="100" x2="200" y2="200" style="stroke:black; stroke-width:4"/>
	<ellipse cx="200" cy="200" rx="200" ry="50" fill="pink" />
</svg>

<wbr> – word break

En caso de que la palabra no quepa, indica por dónde será cortada.

Teoría wbr
<p>
	Palabrasuperlarga<wbr/>enlaquevoyadecidirpordondequieroquesecorte<wbr/>encasodenocaberenlacapaquelacontiene
</p>

Ejercicio

Hacer una página web con 3 columnas que contengan, repetida muchas veces la frase:
Un murciélagosupercalifragilísticoespialidoso

Los guiones rojos indican los puntos en los que introduciremos un word break.

wbr

Formularios

<style>
	label{
		display: inline-block;
		width: 120px;
	}
</style>

<form>
	<label for="nombre">Nombre</label>
	<input type="text" id="nombre" /><br><br>
</form>

Cuando un label está asociado a un input mediante los atributos for e id respectivamente, al pulsar sobre el label, el cursor se posicionará en el input.

Ejercicio

Para resolver este ejercicio, utilizaremos las siguientes etiquetas:

<textarea></textarea>
<input type="checkbox">
<input type="submit">

Fieldset

Dan problemas en el crossbrowsing.

<fieldset>
	<legend>Cabecera del fieldset</legend>
	Lorem...
</fieldset>

Ejercicio

Para realizar este ejercicio, no poner padding a los fieldset, debido a problemas de cross browsing con IE.

fieldset{
	…
	padding:0px; /*no poner padding a los fieldset por problemas de compatibilidad con IE*/
	border: solid black 1px;/*Habrá que especificar explícitamente el borde del fieldset para que haya compatibilidad con IE*/
}

Si nuestro navegador no reconoce los nuevos <input> de html5, mostrará un <input type="text" /> en su lugar.

Nuevos atributos

<form>
	El atributo autocomplete almacena los resultados en la caché para el futuro
	autocomplete<input type="text" autocomplete="on"/>
	<br/><br/>
	El atributo autofocus coloca el foco por defecto en el input que lo invoca
	<br/>autofocus<input type="text" autofocus />
	<br/>
	<br/>placeholder<input type="text" placeholder="pista acerca del contenido"/>
	<br/>
	<br/>pattern<input type="text" title="debes introducir 5 dígitos numéricos" pattern="^[0-9]{5}$"/>
	<input type="submit" />
	<br/><br/>
	El atributo formnovalidate permite enviar los datos del formulario aunque estos no hayan sido 	validados. Podemos utilizar este atributo junto con el botón de submit o con el tag del formulario(&lt;form&gt;)
	<input type="submit" value="envio sin validación" formnovalidate="formnovalidate"/>
</form>

Nuevos inputs

search

En el futuro este campo implementará funcionalidades como recordar anteriores búsquedas, resaltado de la palabra buscada según se va escribiendo
<input type="search" />

number

Validación numérica, en plataformas móviles, optimiza el teclado para escribir números. Atributos: min, max, step (admite decimales usando el punto)
<input type="number" value="-6"/>

range

Validación numérica, en plataformas móviles, optimiza el teclado para escribir números. Atributos: min, max, step (admite decimales usando el punto)
<input type="range" max="10" min="0" value="7" step="2" />

tel

Optimiza el teclado para escribir teléfonos
<input type="tel"/>

url

Validación de url, en plataformas móviles, optimiza el teclado para escribir url’s
<input type="url"/>

email

Validación de mail, en plataformas móviles, optimiza el teclado para escribir mails
<input type="email"/>

Color

<input type="color"/>

Fechas y horas:

time

Puede ser inicializado, acepta los atributos min, max y step
<input type="time" value="10:20"/>

date

Puede ser inicializado, acepta los atributos min, max y step
<input type="date" value="1982-07-24"/>

datetime

Es una combinación de date y time. Se diferencia de datetime-local en que muestra la hora local
<input type="datetime" value="2011-12-22T01:30Z"/>

datetime-local

<input type="datetime-local" value="2011-12-22T01:30"/>

week

<input type="week" value="1982-W17"/>

month

<input type="month" value="1982-07"/>

required, valid, invalid

<style>
	input[required] {
		border: solid 4px blue;
	}
	input:valid{
		background:green;
	}
	input:invalid{
		background:red;
	}
	label{
		width:150px;
		display:inline-block
	}
</style>
<form>
	<label for="nombre">Nombre:</label>
	<input type="text" id="nombre" required="required" /><br><br>
	<label for="mail">Email:</label>	
	<input type="email" id="mail" required="required"/>
</form>

Ejercicio

  • Campos requeridos deben tener borde negro.
  • Los campos válidos deben tener fondo verde.
  • Los campos inválidos deben tener fondo rojo.
  • La edad mínima debe ser de 0 años y la máxima de 100 años. Para ello usaremos los atributos “min” y “max”.
  • La página debe cargarse con el foco en el campo nombre.
  • El código postal tendrá el siguiente patrón: “^[0-9]{5}$”.

Ejercicio ampliado

exito en envío de formulario

Maquetando los placeholder

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}	

o si queremos filtrar por class:

.gris::-webkit-input-placeholder { /* Chrome */
	color: #CECECE;
}
.gris:-ms-input-placeholder { /* IE 10+ */
color:  #CECECE;
}
.gris::-moz-placeholder { /* Firefox 19+ */
color:  #CECECE;
opacity: 1;
}
.gris:-moz-placeholder { /* Firefox 4 - 18 */
color:  #CECECE;
opacity: 1;
}

progress, meter

La etiqueta progress es más apropiada para mostrar el grado de completitud de una tarea determinada (un formulario, por ejemplo). Meter es más apropiado para mostrar medidas no relacionadas con una tarea, como espacio en disco o uso de memoria

<progress value="50.0" max="100.0">50%</progress>

meter

<meter value="30.0" min="0.0" max="100.0" low="20.0" high="80.0" optimum="40.0">300MB megas de un 1GB</meter>

output

output
<script type="text/javascript">
	function calculation() {
	var o = document.getElementById("result");
	var num1 = document.getElementById("num1");
	var num2 = document.getElementById("num2");

	o.value = parseFloat(num1.value) + parseFloat(num2.value);
}
</script>
<input type="number" id="num1"/>
<input type="number" id="num2" />
<p>Resultado: <output name="result" id="result"></output></p>
<p><button onclick="calculation()">Calcular</button></p>

modernizr

Modernizr es un paquete de detección de las capacidades de un navegador relativas a HTML5 y CSS3.

1) Desarrollo (Development)
Es un script completo, con todas las funcionalidades básicas de Modernizr, sin comprimir y con comentarios. Ideal para la fase de desarrollo de nuestro proyecto. Luego sería recomendable descargar un paquete idóneo para producción.

2) Producción (Production)
Para hacer esta descarga se ofrece una página donde podemos seleccionar las funcionalidades de detección que queremos incluir, porque estemos utilizándolas en nuestro proyecto.

Se recomienda cargar el script en el head.

Ejemplo

Ver ejemplo de uso de modernizr
<script src="modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
	if(Modernizr.boxshadow) {
		alert("SI sombra caja");
	} else {
		alert("NO sombra caja");
	}

	if(Modernizr.canvas) {
		alert("SI canvas");
	} else {
		alert("NO canvas");
	}
</script>

Polyfill

Un polyfill o polyfiller, es una pieza de código (o plugin) que proporciona la tecnología que se espera que el navegador proporcione de forma nativa.

Ejemplo autofocus

Ver ejemplo modernizr autofocus
<script src="modernizr.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<script type="text/javascript">
	$(document).ready(function() {
		if (!Modernizr.input.autofocus) {
		$("input[autofocus]").focus(); 
	}
});
</script>
<input type="text" />

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

<input type="text" />

<input type="text" />

CSS3

Motores de navegación

(motor de renderizado, web browser engine, layout engine o rendering engine)

Es un software que a partir de etiquetas (html, xml, …) e información de formato (css, xsl… ) muestra información formateada en la pantalla.

  • WebKit (http://www.webkit.org/), usado en Safari, Google Chrome, Epiphany, Opera desde la versión 15 …)
  • Gecko (Mozilla Firefox)
  • Trident (IE)

text-shadow

<style type="text/css">
	h1{
		/*text-shadow: desplazamiento x, desplazamiento y, desenfoque, color*/
		text-shadow: 20px 5px 5px red
	}
</style>


<h1>Hola Mundo!</h1>

Notas:

Nota: Será posible añadir múltiples sombreados:
text-shadow: 20px 5px 5px red, 30px 15px 10px blue, 6px 5px 2px green

Link de interés

-prefix-free
http://leaverou.github.com/prefixfree/

Carga de la librería:<script src="prefixfree.min.js"></script>
Nuestro CSStext-shadow: 1em; /* Para cuando se cumplan los estandares. */
-moz-text-shadow: 1em; /* Mozilla */ 
-ms-text-shadow: 1em; /* Internet Explorer 8 (No soportado) */  
-webkit-text-shadow: 1em; /* WebKit y Safari */

Únicamente hemos de añadir un fichero JS a la carga de nuestra aplicación web.

Notas:

No funciona para estilos en línea ni para hojas de estilo alojadas en diferentes dominios, ni para páginas locales (esto último en chrome y opera).

border-radius, box-shadow

<style type="text/css">
	div{
		background:red;
		width:500px;
		height:500px;
		border-radius:0px 50px 100px 150px;
		-moz-border-radius: 0px 50px 100px 150px;
		-webkit-border-radius: 0px 50px 100px 150px;

		box-shadow: 10px 50px 100px green, inset 10px 50px 100px blue;
		-moz-box-shadow: 10px 50px 100px green, inset 10px 50px 100px blue;
		-webkit-box-shadow: 10px 50px 100px green, inset 10px 50px 100px blue;	
	}
</style>
<div></div>
	

Notas:

border-radius:100% hace una capa ciruclar

Enlaces de interés:

border-image I

border-image en html Ver ejemplo border-image
<style type="text/css">
	div{
		border-width: 35px;
		padding: 20px;
		-webkit-border-image:url(mundo.svg); 
		border-image:url(mundo.svg);
		border-style:solid
	}
</style>

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

border-image II

<style type="text/css">
	div{
		border-width: 35px;
		padding: 20px;
		border-style:solid 
	}
	#stretch{
		-webkit-border-image:url(border.png) 30 30 stretch;
		border-image:url(border.png) 30 30 stretch;
	}
	#round{
		-webkit-border-image:url(border.png) 30 30 round;
		border-image:url(border.png) 30 30 round;
	}
</style>

<div id="stretch">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="round">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

background-size

<style type="text/css">
	div{
		width:500px;
		height:500px;
		padding:200px;
		background:url(mundo.svg);
		background-size:100% 100%;
		/*Otra forma de escribirlo:
			background: url(../mundo.svg) 0 0 / 100% 100%;
		*/
	}
</style>
<div></div>

background, multiple url

<style type="text/css">
	div{
	width:500px;
	height:500px;
	background:url(mundo.svg), url(tijeras.svg);
}
</style>
<div></div>

multiple background & size

<style type="text/css">
	div{
	width:500px;
	height:500px;
	background:url(mundo.svg), url(tijeras.svg);
	background-size:100% 100%, auto auto;
}
</style>
<div></div>

background, transparency

Ver ejercicio de background con transparencia
<style type="text/css">
body{
	background:url(mundo.svg)
}
div{
	width:500px; height:500px; background-color:rgba(0, 0, 255, 0.7); 
}
</style>
<body>
	<div>texto del div</div>
</body>

Ejercicio fuentes

Hacer funcionar la tipografía de font awesome.

columns

<style>
	.articulo{
		column-count: 4;
		-moz-column-count: 4;
		-webkit-column-count:4;
		/*espaciado entre columnas*/
		column-gap:150px;
		-moz-column-gap:150px;
		-webkit-column-gap: 150px;
		/*lineas separadoras*/
		column-rule:4px solid black;
		-moz-column-rule:4px solid black;
		-webkit-column-rule:1px solid grey
	}
</style>
<div class="articulo">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
</div>

text-overflow

<style type="text/css">
	div{
		width:300px; 
		height:1em;
		overflow: hidden; /*Recorta la capa para ajustara a sus dimensiones*/
		white-space: nowrap;/*si el texto no cabe en el ancho de la capa el comportamiento normal es saltar a la siguiente línea. Este estilo evita el salto de línea*/
		text-overflow: ellipsis;/*tras haber hecho los pasos anteriores, añade unos puntos al final del texto para indicar que el texto continua*/
}
	div:hover{
		overflow: visible;
		white-space:normal;
	}
</style>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Luego, utilizando javascript, podré hacer que el texto se descolapse y colapse con un click.

Animaciones con CSS3

Animaciones con Transition

transition I – Sin animación

Sin animación

transition II – Con animación

Con transición
<style type="text/css">
	div{	background-color: pink;width:300px; height:300px; transition: 3s;}
	div:hover{background-color: black;}
</style>

transition II – Con animación 2

Con transición
<style type="text/css">
	div{
		background-color: pink;width:300px; height:300px; transition: 3s;
	}
	div:hover{
		background-color: black;transition: 0.5s;
	}
</style>

Notas:

El segundo transition define la duración de la animación cuando hago hover, es decir, a la ida, y el primero cuando quito el cursor de encima del elemento, es decir a la vuelta.

Lo normal es utilizar sólo el primer transition y que por tanto la animación a la ida y a la vuelta duren lo mismo.

Ejercicio – animar fuentes

Ejercicio – hacer la siguiente botonera

transition III – CSS descompuesto

div{
	background-color: pink;width:300px; height:300px;
	transition-property: width;
	transition-duration: 1s;
	/*Los tipos de aceleración aceptados son: ease, linear, ease-in, ease-out, ease-in-out*/
	transition-timing-function: linear;
}

Notas:

Aceleraciones: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(0.42,0,0.58,1).
Para configurar aceleraciones bezier:http://matthewlein.com/ceaser/

Ejercicio

Tener en cuenta que si deseo animar varios estilos, los separaré con comas:
transition:width 2s, height 2s;

Ejercicio multiple background transition

Para hacer este ejercicio, tener en cuenta que en general, al elemento sin hover el aplico estilo genérico “background”, y al elemento con hover, el estilo concreto (“background-position”, “background-color”, etc.)

Ejercicio width

Hacer el ejercicio del enlace

Ejercicio transform:scale

transition V – target

Cuando en el href de un enlace en lugar de poner una url pongo la id de un elemento, esa id sustituirá a :target en la hoja de estilos. No funciona con el class.

usando el atributo target
<style type="text/css">
	.container{	
		background: pink;
		width:300px; 
		height:300px;
		-webkit-transition:all 2s;
	}
	div:target{
		height:600px;
	}
</style>

<a href="#left">link</a>
<div id="left" class="container">
</div>

Transform

transform:translateX

Transform, translateX
div{	
	background-color: pink;  
	width:300px; 	
	height:300px;
	transition:transform 2s;
}
div:hover{
	/*transform: function()*/
	transform:translateX(100px);
}

transform:translateY

Repetir el ejercicio anterior, pero que el rectángulo se mueva ahora en el eje Y.

transform: translateY

Es posible mover la capa en los ejes X e Y simultáneamente utilizando:

transform: translate
transform:translate(100px, 200px);

transform:rotate

transform:rotate

Repetir el ejercicio anterior, pero rotando el rectángulo.

transform:rotate(720deg);

Para concatenar efectos utilizo el espacio en blanco.
Ejemplo:

transform:translate(100px, 200px) rotate(400deg);

transform:skewX

Repetir el ejercicio anterior, pero sesgando en el eje X el rectángulo.

transform:skewX(-25deg);
transform: skewX

transform:scale

transform:scale(5);
transform:scale(0.5, 4);
transform:scale

perspective

<style>
	#div1 {
		position: relative;
		height: 150px;
		width: 150px;
		border: 1px solid black;
		perspective: 150px;
	}
	#div2 {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: red;
		transition:1s;
	}
	#div2:hover{
	transform: rotateX(45deg);
	}
</style>


<div id="div1">
<div id="div2"></div>
</div>
perspective

Keyframes

div.box1{
	width:300px;
	height:300px;
	background: red;
}
div.box1:hover{
	animation:move 2s;
}
@keyframes move{
	from{transform:rotate(0deg);}
	to{transform:rotate(45deg);}
}

Descompuesto

animation-name:move;
animation-duration:2s;
animation-timing-function:ease-in;
animation-iteration-count:2; /* infinite para infinitas repeticiones */

Persistir estado final

animation-fill-mode: forwards

Ejercicio KeyFrames – barra de habilidad

Ejercicio KeyFrames 2 – barra de habilidad con corazones

animation-direction

alternate
alternate
animation-direction: reverse; alternate;
alternate-reverse
animation-direction: reverse; alternate-reverse;

Delay

animation-delay:2s;

step by step

@keyframes move6{
	0%{transform:translateX(0px);}
	30%{transform: skew(200deg, 200deg);}
	60%{transform: scale(2,2);}
	100%{transform:rotate(1300deg);}
}

pause and play

div{
	background: red;
	width:400px;
	height:400px;
	animation:changeBackground 0.3s ease-in 1s infinite alternate;
	animation-play-state:paused;
}
div:hover{
	animation-play-state:running;	
}

animation-step

animation-step

Colección de animaciones

transform

Responsive Design

Consiste en diseñar tu contenido de forma que responda correctamente independientemente del entorno en que se vaya a mostrar.

Media Queries

<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">

		--------------------------------------------------------------------------------------------------------------------------------------------------------

<link rel="stylesheet" type="text/css" href="css/largeLayout.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/mediumLayout.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/smallLayout.css">

Ojo! Tener en cuenta que si utilizo estilos en la cabecera o estilos en línea en la página web sobreescribirán los de las hojas de estilos usados en las media queries.

Media Queries dentro de una hoja de estilos

@media screen and (max-width:480px) {
		#col_left {
		width: 100px;
	}
}

Ejercicio media queries

Ejercicio, hacer una página responsive

Enlace de interés

http://bradfrost.github.io/this-is-responsive/patterns.html

Mostrar un mensaje cuando el dispositivo tiene orientación portrait

#warning-message {display:none}
@media only screen and (orientation:portrait){
	#wrapper {display:none}
	#warning-message {display:block;background-image:url(../img/portada_vert_cast.jpg);background-size:100% 100%;width:100%;height:70%;padding:54% 0 0 1%}
	#warning-message span {display:block;background-color:#000;padding:5% 5%;opacity:0.6;color:#FFF;font-size:2.8em;text-align:center;border-radius:20px;width:87%}
}
@media only screen and (orientation:landscape){
	#warning-message {display:none}
}
Portrait

Colección de ejercicios de HTML

Cada nueva página debe estar en un fichero independiente, salvo que del enunciado que el objetivo era añadir matices al ejercicio anterior.

Habrá una hora y media de tiempo para tratar de hacer el máximo posible.

Ir a colección

Ejercicios

Ejercicio – barrio sésamo

Ejercicio para los que terminen antes – superteatro

Ejercicio – maqueta tu curriculum

Maquetar una landing

Descargar snippets de sublime textDescargar snippets de sublime text. Para cargarlos en nuestro editor, pulsaremos el menú de Sublime Text: Preference -> Browse Packages y descomprimiremos los ficheros en la carpeta User.

Almacenamiento offline

index.html

<html manifest="ejemplo.manifest">
	<head>
		<title></title>
	</head>
	<body>
		<img src="img/pablomonteserin.png">
	</body>
</html>

ejemplo.manifest

CACHE MANIFEST
index.html
img/pablomonteserin.png
offline storate

localStorage

localStorage vs Cookies:

  • En ambos casos la información es almacenada en el cliente, es decir, en el navegador, pero accedemos y manipulamos la información de las cookies desde el servidor y accedemos y manipulamos la información del localStorage desde el cliente.
  • Podemos almacenar hasta 4 Kb por cookie, mientras que en el caso de localStorage podemos almacenar hasta 4MB por dominio.

localStorage.setItem("clave", valor);
var variable = localStorage.getItem("clave");

Consideraciones:

localStore sólo almacena texto, si quisiera almacenar un array, tendría que seguir el siguiente proceso:

localStorage.setItem(JSON.stringify(names));
var storedNames = localStorage.getItem(JSON.parse(localStorage["names"]));

Ejercicio

Al pulsar el botón de “Salvar cambios” deben almacenarse los cambios. Al cerrar y regresar al navegador, los cambios deben estar ahí.

localstorage

Ejercicio

Crear un botón para eliminar el contenido almacenado en el ejercicio anterior.

localStorage.clear();
location.reload();
  • item 1
  • item 2
  • item 3
  • item 4
Ver ejercicio localstorage resuelto

Ejercicio

Al seleccionar una imagen, esta debe aparecer en la página siguiente.

var imagenSeleccionada = $("input:radio:checked").val();
storage image

Mapas

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
	...

	var myOptions = {
		center:  new google.maps.LatLng(43.5293101753168, -5.6773233792),
		zoom: 18,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	// "mapa" es un div
	var map = new google.maps.Map(document.getElementById("mapa"), myOptions);
	...

Para hacer la prueba, podremos introducir las coordenadas de Gijón:
Latitude: 43.5293101753168
Longitude: -5.6773233792

Mapa 1

Añadir un marker I

Tendremos que añadir el siguiente código al código que ya teníamos

function addMarker(lat, lng){
	var mapMarker = new google.maps.Marker({
		position:new google.maps.LatLng(lat, lng),
		title: "Estás aquí."
	});
	mapMarker.setMap(map);
}
Añadir Marker 1

Añadir un marker II

var goldStar = {
	path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
	fillColor: "yellow",
	fillOpacity: 0.8,
	scale: 0.2,
	strokeColor: "gold",
	strokeWeight: 14
};
var mapMarker = new google.maps.Marker({
	position:latlng,
	title: "Estás aquí.",
	icon:goldStar
});	
Añadir Marker 2

Añadir un marker III

var pinIcon = new google.maps.MarkerImage(
	"Tux.svg",
	null, /* size is determined at runtime */
	null, /* origin is 0,0 */
	null, /* anchor is bottom center of the scaled image */
	new google.maps.Size(42, 68)
);

var mapMarker = new google.maps.Marker({
	position:latlng,
	title: "Estás aquí.",
	icon: pinIcon,
});
Añadir marker 3

Añadir un marker IV con texto

var infoWindowOpts = { content: "bla bla bla..." };
var infoWindow = new google.maps.InfoWindow(infoWindowOpts);

google.maps.event.addListener(mapMarker, 'click', function() {
	infoWindow.open(map,mapMarker); 
});

Añadir marker 4

Añadir un marker V

Recorrer el siguiente array añadiendo una chincheta con el correspondiente texto informativo en cada iteración.

var markerArray = [[43.529492, -5.677978, "texto1"],[43.528921, -5.676688, "texto2"], [43.529522, -5.676489, "texto3"]];
Añadir marker 5

Geolocalización – detecting support

<script>
	var geo;
	
	function getGeoLocation(){
		try{
			if(navigator.geolocation)return navigator.geolocation;
			else return undefined;
		}catch(e){
			return undefined;
		}
	}

	function init(){
		if(geo = getGeoLocation()){
			alert("Geolocalización soportada");
		}else{
			alert("Geolocalización no soportada");
		}
	}
	window.onload = init;
</script>
Ver ejemplo detectar support

Geolocalización obteniendo la ubicación del cliente

<script type="text/javascript">
	var geo;

	function showCoords(position){
		var lat = position.coords.latitude;
		var lng = position.coords.longitude;
		alert("latitude:" + lat);
		alert("longitude: " + lng);
	}

	function getGeoLocation(){
		try{
			if(navigator.geolocation)return navigator.geolocation;
			else return undefined;
		}catch(e){
			return undefined;
		}
	}

	function init(){
		if(geo = getGeoLocation()){
			alert("Geolocalización soportada");
			//El método showCoords tomará el valor de su parámetro position del objeto geo
			geo.getCurrentPosition(showCoords);
		}else{
			alert("Geolocalización no soportada");
		}
	}
	window.onload = init;
</script>

Nota:

Probar los ejercicios utilizando localhost en vez de file:/// y mejor en chrome que en firefox, de lo contrario, funciona de forma intermitente

Ver ejemplo geolocalización

Ejercicio – integrar geolocalización con la API de google maps

Ver ejercicio geolocalización

Aviso Legal

Los derechos de propiedad intelectual sobre el presente documento son titularidad de D. Pablo Monteserín Fernández Administrador, propietario y responsable de pablomonteserin.com. El ejercicio exclusivo de los derechos de reproducción, distribución, comunicación pública y transformación pertenecen a la citada persona.

Queda totalmente prohibida la reproducción total o parcial de las presentes diapositivas fuera del ámbito privado (impresora doméstica, uso individual, sin ánimo de lucro).

La ley que ampara los derechos de autor establece que: “La introducción de una obra en una base de datos o en una página web accesible a través de Internet constituye un acto de comunicación pública y precisa la autorización expresa del autor”.

El contenido de esta obra está protegido por la Ley, que establece penas de prisión y/o multa, además de las correspondientes indemnizaciones por daños y perjuicios, para quienes reprodujesen, plagiaren, distribuyeren o comunicaren públicamente, en todo o en parte, o su transformación, interpretación o ejecución fijada en cualquier tipo de soporte o comunicada a través de cualquier medio.

El usuario que acceda a este documento no puede copiar, modificar, distribuir, transmitir, reproducir, publicar, ceder, vender los elementos anteriormente mencionados o un extracto de los mismos o crear nuevos productos o servicios derivados de la información que contiene.

Cualquier reproducción, transmisión, adaptación, traducción, modificación, comunicación al público, o cualquier otra explotación de todo o parte del contenido de este documento, efectuada de cualquier forma o por cualquier medio, electrónico, mecánico u otro, están estrictamente prohibidos salvo autorización previa por escrito de Pablo Monteserín.

El autor de la presente obra podría autorizar a que se reproduzcan sus contenidos en otro sitio web u otro soporte (libro, revista, e-book, etc.) siempre y cuando se produzcan dos condiciones:

  1. Se solicite previamente por escrito mediante email al correo pablomonteserin@pablomonteserin.com.
  2. En caso de aceptación, no se modifiquen los textos y se cite la fuente con absoluta claridad.

Una parte de las imágenes utilizadas en este documento no son propiedad de Pablo Monteserín, por lo que, si alguna de estas imágenes estuviera sujeta a derechos de autor, o a algún otro tipo de derecho que impida su publicación en este documento, una vez que el autor, Pablo Monteserín, tenga conocimiento del hecho, procederá a la retirada inmediata de la imagen protegida por los derechos pertinentes.

Accede a tu cuenta