Introducción al desarrollo Web Front-End

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Parte 1

¿Qué significa
Front-End?

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Un desarrollador/a Web Front-End se encarga de producir código HTML, CSS y JavaScript para el lado del cliente, entendible e interpretable por el navegador y que resulte en una experiencia Web utilizable por el usuario.
La principal dificultad del desarrollo Web Front-End reside en la enorme velocidad en la que cambian o aparecen nuevas herramientas y técnicas para realizar el trabajo.
Mantenerse al día es un requisito indispensable.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Lo que entiende el navegador

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

HTML

La estructura

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

CSS

El estilo/diseño

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

JavaScript

La lógica

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Cliente / Servidor

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Fuente: Upwork

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Demo 🔥

Abrir demo

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Parte 2

¿Qué es HTML?

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

HTML

Lenguaje de Marcado de Hipertexto

Se trata de un lenguaje que utiliza etiquetas (tags) para delimitar y estructurar un documento Web. Estos tags permiten mostrar elementos como texto, imágenes, vídeos, formularios, etc.

<h1>Hola mundo</h1>

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Las etiquetas se presentan de forma jerárquica, es decir, unas pertenecen a otras, por lo que aparecen en su interior. El contenido de las etiquetas se sitúa entre la apertura y cierre de las mismas.

<div>
    <h1>Hola mundo</h1>  
</div>

HTML

Lenguaje de Marcado de Hipertexto

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Las etiquetas pueden tener atributos en su interior, lo que les da la posibilidad de ser configuradas y personalizadas.

<div>
    <h1>Hola mundo</h1>  
    <a href="contacto.html">Contacta conmigo</a>
</div>

HTML

Lenguaje de Marcado de Hipertexto

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Estructura de HTML

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<!DOCTYPE html>
<html>
<head>
    <title>Mi primer documento HTML</title>
</head>
<body>

<div>
    <h1>Hola mundo</h1>  
    <a href="contacto.html">Contacta conmigo</a>
</div>

</body>
</html>

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Algunas etiquetas HTML

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<p>

Párrafo

Representa un conjunto de oraciones que forma un párrafo.

<p>Nulla facilisis vulputate lacus, ut sollicitudin urna. Curabitur vel tellus sed velit cursus sodales vel a velit. Duis hendrerit erat sit amet nunc aliquam, ac gravida urna faucibus.</p>

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<h*>

Titular

Representa un título, dándole mayor protagonismo cuanto menor sea el índice (h1, h2... h6)

<h1>
  Los mejores precios para tu viaje
</h1>
<h3>
  No dejes escapar esta oferta
</h3>

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<ol> / <ul>

Listados ordenados o desordenados

Representan una lista de items en forma ordenada o desordenada, respectivamente.

<h3>
  Mis tareas:
</h3>
<ul>
   <li>Aprender desarrollo Web</li>
   <li>Encontrar trabajo</li>
   <li>No mirar atrás</li>
</ul>

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<span>

Delimitador inline

Representa una selección dentro de un elemento mayor, con el que fluye sin alterar su tamaño.

<p>
  Necesito que lo encuentres... 
  <span style="color: red;">¡ya!</span>
</p>

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<br>

Salto de línea

Inserta un salto de línea (retorno de carro). Útil para saltar a la siguiente línea de contenido.

Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Hiperenlaces

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Hiperenlaces

<a href="https://wmedia.es">
  Aprende Desarrollo Web Front-End
</a>

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

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Hiperenlaces

<a href="https://wmedia.es" target="_blank">
  Aprende Desarrollo Web Front-End
</a>

La etiqueta <a> acepta una serie de atributos:

href: el destino del enlace, entre "".
target: "_self", "_top", _"blank".

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Hiperenlaces absolutos

<a href="https://wmedia.es" target="_blank">
  Aprende Desarrollo Web Front-End
</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.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Hiperenlaces relativos

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

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Estructura de una URL

https://youtube.com/juanwmedia

Protocolo

Servidor

Recurso

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Imágenes

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<img/>

<img src="https://placekitten.com/200/300" />

Podemos agregar imágenes a nuestro documento HTML a través de la etiqueta <img>.
El atributo src indica dónde se encuentra la imagen

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<img/>

<img 
     src="https://placekitten.com/200/300" 
     width="300" />

Con el atributo width y height podemos modificar el tamaño de la imagen.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<figure> & <figcaption>

<figure>
	<img src="vacaciones.jpg" alt="Formentera 2020" />
	<figcaption>
	Todo el grupo antes de comenzar el día
	</figcaption>
</figure>

El elemento figure representa una imagen.
figcaption acompaña a figure y representa su subtítulo.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Estructurar contenido

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Semántica

Las etiquetas HTML son las que deben describir el contenido, en lugar de la presentación.
Para ello HTML contiene una serie de etiquetas que añaden un significado a tu código.
Este significado es importante para los humanos y para los rastreadores (Google, etc).

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<section>

<section id="galeria">
    <h1>Fotos de mis vacaciones</h1>
    <!-- fotos... -->
</section>

Se usa para agrupar contenido relacionado por su naturaleza o por su temática.
Es decir, cuando el contenido agrupado guarda una relación clara entre sí.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<header>

<header>
    <ul id="menu-principal">
    <!-- el menú de la Web... -->
</header>

Generalmente aparece en la parte superior de la página. Aunque puede estar en cualquier parte.
Definido por su contenido no por su posición.
Pueden existir varios headers en una misma página.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<footer>

<footer>
    <a href="legal.html">Información legal</a>
</footer>

Como el nuevo header, footer no es dependiente de ninguna posición en una Web.
Definido por su contenido no por su posición.
Pueden existir varios footer en una misma página.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<article>

<article>
    <!-- Contenido -->
</article>

Otro tipo de sección para contenido relacionado, pero además debe ser autónomo.
Sería una pieza de contenido que se podría enviar, compartir o consumir de forma independiente.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<aside>

<article>
    <aside>
        <a href="imprimir.html">Print</a>
    </aside>
</article>

Relacionado con el contenido que tiene alrededor.
Si se usa dentro de article, el contenido del aside debe estar relacionado con el artículo.
Si se usa fuera de un article, su contenido debe estar relacionado con el sitio Web en si.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<nav>

<ul id="navegacion">
    <!-- Enlaces -->
</ul>

Es una sección con enlaces de navegación.
Diseñado para ser el contenedor de todas las estructuras que permitan la navegación en una página Web.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<main>

<main>
    <!-- Contenido principal -->
</main>

Con peso semántico absoluto, representa el contenedor principal de una página Web.
No debe de haber más de un main por documento.
No debe incluirse en un article, aside, footer, header o nav.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

<div>

<div>
  <!-- Contenido agrupado -->
</div>

Con div (divider) podemos agrupar contenido relacionado pero que no tenga relación semántica.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Práctica 1

Comenzar

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Práctica 2

Comenzar

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Práctica 3

Comenzar

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Parte 3

¿Qué es CSS?

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

CSS

Hojas de Estilo en Cascada

Se trata de un lenguaje que permite definir los estilos visuales de un documento HTML, seleccionando sus elementos y modificando los valores de sus propiedades.

main {
    background-color: gray;
}

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

main {
    background-color: gray;
}

SELECTOR

PROPIEDAD

VALOR

Las reglas CSS seleccionan un escenario.
Para luego aplicar valores a propiedades.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Añadir estilos

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Estilos inline

<h1 style="color:red;">Titular de la página</h1>

Una de las 3 formas principales de añadir estilos CSS.
A través del atributo style se puede alterar los estilos de cualquier elemento HTML.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Estilos internos

Otra forma de aplicar estilos CSS, a un documento.
Se especifican con la etiqueta <style>, dentro de <head>

<!DOCTYPE html>
<html>
    <head> 
        <style type="text/css">
            h1 { color: blue; }
        </style>   
    </head>
</html>

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Estilos externos

La forma recomendada de aplicar estilos CSS.
Se aplican a un conjunto de documentos HTML.
Se importan a través de la etiqueta <link>.

<!DOCTYPE html>
<html>
    <head> 
        <link rel="stylesheet" href="css/estilos.css">
    </head>
</html>

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Seleccionar con CSS

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Selectores CSS

Al escribir CSS estamos describiendo un escenario que debe ocurrir en el documento (o documentos) HTML con el que estemos trabajando.
Estos escenarios pueden componerse de tipos de etiqueta, clases, id's o una combinación de todos.
Además, también hay que tener en cuenta que las etiquetas HTML pueden estar anidadas.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Selectores de tipo

Una de las formas de seleccionar es por el tipo (nombre) del elemento (tag) existente en el documento HTML.

p {
    margin: 10px;
}

Selecciona todos los párrafos del documento y cambia su margen a 10 píxeles

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Selectores de clase

Se usan para seleccionar elementos específicos.
Requiere asociar un nombre de clase a uno o varios elementos HTML, con el atributo class.
Luego, podemos establecer propiedades CSS definiendo esa clase.

.destacado {
    background-color: tomato;
    border: 3px solid red;
}

Selecciona todos los elementos con clase destacado y cambia su color de fondo y borde

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Selectores de ID

Se usan para seleccionar elementos más específicos.
Requiere asociar un nombre de clase a un elemento HTML, con el atributo id.
Luego, podemos establecer propiedades CSS, definiendo esa ID.

#destacado {
    padding: 20px;
}

Selecciona el elemento con ID destacado y cambia su padding

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Práctica 4

Comenzar

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Selectores descendientes

De forma más específica, también podemos seleccionar elementos en base a su relación.
Por ejemplo, que estén dentro de otros (descendientes).
Pueden estar formados por tipo, clase, ID o un combinación de todos ellos.

header nav {
    margin: 20px;
}

Selecciona los elementos nav que estén dentro de los elementos header...

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Selectores descendientes

#principal section p {
    line-height: 2;
}

Selecciona los elementos p que estén dentro de elementos section que estén dentro del elemento con ID principal.

h3.destacado a {
    color: gray;
}

Selecciona los elementos a que estén dentro de elementos h3 con clase destacado.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Selectores descendientes

footer nav.legal a {
    text-decoration:none;
}

Selecciona los elementos a que estén dentro de elementos nav que tengan la clase legal y que esté dentro de elementos footer

#mensaje p.destacado.final {
    font-weight: bolder;
}

Selecciona los elementos p con clases destacado y final y que estén dentro del elemento con ID mensaje.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Seleccionar en base a condiciones especiales

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Pseudo clases

Hemos visto como seleccionar elementos con selectores de tipo, clase e ID pero, ¿cómo seleccionamos un estado, posición o relación?.
Por ejemplo, cuando ponemos el ratón sobre un enlace, o cuando un elemento es el segundo de su tipo.
Para ello usamos las llamadas pseudo clases, ya que representan una pseudo selección.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

a:hover {
    text-decoration: underline;
}

Buscamos un estado especial en un escenario CSS, en base al estado.

Pseudo clases de estado

En este caso, a todos los enlaces (<a>) cuando el ratón se sitúa sobre ellos (:hover).

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

@juanwmedia - www.wmedia.es

article p:first-child {
    font-size: 1.5em;
}

Buscamos un estado especial en un escenario CSS, en base a la posición.

Pseudo clases de posición

En este caso, a todos los primeros párrafos (<p>) de hijos del elemento article.

Introducción al desarrollo Web Front-End

a:not(.destacado) {
    color: grey;
}

Buscamos un estado especial en un escenario CSS, en base a la relación.

Pseudo clases de relación

En este caso, a todos los enlaces (<a>) que no tengan la clase destacado.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Pseudo elementos

Otorgan mayor control y precisión a la hora de crear estilos CSS y composiciones HTML.
Se utilizan para definir partes específicas de un elemento HTML.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

h1::first-letter {
  color: red;
}

p::first-line {
  font-weight: bold;
}

Pseudo elementos tipográficos

Seleccionan la primera letra y primera línea, respectivamente.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

li::before {
  content: "⚠️"
}

h1::after {
  content: "👈"
}

Pseudo elementos de contenido

Añaden algo antes y/o después del contenido original del elemento al que se asocian.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Práctica 5

Comenzar

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Unidades CSS

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Tipos de dato

Todas las propiedades CSS aceptan un valor. Estos valores (data types) pueden ser de diferentes tipos: color, longitud, URL, "auto", etc.

p { color: red; }

div { background-color: #FF0000; }

li:last-of-type { margin: 100px; }

Propiedad

Valor

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Píxeles

Algunas propiedades CSS aceptan valores de longitud (width, padding, font-size, etc.). Estos valores se pueden expresar en diferentes unidades.
Una de las unidades absolutas más utilizadas son los píxeles.
Al expresar longitud en píxeles, el tamaño será fijo con independencia de la resolución y pantalla.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Píxeles

Los píxeles nos dan una precisión total, ya que son considerados device independent.
Un valor expresado en píxeles siempre aparecerá con el mismo tamaño tanto en un móvil como en una pantalla Retina o 5K.

section { width: 600px; }

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Porcentajes

Sacrifican precisión por polivalencia, ya que permiten crear layouts fluidos.
Cuando especificamos un porcentaje como data type en un elemento, este se calcula con base en la medida del elemento ancestro.
Por esta razón, para que funcione, esta medida en el elemento padre/madre debe estar especificada.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Porcentajes

Los porcentajes se suelen utilizar en propiedades como width, height, margin y padding.
Se pueden usar junto a unidades absolutas para declarar un rango de longitud.

header { 
  width: 90%; 
  min-width: 1280px;
  max-width: 1920px;
}

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

em y rem

Se trata de unidades CSS pensadas para trabajar con tipografía, aunque también se utilizan en otros elementos.
Tanto em como rem son cosideradas unidades relativas al tamaño tipográfico (font-relative).
Ambas unidades computan (se convierten) en valores absolutos de píxel, basados en el valor de font-size del documento.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

em

li {
  font-size: 2em;
}

El valor de em se calcula multiplicando en base al valor de font-size del elemento al que estamos accediendo.
Como el valor de font-size es heredable, la unidad em presenta el efecto compuesto.

2 x valor de font-size

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

rem

li {
  font-size: 2rem;
}

El valor de em se calcula multiplicando en base al valor de font-size del elemento root (HTML) del documento (root em).
El valor de font-size de HTML es influenciado por la configuración del tamaño tipográfico en el navegador.

2 x valor de font-size de HTML

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

em vs rem

Ante la duda es mejor usar rem, ya que no tiene efecto compuesto.
Usa unidades em para escalar el tamaño en elementos que dependan del valor de font-size de otros elementos (herencia).
Usa unidades rem en elementos donde quieras calcular tamaños en base únicamente al elemento root.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Color en CSS

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Color

Podemos expresar color en CSS de diferentes formas.
Algunas, como las palabras clave (keyword) ya las hemos visto y utilizado.
Además de las palabras clave disponemos de las funciones RGB, RGBA, HSLA y la notación hexadecimal para crear colores.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

keywords

div {
  background-color: goldenrod;
}

Se trata de identificadores que se corresponden con un valor de color.
Existe una gran cantidad de ellos.
Muy populares porque son fáciles de recordar.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Función RGB

div {
  background-color: rbg(255, 255, 255);
}

Los colores mostrados en soporte digital están basados en la escala RGB (rojo, verde y azul).
Para expresarlos, en CSS disponemos le la función RGB. Acepta valores de 0 a 255 en cada color/canal.

🤔

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Función RGBA

div {
  background-color: rbga(0, 255, 0, .5);
}

Funciona igual que rgb() pero añadiendo un canal extra de transparencia (alpha).
Una clara ventaja frente a otras formas de expresar color.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Función HSLA

div {
  background-color: hsla(41, 100%, 50%, 1)
}

Quiere decir Matiz, Saturación, Iluminación y Transparencia (hue, saturation, lightness, alpha).
Hue es un ángulo de 0º a 360º que cubre todo el espectro de color.
Saturation y lightness representan un valor de de 0 a 100 para la desaturación/satuación y oscuro/claro.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Escala hexadecimal

div {
  background-color: #14c7eb;
}

Una de las formas más comunes de expresar color en CSS.
Utiliza la mezcla aditiva de rojo, verde y azul que usamos con la función RGB.
Un color hexadecimal está compuesto por tres pares de símbolos hexadecimales (base 16)

@juanwmedia - www.wmedia.es

El # indica que el color se expresa en hexadecimal

Introducción al desarrollo Web Front-End

Escala hexadecimal

@juanwmedia - www.wmedia.es

#14C7EB=

10 dígitos

10 dígitos + 6 primeras letras del alfabeto

Rojo

Verde

Azul

Introducción al desarrollo Web Front-End

Escala hexadecimal

@juanwmedia - www.wmedia.es

Notación decimal (base 10)

(7x10) + (6x1)

Introducción al desarrollo Web Front-End

Escala hexadecimal

@juanwmedia - www.wmedia.es

Notación hexadecimal (base 16)

(7x16) + (6x1)

118

Introducción al desarrollo Web Front-End

Escala hexadecimal

@juanwmedia - www.wmedia.es

Notación hexadecimal (base 16)

(1x16) + (4x1)

Introducción al desarrollo Web Front-End

Escala hexadecimal

@juanwmedia - www.wmedia.es

Notación hexadecimal (base 16)

(12x16) + (7x1)

199

Introducción al desarrollo Web Front-End

Escala hexadecimal

@juanwmedia - www.wmedia.es

Notación hexadecimal (base 16)

(14x16) + (11x1)

235

Introducción al desarrollo Web Front-End

Escala hexadecimal

@juanwmedia - www.wmedia.es

Notación hexadecimal (base 16)

(15x16) + (15x1)

255

Introducción al desarrollo Web Front-End

@juanwmedia - www.wmedia.es

Escala hexadecimal

#FFFFFF=

Rojo

Verde

Azul

Introducción al desarrollo Web Front-End

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Escala hexadecimal

@juanwmedia - www.wmedia.es

Notación hexadecimal (base 16)

#7403AB

(7x16) + (4x1) = 116

(0x16) + (3x1) = 3

(10x16) + (11x1) = 171

Introducción al desarrollo Web Front-End

Incluso se puede usar transparencia con la escala hexadecimal.
Podemos añadir 2 nuevos símbolos hexadecimales para establecer la cantidad de transparencia (de 00 a FF).

Escala hexadecimal

div {
  background-color: #14c7ebFF;
}

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Cascada

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Especificidad

Cuando dos (o más) reglas CSS colisionan a la hora de seleccionar un elemento, el algoritmo de la cascada tiene en cuenta una serie de atributos de las reglas CSS en conflicto.
Entre otros, su valor o coeficiente de especificidad.
Para entenderlo, veamos una demo.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Especificidad

Para calcular el valor de especificidad, se tiene en cuenta el número de selectores CSS que componen la regla, así como su prioridad.
Se valoran 4 tipos de selector CSS y su prioridad es (de mayor a menor):
- Selector inline (atributo style).
- Selectores de ID.
- Selectores de clase y pseudo-clase.
- Selectores de tipo y pseudo-elementos.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Calculando la especificidad

@juanwmedia - www.wmedia.es

¿Estilos en línea?

nº de selectores ID

nº de selectores CLASE y pseudo-clases

nº de selectores TIPO y pseudo elementos

0, 0, 0, 0

Introducción al desarrollo Web Front-End

Calculando la especificidad

@juanwmedia - www.wmedia.es

h4 { color: red; }

.destacado { font-weight:bold; }

#titulo { font-size: 2em; }

<h4 style="color:blue;">Más info.</h4>

0, 0, 0, 1

0, 0, 1, 0

0, 1, 0, 0

1, 0, 0, 0

p { color: green !important; }

9, 9, 9, 9

Introducción al desarrollo Web Front-End

Calculando la especificidad

h3 p.texto ul#listado li a {}

#informacion p a.enlace

#cabecera #menu-ppal ul li a.actual {}

0, 1, 1, 5

0, 1, 1, 2

0, 2, 1, 3

De forma lógica los selectores de tipo son los menos específicos, siguiendo con los de clase, ID y por último los más específicos: en línea.

<h4 style="color:blue;">Más info.</h4>

1, 0, 0, 0

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

La cascada

Es el algoritmo que el navegador utiliza para decidir qué estilos CSS se aplican a los elementos, sobre todo cuando hay colisión entre ellas.
Cada declaración CSS tiene una serie de atributos (especificidad, origen, orden, importancia, etc).
El algoritmo de la cascada usa esos atributos y asigna una prioridad. Reglas con mayor prioridad tienen precedencia sobre reglas con menor prioridad.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Atributos de la cascada

Estos son los atributos que el algoritmo de la cascada tiene en cuenta, ordenados de mayor prioridad (o peso) a menor.

Origen e importancia.
Coeficiente de especificidad.
Orden de aparición.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Origen e importancia

Es el origen del las reglas CSS en conflicto:
- Author (los estilos que escribimos).
- User (personalizaciones, deficiencias visuales).
- User Agent (estilos por defecto).
Por defecto, el origen de autor tiene más importancia que el resto.
La importancia viene dada por el uso de !important, haciendo que el algoritmo le de prioridad.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Valor de especificidad

Característica que ya conoces. En este caso el algoritmo de la cascada examina los selectores en sí.
Las diferentes combinaciones de selectores CSS determinan un coeficiente de especificidad.
Aquellas reglas CSS con mayor valor de especificidad tienen mayor peso y prioridad que el resto.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Orden de aparición

Cuando dos reglas CSS tienen el mismo origen y valor de especificidad, el algoritmo de la cascada usa el orden de aparición para hacer su trabajo.
En este caso la última declaración CSS escrita gana.
Esto también se aplica a la hora de cargar estilos CSS externos. Los últimos pueden sobre escribir los anteriores.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Consideraciones

La cascada (y la especificidad) es uno de los conceptos menos entendidos. Fuente de multitud de problemas.
Si usamos sin control las partes más específicas de la cascada (estilos inline, ID's, !important) crearemos estilos CSS más complicados de mantener.
Por eso es buen tener en consideración los selectores con especificidad equilibrada y re-utilizables, como las clases.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Herencia CSS

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

¿Qué es la herencia?

Nos ayuda a evitar escribir reglas CSS duplicadas, aplicando automáticamente algunas propiedades CSS a todos los descendientes de un elemento.
Debes tener en cuenta que no todas las propiedades CSS son heredables.
Podemos forzar elementos a que hereden propiedades no heredables con el valor inherit.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Práctica 6

Comenzar

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Parte 3

JavaScript

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

¿Qué es JavaScript?

Introducido en 1995 por Brendan Erich.
No tiene nada que ver con Java.
ECMA es la organización que que regula los estándares JavaScript a través de "ECMAScript standard".

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

¿Qué es JavaScript?

JavaScript está en todas partes, con lo que dedicar tiempo a aprenderlo es una de las mejores decisiones.
Con JavaScript añadimos la lógica y la interacción a nuestros proyectos Web.
JavaCript viene incluido en todos los navegadores, así que podemos comunicarnos con él ahora mismo.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Tu Primer JS

Comenzar

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

JavaScript y HTML

Existen diferentes formas de usar JavaScript con HTML. Todas ellas pasan por utilizar una nueva etiqueta llamada script.
Gracias a script podemos incluir sentencias JavaScript que serán ejecutadas por el navegador a cargar el documento HTML que las contiene.
Podemos incluir JavaScript de forma inline.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

JavaScript y HTML

Sin embargo la forma más común y aceptada como mejor práctica es tener nuestro código JavaScript en archivos independientes.
Estos archivos deben tener la extensión .js (de JavaScript).
Podemos utilizar el atributo defer para ejecutar el código JavaScript después de haber cargado los elementos HTML.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

La consola JavaScript

La mayoría de errores JavaScript son (a proposito) transparentes para el usuario/a.
Si algo no funciona tal y como debería, la consola es el primer lugar en el que debes mirar.
A través de la consola, JavaScript nos indicará si hay algún problema, junto con información del mismo.
Vamos a hacer una prueba.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

La consola JavaScript

Podemos usar diferentes métodos del objeto console para estructurar y controlar mejor lo que ocurre en nuestro programa.
console.log, warn y error muestran información en la consola.
Con console.assert, por ejemplo, podemos mostrar un mensaje si una condición no se cumple.

@juanwmedia - www.wmedia.es

Introducción al desarrollo Web Front-End

Variables

@juanwmedia - www.wmedia.es

Si queremos utilizar un valor más de una vez, debemos asignarlo a una variable.
Una variable es un espacio donde puedes guardar información para luego recuperarla.
Podemos crear una variable con la palabra clave var, seguido de un identificador válido.

Introducción al desarrollo Web Front-End

Variables

@juanwmedia - www.wmedia.es

var cantidad = 100

palabra clave ("keyword")

identificador de la variable

operador de asignación

valor a almacenar

Introducción al desarrollo Web Front-End

Variables

@juanwmedia - www.wmedia.es

Para recuperar una variable basta con invocar su nombre, es decir, el identificador que le has dado.
Cuando invocas una variable, JavaScript comprueba que existe.
Si es así, interpola su valor en ese mismo lugar donde ocurre la invocación.
Si no existe entonces JavaScript nos arrojaría un error, visible desde la consola.

Introducción al desarrollo Web Front-End

Variables

@juanwmedia - www.wmedia.es

Podemos reasignar una variable a otro valor.

También podemos utilizar el valor de una variable para crear otra.

cantidad = 125

var restante = cantidad - 20

Introducción al desarrollo Web Front-End

Estructuras de control

@juanwmedia - www.wmedia.es

Una de las reglas principales de la programación es no asumir nada y estar preparado para todo.
Para ello JavaScript te permite usar estructuras de control para tomar decisiones.
La más popular y versátil es la estructura de control if.

Introducción al desarrollo Web Front-End

Estructuras de control

@juanwmedia - www.wmedia.es

if (edad >= 18) {
  // Validado
}

bloque de la estructura

condición a comprobar

Introducción al desarrollo Web Front-End

Estructuras de control

@juanwmedia - www.wmedia.es

Solo si la condición se evalúa como true se ejecuta el código dentro del bloque entre las llaves.
Podemos añadir otras cláusulas a la estructura de control para preguntar por otras condiciones, gracias a else...if.
Las cláusulas son mutuamente excluyentes, es decir, si una se evalúa como true, se ejecuta el bloque y no se continúa evaluando el resto, aunque hubiese alguna potencialmente verdadera.

Introducción al desarrollo Web Front-End

Estructuras de control

@juanwmedia - www.wmedia.es

var edad = 151

if (edad < 18) {
  // Prohibido
} else if (edad > 150) {
  // Imposible
}

cláusula con nueva condición a comprobar

Introducción al desarrollo Web Front-End

Estructuras de control

@juanwmedia - www.wmedia.es

Por último, con else podemos añadir una cláusula final que se ejecutará si ninguna de las anteriores ha sido evaluada como verdadera.

if (edad < 18) {
  // Prohibido
} else if (edad > 100 ) {
  // Imposible
} else {
  // Permitido
}

cláusula final a comprobar

Introducción al desarrollo Web Front-End

Introducción al desarrollo Web Front-End

Parte 1

¿Qué significa Front-End?

Introducción al desarrollo Web Front-End

Introducción al desarrollo Web Front-End

Lo que entiende el navegador

Introducción al desarrollo Web Front-End

HTML

La estructura

Introducción al desarrollo Web Front-End

CSS

El estilo/diseño

Introducción al desarrollo Web Front-End

JavaScript

La lógica

Introducción al desarrollo Web Front-End

Cliente / Servidor

Introducción al desarrollo Web Front-End

Introducción al desarrollo Web Front-End

Demo 🔥

Introducción al desarrollo Web Front-End

Parte 2

¿Qué es HTML?

Introducción al desarrollo Web Front-End

HTML

Lenguaje de Marcado de Hipertexto

Introducción al desarrollo Web Front-End

HTML

Lenguaje de Marcado de Hipertexto

Introducción al desarrollo Web Front-End

HTML

Lenguaje de Marcado de Hipertexto

Introducción al desarrollo Web Front-End

Estructura de HTML

Introducción al desarrollo Web Front-End

Introducción al desarrollo Web Front-End

Algunas etiquetas HTML

Introducción al desarrollo Web Front-End

<p>

Párrafo

Introducción al desarrollo Web Front-End

<h*>

Titular

Introducción al desarrollo Web Front-End

<ol> / <ul>

Listados ordenados o desordenados

Introducción al desarrollo Web Front-End

<span>

Delimitador inline

Introducción al desarrollo Web Front-End

<br>

Salto de línea

Introducción al desarrollo Web Front-End

Hiperenlaces

Introducción al desarrollo Web Front-End

Hiperenlaces

Introducción al desarrollo Web Front-End

Hiperenlaces

Introducción al desarrollo Web Front-End

Hiperenlaces absolutos

Introducción al desarrollo Web Front-End

Hiperenlaces relativos

Introducción al desarrollo Web Front-End

Estructura de una URL

Introducción al desarrollo Web Front-End

Imágenes

Introducción al desarrollo Web Front-End

<img/>

Introducción al desarrollo Web Front-End

<img/>

Introducción al desarrollo Web Front-End

<figure> & <figcaption>

Introducción al desarrollo Web Front-End

Estructurar contenido

Introducción al desarrollo Web Front-End

Semántica

Introducción al desarrollo Web Front-End

<section>

Introducción al desarrollo Web Front-End

¿Qué significa
Front-End?