SESIÓN 2

CREACIÓN DE PÁGINAS WEB

Segunda semana y sigo vivo (milagrosamente). El profesor tiene ese algo que engancha… ¿Será magia? ¿Carisma? ¿O simplemente que no nos deja aburrirnos ni un segundo? A veces me pregunto si este blog se está volviendo demasiado personal… ¡Y ESO QUE SÉ QUE EL PROFE LO VA A LEER! (Así que… hola, profe 👋. No, no escribo esto por puntos extra… ¿O sí? 🤨 Bueno, en mi defensa: no del todo. O sea, un poquito. Pero con buena fe, ¡lo juro! xdd).

Retomando el hilo: Todo va “a la perfección”. Mis ánimos, por suerte, no estaban por los suelos… bueno, eso o ya me acostumbré al caos. Lo que SÍ mejoró: ya no era un moco andante… o al menos no tanto. Digamos que pasé de “torreta en campo de guerra” a “estación de tren con fugas”. Y sí, me imagino al profesor mirando de reojo al chico que moqueaba en el fondo del salón como si fuera un zombie en apuros. ¿Preocupación? ¿Miedo? ¿O simple curiosidad científica? El mundo nunca lo sabrá.

TEMAS DE LA CLASE

DESARROLLO WEB

INTERFACES Y CÓDIGOS WEB

DISEÑO WEB

ELEMENTOS ESTRUCTURALES HTML

DESARROLLO WEB

Es el proceso técnico de construir el sitio web, transformando el diseño en un producto funcional y accesible en línea. Involucra la programación y configuración de la estructura del sitio

Sin embargo, no es solo eso. Detrás del desarrollo web existen diferentes etapas y roles clave, como:

Frontend: La parte visual y estética, encargada de la interfaz y la experiencia del usuario.

Backend: La parte funcional, que gestiona la lógica, las bases de datos y la operatividad del sitio.

Full-Stack: Una denominación que se refiere a los desarrolladores capaces de trabajar tanto en Frontend como en Backend.

Además, dentro del desarrollo web también se encuentran áreas especializadas, como el Desarrollo de Aplicaciones Web y el Desarrollo de E-commerce, cada una con sus propias particularidades y enfoques.

Y creer que lo necesario para empezar a tener una web, son Navegadores (Web Browsers), Servidores Web (Web Servers) y Dispositivos que tienen diferentes aspectos y podamos acceder a la web.

🔥 ESTOY QUE ARDO 🔥

OTRO PUNTO PARA MI NOTA Y EL ÚNICO QUE GANE PUNTOS ESE DÍA.

“El profesor nos lanzó la pregunta clave: “¿Qué es más importante al crear una página web, el frontend o el backend?”. Sin pensarlo mucho, solté mi respuesta: “¡Los dos!”. Y aquí el porqué: El backend es el motor oculto: sin él, nada funciona. Maneja los datos, la lógica, la seguridad… Pero, ¿de qué sirve un motor potente si el coche no tiene volante o asientos cómodos? Ahí entra el frontend: es la interfaz intuitiva, el diseño que se adapta a cualquier pantalla (¡responsive!), la experiencia de usuario (UX) que guía a las personas sin frustraciones. Sin uno, el otro pierde sentido. ¿Un backend robusto con un frontend ilegible? Caos. ¿Un diseño espectacular que no se conecta a servidores? Solo un escaparate vacío. La magia está en el equilibrio.”

INTERFACES Y CÓDIGOS WEB

No es un lenguaje de programación, aunque aún algunos insistan en el error de decir que sí lo es. Entonces, ¿qué es HTML? Su propio nombre nos da la respuesta.

HTML es un lenguaje de marcado, compuesto por etiquetas que se emplean para crear la estructura completa de una página web, desde la cabecera hasta el pie de página.

CSS (Cascading Style Sheets / Hojas de estilo en cascada) tampoco es un lenguaje de programación, sino que es una tecnología que se emplea para darle estilo a una página web construida en HTML.

Se puede hacer una separación entre el contenido y estructura de la web en su parte visual o estética. Dentro del HTML bastará con «llamar» a los estilos para que se apliquen en la página web

JavaScript (JS) es un lenguaje de programación ligero, interpretado, o compilado justo-a-tiempo (just-in-time) con funciones de primera clase.

Basada en prototipos, multiparadigma, de un solo hilo, dinámico, con soporte para programación orientada a objetos, imperativa y declarativa (por ejemplo programación funcional).

ELEMENTOS ESTRUCTURALES HTML

DISEÑO WEB

El diseño web es el proceso de crear la apariencia visual y la experiencia de usuario de un sitio web, enfocándose en su estética, usabilidad y adaptabilidad en diferentes dispositivos.

TIPOS DE CLASES WEB

Diseño Web Responsivo: Utiliza CSS y JavaScript para ajustar el tamaño y la disposición de los elementos de la página de manera fluida según el tamaño de pantalla.
Diseño Web Adaptativo: El diseño adaptativo crea un diseño para cada dispositivo, carga una disposición específica del sitio web en función del dispositivo detectado.
Diseño Web Minimalista: No significa que sea simple, sino que logra el máximo impacto visual con el menor número de elementos
Diseño Web Interactivo: Crear experiencias visuales y funcionales a través de la interacción directa entre el usuario y el diseño.
Diseño Web de Parallax : Es una técnica de diseño visual en la que se utiliza el movimiento de diferentes capas de una página web para crear una ilusión 3D y dar profundidad y dinamismo a la interfaz

SATISFACCIÓN

CALIDAD

ACCESIBILIDAD

El diseño web es crucial para crear una experiencia de usuario intuitiva y atractiva, lo que puede aumentar la retención de visitantes y fomentar la conversión en clientes.

Un diseño web bien estructurado y visualmente atractivo refuerza la identidad de marca y ayuda a transmitir un mensaje claro y profesional a los usuarios.

La optimización del diseño web para diferentes dispositivos y navegadores garantiza que todos los usuarios, independientemente de su plataforma, puedan acceder y disfrutar del contenido de manera eficiente.

INICIAR A REALIZAR EL SITIO WEB

Competencia: Investiga sitios web similares para identificar buenas prácticas y áreas de mejora. Crear un Mapa del Sitio: Organiza la estructura del contenido y define la jerarquía de las páginas. Definir Objetivos: ¿Cuál es el propósito del sitio web? Conocer al Público Objetivo: Identifica quiénes son los usuarios finales. Define las funcionalidades que debe tener el sitio (formularios, comercio electrónico, etc.). Desarrollar Wireframes: Crea bocetos básicos de la estructura de las páginas para definir la disposición de los elementos. Diseñar Mockups: Diseña versiones detalladas y visualmente completas de las páginas, incluyendo colores, tipografías y gráficos.

ACTIVIDAD

El profesor nos lanzó un reto: “En equipo, elijan un Objetivo de Desarrollo Sostenible (ODS) y diseñen el prototipo de una app o página web que ofrezca una solución innovadora”. Básicamente, teníamos que crear un wireframe que mostrara cómo sería nuestra idea.

Mi equipo y yo empezamos a llover ideas: desde reciclaje inteligente hasta educación accesible… pero al final, ¡mi propuesta se llevó el gato al agua! “Take Care”, una app de skincare con IA enfocada en el ODS 3: Salud y Bienestar. Por dentro, estaba celebrando como si hubiera anotado el gol del triunfo—mis compañeros, con una claridad mental envidiable, dijeron “sí” sin dudar. Sentí como si hubiese ganado un Grammy. Ah

El tiempo corría en contra, pero justo en el último minuto logramos terminar el prototipo y presentarlo. ¡Nada como el thriller de una entrega ajustada! La exposición salió bien (¡incluso mi parte, que no es poca cosa!), así que cruzo los dedos para que el esfuerzo se vea reflejado en una buena calificación. Al final, el profesor nos dejó hacer algo épico: votar por el mejor trabajo de la clase. Todos esperábamos un final reñido… hasta que el Equipo 6 arrasó con su idea de usar café como compost (¡sí, los posos de tu desayuno podrían salvar el planeta!). Ganaron 3 puntos extra ¿O eran 5?, y aunque no fuimos nosotros, ¡reconozco que su propuesta estaba creativa! (¿Próximo reto? Que nos toque el café a nosotros… pero para mantenernos despiertos en la siguiente ronda).

Al final de la clase el profesor pidió terminar de hacer una introducción de la persona que está haciendo la página web, en mi caso el resultado lo pueden ver aquí.

SOBRE MÍ

PD: El profesor en la clase virtual nos enseñó a usar la plataforma de Google Sites, aunque era mucho más fácil de usar de lo que creí, también la parte de los dominios de internet, especialmente la página GoDaddy, una de las principales web para rentar dominios para páginas web.

"Si el internet fuera un juego, Google Sites sería el tutorial fácil y GoDaddy, la tienda donde compras skins para tu web." 🎮🔥

Page updated

Google Sites

Report abuse