ministerio de educaciÓn direcciÓn de educaciÓn de san ... · trasladan las paginas web a un...

44
0 MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN MIGUELITO INSTITUTO RUBIANO TECNOLOGIA DE LA INFORMACION I TRIMESTRE GUÍA DE AUTO INSTRUCCIÓN 1 GRADO XII HUMANIDADES NOMBRES DE LOS PROFESORES CHALA, LISSETTE BARRIA, ABNERY FECHA 14 DE AGOSTO DE 2020

Upload: others

Post on 27-Sep-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

0

MINISTERIO DE EDUCACIÓN

DIRECCIÓN DE EDUCACIÓN DE SAN MIGUELITO

INSTITUTO RUBIANO

TECNOLOGIA DE LA INFORMACION

I TRIMESTRE

GUÍA DE AUTO INSTRUCCIÓN 1

GRADO

XII HUMANIDADES

NOMBRES DE LOS PROFESORES

CHALA, LISSETTE

BARRIA, ABNERY

FECHA

14 DE AGOSTO DE 2020

Page 2: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

1

Indice de Contenido

Guia de Auto Instrucción # 1 Pág

Diseño Web 3

Guia de Auto Instrucción # 2

Sitio Web 11

Guia de Auto Instrucción # 3

Consideraciones sobre Accesibilidad Web 19

Guia de Auto Instrucción # 4

Etapas del Diseño Web 37

Page 3: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

2

¡Respetado Estudiante!

Es para nosotros de gran satisfacción hallar este mecanismo de trabajo para contactarlo,

puesto que nuestra forma habitual de encuentro ha cambiado producto de la pandemia

COVID-19 que afrontamos en el país y a nivel mundial. Es una situación que ha afectado,

incluso, a miles de jóvenes estudiantes.

Hoy despertamos con una nueva realidad, nuestra forma de relacionarnos cambió; Por tal

motivo, se ha preparado un material de estudio con la idea de que continúes con tu proceso

de enseñanza aprendizaje.

Recuerda que este material está preparado para darte la oportunidad de mantenerte

enfocado en tus metas profesionales.

Esperamos que la siguiente guía que desarrollaras enriquecerá tus conocimientos en cuanto

a puntos importantes que se consideran para tener conocimiento de una actividad que se

fundamenta en la gestión de proyectos mediante la creación del diseño de páginas web.

Indicaciones Generales:

• Este compendio de guías de auto instrucción se encuentra dirigidos a los estudiantes

que por motivos de: conectividad, y económicos no pueden tener acceso a la

plataforma de Microsoft Teams.

• El estudiante tiene el compromiso de visitar la página web del colegio, cuya dirección

es www.institutorubiano.com y descargar las guías hay publicada, en su dispositivo

(Recuerdo que él no deberá imprimir ningún documento, descarga y resuelve).

• Después de resuelta todas sus guías el estudiante deberá entregarla al profesor(a) de

la asignatura a través del correo institucional del profesor. El estudiante deberá buscar

ese correo institucional del profesor en la Página Web del colegio.

• Las guías tienen como última fecha de entrega del estudiante al profesor en la

semana penúltima antes que finalice el trimestre, esta fecha sería el plazo máximo de

entrega.

• Este compendio de guías es el mismo que el docente ha publicado en la plataforma de

Microsoft Teams para el resto de los estudiantes que no han tenido problemas de

conectividad.

• Solicitamos al Padre de Familia activar su compromiso de supervisión en casa

Page 4: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

3

Guía de Auto Instrucción 1

Objetivos Generales:

- Conoce los Concepto generales del Diseño Web.

- Describe los términos mas comunes utilizaos en el Diseño Web

- Se interesa por los diferentes términos que se utilizan en el diseño Web.

Objetivo Especifico

- Conoce los elementos más importantes del diseño de una página Web

Indicadores de logro:

- Describe adecuadamente los términos más comunes en diseño Web

Tema # 1

Diseño Web y Términos del Diseño Web

El diseño web es una actividad que consiste en la planificación, diseño, implementación y

mantenimiento de sitios web. No es simplemente la implementación del diseño convencional

ya que se abarcan diferentes aspectos como el diseño gráfico web, diseño de interfaz y

experiencia de usuario, como la navegabilidad, interactividad, usabilidad, arquitectura de la

información; interacción de medios, entre los que podemos mencionar audio, texto,

imagen, enlaces, video y la optimización de motores de búsqueda. A menudo muchas

personas trabajan en equipos que cubren los diferentes aspectos del proceso de diseño,

aunque existen algunos diseñadores independientes que trabajan solos.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la

eficiencia de la web como canal de comunicación e intercambio de datos, que brinda

posibilidades como el contacto directo entre el productor y el consumidor de contenidos.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet

especialmente en la World Wide Web. A menudo la web se utiliza como medio de expresión

plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para

ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.

Page 5: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

4

El diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos

en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de

los estándares establecidos por la W3C y en lo referente a la web semántica. Debido a la

permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se

ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas

del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea

universal e independiente del medio que se utilice para ser mostrado.

Las formas para crear un diseño Web son mediante lenguajes de programación como HTML,

PHP, ASP, JavaScript o utilizando programas asistentes de creación de páginas web.

Las páginas web son documentos multimedia porque adhieren imagines, videos,

animaciones, sonidos, textos de todo tipo y son documentos hipertexto, porque asocian

enlaces con otras páginas. Cuando presionamos sobre un hipervínculo de una página web,

visualizamos la página ligada a ese enlace, esa página puede estar en el mismo servidor o

en otro situado a mucha distancia; este procedimiento de ir de una pagina a otra es lo que se

denomina navegación por internet.

Los programas que sirven para visualizar páginas web son los navegadores de Internet,

actualmente los mas utilizados son: Google Chorme, Mozila Firefox, Internet Explorer , Opera

y Safari.

Para crear páginas web necesitamos un editor de texto sencillo como el Bloc de Notas y muy

pocos conocimientos del lenguaje HTML, aprender el manejo de programas de diseño Web

gráficos con FrontPage o Dreamweaver, Estos programas traducen en segundo plano a

código HTML todas las intervenciones del usuario.

Page 6: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

5

Términos utilizados en el diseño Web

A. Banner: Componente grafico con diferentes características, normalmente con

animaciones, cuyo contenido es con fines publicitarios.

B. FTP (Protocolo de Transferencia de Archivo). Es un protocolo de red para la

transferencia de archivos entre sistemas conectados a una red TCP basada en la

arquitectura cliente-servidor.

C. CSS (Cascading Style Sheets): Hojas de estilo en cascada, también conocidas como

plantillas CSS, definen la estructura o forma en que se visualiza un sitoo web en

pantalla.

D. Dominio: Nombre que identifica un sitio web. Cada dominio tiene que ser único. Por

ejemplo www.google.com , un solo servidor we puede servir para múltiples paginas

web de múltiples dominios, pero un dominio solo puede apuntar a u servidor.

E. Editor de Diseño Web: Programa utilizado para diseñar paginas web sin la necesidad

de tener que aprender e lenguaje.

F. Frames(marcos): Espacios rectangulares que permiten dividir las ventanas de algunas

paginas web, cada una de las cuales contiene hipervínculos independientes, pero por

lo general relacionados.

G. Hipervínculos: Enlace web o link, es un elemento de enlace de una pagina web otra

de destino. El destino es con frecuencia otra pagina web. Pero también puede ser una

imagen, una dirección de correo electrónico, un archivo multimedia o un programa.

Un hipervínculo puede ser un texto o una imagen.

H. Hipertexto: Forma de organizar información donde ciertos términos están unidos a

otros mediante links. El hipertexto permite saltar de un punto a otro en un texto o en

otros textos al hacer clic en un link.

I. Hiperlink: Enlace entre dos nodos de un hipertexto.

J. Home Page: La primera página que aparece cuando un usuario entra a un sitio web,

que generalmente tiene links a las demás paginas de internet.

K. Hosting: Servicio que ofrecen algunas compañías en Internet que consiste en ofrecer

un espacio en sus servidores para alojar un sitio web, para que pueda ser accedido en

todo momento de forma online.

Page 7: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

6

L. HTML (Lenguaje de marca de hipertexto): Lenguaje estándar de marcado de

hipertexto que se utiliza para el desarrollo de documentos del World Wide Web.

M. HTTP (Protocolo de Transferencia de Hipertexto): Es el protocolo utilizado para

intercambiar información en la World Wide Web o el procedimiento mediante el cual se

trasladan las paginas web a un servicio de alojamiento web.

N. Imagen: Archivo grafico ue se puede insertar en un pagina web y visualizar en un

explorador Web. Sus extensiones por lo general son: GIF, JPEG, BMP, TIFF, WMF y

PNG entre otros.

O. ISP (Internet Service Provider): Es el entorno del desarrollo de sitios web. Se puede

decir que un ISP es un proveedor de servicios para la web. Los diferentes servicios

que puede ofrecer son: conexión a internet, registro de dominio, hospedajes de sitios

web, servicios de contadores de servicios, libros de visitas gratuitas, estadísticas para

la web, entre otros.

P. Lenguaje de programación: Lenguaje con el que esta desarrollada la página web.

Q. Pagina Web: Documento creado en HTML que hace parte de un sitio web. Además

del HTML se pueden utilizar otros lenguajes complementarios como PHP, ASP,

JavaScript entre otros.

R. Propiedades: Las propiedades son atributos o cualidades de una pagina web como el

título, l dirección URL, el nombre y el valor inicial de un campo de formulario, las

cuales definen su comportamiento. También puede especificar propiedades para

elementos de páginas como tablas, gráficos y elementos activos. El administrador

tiene la atribución de cambiar este comportamiento modificando las propiedades.

S. Servidor: Equipo informático que ofrece alojamiento para páginas web haciendo que

estén accesibles desde cualquier punto de internet.

T. Sitio Web: Página principal y con sus páginas complementarias, que contienen

gráficos, documentos, multimedia y otros archivos asociados que se almacenan en un

servidor Web o en el disco duro de un equipo.

U. Tablas: componente básico para organizar, distribuir los espacios y asignación de

contenidos de una página web.

Page 8: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

7

V. URL (Localizador de recursos universal): Serie que facilita la dirección de Internet de

un sitio Web o un recurso World Wide Web junto con el protocolo, mediante el cual se

tiene acceso al sitio o al recurso. El tipo más común de dirección URL es http://

W. Webmaster: Persona encargada de organizar, elaborar, diseñar, administrar, controlar,

estructurar, maquetar, publicar, promocionar y mantener un sitio web.

Actividad 1: Cuestionario. Las respuestas están en el documento, no tiene que buscar

información en internet. Valor 7 Puntos

1. ¿A que nos referimos con diseño Web?

2. Mencione los aspectos que abarca el diseño web.

3. ¿Qué implica el diseño web?

4. Mencione la forma de crear un diseño web

5. ¿Que son las páginas web?

6. ¿Qué se necesita para crear una página web?

Actividad 2: Coloca cada palabra en cada definición. Valor 9 Puntos.

1. Hospedaje Web _____________________________

2. Nombre que identifica un sitio web. ______________________

3. Persona encargada de crear, diseñar, administrar, controlar, estructurar, maquetar,

publicar, promocionar y mantener un sitio web. _____________

4. Documento creado en lenguaje HTML___________________________

5. Enlace web o link ____________________________

6. Espacios rectangulares que permiten dividir las ventanas de algunas páginas web.

________________________

7. Componente grafico con animaciones cuyo contenido es con fines publicitarios.

___________________________

8. Forma de organizar información donde ciertos términos están unidos a otros mediante

links. ___________________________

9. Localizador de Recurso Universal_______________________

Page 9: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

8

Actividad 3. Defina los siguientes términos. Valor 10 Puntos. Significado buscarlo en el

documento no en Internet

1. Hosting

2. HTML

3. HTTP

4. ISP

5. Servidor

6. Home Page

7. Webmaster

8. URL

9. Imagen

10. Sitio Web

Evaluación

I. Parte. Llene los espacios en blanco. Valor 9 Puntos

1. Editor de texto para crear páginas web: ______________________

2. Dos navegadores de Internet para visualizar páginas Web: ________________,

____________________

3. Programa para el diseño de página Web: ____________________________

4. Mencione dos aspectos que abarca el diseño Web: ____________________,

______________________

5. El diseño web implica______________________________________________

6. Mencione dos términos utilizados en el diseño Web: __________________,

____________________

Page 10: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

9

II. Parte. Pareo. Coloque el numero de la columna A en la columna B. Valor 7 Puntos.

1. CSS ___ Persona encargada de mantener un sitio Web.

2. HTML ___ Equipo que ofrece alojamiento a páginas web

3. HTTP ___ Primera pagina que aparece cuando se entra a un

sitio web

4. ISP ____ Hojas de estilo en Cascada

5. Servidor ____ Lenguaje de marcas de hipertexto

6. Home Page ____ Internet Service Provider

7. Webmaster ____ Protocolo de Transferencia de Hipertexto

III. Parte. Desarrollo. Conteste las siguientes preguntas. Valor 6 Puntos

1. Defina que es el diseño web. Valor 3 Puntos

2. Defina que es una pagina web. Valor 3 Puntos

Page 11: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

10

Guía de Auto Instrucción # 2

Objetivos Generales:

- Conoce e identifica Sitios Web.

- Explora diferentes sitios Web, diferenciando su estructura y manejo de los contenidos

- Conoce diferentes tipos de sitios web

Objetivo Especifico

- Reconoce los tipos de sitios web

Indicadores de logro:

- Diferencia la estructura y el manejo de los contenidos de los tipos de sitios web y las

orientaciones comerciales para las cuales fueron creados.

Tema # 2

Sitios Web

Un sitio web, por lo tanto, es un espacio virtual en Internet. Se trata de un conjunto de

páginas web que son accesibles desde un mismo dominio o subdominio de la World Wide

Web (WWW).

Es importante establecer que en Internet encontramos una gran variedad de tipos de sitios

web que suelen diferenciarse fundamentalmente por la clase de contenido que ofrecen o por

el servicio que brindan a cualquiera de las personas que se encuentran navegando por la

Red.

Un sitio web, por lo tanto, es un espacio virtual en Internet. Se trata de un conjunto de

páginas web que son accesibles desde un mismo dominio o subdominio de la World Wide

Web (WWW).

Es importante establecer que en Internet encontramos una gran variedad de tipos de sitios

web que suelen diferenciarse fundamentalmente por la clase de contenido que ofrecen o por

el servicio que brindan a cualquiera de las personas que se encuentran navegando por la

Red.

Page 12: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

11

Internet funciona con la estrategia cliente/servidor, es decir los servidores son los

ordenadores que ofrecen información o el servicio por solicitud y clientes son los

ordenadores que solicitan la información o el servicio, protocolos TCP/IP(I) que es el

protocolo que transmite la información de internet y el protocolo TCP/IP(II) que es un

conjunto de protocolos e suministran las reglas para comunicarse en internet.

En algunas ocasiones a los términos sitio web y pagina web se les considera sinónimos, pero

no significan lo mismos. La diferencia es que los sitios web son accedidos a través de una

dirección URL, utilizando un navegador web y la página web es parte de ese sitio.

Además, el sitio web posee una página de inicio en ingles llamada Home Page, esta primera

página es el documento que observa el usuario al entrar al sitio web, colocando el nombre

del dominio de ese sitio web en la barra de direcciones del navegador.

En algunas ocasiones se utiliza erradamente el termino página web para referirse a sitio web.

Una página web también es llamada página de Internet que es un documento acomodado

por la web que forma parte en un sitio web, en donde se encuentran diferentes tipos de

contenidos como textos, imágenes, enlaces, plugins entre otros. Los hiperenlaces a otras

páginas es su principal característica, siendo la base fundamental de una web, mientras que

un sitio web es un conjunto de archivos llamados páginas web.

Tipos de Sitios Web

La clasificación de las páginas Web se dan por diferentes parámetros como:

A. Según la visibilidad de Contenido:

a. Intranets: es una red informática que utiliza la tecnología del protocolo de Internet

para compartir información, sistemas operativos o servicios de computación dentro

de una organización. Suele ser interna, en vez de pública como internet, por lo que

solo los miembros de esa organización tienen acceso a ella.

b. Extranets: Una extranet es una red privada que utiliza protocolos de Internet,

protocolos de comunicación y probablemente infraestructura pública de

comunicación para compartir de forma segura parte de la información u operación

propia de una organización con proveedores, compradores, socios, clientes o

cualquier otro negocio u organización.

c. Sitios Webs públicos: Es un sitio web de información pública producido para ser

utilizado por todos los usuarios.

Page 13: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

12

B. Según la actividad que realizan las paginas web se dividen en :

a. Publicitarias: Pagina que tiene por objetivo principal dar a conocer la empresa y

divulgar sus servicios.

b. Sociales: Pagina web en donde los usuarios comparten información digital como

por ejemplo los foros, blogs, redes sociales y otros.

c. Comercial: Sitio web que tiene como objetivo promocionar las ventas de los

productos.

d. Buscadores: Pagina web destinada para que los usuarios realicen búsquedas

avanzadas de cualquier tópico como Google, Bing y Yahoo!.

e. Informativas: Pagina web con contenidos actualizados permanente mente por

personal de la empresa a la que pertenece dicho sitio como periódicos, información

del tiempo, bolsa, otros.

C. Según la actualización del contenido se divide en:

a. Páginas Web estáticas: Son paginas fundamentalmente informativas y orientadas

a mostrar una información permanente por lo que los contenidos no se pueden

alterar, en estas paginas no se requiere programación, ni se utilizan las bases de

datos. Para diseñarlas es suficiente utilizar lenguaje HTML y construirlas con

hipervínculos o enlaces(links) entre las paginas que conforman el sitio. Tiene la

ventaja de que es económica crearlas y son una opción mas que suficiente para

aquellas paginas web que simplemente ofrecen una descripción general de las

actividades. Las páginas web estáticas cuentan con las siguientes características:

◼ No tienen movimiento y funcionalidades

◼ Absoluta opacidad a los deseos o búsquedas del visitante a la página.

◼ Diseñadas en código XHTML O HTML

◼ Es imprescindible acceder al servidor donde esta alojada la pagina para

cambiar sus contenidos.

◼ Ninguna posibilidad por parte del usuario de seleccionar, ordenar o modificar

los contenidos o el diseño de la pagina a su gusto.

◼ El proceso de actualización es lento y básicamente manual.

◼ Las funcionalidades como base de datos, foros entre otros, no se pueden

utilizar.

Page 14: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

13

b. Página Web Dinámicas: Estas páginas web se generan de la información

presentada a partir de la petición del usuario de la página y sus contenidos varían

constantemente. En las paginas dinámicas la información aparece inmediatamente

después de una solicitud hecha por el usuario, esto es posible porque una página

dinámica tiene asociada una base de datos desde la que se le permite visualizar la

información contenida en ella. Estas de permiten la creación de aplicaciones dentro

de la propia Web, ofrecen también, una mayor interactividad con los usuarios que

la visiten permite la creación de aplicaciones como encuestas, y votaciones, foros

de soporte, libros de visita, envío de emails inteligentes, reserva de productos,

pedidos on-line y atención al cliente de manera personalizada. Permiten almacenar

y hacer actualizaciones de la información contenida en la misma, así como también

modificaciones dinámicas de la estructura y del diseño por parte de su propietario.

Entre sus características podemos encontrar:

◼ Mas posibilidades en su diseño y desarrollo

◼ Permiten al visitante alterar el diseño, contenidos o presentación de la página.

◼ Utilizan varios lenguajes de programación como Perl, CGI, PHP, JSP y ASP y

técnicas de programación

◼ El proceso de actualización es sumamente sencillo, sin necesidad de entrar en

el servidor.

◼ Admite varias funcionalidades como base de datos, foros, contenido dinámico y

otro.

◼ Pueden ser diseñadas con software de libre distribución.

◼ Cuenta con una amplia comunidad de programadores que brindan apoyo

desinteresado.

◼ Contiene gran numero de soluciones prediseñadas de libre disposición.

Page 15: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

14

D. Según su función se dividen en:

a. Páginas Web transaccionales, e-comercio o commerce: Pagina web que se utiliza

para la compra y venta de servicios o productos a través de un medio electrónico

como internet y otras redes informáticas.

b. Página Web orientadas al servicio: Esta orientada a brindar información sobre

productos y servicios con el objetivo de estimular a los clientes para que terminen

el proceso de compra offline.

c. Páginas web dirigidas a la construcción de una marca: Es una pagina que ofrece la

experiencia para afianzar la imagen de la marca es muy utilizada por marcas de

productos de consumo masivo y de precios bajos como alimentos, bebidas,

productos de higiene, etcétera.

d. Página Web de Contenido: Son páginas que el producto principal es su contenido,

proveen información a sus usuarios para que accedan a ellas, generan ingresos de

distintas formas pero la vía más popular actualmente es la publicidad.

Actividad 1: Realizar un resumen de una hoja que contenga la definición de sitios web, tipos

de sitio web considerando los cuatros grupos escritos en el documento y cada uno de sus tipos.

Valor 10 Puntos.

Actividad 2: Desarrollo. Conteste las siguientes preguntas Valor 15 Puntos (tres puntos cada

una)

1. ¿Como funciona internet con la estrategia Cliente/Servidor?

2. ¿Cuál es la importancia de la página web orientadas al comercio electrónico?

3. ¿Cuál es la diferencia entre un sitio web y una página web?

4. Mencione y defina las páginas que encontramos según actividad

5. Mencione y defina las paginas según la actualización de contenido.

Page 16: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

15

Evaluación

I. Pareo. Coloca al lado de cada enunciado de la columna B las letras de la columna A con que

se relaciona.

A. Página web dinámicas ___ Páginas web utilizadas para la compra y venta de

productos o servicios a través de medios

electrónicos como internet y otras redes

informáticas.

B. Buscadores ___ Muestra una información permanente.

C. Páginas web estáticas ___ Página web en donde los usuarios comparten

información digital

D. Páginas web orientadas ___ Pagina web con fines privados, limitado a un

Número al comercio electrónico

determinado de personas.

E. Sociales ___ Pagina web establecida en una red privada con

fines empresariales u organizacionales

F. Extranets ___ Pagina web destinada para que los usuarios

realicen búsquedas avanzadas de cualquier

tópico.

G. Intranets ___Pagina web que tiene como objetivo principal dar

a conocer la empresa y divulgar sus servicios.

H. Publicitaria __ Pagina web que genera la información

presentada a partir de la petición del usuario

Page 17: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

16

Guía de Auto Instrucción # 3

Objetivos Generales:

- Describe los elementos de accesibilidad incluidos en diferentes paginas Web.

- Conoce de los beneficios que ofrece la accesibilidad web

Objetivo Especifico

- Reconoce las consideraciones sobre accesibilidad

Indicadores de logro:

- Reconoce los elementos de accesibilidad que se incluyen en las paginas Web,

instaurados por el estándar W3C.

- Reconoce las consideraciones de accesibilidad que se incluyen en las paginas web,

instauradas por el estándar de la W3C.

Page 18: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

17

Tema

Consideraciones sobre Accesibilidad (W3C)

A. ¿Qué significa W3C?

El W3C es una comunidad internacional e independiente que desarrollan protocolos y

estándares para el desarrollo web (WCAG 1.0 y WCAG 2.0) y así ayudar a un mejor

crecimiento del Internet a nivel mundial, también crean las especificaciones de HTML, CSS,

entre otros.

B. ¿Qué es la accesibilidad Web?

La Accesibilidad web se puede definir como el acceso universal a la web por cualquiera

persona con algún tipo de discapacidad, se hace referencia un diseño web que permitirá que

las personas con algún tipo de discapacidad puedan percibir, entender, navegar e interactuar

en la Web, aportando a su vez contenidos a la capacidad de acceso a la web y a sus

contenidos por todos los usuarios, independientemente de las limitaciones del individuo

(discapacidades, idioma, conocimiento, experiencias, entre otros), de las características de

su equipo de navegación o desde donde accede a la web.

Page 19: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

18

Aumenta el capital humano de las comunidades de aprendizaje

potenciando la inteligencia colectiva.

BENEFICIOS DE LA ACCESIBILIDAD WEB

Page 20: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

19

C. Pautas de Accesibilidad al Contenido Web

En la actualidad las pautas más importantes son las pautas de accesibilidad al contenido web

desarrollados por el W3C, donde se señala que el diseño web debe seguir requerimientos

mínimos de accesibilidad web, la cual requerirá de pautas que se detallan a continuación de

acuerdo a WCAG 1.0 y WCAG 2.0 (creadas por la W3C), las cuales hablan de la accesibilad

del contenido en la web para personas con discapacidad auditiva y visual:

Pautas de accesibilidad del Contenido en la Web 1.0

Pauta explicación

1. Proporcione alternativas equivalentes para el contenido visua auditivo.

Los textos alternativos al contenido visual o auditivo benefician a personas con discapacidad (visual y auditiva) y aquellos usuarios que deciden anular la descarga de imágenes o sonido.

2. No se base en el color Los textos y gráficos deben comprenderse s9n necesidad de ver los colores.

3. Utilice marcadores y hojas de estilo apropiadamente.

El control de la presentación de los contenidos se debe realizar con hojas de estilo en vez de los elementos y atributos de presentación.

4. Identifique el idioma usado. Se debe indicar el idioma predominante en cada pagina y marcar aquellas expresiones que se encuentren en otra lengua, utilizando marcadores que faciliten la pronunciación o interpretación de texto abreviado o extranjero.

5. Cree tablas que se transformen correctamente.

Las tablas solo se utilizan para marcar información (tabla de datos), al utilizarla con otros fines puede crear dificultades para los usuarios que utilizan lectores de pantalla.

6. Asegúrese que las paginas que incorporen nuevas tecnologías se transformen correctamente.

Una página basada en tecnologías modernas tiene que accesible al desconectarla o al visualizarla con navegadores antiguos.

7. Asegure al usuario el control sobre los cambios de los contenidos tempodependientes.

El movimiento de los objetos o páginas, su parpadeo o actualización automática deben ser controlados por el usuario. Las personas con

Page 21: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

20

discapacidad (auditiva y visual) no pueden leer texto en movimiento.

8. Asegúrese que la accesibilidad directa de las interfaces cruzadas

Cuando el objeto incrustado tiene su propia interfaz debe ser accesible.

9. Diseñe para la independencia del dispositivo.

El usuario puede interactuar con la aplicación del usuario o el documento con un dispositivo de entrada o salida preferido (mouse, teclado, etc)

10. Utilice soluciones provisionales. Las alternativas accesibles solo son imprescindibles hasta que los antiguos navegadores y las ayudas técnicas operen correctamente.

11. Utilice las pautas y tecnologías W3C.

Se recomiendan para incluir características accesibles incorporadas y se utilizan como base para crear contenidos accesibles.

12. Proporcione información de contexto y orientación.

Ayuda al usuario a comprender paginas o elementos complejos

13. Proporciones mecanismos claros de navegación.

Estos mecanismos facilitan a todos los usuarios la búsqueda de aquella información que necesitan (fundamental para discapacitados cognitivos y visuales) como mapa web, ayuda, barra de navegación, ect.

14. Asegúrese que los documentos sean claros y simples

La utilización de lenguaje claro y simple facilita la comunicación de la información. La comprensión del documento depende de la maquetación de la pagina y los gráficos

Page 22: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

21

D. Pautas de la WCAG 2.0

Principio pauta explicación

Principio 1 Perceptibilidad: La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de manera que puedan percibirlos. Principio 2. Operabilidad: Los componentes de la interfaz de usuario y la navegación deben ser operables.

Pauta 1.1 Alternativas Textuales. Pauta 1.2 Contenido multimedia dependiente del tiempo. Pauta 1.3. Adaptabilidad Pauta 1.4. Distinguible Pauta 2.1. Accesible a través del teclado Pauta 2.2. Tiempo Suficiente Pauta 2.3. Ataques Pauta 2.4. Navegable

Proporcione alternativas textuales para todo contenido no textual de manera que pueda modificarse para ajustarse a las necesidades de las personas. Proporcione alternativas sincronizadas para contenidos multimedia sincronizados dependientes del tiempo. Cree contenidos que puedan presentarse de diversas maneras, sin perder la información ni su estructura. Haga más fácil para los usuarios ver y oír el contenido incluyendo la separación entre primer plano y fondo. Haga que toda la funcionalidad este disponible a través del teclado. Proporcione a los usuarios el tiempo suficiente para leer y usar un contenido. No diseñe un contenido de manera que se sepa que puede causar ataques. Proporcione medios que sirvan de ayuda a los usuarios a la hora de navegar, localizar contenido y determinar donde se encuentra.

Page 23: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

22

Principio Pauta Explicación

Principio 3. Comprensibilidad: La información y manejo de la interfaz de usuario deben ser comprensibles. Principio 4 Robustez: El contenido debe ser lo suficientemente robusto como para confiarse en su interpretación por parte de una amplia variedad agentes de usuarios incluidas las tecnologías asistidas.

Pauta 3.1. Legible Pauta 3.2. Predecible Pauta 3.3. Ayuda a la entrada de datos Pauta 4.1 Compatible

Haga el contenido textual legible y comprensible. Cree paginas web cuya apariencia y operabilidad sean predecibles. Ayude a los usuarios a evitar y corregir errores. Maximice la compatibilidad con agentes de usuarios actuales y futuros, incluyendo tecnologías asistidas.

El uso de las pautas de WCAG 1.0, son poco utilizadas, ya que se recomienda utilizar las

pautas de WCAG 2.0, ya que al utilizar estas pautas en el diseño de paginas web pueden

hacer que el contenido web sea mas usable para los usuarios en general y para el mayor

rango de personas con discapacidades que incluyen ceguera o visión deficiente, sordera,

deficiencia de aprendizaje, limitaciones cognitivas, movilidad reducida, deficiencia del

lenguaje y las combinaciones de todas estas.

Aunque es posible la conformidad con las pautas WCAG 1.o como con las pautas 2.0 el W3C

recomienda que los contenidos nuevos y actualizados apliquen las pautas 2.0

Page 24: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

23

E. Consideraciones que debe tomar en cuenta el diseñador web para el buen

funcionamiento de la página.

Las consideraciones sobre accesibilidad hacen referencia a la facilidad de uso, ya sea de n

sitio web, de una aplicación informática o de cualquier otro sistema que interactúa con el

usuario, independientemente de las limitaciones del usuario o del dispositivo empleado para

ello.

Es importante que el diseñador web debe tomar en cuenta algunas consideraciones para el

buen funcionamiento de la pagina como:

◼ Destinatarios:

Se refiere a los usuarios a la audiencia o a la población a la que se intenta alcanzar o influir

con el sitio web y esto va a depender mucho de la naturaleza del sitio que se plantea. Dentro

de los destinatarios encontramos:

Personas con

Dificultades

Auditivas:

Individuos con

deficiencia auditiva

parcial o total.

Personas con

Dificultades Visuales:

Individuos con

limitaciones visuales,

ceguera y daltonismo

Personas con Dificultades

Motrices:

Individuos con problemas

de Parkinson, parálisis

cerebral, distrofia muscular

o amputaciones

Personas con

Dificultades Cognitivas:

Individuos con dislexia,

discalculia, u otros

problemas que limitan

el aprendizaje como

déficit de memoria, de

atención y de

habilidades lógicas.

Personas de la Tercera

Edad:

Adulto Mayor con

impedimentos físicos a

consecuencia del pasar

de los años.

Importante:

La Adecuación se manifestará en

los contenidos y en la manera en

que se presentan en los servicios

y secciones que ofrecen en el

entorno de comunicación.

Page 25: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

24

◼ Estructuras de Navegación:

La estructura de navegación tiene que ver con la forma que tendrá el sitio Web,

como sus secciones, funcionalidades y el sistema de navegación, en donde los

usuarios pueden ir de una página a otra dentro del sitio web utilizando el sistema

de hipervínculos. La estructura constituye la página principal y con base a esta se

establecen los hipervínculos que van ligados a las demás páginas que se generen,

utilizando el lenguaje de programación HTML y luego se debe organizar la

configuración de la estructura de navegación que se quiere utilizar. La estructura

de un conjunto de páginas web es muy importante, ya que una buena estructura

permitirá al lector visualizar todos los contenidos de una manera fácil y clara. Las

relaciones de las paginas entre si, configuran la estructura del sitio.

◼ Tipos de Estructura

Al comenzar a diseñar el sitio web debemos organizarlo como primer paso

considerando tener en cuenta cual va a ser el propósito del sitio web, sus

contenidos y la audiencia que dispondrá del sitio. Los contenidos son los que van a

determinar la estructura de la Web, indicando de los siguientes tipos de estructura

es el mas adecuado para usar:

a. Estructura Lineal o lista: Es la estructura

más simple, en que se navega de una

página a la siguiente o a la anterior,

como si se estuviera leyendo un libro.

Esta estructura es muy útil cuando se

quiere que el visitante siga un esquema

guiado, fijo y secuencial, evitando que se

distraiga o pierda con enlaces a otras

páginas. Se recomienda par tutoriales de

aprendizaje o tours de visitas guiadas.

Page 26: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

25

d. Estructura red: Esta constituida por

paginas relacionadas entre si que

permiten una navegación libre y sin

limitaciones en sitios especializados

con temas específicos.

e. Estructura Radial: La navegación radica

exclusivamente desde la pagina principal

con enlace a una secundaria y de la

secundaria solo se puede retornar a la

principal, no hay enlace entre las

secundarias y solo puede acceder a otra

secundaria desde la página principal.

b. Estructura Jerárquica o de Árbol: Lleva un

orden jerárquico en forma de árbol donde

existe una pagina principal en la cual se

encuentran las diferentes secciones que

contiene el sitio web. Permite al usuario

moverse fácilmente por las paginas

permitiendo controlar completamente la

navegación.

c. Estructura Lineal-jerárquica o mixta: Es

una mezcla de las dos anteriores partes

de una pagina principal de la que accede

a otras secciones lineales. Se suelen

encontrar en sitios web de educación

online(e-learning)

Page 27: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

26

◼ Mapa de Sitio Web

Un mapa de sitio web o índice de sitio web es un mapa web que permite al

usuario encontrar todo aquello que se encuentra en la pagina de la forma mas

sencilla, también podría definirse como un listado que contiene enlaces a

diferentes paginas web del mismo sitio web, representado grafica o

textualmente en forma organizada mediante una estructura conceptual.

◼ Espacio disponible y distribución del contenido

Cuando se publica un pagina web en internet que es visitada por cualquier

persona alrededor del mundo, se requiere contratar un servicio de web hosting,

también llamado hospedaje web, que quiere decir hospedar o alojar, es el

espacio o lugar que ocupa en un servidor de internet un sitio web que contenga

cualquier tipo de información como archivos, imágenes, videos, correos

electrónicos o cualquier contenido accesible vía web. A cada hosting se le

asigna un espacio en el disco duro del servidor, a ese espacio se le denomina

espacio disponible.

Al seleccionar al proveedor del hospedaje Web es importante que se haga de

manera cuidadosa, asegurando el acceso seguro y rápido a los datos que se

utilizan (fotografías, textos, videos, otros) se guardan en un servidor.

Page 28: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

27

◼ Tipos de Alojamiento web en Internet

De acuerdo con las necesidades específicas del usuario podemos mencionar

varios tipos de alojamiento como:

Tipo de Alojamiento Web Explicación

Gratuito Es un alojamiento limitado con respecto al alojamiento por pago, agregan mucha publicidad a los sitios y cuentan con espacio en disco, intercambio de datos extremadamente limitados.

Almacenamiento de imágenes

Es por lo general un alojamiento gratuito y permite almacenar imágenes en internet, subsisten con base a la publicidad.

Compartido Comparte el servidor con cientos , miles o millones de usuarios constituyéndose en un servicio económico con buen rendimiento, pero las fallas ocasionadas por el usuario afectan a los demás reduciendo así el desempeño de los recursos del servidor, la velocidad, la seguridad y estabilidad del sistema.

Revendedor Tiene un servidor dedicado a grandes cantidades de espacio y de dominios diseñado para individuos que venden estos espacios a otros dominios.

Servidores virtuales privados

Permite administrar los dominios de manera sencilla y barata, se puede elegir el software que se desea ejecutar en el servidor, funciona como una máquina virtual que controla una computadora, va dirigida especialmente a empresas de diseño y programación.

Servidores dedicados Son aquellos en el que un solo el cliente dispone de todos los recursos del sistema para lograr los objetivos por los que haya contratado dicho servicio, no se comparten los recursos.

Alojamiento Administrativo

Se goza de excelente soporte técnico permanente, permitiendo solucionar serios problemas de errores en la ejecución y funcionamiento, conllevando a un servicio mas costoso.

Alojamiento no Administrativo

Es un alojamiento limitado en conectividad, recursos, herramientas y asesoría, no brinda soporte técnico para las dificultades que se presenten a nivel del sistema, dejándole esta responsabilidad a la Web maestra.

Page 29: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

28

Colocación En este servicio el usuario elige el servidor y el hardware a utilizar, la empresa solo le ofrece la conexión a Internet le alquila o vende el espacio físico de un centro de datos para que el usuario use su propia computadora.

Alojamiento en la nube Ofrece un sistema conectado a un grupo de medios de almacenamiento (pc, correo electrónico dispositivos móviles) con tecnología innovadora, almacenamiento ilimitado, disponibilidad en tiempo real y soluciones flexibles.

◼ Diseño Independiente de la Resolución

El diseño de las paginas se debe adaptar a cualquier resolución de pantalla en la cual se

toma en cuenta el uso de plantillas web que son páginas webs prediseñadas o pre-

elaboradas en las que solamente se tienen que añadir contenidos, ayudando a desarrollar

mas rápido la idea y se pueda ahorrar tiempo.

Es importante considerar una hoja de estilo que contempla definiciones de formato (tipo de

fuente, tamaño, color de la fuente, color de fondo, párrafos, otros) de las distintas etiquetas

que forman una página. Esto se refiere al modo en que aparecerá la pagina en pantalla

cuando el usuario utilice un navegador o explorador gráfico, controlando por ejemplo el color,

el fondo, tipo de fuente, apariencia de los bordes, márgenes, alineación y espacio entre

caracteres.

Page 30: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

29

Actividad 1 Lectura Comprensiva

Historia de la W3C

El Consorcio World Wide Web (W3C) es una comunidad internacional donde

las organizaciones Miembro, personal a tiempo completo y el público en general trabajan

conjuntamente para desarrollar estándares Web. Liderado por el inventor de la Web, Tim

Berners-Lee y el Director Ejecutivo (CEO) Jeffrey Jaffe, la misión del W3C es guiar la Web

hacia su máximo potencial.

El Consorcio W3C lleva a cabo la de desarrollar estándares de calidad, mediante un proceso

efectivo y claro uniendo las organizaciones, el personal y la comunidad.

Los Miembros y un grupo de expertos técnicos, han hecho posible que el W3C sea

reconocido a nivel internacional por su contribución en el desarrollo de la Web, además, las

diferentes organizaciones de todo el mundo que forman parte del W3C, lo hacen con la

intención de participar en el foro de manera neutral para la creación de los estándares Web.

El W3C desarrolla estándares relacionados con la Web también conocidos

como Recomendaciones, que sirven como referencia para construir una Web accesible,

interoperable y eficiente. El proceso seguido por el Consorcio promueve la justicia,

responsabilidad y el progreso: todas las características de la misión del W3C.

La finalidad de los estándares es la creación de una Web universal, accesible, fácil de

usar y en la que todo el mundo pueda confiar. Con estas tecnologías abiertas y de uso

libre se pretende evitar la fragmentación de la Web y mejorar las infraestructuras para que se

pueda evolucionar hacia una Web con la información mejor organizada.

Page 31: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

30

Algunos de los estándares Web más conocidos y ampliamente utilizados

son: HTML (HyperText Markup Language), para definir la estructura de los

documentos; XML (eXtensible Markup Language), que sirve de base para un gran número de

tecnologías; y CSS (Cascading Style Sheets), que permite asignar estilos para la

representación de los documentos.

Estos estándares, están sujetos a la Política de Patentes del W3C, lo que permite que

sean utilizados libremente por toda la comunidad Web. Al utilizar las mismas tecnologías, las

máquinas se entienden entre sí y cualquier usuario puede interactuar con el resto.

Preguntas

1. ¿Qué es el Consorcio World Wide Web (W3C)?

2. ¿Cuál es la finalidad de los estándares?

3. Mencione los estándares más conocido

Actividad 2: Desarrollo

1. Realizar un mapa conceptual sobre los tipos de estructura de diseño web, tomando en

cuenta como concepto principal Estructuras de Diseño Web, y unir cada estructura con

palabras de enlaces (se define como, son…) al concepto principal. No es copiar toda la

información es resaltar lo más importante de cada estructura de diseño web. Valor 10

Puntos.

2. Al tener en sus manos un dispositivo móvil o teléfono inteligente dentro de las aplicaciones

del mismo cuentas con almacenamiento web en la nube el cual esta ligado a tu correo

electrónico que creaste en el dispositivo. Revisa tu dispositivo en la sección de Google,

explica con tus palabras que es para ti Google Drive y Fotos.

3. Explica con tus palabras que es un alojamiento en la nube y cual es la diferencia entre

alojamiento gratuito y un alojamiento compartido.

Page 32: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

31

Actividad 3. Pareo

Coloca al lado de cada enunciado de la columna B con las letras de la columna A. Valor 10

Puntos

A. Estructura Jerárquica ___ Se suele encontrar en sitios Web de educación

online.

B. Estructura lineal-Jerárquica ___ Es la estructura mas simple.

C. Estructura Radial ___ navegación radica exclusivamente desde la

pagina principal con enlace a una secundaria y

de la secundaria solo se puede retornar a la

principal.

D. Estructura Lineal ___ Lleva un orden jerárquico en forma de árbol.

E. Alojamiento dedicado ___ Permite almacenar imágenes en internet.

F. Alojamiento compartido ___ Sistema conectado a un grupo de medios de

almacenamiento.

G. Colocación ___ Es un alojamiento limitado en conectividad,

recursos

H. Alojamiento no Administrado ___ El usuario elige el servidor y el hardware a

utilizar

I. Alojamiento en la nube ___ Comparte el servidor con cientos, miles o

millones de usuarios

J. Alojamiento de imágenes ___ Solo el cliente dispone de todos los recursos del

sistema

Evaluación

I.Parte. Llene los espacios en blanco. Valor 11 Puntos

1.La _______________________ hace referencia a la capacidad de acceso de la web y a

sus contenidos por todos los usuarios, independientemente de las limitaciones del individuo

(discapacidades, idioma, conocimiento, experiencia, entre otros)

2. Mencione tres beneficios qque ofrece la Accesibilidad Web:

__________________________________________________________________________

Page 33: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

32

__________________________________________________________________________

__________________________________________________________________________

3. Menciona tres pautas de accesibilidad al contenido en la Web 1.0

_________________________________________________________________________

_________________________________________________________________________

_________________________________________________________________________

4.Mencione los cuatros principios en que se agrupan las Pautas de Accesibilidad de

contenido Web 2.0 (WCAG 2.0)

_____________________________________________________________________

_____________________________________________________________________

_____________________________________________________________________

_____________________________________________________________________

_____________________________________________________________________

_____________________________________________________________________

_____________________________________________________________________

_____________________________________________________________________

II.Parte. Identificación. Coloca en el recuadro el nombre del tipo de estructura de navegación

que corresponde al diseño.

Page 34: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

33

III. Parte. Desarrollo:

1. Explica tu opinión respecto a cada una de las pautas de accesibilidad al contenido de la

Web del Principio 2: Operabilidad: Los componentes de la interfaz de usuario y la navegacion

deben ser operables.

Guía de Auto Instrucción # 4

Objetivos Generales:

- Define las diferentes etapas del diseño web

Objetivo Especifico

- Desarrolla las diferentes etapas para diseñar un sitio Web.

Indicadores de logro:

- Reconoce cada una de las etapas de un diseño Web.

Page 35: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

34

Tema # 4

ETAPAS PARA DISEÑAR UN SITIO WEB

Antes de comenzar un proyecto para la creación de un sitio web se debe tener en cuenta una serie de etapas que son importantes, a continuación las etapas para el diseño exitoso y efectivo de un sitio web:

A. Planificación: La planificación es una tarea necesaria, se planea desde el primer momento el desarrollo del proyecto, analizando que sea apropiado para la funcionalidad que se requiere y así obtener el éxito con dicho sitio. Cuando se planifica se debe considerar:

B. Establecer Objetivos: Se definen los principales objetivos que se quiere alcanzar según la información que se va a incluir en el sitio web y que está directamente relacionada con el éxito del diseño, considerando ¿Divulgar información?, ¿Promocionar una asociación?, ¿Comercio electrónico?, ¿educar?, ¿entretenimiento?

Definir claramente el

objetivo y proposito del

sitio web.

Entender a su audencia y

sus necesidades actuales y a

futuro.

Asignar los temas y

contenidos que le

gustaria cubrir.

Decidir como se llamara el

sitio.

Hacer un analisis de lo

que otros sitios han

hecho.

Comprobar la disponibilidad

del nombre de dominio y registrarlo.

Page 36: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

35

C. Especificación de requisitos: Se describen los requisitos que debe cumplir un sitio web para su publicación como los siguientes:

❖ Dominio: Es el nombre que identifica al sitio web, conformado por tres partes como www que hace referencia a internet, seguidas por el nombre de la organización y finalmente por el tipo de organización .com, .es, .net, .org, entre otros.

❖ Alojamiento web: Permite a los usuarios consultar la información publicada en el sitio cuando se accede mediante el dominio.

❖ Editor de página web: Es el lenguaje que se emplea para el desarrollo de páginas de internet, está compuesto por una serie de etiquetas que el navegador interpreta y da forma en la pantalla, utilizando lenguajes como HTML, PHP,ASP,JSP,PYTHON, RUBY.

❖ Posicionamiento SEO: Consiste optimizar la estructura del contenido para mejorar la posición en que aparece la página web en determinada búsqueda.

❖ Propiedad intelectual y Marcas: El contenido de la web es susceptible de protección. Por una parte, están los contenidos protegibles por la via de propiedad intelectual y lo importante que es registrar la marca para proteger la inversión que se haga sobre ella y evitar conflictos futuros.

❖ Condiciones Generales de contratación: Es recomendable establecer las condiciones generales de contratación, en la que se establezcan los términos del contrato.

❖ Seguridad Informática: Es necesario que se adopten los mecanismos para qque no haya caídas ni fallas en el sistema, se debe tener la seguridad del que el sistema este sólidamente protegido frente accidentes y ataques externos.

Page 37: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

36

D. Análisis de las necesidades: Antes de diseñar una página web se tiene que analizar a fondo las necesidades reales del usuario, para sacar el proyecto, considerando las siguientes:

E. Recolección de la Información: En esta etapa se recolecta la información que se va a colocar en la página web y cosiste en investigar todos los datos posibles sobre teoría y técnica de creación de sitios web abarcando bibliografía, normativa, navegación y análisis de sitios que pueden ser imitados. En esta actividad debe haber interacción con los líderes de la empresa para producir un documento que sirva de orientación efectiva y no se escapen detalles en la consecución del proyecto Web.

F. Diseño y estructura de la información: Se define la estructura y la forma que tendrá el sitio web con sus secciones, categorías, funcionalidades y sistemas de navegación que puede ser lineal, de árbol, jerárquica o en red. Existen diversos tipos de estructuras estándares de páginas web que especifican la posición de los menús de navegación y el contenido, manteniéndose esta estructura y diseño durante toda la navegación por el sitio web. La estructura del diseño web por lo general se encuentra dividida en:

Negocios: Dar a conocer la empresa, productos y

servicios

Comercio Electronico: Se utiliz la pagina web como

una herramienta de venta.

Imagen Corporativa: Se utuliza para mantener

una imagen profesional y positiv a en la mente del

consumidor.

Servicio: Sitio web que ofrecer a a sus clientes a

traves de un sitio web para descargar manuales,

tutoriales y videos.

Page 38: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

37

❖ Encabezado: Es una franja horizontal que está ubicada en la parte superior de la página web, va acompañado por un logotipo y por los enlaces que permite el acceso a las otras páginas del sitio.

❖ Cuerpo: Es la parte importante de la interfaz donde se presentan los contenidos al

usuario y prácticamente esta toda la información de la página web exhibida al público como temas específicos, identificando e individualizando de esta manera el sitio frente a los demás.

❖ Columnas de exploración: Sirven para ubicar elementos tan importantes como los enlaces, publicidad, navegación interna, contenidos secundarios, informaciones adicionales y los datos de contactos.

❖ Pie de Página: Es la franja horizontal ubicada en la parte inferior de la página web, donde se encuentran algunos elementos importantes como el autor, los derechos de copia, las políticas de acceso, asuntos legales, enlaces a sitios internos y externos relacionados entre otros.

❖ Espacio negativo: Es el espacio en blanco que carece de información, ayuda a mantener el balance y equilibrio en el diseño del sitio web, impidiendo así la saturación e ilegibilidad de contenidos.

G. Implementación: Tiene por objetivo mejorar las funcionalidades, agregar o editar los

contenidos que aparecerán visibles y hacer las pruebas correspondientes para que la pagina funcione correctamente. Cuando un proyecto web se encuentra en el momento de la implementación generalmente esta alojada en un servidor, y la pagina no es visible para el público en general, esta fase denomina Beta. La versión Beta del proyecto estará colgada en un entorno de desarrollo donde el programador realiza las ultimas adecuaciones para que se publique. Cuando esta fase finaliza se requiere una aprobación por parte del cliente o aquellos que utilizaran la página para darse a conocer. Al aprobarse el proyecto se pasa a la migración del servidor. La web se traslada del entorno de desarrollo a un alojamiento o host de una empresa, allí se aloja todo el contenido de la página junto con el diseño y la programación todo en un paquete. En este proceso se debe comprar un dominio web que solamente la dirección que en la barra de direcciones del navegador. No debe confundirse host con dominio, host es el alojamiento web y dominio es la dirección web. Realizado este proceso la migración de la web pasara a estar publicada en la red.

Page 39: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

38

Comprobar la existencia de

problemas de usabilidad

Buscar posibles soluciones a los

problemas que se detecten

Obtener una medida concreta

inicial de la usabilidad que

permitirá comparar los resultados

ante competidores, una

modificación o rediseño, futuros

desarrollos, entre otros.

La usabilidad es la cualidad

de los objetos o sistemas

interactivos que pueden ser

usados con comodidad y

satisfacción, permitiendo

bienestar tecnológico los

usuarios.

H. Pruebas de usuario: Es una medida empírica de la usabilidad de una herramienta, sitio Web o aplicación, tomada a partir de la observación sistemática de usuarios que realizan unas determinadas tareas. Estas pruebas permiten:

I. Publicación y Mantenimiento: Se sitúa el sitio web a disposición del público mediante un

servidor de internet. Se realiza por medio del protocolo de transmisión de archivos

(FTP), subiendo la web con todos sus archivos multimedia referenciados (imágenes,

animaciones, audios, otros) desde el equipo local hasta un servidor web. La exclusividad

del espacio se consigue con un nombre de usuario y una contraseña que son datos

esenciales de administrador del servidor web.

El mantenimiento ayuda para indicar mejoras a adoptar, solucionar posibles incidencias

o simplemente actualizar los contenidos o el diseño de la web cuando sea necesario.

Las tareas que se llevan a cabo para el mantenimiento de un pagina web son las

siguientes:

Con la prueba de usuario los Webmasters o maestros de la Web pueden darse

cuenta muchas dificultades en la usabilidad de un sitio, corregir los errores que

se generen y proceder a depurarlos.

1. Revisar periódicamente la funcionalidad de la página web.

2. Realizar acciones en caso de presentarse alguna dificultad.

3. Detectar y bloquear virus informáticos que atenten contra la seguridad de la página.

4. Control del rendimiento y velocidad para evitar que la saturación los visitantes de la

página generen una sobrecarga.

5. Eliminación de la basura cibernética que genera el tráfico de navegación en

internet.

6. Corregir los errores que no hayan sido detectados en las fases de prueba de la

página web.

7. Actualización constante de los contenidos del sitio web.

Page 40: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

39

Actividad 1 Valor 10 Puntos

1. Realiza un mapa conceptual sobre la etapas del diseño web que se encuentran en

este documento.

Actividad 2 Valor 20 Puntos

2. En la etapa de especificación de requisitos, explica cada uno de los requisitos que

debe cumplir un sitio web. Valor 10 Puntos

3. Haga la estructura de una pagina web de acuerdo al diseño y estructura de la

información que se encuentra en este documento. Valor 10 Puntos

Actividad 3 Valor 10 Puntos

Hacer un glosario de 10 terminos que usted elija de este tema de etapas del diseño web.

Evaluación:

I.Parte. Complete los espacios: Escriba las respuestas en las líneas indicadas. Valor 14

Puntos

1. Mencione cuatro consideraciones que se debe tener cuando se planifica un sitio web.

________________________________________________________________________

________________________________________________________________________

________________________________________________________________________

________________________________________________________________________

________________________________________

2. Nombre que identifica el sitio web:______________________________

3. Al hosting en en español se le conoce como :__________________________

4. Menciona las partes en que se encuentra dividida la estructura del diseño web:

________________________________________________________________________

________________________________________________________________________

Al publicar una pagina web siempre hay que tener presente el mantenimiento

que es la fase importante que permite que la página web continúe cumpliendo

con sus objetivos permanentemente, se puede contratar un servicio de

mantenimiento o efectuarlo uno mismo si se tiene los conocimientos apropiados

y la disposición del tiempo.

Page 41: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

40

________________________________________________________________________

________________________________________________________________________

________________________________________________________________________

__________________________________________________

5. Menciona cuatro tareas que se llevan a cabo en la etapa de mantenimiento de una

pagina web:

________________________________________________________________________

________________________________________________________________________

________________________________________________________________________

________________________________________________________________________

________________________________________

Desarrollo Valor 10 Puntos

1. Al conocer las etapas del diseño de una pagina web, explica con tus palabras cada

una de las etapas.

Autoevaluación

Criterios 5 4 3

Estuve bien informado del contenido desarrollado

Logre el indicador de logro propuesto

Me ubique en un lugar adecuado para realizar la guía didáctica.

Page 42: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

41

Bibliografía

Informática 12, Autora, Licda. Marleida Cedeño de Cortes, editorial Susaeta

Page 43: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

3

Page 44: MINISTERIO DE EDUCACIÓN DIRECCIÓN DE EDUCACIÓN DE SAN ... · trasladan las paginas web a un servicio de alojamiento web. N. Imagen: Archivo grafico ue se puede insertar en un pagina

1