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
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
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
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
- 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;
}
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
- 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.
- Origen e importancia.
- Coeficiente de especificidad.
- 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?
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