Docente: Angelly Indira Mesa Londoño
Asignatura: Programación web con PHP
FRONTEND – HTML - CSS
El frontend o «desarrollo del lado del cliente» se refiere a la práctica de producir
HTML, CSS y JavaScript. Estos tres elementos se encargan de dar forma a la parte
frontal de un sitio web o aplicación. Esto incluye los fondos, colores, texto,
animaciones o efectos.
Precisamente de ahí proviene el nombre de «desarrollo del lado del cliente», pues
con el frontend se puede construir por completo lo que los usuarios perciben al
explorar un sitio y con el que pueden interactuar.
Para qué sirve el frontend
El frontend sirve para realizar la interfaz de un sitio web, desde su estructura hasta
los estilos, como pueden ser la definición de los colores, texturas, tipografías,
secciones, entre otros. Su uso es determinante para que el usuario tenga una buena
experiencia dentro del sitio o aplicación.
Elementos del frontend
Estructuras de navegación. Este elemento se refiere al orden en que se organizan
las diferentes páginas de un sitio web y a los componentes que se vinculan entre sí
para realizar diferentes funciones dentro del sitio.
Docente: Angelly Indira Mesa Londoño
Asignatura: Programación web con PHP
Layout. También nombrado como diseño de página, se refiere a todos los
componentes de la página web, por ejemplo: ubicación del menú, botones, footer;
todo lo necesario para que un sitio sea útil y fácil de navegar.
Contenido web. Todo aquello que brinde información relevante o interesante para
los usuarios. Es importante destacar que el contenido no tiene que ser
necesariamente texto, puede incluir sonido o materiales interactivos.
Imágenes. Todos los recursos visuales ayudan a aumentar el interés de los
usuarios. Esto también puede incluir videos, animaciones, mapas, gráficas,
infografías, GIFs, ilustraciones, diagramas, etc.
Logotipo. Para que un sitio web tenga mayor identidad es vital que contenga el
logotipo que represente a la marca o empresa.
Diseño gráfico. Este elemento engloba todo lo relacionado con cómo se ve el sitio
web y su apariencia: colores, formas, tipografías, tamaños, etc.
Ejemplos de aplicación del frontend
Recordemos, el frontend son todos los elementos y componentes visibles para los
usuarios, y utilizan lenguajes de diseño como CSS, HTML y JavaScript. Algunos
ejemplos de frontend son los siguientes:
Optimización de motores de búsqueda (SEO).
Funcionalidad en todos los navegadores y tamaños de pantalla (computadoras de
escritorio, teléfonos móviles y tablets).
Velocidad (cuanto más rápido cargue el sitio, mejor).
Rendimiento del sitio web por medio de la limpieza del código.
Docente: Angelly Indira Mesa Londoño
Asignatura: Programación web con PHP
HTML: Lenguaje de etiquetas de hipertexto
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language)
es el componente más básico de la Web. Define el significado y la estructura del
contenido web. Además de HTML, generalmente se utilizan otras tecnologías para
describir la apariencia/presentación de una página web (CSS) o la
funcionalidad/comportamiento (JavaScript).
"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. Al subir contenido a Internet y vincularlo a las páginas
creadas por otras personas, te conviertes en un participante activo en la «World
Wide Web» (Red Informática Mundial).
Docente: Angelly Indira Mesa Londoño
Asignatura: Programación web con PHP
HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para
mostrarlo en un navegador Web. Las marcas HTML incluyen "elementos" especiales
como <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>,
<span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>,
<nav>, <output> (en-US), <progress>, <video>, <ul>, <ol>, <li> y muchos otros.
Un elemento HTML se distingue de otro texto en un documento mediante
"etiquetas", que consisten en el nombre del elemento rodeado por "<" y ">". El
nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y
minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla.
Por ejemplo, la etiqueta <title> se puede escribir como <Title>, <TITLE> o de
cualquier otra forma.
HTML 5 (HyperText Markup Language, versión 5)
Docente: Angelly Indira Mesa Londoño
Asignatura: Programación web con PHP
Novedades en HTML5
Incorpora nuevas etiquetas de carácter semántico y que nos ayudan a definir la
estructura. Por ejemplo <footer>, para el pie de página.
Nuevos controles para formularios que antes sólo eran posibles con JavaScript o
CSS.
Soporta audio y vídeo de forma nativa.
Ya no es necesario el uso de comillas dobles en los atributos, siendo posible algo
como:
<div id=contenedor>Esto es un div</div>.
Maquetación:
Docente: Angelly Indira Mesa Londoño
Asignatura: Programación web con PHP
Actividad:
1. Consultar sobre las etiquetas <header>, <nav>, <footer>, <section>,
<aside>, <article>.
2. Escoger una página web de su gusto y realizar su estructura semántica o
maquetación.
Docente: Angelly Indira Mesa Londoño
Asignatura: Programación web con PHP
