Resumen Curso Frontend

Diplomatura en
Programación
Frontend
Turno Mañana. Lunes y miércoles de 9 a 10.30 https://meet.google.com/dxg-cgrc-uoe
Turno Tarde. Lunes y miércoles de 16 a 17.30 https://meet.google.com/jvm-wvzy-ahk
Diplomatura en Programación Frontend | Introducción
Diplomatura Universitaria en Programación Frontend

La Diplomatura Universitaria en Programación Frontend es ofrecida por la Universidad
Nacional de Tierra del Fuego a personal de la empresa Newsan.
Está orientada a formar recursos humanos con una sólida base de conocimientos que les
permitan desempeñarse en el ámbito del desarrollo de software, con especialización en las
tecnologías que ocurren entre los usuarios y un sistema.
En particular la diplomatura se enfoca en el desarrollo de aplicaciones que requieren de una

capa visual y se comunican con otras a través de APIs -sigla en inglés que refiere a las
interfaces para la programación de aplicaciones.
¿Quiénes están a cargo del curso?
Federico Gonzalez Brizzio Nadia Ramos Abril Montaldo

Lic. en informática Lic. en informática Analista en Sistemas
Máster en Smartcity Profe en la UNTDF Estudiante Lic. en informática
Esp. en Gobierno Abierto Desarrolladora Fullstack
Profe en la UNTDF Panalsoft
Coordinador de docentes
Ezequiel Moyano Francisco Gonzalez Facundo Tenuta

Lic. en informática Lic. en Artes Audiovisuales Analista en Sistemas
Profe en la UNTDF Maestrando en Comunicación Estudiante Lic. en informática
Coordinador de la diplomatura Digital Interactiva Desarrollador Fullstack
Profe en la UNTDF Panalsoft
Temario
Módulo 1. HTML (lenguaje de marcas de hipertexto)
Módulo 2. CSS (lenguaje de hojas de estilos)
Módulo 3. Preprocesadores para CSS (SASS)
Módulo 4. Frameworks para CSS (Bootstrap)
Módulo 5. Accesibilidad y responsive design
Módulo 6. Trabajo integrador
Módulo 7. Javascript - EcmaScript
Módulo 8. TypeScript
Módulo 9. Frameworks para JS (Angular)
Módulo 10. Trabajo final
Breve historia de internet

Internetes un conjunto descentralizado de redes informáticas interconectadas, que utilizan la familia de
protocolos TCP/IP, lo cual permite a las redes físicas heterogéneas que la componen, trabajar mutuamente
para crear una red lógica de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la
primera conexión de computadoras, conocida como ARPANET, entre tres universidades en California
(Estados Unidos).
Uno de los servicios que más éxito ha tenido en internet ha sido la World Wide Web (www o simplemente
"la web"). Es habitual la confusión entre los términos internet y web, pese a que representan cosas distintas.
https://es.wikipedia.org/wiki/Internet
Breve historia de la web

La World Wide Web (La Web)es un sistema informático que funciona a través de Internet, por el cual se
pueden transmitir datos a través del Protocolo de Transferencia de Hipertextos (HTTP).
La Web fue desarrollada entre marzo y diciembre de 1989por el inglés Tim Berners-Lee con la ayuda del
belga Robert Cailliau, mientras trabajaban en el CERN en Ginebra, Suiza.
El primer servidor Web se encontraba en la oficina de Tim Berners-Lee en el CERN y fue puesto en línea el
6 de agosto de 1991. El número de servidores Web pasó de 26 en 1992 a 200 en octubre de 1995. En la
actualidad se estima que existen casi 1.000 millones en todo el mundo.
Actualmente Tim Berners-Lee dirige el W3C, organismo que establece los estándares de la web.
https://es.wikipedia.org/wiki/World_Wide_Web
https://es.wikipedia.org/wiki/World_Wide_Web_Consortium
Qué es un browser
Un navegador web es un software que permite el acceso a la Web y la visualización de documentos
multimedia (texto, imágenes, videos, etc.) también, permite visitar páginas web y hacer actividades en ella,
es decir, enlazar un sitio con otro, imprimir y más.
Los documentos que se muestran en un navegador pueden estar ubicados en la computadora donde está el
usuario y también pueden estar en cualquier otro dispositivo conectado a través de Internet y que tenga los
recursos necesarios para la transmisión de los documentos (un software servidor web).
Tales documentos, comúnmente denominados páginas web, poseen hiperenlaces o hipervínculos que enlazan
una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.
https://www.youtube.com/watch?v=xC9gh-R65Pk
El protocolo HTTP y su versión segura HTTPS

Hypertext Transfer Protocol (HTTP) es un protocolo para la transmisión de documentos hipermedia, como
HTML. Fue diseñado para la comunicación entre los navegadores y servidores web. Sigue el clásico modelo
cliente-servidor, en el que un cliente establece una conexión, realizando una petición a un servidor y
espera una respuesta del mismo.
Es el protocolo que utilizan los Browsers para mostrar la información de una página web.
La versión segura HTTPS hace uso de la capa SSL para garantizar que la información transmitida
entre un cliente y un servidor, no pueda ser leída por los servidores intermedios ya que viaja
encriptada y se decodifica una vez que llega al servidor destino.
https://developer.mozilla.org/es/docs/Web/HTTP
¿Backend, Frontend?
El desarrollo de software en la actualidad está
ligado a servicios que generalmente están
basados en internet (o en alguna red).
A lo largo del siglo XXI la programación se fue

organizando para optimizar recursos
tecnológicos, pero también para ayudar a separar
tareas entre los desarrolladores.
El Frontend refiere a la capa con la que

interactúan los usuarios y que generalmente
ocurre en su dispositivo, mientras que el
Backend ocurre en el servidor, donde los
recursos están protegidos para que ninguna
persona sin autorización pueda acceder.
Infografía: EDteam
Es lo que ven los usuarios

Poco repetitivo
Al menos 3 lenguajes
Fronten Múltiples herramientas
d Múltiples dispositivos
20% del trabajo
No lo ven los usuarios

Suele ser repetitivo
Backen Normalmente 2 lenguajes
Pocas herramientas
d Un dispositivo
80% del trabajo
Qué es HTML y su importancia en la web

El Lenguaje de Marcas de Hipertexto es el componente más básico de la Web. Define el significado y la
estructura del contenido de una página.
"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio
web o entre sitios web. Los enlaces son un aspecto fundamental de la Web.
HTML es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo,
sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos.
Podría decirse que HTML no es un lenguaje de programación, sino que es un lenguaje de marcado, que
define la estructura de un contenido.
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
Estructura del HTML

<!DOCTYPE html> La etiqueta Doctype indica, principalmente, en qué versión de HTML está hecho el
<html lang="es"> contenido de la página para que el browser sepa cómo interpretarlo
<head>
Información técnica
<meta charset="UTF-8">
para el browser (meta
<meta http-equiv="X-UA-Compatible" content="IE=edge"> datos)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título que se verá en la pestaña del browser</title>
</head>
<body>
Contenido que se verá
<p>Un ejemplo de un párrafo</p>
en la página
</body>
</html>
Estructura de los elementos HTML

Una etiqueta HTML (también se les puede decir elemento o marca) tiene la siguiente estructura:
<etiqueta atributo="valor" otros-atributos="valor"> contenido </etiqueta>
Dependiendo de la etiqueta, generalmente los atributos son opcionales y no siempre necesarios.
A su vez, hay etiquetas muy simples que no tienen contenido dentro y sólo se representan con la etiqueta y
sus atributos, por ejemplo:
<img src="imagen.jpg">
Este tipo de etiquetas se llama "empty elements" (etiquetas vacías).
https://developer.mozilla.org/es/docs/Glossary/Empty_element
Elementos de bloque y de línea

En HTML, las etiquetas pueden dividirse en dos grandes tipos: en bloque o en línea. Un elemento en bloque
ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Los elementos de bloque
pueden contener dentro otros elementos de bloque y también elementos de línea.
Para explicarlo con un ejemplo, la etiqueta <p> … </p> es una marca de bloque.
A cambio, los elementos en línea, son más simples y sólo pueden contener dentro otros elementos en línea,
aunque no es lo habitual.
La etiqueta <strong> … </strong> se usa para establecer negritas y es un elemento de línea.

La etiqueta <img> es también de línea y mucho más simple, porque no se abre y se cierra.
https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements
https://developer.mozilla.org/es/docs/Web/HTML/Inline_elements
Elementos básicos del body

El cuerpo del HTML es el espacio donde se desarrolla la información de una página. Existen marcas para
desarrollar contenidos, mientras que hay otras marcas que se usan para estructurarlos. Por ejemplo, las
etiquetas a continuación se usan para desarrollar contenidos:
<h1> Para título principal </h1>

<h2> Para subtítulos </h2>
<p> Contenido de un párrafo que tiene una <strong> palabra </strong> en negritas </p>
Mientras que estas etiquetas son estructurales y agrupan contenidos:
<section> … </section>
<article> … </article>
<div> … </div>
Títulos y párrafos
En HTML existen seis niveles de títulos: H1 hasta H6 cada nivel representa una importancia jerárquica para
el contenido, siendo H1 el título principal de la página.
<h1> título de la página </h1>
Los párrafos se escriben con la etiqueta <p> y habitualmente pueden contener dentro, palabras en negritas e
itálicas, como así también imágenes y saltos de línea, como se muestra a continuación:
<p>This is<br>a paragraph<br>with line breaks.</p>
https://www.w3schools.com/html/html_headings.asp
https://www.w3schools.com/html/html_paragraphs.asp
Listas ordenadas y no-ordenadas

HTML permite establecer contenidos en forma de items, que pueden estar numerados (listas ordenadas) o
simplemente tener un ícono sin numerar (listas no-ordenadas)
La etiqueta para las listas ordenadas es <ol>

La etiqueta para las listas ordenadas es <ul>
Los contenidos (los ítems) de la lista, se etiquetan con <li>
<ol> <ul>
<li>Primer elemento de la lista</li> <li>Un elemento de la lista</li>
<li>Segundo elemento de la lista</li> <li>Otro elemento de la lista</li>
<li>Tercer elemento de la lista</li> <li>Otro elemento de la lista</li>
</ol> </ul>
Itálicas y negritas
Dentro de un párrafo se pueden marcar palabras o frases con itálicas y también con negritas.
La marca <em> se utiliza para itálicas (antes se usaba <i>)

La marca <strong> para negritas (antes se usaba <b>)
<p>Este es un párrafo con una palabra en <em>itálicas</em> y otra en <strong>negritas</strong>.</p>
Las marcas de HTML también se pueden cortar en el código sin que esto afecte su funcionamiento:
<p>Este es un párrafo
con una palabra en
<em>itálicas</em>
y otra en <strong>
negritas</strong>
.</p>
Hipervínculos (externos, internos y target)

Los hipervínculos (también llamados links) son una de las marcas más antiguas y más importantes del HTML, porque
le otorgan la navegabilidad y el concepto de "hiper" a un documento plano. Su estructura es la siguiente:
<a href="direccion-destino" target="donde-se-abre-opcional"> texto a mostrar </a>
Por ejemplo, este hipervínculo abre la web de la Universidad Nacional de Tierra del Fuego:
<p> Este párrafo tiene un link para abrir la

<a href="https://www.untdf.edu.ar/"> Web de la Universidad </a>
y ese link se abrirá en la misma pestaña que se esté navegando </p>
https://www.w3schools.com/html/html_links.asp
Principales tamaños de pantalla para distintos dispositivos
3840 x 2160 4K (monitores y grandes tv)

1920 x 1080 Full HD (monitores y tv)
1366 x 768 HD (notebooks)
1280 x 720 HD (notebooks)
1440 x 900 HD (macbooks)
768 x 1024 Tablets (ipad) en vertical
1024 x 768 Tablets (ipad) en horizontal
375 x 667 Teléfonos en vertical
375 x 812 Teléfonos en vertical
Nota: se considera el pixel simple,

sin tener en cuenta DPI.
Principales formatos de imagen para la web

PNG: transparencia perfecta, poca compresión
JPG / WEBP: para fotos
BMP: no es para web
GIF: transparencia limitada, animaciones, pocos colores
EPS: no es para web
SVG: vectorial, escalable, transparencia perfecta
PDF: sólo para descargas

Etiquetas HTML más comunes

Al trabajar con HTML hay marcas que se usan frecuentemente, algunas se usan para estructurar contenidos y otras para
representar esos contenidos en concreto.
Por ejemplo, las marcas div, span, header, article, section y footer , son muy usadas para estructurar (no
confundir la etiqueta header con head).
Por otra parte, los elementos h1, h2, p, ul, ol, li, img, video, audio, select, input y table , están
entre los típicos (y muy necesarios) para representar contenidos.
Por supuesto estas no son las únicas marcas, a continuación se ofrecen dos resúmenes más amplios:
https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf
https://www.w3schools.com/tags/default.asp
Etiquetas para carga de información

Una de las características más importantes de la web ha sido permitir que los desarrolladores creen aplicaciones y
gracias a eso, muchos de los sistemas que antes estaban diseñados para instalarse (y por ende un poco aislados en
términos de conectividad) ahora pueden desarrollarse directamente para web.
Las principales marcas que HTML ofrece para que un usuario cargue contenidos, son:
<input type="text" name="unNombre" value="valor predeterminado" placeholder="texto de ayuda">
<input type="number" name="unNombre" value="345" placeholder="texto de ayuda">
https://www.w3schools.com/html/html_form_attributes.asp
https://www.w3schools.com/html/html_forms.asp
Enviar un archivo al servidor

La etiqueta input es muy versátil y así como se usa para escribir, también se puede usar para permitir al usuario elegir
un archivo de su dispositivo y "subirlo" a un servidor.
<input type="file" name="unNombre" multiple>
https://www.w3schools.com/html/html_form_attributes.asp

Input también puede usarse para crear un conjunto de "check-boxs" para que el usuario pueda activar/desactivar
distintas opciones para una pregunta.
Los checkbox se escriben con un nombre distinto cada uno para representar la variable que los identificará,
habitualmente se escriben seguidos de la etiqueta "label" que se usa para indicar un título de ayuda para el usuario.
También pueden predeterminarse para estar (o no) checkeados al inicio.
<input type="checkbox" id="nombre1" name="nombre1" value="Valor" checked>

<label for="nombre1"> Texto de ayuda</label><br>
<input type="checkbox" id="nombre2" name="nombre2" value="Valor" checked>

<label for="nombre2"> Texto de ayuda</label><br>
Al agregar el atributo id se facilita que el usuario toque el texto de ayuda y se active/desactive el check.
https://www.w3schools.com/html/html_forms.asp

Existen marcas de HTML que facilitan la selección de opciones. Checkbox, select y radio son las más comunes. A
continuación se dan ejemplos de select y radio.
Radio es similar a checkbox, la principal diferencia es que radio permite elegir una sola opción por vez y en el atributo
"name" debe usarse siempre la misma variable.
<input type="radio" id="opcion1" name="unNombre" value="Opción 1">

<label for="opcion1">Opción 1</label><br>

<label for="opcion2">Opción 2</label><br>

<label for="opcion3">Opción 3</label>
https://www.w3schools.com/tags/att_input_type_radio.asp

La marca Select es funcionalmente similar a radio, pero se trata de una etiqueta totalmente distinta.
<select name="unNombre" multiple>

<option value="valor1">Opción 1</option>
<option value="valor2" selected>Opción 2</option>
</select>
https://www.w3schools.com/tags/tag_select.asp

Finalmente uno de los elementos básicos para la carga de información es la etiqueta textarea, que se usa para escribir
texto libremente (mientras que la marca input sirve para una sóla línea de texto).
<textarea name="unNombre" placeholder="texto de ayuda">

Aquí puede escribirse un texto predeterminado.
</textarea>
https://www.w3schools.com/tags/tag_textarea.asp
La etiqueta table (y cuándo usarla)

Las tablas son de gran ayuda para presentar grandes volúmenes de información, pero no deben ser usadas en cualquier
circunstancia, simplemente porque a veces es mejor representar la información con otros métodos. Una forma fácil de
identificar cuándo es útil mostrar datos con tablas es la siguiente:
- si tenemos una estructura de datos repetitiva, con al menos 20 registros.
- si tiene sentido ordenar la info bajo algún criterio (precio, nombre, edad, etc.)
- si no mostraremos más de 4 o 5 campos como máximo.
- si los campos a mostrar tienen sólo texto y los textos son cortos.
Una tabla bien formada tiene esta estructura:

- Encabezado (thead)
- Cuerpo (tbody)
- Pie (tfoot)
Si no se especifican esos campos, el browser interpretará al contenido como tbody.

https://www.w3schools.com/tags/tag_thead.asp
La etiqueta table (y cuándo usarla)

<table> Esta tabla es similar a la anterior, pero no especifica
<thead>
explícitamente bloques para títulos, contenido ni pie, por lo
<tr>
<th>Título para columna 1</th> tanto el browser entenderá que todo es contenido.
<th>Título para columna 1</th>
</tr> <table>
</thead> <tr>
<tbody> <td>Primer contenido para columna 1</td>
<tr> <td>Primer contenido para columna 2</td>
<td>Primer contenido para columna 1</td> </tr>
<td>Primer contenido para columna 2</td> <tr>
</tr> ...
<tr> </tr>
... </table>
</tr>
</tbody>
<tfoot>
<tr>
<td>Pie para columna 1</td>
<td>Pie para columna 2</td>
</tr>
</tfoot>
</table>
Ejercicios interactivos para aprender HTML

El sitio web W3 Schools ha publicado una serie de ejercicios que facilitan el aprendizaje de HTML, que pueden
utilizarse para ampliar lo aprendido en clases.
En el bloque blanco debe escribirse la respuesta. El botón negro mostrará la respuesta correcta y el botón verde se usa
para evaluar la respuesta escrita. https://www.w3schools.com/html/exercise.asp
Trabajo práctico de introducción al HTML

En cualquier sistema informático existen operaciones (y pantallas asociadas) que sirven para cargar información, para
mostrarla o listarla. Este primer trabajo evolucionará a lo largo de todo el curso y supone que estamos desarrollando un
sistema para supermercados.
El trabajo se desarrollará de forma grupal y cada grupo subirá sus archivos a la carpeta de Google Drive compartida
para tal fin.
Por razones prácticas, en las clases se presentarán

las principales herramientas de cada lenguaje
y se facilitará documentación para extender su
conocimiento, tanto a nivel conceptual como
a través de los trabajos prácticos.
https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf
https://www.w3schools.com/tags/default.asp
Trabajo práctico de introducción al HTML

En el sistema para supermercados se espera desarrollar inicialmente tres pantallas:
- carga.html
- ficha.html
- lista.html
Carga servirá para que una persona encargada de productos pueda cargar la información de un producto, deberá
contener los siguientes campos: titulo (input), imágen (file), tipo de producto (select o radio), precio (input),
descripcion (textarea), características (check)
Ficha se usará para que un cliente conozca los detalles de un producto: titulo (h1), imagen (img), tipo de producto (h2),
precio (p), descripción (varios p), características (ul)
Lista será una tabla con las siguientes columnas para mostrar un resumen de cada producto cargado: tipo de producto,
título, precio, características (separadas por comas)
Las etiquetas audio y video

La última versión de HTML permite trabajar de forma nativa con audio y con video, las etiquetas son muy simples de
usar:
<audio controls>
<source src="audio-formato.ogg" type="audio/ogg">
<source src="audio-formato.mp3" type="audio/mpeg">
Texto alternativo para indicar que el browser no soporta la etiqueta audio.
</audio>
https://www.w3schools.com/html/html5_audio.asp
Las etiquetas audio y video

De manera similar a la etiqueta audio, incorporar video es súmamente sencillo:
<video width="320" height="240" controls>

<source src="video-formato.mp4" type="video/mp4">
<source src="video-formato.ogg" type="video/ogg">
Texto alternativo para indicar que el browser no soporta la etiqueta video.
</video>
https://www.w3schools.com/html/html5_video.asp
Formatos de audio y video (más allá de la web)

Tanto el audio como el video tienen distintos formatos para guardar los archivos (similar a lo que vimos con imágenes
como png, jpg, etc.) y cada formato tiene sus ventajas y desventajas.
Los formatos WAV y AVI (para audio y video respectivamente) son formatos de base, sin compresión y nunca deben ser
usados en web ya que ocupan muchísimo espacio y ancho de banda.
Los formatos de video más comunes son: avi, wmv, mov, mp4, ogg, mkv, mpg, webm
https://www.adobe.com/ar/creativecloud/video/discover/best-video-format.html
Los formatos de audio más comunes son: wav, pcm, ogg, aac, mp3, ogg, webm
https://www.adobe.com/ar/creativecloud/video/discover/best-audio-format.html
Los formatos marcados con amarillo son los recomendados para web.
Webm todavía no es un estándar, pero va en vías de serlo https://caniuse.com/?search=webm

El problema del ancho de banda, la solución: el stream

El audio y el video -principalmente este último- ocupan mucho espacio en disco y aún en la actualidad, las conexiones
a internet todavía son lentas. Esto significa un problema a la hora de navegar y ver videos, ya que si el browser debe
esperar a que el archivo se descargue por completo antes de poder reproducirlo, los sitios web como youtube o
plataformas como netflix no podrían existir.
Como ejemplo, una película en FullHD (no hablamos de 4k) de 90min de duración ocupa alrededor de 4GB en formato
mp4 con una calidad de compresión moderada. Esto significa que una persona debería esperar a que se descarguen esos
4GB antes de empezar a verla.
El stream es una técnica que permite comenzar a reproducir audio y video a medida que el contenido se va
descargando, sin tener que recibirlo por completo primero.
Los formatos típicos de video para web, como mp4 y mp3 no soportan streaming sin un servidor especial, por lo tanto
no se recomienda usar estos formatos con la etiqueta video para archivos de gran duración. A cambio, puede usarse ogg
y webm que sí permiten stream (parcialmente).
Youtube no es video, es un sitio web que ofrece videos

Diversos servicios en la web resuelven el problema del stream con servidores especializados que tienen capacidad de
entregar diferentes calidades de video de manera dinámica, según la velocidad de conexión soportada por cada usuario.
Youtube utiliza esa técnica y por eso muchas veces es conveniente subir primero un video a dicha plataforma y luego
incorporarlo a un sitio web.
En este caso, lo que se estará incorporando no es un video, sino una aplicación completa que Youtube provee al
solicitarle el video, con player incluido, capacidad de stream, etc.
La etiqueta iframe se usa no sólo para esto, sino para "incrustar" contenido de cualquier sitio web en otro.
<iframe width="560" height="315" allowfullscreen src="https://www.youtube.com/embed/mNbnV3aN3KA">

</iframe>
Evolución del HTML a lo largo de 30 años
1991. Tenía definidas apenas 18 marcas, 1997. La web se populariza y ésta es la

muchas de las cuáles todavía se usan. Sólo primera versión masiva a nivel mundial.
HTML1 estaba pensado para soportar texto y links. HTML4 Muchas webs en la actualidad todavía usan
http://info.cern.ch/hypertext/WWW/MarkUp/Tags.html HTML4 en su código.
https://en.wikipedia.org/wiki/HTML
1995. Introduce soporte para tablas, 2014. La web se consolida y se formaliza, los
imágenes y formularios (input text, file, fabricantes de browsers comienzan -realmente- a
HTML2 checkbox, radio). Empieza a permitir HTML5 respetar el estándar y participan activamente en la
manejar diferentes idiomas (charset). W3C. Crece el soporte para dispositivos
https://datatracker.ietf.org/doc/html/rfc1866 (teléfonos, tablets). Se fortalece el uso de marcas
semánticas y la accesibilidad en sus diferentes
1997. Primera versión publicada bajo la facetas. Se incorpora soporte nativo para video,
supervisión de la W3C. Se estructura con audio, png, svg. Se promueven los patrones de
HTML3 HEAD y BODY, permite incorporar CSS y diseño y los microservicios (webservices).
https://en.wikipedia.org/wiki/HTML5
Javascript (que todavía no estaban muy
desarrollados).
https://www.w3.org/TR/2018/SPSD-html32-20180315/
Browsers, versiones y dispositivos

Al desarrollar para web deben considerarse ciertas condiciones -y como desarrolladores, saber aceptarlas:
1. No debemos restringir quién usa qué (browser).
2. No debemos restringir con qué se navega (dispositivo).
3. No podemos conocer qué capacidades / limitaciones tendrá el usuario (tecnológicas, cognitivas, etc.)
En resumen: gracias a que HTML es un estándar y en la última década hubo un esfuerzo mundial de parte de los
fabricantes de browsers para respetarlo, al desarrollar para la web es importante conocer el estándar y también
respetarlo. No se debe asumir que los usuarios usarán windows, mac o linux (sino que deben tener libertad de usar lo
que quieran), lo mismo si navegan con Chrome, Internet Explorer, Safari, Edge, Firefox, Opera, etc. Los usuarios
pueden usar una computadora, una tablet, un teléfono.. el dispositivo puede ser nuevo o viejo, estar o no actualizado,
etc.
La clave está en aceptar que la web es diversidad y desarrollar considerando tal condición.
Mercado de los principales Browsers a nivel global desde 2009 a 2022

Mercado de los principales Browsers en Argentina desde 2009 a 2022

Versiones de Browsers en Argentina desde 2017 a 2022

Lo último no siempre es lo mejor

Para cerrar esta sección del curso, es importante destacar que siempre es importante conocer qué marcas son seguras
para usar y cuáles no son parte del estándar. Todos los elementos HTML vistos durante las clases son seguros y pueden
usarse sin problemas de compatibilidad, tanto ahora como en el largo plazo.
El sitio web Can I Use? (¿puedo usarlo?) sirve para verificar qué compatibilidad tienen la distintas marcas de HTML (y
también de CSS) y es de gran utilidad al momento de desarrollar sitios y aplicaciones correctas desde un punto de vista
técnico, pero también respetuosas de los usuarios y mantenibles en el tiempo.
https://caniuse.com/
Revisión de las principales marcas de HTML

https://drive.google.com/file/d/1LtfD-x0AQcDI2pJzRdgRpIqgdrkuSw9h/view?usp=sharing
Introducción a CSS
Como se ha visto anteriormente durante el curso, los browsers comprenden 3 lenguajes de base: HTML, CSS y
Javascript. Una vez determinado el contenido de una página web (expresado con marcas de HTML) es común usar CSS
para establecer la forma en que se presentará visualmente la información.
Las "hojas de estilo en cascada" (así es como se llama a la sigla CSS en inglés: stylesheet) están diseñadas para
establecer definiciones sobre cómo se mostrará la información, no solo en pantalla sino también en otros formatos
como proyectores, impresoras, etc.
CSS "viste visualmente a los contenidos", por lo tanto sólo tiene sentido acompañando a una página HTML, ya que sin
contenidos a los que vestir, pierde su propósito.
Existen diferentes versiones de CSS, si bien se está trabajando en v4, la última versión estable es v3.
Cómo usar HTML con CSS

HTML es la base de cualquier página y las hojas de estilo se "cargan" dentro del código HTML. Existen 3 formas de
incorporar CSS en HTML:
inline: se utiliza el atributo style dentro de los elementos HTML.

<h1 style="color: red;">Este es un título rojo</h1>
head: se utiliza la etiqueta <style> en el head de un documento HTML.

<style> h1 { color: red; } </style>
archivo externo: se utiliza la etiqueta <link> para cargar un CSS definido en un archivo externo.
<link rel="stylesheet" href="estilos.css">
Si bien todas las opciones son válidas y cada una tiene sentido en momentos distintos, lo típico y recomendable es usar
la etiqueta <link> para cargar un CSS externo. Esto permite reutilizar las definiciones en distintos HTML y también
facilita un código fácil de mantener a lo largo del tiempo.
Selectores básicos
CSS está pensado para "seleccionar" elementos a los que se les aplicará un estilo. Las tres formas básicas de
seleccionar elementos son: con su etiqueta, con el atributo id, con el atributo class.
<style> <body>
h1 { <h1>Todos los títulos h1 serán rojos</h1>
color: red; <p class="destacado">Este párrafo será azul</p>
font-size: 18pt; <p id="importante">Este párrafo será verde</p>
} <h1 class="destacado">¿Qué color tendrá este título?</h1>
<p id="importante" class="destacado">¿Y este párrafo?</p>
.destacado { </body>
color: blue;
}
#importante {
color: green;
}
</style>
Modelo de caja
CSS está pensado por bloques rectangulares, cada bloque tiene 4 lados establecidos en el siguiente orden: arriba
(top), derecha (right), abajo (bottom), izquierda (left). Cada lado tiene 3 propiedades básicas: margen (margin),
borde (border), relleno (padding).
Por ejemplo, el selector .rectangulo-verde definido a continuación establece que los elementos de HTML que
tengan asignado el atributo class="rectangulo-verde" se verán como un rectángulo con borde verde, fondo verde
claro, tendrán un margen de 30 píxeles y un relleno de 20 píxeles.
<style>
.rectangulo-verde { Ver ejemplo HTML + CSS en:
background-color: #F0FFBE; drive/ramos-gonzalez/
border: 3px solid #9AB445;
padding: 20px;
margin: 30px;
}
</style>
Revisión de las principales propiedades y selectores de CSS

https://drive.google.com/file/d/1-hFdPWd2WeSdGdFtCaBenSnG0rorF8VW/view?usp=sharing
Trabajo práctico de introducción al CSS

1. Continuar el trabajo práctico anterior hecho con HTML y jugar con los estilos CSS vistos durante la clase.
Se recomienda:
- probar algunos ejemplos de estilos inline
- probar algunos ejemplos de estilos con <style>
- hacer el resto del trabajo (la mayor parte) en un archivo aparte cargándolo con <link>
2. Utilizar el código de esta página:

https://drive.google.com/file/d/10EDFrtAdsWEbpz25-9DFx7lkblp8xHSm/view?usp=sharing
que tiene una versión resumida del HTML publicado en https://es.wikipedia.org/wiki/Galileo_Galilei
Utilizar los estilos aprendidos para darle forma al contenido de dicha página. Se recomienda incorporar links internos
para el índice y también agregar links externos a otras páginas de interés en Wikipedia.
Nota: es un trabajo de aprendizaje y todavía no se vieron muchas cosas importantes, no se evalúa el trabajo final
obtenido, sino que lo que se busca es probar las marcas enunciadas en clases.
Tipografías en el diseño
Un aspecto importantísimo del diseño son las tipografías (o fuentes). Permiten personalizar nuestro trabajo con letras
elegantes y atractivas, una buena selección tipográfica es clave en cualquier diseño.
¿ Serif o no Serif ?
Históricamente las tipografías se han dividido en las de tipo serif (con adornos) y las de tipo sans-serif (sin adornos).
Por ejemplo, la tipografía Arial es de tipo sans-serif, mientras que la

tipografía Times New Roman es de tipo serif . Se dice que las de tipo serif son
más fáciles de leer impresas y las sans-serif son más fáciles de leer en pantallas, aunque hay una gran discusión
alrededor de eso.
Tipografías en el diseño
Otro atributo importante es si la tipografía es monoespaciada o dinámica.
Artículo muy completo recomendado

https://lenguajecss.com/css/fuentes-y-tipografias/tipografias/
Tipografías en la web
Las tipografías en la web tienen una gran limitación: dependemos de que estén instaladas previamente en la
computadora (o dispositivo que sea) de quien esté navegando. Esto presenta problema, porque es imposible saber si una
persona tiene instalada o no cierta tipografía… y más difícil es suponer que todas las personas que naveguen, la tendrán
instalada.
Así, las tipografías en la web han sido siempre complicadas.
Los sistemas operativos como windows, macos y linux, tienen sistemas tipográficos diferentes y no siempre son
compatibles unos con otros. Los formatos tipográficos TTF son comunes en nuestras computadoras, pero no funcionan
bien en la web. El formato WOFF es el más recomendado, igualmente existen aspectos inherentes a los derechos de
autor de las tipografías o su precio -ya que muchas nos son gratuitas y está prohibido distribuirlas.
https://joanmorci.com/tipografia-para-web/
https://lenguajecss.com/css/fuentes-y-tipografias/tipografias-externas/
Servicios tipográficos
En los últimos años han surgido servicios que ofrecen tipografías seguras, que se verán correctamente en cualquier
dispositivo. Algunos servicios como google fonts son gratuitos, otros no.
https://fonts.google.com/
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
p { font-family: 'Lato', sans-serif; }

</style>
Colores en la web
Al diseñar para internet se pueden representar colores en diferentes formatos. Si bien se escriben distintos, todos
terminan ofreciendo la misma cantidad de opciones: 16 millones de colores posibles.
Físicamente los colores se pueden crear por adición o substracción. Al mezclar luces, se crean colores por adición. Al
mezclar pigmentos, por substracción.
Así, si se mezcla témpera (que es un pigmento) de color azul con otra amarilla, se crea el verde.
Pero si se mezcla azul y amarillo con luces (dos linternas con papel celofán) se crea luz blanca.
Los píxeles de las pantallas son luces, entonces para trabajar en la web, tenemos que olvidar los colores primarios
que nos enseñaron en la escuela… y aprender los nuevos: rojo, verde, azul.
Colores en la web
La representación más común para el color luz es el RGB (red, green, blue) y se escribe así:
RGB(xxx, xxx, xxx) donde xxx es un número entre 0 y 255 que representa cuánto de cada color se usará.
Por ejemplo, RGB(0, 255, 0) representa al verde puro.

Mientras que RGB(128, 0, 128) es un violeta formado por un poco de rojo y otro poco de azul.
La combinación de los tres colores entre 0 y 255 nos da 16 millones de posibles colores.
Otra forma de representar colores en la web es usar la codificación hexadecimal, compuesta también por tres colores
RGB, pero expresados con xxyyzz donde x, y, z son "números" que pueden ir desde 0 a F.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
#00FF00 representa el mismo verde que RGB(0, 255, 0)

#880088 representa el mismo violeta que RGB(128, 0, 128)
Conceptos: https://htmlcolorcodes.com/es/
Color picker para Chrome: https://chrome.google.com/webstore/detail/live-color-picker/ocfboephblnapfbccjigejhblhkpgflj
La web no se trata de obligar, sino de estándares y opciones

Durante años el desarrollo web estuvo opacado por programadores que, por su comodidad o desconocimiento,
obligaban a los usuarios a utilizar ciertos browsers para poder navegar correctamente. Esta práctica va en contra de lo
que debería ser un buen desarrollo web. La palabra diversidad es una guía para el presente y el futuro de la web. Los
usuarios navegan con diferentes dispositivos, usan distintos browsers, tienen diferentes velocidades de conexión,
hablan distintos idiomas, provienen de diferentes culturas, pueden (o no) ver todos los colores, pueden (o no) escuchar
un audio o video, pueden (o no) ver lo que está escrito en la pantalla, tienen diferentes grados de compresión, etc.
efox
Desarrollado para usar con Mozilla Fir
Este sitio web funciona mejor con Internet Explorer
Recomendamos navegar co
n Google Chrome
Conclusiones:
No se trata de hacer un
acceso especial para
"personas con capacidades
diferentes", simplemente se
trata de hacer un acceso que
funcione correctamente para
cualquier persona.
Es más práctico, es más

barato, es más fácil de
mantener y al haber un sólo
acceso pensado para la
diversidad, no le estamos
recordando permanentemente
a alguien "que es diferente".
Accesibilidad web
La W3C establece una serie de recomendaciones que se organizan en niveles y principios a partir de los cuales se
pueden garantizar ciertos grados de accesibilidad en la web.
Por otra parte, hay aspectos del diseño que deben considerarse y que tienen que ver con:
- usar marcas semánticas
- agregar labels y placeholders a los elementos de un formulario
- usar contraste de color
- escribir links descriptivos
- mantener la opción de zoom activa en el viewport
- proveer textos alternativos para las imágenes
- el color no debe determinar la comprensión
- subtítulos para audio y video
https://moritzgiessmann.de/accessibility-cheatsheet/
Niveles y principios de la accesibilidad web

La W3C establece 4 principios para la accesibilidad, son conceptos que deben tenerse en cuenta:
Perceptible: un sitio web o aplicación web debe presentar la información y los componentes de su interfaz de una
manera que todas las personas puedan reconocerla y utilizarla, independientemente de cómo consuman el contenido o
accedan a ella.
Operable: todos los componentes de la interfaz de usuario deben ser operables.
Comprensible: la información y el manejo de la interfaz debe ser comprensible.
Robusto: el contenido debe ser lo suficientemente robusto como para ser interpretado por una amplia variedad de
aplicaciones de usuario, incluyendo ayudas técnicas.
La W3C establece 3 niveles de accesibilidad, deben entenderse como estándares de calidad. Cada nivel representa un
grado mayor de accesibilidad con pautas claras que deben cumplirse: A, AA y AAA.
Nivel A de accesibilidad web

El nivel A de accesibilidad debe entenderse como mínimo y obligatorio, no debe desarrollarse un sitio o aplicación web
que no compla con nivel A. Es importante considerar que para cumplir con un nivel de accesibilidad, se deben cumplir
todos los requisitos, no sólo algunos.
Perceptible: presentar alternativas textuales (alt) ; subtítulos para audio y video ; el contenido debe ser reconocible por
software (lectores automáticos).
Operable: toda funcionalidad debe poder hacerse con teclado ; tiempo suficiente para leer ; evitar destellos
principalmente los rojos (convulsiones) ; títulos descriptivos ; enlaces descriptivos.
Comprensible: especificar el idioma en el encabezado o marcas puntuales ; no cambiar estados de componentes sin
una acción explícita del usuario.
Robusto: usar HTML válido, sin errores ; IDs únicos.
https://www.paradigmadigital.com/assets/cms/cheat-sheet-accesibilidad-web-17f2bcf5560.pdf
Responsive web design
Se llama así a la técnica que

permite diseñar un sitio o
aplicación web que adecuará
automáticamente la forma en
que se presentan sus contenidos
según el tipo de dispositivo con
el que se esté navegando.
Esta técnica está basada en el

mecanismo de MEDIA QUERY
que provee CSS.
CSS Media Device

Existen dos maneras de definir un estilo específico para un medio particular (media device). Si bien la primera es más
sencilla, recomendamos usar el segundo método.


<link rel="stylesheet" media="print" href="example.css" />


<style>
@media print {
body {
color: red;
}
}
</style>
CSS Media Device Types

Los Media Types describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos
not o only, el tipo de medio es opcional y será interpretada como all.
all: apto para todos los dispositivos.
print: destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de
impresión.
screen: destinado principalmente a las pantallas.
speech: destinado a sintetizadores de voz.
https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries
CSS Media Query

De manera similar, los media puede usarse para definir consultas más específicas, por ejemplo en relación al tamaño de
una pantalla.


<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />


<style>
@media (max-width: 800px) {
body {
color: red;
}
}
</style>
Concepto: Mobile First

Trabajo práctico integrador HTML y CSS (SASS)

1. Continuamos el trabajo práctico anterior hecho con HTML y CSS vistos durante la clase.
Se pide:
- crear una página inicial (portada) que siga las pautas establecidas en el wireframe low que está compartido en el drive.
- la portada deberá modularizarse en un header, un cuerpo y un footer.
- el header tendrá un fondo degradado, un logo y una navbar, la navbar deberá navegar a las secciones del cuerpo.
- el cuerpo tendrá 3 secciones (ofertas, productos y contacto), la sección ofertas tendrá cards con los distintos productos y al
hacer click navegará a la página de ficha de producto creada anteriormente, la sección productos tendrá las cards con las
distintas categorías de productos y al hacer click navegará a la página de listado de productos; la sección de contacto sólo
tendrá un formulario sin lógica.
- el footer tendrá dos secciones, una con el copyright y la otra con los datos de contacto, que tendrá un fondo degradado
diferente al header.
Nota: es un trabajo de aprendizaje y todavía no se vieron muchas cosas importantes, no se evalúa el trabajo final obtenido,
sino que lo que se busca es probar las marcas enunciadas en clases.
Trabajo práctico integrador HTML y CSS (SASS) (Sic)

2. Para realizar este trabajo utilizaremos SASS.
Se pide:
- definir dos colores base (primario y secundario) para utilizar como paleta
- crear un mixin que permita generar un fondo degradado partiendo de dos colores base y un grado
- crear un mixin para armar todos los font-face de una familia de fuentes locales (mínimo bold, light y normal) y utilizar las
fuentes
Nota: es un trabajo de aprendizaje y todavía no se vieron muchas cosas importantes, no se evalúa el trabajo final obtenido,
sino que lo que se busca es probar las marcas enunciadas en clases.
CSS Layout
Hasta ahora no modificamos los

elementos HTML por fuera de
su flujo normal. Cada elemento
de nivel bloque se posiciona
por debajo del otro, y cada
elemento inline se visualiza
dentro del elemento que lo
contiene.
CSS Layout
Vamos a introducirnos en el sistema de grillas de Bootstrap a partir de las siguientes propiedades

y valores en CSS:
❏ Display
❏ Position
❏ Flex
❏ Float
CSS Display


* {
display: block;
display: inline;
display: inline-block;
}
CSS Position


* {
position: static;
position: relative;
position: absolute;
position: fixed;
}
CSS Float

.box {
float: left;
margin-right: 15px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}
CSS Flex


#flexcontainer {
display: flex;
flex-direction: row;
}
#flexitem {
flex:1
}
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Bootstrap

Resumen Curso Frontend

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Resumen Curso Frontend

Cargado por

Copyright:

Formatos disponibles

Diplomatura en

Diplomatura Universitaria en Programación Frontend

En particular la diplomatura se enfoca en el desarrollo de aplicaciones que requieren de una

Federico Gonzalez Brizzio Nadia Ramos Abril Montaldo

Ezequiel Moyano Francisco Gonzalez Facundo Tenuta

Breve historia de internet

Breve historia de la web

El protocolo HTTP y su versión segura HTTPS

A lo largo del siglo XXI la programación se fue

El Frontend refiere a la capa con la que

Es lo que ven los usuarios

No lo ven los usuarios

Qué es HTML y su importancia en la web

Estructura del HTML

Estructura de los elementos HTML

<etiqueta atributo="valor" otros-atributos="valor"> contenido </etiqueta>

Dependiendo de la etiqueta, generalmente los atributos son opcionales y no siempre necesarios.

Este tipo de etiquetas se llama "empty elements" (etiquetas vacías).

Elementos de bloque y de línea

La etiqueta <strong> … </strong> se usa para establecer negritas y es un elemento de línea.

Elementos básicos del body

<h1> Para título principal </h1>

Mientras que estas etiquetas son estructurales y agrupan contenidos:

<h1> título de la página </h1>

<p>This is<br>a paragraph<br>with line breaks.</p>

Listas ordenadas y no-ordenadas

La etiqueta para las listas ordenadas es <ol>

Los contenidos (los ítems) de la lista, se etiquetan con <li>

La marca <em> se utiliza para itálicas (antes se usaba <i>)

<p>Este es un párrafo con una palabra en <em>itálicas</em> y otra en <strong>negritas</strong>.</p>

Hipervínculos (externos, internos y target)

<a href="direccion-destino" target="donde-se-abre-opcional"> texto a mostrar </a>

<p> Este párrafo tiene un link para abrir la

Principales tamaños de pantalla para distintos dispositivos

3840 x 2160 4K (monitores y grandes tv)

Nota: se considera el pixel simple,

Principales formatos de imagen para la web

JPG / WEBP: para fotos

BMP: no es para web

GIF: transparencia limitada, animaciones, pocos colores

EPS: no es para web

SVG: vectorial, escalable, transparencia perfecta

PDF: sólo para descargas

Etiquetas HTML más comunes

Etiquetas para carga de información

<input type="text" name="unNombre" value="valor predeterminado" placeholder="texto de ayuda">

<input type="number" name="unNombre" value="345" placeholder="texto de ayuda">

Enviar un archivo al servidor

<input type="file" name="unNombre" multiple>

Etiquetas para carga de información

<input type="checkbox" id="nombre1" name="nombre1" value="Valor" checked>

<input type="checkbox" id="nombre2" name="nombre2" value="Valor" checked>

Etiquetas para carga de información

<input type="radio" id="opcion1" name="unNombre" value="Opción 1">

<input type="radio" id="opcion2" name="unNombre" value="Opción 2">

<input type="radio" id="opcion3" name="unNombre" value="Opción 3">

Etiquetas para carga de información

<select name="unNombre" multiple>

Etiquetas para carga de información

<textarea name="unNombre" placeholder="texto de ayuda">

La etiqueta table (y cuándo usarla)

Una tabla bien formada tiene esta estructura: