MÓDULO 2:
Fundamentos de Desarrollo Front-End.
Parte 1: Fundamentos Desarrollo Web.
Aprendizajes Esperados
Estructurar contenido en una página web
utilizando HTML5 para dar solución a una
problemática.
Contenidos
I. El Desarrollo Web.
1. Qué se entiende por desarrollo web
2. Diferencias entre Front-End, Back-End y Fullstack
3. Qué es el lenguaje de marcación de hipertexto (HTML)
4. El rol del Navegador
5. Qué es la W3C
6. Evolución del html hacia el html5
7. La triada html, css y javascript: contenido, presentación y
comportamiento
II. El Entorno de Desarrollo.
1. Editores de código.
2. Descarga del editor Visual Studio Code e Instalación.
3. Conociendo el inspector de elementos en un navegador.
I. El Desarrollo Web.
1. Qué se entiende por desarrollo web.
El desarrollo web es el termino que hace referencia a la creación de sitios o
paginas web que utiliza la internet o intranet para publicar información de distinta
índole o fines.
Utiliza distintas tecnologías y se compone principalmente de 2 partes:
Servidor
Utiliza aplicaciones que permiten alojar los archivos o paginas web y además de
recibir y responder a las solicitudes de los usuarios.
Cliente
Utiliza cualquier dispositivo (PC, Ntbk, Celular, etc)
conectado a la red y un aplicación que realice solicitudes
y procese las respuestas entregadas por el servidor.
I. El Desarrollo Web.
2. Diferencias entre Front-End, Back-End y Fullstack
Front-End
Es la encargada de presentar la información de forma atractiva y de manejar la
interacción que el usuario tendrá con ella.
Utiliza los lenguajes: HTML, CSS y JavaScript (js)
I. El Desarrollo Web.
2. Diferencias entre Front-End, Back-End y Fullstack
Back-End
Es la encargada de responder a las distintos requerimientos de información de los
usuarios.
Utiliza distintas tecnologías para llevar a cabo esta tarea, entre las cuales están:
Lenguajes de programación: C#, PHP, Java, Python, entre otros.
Bases de datos: Oracle, PostgreSql, SqlServer, MySql, entre otros.
I. El Desarrollo Web.
2. Diferencias entre Front-End, Back-End y Fullstack
Fullstack
Es un perfil definido para el informático que maneja tanto tecnologías de Back-End
como Front-End.
Para esto utiliza distintas librerías o recursos disponibles que facilitan o
automatizan algunas labores para la creación de sitios web complejos, esto
permite reducir tiempos y costos de desarrollo
I. El Desarrollo Web.
3. Qué es el lenguaje de marcación de hipertexto (HTML)
El Lenguaje de etiquetas de hipertexto o HTML (sus siglas en inglés), permite, por medio
de etiquetas, atributos y contenidos, la creación de paginas web.
La primera pagina web fue presentada por Tim Berners-Lee en 1990, que en la actualidad
se puede visualizar en la siguiente URL:
http://info.cern.ch/hypertext/WWW/TheProject.html
Este lenguaje es interpretado o leído por el navegador,
mostrando los diferentes elementos que fueron especificados
en el documento HTML.
Los elementos a mostrar en el navegador pueden ser
especificados mediante los etiquetas o tags.
I. El Desarrollo Web.
4. El rol del Navegador
El navegador web es el principal cliente web que se utiliza en la actualidad, para navegar
en los sitios web existentes en la internet
Algunos navegadores disponibles en el mercado son:
Chrome Edge Mozilla Opera Safari
I. El Desarrollo Web.
5. Qué es la W3C
Es un consorcio internacional, creado en el año 1994, que se encarga de desarrollar las
recomendaciones y estándares que permitan asegurar el funcionamiento de la internet,
independiente de las empresas tecnológicas y/o herramientas que se utilicen para
soportarla.
Algunos estándares publicados por la entidad son:
• HTML
• XML
• SOAP
• CSS
• DOM
El sitio oficial de este consorcio es: https://www.w3.org/
I. El Desarrollo Web.
6. Evolución del html hacia el html5
HTML5, es la última versión de lenguaje, lanzado en el 2014.
Incluye nuevas características entre las cuales están:
Soporte de Video y Audio.
Creación de video juegos.
Permite incluir gráficos vectoriales SVG (formato).
Etiquetas para la maquetación.
Validaciones.
I. El Desarrollo Web.
7. La triada html, css y javascript: contenido, presentación y comportamiento
En la actualidad, todas las paginas web utilizan de una u otra forma estos 3 lenguajes.
HTML dispone de una serie de etiqueta
que permiten armar el “esqueleto” de la
pagina web.
Estas etiquetas o tags se distribuyen de
manera ordenada para establecer los
elementos donde se quieren mostrar.
I. El Desarrollo Web.
7. La triada html, css y javascript: contenido, presentación y comportamiento
CSS, son las siglas para Hoja de estilo en
cascada.
Actualmente esta en la versión 3 y es un
lenguaje de diseño grafico que permite
modificar la apariencia de una pagina
web.
Este lenguaje permite modificar a los
elementos de una pagina sus colores,
tamaño, ubicación o posición, cambiar el
tipo de fuente (letra), entre otros.
I. El Desarrollo Web.
7. La triada html, css y javascript: contenido, presentación y comportamiento
JavaScript o js, es un lenguaje de
programación interpretado diseñado
inicialmente por Netscape(1995) y que es
mantenido actualmente por la fundación
Mozilla.
Funciona en el lado del cliente (navegador).
La versión actual del lenguaje es la
ECMAScript 2016
Permite crear paginas web dinámicas
agregándole funcionalidades según las
acciones que realiza el usuario en la pagina
web.
II. El entorno de Desarrollo.
1.- Descarga del editor Visual Studio Code e Instalación.
Visual Studio Code, es un editor de código fuente, multiplataforma, con soporte
de extensiones de tercero, creado por Microsoft y que fue lanzado en el año 2015
bajo licencia MIT.
Su codigo fuente esta disponible en GitHub para su descarga, lo que permite
modificar y adaptar de mejor manera, el editor a nuestras necesidades.
Visual Studio Code o VS Code o también VSC, tiene soporte para múltiples
lenguajes de programación, como por ejemplo:
Python, PHP, HTML, CSS, Entre otros.
II. El entorno de Desarrollo.
1.- Descarga del editor Visual Studio Code e Instalación.
VS Code, puede ser cargado desde su sitio oficial:
https://code.visualstudio.com
Y se debe seleccionar el sistema operativo que se utiliza en el equipo a usar y
descargar.
Al descargar, se ejecuta el archivo
y el asistente instalará los
diferentes componentes para el
funcionamiento del editor.
II. El entorno de Desarrollo.
2. Utilizar el potencial de un editor de texto para el desarrollo.
Visual Studio, no solo permite escribir paginas web, también es un conjunto
completo de extensiones o plugins que están disponibles con el editor.
Estos plugins, permiten:
Sugerencias de códigos.
Completar códigos.
Destaca errores de sintaxis.
Corrección de errores en el código.
Depuración.
Entre otros
La url para ver extensiones disponibles es:
https://marketplace.visualstudio.com/
II. El entorno de Desarrollo.
3.- Conociendo el inspector de elementos en un navegador.
Otra herramienta a utilizar en el desarrollo de aplicaciones en entorno web es el
inspector de elementos.
El inspector, permite visualizar el código fuente con el que se construye una
pagina web.
Los principales códigos que se pueden visualizar con el inspector son:
a) CSS o hoja de estilo en cascada, quien aplica el diseño de la pagina.
b) JavaScript, quien determina el comportamiento de la pagina, según la
interacción que el usuario realiza.
c) HTML es el esqueleto en que se sostienen todas las paginas web.
II. El entorno de Desarrollo.
3.- Conociendo el inspector de elementos en un navegador.
¿Como usar?
Abrir el navegador Chrome y entrar en algún sitio de interés. Por ejemplo:
https://code.visualstudio.com
II. El entorno de Desarrollo.
3.- Conociendo el inspector de elementos en un navegador.
Una vez cargada la pagina en Chrome, se presiona F12 y aparecerá una ventana llamada
DevTools
II. El entorno de Desarrollo.
3.- Conociendo el inspector de elementos en un navegador.
A la izquierda aparece el código HTML de la pagina
II. El entorno de Desarrollo.
3.- Conociendo el inspector de elementos en un navegador.
A la derecha se puede ver los estilos aplicados en la pagina como también si existen
errores en la ejecución o de sintaxis en JavaScript o JS.
II. El entorno de Desarrollo.
3.- Conociendo el inspector de elementos en un navegador.
Otro opción importante para el desarrollo de una pagina web es el visor de archivos que
fueron descargados cuando se realizo la solicitud de la pagina. La opción tiene como
nombre NetWork.
Actividad.
