R.A. 2.2 Creación de páginas web dinámicas.

 Creación de bases de datos en mysql y php.

2.-Encuadre

La utilización  de este blog tendrá las siguientes recomendaciones: 

1. Trate de adecuar su mensaje a cada entrada y a los temas específicamente tratados en cada caso. 
2. No se debe usar el blog como canal de ‘chat’. Los mensajes que se publican deben ser de interés general y no para comunicarse entre un grupo reducido de usuarios.
3. No poner groserías 
4. Presentación del módulo aqui
5. Imprimir el portafolio de evidencias para la siguiente sesión y contestar he imprimir la evaluación diagnóstica aqui
6. guía pedagógica   clic aqui 
7. el programa aqui
8. Otros materiales de apoyo didactico  del conalep aqui

1.2 A. Identificación de las Normas mínimas B) Uso de Normas C) Establecimiento del entorno

A.-Normas mínimas que facilitan el acceso

• • €Peso de las Páginas.
• • €Diagramación de las Páginas.
• • €Uso de Presentaciones en Flash.
• • €Uso de Marcos o Frames.
• • €Uso de imágenes de fondo.
• • €Uso de meta tags adecuados.

Una de las características que hace tan popular a la tecnología web es su facilidad para

mostrar contenidos de manera gráfica y para vincular de manera fácil documentos de

diferentes orígenes. No obstante, para que esta simpleza pueda darse efectivamente,

es necesario que quienes desarrollan sitios y contenidos en esta plataforma, cumplan

con ciertos estándares que aseguren que la mayor parte de los usuarios podrán ver lo

que se publica.

Para ello, es de suma importancia que los sitios que se construyan cumplan

efectivamente con ciertas características de publicación que permitan conseguir dos

objetivos muy concretos:

• Que las páginas se desplieguen rápidamente y sin dificultades técnicas

en los computadores de los usuarios;

• Que las páginas puedan ser visualizadas por los usuarios de la misma

manera en que sus autores las han construido.

Para conseguir ambos objetivos, es necesario que quienes construyan los Sitios Web

hagan uso de un conjunto de buenas prácticas que se han obtenido de la experiencia en

la construcción de este tipo de contenidos digitales, y también, que se aseguren de

cumplir con estándares mundiales en este ámbito, los que serán presentados en este

capítulo.

Buenas Prácticas
Agrupamos en esta área una serie de recomendaciones extraídas de la experiencia en el
desarrollo de Sitios Web de todo tipo, que permiten asegurar una buena experiencia de
los usuarios que los visitan.

Normas Mínimas para Facilitar el Acceso Vía Conexión Telefónica
La visualización de los Sitios Web depende de la transmisión de datos entre dos
computadores, por lo que es importante optimizar la cantidad de información que se
envía entre ambos, de tal manera que quien la recibe pueda verla adecuadamente.
Lo anterior se expresa en cinco áreas de recomendaciones muy concretas:

1. Peso de las Páginas

Los Sitios Web deben tener un peso máximo permitido por página que no supere una

cantidad razonable de kilobytes (kb) que impidan su visualización. En este sentido, lo

razonable dependerá directamente del tipo de sitio que se esté desarrollando y de la

conexión con la que cuente la mayor parte de los usuarios.

Por ejemplo, si se trata de un sitio dedicado a usuarios de regiones extremas que tienen

una conexión muy lenta, 50 kb será un tamaño considerable, respecto de si se compara

eso con usuarios que se conecten en una ciudad del centro del país.

No obstante, se puede estudiar cuánto se demora en que una página llegue

completamente al computador de un usuario si se calcula lo siguiente:

a. Si un módem transmite a 56 kbps (kilobits por segundo) significa que por

cada segundo de transmisión, en condiciones ideales, es capaz de enviar

7 kb (kilobytes) de información.

b. Si una página pesa 70 kb, en condiciones ideales demorará 10 segundos

en aparecer completa en el computador del usuario.

c. Aunque no hay información técnica consistente para establecer la

velocidad promedio de un módem, puesto que depende de diversas

variables técnicas, la experiencia indica que éstos se conectan

habitualmente a la mitad de su valor declarado. Entre las variables que

afectan la calidad de la conexión se cuentan la capacidad del

computador, la congestión de las redes y el nivel de visitas del servidor,

entre otras.

d. Dado lo anterior, la página de 70 kb señalada en el ejemplo anterior,

tardaría 20 segundos en desplegarse completamente.

Con esa evidencia, la pregunta que debe hacerse cualquier desarrollador de sitios, es si

sus usuarios estarán dispuestos a esperar todo el tiempo que se demora una página web

en bajar completamente.

Como lo más probable es que la paciencia de los usuarios se agotará más rápido que su

deseo por acceder a la página que tarda en desplegarse, es necesario preocuparse de

que el tamaño de las páginas siempre tienda a bajar y no a aumentar.

Las normas internacionales al respecto indican que un usuario no esperará más de:

• 5 segundos para que aparezca algo visible en la pantalla
• 10 segundos para que aparezca algo legible en la pantalla
• 30 segundos hasta hacer un click hacia otra parte del sitio o hacia otro
sitio

Nota: El rendimiento de una conexión a Internet nunca es del 100%. Hay que tener en
cuenta que en estos tipos de conexiones (Módem analógico, RDSI, ADSL) se utilizan
diversos protocolos (PPP, TCP/IP) que ocupan ancho de banda (entre un 2% y un 20% del
100% total, según el tipo de conexión y protocolo utilizado), con lo que se reduce el
ancho de banda útil para la descarga de datos. El resultado que se muestra en las
pruebas de velocidad de conexión existentes (por ejemplo en
http://testacceso.es.tdatacenter.com/) corresponde al ancho de banda útil, esto es, equivale
a la velocidad de transferencia de información, y no a la velocidad de acceso.
Adicionalmente, existen otros factores que no pueden ser medidos y que contribuyen a
reducir la velocidad de la conexión, como son la congestión en la red, interferencias
electromagnéticas, etc., que también afectan al resultado final.

2. Diagramación de las Páginas

Aunque existen nuevas tecnologías para la diagramación de las páginas web (como las
Hojas de Cascadas de Estilo o CSS), lo habitual es que los contenidos que se muestran se
dispongan en tablas con el fin de que cada elemento ocupe el lugar que se le ha
asignado dentro de la página.
Al respecto se recomienda construir una estructura de presentación de los contenidos
que se pueda fragmentar en varias tablas:
De esa manera, cuando el sitio se presente en el programa visualizador del cliente,
siempre mostrará la primera tabla (que normalmente llevará el logotipo y la
identificación del sitio) de manera rápida, dando al usuario la sensación de haber
llegado al destino elegido. Luego en las siguientes tablas se van poniendo los restantes
elementos del sitio.
En la figura 1 se puede ver que el sitio está construido en tres tablas, de acuerdo al
siguiente orden:

• Tabla 1: Muestra el logotipo de la institución, la fecha y el menú del
sitio.

• Tabla 2: Muestra las Secciones del Sitio más los contenidos de diferente
nivel.


• Tabla 3: Muestra el pie de la página con la identificación corporativa de
la institución.

[D] Figura 1: Ejemplo de tablas para separar contenidos y conseguir despliegue rápido.
Hay que recordar que los estudios sobre acceso a Sitios Web indican que el usuario
espera que al primer segundo después de haber hecho clic sobre un enlace o haber
ingresado una dirección en un programa visualizador, ya quiere ver alguna reacción y
notar que algo está ocurriendo.
Por lo anterior se debe evitar a todo lugar las tablas generales que incluyen en sí
mismas a otras (tablas anidadas), ya que el programa visualizador usará una parte del
tiempo en calcular esa relación de dependencia entre las tablas, antes de mostrar algo
útil en la pantalla.
En la figura 2 se puede ver que el sitio está construido en tres tablas interiores, que son
agrupadas por una tabla general; también en la zona de Contenido 1 se dispuso una
tabla que permite incluir una foto junto al contenido:

[D] Figura 2: Ejemplo de tablas anidadas que dificultan el despliegue rápido.

3. Uso de Presentaciones en Flash

Si se desea hacer una presentación en tecnología Flash de Macromedia para la portada
del sitio, se recomienda no hacerlo directamente en la portada. Un ejemplo concreto
de hacerlo se muestra en la siguiente imagen:

[D] Figura 3: Ejemplo de página inicial para evitar la Presentación en Flash
La razón para evitar el uso de Flash en la portada es que su uso recarga la presentación
del sitio y si la presentación no está bien hecha, puede impedir el acceso de los robots
de búsqueda al interior del mismo. Si eso ocurre, los contenidos del sitio no serán

indexados en los buscadores que emplearán los usuarios para buscar información sobre
los temas que la institución desea comunicar.
La buena práctica en este sentido es ofrecer una portada con la identificación de la
institución y dos enlaces: uno para ver la presentación y otro para ingresar
directamente al sitio. Adicionalmente se debe ofrecer la información que sea necesaria
para que los usuarios puedan ver el contenido sin experimentar problemas; dentro de
esto se cuenta un enlace para obtener el plug-in necesario.
Dado lo anterior y como pocos usuarios estarán dispuestos a ver repetidamente la
presentación, se recomienda utilizar esos recursos en el interior del sitio, para mostrar
con una tecnología de animación aquellos contenidos en los que desee poner énfasis o
para explicar procesos que gráficamente resulten atractivos y que en texto sea difícil
dar a conocer.

4. Uso de Marcos o Frames

La tecnología de marcos o frames consiste en agrupar varios archivos para que se
desplieguen de manera simultánea, permitiendo a los usuarios ver varios contenidos al
mismo tiempo.
En el ejemplo siguiente se puede ver gráficamente cómo se hace el despliegue de
dichos archivos:

[D] Figura 4: Ejemplo de uso de frames para desplegar contenidos simultáneos.
Esta tecnología tiene aspectos positivos y negativos, que detallamos brevemente:
Positivos:

• Permite tener ciertos contenidos presentes todo el tiempo, como un
cabezal o menú.

• Facilita la navegación ya que el usuario nunca pierde de vista dónde se
encuentra.

Negativos:

• Impide que el usuario pueda marcar una página como favorita
(bookmark) porque nunca se le muestra cuál es su dirección web.
• Cuando un usuario llega a un contenido desde un enlace provisto por un
buscador, verá el sitio sin los otros marcos y no sabrá cómo navegar en
él.
• La existencia de varios archivos en uno genera una carga mayor para el
usuario que llega al sitio; eso lo obliga a esperar a que aparezcan todos
los contenidos de los archivos para poder usarlo.

Debido a lo anterior y salvo que sea muy necesario, esta forma de organizar los Sitios
Web debe desecharse para pasar a sitios de interfaz contenida en un solo archivo.

5. Uso de Imágenes de background

Una tecnología muy popular que se puso de moda en el año 1996 cuando el software
Netscape Navigator lo implementó, fue el uso de imágenes como fondos o backgrounds
de las páginas web.
Salvo casos en que sea estrictamente necesario, esta práctica debe ser dejada de lado
porque su único efecto es el de agregar un paso excesivo a los sitios, afectando el
tiempo de descarga y acceso a la información.

6. Uso de meta tags Adecuados

Los meta tags son marcas en lenguaje HTML que van en la parte superior del código
fuente de cada página, a través de las cuales se entrega a los sistemas de indexación y
búsqueda, la información mínima para hacer una correcta indexación del contenido que
incluye.
Vea el Anexo 2 sobre el uso de Meta Tags [59Kb].
Los meta tags son un conjunto de elementos que obedecen a un estándar definido por
el World Wide Web Consortium por lo que su uso está regulado y mediante los cuales
redescribe información concreta sobre la página, tal como título, autor, descripción,
idioma y otros. Los más importantes, aunque no los únicos, son los siguientes:
• <title>Nombre del Sitio o
Institución</title>
• <meta name="title" content="Nombre del
Sitio o Institución">
• <meta name="description"
content="Descripción del Sitio o
Institución">
• <meta name="keywords" content="Palabras
claves del Sitio o Institución">
Adicionalmente sobre este tema se ha dado en los últimos años un trabajo de
estandarización muy importante a través del grupo Dublín Core que ha definido los
elementos meta tags a usar y que deben ser consultados en http://www.dublincore.org.

B. Uso de las Normas requeridas en la
incorporación de elementos gráficos y
multimedia.

• €Optimización del peso de las imágenes.
• €Formato de imágenes.
• €Ubicación de imágenes.
• €Uso del atributo ALT.
• €Imágenes con alto y ancho.
• €Manejo de Plugins.

Normas para Incorporar Elementos Gráficos y Multimediales

Cuando en un Sitio Web se incorporan elementos gráficos y multimediales, se deben
seguir normas muy concretas para evitar que su peso afecte el desempeño de la página
cuando sea solicitada por los usuarios del Sitio Web.
A continuación entregamos algunas recomendaciones tendientes a asegurar la correcta
inclusión de dichos elementos:

Optimizar el peso de las imágenes:

 Se debe bajar al máximo posible el
peso de las imágenes; cuando esto no sea posible hacerlo por su tamaño,
se debe reducir el número de colores disponibles y la resolución (72 dpi
es la norma).

Elegir el formato adecuado:

 Ante un mismo tamaño de imagen, el peso
varía dependiendo de si son procesadas para desplegarse en formato GIF
respecto del formato JPG. Normalmente una imagen con colores planos
(como un icono) tendrá un peso menor si se guarda en GIF respecto de si
es guardada en JPG. Lo contrario ocurrirá con una imagen con muchos
colores diversos (como una foto). Se recomienda probar ambos formatos
para determinar el óptimo.

Ubicación de imágenes: 

Se recomienda usar un solo directorio para
almacenar las imágenes repetidas, tales como los iconos y otros
elementos gráficos que son utilizados en diferentes páginas del sitio. Al
ubicarlos en un directorio único se puede aprovechar la función de caché
del programa visualizador para mejorar el rendimiento de las páginas.
Para efectos de seguridad, se recomienda impedir que un programa

visualizador pueda ver el contenido de dicho directorio o cualquier otro
dentro del sitio.

Usar el atributo ALT en imágenes: 

en el código HTML se debe usar el
atributo ALT (texto alterno) en las imágenes para que éste se despliegue
antes que las imágenes y facilite de esta forma la comprensión del
contenido a los usuarios.

 Imágenes con alto y ancho: 

Las imágenes (dibujos, fotos, iconos,
botones) deben tener tamaño para el ancho y el alto, para que el
programa visualizador pueda dejar reservado el espacio para dicho
contenido antes de que se realice su despliegue visual.

Ofrecer plug-ins: 

cuando se utilizan archivos multimediales que requieren
el uso de plugins (programas visualizadores especiales) para revisarlos,
se recomienda poner el programa para ser bajado u ofrecer un enlace a
lugares donde obtenerlo. Esto es especialmente válido en sitios que
ofrecen presentaciones de portada en tecnología Flash, las cuales deben
ser anunciadas para que el usuario tenga la opción de verlas o avanzar
directo al sitio.

 Indicar el peso de los archivos:

 Cuando se ofrecen elementos gráficos o
audiovisuales para que sean bajados al computador personal por el
usuario (especialmente en Video, Audio, Flash u otros), se recomienda
indicar el peso de los mismos, con el objeto de ofrecerle información útil
para efectuar la operación.

C.-Establecimiento del entorno para el
desarrollo de un sitio web.

• €Herramientas para el desarrollo.
• €Planificación del trabajo.
• €Elementos gráficos y multimedia.

Herramientas para el desarrollo

Fases: diseño y maquetación Adobe photoshop: Esta aplicación sólo está disponible en
Windows, y es el más caro, aunque es el más usado y gracias a ello dispone de una gran
comunidad de usuarios con los que poder contar ante cualquier problema. Con él
crearemos el diseño, así como las imágenes que usemos en la maquetación. GIMP: Es
el equivalente de software libre más próximo a Photoshop. Al ser libre es posible
conseguirlo gratuitamente, y de hecho cualquier distribución GNU/Linux lo incluye. Al
igual que en Photoshop, con él podremos crear el diseño y las imágenes de la
maquetación HTML. También disponible en Windows Fase: maquetación INKSCAPE: El
equivalente en Windows es Adobe Fireworks. Es un excelente editor gráfico vectorial con
el que poder crear iconos, banners, y demás dibujos de forma muy fácil y sencilla, incluso
para aquellos que no tengan demasiados conocimientos en edición gráfica digital. Adobe
Fireworks: El editor de gráficos vectoriales más fácil de usar que he tenido la oportunidad
de usar, aunque no lo eché de menos cuando descubrí Inkscape. Al igual que su
compañero Photoshop es muy caro, y más aún si tenemos una gran alternativa gratuita
como es Inkscape. Fases: maquetación, programación cliente Dreamwever, Aptana,
Amaya: Estas herramientas las describí en mi anterior artículo sobre los principales
editores web del mercado, así que os remito a él para más información. Con ellos
crearemos el código HTML/CSS (maquetación), siendo Aptana la opción más profesional
para la programación cliente (Javascript). Fase: programación servidor Zend Studio: Sin
duda el mejor IDE existente en el mercado para desarrollo web con PHP. Es comercial,
aunque no demasiado caro teniendo en cuenta la excelente herramienta que es. Además
es posible descargarlo desde la web de Zend para probarlo durante 30 días. Con él
crearemos fácilmente la aplicación web en PHP. Aunque podremos usar igualmente
cualquier editor. Una muy buena alternativa es Eclipce con el plugin PHP. Otra
aplicación muy útil que está muy ligada a Zend Studio es Zend Plantform, un módulo
para Apache que permite depurar una web directamente en el navegador (Internet
Explorer o Firefox), además de otras funciones más complejas, como alertas
configurables para que nos envíe un email por cada error ocurrido en la web, o cuando
un script sobrepase un tiempo determinado de ejecución, por ejemplo. Fase: prueba
local Apache Instalar un servidor web Apache en la máquina donde desarrollamos es
fundamental. De esta manera haremos pruebas rápidamente: editamos un fichero PHP,
vamos al navegador, actualizamos, y vemos los cambios. Fases: pruebas en local,
depuración Firefox /Firebug/ web devoloper extension Firefox es sin duda la mejor
herramienta creada en los últimos tiempos para los desarrolladores web, y con Firefox

sus dos extensiones más útiles para nuestra profesión: Firebugy Web devoloper. Con
Firebug podremos depurar Javascript, editar HTML y CSS en la misma página para ver
los cambios en tiempo real, consultar los tiempos de carga de la página en conjunto, de
las imágenes, javascripts, hojas de estilo, etc, así como sus tamaños, etc. Y Web
Developer nos ofrece herramientas muy útiles como ver las cookies de la web, ocultar
imágenes, cambiar el tamaño del navegador a resoluciones estándar, etc. Subir ficheros
al servidor del hosting Una vez hayamos concluido todas las fases anteriores, y nuestro
proyecto esté listo, deberemos subirlo al servidor del hosting. La herramienta a utilizar
dependerá de las opciones que nos ofrezca el hosting, que desgraciadamente en la
mayoría de los casos es solamente el antiguo FTP. En Dreamweaver y Zend Studio
tenemos un cliente FTP y SFTP (SSH), y la tarea consistirá simplemente en configurar el
FTP y copiar y pegar los directorios que queramos subir. Confío en que esta guía sirva
de ayuda a la hora de afrontar un desarrollo web. Hay que tener muy en cuenta las fases
de desarrollo y usar las herramientas adecuadas: la que nos resulte más fácil de usar, la
más económica, la que mejor conozcamos, etc.

Planificación del trabajo

El trabajo de desarrollo de una página web comienza con el proceso de definición de una
estrategia y unos objetivo del sitio web, continúa con el diseño (en el que se define el
aspecto y el funcionamiento de la web) y avanza hasta la fase de producción y desarrollo
(durante la cual se crea la web); la funcionalidad se comprueba para ver si se cumplen
los objetivos establecidos y, al final, se publica el sitio). Planificar sitios Web Es un tópico
pero no deja de ser verdad: planificacion y organizacion bien desde el primer momento
ayuda a ahorrar tiempo más adelante. La organización del sitio implica mucho más que
determinar el lugar en el que irá cada archivo: la planificación del sitio implica también
investigar los requisitos que debe cumplir el sitio, el perfil de la audiencia y los objetivos
de la web. Además, debe tener en cuenta requisitos técnicos tales como el acceso de los
usuarios, los navegadores, ... Una vez que haya organizado la información y que haya
determinado una estructura operativa, podrá comenzar a crear el sitio. Determine qué
estrategia va a emplear y cuáles son los aspectos relativos a los usuarios que debe tener
en cuenta durante la planificación del sitio. Utilice el “mapa del sitio” de Dreamweaver
para establecer la estructura organizativa del sitio. En la ventana Sitio de Dreamweaver
puede añadir, borrar y renombrar los archivos y carpetas fácilmente para cambiar la
organización de la estructura. Consulte Introducción a la administración del sitio y la
colaboración. Cuando la creación y el desarrollo de la página web se haga entre varias
personas: Establezca sistemas que impidan que personas que puedan acceder a la
página que Vd. Está desarrollando sobrescriban archivos; consulte Configurar el sistema
de desprotección/protección. Utilice Design Notes para comunicarse con otros miembros
del equipo de desarrollo Web. Organizar la estructura del sitio web organizar la pagina
web cuidadosamente desde el primer momento puede ahorrarle frustración y tiempo más
adelante. Si comienza a crear documentos sin pensar en la jerarquía a la que
corresponden, puede terminar con una enorme carpeta llena de archivos y difícil de
administrar, o con archivos relacionados repartidos por media docena de carpetas con
nombres similares. La forma habitual de crear un sitio consiste en crear una carpeta en el
disco local con todos los archivos del sitio (lo que se conoce como sitio local) y crear y
editar los documentos dentro de dicha carpeta. Después podrá copiar dichos archivos en

un servidor web cuando esté preparado para publicar el sitio y permitir al público que lo
vea. Este enfoque es mejor que crear y editar archivos en la propia página web en vivo,
ya que le permite comprobar cambios en el sitio local antes de hacerlos públicos y,
cuando haya terminado, cargar los archivos del sitio local y actualizar todo el sitio público
de una vez. Divida la página web en categorías. Coloque las páginas relacionadas en
una misma carpeta. Utilice subcarpetas cuando sea necesario. Este tipo de organización
facilitará el mantenimiento y la navegación por el sitio. Decida dónde desea colocar
elementos como imágenes y archivos de sonido. Los diseñadores sitúan a veces todos
los elementos que desean utilizar en un sitio y que son ajenos a HTML en una carpeta
llamada Activos. Diseñar el esquema de navegación Otra área en la que merece la pena
planificar es la navegación. Cuando diseñe su página web, piense en la experiencia que
le gustaría que tuvieran sus visitantes. Las búsquedas y los índices facilitan a los
visitantes la localización de la información que están buscando. Diseñe la apariencia que
tendrá la navegación. La navegación debe ser homogénea en todo la web. Si sitúa una
barra de navegación a lo largo de la parte superior de la página principal, intente
mantenerla en ese lugar en todas las páginas vinculadas.

Elementos y gráficos multimedia

Una pequeña introducción a multimedia dentro del mundo de computación y los elementos que conforman su estructura.
El término Multimedia en el mundo de la computación es la forma de presentar información que emplea una combinación de texto, sonido, imágenes, vídeo y animación.
<img height="122" alt="Multimedia"<br /> src="/images/cds.jpg" width="103" class="lateral"/>Entre las aplicaciones informáticas multimedia más comunes podemos mencionar juegos, programas de aprendizaje y material de referencia.
La mayoría de las aplicaciones multimedia incluyen asociaciones predefinidas conocidas como
hipervínculos o enlaces, que permiten a los usuarios moverse por la información de modo intuitivo.
La conectividad que proporcionan los hipertextos hace que los programas multimedia no sean
presentaciones estáticas con imágenes y sonido, sino una experiencia interactiva infinitamente variada e informativa.
Las aplicaciones multimedia son programas informáticos, que suelen estar almacenados en CD-ROMs y claro que pueden residir en páginas de Web.
La vinculación de información mediante enlaces se consigue mediante programas o lenguajes informáticos especiales como el HTML empleado para crear páginas web.
Las aplicaciones multimedia suelen necesitar más memoria y capacidad de proceso que la misma
información representada exclusivamente en forma de texto.
Una computadora multimedia también necesita memoria adicional para ayudar al CPU a efectuar cálculos y permitir la representación de complejos gráficos en la pantalla. Además necesita un disco duro de alta capacidad para almacenar y recuperar información multimedia, así como una unidad de cd-rom o acceso al web para obtener los archivos necesarios.
ELEMENTOS VISUALES
Cuanto mayor y más nítida sea una imagen, más difícil es de presentar y manipular en la pantalla de
una computadora.
Las fotografías, dibujos, gráficos y otras imágenes estáticas deben pasarse a un formato que el ordenador pueda manipular y presentar. Entre esos formatos están los gráficos de mapas de bits y los gráficos vectoriales.
Los gráficos de mapas de bits almacenan, manipulan y representan las imágenes como filas y columnas de pequeños puntos. En un gráfico de mapa de bits, cada punto tiene un lugar preciso definido por su fila y su columna. Algunos de los formatos de gráficos de mapas de bits más comunes son el Graphical Interchange Format (GIF), el Tagged Image File Format (TIFF) y el Windows Bitmap (BMP).
Los gráficos vectoriales emplean fórmulas matemáticas para recrear la imagen original.
En un gráfico vectorial, los puntos no están definidos por una dirección de fila y columna, sino por la
relación espacial que tienen entre sí.
Como los puntos que los componen no están restringidos a una fila y columna particulares, los gráficos vectoriales pueden reproducir las imágenes más fácilmente, y suelen proporcionar una imagen mejor en la mayoría de los monitores.
Entre los formatos de gráficos vectoriales figuran el Encapsulated Postscript (EPS), el Windows Metafile
Format (WMF), el Hewlett- Packard Graphics Language (HPGL), archivos de Macromedia
href="http://www.maestrosdelweb.com/editorial/multime/flash" >Flash (SWF) y el formato Macintosh para archivos gráficos, conocido como PICT.
Para obtener, formatear y editar elementos de vídeo hacen falta componentes y programas informáticos especiales. Los archivos de vídeo pueden llegar a ser muy grandes, por lo que suelen reducirse de tamaño mediante la compresión.
Algunos formatos habituales de compresión de vídeo son el Audio Video Interleave (AVI), el Quicktime y el Motion Picture Experts Group (MPEG o MPEG2).
Estos formatos pueden comprimir los archivos de vídeo hasta un 95%, introduciendo diversos grados de borrosidad en las imágenes. Las aplicaciones multimedia también pueden incluir animaciones. Éstas son especialmente útiles para simular situaciones de la vida real, como por ejemplo el movimiento de un vehículo automotor.
La animación también puede realzar elementos gráficos y de vídeo añadiendo efectos especiales como la metamorfosis, el paso gradual de una imagen a otra sin solución de continuidad.
ELEMENTOS DE AUDIO

El sonido, igual que los elementos visuales, tiene que ser grabado y formateado de forma que la
computadora pueda manipularlo y usarlo en presentaciones.
Algunos tipos frecuentes de formato audio son los archivos de forma de onda (WAV), el Musical Instrument Digital Interface (MIDI), El MPG Layer 3(href="http://www.maestrosdelweb.com/editorial/multime/mp3"
>MP3) y el Transform-domain Weighted Interleave Vector Quantization (
href="http://www.maestrosdelweb.com/editorial/multime/vqf" >VQF).
Los archivos WAV, MP3 y VQF almacenan los sonidos propiamente dichos, como hacen los CD musicales
o las cintas de audio. Los archivos WAV pueden ser muy grandes y requerir compresión, lo que se ha
logrado con el MP3 y el VQF.
Los archivos MIDI no almacenan sonidos, sino instrucciones que permiten a unos dispositivos llamados
sintetizadores reproducir los sonidos o la música.
ELEMENTOS DE ORGANIZACIÓN
Los elementos multimedia incluidos en una presentación necesitan un entorno que empuje al usuario a aprender e interactuar con la información.
Entre los elementos interactivos están los menús desplegables, pequeñas ventanas que aparecen en la
pantalla del ordenador con una lista de instrucciones o elementos multimedia para que el usuario elija.
Las barras de desplazamiento, que suelen estar situadas en un lado de la pantalla, permiten al usuario
moverse a lo largo de un documento o imagen extenso.

o Los hipervínculos o enlaces conectan creativamente los diferentes elementos de una
presentación multimedia a través de texto coloreado o subrayado o por medio de iconos,
que el usuario señala con el cursor y activa pulsándolos con el mouse.

D. Implementación del código XHTML para el desarrollo de páginas Web.  Aplicación de Formato a los siguientes elementos de las páginas web.

Para estos vea la siguiente  página WEBESTILO

Realiza el ejemplo de Primeros pasos y añade una lista de temas y sudtemas

Investiga 

- Tipos de letra
- Párrafos ,negritas,cursivas
- Colores
-Tamaño
Añade al ejercicio estos efectos.

 Creación de Hipervínculos en las páginas web.

- Referencia absoluta
- Referencia relativa

Ejemplo de donde aplicar los tipos de enlaces

       En el siguiente enlace identifica como aplicarlos  Libros web Enlaces

                    Después Realiza lo que tu docente te pida.

 Incorporación de Imágenes y elementos multimedia a las páginas web.
 Listas.
 Tablas.
 Formularios.
 Marcos.

1.-Presentación

Propósito del módulo
Desarrollar sitios web de acuerdo con los estándares internacionales establecidos de diseño y desarrollo web, atendiendo los requerimientos del usuario, para mostrar y actualizar la información contenida en las páginas web, incluyendo la de las bases de datos asociadas, sin importar la localización física del usuario.

Antes de iniciar ,favor de contestar la siguiente evaluación diagnóstica.clic aqui

R.A.-1.1 Determina la estructura del sitio web con base en las necesidades del usuario.

I.- RECURSO O ACTIVIDAD

A. Identificación de elementos Web.

· Internet.
· World Wide Web.
· Navegadores Web.
· Protocolo HTTP.
· Protocolo FTP.
· W3C.
· CSS.

· Lenguajes del lado del usuario.

• HTML.
• JavaScript.
• XHTML
• XML

· Lenguajes del lado del servidor.

• CGI
• Perl
• ASP
• PHP
• DHTML

B. Comprobación de uso de estándares en el

código de programación.

· Validación de HTML.

· Validación de CSS.

C. Determinación de la información del sitio.  

· Definición del objetivo del sitio.

· Definición de la audiencia.

· Definición de contenidos.

D. Diseño de la estructura del sitio.

· Elaboración de mapas del sitio.

· Definición de los sistemas de navegación.

E. Determinación de elementos de los

sistemas de navegación.

· Definición del diseño visual.

· Diseño de las estructuras de las páginas.

· Bocetos de diseño.

· Borradores de página.

· Maqueta Web.
II.-CONTENIDO

A. Identificación de elementos Web.

Internet

Podemos definir a Internet como una "red de redes", es decir, una red que no sólo interconecta computadoras, sino que interconecta redes de computadoras entre sí. De esta manera, Internet sirve de enlace entre redes más pequeñas y permite ampliar su cobertura al hacerlas parte de una "red global".

WWW

En informática, la World Wide Web (WWW) o Red informática mundial^[1] es un sistema de distribución de información basado en hipertexto o hipermedios enlazados y accesibles a través de Internet.

Que son los navegadores

Los navegadores o clientes web son programas que permiten al usuario conectarse con servidores web de Internet para acceder, recuperar y vislumbrar documentos HTML.

Protocolo HTTP

Es un protocolo orientado a transacciones y sigue el esquema petición-respuesta entre un cliente y un servidor. Al cliente que efectúa la petición (un navegador web o un spider) se lo conoce como "user agent" (agente del usuario). A la información transmitida se la llama recurso y se la identifica mediante un localizador uniforme de recursos (URL). Los recursos pueden ser archivos, el resultado de la ejecución de un programa, una consulta a una base de datos, la traducción automática de un documento, etc.

Protocolo FTP

El protocolo FTP define la manera en que los datos deben ser transferidos a través de una red TCP/IP.

El objetivo del protocolo FTP es:

1.            permitir que equipos remotos puedan compartir archivos

2.      permitir la independencia entre los sistemas de archivo del equipo del cliente y del equipo del servidor

3.            permitir una transferencia de datos eficaz

W3C

El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones Miembro [ingles], personal [ingles] a tiempo completo y el público en general trabajan conjuntamente para desarrollar estándares Web [ingles]. Liderado por el inventor de la Web Tim Berners-Lee [ingles] y el Director Ejecutivo (CEO) Jeffrey Jaffe [ingles], la misión del W3C es guiar la Web hacia su máximo potencial..

CSS

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

Programación del lado del usuario

La Programación del lado del servidor es una tecnología que consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web para generar páginas HTML dinámicamente como respuesta.

Todo lo que suceda dentro del servidor es llamado procesamiento del lado del servidor, o server-side processing. Cuando tu aplicación necesita interactuar con el servidor (por ejemplo, para cargar o guardar datos), ésta realiza una petición del lado del cliente (client-side request) desde el navegador, a través de la red usando invocaciones remotas a métodos (remote procedure call, RPC). Mientras se está procesando una llamada RPC, tu servidor está ejecutando código del lado del servidor.

La utilización de las diferentes aplicaciones o servicios de Internet se lleva a cabo respondiendo al llamado modelo cliente-servidor.

Cuando se utiliza un servicio en Internet, como consultar una base de datos, transferir un archivo o participar en un foro de discusión, se establece un proceso en el que entran en juego dos partes. Por un lado, el usuario, quien ejecuta una aplicación en procesador local: el denominado programa cliente. Este programa cliente se encarga de ponerse en contacto con el procesador remoto para solicitar el servicio deseado. El procesador remoto por su parte responderá a lo solicitado mediante un programa que está ejecutando. Este último se denomina programa servidor. Los términos cliente y servidor se utilizan tanto para referirse a los programas que cumplen estas funciones, como a las computadoras donde son ejecutados esos programas. 

El programa o los programas cliente que el usuario utiliza para acceder a los servicios de Internet realizan dos funciones distintas. Por una parte, se encargan de gestionar la comunicación con el computador servidor, de solicitar un servicio concreto y de recibir los datos enviados por éste; y por otra, es la herramienta que presenta al usuario los datos en pantalla y que le ofrece los comandos necesarios para utilizar las prestaciones que ofrece el servidor.

Cuando nosotros seleccionamos un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (una computadora que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente).

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él, por ejemplo: ASP, PHP, JSP.

Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra el HTML sino también el Java y el JavaScript los cuales son simplemente incluidos en el código HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan un pretratamiento.

Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por regla general, los servidores que aceptan páginas con scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy limitadas.

Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto a las versiones del mismo.

Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por regla general, los servidores que aceptan páginas con scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy limitadas.

Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto a las versiones del mismo.

Lenguajes del lado del Servidor.

CGI

Es el sistema más antiguo que existe para la programación de las páginas dinámicas de servidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que destaca la dificultad con la que se desarrollan los programas y la pesada carga que supone para el servidor que los ejecuta.

Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajes como C, C++, Visual Basic o Delphi pueden ser también empleados para construirlos.

Perl

Perl es un lenguaje de programación interpretado, al igual que muchos otros lenguajes de Internet como Javascript o ASP. Esto quiere decir que el código de los scripts en Perl no se compila sino que cada vez que se quiere ejecutar se lee el código y se pone en marcha interpretando lo que hay escrito. Además es extensible a partir de otros lenguajes, ya que desde Perl podremos hacer llamadas a subprogramas escritos en otros lenguajes. También desde otros lenguajes podremos ejecutar código Perl.

ASP

La tecnología ASP (Active Server Pages) está estrechamente relacionada con el modelo tecnológico de Microsoft. Intenta ser solución para un modelo de programación rápida ya que programar en ASP es como programar en Visual Basic, por supuesto con muchas limitaciones.

Este modelo tecnológico usa diversos componentes ya desarrollados como algunos controles ActiveX así como componentes del lado del servidor, tales como CDONTS, por ejemplo, que permite la interacción de los scripts con el servidor SMTP que integra IIS.

Se facilita la programación de sitios web mediante varios objetos integrados, como por ejemplo un objeto de sesión basada en cookies, que mantiene las variables mientras se pasa de página a página.

las versiones pre-.NET se denominan actualmente (desde 2002) como ASP clásico.

En ASP 3.0, hay siete objetos integrados disponibles para el programador: Application,ASPError, Request, Response, Server, Session y ObjectContext. Cada objeto tiene un grupo de funcionalidades frecuentemente usadas y útiles para crear páginas web dinámicas.

Desde 2002, el ASP clásico está siendo reemplazado por ASP. NET, que, entre otras cosas, reemplaza los lenguajes interpretados como VBScript o JScript por lenguajes compilados a código intermedio (llamado MSIL o Microsoft Intermediate Language) como Microsoft Visual Basic, C#, o cualquier otro lenguaje que soporte la plataforma .NET. El código MSIL se compila con posterioridad a código nativo.

PHP

PHP es un lenguaje interpretado de propósito general ampliamente usado y que está diseñado especialmente para desarrollo web y puede ser incrustado dentro de código HTML.

Generalmente se ejecuta en un servidor web, tomando el código en PHP como su entrada y creando páginas web como salida. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno.

Aunque todo en su diseño está orientado a facilitar la creación de página web, es posible crear aplicaciones con una interfaz gráfica para el usuario, utilizando la extensión PHP-Qt o PHP-GTK.

También puede ser usado desde la línea de órdenes, de la misma manera como Perl o Python pueden hacerlo, a esta versión de PHP se la llama PHP CLI (Command Line Interface).

Cuando el cliente hace una petición al servidor para que le envíe una página web, el servidor ejecuta el intérprete de PHP. Éste procesa el script solicitado que generará el contenido de manera dinámica (por ejemplo obteniendo información de una base de datos). El resultado es enviado por el intérprete al servidor, quien a su vez se lo envía al cliente.

Mediante extensiones es también posible la generación de archivos PDF, Flash, así como imágenes en diferentes formatos. Permite la conexión a diferentes tipos de servidores de bases de datos tales como MySQL, Postgres, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird y SQLite.

PHP también tiene la capacidad de ser ejecutado en la mayoría de los sistemas operativos, tales como UNIX (y de ese tipo, como Linux o Mac OS X) y Windows, y puede interactuar con los servidores de web más populares ya que existe en versión CGI, módulo para Apache, e ISAPI.

JSP

JSP es un acrónimo de Java Server Pages o Páginas de Servidor Java. Es, pues, una tecnología orientada a crear páginas web con programación en Java.

Con JSP podemos crear aplicaciones web que se ejecuten en variados servidores web, de múltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma. Por tanto, las JSP podremos escribirlas con nuestro editor HTML/XML habitual.

DHTML

DHTML no es precisamente un lenguaje de programación. Más bien se trata de una nueva capacidad de la que disponen los navegadores modernos, por la cual se puede tener un mayor control sobre la página que antes.

Cualquier página que responde a las actividades del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML, pero en este caso nos referimos más a efectos en el navegador por los cuales se pueden mostrar y ocultar elementos de la página, se puede modificar su posición, dimensiones, color, etc.

DHTML nos da más control sobre la página, gracias a que los navegadores modernos incluyen una nueva estructura para visualizar en páginas web denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc.

Para realizar las acciones sobre la página, como modificar la apariencia de una capa, seguimos necesitando un lenguaje de programación del lado del cliente como Javascript o VBScript.

En la actualidad, DHTML también puede englobar la programación en el servidor.

 B.- Comprobación de uso de estándares en el código de programación 

¿QUE ES UN VALIDADOR?

Validación de html

Es un sistema basado en Internet y presentado en el propio sitio del W3C (http://validator.w3.org/) y que permite detectar errores en la forma de utilizar el lenguaje HTML y XML en la construcción de un Sitio Web. Lo interesante del programa es que muestra en detalle los errores del código en la página que se pruebe, con lo cual se puede llegar a una directa corrección de los problemas que se hayan detectado.

La importancia de tener un código correctamente validado es que se asegura, a partir de esa certificación, que la página web puede ser vista sin problemas, desde cualquier programa visualizador que cumpla con los estándares internacionales en la materia.

Validación de css

 Es un sistema basado en Internet y presentado en el propio sitio del W3C (http://jigsaw.w3.org/css-validator/) mediante el cual se puede validar la sintaxis de una Hoja de Estilo en Cascada (Cascade Style Sheet o CSS, en inglés), mediante la cual se describe la forma de presentar contenidos en una página web.

Este programa muestra en detalle los errores del CSS en la página que se pruebe, con lo cual se pueden aislar los problemas y hacer la corrección correspondiente. Cabe indicar que la ventaja de usar la tecnología CSS es que facilita la mantención de un sitio mediante la separación de la presentación (diseño) del contenido.
 ir a  www.w3c.es.para saber de los lineamientos que declara la w3c.

Veamos un ejemplo 1.1 para validar código html:
<HTML> 
<HEAD> 
<TITLE>Ejemplo 1</TITLE> 
</HEAD> 
<BODY> 
Hola mundo 
</BODY> 
</HTML> 

Estructura básica de un documento HTML: Cabecera y cuerpo del documento

Tres son las tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.

• <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.



• <HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de él. En head no hay que colocar nada del texto del documento.



• <BODY>: Encierra el resto del documento, el contenido.

Pasa el ejemplo en un bloc de notas,RECUERDA pasar las etiquetas en minúsculas y verifica el código en el validador html sugerido por la página.

NOTA.-añade el siguiente código al inicio para que no se detecten errores e investiga el porque de este código y por que varia según la versión .

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

C. Determinación de la información del sitio.  

Arquitectura de la información 

Entre las metodologías más útiles que tendrán los profesionales encargados de desarrollar un Sitio Web, se contarán las que aparecen descritas dentro de la Arquitectura de la Información, que es el conjunto de métodos y herramientas que permiten organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa. La Arquitectura de Información estará cumpliendo sus objetivos cuando un usuario entre por primera vez al sitio y pueda reconocer a quién pertenece el Sitio Web; lo pueda entender en forma rápida y sin esfuerzo y encontrar la información ofrecida fácilmente. Adicionalmente eso entregará el beneficio de que quienes producen el sitio podrán ubicar la nueva información sin tener que crear nuevas estructuras y al mismo tiempo tendrán la libertad de incorporar nuevas iniciativas al sitio sin tener que partir de cero. Los elementos que se muestran a continuación constituyen la metodología de la Arquitectura de Información, mediante la cual es posible conseguir las metas de organización y visibilidad de los contenido. Cada una de ellas deberá ser explorada, desarrollada y documentada adecuadamente. El resultado de ello entregará información clave para la toma de decisiones técnicas, visuales y de contenido, todo ello con el objetivo de entregar una adecuada experiencia a los usuarios cuando naveguen dentro del sitio. 

Definición de Objetivos

 A través de esta etapa se busca definir cuáles serán los objetivos centrales que deberá tener el Sitio Web y establecer la forma de cumplirlos. Se recomienda comenzar por generar un objetivo central y luego definir varios objetivos secundarios; no obstante, es importante que estos objetivos sean explicitados adecuadamente al comienzo del desarrollo, con el fin de que todo el equipo de profesionales involucrados tengan claro el horizonte del proyecto. Para generar objetivos que sean válidos y comprensibles, se aconseja escribirlos a través de frases que se inicien con verbos que expresen las acciones a realizar. Por ejemplo: Recibir preguntas de los usuarios sobre las actividades de la institución o Presentar públicamente los informes más importantes de la institución. Una forma de llegar más concretamente a los objetivos, es revisar la visión y la misión de la organización, desde la cual se pueden obtener las claves que permitan definirlos. Los objetivos que se creen para el sitio deberán estar en concordancia con las necesidades y planificación que haya hecho la institución en sus planes anuales. Una de las primeras metas que se debe cumplir consiste en tener presencia en Internet, siguiendo en este sentido el Instructivo Presidencial de Gobierno Electrónico. No obstante, se debe entender como tal la entrega de información actualizada de la institución, más la proposición de alguna actividad interactiva, mediante el aprovechamiento del estado actual de la tecnología. Por ejemplo, ofrecer las respuestas de las principales Preguntas Frecuentes que se reciben en la institución o entregar la explicación detallada sobre los principales trámites, permiten cumplir con la idea de tener presencia, a través de una propuesta de contenido que ofrece un valor agregado a quienes ingresan al sitio. Idealmente el listado de objetivos del sitio debe estar acotado y no llegar a más de cinco proposiciones. Este número, si bien es arbitrario, se indica como una forma de señalar que los objetivos no pueden ser tantos como para impedir su cumplimiento; ni tan pocos como para que el sitio sea poco ambicioso. De cada uno de estos objetivos se pueden desprender tareas concretas que permitan avanzar en el cumplimiento de ellos. 

Definición de Audiencia 

Una vez que se ha terminado adecuadamente con la definición de los objetivos, se debe dar un siguiente paso, que es el de determinar las principales audiencias (públicos) hacia las cuales se orientará el sitio. Mientras existan brechas de acceso a internet en la población, el Sitio Web no podrá atender al mismo público y las mismas necesidades que resuelve de manera presencial en ventanilla, sin embargo, la conectividad a internet crece cada año y por este motivo, se deben tener en cuenta varias consideraciones para definir qué tipos de audiencia se atenderán desde las diferentes pantallas del sitio. A continuación se hacen algunas definiciones de audiencia, las que, sin importar las características del sitio, siempre deberán estar presentes, y por lo mismo, deben traducirse en acciones para poder atenderlas adecuadamente. 
Por capacidad física: la audiencia del sitio incluirá personas con discapacidades físicas, por lo que una de las metas que debe tener todo sitio del Gobierno de Chile es permitir el acceso de ellos, a través del cumplimiento de las normas de Accesibilidad que se han recomendado como estándares internacionales. Para hacerlo se deben tomar las medidas correspondientes durante el proceso de desarrollo y diseño del sitio, se sugiere atender las recomendaciones mencionadas en las secciones Usabilidad y Accesibilidad.
Por capacidad técnica: la audiencia que llegue al sitio se dividirá de acuerdo a la experiencia técnica que tenga; por ello se deben plantear acceso simples mediante enlaces y otros más complejos, por ejemplo, mediante el uso de buscador. Es importante notar que en Chile desde hace algunos años se dobla la cantidad de personas que acceden a la Internet, por lo que cada año, al menos la mitad de la audiencia tiene poca o nula experiencia en el uso de Internet.
Por conocimiento de la institución: los usuarios del sitio se dividirán entre quienes conocen la institución y quienes no la conocen. Por lo anterior, los primeros siempre sabrán dónde buscar lo que necesitan usando la terminología, siglas y nombres de departamentos internos; los segundos, en tanto, no entenderán nada de la nomenclatura interna y les será muy difícil acceder a la información que se les ofrezca de esa manera. 
Por necesidades de información: los usuarios del sitio también se dividirán entre quienes llegan a buscar contenidos determinados y quienes sólo llegan a ver si existe algo que les pueda servir en lo que estén realizando. 
Por ubicación geográfica: dentro de la audiencia siempre habrá chilenos que ingresan al Sitio Web desde lugares diferentes a Santiago o incluso Chile, por lo que los contenidos deben responder también a esta diversidad. ¿Cómo se llega a establecer la Audiencia? Una de las formas más concretas de establecer la audiencia que tiene el sitio, es comenzar por investigar en la propia institución, para determinar a quiénes atienden sus diferentes reparticiones. Entrevistar especialmente a los funcionarios que atienden público (Oficina de Partes, Secretarias, Oficina de Información, Reclamos y Sugerencias (OIRS), Mesas de Ayuda, Centrales y Líneas telefónicas 600 y 3 800) es una fórmula que permitirá determinar con bastante exactitud qué está ocurriendo con la audiencia. Una vez que se ha hecho ese trabajo, es interesante hablar con usuarios que llegan a la institución y hacerles preguntas muy simples y directas: • ¿A qué vino a la institución? • ¿Tiene acceso a Internet? • ¿Propio o a través de Infocentros? • ¿Qué tipo de información en la Internet le habría evitado este viaje • ¿Qué le gustaría ver en el sitio Internet de esta institución? De las respuestas que se obtengan, se podrá hacer un muy buen resumen de tres elementos:• Tipos de usuario que se podrían atender a través de Internet • Expectativas de los usuarios respecto del sitio • Necesidad de información de la institución Estudiar Escenarios de Uso Otra de las metodologías más efectivas, al momento de trabajar en el tema de las audiencias, tiene que ver con la forma en que el equipo de desarrollo responda a dos preguntas: • ¿Cuáles son las audiencias previstas? Al responder esta pregunta, se busca determinar hacia quiénes se deberá enfocar el sitio y, con esta información, comenzar a tomar decisiones respecto de la forma de navegación, los servicios interactivos previstos y otros elementos de despliegue que tendrá el sitio. • ¿Por qué la gente vendrá a su sitio? La respuesta a esta pregunta busca determinar, en base a las audiencias posibles o previstas, pensar y buscar los tipos de contenidos que estos usuarios vendrán a buscar al sitio. En este sentido, la expresión Estudiar escenarios de uso, busca determinar situaciones de uso reales en el Sitio Web, basado en usuarios existentes que puedan llegar al sitio a buscar determinados tipos de información. Por ejemplo, si nuestro Sitio Web se refiere a cotizaciones previsionales, se puede aplicar el caso don Juan Pérez, agricultor de Paine, que quiere saber qué puede hacer para pagar las imposiciones de su AFP en su comuna. ¿Existe en el sitio una respuesta para él? ¿Si llegara al sitio y viera la portada que se ha diseñado, encontraría la respuesta a su pregunta? Al llegar a casos reales de uso del sitio, basado en las audiencias que se haya definido, es posible establecer con mucha mayor exactitud cómo esas personas (es decir casos reales) van a usar el sitio. Naturalmente, este tipo de revisiones permiten ratificar o modificar lo que se haya definido previamente como contenido del sitio, debido a que muchas veces la planificación inicial es hecha por personas que conocen la institución y dan por obvios muchos de los contenidos que para los usuarios normales no lo son tanto. 

Definición de Contenidos del Sitio 

Una vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder a hacer las definiciones más concretas que permitan decidir qué contenidos son los que va a tener el Sitio Web que se desarrolle.  Para identificar contenidos, se deben utilizar como insumo los materiales que se hayan obtenido en la etapa de identificación de Objetivos y de Audiencias, ya que en ambos la búsqueda giró en torno a las necesidades que tenían los usuarios del sitio. Para cumplir con una norma general respecto de qué debería contener un sitio, se pueden anotar las siguientes, como las más importantes: 
 Acerca de la Institución: entregar la información completa referida a Autoridades, Organigrama, Normativa legal asociada, Oficinas, Horas de Atención, Teléfonos, etc.   Productos / Servicios: destacar las actividades principales que el usuario puede hacer en la institución; puede incluir una guía de trámites que facilite las acciones de las personas que acudirán a la institución y que considere servicios interactivos para hacerlos desde el Sitio Web. 
 Novedades de la Institución: últimas actividades, noticias, nuevos servicios, tramites destacados, etc. Esta es una lista mínima que crecerá en la medida de las necesidades de entrega de información de la institución, lo importante es hacer énfasis en que el interés de los contenidos variará si se trata de un usuario interno como los funcionarios de la institución o externo como ciudadanos (usuarios). Por ejemplo, si miramos un Sitio Web desde el punto de vista del usuario externo de la institución, lo que más le interesará será la información referida a los trámites, seguida por la que informe acerca de cómo tomar contacto con la institución. Si la miramos desde el punto de vista del usuario interno, lo más importante será la información de Novedades, seguida por la de organigrama y presentación interna. Por lo mismo, es muy relevante que tanto los objetivos como la audiencia del sitio se hayan definido muy bien en forma previa, porque de lo contrario no habrá posibilidad de atender a ambos usuarios de manera adecuada.
Agrupar y Etiquetar el Contenido Con las definiciones hechas hasta ahora, llega el momento de poner en práctica las metodologías que permiten ordenar los contenidos, agrupándolos en conjuntos coherentes y dándoles nombres que los identifiquen. Probablemente la mejor técnica para hacerlo es hacer unas pequeñas tarjetas de papel, en las que se anotan las principales áreas de contenido que se hayan detectado y revisado en el paso anterior. Una vez hecho, las cartas se ponen sobre una mesa y se van agrupando, hasta formar conjuntos de elementos coherentes entre ellos. Luego, a cada conjunto se le pone un nombre (idealmente una sola palabra) que identifique a todos sus contenidos. Con esas agrupaciones hechas, ya tendremos los elementos adecuados para generar posteriormente el árbol de contenidos que, a su vez, permitirá hacer el sistema de navegación. Una vez que el proceso de Etiquetado ha concluido, es bueno hacer comprobaciones empíricas de la validez de los nombres escogidos. Para ello, se requiere que los elegidos sean mostrados a personas de diverso origen y que conozcan la institución, como también a quienes la desconozcan por entero. Ellos deben responder las siguientes preguntas: • ¿Qué significa este nombre? • ¿Qué tipos de contenidos esperaría encontrar en esta área? Con las respuestas obtenidas se podrá juzgar si los nombres que se han usado son los más adecuados o, bien, hay que introducir modificaciones.  Por ejemplo, dentro de los nombres más usados para una de las secciones habituales de un Sitio Web como es la de información corporativa, se cuenta Acerca de, Sobre... , Quiénes Somos e Información Corporativa. Mas información sobre Card Sorting en Usability.gov (en inglés) Identificar Requerimientos Funcionales Junto con la búsqueda de las áreas de contenido que deberá tener el sitio, se debe trabajar también en la definición de lo que se busca que el sitio haga, es decir, los tipos de interacción que se busca incluir. Dentro de los servicios interactivos más frecuentes se cuentan las siguientes:
• Formulario de Contacto para envío de mensajes electrónicos 
• Sistema de envío de una noticia por mail a un amigo 
• Formato de impresión de los contenidos
• Mapa del Sitio Dentro de las funcionalidades de mayor complejidad, pero a las que todo sitio debería aspirar, se cuenta: 
• Buscador interno del Sitio Web 
• Área de acceso privado para usuarios registrados 
• Sistema de envío de boletines de noticias del sitio a usuarios registrados Será importante que el sitio cuente con todos los servicios interactivos descritos como mínimos, para ofrecer una mejor experiencia al usuario que lo visita. 

Análisis de Sitios Similares (Benchmark) El último elemento que se debe desarrollar en esta etapa es la búsqueda de otros sitios en Internet que sean similares a nuestra institución, con el fin de revisar de qué manera han resuelto los mismos problemas que deberemos atender. Esta actividad comparativa permitirá llegar a las buenas prácticas que es posible adaptar a las necesidades de nuestro sitio, con el fin de asegurarnos métodos de funcionamiento y despliegue de contenidos, que sean coherentes con los objetivos que se han planteado inicialmente. Es importante que se haga una pauta previa de comparación, con el fin de saber de antemano cuáles son los parámetros que se medirán y gracias a eso, optimizar la revisión que se haga (ver ejemplo de Pauta de Comparación de Sitios Web [RTF; 26Kb]).

D. Diseño de la estructura del sitio.

Definición de la Estructura del Sitio 

Una vez que se ha hecho el trabajo de identificación de contenidos, se debe avanzar hacia las definiciones relacionadas con la forma que tendrá el sitio que se está desarrollando. Ello implicará trabajar en tres áreas concretas, a través de las cuales se definirá la estructura del sitio, el árbol de contenidos y los sistemas de navegación que se ofrecerá a los usuarios para que avancen a través de sus contenidos. Las tres áreas mencionadas se explican a continuación: Creación de la Estructura Se refiere al proceso de identificar la forma que tendrá el Sitio Web que se está desarrollando. En este sentido es importante hacer una diferencia entre estructura y diseño (que será explicada gráficamente más adelante en este capítulo).

 Estructura: se refiere a la forma que tendrá el Sitio Web en términos generales con sus secciones, funcionalidades y sistemas de navegación. No considera ni incluye elementos gráficos (logotipos, viñetas, etc.). 

Diseño: se refiere a la solución gráfica que se creará para el sitio, en la cual aparecen colores, logotipos, viñetas, y otros elementos de diseño que permiten identificar visualmente al sitio. Dado lo anterior, cuando hablamos de la estructura nos estamos refiriendo básicamente a cuál será la experiencia que tendrá un usuario cuando accede al sitio. De esta manera podremos determinar dónde estarán ubicados los servicios interactivos (buscador, sistemas de encuestas, áreas de contenidos). Gracias a la realización de esta etapa es posible discutir en términos muy prácticos cuál será la oferta de elementos de información e interacción que tendrá el usuario. Al no incluir elementos de diseño, se permite que la discusión sobre la estructura se desarrolle en aspectos concretos, sin que intervengan aún consideraciones estéticas que habitualmente atrasan la aprobación de esta etapa del desarrollo. 

Mapas Permanentes del Sitio 

Se refiere al proceso de crear un árbol de contenido en el que se muestre de manera práctica cuántas secciones tendrá el sitio en desarrollo y cuántos niveles habrá dentro de cada uno. Cuando se usa la idea de crear un árbol, se refiere exactamente a generar un diagrama que cuente con un tronco, ramas y hojas, para mostrar las zonas principales, secundarias y contenidos finales que se irán incorporando. En este sentido se debe evitar a toda costa que el árbol de contenidos represente la estructura de la organización, dado que ésta es conocida y comprendida internamente, pero constituye una barrera de entrada para usuarios externos. Si ellos llegan a buscar en una estructura de contenidos basada en la forma en que funciona la organización, primero deberán comprender cómo funciona la entidad para luego encontrar lo que les interesa. En este sentido se sugiere el uso de dos tipos de árboles posibles, Arbol Organizacional (Figura 1) y Arbol Funcional (Figura 2).

 E. Determinación de elementos de los sistemas de navegación.

Una vez que se ha terminado el trabajo en la estructura, ya se cuenta con los insumos suficientes como para avanzar hacia la generación del diseño visual de las pantallas del sitio, momento en que se utilizarán todos los insumos que se han ido generando en las etapas anteriores.
Para ello la recomendación es trabajar en cuatro etapas sucesivas e incrementales, que se describen a continuación:

Diseño de las Estructuras de Páginas

Esta etapa considera la generación de dibujos o diagramas lineales (wireframes)
que describen los componentes de cada una de las pantallas del sitio, con el
objetivo de verificar la ubicación de cada uno de ellos.
El ideal es que se dibujen diagramas con todas las pantallas que tendrá el sitio,
ya que de esta manera será posible que diseñadores y desarrolladores tengan un
documento concreto de trabajo, a través del cual resuelvan todas las dudas de los
elementos que componen esta página. Si bien este trabajo es largo y puede
resultar tedioso, su ventaja es que ningún elemento en las páginas queda puesto
al azar sino que responde a necesidades puntuales que se han detectado y que se
resuelven por esta vía.
Lo ideal es que estos dibujos no contengan ningún elemento gráfico o visual
concreto (como logos, viñetas o fotos), sino que sólo incluyan líneas y bloques
que representen objetos de contenido. En este nivel de desarrollo conceptual de
la estructura de páginas, el uso de estos diagramas o wireframes permite centrar
la discusión sobre cada pantalla en la funcionalidad y no en temas más subjetivos

como colores o calidad de los elementos de diseño en la página.

objetivo sea describir con mayor claridad el sentido de las funcionalidades y

objetos presentes en el wireframe.

Un elemento que se debe considerar junto con estos dibujos de estructura, es
que en las pantallas que representen transacciones, se debe incluir un
diagrama de flujo sencillo, mediante el cual se ejemplifique cuáles son las
interacciones posibles y sus resultados. Naturalmente se deberá incluir las

pantallas correspondientes cuando sea adecuado.

Gracias a estos diagramas en combinación con las páginas, tanto diseñadores
como desarrolladores podrán tener claro cuál es el trabajo que deben realizar en
cada una de las áreas del sitio que se estén generando.

Bocetos de Diseño

Esta etapa consiste en la generación de dibujos digitales acabados de la forma
que tendrán las páginas principales del sitio que se desarrolla, considerando como

tales la Portada, Portada de Sección y Página de despliegue de contenidos.
Para desarrollar los elementos gráficos se utilizan como insumos los dibujos de
estructura que se han generado en la etapa anterior.
La idea es que en esta etapa se trabaje en software gráfico para facilitar el
proceso de corrección, ya que habitualmente habrá mucha interacción con los
usuarios.
Los elementos que se deben tener presentes en esta etapa, son los siguientes:
Imagen Corporativa de la institución:
se deben seguir los lineamientos de uso de colores, textos y otros elementos
definidos para la entidad.
Imagen Corporativa del Gobierno:
se deben seguir los lineamientos indicados por el Gobierno de Chile en este
aspecto.
• Criterios de Usabilidad:
se deben tener en cuenta los criterios de usabilidad, accesibilidad y la normativa

vigente.

Borradores de Página

Una vez que se ha aprobado la etapa anterior, se toman los bocetos de diseño
que hayan sido aprobados y se genera un prototipo (páginas clickeables)
mediante el cual se pueda comprobar directamente la forma en que se
desempeñan, cuando se les aplica la tecnología HTML de construcción de

páginas web.

Maqueta Web

Es la etapa final y consiste en generar todo el sitio en tecnología HTML utilizando
imágenes y contenidos reales .
En el caso de un sitio estático, esta etapa corresponderá a la construcción del
sitio. En el caso de un sitio dinámico, las páginas que se generen permitirán que
el diseñador genere las plantillas de trabajo y el desarrollador de software las
utilice como elementos para introducir la programación que sea necesaria para la
creación del sitio.
Es importante considerar que todas las tareas y actividades incluidas en esta
etapa pueden ser abordadas por un diseñador que tenga experiencia en diseño
web. Esto debe ser parte de los requerimientos solicitados a las empresas

proveedoras de este tipo de servicios.

II.-EVALUACIÓN 

Con la información descrita anteriormente ,ahora te toca a ti ,Realiza la Actividad de Evaluación 1.1.1. Dónde: “Elabora la justificación y la estructura propuesta del sitio web acorde con los requerimientos del cliente”, en la que define:

 Objetivo del sitio.

 Audiencia.

 Contenidos.

 Mapa del sitio.

 Sistemas de Navegación.

 Borradores de páginas.

 Maqueta web.

También recuerda las competencias que desarrollaste a lo largo de los temas y que estan inmersas en tus actividades clase.

 COMPETENCIAS GENÉRICAS

•Es sensible al arte y participa en la apreciación e interpretación de sus expresiones en distintos géneros.

•Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios, códigos y herramientas apropiados

•Participa y colabora de manera efectiva en equipos diversos

•Desarrolla innovaciones y propone soluciones a problemas a partir de métodos establecidos

COMPETENCIAS PROFESIONALES

Diseña y desarrolla proyectos de tecnología de información, para la generación de alternativas de solución, de los requerimientos de usuario.

III.-RUBRICAS