¡Descarga tutorial para ejercicios en word y más Apuntes en PDF de Informática solo en Docsity!
PROPÓSITO: Al término del parcial, serás competente para diseñar y crear una página web en lenguaje html. El presente módulo tiene como objetivo prepararte para que aprendas a diseñar y estructurar una página web. Por lo que como proyecto elaborarás el diseño de una página web personal en código HTML en el editor de texto bloc de notas con las características siguientes: Una página principal que incluya: ? Encabezado ? Imágenes ? Hipervínculos a otras páginas web ? Hipervínculos a tus páginas. ? Opción para enviar un correo Una segunda página, en la que apliques las tablas Y por último una página, en la que apliques listas. Las tres páginas deben de estar enlazadas entre sí y a una página en internet. COMPETENCIAS: ● Utiliza procedimientos y herramientas para el desarrollo de documentos electrónicos de acuerdo a los requerimientos. ● Programa y administra páginas web para la difusión y captación de la información. ● Elabora páginas web con animaciones interactivas de aplicación general y específica, en un ambiente multimedia. CONTENIDOS: 1.1 Utilizar los elementos fundamentales del diseño de una página web. 1.2 Manejar los elementos básicos del lenguaje HTML en la creación de páginas web. ACTIVIDAD 1 En grupo realiza la lectura de las competencias que se pretende alcanzarás al término del módulo. Posteriormente responde las preguntas y termina comentando tus respuestas a través de una discusión guiada por el docente a la vez que atiendes las explicaciones y ejemplos del mismo.
1.- ¿Qué competencias voy a desarrollar?
2.- ¿Para qué me van a servir?
3- ¿En qué momento las puedo aplicar?
ACTIVIDAD 2 En grupo comenta los lugares por los que has navegado en internet y trata de recordar lo que has observado en cuanto a la estructura, información, enlaces etc. de cada uno de los sitios que has visitado y responde las siguientes preguntas, posteriormente en una lluvia de ideas guiada por el docente comenta el tipo de página que te gustaría diseñar y menciona él ¿por qué? 1.- ¿Que entiendes por una página web?
- ¿Qué tipo de información tiene las páginas web que has visitado?
- ¿Qué diferencia encuentras entre una página web y un sitio web?
- ¿Qué tienen en común los sitios web que has visitado?
- ¿Para qué crees que sirve una página web?
6.- ¿Qué te gustaría que tuviera la página web que diseñarás?
Utilizas los elementos fundamentales del diseño de una
página Web
ACTIVIDAD 3
Para iniciar una página web, primero debes de conocer sus características y las reglas básicas que debes de seguir para diseñarla, por lo tanto realiza la
● Lenguaje (lenguaje): Es lo que es HTML. Este lenguaje hace uso de muchos términos en inglés. ¿Cuáles son las características del lenguaje HTML? Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc. Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de páginas Web. ● L a página Web tiene que ser distribuida: La información repartida en páginas no muy grandes enlazadas entre sí. ● Debe ser fácil navegar por la página. ● Tiene que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo, etc.) y con todo tipo de sistemas operativos(Windows, MS-DOS, UNIX, MAC-OS, etc.) ● Debe ser dinámico: el proceso de cambiar y actualizar la información debe ser ágil y rápido. Reglas básicas en el diseño ● Tener algo interesante que decir en tu PÁGINA web: ● Todo el mundo ya conoce las herramientas de búsqueda. Haz que tus enlaces sean pertinentes al tema que estas tratando. ● Recuerda que no en todos los Buscadores aparecen igual: No hagas que tu página dependa demasiado de ciertos comandos HTML que pueden no aparecer en todos los buscadores. Algunos buscadores pueden no aceptar tus gráficas, así que proporciona textos alternativos. ● Mantén tu página con un máximo de 15K en imágenes o fracciónala si ésta es muy grande. ● No usar gráficas de otros autores si no está autorizado: Hay muchas fuentes de gráficas gratis. También existen graficadores sencillos con los que puedes crear Tus propias gráficas.
● Reconocer el trabajo de los demás: Si algún "Sitio" te ayudó de alguna manera a construir tu página, entonces bríndale un enlace ● Colocar fecha de la última revisión: Indica cuándo se realizó la última revisión. Esto hará que las personas se motiven a leer tu página. ● Verifica sus enlaces periódicamente: No dejes que expiren sus enlaces durante largos períodos de tiempo. Revisa su validez. ● Se abierto a comentarios o sugerencias:Especifica vínculos de correo electrónico o, si es posible, formularios de realimentación. ● Practica el HTML: Usa los editores solo cuando conozcas los principios básicos del HTML. ACTIVIDAD 4 Después de haber realizado la lectura, redacta tu resumen.
ACTIVIDAD INTEGRADORA PARTE 1
Diseño de una página web
Antes de entrar de lleno en lo que será la construcción de la página web, desarrollaremos la metodología para el diseño de las mismas. Es importante ser originales para estructurar sus contenidos, redactar sus textos, agregar imágenes, enlazar las páginas, etc., ● 1. Elegir posibles temas a tratar en la página web
Mi escuela Sitio web de información ANOTA TUS TEMAS Y CLASIFICALOS SEGÚN SU TIPO. (Como se muestra en el ejemplo) MIS TEMAS A CLASIFICACIÓN Historia de la tecnología Sitio web de información ventas de computadoras (^) Sitio Web comercial Tecnología de celulares Sitio web de información Mi juego favorito Sitio Web de ocio Críticas sobre videojuegos Sitio Web de ocio Procesadores de computadoras Sitio Web profesional Artefactos revolucionarios Sitio web de información 3.- Escoge un tema para tu página web El factor más importante, es, que el tema nos apasione. De modo que de la lista de temas que tengo, voy a ordenarlos Según me gusten. (El tema que quede primero es sobre el que desarrollarás tu página web)Críticas sobre videojuegos EJEMPLOS: TEMAS ORDENADOS M MIS TEMAS ORDENADOS Mi escuela (^) Tecnología de celulares Mi ciudad (^) Críticas sobre videojuegos Mi artista favorite Artefactos revolucionarios Capacitación de Informática ventas de computadoras Negocio familiar (^) Procesadores de computadoras Portafolio de evidencias de mis materias (^) Historia de la tecnología Lenguaje HTML Mi juego favorito 4.- Definición de la Información a publicar.
Después de que hayas seleccionado el tema de la página web es necesario definir la información que se va a publicar en el sitio Web, si vas a hacer una página sobre tu escuela, como en este caso, ¿qué vas a poner?: ANOTA TU TEMA Y LA INFORMACIÓN QUE TE GUSTARÍA MOSTRAR EN TU PÁGINA (Como se muestra en el ejemplo) EJEMPLO: MI ESCUELA MI TEMA: Tecnología de celulares Historia de mi escuela (^) Historia de los celulares Materias que imparten Los teléfonos más influyentes o populares Otros Planteles Ventajas y desventajas de las marcas Actividades que realiza (^) Tecnologias biométricas Envió de correos (^) Apariencia Enlaces a otras páginas de interés Plataformas móviles 5.- ¿Qué fuentes de información tengo? Una fuente de información es el lugar del que manan los conceptos, las ideas y los pensamientos que sirven para la creación de nuevo conocimiento en este caso una página web. Por lo tanto, en este apartado necesitamos recolectar las fuentes de información de donde vamos a extraer información del tema de nuestra página web TEMA: Mi escuela www.cobachbc.edu.mx http://www.e-local.gob.mx/work/templates/enciclo/bajacalifornia/municipios/02002a.htm Internet para buscar páginas de interés relacionados con el tema
seleccionado será los estudiantes de secundaria y todos aquellos jóvenes que estén buscando educación del nivel medio superior. ● b) CONTENIDO : habrá información sobre el plantel y la preparación que otorga a los jóvenes. ● c) ESTRUCTURA: Estará formada por una página principal que brindara información y ofrecerá enlaces para ir las secciones del sitio web: materias, capacitaciones, Paraescolares, etc. Tendrá otras 3 páginas web más que estarán ligadas a la primera como se muestra en la estructura siguientes: REALIZA LA PLANIFICACIÓN DE TU PÁGINA WEB SEGÚN EL TEMA QUE HAYAS ESCOGIDO: 8.- Definición del diseño Dependiendo del tipo de Web, el tema seleccionado, definida la información y la escalabilidad, estamos preparados para plasmar en papel el diseño de la página Web, incluyendo las páginas, los fondos, tipos de letras, botones, formularios, links, plantillas, aplicaciones.... de tal forma que obtengamos "storyboard" ( es un conjunto de ilustraciones mostradas con el objetivo de servir de guía para entender una historia, previsualizar una animación o seguir la estructura de una página web antes de realizarse ) de los elementos y diseño que queremos implementar en nuestro sitio Web. Ejemplo de la página web de mi escuela
REALIZA EL DISEÑO DE TU PÁGINA WEB.
(Apóyate en el ejemplo)
El editor no debe formatear el texto. Usa el Bloc de notas ( Notepad ), las etiquetas y sus atributos se pueden escribir en mayúsculas o minúsculas. El lenguaje ignora, también, los espacios en blanco seguidos, donde sólo cuenta uno de ellos. Una vez que hayas escrito una página, guárdala en un archivo con extensión .htm o .html. Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedirá confirmación para guardarlo antes de cerrar el programa. ● Escribir en el Bloc de notas Siempre que se abre el bloc de notas aparece un documento en blanco. A la hora de escribir en él, funciona como cualquier otro editor de texto, basta con situar el cursor en el documento y escribir. Es recomendable insertar una nueva línea para cada nueva etiqueta HTML, ya que resulta más fácil trabajar de este modo. Si escribiéramos todo el código seguido nos resultaría difícil interpretarlo, por ello es preferible programar insertando las etiquetas por separado, en diferentes líneas. A través del menú Formato , opción Fuente , puedes cambiar la fuente de todo el documento. Si lo deseas, puedes hacer la letra algo más grande o pequeña.
● Abrir un documento ● 1. Pulsar la combinación de teclas Ctrl+A. ● 2. Hacer clic sobre el menú Archivo y elegir la opción Abrir. Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. ● 1. Pulsar la combinación de teclas Ctrl+G. ● 2. Hacer clic sobre el menú Archivo y elegir la opción Guardar. A la hora de guardar un documento no debes olvidar guardarlo con la extensión htm o html. Por ejemplo, puedes guardar un documento con el nombre mipágina.htm.
Manejar los elementos básicos del lenguaje HTML en la
creación de páginas web
ACTIVIDAD 5
Antes de empezar a crear la página web es necesario que conozcas los términos básicos que estarás utilizando en el transcurso de este bloque, por lo que es necesario que realices una búsqueda en Internet y definas lo siguiente: Bloc de Notas:
Buscador:
Compatible: ___________________________________________ Estructura de página web:
Etiqueta:
Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define en su contenido el título de la página web, misma que aparecerá en la parte superior izquierda de la pantalla de tu navegador. ACTIVIDAD 6 Trascribe el código siguiente en el bloc de notas, graba el archivo con el nombre index.html. Una vez realizado esto, y sin cerrar el editor de texto, vamos al navegador, da clic en el menú archivo, selecciona la opción abrir, busca el archivo, selecciónalo y ejecútalo dando doble clic en abrir. Tu nueva página estará visible. Nota que el título aparecerá en la parte superior (pestaña de la página). Ejemplo 2: Etiqueta Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas
#FF0000 Rojo #00FF00 Verde #0000FF Azul #FF00FF Magente #00FFFF Cyan #FFFF00 Amarillo #70DB93 Agua Marino #000080 Azul Marino #FF7F00 Coral #A62A2A Café #C0C0C0 Plomo #4F2F4F Violeta ACTIVIDAD 7 Ingresa al bloc de notas y realiza lo siguiente: 1 Abre el archivo " index.html ". 3 Continúa trascribiendo el ejercicio 3 4 Graba con el mismo nombre. 5 Ejecuta y si muestra algún error corrígelo. 5 Ingresa a la página http://www.usuarios.sion.com/pauluk/coloreshtml.htm Checa los códigos de los colores. 6 Cambia el código del color de la página que transcribiste, graba, ejecuta y observa la diferencia. Ejemplo 3:
Texto en HTML
Una página Web se visualiza en países distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores independientemente de su juego de caracteres. Cuando queremos poner uno de estos caracteres especiales en una página, debemos sustituirlo por su código. Por ejemplo, la " á " (a minúscula acentuada) se escribe "& aacute ;" de modo que la palabra página se escribiría en una página HTML de este modo: página. A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:
