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

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

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

Fuente: Upwork

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

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>

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

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

Introducción al desarrollo Web Front-End

Estructura de HTML

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>

Introducción al desarrollo Web Front-End

Algunas etiquetas HTML

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>

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>

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>

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>

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

Introducción al desarrollo Web Front-End

Hiperenlaces

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.

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

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.

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. 

Introducción al desarrollo Web Front-End

Estructura de una URL

https://youtube.com/juanwmedia

Protocolo

Servidor

Recurso

Introducción al desarrollo Web Front-End

Imágenes

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

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.

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.

Introducción al desarrollo Web Front-End

Estructurar contenido

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

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

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.

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.

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.

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.

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.

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.

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.

Introducción al desarrollo Web Front-End

Práctica 1

Introducción al desarrollo Web Front-End

Práctica 2

Introducción al desarrollo Web Front-End

Práctica 3

Introducción al desarrollo Web Front-End

Parte 3

¿Qué es CSS?

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

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.

Introducción al desarrollo Web Front-End

Añadir estilos

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.

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>

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>

Introducción al desarrollo Web Front-End

Seleccionar con CSS

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.

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

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

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

Introducción al desarrollo Web Front-End

Práctica 4

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

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.

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.

Introducción al desarrollo Web Front-End

Seleccionar en base a condiciones especiales

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.

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

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.

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.

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.

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.

Introducción al desarrollo Web Front-End

Práctica 5

Introducción al desarrollo Web Front-End

Unidades CSS

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

Introducción al desarrollo Web Front-End

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

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

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.

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

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.

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

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

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.

Introducción al desarrollo Web Front-End

Color en CSS

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.

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.

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.

🤔

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.

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.

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)

El # indica que el color se expresa en hexadecimal

Introducción al desarrollo Web Front-End

Escala hexadecimal

#14C7EB=

10 dígitos

10 dígitos + 6 primeras letras del alfabeto

Rojo

Verde

Azul

Introducción al desarrollo Web Front-End

Escala hexadecimal

Notación decimal (base 10)

76

(7x10) + (6x1)

76

Introducción al desarrollo Web Front-End

Escala hexadecimal

Notación hexadecimal (base 16)

76

(7x16) + (6x1)

118

Introducción al desarrollo Web Front-End

Escala hexadecimal

Notación hexadecimal (base 16)

14

(1x16) + (4x1)

20

Introducción al desarrollo Web Front-End

Escala hexadecimal

Notación hexadecimal (base 16)

C7

(12x16) + (7x1)

199

Introducción al desarrollo Web Front-End

Escala hexadecimal

Notación hexadecimal (base 16)

EB

(14x16) + (11x1)

235

Introducción al desarrollo Web Front-End

Escala hexadecimal

Notación hexadecimal (base 16)

FF

(15x16) + (15x1)

255

Introducción al desarrollo Web Front-End

Escala hexadecimal

#FFFFFF=

Rojo

Verde

Azul

Introducción al desarrollo Web Front-End

Introducción al desarrollo Web Front-End

Escala hexadecimal

Notación hexadecimal (base 16)

#7403AB

(7x16) + (4x1) = 116

(0x16) + (3x1) = 3

(10x16) + (11x1) = 171

Introducción al desarrollo Web Front-End

Escala hexadecimal

div {
  background-color: #14c7ebFF;
}

Introducción al desarrollo Web Front-End

Cascada

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.

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.

Introducción al desarrollo Web Front-End

Calculando la especificidad

¿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

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

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.

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.
  1. Origen e importancia.
     
  2. Coeficiente de especificidad.
     
  3. Orden de aparición.

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.

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.

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.

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.

Introducción al desarrollo Web Front-End

Herencia CSS

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.

Introducción al desarrollo Web Front-End

Práctica 6

Introducción al desarrollo Web Front-End

Parte 3

JavaScript

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

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.

Introducción al desarrollo Web Front-End

Tu Primer JS

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.

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.

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.

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.

Introducción al desarrollo Web Front-End

Variables

  • 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

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

  • 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

  • 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

  • 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

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

bloque de la estructura

condición a comprobar

Introducción al desarrollo Web Front-End

Estructuras de control

  • 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

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

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

By Juan Andrés Núñez

Introducción al desarrollo frontend

  • 15,277