DISENO DE SITIOS WEB CON UN PROPOSITO ) €Qué necesitas saber para crear una pagina de Internet 0 pagina Web? 0 Qué es una pagina Web. 0 Cémo se hace una pagina Web. * Planear el disefio de la pagina. * Escribir las instrucciones para programar. Una pagina Web es un documento que puede contener informacién de texto, imagenes, animaciones, fotografias, videos, etcétera, que estan relacionados a través de enlaces dentro de la misma pdgina o hacia otras paginas. A estos enlaces se les conoce cominmente como ligas o vinculos de hipertexto o hiperenlaces. Esta caracteristica proporciona la facilidad de consultar diferentes partes de una misma pagina, o bien una pagina distinta. Muchos usuarios describen este proceso como navegar en un espacio sin limites. Estas paginas que existen en. la www son creadas, utilizando el lenguaje de programacién conocido como HTML. Una pagina Web se hace en varias etapas: 1. Planificar la creacién de la Web. La primera etapa es pensar por anticipado y realizar un disefio preliminar. 2. Recopilar y organizar la informacién. Crear una nueva carpeta para guardar los archivos de la pagina Web de forma ordenada en el disco duro de nuestra computadora. 3. Crear las paginas. Hacer la programacién incorporando el texto, las imagenes y los demas accesorios. 4. Comprobar que las paginas no tengan errores. Ver las paginas con los navegadores para comprobar que se ven como esperamos. 5. Enviar los archivos a un servidor de Internet.ETAPA 1. PLANIFICAR LA CREACION DE LA WEB Analizar y decidir por anticipado una serie de cuestiones fundamentales: f UPR en tt Lat Pensar en los visitantes: Quién la va a visitar. * Que no sea muy pesada para que aparezca en poco tiempo: La informacién, fotos, y videos no “pesen” demasiados kilobytes. * Que sea facil de leer: Tomar en cuenta el tipo de letra, colores organizacién de los elementos en tablas. * Que sepa qué va a encontrar en esta Web. * Que la navegacién sea sencilla (indice o mend y botonesSs ee68 _____ Tips TECNOLOGICOS Botones: Sirven para transportar al visitante de una seccién @ otro. Secciones: Son las partes en las que se divide el sitio. Generalmente, se utilizan entre 5 y 9 secciones en un sitio estndar (aunque pueden ser més © menos). Cada seccién deberd tratar un tema especifico y no confundir su contenido 0 su titulo con el de otras secciones. El objetivo es que el visitante encventre una distribucién de secciones tal que le permita encontrar la informacion que busca sin problema alguno y sin confusiones. Fotografias: Deben ser de buena calidad para que no devalden el disefio Web. Pueden ser fotos propias o sacadas de un stock. Footer o pie de pagina: Es la parte inferior del sitio, en ella generalmente aparecen los créditos del sitio, y vinculos a secciones de informacién legal. ETAPA 2. RECOPILAR Y ORGANIZAR LA INFORMACION Es necesario crear una carpeta exclusiva para guardar de forma ordenada los archivos de la pagina Web en el disco duro de nuestra computadora. Incluir los archivos de texto, directorio de ligas 0 enlaces, imagenes o fotos que se van a incluir, otros recursos multimedia y referencias bibliogréficas 0 de Internet. Para evitar algunos de los problemas més usuales cuando hacemos una pdgina web es preciso organizarse desde el principio. Ademés cuidar estas reglas: 1. No poner en los nombres de las carpetas N, espacios y algunos caracteres especiales. 2. Esta regla aplica para los nombres de los archivos. Por lo tanto escribir nombres sin espacios, sin acento, sin espacios raros y sin ji. 3. Utilizar nombres que nos resulten faciles de reconocer. 4, Ufilizar la misma estructura del sitio en el disco duro de la computadora y en el servidor de Internet. Esta es una cuestién fundamental y una de las causas principales de problemas cuando se comienza a crear paginas Web. Por tanto, utilizaremos el mismo esquema de directorios en el disco duro y en el servidor de Internet.Una pagina Web esté formada por una serie de archivos. Los archivos mas usuales son: 1. Los de programacién con las instrucciones en .himl que permanecen ccultas y que hacen, por ejemplo, que el texto del titulo aparezca en azul. 2. Los que guardan las imagenes. Las paginas Web suelen tener imagenes que se guardan en archivos independientes. 3. Otros que incorporan multimedia y complementos dinémicos. Archivos que contienen los sonidos, video u otros accesorios multimedia. ta publicacién de archivos multimedia favorece y enriquece los proyectos Publicados en la una pagina Web, sin embargo, se puede convertir en un dolor de cabeza si estos recursos tardan mucho en desplegarse en pantalla o en bajarlos desde el sitio de origen. Cuando se intenta ver una imagen que es muy grande, ademds de tardar mucho tiempo, es muy probable que el usuario que quiera verla se impaciente y cancele el proceso, esto causaré que la pagina no sea visitada. Lo mismo ocurriré al insertar sonidos y videos que ocupan demasiado espacio en disco, seré casi imposible transferirlos por la red de Internet. Por lo tanto se deben de considerar dos puntos muy importantes para la elaboracién de recursos multimedia: 1. El menor espacio posible del archivo. 2. La mejor calidad del recurso. Para poder lograr estos dos puntos, es necesario encontrar un balance entre ellos, ya que la mejor calidad implica mayor espacio y con el menor espacio en ocasiones implica una mala calidad. Los recursos multimedia més comunes se pueden agrupar en tres categorias: 1. Audio: archivos de voz, musica y efectos especiales. 2. Imagen: dibujos, esquemas y fotografias. 3. Video: animaciones y clips de video. DPOMMOOOLos formatos més comunes para el trabajo en linea son: Ceased eee WAV y MP3 JPG, GIF y PNG MUWV, MPG y AVI 1. Archivos de Audio Los tipos de archivo que podemos generar pueden contener voz, misica y efectos especiales. * Los formatos mds comunes para trabajar este tipo de archivo son los WAV y MP3. eed * Archivos que ocupan poco | 30 seg = 497 KB espacio por ser formato con un formato sin | Aproximadamente compresién de. compresién. ocupa el 10% de * Generalmente un WAV por la Bueng calidad. _ se requiere de compresion. Es unPuedes cre i 7 ees ep piemila lutzae ave se ofrecen algunos Se a pea FrontPage o DreamWeaver asi como algunos et y elegir la que mds te guste 1 ove Bit tiites nities a yya de acuerdo al tema Pa i i Fa crear tus propias plantillas puedes utilizar un Procesador de textos y guardarlo como pagina Web. Pac pees | No es necesario ‘Ajustar tu contenido al sefio de otra persona y no | a tus necesidades. Si requieres hacer cambios debes conocer algunas | instrucciones bésicos del lenguaje HTML. Necesitas conocer el lenguai de programacién HTML. | conocer un lenguaje de | programacién. | hace en menos tiempo. | El disefio quedard a tu El desarrollo de una pagina | es mas complicado yse | requiere de méstiempo. | a Puedes realizar cambios | 0 mejoras en tu disefio © contenido cuando computadora. aplicaciones. El lenguoi = Lenguaje de Marcas de _ lo para la publicacion de paginas en ‘ fa Internet, ya que ncial de todos los ‘demés lenguajes de programacion utilizados | Z que le indican al exp los elementos del de ParaPara programar en HTML debes saber: 5. Algunas consideraciones generales. 9 Cual es la estructura bésica de una pagina HTML. La funcién de las principales etiquetas de programacién. Consideraciones generales 1. EI HTML es un lenguaje disefiado para publicar documentos con hipertexto en Internet. 2. Tiene todas las herramientas para definir el formato de las paginas y el texto. 3. Permite incluir imagenes asi como enlaces (cominmente conocidas como “ligas”) a otros documentos. 4. Los enlaces o ligas, que pueden o no ser de texto, pueden ser entre dos ubicaciones fisicamente alejadas. 5. Para visualizar un documento en HTML se usan los programas llamados exploradores, existen muchos de ellos, entre los mas comunes estén el Internet Explorer, Mozilla Fire Fox y Safari. . Las instrucciones del HTML se definen como etiquetas (“tags” en inglés) y se identifican porque se escriben entre los caracteres < (menor que) y > (mayor que). Pueden clasificarse en dos tipos, abiertas y cerradas. * Las etiquetas abiertas son instrucciones que se ejecutan una sola vez como el insertar una imagen 0 una linea y sélo hace falta indicar el nombre de la etiqueta. * Las cerradas indican una funcién que se aplica a una parte del documento, puede ser una palabra, un parrafo o una seccién completa, por lo que es importante indicar el inicio y el fin de la misma. Se inicia con el nombre de la etiqueta y se cierra con una / antes del mismo nombre. Por ejemplo: oe eer nn Funcién que ict ec) Sees Inserta una Abierta ss a linea horizontal Cerrada Hace una tabla table Texto en la tabla La estructura basica de una pagina en HTML es: Indica el inicio del documento. Define el inicio de la cabecera. Define el fin de la cabecera. Inicio del cuerpo del documento. Fin del cuerpo del documento. Indica el fin del documento. FUNCION DE LAS PRINCIPALES ETIQUETAS DE PROGRAMACION 1. ENCABEZADO DEL DOCUMENTO (HEAD) a. El encabezado se define por las etiquetas . . .. b. Dentro de las etiquetas se colocan las caracteristicas generales que afectarén a todo el documento. c. Enel encabezado aparecen por ejemplo: el titulo de la pagina, la version del HTML en que fue escrita, algunos comentarios del autor. Es el titulo de la pagina y se despliega en la _ Color de fondo de la pagina bgcolor 4 Color del texto text | Color de Ia liga link Color de Ia liga vlink vlink=" n” ; Color de la liga al darle clic link alink= “n” Ninguno Ninguno = i Ninguno. M/i>G letra Me cd nd Face font face= | Tamajio de la letra 5 ear (1al7) Size font size="n' Color de letra color font color="n' Alinea el pérrafo hacia la izquierda,

derecha o centro puede tomar el align

valor: left, center, right.
__| Ninguno3 CITAR FUENTES DE CONSULTA Por qué es importante citar las fuentes de consulta en un trabajo? * Evitar el plagio (presentar como ideas propias la creacién de otros autores). * Dar credibilidad al trabajo (al documentar el origen de la informacion permitiendo la verificacién de la misma). #Cémo citar una fuente de consulta? * Identificar la informacién, ideas, textos, imagenes, videos, etc., que se consultaron y/o integraron en el trabajo. * Seleccionar un formato para citar por ejemplo el mas usado APA. « |dentificar el tipo de informacién o recurso a citar (pagina web, articulo de revista, video, imagen, etc.) Ejemplos: * Sitio web con formato APA: Bibliografia : Luciérnaga (Bicho de Luz). En National Geographic Society. Recuperado 12 de enero de 2017. * Imagen con formato MLA 8: Bibliografia: Da Vinci, Leonardo. “La Mona lisa”. 1519, hitp://www.louvre.fr, len/oeuvre-notices, jisa-portrait-lisa-gherardini-wife-h DISENO DE SITIOS WEB CON UN PROPOSITO ) éQué necesitas saber para crear una pagina de Internet o pagina Web? O Qué es una pagina Web. O Cémo se hace una pagina Web. * Planear el disefio de la pagina. * Escribir las instrucciones para programar. Una pagina Web es un documento que puede contener informacién de texto, imagenes, animaciones, fotografias, videos, etcétera, que estan relacionados a través de enlaces dentro de la misma pagina o hacia otras paginas. A estos enlaces se les conoce comtnmente como ligas o vinculos de hipertexto o hiperenlaces. Esta caracteristica proporciona la facilidad de consultar diferentes partes de una misma pagina, o bien una pagina distinta. Muchos usuarios describen este proceso como navegar en un espacio sin limites. Estas paginas que existen en la www son creadas, utilizando el lenguaje de programacién conocido como HTML. Una pagina Web se hace en varias etapas: 1. Planificar la creacién de la Web. La primera etapa es pensar por anticipado y realizar un disefio preliminar. 2. Recopilar y organizar la informacién. Crear una nueva carpeta para guardar los archivos de la pagina Web de forma ordenada en el disco duro de nuestra computadora. 3. Crear las paginas. Hacer la programacién incorporando el texto, las imagenes y los demas accesorios. ‘ 4. Comprobar que las paginas no tengan errores. Ver las paginas con los navegadores para comprobar que se ven como. esperamos. 5. Enviar los archivos a un servidor de Internet.