1 Semana:
Temática:
Objetivo(s):
Actividad Áulica:
Semana 1
1.1. 1.2. 1.3. 1.4.
INTRODUCCIÓN AL XHTML
Fundamentos de XHTML Abrir, editar y guardar una página web Tener vista preliminar de una página web en el navegador Reconocer etiquetas XHTML y atributos
Que identifiques el lenguaje marcado de hiper texto para que elabores páginas web con el apoyo de la herramienta del bloc de notas; que identifiques las etiquetas más básicas para la elaboración de páginas web; que generes las carpetas que conformarán tu proyecto del sitio web a lo largo del semestre.
Presentación del asesor Presentación de la materia Presentación del encuadre de evaluación Presentación gráfica de lo que se verá a lo largo del semestre en esta materia Elaboración de carpeta a manera de sitio web Análisis y función de las etiquetas de HTML
Generación de carpetas que conformarán el sitio web local Elaboración de páginas web estáticas con programación de etiquetas XHTML con apoyo del bloc de notas
Actividad Extra áulica: (Tareas)
• • • • • • • • • • • • • • • • • • •
<html> <head> <title> <body y atributos> <h1 – h6> Encabezados <br /> Salto de línea <p></p> Parrafo <p align = “Justify”> Alineación justificada <p align = “Left”> Alineación a la izquierda <p align = “Rigth”> Alineación a la derecha <p align = “Center”> Alineación al centro <!- - Comentario --> Para comentarios <i> Cursiva <strong> Negrita <blockquote> Sangría <div> <sub> subíndice x2 <sup> súper índice x2 <hr /> Líneas
• • •
Leer y analizar los archivos de Power Point sobre aspectos fundamentales de XHTML Revisar los contenidos y conocer las etiquetas básicas de XHTML a nivel básico Elaborar páginas web en casa como práctica para recordar la función de cada una de las etiquetas que se vieron en este sesión con apoyo del Bloc de Notas Se hace entrega a los estudiantes del examen de diagnóstico para que lo entreguen en la siguiente sesión presencial. (Examen para evaluar cómo llegan los estudiantes al tomar esta
•
materia)
Evidencia de la Actividad Extraúlica:
Forma de entrega:
•
Páginas web elaboradas a partir de etiquetas programadas en el bloc de notas, estructuración del sito web local con carpetas y sub carpetas
•
El examen de diagnóstico se entrega en el buzón correspondiente ubicado en el módulo 1 llamado: Examen de Diagnóstico Programación para WEB
2 Semana 2 Semana:
Temática:
1.5. 1.6. 1.7. 1.8.
PAGINAS WEB ESTÁTICAS CON XHTML ELABORADAS CON EL BLOC DE NOTAS
Comprender y aplicar el formato de documento básico del XHTML Agregar comentarios a la página web Manejo de color con valores hexadecimales (colores seguros para la web) Formateo y alineación de textos en la página web
1.9. Manejo de enlaces o ligas internas, externas o para correo electrónico Desarrollo de páginas web con el bloc de notas analizando las siguientes etiquetas de XHTML
Objetivo(s):
Que agregues más elementos a tus páginas web elaboradas con el bloc de notas, elementos como colores, ligas, imágenes y tablas; desarrollarás páginas web estáticas que tendrán en su contenido información organizada en tablas, que tengan color de fondo, textos formateados, imágenes y enlazar varias páginas entre si Desarrollo de páginas web con el bloc de notas analizando las siguientes etiquetas de XHTML • •
Actividad Áulica:
•
•
•
Actividad Extra áulica: (Tareas)
•
Colores en los Textos <body> text, link, vlink, alink, bgcolor <font> color, size, face Listas Ordenadas <ol> elemento <li></li></ol> No Ordenadas <ul> elemento <li></li></ul> Imágenes <img> <img src = “/imgs/nombre_imagen.gif” Alt = “imagen” width = “100” heigh = “100”> Tamaño de la imagen Tablas <table> Tabla | cellpadding = “5” <tr> Fila | cellspacing = “5” <td> Celda | border = “1” Ligas o enlaces <a href = “ruta”>Texto en donde hacer clic</a>
TAREA 1 - HTML
•
La primera tarea de la materia de "Tópicos Selectos de Informática III" consiste en elaborar un pequeño sitio web que contendrá su página web de arranque (página principal) llamada index.html y otras cuatro páginas que estarán ubicadas dentro de la carpeta "pags" de tu sitio web. (Recuerda que la página llamada "index.html" es la única que queda en raíz de tu sitio web, es decir, fuera de la carpeta "pags").
La tarea consiste en hacer: • • • • • • • • •
Un sitio web (conjunto de carpetas que organicen tu sitio web) Una página de inicio llamada index.html La página index.html contendrá: Un enlace o liga que apunte a la página 2 (trabajo con textos) Un enlace o liga que apunte a la página 3 (trabajo con imágenes) Un enlace o liga que apunte a la página 4 (trabajo con enlaces) Un enlace o liga que apunte a la página 5 (trabajo con tablas) Un pie de página que contendrá tu nombre completo y los datos de la materia A continuación se te muestra la página web en donde verás las instrucciones de lo que deberán tener cada una de las páginas que debes elaborar:
•
http://www.cuvalles.udg.mx/tareahtml
•
Si tiene dudas sobre algunos de los requerimientos de las páginas que tienen que elaborar, acudan a las presentaciones power point anexas en el material instruccional en línea de esta materia, consulten libros de XHTML en la Biblioteca, consulten TIPS en Internet sobre XHTML, pueden hasta ver el código fuente de estas mismas páginas o de plano (ya como última opción) pueden ir a Asesorías (principalmente por la tarde para darles mejor atención)
• • •
El sitio web que elabores lo vas a comprimir en un archivo .ZIP y deberá tener la siguiente nomenclatura: ApellidoPaterno_ApellidoMaterno_HTML.zip, por ejemplo: Vega_Tapia_HTML.zip
Evidencia de la Actividad Extraúlica:
Forma de entrega:
•
Mini Sitio web elaborado a partir de etiquetas programadas en el bloc de notas
•
El ZIP se sube al buzón de tareas del módulo 1 llamado: Tarea 1 - Elaboración de páginas web (Mini sitio web). (Sitio web compactado en formato de ZIP)
3 Semana:
Temática:
Semana 3
ETIQUETAS XHTML E INTRODUCCIÓN A DREAMWEAVER
1.10. Agregar imágenes, imágenes como enlaces y como fondos de objetos 1.11. Listas ordenadas y no ordenadas en las páginas web 1.12. Entender el uso y conceptos de tablas en páginas web, conocer la estructura básica de las tablas en la web y su formateo 1.13. Entender el concepto y uso de marcos en las páginas web, crear elementos entre los marcos
Objetivo(s):
Generes habilidades en el uso de la herramienta conocida como Adobe Dreamweaver para que diseñes y desarrolles páginas web de manera visual, desarrollarás páginas web con elementos visuales como ligas, imágenes, textos, encabezados, listas ordenadas y no ordenadas, alineación y formato de textos, tablas, líneas horizontales, etc. con el apoyo de Dreamweaver. Administrarás sitios con Dreamweaver.
•
Repaso de tablas realizadas con el Bloc de Notas <tr> Fila <td> celda (Agregar Filas y celdas)
INTRODUCCIÓN A DREAMWEAVER HERRAMIENTAS:
Actividad Áulica:
• • • • • • • • • • • • • •
Generación y administración de un sitio en Dreamweaver Administración de documentos XHTML en Dreamweaver Listas ordenadas Listas no ordenadas Texto: Negrita, cursiva, color del Texto Alineación: Izquierda, derecha, centrado, justificado Color de fondo en la página web y en las tablas de diseño Líneas Horizontales Insertar imágenes Insertar Ligas o Enlaces Tablas Insertar tablas con características: grosor, filas, columnas, ancho, relleno, espacio entre celdas Tipografías o Fuentes de Texto Combinación de Celdas
TAREA 2 - CSS Investigar sobre los Estilos en Cascada (CSS) • • • • • • •
Actividad Extra áulica: (Tareas)
¿Qué son los Códigos de Estilos en Cascada? ¿Cómo se definen o cuál es su sintaxis? ¿Cuál es su uso y aplicación en el formato de páginas web? Definición de estilos a través de etiquetas Definición de estilos a través de clases Definición de estilos a través de pseudo clases Diferenciar entre hojas de estilo CSS externas, internas y en el renglón (CSS Internas o Incorporadas)
Buscar en Internet la tabla de atributos más básicos de estilos CSS que muestran los atributos que se pueden aplicar a determinadas etiquetas de XHTML con los campos de: Nombre del Atributo, posibles valores, ejemplos ATRIBUTOS DE ESTILO PARA TEXTO (Investigar sintaxis, ejemplo y para que funciona cada atributo mencionado a continuación) • • • • • • • •
Atributo font-family Atributo font-size Atributo font-style Atributo font-variant Atributo font-weight Atributo text-decoration Atributos de Fondo y Background Atributo color
• • • • •
Atributo Atributo Atributo Atributo Atributo
background-color background-image background-repeat background-position background
Filtros para Imágenes • • • • • •
Atributo Atributo Atributo Atributo Atributo Atributo
letter-spacing text-transform text-align text-indent line-height list-style
Buscar ejemplos de códigos de cómo aplicar estilos en cascada que afecten a textos, tablas, imágenes, listas, etc. Dicha Investigación la deberás de enviar al Buzón de Tareas No. 2 especial para la Investigación de CSS NOTA IMPORTANTE Es muy necesario que el nombre de tu archivo de Word que contendrá el archivo de la investigación CSS me lo envíes con la siguiente nomenclatura: Paterno_Materno_TareaCSS donde Paterno es tu Apellido Paterno, Materno es tu Apellido Materno y TareaCSS es el número de la Tarea que me mandas. Por ejemplo, para esta tarea sería: Vega_Tapia_CSS
Evidencia de la Actividad
•
Documento en formato de Microsoft Word que contendrá puntos básicos teóricos sobre CSS (Hojas de Estilo en Cascada) Resumen y puntos básicos sobre el manejo y aplicación de
Extraúlica:
Forma de entrega:
•
•
códigos de maquetación de estilos en cascada para aplicarse en páginas web Ejemplos de códigos de aplicación de estilos en cascada en varios elementos de una página web Buzón del módulo 1 llamado: “Tarea de Investigación sobre CSS”, ahí se depositará el archivo de la tarea sobre CSS (estilos en cascada)