Taller de lenguajes de Programación II
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.
Configurar Herramienta de trabajo
Lo primero que vamos a trabajar cuando tomamos la decisión utilizar una herramienta de
trabajo, en este caso se utilizará visual code es configurarlo para qué se personalice en este
caso con html, css javascript coma para eso visual code tiene unos plugins apropiado para ello.
1. Prettier - Code formatter: nos permite formatear el código a trabajar para utilizarlo se
pulsa btn_sec_mouse -> format Document –with lo dejamos como defaut para solo luego
pulsar Ctrl-s.
2. Live-server. Nos ayuda ver los cambios en tiempo real -> open with live server
3. Html CSS _support
4. Html Format
5. Class Autocomplete
6. Html/CSS/Javascript
7. CSS Peek: Nos yuda a buscar las dif clases de HTML
8. IntelliSense For CSS Class Name: Nos sugiere algunos Nombres de clases
Configurar Herramienta de trabajo
1. CSS Grid Snippets
2. CSSFlex Box Nos ayuda a configurar cuando trabajemos con flex box
3. Descargar Node.JS
4. Material-Icon Themes
Paginas Dinámicas Vs Paginas estaticas
Las páginas dinámicas y las páginas estáticas son dos
enfoques diferentes para crear y mostrar contenido en
sitios web. Cada enfoque tiene sus propias ventajas y
desventajas, y la elección entre ellos dependerá de tus
necesidades y objetivos específicos. Aquí hay una
descripción de ambos enfoques:
Paginas Estáticas
Las páginas estáticas son páginas web cuyo contenido se
encuentra predefinido y no cambia sin la intervención
manual del desarrollador. Cada vez que se solicita una
página estática, se muestra el mismo contenido. Aquí hay
algunas características clave de las páginas
Paginas Estáticas
Ventajas:
Rendimiento rápido: Las páginas estáticas se cargan más rápido
porque no requieren procesamiento del servidor ni consultas a una
base de datos.
Seguridad: Dado que no hay interacción del usuario con una base de
datos, el riesgo de ataques de inyección de SQL u otras
vulnerabilidades relacionadas disminuye.
Hosting simple: Las páginas estáticas se pueden alojar en servidores
web básicos sin necesidad de configuraciones complicadas.
Paginas estáticas
Desventajas:
Falta de interactividad: Las páginas estáticas son estáticas, lo que
significa que no pueden mostrar contenido personalizado en
función de la interacción del usuario.
Mantenimiento manual: Cualquier actualización de contenido
requiere la edición manual del código fuente.
Escalabilidad limitada: A medida que crece el sitio y se agrega
más contenido, la administración manual puede volverse más
compleja.
Paginas Dinámicas
Las páginas dinámicas son páginas web que generan contenido en
tiempo real basado en la interacción del usuario, los datos
almacenados en una base de datos u otros factores. Aquí hay
algunas características clave de las páginas dinámicas:
Paginas Dinámicas
Ventajas:
Interactividad: Las páginas dinámicas pueden mostrar contenido
personalizado y adaptado a la interacción del usuario.
Actualizaciones más fáciles: El contenido se almacena en una base de
datos y se puede actualizar sin necesidad de modificar directamente
el código fuente.
Escalabilidad: Las páginas dinámicas son más adecuadas para sitios
web grandes con contenido en constante crecimiento.
Paginas Dinamicas
Desventajas:
Rendimiento: Las páginas dinámicas pueden ser más lentas debido
al procesamiento del servidor y a las consultas a la base de datos.
Complejidad: Requieren la configuración y administración de un
servidor, una base de datos y lógica de programación.
Riesgo de seguridad: Dado que interactúan con bases de datos y
lógica de programación, pueden ser más susceptibles a ciertos
tipos de ataques.
Resumen
En resumen, las páginas estáticas son ideales para sitios web
pequeños con contenido que no cambia con frecuencia, mientras que
las páginas dinámicas son más adecuadas para sitios web más
grandes, interactivos y con contenido en constante cambio. La
elección entre estos dos enfoques dependerá de tus objetivos y
recursos disponibles. En muchos casos, los sitios web modernos
utilizan una combinación de ambos enfoques para lograr un
equilibrio entre rendimiento y funcionalidad.
Pagina básica en HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<p>Esta página web es una página HTML válida.</p>
</body>
</html>
Paso a paso del HTML
La primera etiqueta <!DOCTYPE ... > es obligatoria e indica el tipo de documento (DOCTYPE)
de la página. Existen varios tipos de documentos que corresponden a las diferentes
versiones de HTML y XHTML. El tipo "html" es el que corresponde al HTML.
La etiqueta <html> ...</html> engloba todo el documento html.
Un documento html se divide en dos partes, la cabecera <head> ...</head> y el cuerpo
<body> ...</body>
Paso a Paso en HTML
Las etiquetas <meta> están pensadas para proporcionar información sobre el
documento a los programas que analicen la página y por ello existen muchas
etiquetas <meta> diferentes. Por ejemplo, la etiqueta <meta name="keywords"
content="..."> está pensada para informar a los buscadores de los temas
tratados en la página pero, por desgracia, se ha abusado mucho de esta
etiqueta así que los buscadores no la toman prácticamente en cuenta).
La primera etiqueta <meta> del ejemplo informa del juego de caracteres
empleado en la página, en este caso UTF-8.
La segunda etiqueta <meta> del ejemplo se utiliza para mejorar la presentación
de las páginas webs en las pantallas de los teléfonos móviles y, en general, en
las pantallas de alta densidad.
Paso a paso en el HTML
La etiqueta de título <title> ...</title> es obligatoria y debe
incluirse en todas las páginas web. Contiene el texto que se
muestra en la pestaña del navegador, como muestra el siguiente
ejemplo. Si el texto es largo, la pestaña sólo mostrará el principio,
pero situando el ratón sobre la pestaña, el texto completo se
mostrará en una pequeña ventana flotante.
Sintaxis en HTML
La sintaxis de un lenguaje es el "conjunto de reglas que definen las
secuencias correctas de los elementos de un lenguaje de
programación" (diccionario RAE). Aunque el HTML no es un
lenguaje de programación, sino un lenguaje de marcas, en el HTML
también existen una serie de reglas para que los documentos sean
correctos. En general, la sintaxis del HTML está inspirada en la
norma SGML (aunque no la cumple estrictamente).
Muchas Gracias
