SlideShare una empresa de Scribd logo
1 de 27
Descargar para leer sin conexión
Programación para Adolescentes (Online)
Acerca del curso
• 24 clases de 2 horas
• Lunes, miércoles y viernes
• 18:30 a 20:30
• Zoom y Whatsapp
• Clases y material en la plataforma
¿Qué vamos a aprender?
• Que hace un desarrollador Frontend
• Entender las tecnologías que impulsan Internet
• Usar HTML para construir una página
• Usar CSS para cambiar la apariencia de una página
• Aprender los fundamentos de la programación
• Usar JavaScript para programar y dar vida a una página web
• Proyecto final
Cómo tener éxito en el curso
• Asistir
• Tomar notas
• Usar la plataforma
• Practicar lo que vemos en clase
• Trabajar en equipo
• Hacer muchas preguntas
Cómo funciona Internet
Red
Red
Switch de red
Switch de red
Redes interconectadas
Internet
Modelo cliente - servidor
servidor internet
clientes
Qué es un
servidor web
Página web -
Sitio web
Navegadores
web
URL
https://www.example.com/index.html
https://www.example.com/index.html
protocolo://subdominio.dominio.extensión
(dominio superior)/recurso.tipo_de_archivo
Protocolos de internet
216.124.128.7 128.104.202.32
Protocolos de internet
Ipv4
256.127.54.1
Ipv6
3648:0a00:1567:0200:ff00:0042:4529
HTTP
HiperText Transfer Protocol
Responsable de transferir paginas, imágenes
y archivos al navegador desde el servidor
Estático VS Dinámico
web page, web site, y web app
Estático
Información fija, permanente
Sin funcionalidades
complejas
Propósitos específicos
Muy livianas
Dinámico
Utilizan un backend que
genera la página de forma
dinámica según variables
Muy interactivas
Responden según el usuario
Dominio VS Hosting
Dominio
Nombre que encontramosen
la URL
Asociado a una IP que apunta
a un hosting
Hosting
Servidor donde reside y se
sirve la página web que
apunta el dominio
Principios del diseño web
Accesibilidad
Funcionalidad
Contraste
Universalidad
Interfaz amigable y memorable
UX
Brindar una experiencia al
usuario que sea agradable y
pueda cumplir con sus
objetivos
Objetivo y audiencia
Un sitio web debe tener un propósitoy satisfacer una
necesidad de la sociedad a la que apunta.
Ese es su público objetivo y a partir de él el equipo de
desarrollo genera requerimientos y historias de usuario para
desarrollar funcionalidades e interfaces.
HTML – CSS - JavaScript
Internet
¿Qué es internet?
¿Qué es un servidor web y cómo funciona?
Página web y sitio web
Web hosting
Navegadores web
Protocolos de internet
HTTP
Las tecnologías fundamentales de la web
<html>
<body>
<h1>Hola Mundo</h1>
<h2>Hola otra vez</h2>
<p>Bienvenidos todos</p>
</body>
</html>

Más contenido relacionado

Similar a Programación para adolescentes online

Pagina web y cazatesoro 2013
Pagina web y cazatesoro 2013Pagina web y cazatesoro 2013
Pagina web y cazatesoro 2013David Fandinho
 
Mvc + html5 + css3
Mvc + html5 + css3Mvc + html5 + css3
Mvc + html5 + css3Marc Rubiño
 
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?Rob Montero
 
Tecnologia web
Tecnologia webTecnologia web
Tecnologia webMeli Vidal
 
Pagina web y cazatesoro
Pagina web y cazatesoroPagina web y cazatesoro
Pagina web y cazatesoroDavid Fandinho
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptLuis Guerrero
 
GC-F-004-V08_AP1-AA1-EV01_EV02_Transversal Formulación del proyecto multimedi...
GC-F-004-V08_AP1-AA1-EV01_EV02_Transversal Formulación del proyecto multimedi...GC-F-004-V08_AP1-AA1-EV01_EV02_Transversal Formulación del proyecto multimedi...
GC-F-004-V08_AP1-AA1-EV01_EV02_Transversal Formulación del proyecto multimedi...IvanLasso3
 
Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Karla Arosemena
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasPeter Concha
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasAvanet
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !ouuyeah
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web8vivi8
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoAptitud Emprendedora
 
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)Pedrito Abiel
 
Modulo1-Presentaciones-parte01.1.ppt
Modulo1-Presentaciones-parte01.1.pptModulo1-Presentaciones-parte01.1.ppt
Modulo1-Presentaciones-parte01.1.pptssuser73f459
 
Taller de Servicios WEB usando JAVA
Taller de Servicios WEB usando JAVATaller de Servicios WEB usando JAVA
Taller de Servicios WEB usando JAVAEdwin Maraví
 
31paginas w3oi taniajuarez
31paginas w3oi taniajuarez31paginas w3oi taniajuarez
31paginas w3oi taniajuarezTANIAJUAREZROJO
 

Similar a Programación para adolescentes online (20)

Pagina web y cazatesoro 2013
Pagina web y cazatesoro 2013Pagina web y cazatesoro 2013
Pagina web y cazatesoro 2013
 
Mvc + html5 + css3
Mvc + html5 + css3Mvc + html5 + css3
Mvc + html5 + css3
 
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
 
Tecnologia web
Tecnologia webTecnologia web
Tecnologia web
 
Pagina web y cazatesoro
Pagina web y cazatesoroPagina web y cazatesoro
Pagina web y cazatesoro
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScript
 
GC-F-004-V08_AP1-AA1-EV01_EV02_Transversal Formulación del proyecto multimedi...
GC-F-004-V08_AP1-AA1-EV01_EV02_Transversal Formulación del proyecto multimedi...GC-F-004-V08_AP1-AA1-EV01_EV02_Transversal Formulación del proyecto multimedi...
GC-F-004-V08_AP1-AA1-EV01_EV02_Transversal Formulación del proyecto multimedi...
 
Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Páginas Web
Páginas WebPáginas Web
Páginas Web
 
Cursopaginas web2013
Cursopaginas web2013Cursopaginas web2013
Cursopaginas web2013
 
Exposicion
ExposicionExposicion
Exposicion
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyecto
 
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
 
Modulo1-Presentaciones-parte01.1.ppt
Modulo1-Presentaciones-parte01.1.pptModulo1-Presentaciones-parte01.1.ppt
Modulo1-Presentaciones-parte01.1.ppt
 
Taller de Servicios WEB usando JAVA
Taller de Servicios WEB usando JAVATaller de Servicios WEB usando JAVA
Taller de Servicios WEB usando JAVA
 
31paginas w3oi taniajuarez
31paginas w3oi taniajuarez31paginas w3oi taniajuarez
31paginas w3oi taniajuarez
 

Más de Ronald Alexander Rivero (12)

0X0D - Responsive
0X0D - Responsive0X0D - Responsive
0X0D - Responsive
 
0x08-CSS-flexbox.pdf
0x08-CSS-flexbox.pdf0x08-CSS-flexbox.pdf
0x08-CSS-flexbox.pdf
 
0x06-css_box_model.pdf
0x06-css_box_model.pdf0x06-css_box_model.pdf
0x06-css_box_model.pdf
 
0x06-CSS-texto.pdf
0x06-CSS-texto.pdf0x06-CSS-texto.pdf
0x06-CSS-texto.pdf
 
0x04-HTML_FORMS.pdf
0x04-HTML_FORMS.pdf0x04-HTML_FORMS.pdf
0x04-HTML_FORMS.pdf
 
0x03-HTML_elementos.pdf
0x03-HTML_elementos.pdf0x03-HTML_elementos.pdf
0x03-HTML_elementos.pdf
 
0x02-HTML.pdf
0x02-HTML.pdf0x02-HTML.pdf
0x02-HTML.pdf
 
0x01-HTML_intro.pdf
0x01-HTML_intro.pdf0x01-HTML_intro.pdf
0x01-HTML_intro.pdf
 
static libraries and dynamic libraries
static libraries and dynamic librariesstatic libraries and dynamic libraries
static libraries and dynamic libraries
 
File permissions symbolic_notation
File permissions symbolic_notationFile permissions symbolic_notation
File permissions symbolic_notation
 
Twos complement
Twos complementTwos complement
Twos complement
 
Low level programming: C libraries
Low level programming: C librariesLow level programming: C libraries
Low level programming: C libraries
 

Último

Ley 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularLey 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularMooPandrea
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfMaritzaRetamozoVera
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñotapirjackluis
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxzulyvero07
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
Éteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesÉteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesLauraColom3
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 

Último (20)

Ley 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularLey 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circular
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
Éteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesÉteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reacciones
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 

Programación para adolescentes online