Clase 2: Diseño y desarrollo Web
FrontEnd
Introducción a HTML
Formatos
¿Qué es BackEnd y FrontEnd?
Back-end será
quien tenga la
El Front-end es
tarea de
el área de un
conectarse
sitio web que
con la base de
se dedica a
datos y el
interactuar con
servidor que
los clientes
use una web
Lenguajes Javascript
● HTML
● CSS
● JavaScript
Editores de código:
● Visual Studio Code (recomendado)
● Visual studio
● Notepad++
● Sublime text
Desarrollo Web Frontend
Crear código que sea interpretado por
los navegadores y que cumpla con
estándares de diseño UX/UI
*UX/UI: La Usabilidad es un atributo
de una buena experiencia de usuario
y la UI o Interfaz del Usuario es con lo
que se interactúa
Página Web
Contiene una
combinación de gráficos,
textos, audio, vídeos, y
otros materiales
dinámicos o estáticos
organizados con un
criterio de lectura.
Sitio Web
Contiene un conjunto de páginas
organizadas por jerarquías.
HTML:Define la estructura y contenido de la página web usando etiquetas
CSS: Interviene en el estilo y diseño
JS: Interactúa con los usuarios y se comunica con el Back-end
¿Qué es HTML?
Estructura del código HTML
Elemento HTML
Hipervínculo:
Etiqueta Inline
Etiqueta de bloque:
Algunas etiquetas HTML
● <p>
● <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
● <ul> <li>
● <ol><li>
● <img>
● <title>
● <a>
● <input>
● <div>
Lista de algunos atributos
● Id =” ”: Para identificar un elemento único.
● class =” ”: Identificador múltiple.
● align =” ”: Alineación de contenido.
● border =” ”: Para darle borde al contenido.
● style =” ”: Para darle un estilo al contenido.
● background-color =” ”: Para color de fondo.
● href =” ”: Para enlaces html.
● height =” ”: Para determinar altura.
● width =” ”: Para determinar ancho.
● src=“ ”: Para imágenes
Las etiquetas semánticas no
conllevan ninguna
característica de formato ni de
ubicación, pero sí tienen un
significado semántico que
puede ser interpretado por los
buscadores y por otro tipo de
programas (lectura por voz,
accesibilidad, ...)
Formatos de archivos:
Imagen: Video:
● jpg ● mp4
● png ● ogv
● webp ● webm
● gif
Audio:
Documento:
● mp3
● wav
● pdf
● ogg
● webm
Ejemplos
Mercado Libre UADE
https://www.mercadolibre.com.ar/ https://www.uade.edu.ar/
Bibliografía
Referencias:
https://www.w3.org/
Creación de páginas Web
https://platform.html5.org/
https://www.w3schools.com/
