¿Cuál es el cometido de un desarrollador front-end?
Un desarrollador/a front-end se encarga de maquetar la estructura semántica del contenido (HTML) y codificar el diseño en hojas de estilo (CSS).
<!DOCTYPE html>
<head>
<title>Documento en HTML</title>
</head>
<body>
<h1>Hola mundo!</h1>
</body>
</html>
h1 {
font-size:35px;
color: green;
}
HTML
CSS
¿Qué es HTML?
Permite tomar texto, imágenes y demás elementos, organizarlos y presentarlos de una forma jerarquizada.
1.1 - Etiquetas
<p>Hola mundo</p>
El navegador Web hace de lector e intérprete de HTML.
<ul>
<li>Número uno</li>
<li>Número dos</li>
<li>Número tres</li>
</ul>
1.1 - Etiquetas
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
1.1 - Etiquetas
<html></html>
1.1 - Etiquetas
<head></head>
1.1 - Etiquetas
<body></body>
1.1 - Etiquetas
<h1>Esto es un título</h1>
<h2>Esto es un subtítulo</h2>
1.1 - Etiquetas
<p>
Esto es un párrafo
de texto en HTML.
</p>
1.1 - Etiquetas
<ul>
<li>Lista desordenada.</li>
</ul>
1.1 - Etiquetas
<ol>
<li>Lista ordenada.</li>
</ol>
1.1 - Etiquetas
Ejercicio:
1.1 - Etiquetas
<a href="http://esat.es">ESAT</a>
1.2 - Enlaces
<a href="http://esat.es"
target="_blank">ESAT</a>
1.2 - Enlaces
http://esat.es/game-development
Protocolo
Hypertext Transfer Protocol
Servidor
Archivo
1.2 - Enlaces
<a href="https://maps.google.es/" target="_blank">Google Maps</a>
1.2 - Enlaces
<a href="secciones/contacto.html">Contacto</a>
1.2 - Enlaces
Ejercicio:
1.2 - Enlaces
2.1 - Selectores
<style>
p {
color: red;
}
</style>
<p>Esto es un párrafo</p>
SELECTOR
PROPIEDAD
VALOR
2.1 - Selectores
<style type="text/css">
p {
color: red;
font-size: 1.2em;
text-align: center;
}
</style>
En este caso a todos los párrafos
2.1 - Selectores
<style type="text/css">
ul li {
display:inline-block;
margin-right: 10px;
}
</style>
En este caso a todos los items de la lista desordenada.
2.1 - Selectores
<style type="text/css">
a:hover {
text-decoration: underline;
}
</style>
En este caso, a todos los enlaces (<a>) cuando el ratón se sitúa sobre ellos (:hover).
ESTADO
2.1 - Selectores
<style type="text/css">
article p:first-child {
font-size: 1.5em;
}
</style>
En este caso, a todos los primeros párrafos (<p>) de hijos del elemento article.
POSICIÓN
2.1 - Selectores
<style type="text/css">
a:not(.destacado) {
color: grey;
}
</style>
En este caso, a todos los enlaces (<a>) que no tengan la clase .destacado (¿?) .
RELACIÓN
2.1 - Selectores
<!DOCTYPE html>
<html>
<head>
<title>Mi Web</title>
<!-- Estilos -->
<style type="text/css">
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Hola mundo</h1>
</body>
</html>
Considerado una muy mala práctica.
2.1 - Selectores
<!DOCTYPE html>
<html>
<head>
<title>Mi Web</title>
</head>
<body>
<h1 style="color:blue;">Hola mundo</h1>
</body>
</html>
Esto es mucho peor.
2.1 - Selectores
<!DOCTYPE html>
<html>
<head>
<title>Mi Web</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<h1>Hola mundo</h1>
</body>
</html>
Separar el contenido de la presentación (estilo) es siempre la mejor opción.
/* Estilos */
h1 {
color: blue;
}
index.html
estilos.css
2.1 - Selectores
Ejercicio:
Leer:
2.1 - Selectores
p {
/* Color rojo */
color: #FF0000;
}
2.2 - Colores hexadecimales
#FFFF00=
Rojo
Verde
Azul
2.2 - Colores hexadecimales
10 dígitos
10 dígitos + 6 primeras letras del alfabeto
76
(7x10) + (6x1)
76
2.2 - Colores hexadecimales
76
(7x16) + (6x1)
118
2.2 - Colores hexadecimales
FF
(15x16) + (15x1)
255
2.2 - Colores hexadecimales
#7403AB
(7x16) + (4x1) = 116
(0x16) + (3x1) = 3
(10x16) + (11x1) = 171
2.2 - Colores hexadecimales
255 x 255 x 255
Más de 16 millones.
2.2 - Colores hexadecimales
(Demo párrafo, enlace y display.)
2.3 - Modelo de
¿Cómo sabe el navegador cuánto espacio vertical debe haber entre cada elemento HTML?.
2.3 - Modelo de caja
Contenido
+
Padding
+
Borde
+
Margin
Los navegadores incluyen estilos CSS propios (reset).
2.3 - Modelo de caja
(Chrome Dev Tools)
.lista {
margin-left: 20px;
}
ul.lista li a {
font-weight:bold;
}
3.1 - Selector de clase
<ul class="lista">
<li>Hacer la compra.</li>
</ul>
<ul class="lista">
<li><a href="#">Enlace</a></li>
</ul>
Ejercicio 3.1
3.2 - Divs y elementos de layout
<div class="cabecera">
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>
<div class="principal">
<!-- Contenido principal -->
</div>
3.2 - Divs y elementos de layout
/* Elemento block level
y ancho fijo */
div {
width: 500px;
margin: 0 auto;
}
/* Hijos (chlidren) de
un block level */
div h1 {
text-align:center;
}
Ejercicio 3.2
4.1 - Imágenes de contenido
<img src="imagenes/imagen1.png" alt="Mi super imagen">
4.1 - Imágenes de contenido
Ejercicio 4.1
4.2 - Imágenes de layout
div {
background-image:url(imagenes/imagen.jpg);
}
4.2 - Imágenes de layout
/* Relativo */
div {
background-image:url(imagenes/imagen.jpg);
}
/* Absoluto */
div {
background-image:url(http://www.esat.es/imagenes/imagen.jpg);
}
div {
background-color: #999999;
background-image:url(imagenes/imagen.jpg);
}
4.2 - Imágenes de layout
div {
background-position: bottom right;
background-image:url(imagenes/imagen.jpg);
}
(Demo - Lorenpixel)
4.2 - Imágenes de layout
div {
/* Repetir siempre */
background-repeat: repeat;
/* Repetir eje Y */
background-repeat: repeat-y;
/* Repetir eje X */
background-repeat: repeat-x;
/* No repetir */
background-repeat: no-repeat;
}
(Demo - Lorenpixel)
Ejercicio 4.2
5.1 - Fuentes
body {
font-family: Helvetica, Arial, "Times New Roman", sans-serif;
}
FUENTE IDEAL
FUENTES DE REEMPLAZO (FALLBACK)
5.1 - Fuentes
/* Reset actualizado */
html, body, h1, h2, h3, p, ol, ul, li, a {
/* Box model reset*/
padding: 0;
border: 0;
margin: 0;
/* Font model reset */
font-size: 100%;
font: inherit;
}
5.1 - Fuentes
p {
font-size: 22px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
line-height: 20px;
}
(Demo)
Ejercicio 5.1
5.2 - Formularios
<form>
<label for="nombre">Nombre</label>
<input type="text" id="nombre">
</form>
5.2 - Formularios
label, input {
display:block;
}
label {
margin-bottom: 10px;
}
input {
width: 500px;
margin-bottom: 25px;
}
5.2 - Formularios
/* Botón de enviar */
input[type=submit] {
width: 200px;
text-align: center;
}
/* Campo de texto */
input[type=text] {
width: 500px;
padding:5px;
}
Ejercicio 5.2