Planeación - Calendarización (Módulo 1)

1

Semana:

Semana 1

INTRODUCCIÓN AL XHTML

Temática:

1.1. Fundamentos de XHTML 1.2. Abrir, editar y guardar una página web 1.3. Tener vista preliminar de una página web en el navegador 1.4. Reconocer etiquetas XHTML y atributos

Objetivo(s):

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.

Actividad Áulica:

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

• <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

Actividad Extra áulica: (Tareas)

• 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:

• 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

Forma de entrega:

• 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:

Semana 2

PAGINAS WEB ESTÁTICAS CON

XHTML ELABORADAS CON EL BLOC DE NOTAS

Temática:

1.5. Comprender y aplicar el formato de documento básico del XHTML 1.6. Agregar comentarios a la página web 1.7. Manejo de color con valores hexadecimales (colores seguros para la web) 1.8. 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

Objetivo(s):

Desarrollo de páginas web con el bloc de notas analizando las siguientes etiquetas de XHTML 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

Actividad Áulica:

Desarrollo de páginas web con el bloc de notas analizando las siguientes etiquetas de XHTML

• 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:

• Mini Sitio web elaborado a partir de etiquetas programadas en el bloc de notas

Forma de entrega:

• 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:

Semana 3

ETIQUETAS XHTML E

INTRODUCCIÓN A DREAMWEAVER

Temática:

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.

Actividad Áulica:

• Repaso de tablas realizadas con el Bloc de Notas

<tr> Fila <td> celda (Agregar Filas y celdas)

INTRODUCCIÓN A DREAMWEAVER HERRAMIENTAS:

• 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)

• ¿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 background-color • Atributo background-image • Atributo background-repeat • Atributo background-position • Atributo background

Filtros para Imágenes

• Atributo letter-spacing • Atributo text-transform • Atributo text-align • Atributo text-indent • Atributo line-height • Atributo 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:

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

Forma de entrega:

• 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)

Documents

Planeación - Calendarización (Módulo 1)