Sesion No2

Taller de lenguajes de Programación II
Introducción al HTML
HTML, siglas de HyperText Markup
Language (Lenguaje de Marcado
de Hipertexto), es el lenguaje
fundamental utilizado para crear y
estructurar contenido en la web.
Proporciona las bases para crear
páginas web, permitiendo definir
la estructura, el contenido y los
elementos interactivos que se
muestran en un navegador web.
En esencia, HTML es un
lenguaje de "marcado" en
lugar de programación. Esto
significa que no se utiliza
para programar lógica
compleja, sino para
estructurar y dar formato a
los elementos en una página
web.
Cada página web creada con

HTML se compone de una serie
de "elementos" que se describen
mediante "etiquetas". Estas
etiquetas son códigos rodeados
por corchetes angulares (< >) y
generalmente vienen en pares:
una etiqueta de apertura y una
etiqueta de cierre. Entre estas
etiquetas, puedes colocar
contenido y otros elementos.
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página</title>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Esta es una introducción al lenguaje HTML.</p>
</body>
</html>
HTML se combina a menudo

con otros lenguajes como
CSS (Cascading Style Sheets)
para dar estilo visual a la
página y JavaScript para
agregar interactividad y
lógica. En conjunto, estos
tres lenguajes forman la
base de la mayoría de las
experiencias en línea que
utilizamos a diario.
Estándares HTML
Existen tres estándares importantes para generar productos web. Estos
son los lenguajes o estándares que entiende todo navegador web:
• HTML
• CSS
• JavaScript
Estándares HTML
Estructura los documentos que se visualizan en

los navegadores (Chrome, Edge, Firefox, Safari,
Opera, entre otros). Es el lenguaje con el que
clasificamos o etiquetamos cada parte del
documento, dejándole saber al navegador qué
información va a visualizar y qué valor tiene
para nosotros. De esa manera, presentamos:
Barras de Navegación, Secciones, artículos,
listas, títulos de diferentes tamaños, audios,
videos, imágenes, entre otros.
Estándares HTML
CSS
Es el lenguaje con el que le damos
estilos a todo el contenido
previamente etiquetado con HTML.
Es el encargado o usado para darle
todo el aspecto visual de manera
profesional, usando estándares de
diseño de documentos y logrando
así la correcta visualización de
textos y recursos audiovisuales en
formatos digitales o, en nuestro
caso, las páginas web.
Estándares HTML
JavaScript
Es lenguaje que se emplea para
crear o brindar a las páginas web
la capacidad de interactuar con el
usuario y los recursos asociados a
una página web, como lo son:
bases de datos, servidores de
diversa índole, información
derivada de la interacción de cada
página en sí.
Diferencias entre HTML, CSS y
JavaScript
HTML es la estructura, como si fuese el
esqueleto de un ser humano o los
cimientos de un edificio. Por ejemplo:
una página web que funciona, pero sin
interactividad, colores ni diseño.
CSS corresponde a lo estético, como la
piel de ser humanos. La pintura y
adornos de los edificios o la manera en
que es posible que la estructura del html
se vea mejor para los usuarios.
JavaScript equivale a los músculos, lo
que da esa interactividad a las personas
para moverse y realizar acciones como
correr.
Perfiles de un web Developer
Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder

directamente. Son todas las tecnologías de diseño y desarrollo web que corren en el
navegador y que se encargan de la interactividad con los usuarios.
Un programador Frontend debe saber de código que entienda el navegador (HTML, CSS
y JavaScript) para poder usar algunos frameworks o librerías que expanden sus
capacidades para crear cualquier tipo de interfaces de usuarios. React, Redux, Angular,
Bootstrap, Foundation, LESS, Sass, Stylus y PostCSS son algunos de ellos.
Herramientas que maneja un front End
Debido a que un frontend es el desarrollador (que puede ser o no
Full Stack) que va a manejar las cosas del lado del cliente, las
tecnologías con las que va a trabajar son:
HTML: https://devdocs.io/html/
CSS: https://devdocs.io/css/
JavaScript: https://devdocs.io/javascript/
Frameworks de CSS para frontend:
Frameworks de CSS para frontend:

Bootstrap: https://getbootstrap.com/
Foundation CSS: https://get.foundation/
Materialize CSS: https://materializecss.com/
Los frameworks de JavaScript para frontend
Los frameworks de JavaScript para frontend:
React JS: https://es.reactjs.org/

Angular JS: https://angular.io/
Vue JS: https://vuejs.org/
Preprocesadores CSS
Stylus: https://stylus-lang.com/
SASS: https://sass-lang.com/
Que realiza un Back end
Backend en programación corresponde al lado opuesto a un Front-end en un sitio
web o aplicación, ya que el Backend trabaja en el lado del servidor, mientras el
Frontend lo hace en el lado del cliente. Es el responsable de manejar toda la lógica
que existe detrás de una petición dada por el navegador hacia el servidor. Existen
programadores que manejan ambas especialidades y se les conoce como full stack.
Una característica que lo diferencia del Frontend es que no tiene estándares,

puesto que tiene varios lenguajes de programación (Node.js, Python, PHP, Ruby,
GO, Java, .NET entre otros) con los que debe trabajar. Cada uno de estos lenguajes
tiene sus propios frameworks como:
• Django (Python)
• Lavarel (PHP)
• Rails (Ruby)
• Express (JavaScript)
• Spring (Java)
El Backend también tiene en cuenta la infraestructura donde va a
realizarse el deploy de su aplicación (esto también puede ser
tarea de un DevOps, un perfil dedicado a la infraestructura), con
tecnologías como:
• Google Cloud
• DigitalOcean
• AWS
• Heroku, entre otras.
Qué es deploy?
¿Deploy es un término famoso entre los desarrolladores web.
Puede significar muchas cosas, dependiendo del ambiente y de la
tecnología usada. Sin embargo, los significados que más se refieren
a la práctica y pueden resumir su función son: implantar, colocar
en posición, habilitar para uso o, simplemente, publicar.
Por último, entramos en bases de datos, que son las encargadas de

almacenar toda la información del proyecto. Los principales tipos
son:
• Bases de datos relacionales (como MySQL)

• Bases de datos no relacionales (como mongoDB).
Lenguajes de Programación
Framework
Una característica que lo diferencia del
Frontend es que no tiene estándares,
puesto que tiene varios lenguajes de
programación (Node.js, Python, PHP,
Ruby, GO, Java, .NET entre otros) con los
que debe trabajar. Cada uno de estos
lenguajes tiene sus propios frameworks
como:
Django (Python)
Lavarel (PHP)
Rails (Ruby)
Express (JavaScript)
Spring (Java)
Bases de Datos
FULLSTACK
Full Stack es un término utilizado para describir a los
desarrolladores que conocen tanto los lenguajes de frontend
como de backend. Principalmente, el desarrollo full stack se
refiere al uso de JavaScript en el backend y de
HTML/CSS/JavaScript en el frontend para crear nuevas
plataformas
Qué es un desarrollador Full Stack
las y los desarrolladores Full Stack son profesionales que se

encargan tanto de la parte visual y de interacción de un sitio
(frontend), como de su lógica y funcionamiento del lado del
servidor (backend).
Un stack (en inglés: pila o montón) se refiere al grupo de

tecnologías que componen un sitio web en todos los aspectos
(desde la base de datos, hacia el manejo lógico y la interfaz visual).
Una o un desarrollador Full Stack en teoría es capaz de manejar la
pila completa de un sitio, tanto de frontend como de backend,
además sabe utilizar su base de datos.
Qué hace un desarrollador Full Stack
Una desarrolladora o desarrollador Full Stack entiende muy bien cómo
funciona un producto web de principio a fin, desde su diseño en
mockup y deploy hasta producción.
Este tipo de programador o programadora no maneja por completo

todas las tecnologías de ambas partes, pues cada una requiere
conocimiento profundo. De hecho, no es recomendado profundizar en
tantas especialidades y no es sano. El desarrollo web evoluciona muy
rápido y cada dos o tres meses encontrarás algo nuevo.
Cómo ser un desarrollador Full Stack
Para convertirse en Full Stack developer debes dominar las dos áreas
básicas: backend y frontend. Esto te ayudará a comprender cómo
funciona cada uno y a generar una comunicación entre sí. La mayoría
de la interacción entre estos dos mundos se basa en consumo de API
y comprender cómo consumir una API desde el Frontend te ayudará
a entender cómo construir una API desde el Backend.
Además, aprender de las diferentes formas que tenemos de subir en

Internet una aplicación web te ayudará a entender las diferentes
estrategias de deploy que existen y te permitirá ampliar tus
conocimientos en el mundo del desarrollo web.
Muchas Gracias

Sesion No2

Cargado por

Copyright:

Formatos disponibles

Sesion No2

Cargado por

Información del documento

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

Sesion No2

Cargado por

Copyright:

Formatos disponibles

Taller de lenguajes de Programación II

Cada página web creada con

HTML se combina a menudo

Estructura los documentos que se visualizan en

Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder

Frameworks de CSS para frontend:

Los frameworks de JavaScript para frontend:

React JS: https://es.reactjs.org/

Una característica que lo diferencia del Frontend es que no tiene estándares,

Por último, entramos en bases de datos, que son las encargadas de

• Bases de datos relacionales (como MySQL)

las y los desarrolladores Full Stack son profesionales que se

Un stack (en inglés: pila o montón) se refiere al grupo de

Este tipo de programador o programadora no maneja por completo

Además, aprender de las diferentes formas que tenemos de subir en

También podría gustarte

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.