El curso taller pertenece al área
de programación informática, es de naturaleza teórica-práctica.
Tiene como propósito que los participantes puedan analizar y
comprender como funciona los lenguajes de programación web con el
fin de que puedan usarlo en el desarrollo de materiales
audiovisuales y resúmenes de actividades. Este curso es
complementario al de google sites. Trata los siguientes temas:
Descripción de los conceptos de programación web, componentes de una
pagina web, el programa frontpage como editor y diseñador,
incrustaciones y embebidos, códigos css y scripts.
Yuri Humberto Rojas Seminario
Duración: 9 sesiones - 9 Horas
Duración de clase: 60 minutos
Grupo Max. participantes: 100.
Sábado
a las 8am
Lista whatsapp
Nivel Básico- Requisitos:
Competencias digitales básica.
Consideraciones de ancho
de pantalla a
la hora de generar actividades en Ardora o paginas web
14
La web del Docente al estilo Netflix
Haremos
una pagina web al estilo Netflix
• Lo primero siempre es desarrollar la web sigueindo:
Partes de una web
• Menú de opciones (CDD)
• Cabecera / subpáginas
• Eslogan de la serie
• Video de introducción
• Sumilla
• Datos del docente
• Clases en orden inverso
Icono Video - http://docentedigital.club/iconos/video.png
Icono Presentación – http://docentedigital.club/iconos/presenta
cion.png
Icono Archivos (Office y PDF, Drive) - http://docentedigital.club/iconos/archivos.
png
Icono Comprimido (intaladores) – http://docentedigital.club/iconos/comprimido.png
13
La web del Docente partiendo de el menú
Haremos
una pagina web completa para el docente
• Lo primero siempre es desarrollar la web del menú;
esto es muy importante ya que marca en donde estará
clasificadas nuestras actividades, después nos será
muy difícil agregar otras web. Así tenemos
Una web del docente debe tener como máximo estos
enlaces
El algoritmo de un botón es importante que los
enlaces a las paginas a crear no deben ser sin
tildes “ñ” o acentos y deben estar en minúsculas
Una vez hecho el menú duplico cuantas paginas,
cuantas veces tengo dándoles el nombre respectivo
con “Guardar Como”
Etiquetamos las paginas para no perdernos
Vinculo las web en la pagina menú
Copio en cada web el código
Pruebo y listo.
En el nuevo contexto de imitar la pagina de netflix
se debe tener en cuenta lo siguiente. ejemplo en el
archivo zip
1. Pagina de Menú
2. Caja contenedora centrada al 96%
3. Tabla interior de x columnas para menú
4. Pongo las etiquetas de las webs Importante,
decidir cuantas web internas tendrás de lo contrario
agregar una o sacar una después será complica.
5. Centramos y tipo de letra
6. Quitamos los bordes
7. Color de fondo y de letras
8. Elegimos color de fondo
9. Fondo tipo netflix 14,14,14
10. Letras a blanco
11. grabamos
12. Guardar como index
13. Vinculamos paginas
14. Repito esto cuantas paginas web
15. Vinculamos en pagina menú
16. Cambiamos color de vinculos
17. Guardar como poniendo subtítulos y reescribiendo
la web
18. Pongo subtítulos a cada pagina
¿Qué
es un iframe?
¿Qué puedo hacer con un iframe?
¿Qué hace un iframe?
¿Cómo usar el iframe?
Lógica del iframe <iframe width=“…" height=“…" src="http…"
frameborder="0" atributos ></iframe>
Iframe youtube <iframe width=“…" height=“…" src="https…"
frameborder="0" allowfullscreen></iframe>
Iframe slideshare <iframe src="//www.slideshare.net/slideshow/embed_co
de/key/s74R1E6jOMFaTa" . Iframe otras web
¿Qué
es un iframe?
¿Qué puedo hacer con un iframe?
¿Qué hace un iframe?
¿Cómo usar el iframe?
Lógica del iframe <iframe width=“…" height=“…" src="http…"
frameborder="0" atributos ></iframe>
Iframe youtube <iframe width=“…" height=“…" src="https…"
frameborder="0" allowfullscreen></iframe>
Iframe slideshare <iframe src="//www.slideshare.net/slideshow/embed_co
de/key/s74R1E6jOMFaTa" . Iframe otras web
Pasos
Paso 1: Abrir el Word (Tamaño A4 con márgenes
normales, pueden contener imágenes dentro de esos
márgenes)
Paso 2: Guardar como WEB filtrada
Paso 3 : Cerrar Word (es muy importante esto) se
Creara en la misma carpeta la web y una carpeta
contenedora de las imagenes
Paso 4 : Ir a la carpeta de Word • Abrir con
Frontpage
Paso 5 : Insertar contenedor al inicio (60% de
anchura, centrada con márgenes espacio y bordes 0)
Paso 6: Desplazar todo el contenido hacia el
contendor y grabar (es decir seleccionar todo el
contenido incluido las imágenes hacia la celda
contenedora)
08
Web de Carpetas de Recuperación
Paso 1 el video motivacional • De
45 segundos • Usando Elevator Pitch
Paso 2 – La elección
Paso 3 – La web
Diseño Index
Botones 1er Grado, 2do Grado, 3er Grado... X Grado
Video motivacional e insertado local
Para
poder desarrollar este examen se debe bajar
la carpeta y
descomprimirla
06
Enlaces internos en una misma pagina
Pasos:
1.- Caja contenedora
2.- Desarrollar contenido externo
3.- Definir identificadores
4.- Hacer el menú o índice
5.- Insertar algoritmo <p id="nn"> </p> en
identificadores
6.- Establecer enlaces
7.- Probar enlaces y revisar ultimo enlace
05
Paginas con menú
Objetivo
de un video de introducción
¿Qué es un storytelling?
1er. Paso, 2do. Paso, 3er. Paso Creamos un ppt e
insertamos los diálogos
4to. Paso. Crear carpeta de imágenes
5to. Paso. Insertamos las imágenes en las
respectivas diapositivas respetando el orden
6to. Paso. Grabo el fondo de intro
7mo. Paso. El Rodaje
Esos pasos se llaman "Desarrollo"
Planos y ángulos
Planos
8vo. Paso. Grabación
con celular en
fondo croma
9no. Paso. Ensambla todo con
OBS
Trabajo final
04
Google drive como hosting
Seguir los pasos:
1. Una vez terminada de hacer tu web
2. Almacena todos los archivos en una carpeta y
renombra esta con la palabra web.xxxx
3. Abre tu drive y traslada la carpeta • Verifica
que todos los elemento estén cargados
4. Comparte la carpeta
5. Entra a www.drv.tw
6. Confirma la cuenta drive
7. Permite a DriveToWeb
8. Ajustara los parametros
9. Listo, copia ese link esa es la web para
compartir ver ejemplo en. https://phoxuykgjidcgfxtxuzjmq-on.drv.tw/web.prueba/index.htm
10. Tutorial en
https://youtu.be/jcoqq1scets
03
Pagina web de inicio, formato e insertos diversos
Seguir los pasos:
1.- Descarga el archivo comprimido de los
componentes y formatos
2.- Edítalo con frontpage, revisa las dimensiones de
las figuras y cambia las imágenes por las tuyas
3.- Inserta un video de introducción
4.- Consulta el tutorial de como hacer una pagina
responsive
02
Concepto de contenedor e instalación del frontpage
Esta
es una clase practica, consiste en descargar el
programa frontpage
descomprimir y ejecutar el programa y hacer una web
según el formato estandarizado del CDD
El Frontapage
Pasos:
1. Descargar el frontpage
2. Vamos a la web ww.asipop.com
3. ¿Qué es el Frontpage? Es un programa para hacer
paginas, web, el exito de él radica en su
simplicidad de uso y su parecido a los programas de
office
4. Pestañas del frontpage Diseño - Dividir - Código
- Vista previa
5. Diseño.- Se trabaja como cualquier programa de
office
6. Dividir.- Se ve tanto el diseño como el código
7. Código.- Se ve el código HTML de la pagina
8. Vista previa.- No lo usaremos debido a que esta
obsoleto.
9. ¿Que es una web responsive?• Permite establecer
un marco en cualquier dispositivo indiferente de la
posición • Se establecerá como norma un 96% del
ancho total de la pagina. Primer paso: caja
contenedora responsive
10. Abrimos una nueva web
11. Insertar tabla y seleccionamos 1x1
12. Verificamos en el diseño su creación
13. Hacemos clic derecho en la celda Clic en
propiedades de la tabla
14. Ponemos Margen de celdas, Espaciado entre celdas
Y Bordes en 0
15. Alineación “Centrar” Especificar ancho En
porcentaje Poner “96”
16. Aplicamos y aceptamos
17. Vamos a código y observamos
18. Debe salirnos, observemos las diferentes partes.
19. Pongamos una figura y un texto Regresamos a
Diseño, se debe observar el cursor parpadear
20. En vista ponemos Vistas en miniatura y
seleccionamos la figura
21. Añadimos y texto y al igual de word lo
modificamos en tipo de letra y tamaño
22. Grabamos; para verlo como saldrá debemos entrar
a nuestro navegador
23. Recordatorio, toda web se debe almacenar en una
carpeta de no hacerlo el programa pondrá en la misma
posición la figura seleccionada
24. A la practica.
01
Concepto básicos de la programación HTML
Todos los elementos más básicos para entender como
funciona una pagina web
Qué es una pagina web? Es un documento electrónico capaz
de contener texto, sonido, vídeo, programas, enlaces,
imágenes y muchas otras cosas, adaptada a la World Wide
Web (WWW) y que se accede mediante un navegador web.
El web site Consta de tres partes: • El código fuente •
El diseño y • La publicación
Componentes de una web Departamento
Protocolos tcp-ip ftp http https html
Alojamiento o Hosting Protocolo de transferencia de
archivos (en inglés File Transfer Protocol o FTP)
FTP File Transfer Protocol
Dirección de dominio Protocolo de control de
transmisión/Protocolo de Internet t-c-p i-p www
Diseño de una web Protocolo de control de
transmisión/Protocolo de Internet t-c-p i-p
HTTP Hypertext Transfer Protocol
Se hace mediante editores web
El diseño web • Archivos en carpetas • ¿Cuantas web hay?
• ¿Cual es la pagina de inicio?
Comenzamos con la pagina de inicio = index • Define el
estilo de la web • Alberga todas las web de nuestro site
• Debe decir mucho en pocas palabras
¿Qué significa http o https? Son las siglas en inglés de
HiperT ext Transfer Protocol Security (en español,
protocolo de transferencia de hipertexto seguro).
¿Cómo se hace una pagina web? Con el lenguaje de
programació n HTML 5
HTML HyperText Markup Language
HTML • <html> está al inicio de un documento HTML e
indica a los navegadores que la página tiene código HTML
para que pueda leerlo de esa forma. Siguiendo la
sintaxis del lenguaje, la etiqueta de cierre </html>
será el último elemento del documento.
HEAD • <head> es la etiqueta que se utiliza para el
encabezado de la página. Su principal función es
contener toda la información del funcionamiento del
sitio. Debido a esto, es un código encriptado que las
personas que entran a la página no pueden ver.
Título de la página • <title> es la etiqueta que da a tu
sitio un nombre para que los usuarios puedan
identificarlo. Es el título que puedes ver en las
pestañas del navegador.
Cuerpo • <body> es la etiqueta que contiene todos los
elementos individuales del sitio. O dicho de otra forma,
comprende todo el contenido visible del sitio. Aquí
podrás insertar texto, imágenes, videos o cualquier otra
funcionalidad que desees mostrar.
Lógica de Programación html • Se basa en cuadros y
subniveles
El código fuente consta de Marcos y Cuadros
ejemplo
<html>
<head>
<title>Pagina de XX</title>
</head>
<body>
<p>Hola mundo soy XX</p>
</body>
</html>
Esta
es una clase practica, consiste en descargar el
