Curso de HTML5 y CSS | Diseño Web

Índice del curso de HTML5 y CSS | Diseño Web

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Enlaces e imágenes
  6. Video y audio
  7. Listas
  8. Ejercicio resumen de fundamentos de HTML
  9. iframes
  10. Páginas de consulta
  11. Tablas
  12. Estilos en línea
  13. Unidades de medida
  14. Capas
  15. Hacer una NewsLetter con HTML
  16. favicon
  17. Selectores CSS
  18. Hojas de estilos
  19. Algunos estilos de CSS3
    1. Motores de navegación
    2. text-shadow
    3. border-radius, box-shadow
    4. border-image
    5. Hacer triangulitos
    6. Ejercicio - background centrado
    7. background-size
    8. Multiple Background & size
    9. background con rgba
    10. Gradientes
    11. Fuentes
    12. columns
    13. Animaciones con transition
    14. text-overflow
  20. GIMP
  21. display:block, inline, inline-block
  22. Margin Collapse
  23. padding y width
  24. Ejercicios de maquetación vertical
  25. Hacer una newsletter responsive sin media queries
  26. img vs background
  27. Flexbox
  28. Algunos tips
    1. Pintar el color de fondo de una línea
    2. Incrustar una imagen
    3. Sangría francesa (hanging intent)
    4. Capitalizar una letra
    5. Eliminar el borde (outline) del elemento activo
    6. contenteditable
    7. Soporte para textos asiáticos
    8. wbr - Word Break
  29. Ejercicios de HTML
  30. Break! - gran día de repaso
  31. Links de interés
  32. position
  33. Opacidades
  34. Popups con CSS
  35. Ejercicio - Galería de fotos
  36. Navigation Bar
  37. !important
  38. Páginas reales
  39. Grid Layout
  40. Selectores avanzados de CSS
  41. HTML5: definición y ejemplos
  42. HTML5 vs HTML4
  43. divs semánticos
  44. svg
  45. Formularios
  46. Animaciones con CSS3
  47. Responsive design
  48. Más ejercicios de html
  49. Página de error 404
  50. Insertar el buscador de google
  51. Dominio y alojamiento
  52. Ejercicio - Proyecto
  53. Ejercicio - Clientes y proveedores
;

Introducción

Este curso de HTML5 contiene todo el conocimiento que he ido adquiriendo durante mis años de trabajo como maquetador web. Cada vez que me encontraba con algúna forma mejor de hacer las cosas, la documentaba en este curso para poder utilizarla a partir de ese momento y para poder impartirla en mis cursos de páginas web.

Si quieres dedicarte al desarrollo de páginas web o buscas una forma sencilla de crear una aplicación móvil, HTML5 es sin duda la primera tecnología que debes aprender.

HTML5 es la tecnología más versátil que existe para mostrar y consultar información. Si abandonas el papel y el lápiz para tomar apuntes y te pasas al código HTML5, podrás incrustar vídeos, audios, interactividades de cualquier tipo, y reproducir tu documentación en tu ordenador, imprimirla en papel, verla en tu teléfono móvil, compartirla por whats app... No sólo aprendemos tecnologías web para optar a un trabajo cualificado. Lo hacemos porque es estimulante y porque nos ayuda en nuestro día a día. De forma sencilla, utilizando sólo HTML5 podrás :

  • Tener los apuntes de clase o la documentación específica que necesitas para tu trabajo accesible desde cualquier sitio y para cualquier persona, con exactamente el diseño que necesitas.
  • Hacer tu currículum online con el diseño que tú decidas y disponer de él mediante una dirección de Internet que podrás compartir en cualquier momento.
  • Subir a internet el guión de una obra de teatro que estás estudiando para poder consultarla en cualquier momento.
  • Intentar ganar dinero mediante comisiones en Amazón cuando alguién compre un producto a gracias a una información que ha consultado en una página que tú has hecho.
  • Dar el primer paso en esta apasionante aventura que es el desarrollo tecnológico.

¿Qué es?

Es la tecnología con la que estás escritas las páginas web. Los navegadores son capaces de leer este lenguaje e interpretarlo para mostrar sus contenidos.

Herramientas de desarrollo

Editores
Software libre
Software de pago
Prototipado

Algunos términos

Páginas estáticas

El cliente solicita una página que se encuentra en el servidor y el servidor envía al cliente la página tal cual la tiene alojada, sin hacerle ninguna modificación en función de la petición del cliente o de cualquier otro parámetro.

html
  • Es un lenguaje de etiquetado.
  • No es case sensitive.
  • html vs htm
HTML vs Dreamweaver
Pantallazo de indeed.com

La web x.0

  • 1.0: la web 1.0 tenía un carácter principalmente divulgativo y unidireccional. Las empresas publicaban documentos eran difíciles de actualizar.
  • 2.0: también denominada "la red social". El usuario inexperto también es una fuente de contenido. Se hacen blogs, wikis, foros, y redes sociales. Es una web colaborativa.
  • 3.0: es la web semántica, la web de la nube, la web de las aplicaciones y la web multidispositivo que hace que "todos estemos conectados". Los tablets, smartphones, coches inteligentes, televisiones, neveras forman parte activa de esta web.

La sugerencia que marca la diferencia

Estás apunto de comenzar una aventura. Una aventura que es tan apasionante como bien se te vaya a dar (quizás por eso a mucha gente no le resulta apasionante...). Te propongo una cosa. De ahora en adelante, haz tus apuntes de HTML y de las materias que estén por venir escribiendo el código en una página web. Haz tus apuntes de HTML escribiendo HTML!. Y cada vez que aprendas algo nuevo, añadelo. No hay ninguna guía mejor que la que te haces tu mismo.

El papel y el lápiz son tan bonitos... pero mientras que no podamos hacer páginas web con ellos, mi recomendación es que tomes notas sobre como hacer páginas web haciendo páginas web.

Así que ya sabes, cuando aprendas a meter imágenes... mete alguna!. Cuando aprendas a poner subyarados, negritas y colores... remarca lo importante. Cuando aprendas a meter enlaces... haz tu propia colección de enlaces de interés. Y así, hasta que realmente tengas unas apuntes tan prácticos y bonitos como estos (aunque si te presto mi foto, serán igual de bonitos :)

gif animado ordenador

Estructura de una página web

broma sobre cómo estructurar una página html estructura de una página html
<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>

	<body>

	</body>
</html>
Notas:
  • El doctype le dice al navegador que tipo de información va a contener la página web (HTML4, XHTML 1.0, HTML5).
  • Todo lo que hemos estado haciendo hasta ahora, iría dentro del body.

DOCTYPE

EL HTML 4.01 Strict no permite marcado de presentación con el argumento de que debería usar CSS en su lugar para eso. Así es como el DOCTYPE Strict luce:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Metaetiquetas de codificación del texto

Las etiquetas meta contienen información relativa al documento web.

Para HTML5:
<meta charset="UTF-8">

El atributo content="text/html define que clase de información contiene el documento web, cación se debería abrir.

La iso para Europa del Oeste (español):
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

La iso para Europa Central:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

Esperanto y Maltés:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-3" />

Letón, Lituano y Japonés:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-4" />
						...

Para caracteres asiáticos y de todo tipo:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Otras metaetiquetas

Indica al navegador el número de segundos antes de que la página sea actualizada.
<meta http-equiv="refresh" content="15" />


Redirecciona a la página indicada en la URL.
<meta http-equiv='refresh' content='0; URL=http://www.google.es/'>

Previene que la página se cargue en un target.
<meta http-equiv="window-target" content="_top" />

Documento XHTML que valide por w3c

Básicamente es un documento html bien formado.

  • Etiquetas en minúsculas (del XML).Como las etiquetas en XML distinguen entre mayúsculas y minúsculas (case-sensitive), la recomendación XHTML ha definido todos los nombres de etiqueta en minúsculas.
  • Valores de atributos entre comillas dobles.
  • Ningún texto puede estar directamente dentro del body, sin estar situado a su vez en otro elemento (por ejemplo, un párrafo). <p>hola mundo!</p>.
  • La etiqueta title, dentro del head, es obligatoria.
  • Las metaetiquetas se cierran en sí mismas explícitamente:
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

http://www.w3schools.com/

Comentarios

<!-- bla bla bla -->

Encabezados y párrafos

<h1>Etiquetas de encabezado</h1>
<h2>Subtitulo</h2>
<h3>Su sub titulo</h3>
<h4>Más pequeño</h4>
<h5>Mucho más pequeño</h5>
<h6>Diminuto</h6>
<p>Y un párrafo</p>
<p>Y finalmente un párrafo <strong>con textos en negrita</strong></p>
Ver ejemplo de primeras etiquetas

Enlaces e imágenes

Video y audio

<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 Video

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

Ejercicio Audio

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

Listas

Suelen usarse para la barra de navegación

<p>Lista ordenada:</p>
<ol>
	<li>Primero
	</li>
	<li>Segundo
	</li>
</ol>

<p>Lista desordenada:</p>
<ul>
	<li>Primero
	</li>
	<li>Segundo
	</li>
</ul>

Es muy importante tabular el código

broma sobre indentación de código

Ejercicio listas de enlaces

Hacer una lista de enlaces, donde cada enlace es una foto,

Ejercicio listas

Ejercicio resumen de fundamentos de HTML

iframes

<a href="https://pablomonteserin.com/" target="nombreDelIframe">Otra pagina</a>

<iframe src = "http://csszengarden.com/" width="500px" height="500px" name="nombreDelIframe">
						</iframe>
Teoría del iframe

Notas

  • El atributo target define dónde se va a cargar la información del enlace. En este caso, debe coincidir con el valor del atributo name del iframe.
  • Ojo! El iframe no se cierra en la propia etiqueta (<iframe />).
Razones por las que no debes utilizar frames:
  • Están desaconsejados por el W3C.
  • El usuario debe entrar siempre por la página principal, donde se encuentra la declaración de marcos. Si accediese por otra página diferente se perdería elementos tales como la navegación (el uso más frecuente de los frames)
  • Al no cambiar la URL en las diversas páginas, el usuario no podrá añadir a sus favoritos secciones de la página
  • Los botones «anterior» y «siguiente» de los navegadores pueden no funcionar adecuadamente. Así mismo podemos dificultar el uso del Historial del Navegador.
  • Si el usuario desea imprimir la página podemos obtener resultados no deseados.
  • No podemos promocionar páginas interiores ya que necesitamos que los visitantes accedan por la página principal.
  • «Esta página utiliza frames pero su navegador no lo soporta»

Atributo target

Determina dónde se va a cargar la información de un enlace. Por defecto no se pone y la web se cargará en la propia pestaña.

target="_blank" cargará la información en una nueva pestaña.

<a href="#" target="_blank"></a>

Ejercicio iframe

Páginas de consulta

Tablas

<table border="1px">
	<tr>
		<td>La celda</td>
	</tr>
</table>
  • La etiqueta td (d de data) no formatea por defecto su contenido.
  • La etiqueta th (h de head), centra el contenido de la celda y lo pone en negrita. Es un atajo para poner encabezados.

Ejercicio tabla

Ejercicios colspan y rowspan

Los siguientes atributos se añaden a la celda, no a la fila:

  • colspan="2" : Une dos columnas en una sola.
  • rowspan="2": Une dos filas en una sola

Ejercicio Picasso

Estilos en línea

<img src="imagen.jpg" width="30px" height="30px">
vs
<img src="imagen.jpg" style="width:30px; height:30px">

Ejercicio estilos en línea

Maquetar una celda negra con texto arial de tamaño 3em alineado a la derecha y escrito en azul. Con un ancho de 600px y un alto de 5em. Con un margen interior derecho de 50px.

padding-right
height
background
color
text-align
font-size
font-family
width

Unidades de medida

  • Un em es una unidad de medida igual al font-size del elemento. El font-size por defecto de la etiqueta HTML son 16px. Así que en principio ese es el valor de 1 em.
  • Un rem es una unidad de medida equivalente al font-size del elemento HTML (salvo que hayamos sobreescrito su valor)
  • % es una unidad de medida relativa a la capa que contiene al elmento al que se la hemos asignado

Capas

<div style="background-color:red; width:300px; height:300px">
</div>
Una capa roja

Ejercicio

Crear una capa y asociarle una imagen de fondo utilizando una hoja de estilos externa al documento.

background:url(ruta-de-la-imagen.jpg);

Ejercicio

A partir de la página anterior, modificando la hoja de estilos, lograr que la imagen asociada a la capa cambie al pasar el cursor por encima.

Para ello usaremos:

div:hover{
...
}

Hacer una newsletter con HTML

Recomendaciones

  • Utiliza tablas para la maquetación global. Intenta evitar los divs.
  • Supón un ancho de documento de 500-600px
  • Escribe el CSS inline o en la cabecera, no en un documento externo.
  • Utiliza una ruta externa para las imágenes, no las adjuntes.
  • Evita Flash y Javascript.
  • Newsletter maker: http://www.campaignmonitor.com/templates/
  • Los dispositivos ios convierten automáticamente ciertos textos (fechas y números de teléfono) en links. Para evitar que el navegador reconozca estos elementos como teléfonos o texto, podemos insertar un elemento de ancho zero entre medias:
    M&#x200b;arch 30, 2013
  • Un enlace interesante para probar nuestros mails: premailer

Ejercicio newsletter

Descargar una plantilla de la página anterior y utilizarla para crear una newsletter con nuestros propios contenidos.

Ejercicio newsletter 2

Hacer la siguiente newsletter. Para ello propongo hacer dos tablas para la estructura global. Estas tablas pueden tener a su vez más tablas ensu interior. Una tabla será para el bloque pablomonteserín y otra para el bloque novedades y cursos.

tbody, thead, tfoot

  • Usamos tbody cuando deseamos que una tabla tenga múltiples cuerpos.
  • tbody debe usarse junto con thead y tfoot.
<table border="1" >
	<thead>
		<tr>
			<th>Elementos</th><th>de</th><th>la</th><th>cabecera</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Y</th><th>elementos</th><th>del</th><th>pie</th>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<td>1</td><td>bla bla</td><td>blep</td><td>blep</td>
		</tr>
		<tr>
			<td>2</td><td>bla bla</td><td>bla</td><td>bla</td>
		</tr>
		<tr>
			<td>3</td><td>bura bura</td><td>bla</td><td>bura bura</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>4</td><td>blep blep</td><td>Ok</td><td>Ok</td>
		</tr>
		<tr>
			<td>5</td><td>blip blip</td><td>Ok</td><td>Ok</td>
		</tr>
	</tbody>
</table>
Teoría del tbody, thead y tfoot

Usando colgroup

<table border="1" >
	<caption>T&iacute;tulo de la tabla</caption>
		<colgroup ></colgroup>
		<colgroup></colgroup>
		<colgroup></colgroup>
		<colgroup style="background-color:green"></colgroup>

		<thead>
			<tr>
				<th>Elementos</th><th>de</th><th>la</th><th>cabecera</th>
			</tr>
		</thead>

		<tfoot>
			<tr>
				<th>Y</th><th>elementos</th><th>del</th><th>pie</th>
			</tr>
		</tfoot>

		<tbody>
			<tr>
				<td>1</td><td>bla bla</td>
				<td>blep</td><td>blep</td>
			</tr>
			<tr>
				<td>2</td><td>bla bla</td><td>bla</td><td>bla</td>
			</tr>
			<tr>
				<td>3</td><td>bura bura</td><td>bla</td><td>bura bura</td>
			</tr>
		</tbody>

		<tbody>
			<tr>
				<td>4</td><td>blep blep</td><td>Ok</td><td>Ok</td>
		</tr>
		<tr>
			<td>5</td><td>blip blip</td><td>Ok</td><td>Ok</td>
		</tr>
		</tbody>
</table>
Usando Col Group

Usando rules="groups"

Usando rules groups

Ejercicio

favicon

<link rel="shortcut icon" href="https://pablomonteserin.com/miCara.png" type="image/png" />
  • A menudo, el cambio del favicon.ico de nuestra página tarda mucho en refrescar. Para evitarlo, podemos cambiar la url de carga del mismo, haciendo algo parecido a esto:
    <link rel="shortcut icon" href="favicon.ico?v=2" type="image/x-icon">

Selectores CSS

  • Selector universal:

    (Aplicar a TODOS los elementos de la página un margen cero)

    <div></div><p></p>			→ 	*{ margin: 0;padding:0 }
  • Selector de etiqueta

    (Aplicar a TODOS los div un fondo rojo y un borde sólido de 2px y color negro)

    <div></div><div></div>			→ 	div { background: red; border: 2px solid black;}
  • Selector de clase

    (Aplicar a todos los elementos con una clase verde una fuente de color verde)

    <div class="verde"></div>		→	.verde { color: green; }
  • Selector de ID

    Iguales que los anteriores pero para elementos marcados con el atributo id. Este se utiliza para marcar un elemento único.

    (Aplicar al elemento slider un color de fondo azul)
    <div id="slider"></div>			→ 	#slider { background: blue; }

Ejercicios de etiquetas y selectores

Ejercicio chistes

border: 1px solid black;

Cómo añadir un borde a un efecto hover sin que se sume al grosor

a{
text-decoration: none;
	font-size: 3em;
	border-bottom:1px solid transparent;
}
a:hover{
	border-bottom: 1px solid black
}
Ver ejemplo

Ejercicio citas

Tener en cuenta que los párrafos están alineados usando márgenes.

Estilos necesarios para resolver este ejercicio:

border-radius: 20px 0 0 20px;

Ejercicio Comic Sans

A partir del código html de la página suministrada, introducir el código css necesario para que se visualice como se indica en el enlace.

Notas:

  • No cambiar la tipografías.
  • Para cambiar el interlineado usaremos el estilo line-height
  • Para los bordes de los textos, usaremos los estilos border-top y border-bottom
  • Para alinear el texto a la derecha, usaremos text-align:right
  • Todo el contenido estará dentro de una capa con width:1024px y margin:auto

Selector descendente

El siguiente selector se aplica a todos los párrafos que se encuentren dentro de un span un color igual a 10px:

p span { color: red; }

Selector combinado

El siguiente selector se aplica a todos los párrafos con clase amplio que estén dentro de otro de un div con clase verde, un margen de 40px:

div.verde p.amplio { margin: 40px; }

class vs id

Las clases y los identificadores son como los nombres comunes y los propios. Una clase se puede reutilizar para diversos elementos pero uno con id tiene que ser único (class="montes", id="Everest"). No puede haber más que un solo elemento con una determinada id en la misma página, de lo contrario el intérprete del navegador dará resultados imprevisibles.

¿Cómo escribir menos código?

Cómo no hacerlo#content { 
	margin-top: 10px;
	margin-right: 12px;
	margin-bottom: 0;
	margin-left: 15px;
	background-color: #000;
	background-repeat: no-repeat; 
}
Cómo hacerlo#content{
	margin: 10px 12px 0 15px;
	background: #000 no-repeat; 
}

Hojas de estilos

http://www.csszengarden.com/

http://www.cssplay.co.uk/

Cargar una hoja de estilos externa

<link rel="stylesheet" type="text/css" href="estilos.css"/>

Notas:

  • El atributo opcional type se usa para especificar un tipo de medio (text/css para una hoja de estilo en cascada) permitiendo a los navegadores omitir los tipos de hoja de estilo que no soportan.
  • rel=”stylesheet” indica que es la hoja de estilos preferente.
  • rel=”alternate stylesheet” indica que podemos cambiar esta hoja de estilos desde el navegador.
  • Es necesario declarar al menos una hoja de estilos preferente.

Reglas CSS

h1 { color : #990000 }

Declaración:
selector { propiedad : valor }

El selector indica a qué hay que aplicarle la regla y la declaración especifica qué es lo que hay que hacerle.

Selectores: http://www.w3.org/TR/selectors/

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>
text-shadow
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>
border-radius, box-shadow
Notas:

border-radius:100% hace una capa ciruclar

Enlaces de interés:

border-image

border-image en html
<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

border-image con HTML
<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>
Ver ejemplo border-image II

Repetir el ejercicio anterior, pero para un enlace en vez de para una capa.

Es imprescindible que el enlace tenga el estilo display:block, o display:inline-block o float:left. Esto ocurre porque un enlace por defecto tiene el estilo display:inline, que hace que no coja los valores para el ancho y el alto.

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>
imagen mundo Ver ejercicio background-size

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>
Ver ejercicio de background

background con rgba

<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>
Ver ejercicio de background con transparencia

Gradientes

Fuentes

Ejercicio fuentes

Hacer funcionar la tipografía de font awesome.

columns


<link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">

<span class="socicon socicon-twitter"></span> 	
columnas

Transform

transform:translateX

Transform, translateX
<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>

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:

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

transform:rotate

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

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

Para concatenar efectos utilizo el espacio en blanco.
Ejemplo:

transform:rotate(720deg);

transform:skewX

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

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

transform:scale

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

perspective

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

Animaciones con Transition

transition I - Sin animación

Sin animación

transition II - Con animación

Con transición
<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>

transition II - Con animación 2

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

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

transition III - CSS descompuesto

<style type="text/css">
	div{
		background-color: pink;width:300px; height:300px; transition: 3s;
	}
	div:hover{
		background-color: black;transition: 0.5s;
	}
</style>
Transición descompuesta
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:

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;
}

Ejercicio width

Hacer el ejercicio del enlace

Ejercicio width

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.

transition:width 2s, height 2s;
usando el atributo target

text-overflow

<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>
text-overflow

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

GIMP

Recortar imágenes y opciones frecuentes

  • ctrl + o → Abrir una imagen.
  • ctrl + s → Salvar una imágen
  • ctrl + b → ver barra de herramientas
  • f → free select tool
  • Shift → añadir a la selección
  • Ctrl → sustraer de la selección
  • Shift + ctrl → coger la intersección de la selección
  • shit + t → escalar
  • shift + r → rotar
  • Menú image → scale image
  • Menú colors → bright/contrast
  • Menú filters

Ejercicio -Dibujar con GIMP

  • Crear un nuevo document: ctrl + n
  • Crear una selección: r
  • Pintar con la pluma: p
  • Borrar: ctrl + shift + e
  • Exportar imagen: ctrl + shift + e
  • Ver capas: ctrl + l
  • Mover capa: m
  • Ver herramientas: ctrl + b
imagen casita

Cómo hacer un degradado

Windows → Dockable Dialogs → Gradients (ctrl+g) → create new gradiente (si edito un gradiente del sistema no podré modificarlo) (con ctrl pulsado me será fácil hacer un degradado perfectamente vertical).

Ejercicio - hacer un degradado para una página web, usando GIMP

Ejercicio - background-repeat

Utilizando alguna de las fotografías de los recursos, hacer una libreta como del ejemplo

Degradados

Estilos para centrado de texto dentro de un botón

Horizontalmente

text-align:center

Verticalmente, si se trata de una sola línea:

line-height: [le doy la altura de la capa a la que pertenece el texto].

Ejercicio navbar

Crear una botonera de 3 botones. Cada botón será un elemento de una lista. Crearemos un único fichero de dibujo con dos capas, una para cuando el botón está en reposo y otra para cuando pasamos el cursor por encima del botón. El texto no formará parte de la imagen, lo añadiremos con html.

display:block, inline, inline-block

display:block → el elemento coge el ancho, el alto especificados y se coloca verticalmente a continuación del anterior. Si tiene contenido y no especificamos ancho ni alto, el ancho será el 100% de la capa que lo contiene y el alto será lo que ocupe el contenido.

display:inline → el elemento no coje el ancho ni el alto y se coloca horizontalmente a continuación del anterior.

display:inline-block → el elemento coge el ancho y el alto y se coloca horizontalmente a continuación del anterior.

display:inline-block → separación entre capas

Para evitar el espacio en blanco que hay entre las capas podemos:

  • poner las capas una a continuación de la otra, sin saltos de línea ni espacios en blanco.
  • comentar los saltos de línea
    <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>
  • Ajustar la maquetación de las capas
    <div></div><!--
    --><div></div>
  • trabajar los font-size de 0px para eliminar esta separación (para mi gusto, la peor opción).

float:left

Elementos con display:block y float:left se irán posicionando horizontalmente.

  • Es necesario indicar este estilo tanto a la capa sobre la que me apoyo como a la capa que se apoya.
  • Este posicionamiento hace que la capa contenedora de los div con float no crezca según estos van creciendo. Para solucionarlo, puedo poner overflow:auto u overflow:hidden a la capa contenedora.
  • El estilo clear:right hace que cuando usas float no quepan elementos a la derecha. El estilo clear:both hace que no quepan a ambos lados.
<div></div
><div></div>

Ejemplo de varios posicionamientos

Varios posicionamientos

Margin Collapse

Ver ejercicio Margin Collapse

Ejercicio dejavu

La etiqueta time se usa para marcar fechas y horas en un formato que entiendan los ordenadores. Dicha fecha puede ser el contenido de la etiqueta o puede ir en el atributo datetime con lo cual el contenido puede ser cualquier cosa.

padding y width

Cuando añadimos un padding a una capa con un width definido expresamente, ambas medidas se sumarán y probablemente haya que restar lo que hemos añadido de padding al width para que la maquetación nos quede correcta.

Sin embargo, si la capa no tiene un width asignado expresamente, el display:block hará que el ancho de la capa sea el ancho de la capa que la contiene, y esta medida no aumentará al añadir el padding.

Por otra parte, utilizando el estilo box-sizing: border-box; ya no será necesario sustraer el padding del width o del height según corresponda.

.iceburg{
	position:fixed
}
.titanic{
	float:none
}

Ejercicios de maquetación vertical

Ejercicio una columna

imagen ejercicio html, logo imagen ejercicio HTML, footer

Ejercicio teatro

Nota: para que la capa interior de texto tome el márgen superior necesario deberemos asignarle un estilo margin-top. Esto hará que la capa contenedora baje. Podremos arreglar estos dándole el estilo overflow-hidden a la capa contenedora o el estilo float a la capa contenida.

También podemos usar padding-top en lugar de margin-top en la capa contenedora.

Para que aparezcan barras de desplazamiento cuando el contenido de una capa no quepa dentro, usaremos: overflow:auto.

teatro

Ejercicio dummies

banner

Hacer una newsletter responsive sin media queries

<style type="text/css">
	div	{
		width: 300px;
		padding: 40px
	}
	.box1{
		background: green
	}	
	.box2{
		background: red;
		box-sizing:border-box;
	}

</style>

<div class="box1">
	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 
</div>

<div class="box2">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore 
</div>
Ver newsletter responsive sin media queries

Ejercicio - Hacer la siguiente newsletter responsive

Para que las imágenes se vean, habrá que subirlas a google drive, y hacerlas públicas mediante este enlace.

img vs background

Usa la etiqueta img si...
  • Piensas que la gente puede imprimir tu página y quieres que la imágen sea incluída por defecto.
  • La imágen (con atributo alt) tiene importancia semántica
Usa el css background-image si...
  • La imagen no forma parte del contenido.
  • No quieres que las imágenes sean incluídas al imprimir
  • Quieres mejorar la velocidad de carga usando css sprites.

Ejercicio 3 columnas

background para ejercicio html

Ejercicio anuncios en columnas

Ver ejercicio anuncios en columnas

Flexbox

Usando display:flex o display:inline-flex en una capa, la convertimos en un contenedor flexible. En el primer caso, la capa se comporta con respecto a otros elementos de la página como si tuviese display:block, en el segundo, como si tuviese display:inline-block

Ver videotutorial introductorio de Flexbox

flex-direction

Especifica como se sitúan los elementos flexibles dentro del contenedor.

Alinear contenido abajo

La siguiente maquetación es muy típica cuando estamos haciendo páginas webs.

<table style="text-align:center; margin:auto">
	<tr>
		<td>
			<table class="column" style="display: inline-block; max-width: 300px; width: 100%;">
				<tr>
					<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam maiores blanditiis vitae, esse incidunt officia, assumenda illo! Ratione et laudantium architecto repellendus obcaecati possimus. Quod voluptatibus porro, officiis eius voluptates.</td>
				</tr>
			</table>
			<table class="column" style="display: inline-block; max-width: 300px; width: 100%;">
				<tr>
					<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt inventore harum dicta minus culpa recusandae consequuntur optio voluptas distinctio ratione! Accusantium, officiis. Ducimus, itaque sint vitae consequuntur est nihil possimus.</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
Alinear contenido abajo

flex-wrap

  • wrap: Los elementos de la capa se distribuirán en una o varias filas en función de su tamaño.
  • nowrap: Los elementos de la capa estarán sí o sí en una sola fila.
Ver ejemplo de flex-wrap

flex-flow

<style>
.fila{
	display: flex;
	width: 600px;
	justify-content: space-between;
}
.col{
	display: flex;
	position: relative;
	flex-direction: column;
	text-align: justify;
	width: 45%
}
.col a{
	margin-top: auto;
	display: block;
	text-align: center;
	width: 100%
}
</style>
<div class="fila">
	<div class="col">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores esse, obcaecati quisquam, aperiam reprehenderit!</p>
		<a href="#">Enlace</a>
	</div>
	<div class="col">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, odio est cum similique velit, animi cupiditate tempore cul</p>
		<a href="#">Enlace</a>
	</div>
</div>

O lo que es lo mismo:

flex-flow:row wrap;
Ver ejemplo flex-flow

Ejercicio 3 columnas con flex

background para ejercicio html

Ejercicio 3 columnas con flex

Ejercicio anuncios en columnas con flex

Ver ejercicio anuncios en columnas

order

Podemos establecer el orden en el que aparecen los componentes de una caja flexible. Por defecto aparecerán tal y como aparecen en el código HTML (equivale a order: 0)

Ver ejemplo de uso de order

align-items

flex-direction: row;
flex-wrap: wrap
alinear elementos verticalmente con display:flex Ejemplo

Align self

#wrapper{
	display: flex;
	align-items: flex-start | flex-end | center | baseline | stretch;
}
alinear un único elemento verticalmente con display flex Ejemplo

justify-content

#wrapper{
	display: flex;
	align-self: flex-start | flex-end | center | baseline | stretch;
}
justificación de elementos con display flex Ejemplo

flex:resumen

Flexy Boxes

Flexbox Froggy

Ejemplo

Cambiar el tamaño de las columnas con flex

#wrapper{
	display: flex;
	justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
Ver ejemplo

flex: abreviatura de flex-grow, flex-shrink, flex-basis

Nos permite establecer cómo crece o decrece un elemento flexible dentro del contenedor en relación a los demás.

<style>
	.container{
		display: flex;
	}

	.rosa{
		background: pink;
		flex-basis: 100px
	}

	.naranja{
		background: orange;
	}
</style>

<div class="container">
	<div class="col rosa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cupiditate magnam veniam architecto cum eligendi distinctio, voluptates, ipsa inventore autem et possimus eius suscipit esse deleniti hic porro repellat dolore.</div>
	<div class="col naranja">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, ducimus? Iusto quisquam, nam expedita animi? Sint delectus temporibus impedit praesentium ratione, officiis harum accusamus dolor, error doloribus iste quisquam animi!</div>
</div>
Ver ejemplo

Esta propiedad se puede volver más compleja, porque puede tener tres parámetros: flex-grow, flex-shrink y flex-basis.

Ejemplo

Supongamos que tenemos un contenedor al que llamaremos "wrapper" que tiene 300px de ancho.

<style>
	.container{
		display: flex;
	}

	.rosa{
		background: pink;
		flex: 1
	}
	.naranja{
		background: orange;
		flex: 3
	}
</style>

<div class="container">
	<div class="col rosa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cupiditate magnam veniam architecto cum eligendi distinctio, voluptates, ipsa inventore autem et possimus eius suscipit esse deleniti hic porro repellat dolore.</div>
	<div class="col naranja">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, ducimus? Iusto quisquam, nam expedita animi? Sint delectus temporibus impedit praesentium ratione, officiis harum accusamus dolor, error doloribus iste quisquam animi!</div>
</div>

este contenedor tiene en su interior dos elementos, col1 y col2, que no tienen un ancho especificado. Vamos a establecer los siguientes valores para ambos de la propiedad flex: flex-grow, flex-shrink, flex-basis:

#wrapper { display: flex;}

Como hemos establecido un flex-basis para cada elemento de 100px, nos quedarán aún 100px libres sin ocupar (300px del contenedor menos 100px del elemento col y menos 100px del elemento col2). ¿Como se reparte ese espacio disponible entre los elementos col1 y col2? En función del flex-grow: 3 partes para el elemento B (75px) y una parte para el elemento C (25px). Es decir, de inicio el elemento B ocupará 100px+75px = 175px de los 300px disponibles que mide el elemento A, y el elemento C ocupará 100px+25px=125px de los 300px disponibles del elemento A.

Ahora bien, supongamos que el elemento contenedor A mide 170px y no 300px. Eso quiere decir que habrá espacio negativo, porque los elementos B y C tienen un flex-basis de 100px cada uno, es decir, 200px, que es 30px mayor que los 170px del contenedor. En este caso el ratio que se usa es el flex-shrink, que recordemos que era 1 para el elemento B y 2 para el elemento C. Esos 30px se restarán del ancho de los elementos B y C en función de dicho ratio: al elemento B se le quitarán 10px y al elemento C se le quitarán 20px.

  • flex-grow: Especifica el factor de crecimiento, es decir, cuanto crecerá el elemento en relación a los demás cuando hay espacio disponible del contenedor a ocupar. Por defecto es ‘0’, que es el valor que dimos en el ejemplo anterior a los tres elementos.
  • flex-shrink: Determina el factor de reducción, es decir, cuanto decrecerá el elemento en relación a los demás cuando hay espacio negativo en el contenedor (el contenedor es más pequeño de los anchos combinados de los elementos que hay en su interior). Por defecto es ‘1’.
  • flex-basis: Toma el mismo valor que la propiedad ‘width’ y establece el tamaño inicial del elemento antes de distribuir el espacio libre de acuerdo con los ratios de flex-grow o flex-shrink. Cuando se omite, su valor es ‘main-size’ (anteriormente, ‘auto’).
Ejemplo de uso de flex

Pintar el color de fondo de una línea

Incrustar una imagen

Si usamos el inspector de código observaremos que el párrafo se superpone sobre la imágen, pero el texto la envuelve. Esto ocurre porque mientras que la capa tiene display:block, el texto tiene display:inline.

<style type="text/css">
	p {
		display: inline;
		background: pink;
		font-size: 1em;
		line-height: 1.5em;
	}
</style>
<p>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 essecillum dolore eu fugiat nulla pariatur.
</p>

Ejercicio Incrustar una imagen en texto florencia

Estilos nuevos necesarios:

<style type="text/css">
	img{float: left; margin: 20px}
</style>

<img  src="http://lorempixel.com/200/200"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...

Sangría francesa (hanging intent)

Capitalizar una letra

.hangingindent {
	padding-left: 22px ;
	text-indent: -22px ;
}

No confundir :first-of-type con :first-child. :first-child no se aplica si el primer elemento del grupo no es el indicado por el selector.

Capitalizar letra

Ejercicio Oscar Wilde

Poniendo el estilo float:left a la letra capitalizada, la podremos incrustar en el texto.

Justificado y centrado de la última línea

<style type="text/css">
	p:first-of-type:first-letter{
	font-size: 3em
}
</style>

<p>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.</p>

<p>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.</p>

Eliminar el borde (outline) del elemento activo

No es muy recomendable borrarlo por razones de usabilidad. A pesar de ello, muchos clientes insisten en querer borrarlo.

text-align: justify;
text-align-last: center;

contenteditable

Soporte para textos asiáticos

<!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>
		<main 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>
		</main>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>
Textos asiáticos

Ejercicio

wbr - Word Break

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

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

Ejercicio

Hacer una página web con 3 columnas que contengan, repetida muchas veces la frase:
Un murcié-lagosuper-califragilístico-espialidoso

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

wbr

Ejercicios de HTML

Ejercicio página sencilla

logo para ejercicio HTML

Ejercicio Ventana

Habitualmente, es conveniente agrupar la información en bloques que formen columnas en vez de en bloques que formen filas. Por tanto, lo apropiado en este ejercicio es que los tres elementos centrales (barra horizontal amarilla, rectángulo azul y barra horizontal morada) estén contenidos dentro de una capa llamada columna central y que a su vez toda la ventana esté contenida dentro de una capa llamada ventana

Consejo:
No apoyes nunca una capa sobre varias capas. Siempre apoyaremos una capa sobre una capa.

Ejercicio panteón

imagen pateón para ejercicio HTML

Plantillas

Páginas de sonidos

Cross Browsing

Compartir

position

  • static : (por defecto) no obedece a los estilos top, left, bottom, right.
  • relative : permite posicionar un elemento respecto de la posición dónde debería ir. Será posible utilizar los estilos top, left, bottom y right. Ver ejemplo de uso de relative
  • absolute : permite la superposición. Ver ejemplo de uso de fixed
  • fixed : permite la superposición. Además, por mucho scroll que hagamos, el elemento no se desplazará. Ver ejemplo de uso de fixed
  • inherit : el elemento hereda sus estilos de la capa que lo envuelve.
  • sticky : Es similar al fixed, pero con la diferencia de que al aplicar el estilo, el elemento no cae fuera de la línea de flotación. Además, podemos separar el elemento del límite superior de la pantalla y cuando hagamos scroll el elemento queda fijado (ver ejemplo).

Hacer una capa con un height:100%

<p>
	Palabrasuperlarga<wbr/>enlaquevoyadecidirpordondequieroquesecorte<wbr/>encasodenocaberenlacapaquelacontiene
</p>
Ver ejemplo de height 100x100

Ejercicio position absolute

Tener en cuenta que al redimensionar verticalmente la pantalla, cambia el tamaño de las capas. Para esto, las capas deben tener una altura en porcentajes.

Las cinco capas que se superponen entre sí al hacer hover tendrán "position:absolute". Además, deberán estar dentro de una capa con "position:relative" para que al aplicarles los estilos "top,left,bottom y right" no se posicionen respecto de los límites de la pantalla, sino respecto de los límites de la capa que las envuelve.

La altura de la capa que contiene las cinco capas con "position:absolute" será del 50% de la pantalla.

Opacidades

<style>
	.capa1{
		background: pink;
		height: 100vh;
	}
</style>

<div class="capa1"></div>
<body style="background-image:url('back.jpg')">
	<div style="background-color:red; width:300px; height:300px; opacity:0.5; filter: alpha(opacity=50);">
		<p style="color:white">Las rosas son rosas, el cielo es azul!!
		</p>
	</div>
</body>

Ejercicio

Al hacer hover sobre el enlace aparece la fotografía.

Ejercicio - Galería de fotos

Utilizando el siguiente código HTML, realizar el efecto descrito en el enlace:

<style>
	a .capaFlotante{
		position:absolute;
		margin-left:20px;
		margin-top:20px;
		display: none;
		color:black;
	}
	a:hover .capaFlotante{
		display: block
	}
</style>

<a href="#">
<span>Enlace</span>
<span class="capaFlotante">Capa flotante</span>
</a>

Este ejercicio se puede resolver en dos fases:

  1. Sin texto
  2. Que un texto se haga visible al hacer hover.

Navigation Bar I - lista de enlaces

Hacemos una lista de enlaces y los maquetamos ligeramente.

Ver ejemplo de como maquetar el submenu
<div class="negro">
	<img class="cosas" src="http://lorempixel.com/300/300">
	<p>Foto de elefante</p>
</div>

Navigation Bar II – content

After y content
.menu{
	width: 300px;
	padding-left: 0;
	list-style:none;
}
	
.menu li a{
	color:black;
	background:pink;
	border:solid black 6px;
	border-radius: 10px;
	padding:15px;
	display:block
	...

.menu li a:hover{
	...

Navigation Bar III – iconos

Uso de iconos. Si cargo una fuente en la que todo son iconos, y pongo la letra correspondiente al icono que me interesa, mostraré el icono.

li.hasChildren a:after{
	color:purple;
	content:" o";
}

Navigation Bar IV - botonera horizontal

Volver la botonera horizontal:

@font-face{
	font-family: flechita;
	src:url(Arrows_tfb.ttf);
}

También lo podíamos haber hecho utilizando:

ul li{
	display: inline-block;
...

Pero recomiendo la primera forma que nos facilitará la tarea cuando queramos hacer una botonera cuyos enlaces emerjan del centro.

Horizontal

Navigation Bar V - submenús

ul li{
	float:left; /*Necesario para mostrar los botones en horizontal*/
<li class="hasChildren"><a href="#" title="las fotos de mis viajes">fotos</a>
	<ul>
		<li><a href="#">submenu 1</a></li>
		<li><a href="#">submenu 2</a></li>
		<li><a href="#">submenu 3</a></li>
	</ul>
</li>
Ver ejemplo de cómo maquetar el submenú

Notas:

Para que los submenus no tengan el icono, habrá que modificar es estilo de este enlace:

li.hasChildren li{
	display:block;
}
li.hasChildren ul{
	margin:0;
	padding: 0;
	position:absolute;
}

Navigation Bar VI - aparecen submenús

li.hasChildren > a:after
Ver ejemplo de cómo hago para que aparezca el submenú

Navigation Bar VII - añadiendo animación

li.hasChildren ul{
	...
	opacity: 0;
	overflow: hidden;
	max-height: 0
}

li.hasChildren:hover ul{
	opacity: 1;
	max-height: 800px
}
Ver ejercicio resuelto

Navigation Bar XIV - logrando el estado persistente del botón que encabeza el submenú.

transition: 1s
Ver ejemplo de cómo persistir el estado del menú

Ejercicio

Hacer que en lugar de ser una botonera horizontal, sea una botonera vertical.

!important

En CSS, el estilo más reestrictivo es el que manda. Si queremos que un class pese más que una id, o que el selector "ul" pese más que el selector "ul.menu", o sobreescribir un estilo puesto en línea con un estilo usado en una hoja de estilos, podemos usar el modificador !important

important
ol.indice, ol.indice ol{
	counter-reset: item;
}

.indice li::before {
	content: counters(item, ".") " ";
	counter-increment: item;
}
.indice li{
	list-style: none
}

Páginas reales

Ejercicio VUIT

Página catalana

Ejercicio Grassy

Parallax

Utilizando background-attachment:fixed podemos hacer que aunque las capas se desplacen, su imagen de fondo permanezca fija

Selector :not(selector)

div{
	width: 200px;
	height: 200px;
	background: blue !important
}

Ejercicio Autopista

Para hacer funcionar el ejemplo de la imagen de la cabecera, aplicaremos la a una capa a la que le daremos una altura. A dicha capa le asignaremos los estilos:

<style>
	input:not([type=checkbox]){
		width: 570px;
		display: block;
		border-radius: 15px;
	}
</style>

<input type="text" /><br>
<input type="text" />
<br>
<input type="checkbox" >
<input type="checkbox" >
Descargar imágenes ejercicio autopista

Grid Layout

Cuando queremos controlar los anchos de las columnas de nuestra regilla, display:grid suele ser una solución más cómoda que display:flex.

Selectores avanzados de CSS

Selector + y selector ~

Selector plus
background-attachment: fixed;
background-size:cover

Ocultar/Mostrar información sin Javascript

<style>
input + span{
	background: purple;
	color: white
} 
/*alt gr + 4 para dibujar símbolo*/
input ~ div{
		background: green;
		color: white
	} 
</style>

<div>
	<input type="text"><span>span con color de fondo</span><span>span con color de fondo</span>

	<br>

	<input type="text">
	<div>div al mismo nivel</div>
	<div>div al mismo nivel</div>
</div>

<div>
	<span>span sin color de fondo</span>
</div>

Ejercicio spoiler

Al pulsar sobre un texto debe hacerse visiblee un texto contiguo. Al volver a pulsar, debe volver a hacerse invisible

Spoiler

Ejercicio - Checkboxes personalizados

Utilizando el estilo background-position para desplazar la imagen de fondo del label, crear un checkbox personalizado.

radio check personalizada en html

Ejercicio

Utilizando los selectores :first-child, :last-child, :nth-child(n) y utilizando el siguiente código html, realizar la maquetación indicada a continuación

<style>
	input{
		display: none;
	}
	input:checked + .texto{
		background: red
	}
</style>
<label for="pulsable">pulsable</label>
<input id="pulsable" type="checkbox">
<span class="texto">amor</span>

Capa cuya altura se redimensiona automáticamente en función de su anchura

<div id="ventana">
	<div></div
	><div>
	<div></div
	><div></div
	><div></div>
	</div
	><div></div>		
</div>

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:

<style>
	.square {
		width: 50%;
		background: blue
	}

	.square:after {
		content: "";
		display: block;
		padding-bottom: 100%;
	}	
</style>

<div class='square'>
	<div class='square-content'>
	<div>
</div>
(Con sus versiones strict, transient, frameset)

HTML5:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(Simplemente indica que el documento es un fichero html)

Codificación de caracteres

HTML4:

<!DOCTYPE HTML>

HTML5:

<meta http-equiv="content-type" content="text/html; 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

divs 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, main, 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 introducción a un contenido.
  • Habitualmente contiene:
    • Una o varias etiquetas de encabezado (<h1> - <h6>)
    • Un logo o ícono.
    • Información del autor.
  • Puedes tener varios
<footer>

  • Contiene información sobre el elemento que lo envuelve. Típicamente:
    • Información de CopyRight
    • Información del autor.
    • Información de contacto.
    • Sitemap.
    • Enlace de regresar a la parte superior de la página.
    • Documentos relacionados.
<meta charset="UTF-8" /> 

<main> . Define secciones dentro de la web, como un encabezado, o un pie, 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>
		<p>
			Contenido de la página
		</p>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<article>

  • Un artículo contiene una unidad de información que tiene sentido por sí misma. Ejemplos:
    • Una entrada de un blog.
    • Una noticia.
    • Un comentario.
    • Un comentario en un foro.
<!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>
		<main>
			<p>
				Contenido de la página
			</p>
			</main>
		<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.relacionados con un contenido principal.

<!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>
		<main>
			<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>
		</main>
		<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>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<main>
			<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>
		</main>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

<main>

  • Especifica el contenido principal del documento.
  • El contenido de la etiqueta main no debe estar repetido en ningún otro sitio como sidebars, footers, etc.
  • Sólo puede haber una etiqueta main por página.
  • Esta etiqueta no debe estar anidada dentro de ninguna etiqueta <article>, <aside>, <footer>, <header> y <nav>.

svg

<!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>
SVG

Formularios

<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>

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.

Teoría formularios

Ejercicio

Para resolver este ejercicio, utilizaremos las siguientes etiquetas:

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

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

Fieldset

Dan problemas en el crossbrowsing.

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

Ejercicio

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

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

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

Nuevos atributos

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*/
}
Nuevos Atributos

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
<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>

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="search" />

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="number" value="-6"/>

tel

Optimiza el teclado para escribir teléfonos
<input type="range" max="10" min="0" value="7" step="2" />

url

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

email

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

Color

<input type="email"/>

Fechas y horas:

time
Puede ser inicializado, acepta los atributos min, max y step
<input type="color"/>
date
Puede ser inicializado, acepta los atributos min, max y step
<input type="time" value="10:20"/>
datetime
Es una combinación de date y time. Se diferencia de datetime-local en que muestra la hora local
<input type="date" value="1982-07-24"/>
datetime-local
<input type="datetime" value="2011-12-22T01:30Z"/>
week
<input type="datetime-local" value="2011-12-22T01:30"/>
month
<input type="week" value="1982-W17"/>
datalist
<input type="month" value="1982-07"/>

required, valid, invalid

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

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

<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>

o si queremos filtrar por class:

::-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;
}	

progress, meter

La etiqueta progress es 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

.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;
}

meter

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

output

<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

Animaciones con CSS3

Keyframes

<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>
keyframes
Descompuesto
div.box1{
	width:300px;
	height:300px;
	background: red;
}
div.box1:hover{
	animation:move 2s;
}
@keyframes move{
	from{transform:rotate(0deg);}
	to{transform:rotate(45deg);}
}
Alternate

Debe tener al menos un animation-iteration-count de 2.

Ver ejemplo
Alternate Reverse

Debe tener al menos un animation-iteration-count de 2.

alternate-reverse
Persistir estado final
animation-name:move;
animation-duration:2s;
animation-timing-function:ease-in;
animation-iteration-count:2; /* infinite para infinitas repeticiones */
Persistir el estado tras la animacion
Ejercicio KeyFrames - barra de habilidad

Nota: Para realizar este ejercicio usaremos keyframes, pero no usaremos el estilo transform.

Ejercicio KeyFrames 2 - barra de habilidad con corazones
animation-direction
alternate
alternate
animation-fill-mode: forwards
alternate-reverse
animation-direction: reverse; alternate;
Delay
animation-direction: reverse; alternate-reverse;
animation delay
step by step
animation-delay:2s;
animación paso a paso
pause and play
@keyframes move6{
	0%{transform:translateX(0px);}
	30%{transform: skew(200deg, 200deg);}
	60%{transform: scale(2,2);}
	100%{transform:rotate(1300deg);}
}
pause y play

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

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;	
}

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

<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">

Ejercicio media queries - Mobile First

Ejercicio media queries - Desktop First

Utilizando los recursos del zip 'Ejercicio propuesto', hacer el ejercicio 'Página responsive' utilizando media queries dentro de la hoja de estilos.

Ejercicio propuesto

Ejercicio impresora - hacer una página responsive

Ver como debería quedar

Enlace de interés

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

Mostrar un mensaje cuando el dispositivo tiene orientación portrait

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

Más ejercicios de html

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 text

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

Página de error 404

Creamos un fichero .htacces.txt con el siguiente código y lo copiamos en la raíz de nuestro dominio:

#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}
}
ErrorDocument 404 http://www.dominio/error404.html
ErrorDocument 404 "<h1>Page not found</h1>"

Al copiarlo al servidor lo renombraremos a: .htaccess

Además, crearemos la siguiente página web que ubicaremos también en la raíz de nuestro dominio: error404.html

Insertar el buscador de google

Dominio y alojamiento

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.

Ejercicio - Clientes y proveedores

Todos vamos a ser clientes y proveedores.

Responsabilidades del Cliente

  • Debe escoger la temática de la página web.
  • Debe decidir la estructura de la información (quienes somos, contacto, página de servicios...)
  • Debe suministrar todos los recursos de la página (fotos y texto).
  • Debe decidir si acepta o no el presupuesto.

Responsabilidades del Proveedor

  • Debe realizar la página web a partir de los recursos (fotos y texto) y la estructura de la información suministrada por el cliente.
  • Debe negociar el presupuesto. El presupuesto no puede oscilar más de 150€ de lo que él va a recibir como proveedor de otro cliente. Si el cliente no aceptase el presupuesto, debe escoger que cambios haría en la web para ofrecer una página con un presupuesto más competitivo. Si el cliente no aceptase el presupuesto, no vale simplemente bajarlo. Eso sería una bajada de pantalones.

Los presupuestos se negocian en secreto. El proveedor no debe saber cuanto va a percibir su cliente por hacer la otra web. El presupuesto debe ir en función del tiempo y la valía de la página que va a hacer, no del dinero que tiene el cliente.

Descarga de presupuestos

icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!