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 Min. participantes: 15.
Sábado
a las 8am
Inscripción 5ta promoción
Nivel 3.5:
Presentación de productos y evaluación de participantes
Competencias digitales básica.
Consideraciones de ancho
de pantalla a
la hora de generar actividades en Ardora o paginas web
5ta Promoción - Iniciada el 08 de septiembre de 2021
Iframe es la abreviatura de Inline Frame
(marco incorporado, en inglés), permite traer un
documento dentro de un marco, sirve para integrar un
documento, un vídeo de Youtube, una presentación o
el contenido de otra página web, y poder verlo sin
problema. Puede integrar el contenido en cualquier
lugar dentro de tu página, sin tener que incluirlos
en la estructura de tu diseño web, como un elemento
tradicional.
Sin embargo, el exceso de usar el iFrame, pone lenta
tu página. y ser un riesgo para la seguridad.
¿Cómo usar el iframe?
Su lógica es:
<iframe
src="http…"
width=“…"
height=“…"
frameborder="0" atributos >
</iframe>
5
Estilo CDD
Formato CDD
Clase grabada
Es hora de empezar hacer nuestra web offline y
online con los conocimientos adquirido, lo primero
es descargar el
patrón del formato CDD y proceder a adaptar las
imágenes (Cabecera 1000x200 píxeles, Foto en fondo
blanco e Icono (92x92 )de forma personalizada, siguiendo la lógica
de las clases anteriores.
4
Alojamiento en Drive Clase
Grabada
Seguir los pasos:
1. Una vez terminada de hacer tu web responsive,
2. Almacena todos los archivos en una carpeta y
renombra la misma como responsive. Recuerda que el
site debe tener el nombre index
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 parámetros
9. Listo, copia ese link esa es la web para
compartir ver ejemplo en.
https://phoxuykgjidcgfxtxuzjmq-on.drv.tw/web.prueba/index.htm
3
Pagina responsive
Clase grabada
Una vez instalado el Expression web, es hora de
desarrollar nuestra primera pagina responsive, pero.
¿Que es una web responsive? es una web que permite establecer
un marco en cualquier dispositivo indiferente de su
ancho. Se establecerá como norma un 96% del
ancho total de la pagina. Primer paso: caja
contenedora responsive
1.- Abrimos una nueva web
2. Insertar tabla y seleccionamos 1x1
3. Verificamos en el diseño su creación
4. Hacemos clic derecho en la celda Clic en
propiedades de la tabla
5. Ponemos Margen de celdas, Espaciado entre celdas
Y Bordes en 0
5. Alineación “Centrar” Especificar ancho En
porcentaje Poner “90”
6. Aplicamos, aceptamos y guardamos
Ahora empezamos a darle vida, insertemos una imagen
y texto de algún documento word y veamos que pasa si
cambiamos el ancho
Para visualizar el navegador predeterminado
presionamos F12.
2
Instalación del Expresión Web
Para instalar el expression web podemos hacer clic
en el archivo de descarga e instalarlo, su manejo
básico conseguir una imagen y un texto para hacer
nuestra pagina responsiva para la siguiente sesión
1
Conceptos Básicos
Evidencia 1
Es 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.
1.- Copia a un
blog de notas el código
2.- Pon tu nombre en el titulo y tu nombre y
apellido en el cuerpo (body)
3.- Grabar como index.htm y tipo todos los archivos
4.- Comprueba
Usaremos
la estructura propuesta por el club la que pueden
bajar en el comprimido
contiene 6 clase que serán el modelo a seguir
distribuidas cada una en una subcarpeta, el
directorio website es el que controla toda la web
alternando documentos, videos enlaces, ya saben que
para presentar los pptx, se debe convertir a video
Vean también el tutorial de como convertir un ppt en
video
El trabajo final debe tener los siguientes
elementos:
1. Caja Contenedora 90% y centrada
2. Fondo oscuro color hexadecimal {14,14,14}
3. Crear carpeta con cabecera dimensión 1000x 200,
ponerla en la caja y editar código para poner el width "100%"
4. Inserto del iframe con el video de introducción
(no tocar en su caso se vera en la clase 8)
5. Eslogan del curso a la izquierda
6. Sumilla del curso
7. Fotografía alineada a la derecha (215 x 300 o
proporción similar) poner el width "20%"
8. Icono del curso alineado a la derecha poner el
width "10%"
9. Datos del docentes a la izquierda
10. 2da caja contenedora al 90% con dos filas la
primera con la celda en fondo que contiene los
iconos posibles de una sesión y la segunda,
contiene la figura de la clase a la izquierda y la
descripción a la derecha.
Carpeta
de ejemplo
Tutorial
El trabajo final
debe parecerse a:
09
Estilo Netflix
Usaremos
la estructura de la famosa plataforma para presentar
nuestros videos
debemos tener en cuenta si lo haremos por píxeles en
cuyo caso deberemos modificar los parámetros del
iframe width="280" height="158" y si epor
porcentaje a iframe width="100%"
el archivo comprimido contiene los codigo de algunos
videos del club el reto consiste en reemplazarlo por
sus videos
08
Cómo usar el iframe
¿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)
06
Paginas con enlaces internos
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 menu
Tutorial
Carpeta
menu
Seguir los pasos:
1. Ver el tutorial
2. Descargar la carpeta menu
3.Copiar todos los elementos de la carpeta menu a la
carpeta Estillo CDD de la semana anterior que
ustedes están avanzando.
4. Abrir archivo menu.htm y copiar la fila; abrir
index.htm de ustedes.
5. Pegar la fila en la parte superior de index.htm;
grabar
6.- Probar
Cualquier duda puede ver el PPT para seguir los
pasos
04
Estilo CDD
Formato CDD
Esta
es una clase practica, consiste en descargar el
patrón del formato CDD y proceder a adaptar las
imágenes de forma personalizada, siguiendo la lógica
de las clases anteriores.
03 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
02
Concepto de contenedor e instalación del frontpage
Instalador Frontpage
Esta
es una clase practica, consiste en descargar el
programa frontpage
descomprimir y ejecutar el programa y hacer una caja
contendora para una web responsiva.
Instalación de el Frontapage
Pasos:
1. Descargar el frontpage de la barra superior
2 Una ves instalado observamos las pestañas
inferiores Diseño - Dividir - Código
- Vista previa
- Diseño.- Se trabaja como cualquier programa de
office
- Dividir.- Se ve tanto el diseño como el código
- Código.- Se ve el código HTML de la pagina
- Vista previa.- No lo usaremos debido a que esta
obsoleto.
¿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
3.- Abrimos una nueva web
4. Insertar tabla y seleccionamos 1x1
5. Verificamos en el diseño su creación
6. Hacemos clic derecho en la celda Clic en
propiedades de la tabla
7. Ponemos Margen de celdas, Espaciado entre celdas
Y Bordes en 0
8. Alineación “Centrar” Especificar ancho En
porcentaje Poner “90”
9. Aplicamos y aceptamos
Vamos a código y observamos, debe salirnos, observemos las diferentes partes. Pongamos una figura y un texto Regresamos a
Diseño, se debe observar el cursor parpadear. En vista ponemos Vistas en miniatura y
seleccionamos la figura. Añadimos y texto y al igual de word lo
modificamos en tipo de letra y tamaño. Grabamos; para verlo como saldrá debemos entrar
a nuestro navegador. Recordatorio, toda web se debe almacenar en una
carpeta de no hacerlo el programa pondrá en la misma
posición la figura seleccionada.
Todo el código HTML es:
Es 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.
Usaremos el
modelo CDD
Los elementos considerados son:
Titulo
Presentación
Video
Archivo
Comprimido
Resumen e
Imagen
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>
Usaremos
la estructura propuesta por el club la que pueden
bajar en el comprimido
Usaremos
la estructura de la famosa plataforma para presentar
nuestros videos
Pasos
Esta
es una clase practica, consiste en descargar el
patrón del formato CDD y proceder a adaptar las
imágenes de forma personalizada, siguiendo la lógica
de las clases anteriores.
Esta
es una clase practica, consiste en descargar el
