Introducción al

Desarrollo Front-End

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

Fundamentos del Desarrollo front-end

h1 {
    font-size:35px;
    color: green;
}

HTML

CSS

¿Qué es HTML?

Fundamentos del Desarrollo front-end

H

T

M

L

Hyper

Markup

Text

Language

Permite tomar texto, imágenes y demás elementos, organizarlos y presentarlos de una forma jerarquizada.

1 - HTML esencial

1.1 - Etiquetas

<p>Hola mundo</p>

Es un lenguaje basado en etiquetas (tags).
Estas etiquetas delimitan el tipo de contenido.
El contenido en si va dentro de las etiquetas.

El navegador Web hace de lector e intérprete de HTML.

Fundamentos del Desarrollo front-end

1 - HTML esencial

<ul>
    <li>Número uno</li>
    <li>Número dos</li>
    <li>Número tres</li>
</ul>

Las etiquetas pueden estar anidadas.
La mayoría se abren y se cierran (/).
Se utiliza espacio de tabulador para aumentar la legibilidad.

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

<!DOCTYPE html>

Indica al navegador que el documento que viene es HTML (5).
No se cierra.
No se muestra.
Clara mejoría respecto a HTML 4.

Etiquetas de organización

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

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

<html></html>

En la jerarquía de HTML, es la etiqueta padre, dentro de la cual tiene cabida todo el contenido.
No se muestra.

Etiquetas de organización

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

<head></head>

Descendiente directo de <html>.
Contenido que tiene que ser procesado antes de cargar la página.
CSS, JavaScript, custom fonts, etc.
No se muestra.

Etiquetas de organización

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

<body></body>

Descendiente directo de <html> y padre de todo el contenido visible.
Hermano (sibling) de <head>.
No se muestra.

Etiquetas de organización

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

<h1>Esto es un título</h1>

<h1><h2><h3> son etiquetas heading.
Sirven para expresar, en HTML, que el contenido entre las etiquetas es un titular o subtitular.

Etiquetas de contenido

<h2>Esto es un subtítulo</h2>

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

<p>
    Esto es un párrafo 
    de texto en HTML.
</p>

Distingue semánticamente el contenido como un párrafo de texto.

Etiquetas de contenido

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

<ul>
    <li>Lista desordenada.</li>
</ul>

Lista desordenada (unordened list).
Sirven para expresar, en HTML, que el contenido entre las etiquetas es una lista de elementos que no guardan orden.

Etiquetas de contenido

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

<ol>
    <li>Lista ordenada.</li>
</ol>

Lista ordenada (ordened list).
Sirven para expresar, en HTML, que el contenido entre las etiquetas es una lista de elementos que guardan orden correlativo.

Etiquetas de contenido

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

Ejercicio:

https://jsfiddle.net/juanwmedia/dk5pnwL0/

1.1 - Etiquetas

Fundamentos del Desarrollo front-end

1 - HTML esencial

<a href="http://esat.es">ESAT</a>

Estructuras creadas para conectar diferentes partes de una página Web con información y recursos externos e internos.

Hiperenlaces

1.2 - Enlaces

Fundamentos del Desarrollo front-end

1 - HTML esencial

<a href="http://esat.es" 
target="_blank">ESAT</a>

La etiqueta <a> acepta una serie de atributos:
- href: el destino del enlace, entre "".
- target: "_self", "_top", _"blank".

Hiperenlaces

1.2 - Enlaces

Fundamentos del Desarrollo front-end

1 - HTML esencial

http://esat.es/game-development

Estructura de una URL

Protocolo
Hypertext Transfer Protocol

Servidor

Archivo

1.2 - Enlaces

Fundamentos del Desarrollo front-end

1 - HTML esencial

<a href="https://maps.google.es/" target="_blank">Google Maps</a>

Siempre deben mostrar la URL completa, con protocolo.
Se usan cuando queremos enlazar a un contenido que está en un servidor específico, generalmente fuera del nuestro.

Hiperenlaces absolutos

1.2 - Enlaces

Fundamentos del Desarrollo front-end

1 - HTML esencial

<a href="secciones/contacto.html">Contacto</a>

La ruta se establece de forma relativa a donde nos encontramos (index.html).
Solicita y enlaza a contenido que está alojado en el mismo servidor.

Hiperenlaces relativos

1.2 - Enlaces

Fundamentos del Desarrollo front-end

1 - HTML esencial

Ejercicio:

https://jsfiddle.net/juanwmedia/hqe7ekd9/

1.2 - Enlaces

Fundamentos del Desarrollo front-end

1 - HTML esencial

C

S

Cascading

Sheets

Style

Son hojas de estilo en cascada.
Disponibles (tal y como las conocemos ahora) desde HTML 4.

2.1 - Selectores

Fundamentos del Desarrollo front-end

2 - CSS esencial

Las reglas CSS seleccionan una o varias etiquetas.
Para luego aplicar valores a propiedades.

<style>
    p {
        color: red;    
    }

</style>

<p>Esto es un párrafo</p>

SELECTOR

PROPIEDAD

VALOR

2.1 - Selectores

Fundamentos del Desarrollo front-end

2 - CSS esencial

En cada declaración, se puede aplicar valores a más de una propiedad.

<style type="text/css">
    p {
        color: red;
        font-size: 1.2em;
        text-align: center;
    }
</style>

Estos valores se aplican a todas las instancias del selector.

En este caso a todos los párrafos

2.1 - Selectores

Fundamentos del Desarrollo front-end

2 - CSS esencial

Los selectores permiten apuntar a etiquetas hijas de otras etiequetas (children tags).

<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

Fundamentos del Desarrollo front-end

2 - CSS esencial

También llamadas "pseudo clases", sirven para definir un estado, posición o relación especial de un elemento HTML (tag).

<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

Fundamentos del Desarrollo front-end

2 - CSS esencial

También llamadas "pseudo clases", sirven para definir un estado, posición o relación especial de un elemento HTML (tag).

<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

Fundamentos del Desarrollo front-end

2 - CSS esencial

También llamadas "pseudo clases", sirven para definir un estado, posición o relación especial de un elemento HTML (tag).

<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

Fundamentos del Desarrollo front-end

2 - CSS esencial

En el <head> de nuestra página HTML:

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

Fundamentos del Desarrollo front-end

2 - CSS esencial

En las propias etiquetas/elementos HTML:

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

Fundamentos del Desarrollo front-end

2 - CSS esencial

En un archivo CSS independiente:

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

Fundamentos del Desarrollo front-end

2 - CSS esencial

Ejercicio:

https://jsfiddle.net/juanwmedia/fq7zyg84/

Leer:

Introducción a las pseudo clases

Meet the Pseudo Class Selectors

2.1 - Selectores

Fundamentos del Desarrollo front-end

2 - CSS esencial

Hsta ahora hemos usado los nombres de colores:
- red, purple, green, black, etc..
Pero en CSS los colores comúnmente se especifican en forma hexadecimal (entre otras):

p {
    /* Color rojo */
    color: #FF0000;
}

2.2 - Colores hexadecimales

Fundamentos del Desarrollo front-end

2 - CSS esencial

#FFFF00=

Rojo

Verde

Azul

2.2 - Colores hexadecimales

Fundamentos del Desarrollo front-end

2 - CSS esencial

10 dígitos

10 dígitos + 6 primeras letras del alfabeto

Notación decimal (10)

(7x10) + (6x1)

2.2 - Colores hexadecimales

Fundamentos del Desarrollo front-end

2 - CSS esencial

Notación hexadecimal (16)

(7x16) + (6x1)

118

2.2 - Colores hexadecimales

Fundamentos del Desarrollo front-end

2 - CSS esencial

Notación hexadecimal (16)

(15x16) + (15x1)

255

2.2 - Colores hexadecimales

Fundamentos del Desarrollo front-end

2 - CSS esencial

Notación hexadecimal (16)

#7403AB

(7x16) + (4x1) = 116

(0x16) + (3x1) = 3

(10x16) + (11x1) = 171

2.2 - Colores hexadecimales

Fundamentos del Desarrollo front-end

2 - CSS esencial

Colores disponibles

255 x 255 x 255

Más de 16 millones.

2.2 - Colores hexadecimales

Fundamentos del Desarrollo front-end

2 - CSS esencial

Todos los elementos dentro de <body> están contenidos en un rectángulo invisible llamado "box".
Hay elementos de nivel bloque (block level) cuya caja (box) ocupa todo el ancho disponible.
Otros elementos son en línea (inline), es decir, que ocupan sólo el ancho necesario y fluyen con el resto.
Podemos alterar ese comportamiento con la propiedad CSS "display".

Box Model (modelo de caja)

(Demo párrafo, enlace y display.)

2.3 - Modelo de

Fundamentos del Desarrollo front-end

2 - CSS esencial

¿Cómo sabe el navegador cuánto espacio vertical debe haber entre cada elemento HTML?.

Box Model (modelo de caja)

2.3 - Modelo de caja

Fundamentos del Desarrollo front-end

2 - CSS esencial

Contenido

Padding

Borde

Margin

Los navegadores incluyen estilos CSS propios (reset).

2.3 - Modelo de caja

Fundamentos del Desarrollo front-end

2 - CSS esencial

(Chrome Dev Tools)

Usadas para diferenciar entre los elementos HTML.
- Hasta ahora estábamos seleccionando todas.
Las clases hacen accesibles elementos individuales de HTML.

.lista {
    margin-left: 20px;
}

Se pueden utilizar junto con los selectores comunes.

ul.lista li a {
    font-weight:bold;
}

3.1 - Selector de clase

Fundamentos del Desarrollo front-end

3 - Clases y layout básico

<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

Fundamentos del Desarrollo front-end

3 - Clases y layout básico

Div (división), es un elemento de nivel de bloque que se utiliza para agrupar contenido relacionado.

<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

Fundamentos del Desarrollo front-end

3 - Clases y layout básico

Los divs y todos los elementos HTML pueden ser centrados.

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

Fundamentos del Desarrollo front-end

4 - Imágenes

La etiqueta o tag HTML para las imágenes es <img>:

<img src="imagenes/imagen1.png" alt="Mi super imagen">

Es una etiqueta que no se cierra (empty).
Se debe añadir la etiqueta alt (alternativo) para hacerla accesible a dispositivos que leen imágenes.
Es una etiqueta de nivel inline pero se puede transformar con la propiedad display de CSS.

4.1 - Imágenes de contenido

Fundamentos del Desarrollo front-end

4 - Imágenes

La mayoría de las imágenes en Web pertenecen a la categoría de contenido, layout o interfaz.
Las imágenes de contenido complementan el texto y son necesarias en el contexto de la información.

Ejercicio 4.1

4.2 - Imágenes de layout

Fundamentos del Desarrollo front-end

4 - Imágenes

Generalmente se usan como fondo (background) y complementan el estilo y presentación de la página pero no son indispensables para comunicar toda la información.

Se crean con la propiedad "background" de CSS.

div {
    background-image:url(imagenes/imagen.jpg);
}

4.2 - Imágenes de layout

Fundamentos del Desarrollo front-end

4 - Imágenes

Puede obtener rutas absolutas o relativas.

/* Relativo */
div {
    background-image:url(imagenes/imagen.jpg);
}

/* Absoluto */
div {
    background-image:url(http://www.esat.es/imagenes/imagen.jpg);
}

Siempre especifica un color de fondo por si la imagen no carga.

div {
    background-color: #999999;
    background-image:url(imagenes/imagen.jpg);
}

4.2 - Imágenes de layout

Fundamentos del Desarrollo front-end

4 - Imágenes

Las imágenes de fondo (background) se pueden posicionar con la propiedad CSS "background-position".

div {
    background-position: bottom right;
    background-image:url(imagenes/imagen.jpg);
}

El primer argumento, eje Y puede ser top, center o bottom.
El segundo argumento, eje X, puede ser left, center o right.

(Demo - Lorenpixel)

4.2 - Imágenes de layout

Fundamentos del Desarrollo front-end

4 - Imágenes

Las imágenes de fondo (background) se pueden repetir para ocupar el espacio de la etiqueta HTML contenedora.

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

Fundamentos del Desarrollo front-end

5 - Fuentes y formularios

El estilo de las fuentes se controla con CSS.
Si no especificamos nada, el navegador selecciona una fuente por defecto.
Para seleccionar una fuente se utiliza la propiedad CSS "font-family".

body {
    font-family: Helvetica, Arial, "Times New Roman", sans-serif;
}

FUENTE IDEAL

FUENTES DE REEMPLAZO (FALLBACK)

No todos los S.O. tienen las mismas fuentes.

5.1 - Fuentes

Fundamentos del Desarrollo front-end

5 - Fuentes y formularios

Los navegadores también tiene estilos CSS por defecto para las propiedades del texto, al igual que con el Box Model.

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

Fundamentos del Desarrollo front-end

5 - Fuentes y formularios

Algunas propidades CSS relacionadas con el texto y la tipografía.

p {
    font-size: 22px;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    line-height: 20px;
}

(Demo)

Ejercicio 5.1

5.2 - Formularios

Fundamentos del Desarrollo front-end

5 - Fuentes y formularios

Son el método más común para recibir feedback de los usuarios de nuestra Web.

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

Hay varios tipos de controles e inputs para trabajar con formularios.

5.2 - Formularios

Fundamentos del Desarrollo front-end

5 - Fuentes y formularios

Las etiquetas (tags) HTML "input" y "label" son de nivel inline, se suelen convertir en nivel bloque.

label, input {
    display:block;
}

Una vez realizado el cambio, ya se puede manipular con CSS igual que con otras etiquetas de nivel bloque.

label {
    margin-bottom: 10px;
}
input {
    width: 500px;
    margin-bottom: 25px;
}

5.2 - Formularios

Fundamentos del Desarrollo front-end

5 - Fuentes y formularios

Para acceder vía CSS a inputs en particular (botones, etc), se usan los selectores de atributos.

/* Botón de enviar */
input[type=submit] {
    width: 200px;
    text-align: center;
}
/* Campo de texto */
input[type=text] {
    width: 500px;
    padding:5px;
}

Primero seleccionan el nombre del atributo y luego el valor.

Ejercicio 5.2

Introducción al Desarrollo Front-end

By Juan Andrés Núñez

Introducción al Desarrollo Front-end

1,874

Juan Andrés Núñez

juanwmedia