Programación HTML
 

Edita fácilmente tus videos

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


<input type="button" value="Inicio" onClick="window.location = 'index.htm';">


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

 

 

 

 

12 Ardora 9 en iframe        

Logica de Ardora

 

 

 

11 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

Código a colocar

<iframe
src="http://docentedigital.club/"
width="595"
height="485"
frameborder="2"
allowfullscreen>
</iframe>

<iframe
src="http://aspesi.net/"
width="595"
height="485"
frameborder="2"
allowfullscreen>
</iframe>

 

 

 

10 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

Código a colocar

<iframe
src="http://docentedigital.club/"
width="595"
height="485"
frameborder="2"
allowfullscreen>
</iframe>

<iframe
src="http://aspesi.net/"
width="595"
height="485"
frameborder="2"
allowfullscreen>
</iframe>

 

 

09 Cómo convertir un Word en una pagina 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

ver el Tutorial

 

 

 

07 Juego del Examen de tres preguntas       

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>