Que es el desarrollo Web

 



Estructura de la Clase 

"¿Qué hay detrás del muro?"


  • Actividad: Pídeles que entren a su red social favorita desde el navegador de la PC.
    - El Truco: Enséñales el "Inspeccionar elemento" (F12). Cambia el texto de un titular famoso o el nombre de un perfil en vivo.


  • - El Mensaje: "Todo lo que ven es código. Si saben leerlo, pueden entender cómo funciona el mundo actual. Si saben escribirlo, pueden controlarlo".


Explica la estructura básica usando una analogía humana o de construcción. Es vital que entiendan que son tres lenguajes distintos trabajando juntos.

ConceptoAnalogía (Cuerpo Humano)Función
HTMLEl EsqueletoDefine la estructura y el contenido (títulos, párrafos).
CSSLa Piel y RopaDefine la estética (colores, fuentes, diseño).

Por ejemplo, tomarán una imagen de la interfaz de Instagram y deberán marcar lo siguiente: 

Tarea: Deben marcar con colores: ¿Qué es un contenedor? ¿Qué es una imagen? ¿Qué es un texto?








¿Qué es un Pagina Web?

Según el libro de Gustavo Carballeiro.PDF completar las siguientes preguntas:

1. Leer y Explicar con sus palabras  las funciones del diseñador Web

2. Realizar una línea de tiempo con la evolución Web e historia de la misma (pueden utilizar la app que mas les guste)

3-¿Cuales son los elementos de una página web?

4.¿Cuál es el papel del desarrollador Web?

5. ¿Qué herramientas de diseños existen?


actividad: 

Abrir  su sitio web favorito (o el portal de noticias de la escuela) en Chrome/Edge.Instrucción: Clic derecho -> Inspeccionar.El Reto: Deben encontrar el título principal en el código HTML y cambiarlo por su nombre o una frase graciosa. También pueden cambiar colores de fondo en el panel de CSS.

 ¿QUE ES HTML? CUAL ES SU ESTRUCTURA PRINCIPAL 


Explica brevemente los tres pilares sin entrar en sintaxis compleja:

  1. HTML: El esqueleto (¿Qué hay?).

  2. CSS: La ropa y el maquillaje (¿Cómo se ve?).

  3. Lenguaje : El sistema nervioso (¿Qué hace?).


Deben diseñar una solución web para un problema escolar (ej. una app para saber qué hay de comer en la cafetería o para intercambiar libros).--

- La Entrega: No usarán computadoras. Usarán papel y lápiz para dibujar el "Wireframe" (esqueleto) de la página principal.

-Regla de Oro: Deben marcar qué partes son estáticas (HTML), cuáles tendrían animaciones (CSS) y qué botones dispararían una acción.






Imagínense que son diseñador web, ¿Qué es lo primero que realizarían?






https://es.wikipedia.org/wiki/P%C3%A1gina_web

https://www.youtube.com/watch?v=qJxbC9PJSrA

https://www.youtube.com/watch?v=dDe2qvF5-aw




https://elhacker.info/manuales/Desarrollo%20web/Dise%C3%B1o%20Web%20con%20HTML%20&%20CSS,%20USERS%20-%20Gustavo%20Carballeiro.PDF

Comentarios

Entradas populares de este blog

¿Qué es visual fox pro?2018

Los SISTEMAS