DISEÑO DE PAGINAS WEBInformática

Unidad # 1

Segundos años de bachillerato sección A hasta J.

Hora 7:00 am a 9:15

Semana del 23 de enero al 29 de enero.

AGENDA DE CLASE NUMERO # 1 DISEÑO WEB

Actividad # 1 Conocimientos previos

Actividad # 2 Calentamiento Video motivacional.

Actividad #3 Página Web: Análisis de su estructura y diseño

Actividad #4 Estructura, diseño y codificación o ensamble

Actividad #5 Recapitulación/cierre

ACTIVIDAD #1 CONOCIMIENTOS PREVIOS

Propósito Conocer el nivel de dominio sobre el tema a presentar en clase.

Instrucciones

1. Responda las siguientes preguntas para evaluar el nivel de conocimiento que posee sobre el tema a exponer.

2. Conoce el significado de las siglas HTML

3. Conoce como se estructura una etiqueta html

4. Conoce editores HTML, mencione alguno

5. Que extensión tiene un archivo para ser leído como pagina Web

ACTIVIDAD #2 CALENTAMIENTO

Propósito Preparar el ambiente de trabajo para que los alumnos se sientan

en un confort agradable de aprender.

Instrucciones

1. Preste atención al video motivacional que se le presentara.

2. Cree equipos de trabajo por medio de dinámica para trabajar con las siguientes actividades.

CREACIÓN DE CUENTA DROPBOX

Propósito Crear espacio virtual para la colocación de documentos comunes

y desarrollo de trabajo.

Instrucciones:

1. Ingrese a la siguiente URL

www.dropbox.com

2. Regístrese con nombre de correo electrónico y una clave.

3. Acepte la invitación que se le hará por medio de su correo electrónico

ACTIVIDAD #3 PÁGINA WEB: ANÁLISIS DE SU ESTRUCTURA Y DISEÑO

Propósito Definir el análisis de la estructura y diseño de una pagina Web,

interesándose por comprender el análisis de la estructura de diferentes tipos de páginas web.

Instrucciones

1. Trabaje en tríos buscando información en la web sobre el tema estructura y diseño de pagina web

2. Defina en su cuaderno el análisis de la estructura y diseño de una pagina web

3. Google diferentes paginas web para conoces la estructura

4. Comparta con el grupo de clases la información obtenida

CONCEPTOS BÁSICOS DE INTERNET E INTRODUCCIÓN AL HTML

¿Cómo funciona la Internet?

La World Wide Web (Sus siglas www) es la parte más popular de Internet. La Web permite una comunicación efectiva, rica, fluida y variada gracias a que puede presentar texto, gráficos, animación, fotos, sonido y vídeo, es decir es toda una interfaz multimedios.

¿Pero en qué consiste la WWW? Físicamente, la Web está compuesta por su ordenador personal, un explorador de Web, una conexión a un proveedor de servicios de Internet, computadoras llamadas servidores que albergan información digital, y enrutadores y conmutadores cuya función es dirigir el flujo de información.

LAS DIRECCIONES WEB

Una página Web es un documento electrónico escrito en un lenguaje de computación llamado HTML, siglas de Hypertext Markup Language (Lenguaje de Marcación de Hipertexto, en inglés). Cada página Web tiene una dirección única, llamada URL (del inglés Uniform Resource Locator), o Localizador Uniforme de Recursos, que identifica su localización en la red.

Http://www.ccsa.edu.sv

1 2 3 4 5

EDITORES HTML

Los editores de HTML pueden ser de dos tipos, como veremos, unos permiten codificar las páginas utilizando el propio lenguaje HTML, a base de etiquetas y otros nos permiten diseñar una página web, como si estuviésemos escribiendo con un editor de texto avanzado, sin tener que escribir el código con las etiquetas. Esta última vertiente, que podemos llamar editores en modo diseño, presenta una facilidad adicional para las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo de aprenderlo o porque se sientan incapaces de hacerlo. Los editores en modo diseño nos permiten crear la página como si estuviéramos escribiendo un documento con un editor del tipo de Word. El editor de HTML es el encargado de vérselas con el lenguaje y programar internamente la página con el código HTML, según lo que nosotros estamos diseñando.

Existen dos tendencias, por tanto, entre los desarrolladores que se dedican a realizar páginas web. Por un lado tenemos a las personas que prefieren crear las páginas programando el HTML y por otro las personas que utilizan editores HTML en modo diseño. Algunas diferencias entre hacerlo de un modo u otro son las siguientes:

Escribiendo el HTML

Con un editor WYSIWYG

Dominas con mayor precisión el código de la página, queda más

limpio. Si dominas bien el HTML nunca tendrás ningún problema para hacer

lo que deseas.

El código de la página tiene peor calidad, incluso puede llegar a tener errores, más o menos visibles, que

cuestan arreglar. Es la máquina la que domina el trabajo.

Es más complicado el aprendizaje, más lento y cuando se llega a un nivel

avanzado también se hace considerablemente más difícil

El aprendizaje es muy sencillo, tal como puede ser trabajar en Word.

Solo se trata de manejar un programa más.

Hacer una página cuesta más trabajo y tiempo.

Es muy rápido.

BLOC DE NOTAS

Pantalla del bloc de notas

El ajuste de línea:Permite ver el código en posiciónVertical y no en horizontal, permite Correr el código hacia abajo y no a la Derecha.

ESTRUCTURA HTML

Sintaxis del HTML

HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador.

Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (< >), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales:

Una apertura de forma general <etiqueta>

Un cierre de tipo </etiqueta>

PREGUNTAS DE LA ESTRUCTURA GUÍA ACTIVIDAD # 3

Navegue por el explorador y visite los siguientes sitios web. www.ccsa.udu.sv

www.mined.gob.sv

www.laprensagrafica.com.sv

Describa en su cuaderno como observa la organización del espacio cada una de las paginas.

En donde se encuentra el área de menú.

Tienen mensajes de bienvenida.

Tienen algún pie de pagina con información de contacto

El cuerpo de la pagina esta dividido en columnas

CONCLUSIONES

¿Tenían espacios multimedia los sitios que visito?

¿A su parecer son ordenados los sitios que visito? ¿Cuál fue el más ordenado?

¿Lograría llenar las inquietudes del visitante la pagina?

¿Esta muy saturada? ¿Le da sensación de seguridad?

ACTIVIDAD # 4 ESTRUCTURA, DISEÑO Y CODIFICACIÓN O ENSAMBLE

Propósito Identificar la estructura, diseño y codificación de un sitio web

funcional, interesándose por desarrollar una guía de análisis para identificar la estructura de un sitio web.

Instrucciones:

1. Trabaje en parejas

2. Identifique según la guía que se le proporcionara, la estructura, diseño y codificación de un sitio web.

3. Responda compartiendo con todo el grupo las Clases la siguiente preguntas

• A menudo se encontrará con el término página de inicio, index o página principal mientras explora la World Wide Web. Piense en una página principal como en el punto de partida de un sitio Web. Igual que la tabla de contenidos de un libro o revista, la página principal ofrece generalmente una visión de conjunto de lo que se puede encontrar en un sitio Web. Un sitio puede tener una página, muchas páginas o unas pocas muy extensas. Si no contiene mucha información, puede que la página principal sea la única. Pero por lo general encontrará como mínimo unas pocas páginas más. En lo que a diseño y contenido se refiere, las páginas Web pueden variar mucho, pero la mayoría usa un formato tradicional de revista. En la parte superior de la página hay un encabezado principal (header) o un titular gráfico, y más abajo una lista de contenidos, por ejemplo artículos, a menudo acompañados de una breve descripción. Los elementos de la lista normalmente están vinculados con otras páginas dentro del sitio Web, o con otros sitios.

Diferentes estructuras Web

Estructura de directorios La forma en que se organiza un sitio web depende en gran medida de su tipo y de la forma en que opte por hacerlo, sin embargo a continuación se presenta un modelo que puede usar para organizar su sitio web y hacer de cada actualización un trabajo más sencillo. La recomendación primordial es que cree un directorio principal en su computadora que contendrá a todos los archivos y subdirectorios del sitio, que posteriormente podrá subir tal como está al servidor.

Ejercicio 1.1 • <HTML> • <HEAD> • <TITLE> Mi primera pagina Web</TITLE> • </HEAD> • <BODY> • <H1>Sitio Web Escriba su nombre</H1> • • <!—Aquí va un comentario que no es • visualizado por el navegador --> • • <P>Hola mundo, esta es un página con titular, • que tiene también un párrafo y unos cuantos • saltos de línea.</P> • • Uno<br> • Dos<br> • Tres<br> • </BODY> • </HTML>

1. Ejecute la pagina web en el nombre ejerciciotxt.html

2. Explique según su manual cual es el uso de cada una de las sintaxis.

3. Responda según sea su turno.

Actividad # 5 Cierre de la clase

• Preguntas guias.– ¿ Que es el lenguaje HTML?– ¿Cuáles son las partes de una dirección web?– ¿Para que sirve la etiqueta <HTML>?– ¿Cómo se especifica el cierre de una etiqueta?– ¿Describa la estructura del cuerpo de una pagina web?

ACTIVIDAD # 6 RETRO ALIMENTACIÓN

Propósito Reforzar conceptos aprendidos en clase.

Instrucciones Desarrolle el ejemplo que se le colocara en la sección de tareas

de la plataforma.

Revisar el blog de trabajo y comentar sobre dudas expuestas en clase.

Revisar presentación de clase para reforzar los temas adquiridos.