Introducción al desarrollo

front – end
Geovanny Cudco
Instructor
 Contenidos
» Introducción al Desarrollo Front-End
» Organización del Contenido
» Navegabilidad
» Patrones de diseño de UI
» Herramientas y Entornos/Frameworks de Desarrollo Front-End
» Lenguajes básicos UI: HTML, CSS, JavaScript
» Herramientas UI
» Entornos WYSIWYG
» Frameworks y Bibliotecas Front-End, por ejemplo: React.
» Seguridad Web
» Sesiones
» Oauth
» APIs de autenticación
Introducción al Desarrollo Front-End
Aproximaciones conceptuales

» Se relaciona con todo lo que ven las personas, esto incluye el diseño y ciertos lenguajes.
» Además, destaca por su característica funcional, pues sirve para que el usuario entre e
interactúe con cualquier sitio.
» Podemos decir que el Front-end es la capa que se encuentra por encima del Back-end,
ya que comprende menús desplegables, imágenes, íconos, colores, elementos gráficos,
animaciones y, sin lugar a dudas, mejora la experiencia de navegación en el lado
delantero o frontal.
» Quienes desarrollan el Front-end son responsables del código orientado a la inmersión
del sujeto en el sitio
Introducción al Desarrollo Front-End

• El Frontend hace referencia a la parte visible o interfaz de una aplicación web o de un

programa o aplicación móvil; aquella que ven e interactúan los usuarios.
• Más específicamente, hace referencia a los colores, letras, animaciones y demás
elementos que pueden visualizar los usuarios.
• Los 3 principales Lenguajes Frontend en desarrollo web: HTML, CSS y JAVASCRIPT
Introducción al Desarrollo Front-End

» HTML: Sirve para determinar la estructura de la página y del contenido

mediante etiquetas.
» CSS es un lenguaje que tiene como objetivo definir el estilo de la página de
manera sencilla. Todas las tareas que se llevan a cabo mediante el lenguaje CSS
pueden llevarse a cabo editando el código HTML de una página, aunque hacerlo
requerirá mucho más tiempo. El uso del CSS permite definir el estilo de una
web en lote.
» JavaScript: JavaScript tiene como objetivo permitir crear una página web
interactiva. HTML y CSS son lenguajes estáticos que no permiten añadir
elementos que interactúen con otros más allá del uso de enlaces. Usar JavaScript
en el diseño de una web permite añadir botones interactivos, formularios y
animaciones.
Introducción al Desarrollo Front-End
Introducción al Desarrollo Front-End
TypeScript

» Lenguaje de programación desarrollado por Microsoft

» EI código es predecible y fácil de depurar
» Hace fácil la organización del código en proyectos o apps grandes ya
que es un lenguaje OO
» Transpila a JS atrapando todo tipo de errores antes de
» pasar a ejecución.
Introducción al Desarrollo Front-End

Papel del desarrollador Front – End

» Un desarrollador front-end trabaja la interfaz de usuario desde el punto de

vista del código, para que la interacción con el sistema sea posible.
» El front-end no es un diseñador, sino que recoge los documentos y directrices
del equipo de diseño para trasladarlas a código
» El trabajo del front-end está estrechamente ligado al de los diseñadores UX
» Un desarrollador front-end, además de definir la estructura de la web, debe
facilitar la navegación del usuario, teniendo en cuenta la usabilidad y legibilidad
de la web o app
Introducción al Desarrollo Front-End

Usabilidad: Experiencia del Usuario (UX):

Se refiere a la facilidad con la que Incluye todos los aspectos de la
los usuarios pueden interactuar con interacción del usuario con una
una aplicación y realizar sus tareas empresa, sus servicios y productos.
de manera eficiente.
Introducción al Desarrollo Front-End
Organización del Contenido

• Partes de una página web en función de su estructura (estructura web)

• Cabecera o header
• Cuerpo o body
• Pie de página o footer
• Partes de una página web en función de la distribución del contenido

• Inicio o home
• Contacto
• Productos y servicios
• Blog
• Política de privacidad
 Logo de la empresa

El menú de navegación

ESTRUCTURA DE UNA PÁGINA WEB

CABECERA O HEADER
Un cuadro de búsqueda

Una pequeña descripción de la web

CUERPO O BODY alberga el contenido principal de tu página

Menú simplificado

Información de contacto

PIE DE PÁGINA O FOOTER Botones de redes sociales

Logo de la empresa

Enlace a la política de privacidad

Partes de una página web en
función de su estructura
(estructura web)
Partes de una página web en
función de su estructura
(estructura web)
Partes por su contenido
Inicio o home

Contacto

Productos y
servicios

Blog
Que es un Mockups UI o maqueta web
» Un mockup es la representación del prototipo del proyecto que se va a realizar. En
este caso se trata de una imagen que nos muestra el resultado visual que tendrá
nuestra página web o nuestra maqueta.
» El uso de los mockups destaca principalmente en la fase inicial de desarrollo de la
web y aplicaciones, para la presentación y control de calidad.
Que es un Mockups UI o maqueta web
» Sirven para coordinar con el cliente las ideas y los requisitos de la interfaz de
usuario con respecto a las funciones básicas, la navegación, la arquitectura de
contenidos y el diseño. Quién obtiene el contrato final a menudo se decide sobre la
base del mockup.
» Las maquetas se utilizan para pruebas de usabilidad sin un gran esfuerzo de
programación previo. De este modo, cualquier problema se detecta antes de crear el
prototipo y se reduce el riesgo de que un concepto tenga que ser completamente
revisado a mitad de la fase de desarrollo. En general, los mockups pueden contribuir
a ahorrar tiempo y dinero en un proyecto online.
MOCKUPS UI
Es importante contar con un mockup, ya que podemos tener en cuenta la gama de
colores principal, el uso de fuentes y cualquier otro recurso que podamos llegar a
conseguir gracias al mockup
 Balsamiq

Herramientas para MockFlow

diseñar Mokups
PlaceIt by Envato

Wireframe.cc

Moqups

Figma

Lucid Charts
Desarrollo Web Front End
Desarrollo Web Front End
HTML Semántica
Desarrollo Web Front End

HTML Semántica

Cómo funciona el HTML semántico

» Las etiquetas semánticas pueden utilizarse en lugar de las etiquetas de

presentación estándar y esto ayuda a mejorar la legibilidad y la usabilidad, al
tiempo que reduce la necesidad de datos estructurados.
» Esta nueva forma de concebir la programación permite crear sitios web más
accesibles y más significativos para los motores de búsqueda.
» El marcado semántico también es beneficioso porque permite hacer hojas de
estilo CSS separadas para cada sección de su sitio web.
Desarrollo Web Front End
HTML Semántica
Desarrollo Web Front End

HTML Semántica

» Utilizar HTML semántico significa que al escribir el código todo el

contenido buscará llevar la etiqueta más adecuada según su tipo.

» Si los sitios son construidos con HTML semántico, esto quiere decir
que ayudará a los motores de búsqueda a entender qué tipo de
contenido se está creando y esto trae las grandes ventajas.
Desarrollo Web Front End
HTML Semántica

Ventajas
Posicionamiento
Accesibilidad Practicidad Reusabilidad
en buscadores
Desarrollo Web Front End
HTML Semántica Ventajas

1. Posicionamiento en buscadores

» Los motores de búsqueda analizan el código de los sitios web para

determinar cuál es el contenido que muestran y también saber cómo
mostrarlo.

» La semántica dentro del HTML hace que estos motores entiendan mejor el
sitio web que estés construyendo.
Desarrollo Web Front End

HTML Semántico Ventajas

2 . Accesibilidad

» Los lectores de pantalla para usuarios con debilidad visual organizan la lectura
del contenido de acuerdo con la estructura del código.

» Así que un código con buenas prácticas y semánticas ayuda a que el sitio sea
apto para público con diferentes necesidades.
Desarrollo Web Front End

HTML Semántico Ventajas

3. Practicidad
» Cuando se trabaja con código semántico es más fácil de entender y, por lo tanto, de
mantener. Tu yo del futuro y también tu equipo de trabajo te lo agradecerán.

4. Reusabilidad
» Separar el contenido de la presentación permite que una página se pueda rediseñar
con cambiar solamente el CSS
Desarrollo Web Front End

¿Cuál es la diferencia entre el HTML semántico dinámico y estático?

» Una de las partes más importantes del desarrollo web son los atributos semánticos del
HTML.
» La semántica estática es el significado de una palabra o frase que se mantiene
constante independientemente del contexto, mientras que la semántica dinámica
cambia en función de su uso.
Desarrollo Web Front End
¿Cuál es la diferencia entre el HTML semántico dinámico y estático?

Semántica estática

» La semántica estática se utiliza para definir diferentes tipos de etiquetas en

HTML.
» No dependen de ningún otro dato contextual, sino que permanecen constantes
independientemente de su uso.

» Por ejemplo: Al definir una etiqueta de párrafo, el navegador sabe que es un

párrafo, independientemente de si se utiliza para poesía o prosa.
Desarrollo Web Front End

Semántica dinámica

» Se utiliza para definir dinámicamente el contenido de un elemento.

» El significado cambia en función del texto que hay dentro y de las palabras
que lo rodean.
» Por ejemplo, si tiene un elemento que define la ubicación de una empresa
como Bogotá, el HTML mostrará “Bogotá” cuando el cursor pase por encima
de ese elemento concreto en una página web o cuando se vea ese
Herramientas
y Frameworks
de Desarrollo
Front-End
Herramientas y Frameworks de
Desarrollo Front-End

Un framework web es una estructura o un conjunto de

herramientas predefinidas que proporciona una base
para la construcción de aplicaciones web.

Está diseñado para ayudar a los desarrolladores a crear

sitios web de manera más eficiente y consistente, al
proporcionar una serie de componentes y funciones
comunes que se utilizan con frecuencia en el desarrollo
web.
 proporcionan un sistema de enrutamiento que facilita la gestión de
Enrutamiento
las URL y las rutas de las páginas dentro de una aplicación

Proporcionan plantillas predefinidas o motores de plantillas que

CARACTERÍSTICAS DE LOS Plantillas
ayudan a generar el código HTML de manera dinámica.

facilitan la separación de la lógica de negocio (controlador), de la

Controladores
FRAMEWORKS

presentación (vista) y los datos (modelo)

Manejo de solicitudes
gestionan solicitudes HTTP entrantes y generar respuestas HTTP
y respuestas

Bases de datos herramientas y abstracciones para interactuar con bases de datos

Sesiones y
funciones para gestionar las sesiones de usuario y su autenticación
autenticación

acilitan la creación y consumo de estas interfaces y servicios, lo que

API y servicios web
permite la integración con otras aplicaciones y servicios.
 React
Angular
JavaScript
Vue.js
Express.js
Django
FRAMEWORKS

Python
Flask
Ruby Ruby on Rails (Rails)

Laravel
PHP
Symfony

Java Spring Framework

Microsoft ASP.NET Core

Google / go Gin
Angular es un Framework de JavaScript de código abierto escrito en
TypeScript. Su objetivo principal es desarrollar aplicaciones de una sola
página.

Google se encarga del mantenimiento y constantes actualizaciones de

mejoras para este framework.

CARÁCTERÍSTICAS
» TypeScript: Se define un conjunto de tipos de JavaScript, 10 que
ayuda a los usuarios a escribir código JavaScript que es más fácil de
entender.
» Data Binding (Enlace de datos): Es un proceso que permite a los
usuarios manipular elementos de la página web a través de un
navegador web.
» Document Object Model (DOM): Trata un documento XML o HTML
como una estructura de árbol en la que cada nodo representa una
parte del documento.
Ventajas y desventajas
» React es una biblioteca o librería de código abierto que está
escrita en JavaScript.

» Fue desarrollada por Facebook en el 2013 con la finalidad de

facilitar la creación de componentes reutilizables e
interactivos para las interfaces de usuario.

CARÁCTERÍSTICAS

» Permite crear interfaces de usuario interactivas de modo

declarativo y simple.
» Permite el uso de componentes, no programes lo mismo 2
veces, piensa bien una sola vez.
» Potencia el desarrollo de aplicaciones móviles con React
Native.
 1. Fácil de aprender.

2. Alto nivel de flexibilidad

3. Máxima capacidad de respuesta.

Ventajas
4. DOM virtual
Desventajas
Ventajas y

5. Combinado con ES6/7

6. Biblioteca JavaScript 100% de código

abierto

1. Falta de documentación oficial.

Desventajas 2. No hay un patrón de desarrollo

3. Se necesita mucho tiempo para dominarlo

» Vue.js es un marco JavaScript progresivo de código abierto
para crear interfaces de usuario (Ul) y aplicaciones de una sola
página; se conoce comúnmente como Vue.

» Este marco utiliza "alto desacoplamiento", lo que permite a

los desarrolladores crear progresivamente interfaces de
usuario (Ul).

CARÁCTERÍSTICAS
» Accesible, comience a construir cosas en poco tiempo si ya
tiene conocimientos de HTML, CSS y JavaScript.
» Versátil, con un ecosistema de adopción incremental que
escala entre una biblioteca y un marco con todas las funciones.
» Es un marco rápido de descargar y de instalar la biblioteca,
impactando positivamente en el SEO y UX.
» Utiliza un DOM virtual, mejora el rendimiento de la aplicación
y visualización de la página.