Unidad No 1.- Diseña y elabora paginas web dinámicas
1.1 Determina la estructura del sitio web con base en las necesidades del usuario
detectadas. 20
horas Del 15 de febrero al 02 de
Marzo de 2017 R=06/03/2017 10%
Para descargar la rubrica de la evaluación 1.1. haga clic aqu y descargue la lista de cotejo 1.1i
Lista de cotejo rubrica 1.1
A. Identificación de elementos Web.
http://www.lawebera.es/,
http://www.mitecnologico.com/Main/PaginaWebConceptoYElementos
http://www.monografias.com/trabajos5/laweb/laweb.shtml#I1
http://www.comocrearunsitioweb.com/estructura-html-basica-pagina-web
Internet. World Wide Web. Navegadores Web. Protocolo HTTP. Protocolo FTP. W3C. CSS.
Lenguajes del lado del cliente. HTML. JavaScript. XHTML, XML, Lenguajes del lado del servidor.
Internet.
Como funciona internet parte 1 http://www.youtube.com/watch?v=91oBskMrGcc&feature=related
Como funciona internet parte 2
http://www.youtube.com/watch?v=YeT2LqD1HpE&NR=1
Internet es el resultado de la interconexión de miles de computadoras de todo el mundo. Todas ellas comparten los protocolos de comunicación, es decir que todos hablan el mismo lenguaje para ponerse en contacto unas con otras. Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos estándares TCP/IP".
Los servicios básicos ofrecidos ahora por Internet son:
La world Wide web, correo electrónico, noticias en red, acceso a computadoras remotas y sistemas de adquisición de datos, y la capacidad para transferir información entre computadoras remotas.
World Wide Web.
http://www.youtube.com/watch?v=-JiSLMIBhdI&feature=related
En informática, la World Wide Web, es la herramienta más utilizada en Internet. Básicamente, permite visualizar en la pantalla del usuario "páginas" con información alojadas en computadoras remotas (llamadas genéricamente "sitios"). es un sistema de distribución de información basado en hipertexto o hipermedios enlazados y accesibles a través de Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, videos u otros contenidos multimedia, y navega a través de ellas usando hiperenlaces.
La World Wide Web (WWW, o simplemente Web) es un espacio de información donde los elementos de interés, denominados como recursos, se identifican a través de identificadores globales llamados Identificadores de Recurso Uniforme (URI)."
Así que la Web se define mediante otras especificaciones. Las tres primeras especificaciones para las tecnologías Web son URLs, HTTP y HTML.
Hipertexto
Hipertexto son datos que contienen enlaces (links) a otros datos. En el lenguaje Web, un documento de hipertexto no es solo algo que contiene datos, sino que además contiene enlaces a otros documentos.
En Hipertexto, el ordenador hace que seguir esas referencias sea facilísimo. Esto implica que el lector se puede saltar la estructura secuencial del texto y seguir lo que más le gusta. En Hipertexto se pueden hacer enlaces en cualquier lugar, no sólo al final. Cada enlace tiene una marca que lo destaca, puede estar resaltado, subrayado o puede estar identificado por un número.
El hipertexto no esta limitado a datos textuales, podemos encontrar dibujos del elemento especificado, sonido o vídeo referido al tema. Estos documentos que tienen gran variedad de datos, como sonido, vídeo, texto, en el mundo del hipertexto se llama hipermedia.
Funcionamiento de la Web
Una vez que el usuario esta conectado a Internet, tiene que instalar un programa capaz de acceder a páginas Web y de llevarte de unas a otras siguiendo los enlaces. El programa que se usa para leer los documentos de hipertexto se llama "navegador", el "browser", "visualizador" o "cliente" y cuando seguimos un enlace decimos que estamos navegando por el Web. Navegar es como llaman los usuarios de la red a moverse de página en página por todo el mundo sin salir de su casa.
•Navegadores Web.
http://www.youtube.com/watch?v=gVeGL1L-pz8&feature=related
http://www.youtube.com/watch?v=UcwineJZnbM&feature=related
http://www.youtube.com/watch?v=iiSg2WHZCnE&feature=related
(Browser, explorador, navegador web). Aplicación que sirve para acceder a la WWW (todas las páginas web) y "navegar" por ella a través de los enlaces.
Mediante los Navegadores modernos podemos, acceder a hojas de calculo, base de datos, vídeo, sonido y todas las posibilidades más avanzadas. Pero el diseño de páginas debe mantener un equilibrio entre utilizar todas las capacidades y la posibilidad de ser leídas por cualquier tipo de Navegador.
Actualmente los navegadores más populares son Internet Explorer, Netscape, Opera y Firefox.
Conectándose a Internet, con un visualizador Netscape o Explorer, además de ver documentos HTML se puede recibir y enviar correo electrónico, recibir y enviar NEWS (noticias), visitar los servidores GOPHER (servidores de ficheros), y acceder a servidores FTP (más servidores de ficheros) tanto en entrada como en salida, todo ello con el mismo programa. También, como no, se pueden imprimir los documentos visualizados. Casi todos suelen ser " WYSIWYG".
Sistemas de Búsqueda Cómo encuentra la gente una página Web?
En la Web no existe un directorio centralizado. Para acceder a una página directamente se debe conocer la dirección exacta donde se encuentra. Pero lo más habitual no es conocer esa dirección exacta, sino tener una idea del tema en el que se está interesado y sobre el que se necesite información.
Existen empresas como Yahoo, Altavista, Olé, Ozú, etc., que han creado diferentes Sistemas de Búqueda, para evitar la navegación a la deriva.
Estas consisten en un tipo de páginas Web donde se puede escribir una palabra o una breve referencia que defina la búsqueda que se quiere realizar. El sistema consulta sus datos y te muestra enlaces con las páginas Web que contienen la referencia escogida. Existen diferentes buscadores y cada uno de ellos ha creado su propio directorio. Unos son más completos, otros más organizados, otros son más exigentes y selectivos en su información, cada uno tiene características propias, pero todos ellos ayudan a mantener el rumbo.
Protocolo HTTP.
http://www.youtube.com/watch?v=iQkBZxBisO0&feature=related
(HyperText Transfer Protocol). Protocolo usado para acceder a la Web (WWW). Se encarga de procesar y dar respuestas a las peticiones para visualizar una página web. Además sirve para el envío de información adicional como el envío de formularios con mensajes, etc.
Luego de finalizada la transacción, HTTP no guarda ninguna información sobre la misma, por lo tanto es considerado un protocolo "sin estado". Para guardar la información entre distintas peticiones, los webmasters suelen utilizar cookies o pasos de parámetros.
(cookies - galletas). Las cookies son pequeños archivos de texto que son descargados automáticamente al navegar en una página web específica. En una cookie se almacena cierta información sobre el visitante que la página considera importante recordar. Una cookie se usa, por ejemplo, para que cada vez que accedamos a una página esté adaptada a nuestro gusto (en un idioma determinado, con ciertos colores, etc.). También sirve para la persistencia de sesiones.
El protocolo HTTP generalmente utiliza el puerto 80.
El HTTP está basado en el modelo cliente-servidor, en donde un cliente HTTP (un navegador por ejemplo) abre una conexión y realizar una solicitud al servidor. Este responde a la petición con un recurso (texto, gráficos, etc) o un mensaje de error, y finalmente se cierra la conexión. Uno de los más famosos mensajes de error HTTP es el 404 Not found.
URL
http://vimeo.com/2376106
(Uniform Resource Locator - Localizador Uniforme de Recursos). Forma de organizar la información en la web.
Una URL es una dirección que permite acceder a un archivo o recurso como ser páginas html, php, asp, o archivos gif, jpg, etc. Se trata de una cadena de caracteres que identifica cada recurso disponible en la WWW.
Forma general de una URL: protocolo://máquina/directorio/fichero
Las URL de protocolo HTTP son las típicas direcciones a una página web, por ejemplo:
http://www.alegsa.com.ar/Diccionario/diccionario.php
Protocolo FTP.
http://www.youtube.com/watch?v=p6drb4xol_k&feature=related
http://www.youtube.com/watch?v=8eyt7t32s7I
El FTP (File Transfer Protocol) o protocolo de transmisión de archivos, es la herramienta utilizada para enviar todo tipo de archivos de una máquina a otra a través de Internet.
El FTP pone enfrente del usuario un enorme horizonte de posibilidades porque le permite obtener todo tipo de archivos, desde una nueva versión del navegador hasta el último ICQ, pasando por un buen número de archivos MP3. Todo esto de forma simple y, la mayoría de las veces, sin gastar un centavo.
Al igual que muchas otras tecnologías montadas sobre Internet, el FTP funciona con el modelo "cliente / servidor". El "cliente" es el software que el usuario tiene en su PC y que "pide" los archivos, mientras que el servidor es el que entrega o "sirve" a los usuarios. Podemos decir entonces que en una operación por FTP entran en juego tres elementos:
El servidor FTP conectado a Internet con archivos disponibles para descargar.
Un programa instalado en la máquina del usuario que funcione como cliente para recibir los envíos.
El archivo a trasladar.
herramientas populares para hacer FTP son el Bullet Proof FTP, WS FTP, Transoft FTP Control, FTP Voyager e incluso manejadores de archivos como el Windows Commander. Todos estos programas reúnen dos características fundamentales: son fáciles de usar y se pueden obtener desde la Web en forma gratuita (al menos una versión de prueba por un período de tiempo determinado).
Los servidores FTP tienen en Internet una dirección similar a la de los sitios Web. Si se busca acceder al servidor FTP es habrá que escribir ftp://ftp.microsoft.com. (Atención: no siempre la dirección del sitio Web coincide con la del servidor FTP).
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.
¿Qué hace el W3C?
La principal actividad del W3C es desarrollar protocolos y directrices que aseguren el crecimiento de la Web a largo plazo. Los estándares del W3C definen las partes claves que hacen que la World Wide Web funcione.
Estándares web
http://www.youtube.com/watch?v=2TmyM0uJ_DI
Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en el Web.
Son un conjunto de tecnologías orientadas a brindar beneficios a la mayor cantidad de usuarios, asegurando la vigencia de todo documento publicado en el Web.
El objetivo es crear un Web que trabaje mejor para todos, con sitios accesibles a más personas y que funcionen en cualquier dispositivo de acceso a Internet.
Los beneficios del uso de estándares web
1. Un sitio basado en estándares web mostrará una mayor consistencia visual. Gracias al uso de XHTML para el contenido y CSS para la apariencia, se puede transformar rápidamente un sitio, sin importar que se trate de una página web o miles, realizando cambios en un solo lugar.
2. Los documentos que separan apariencia de contenido usan menos código, además, CSS permite conseguir efectos que antes requerían el uso de Javascript e imágenes, por lo que los sitios basados en estándares utilizan menos ancho de banda y se muestran más rápido a los usuarios, mejorando dramáticamente la experiencia de estos.
3. Los documentos basados en XHTML válido son más relevantes para los motores de búsqueda, contienen mayor información y menos código, por lo que un sitio basado en estándares web tendrá una mejor posición. De igual manera, la posición en directorios, editados por humanos, se verá beneficiada pues el sitio será más usable. XHTML es una aplicación de XML, por lo que el contenido puede ser procesado de muchas formas, permitiendo la creación de sitios extensibles. El uso de validadores nos permite crear XHTML bien formado.
4. Un sitio basado en estándares web es compatible con todos los navegadores actuales, y lo será con versiones futuras.
5. Un sitio basado en estándares web es más fácil de mantener y actualizar, el código es más simple, de esta forma se elimina la dependencia de un solo desarrollador.
6. Un sitio basado en estándares web es más accesible, permitiendo a personas con discapacidades utilizar su contenido.
CSS.
http://www.youtube.com/watch?v=Q0NS6p0rVQ8
http://www.youtube.com/user/wwalvarez#g/u
Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".
SCRIPTS
Un script (cuya traducción literal es 'guion') o archivo de órdenes o archivo de procesamiento por lotes es un programa usualmente simple, que por lo regular se almacena en un archivo de texto plano. Los script son casi siempre interpretados, pero no todo programa interpretado es considerado un script. El uso habitual de los scripts es realizar diversas tareas como combinar componentes, interactuar con el sistema operativo o con el usuario.
Lenguajes del lado del cliente.
http://www.youtube.com/watch?v=0X1SxQh73xU
Son los lenguajes que basan su procesamiento en el cliente web, es decir que se ejecutan en el navegador del usuario. Vemos un listado de los lenguajes de cliente disponibles para los desarrolladores y sus características.
Javascript
Visual Basic Script
DHTML (HTML Dinámico)
HTML.
JavaScript.
XHTML
HTML
http://www.mailxmail.com/curso-html/elementos-basicos-estructura-pagina-web
http://www.youtube.com/watch?v=utbVrAQY2oM&playnext=1&list=PL49DD4D8A69947601
http://www.youtube.com/watch?v=RVr1oHnK3Nw&feature=related
El Lenguaje de Etiquetas de Hipertexto (HyperText Markup Language) (HTML) es un lenguaje simple de etiquetas usado para crear documentos de hipertexto que son portables de una plataforma a otra.
El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .htm o .html.
Estos documentos pueden ser mostrados por los visores o "browsers" de paginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer.
También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la versión 4.0 de HTML que le permite crear efectos especiales.
La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc.), así como los diferentes efectos que se quieren dar (cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado.
Creación de documentos HTML
Para comenzar sólo es necesario Un procesador de texto: los documentos HTML están en formato de texto sencillo (también conocido como ASCII). El procesador de texto se utiliza para escribir el documento en lenguaje HTML, que será posteriormente interpretado por el programa navegador correspondiente, siempre que el documento esté guardado en formato: "sólo texto".
El texto escrito tiene dos partes bien diferenciadas, el contenido de la información y el conjunto de etiquetas del lenguaje HTML, que permiten determinar el estilo y el tipo de letra que tendrá la presentación del documento final y que pueda ser leído por un programa cliente.
Método de trabajo
Un navegador del WWW o lo que se denomina programa cliente que permite el acceso a páginas WWW de Internet. El programa cliente permite ver una página antes de introducirla en un servidor. De este modo, se pueden comprobar las modificaciones de las distintas páginas que se diseñan.
Con el procesador de textos se crea un fichero con un nombre al que necesariamente hay que añadirle la extensión html. Por ejemplo: prueba.html. Si se añade algo nuevo se deben guardar los cambios antes de visualizar el nuevo documento en el navegador.
El documento se abre con el comando Open File del menú File del programa cliente. Los cambios son reflejados en la pantalla. Si se trabaja con el programa cliente y el procesador de textos al mismo tiempo, activando simplemente la opción Reload se pueden comprobar los cambios efectuados.
El principio esencial del lenguaje HTML es el uso de las etiquetas (tags), las cuales nos permiten configurar nuestra web. Funcionan de la siguiente manera:
Las etiquetas se escriben entre < > y tienen la etiqueta de cierre < / >, que es la misma etiqueta solo que con la barra / después de < para limitar nuestra etiqueta.
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Lo que haya entre ambas etiquetas estará influenciada por ellas y lo importante es que el cierre sea igual a como se abrió.
La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ("/") tal como se muestra en los siguientes ejemplos:
<table><tr><td>Contenido de una celda</td></tr></table>
Códigos HTML básicos
<html>: Un documento HTML comienza con la etiqueta <html> , y termina con </html>. Le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. <head>: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. Dentro de la cabecera <head> podemos encontrar:
1. <title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana
2. <link>: para vincular el sitio a hojas de estilo o iconos
3. <style>: para colocar el estilo interno de la página, ya sea usando CSS, JavaScript u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>
<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:
1. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: encabezados o títulos del documento con diferente relevancia. Para escribir títulos se usa la etiqueta <Hx></Hx> en donde x es un número.
Ejemplo:
<h1>Titulo principal</h1>
<h2>Titulo secundario</h2>
<h3>Titulo terciario</h3>
<h4>Titulo cuarto nivel</h4>
<h5>Titulo quinto</h5>
<h6>Titulo sexto</h6>
2. <table>: define una tabla
<tr>: fila de una tabla
<td>: celda de datos de una tabla
3. <a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href="http://www.wikipedia.org">Wikipedia</a> se representa como Wikipedia)
4. <div>: área de la página
5. <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imagenes/mifoto.jpg" />
6. <li><ol><ul>: Etiquetas para listas.
7. <strong>
8. <i>: texto en cursiva
9. <u>: texto subrayado
<HTML>
Encabezado <HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
Cuerpo [Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Qué es XHTML?
http://www.youtube.com/watch?v=ydu60QUvVK4&feature=related
XHTML (Lenguaje de Marcado de Hipertexto Extensible) es una versión más estricta y limpia de HTML , que nace precisamente con el objetivo de remplazar a HTML ante su limitación de uso con las cada vez más abundantes herramientas basadas en XML . XHTML extiende HTML 4.0 combinando la sintaxis de HTML, diseñado para mostrar datos, con la de XML, diseñado para describir los datos.
¿Para qué sirve?
Ante la llegada al mercado de un gran número de dispositivos, XHTML surge como el lenguaje cuyo etiquetado, más estricto que HTML, va a permitir una correcta interpretación de la información independientemente del dispositivo desde el que se accede a ella. XHTML puede incluir otros lenguajes como MathML , SMIL o SVG , al contrario que HTML.
¿Cómo funciona?
XHTML, al estar orientado al uso de un etiquetado correcto, exige una serie de requisitos básicos a cumplir en lo que a código se refiere. Entre estos requisitos básicos se puede mencionar una estructuración coherente dentro del documento donde se incluirían elementos correctamente anidados, etiquetas en minúsculas, elementos cerrados correctamente, atributos de valores entrecomillados, etc.
Ejemplos
A continuación se pueden ver algunos ejemplos de los aspectos más importantes a tener en cuenta a la hora de utilizar XHTML.
Los documentos deben estar bien formados:
Un formato correcto en un documento XHTML es muy importante. Esto quiere decir que todos los elementos deben tener etiquetas de cierre, deben estar escritos de una forma determinada y además todos los elementos deben estar anidados correctamente.
Código de elementos anidados:
<p>Ejemplo de elementos bien <em>anidados</em>.</p>
<p>Ejemplo de elementos mal <em>anidados</p>.</em>
Los nombres de atributos y elementos deben ir en minúsculas:
Tanto los elementos como los atributos deben ir en minúsculas para todos los elementos HTML y los nombres de atributos. Esto es importante ya que XML interpreta las mayúsculas y las minúsculas de forma diferente.
<body>Ejemplo correcto</body>
<BODY>Ejemplo incorrecto</BODY>
Los elementos que no estén vacios necesitan etiquetas de cierre:
<p>Ejemplo correcto.</p>
<p>Ejemplo correcto.</p>
<p>Ejemplo incorrecto.<p>Ejemplo incorrecto.</p>
Los valores de las etiquetas deben ir siempre entre comillas:
Todos los valores de los atributos deben ir entre comillas, incluso aquellos que sean numéricos.
<table rows="3">
<table rows=3> ejemplo incorrecto
Existen varias versiones de XHTML (1.0, 1.1, Básico, etc.). Para utilizar una versión concreta, se debe incluir antes del elemento html del código de la página Web, la Definición del Tipo de Documento (DTD) que se pretende utilizar. Por ejemplo, un documento en XHTML 1.1 podría especificarse de la siguiente forma:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Título</title>
</head>
<body>
.
.
.
</body>
</html>
DHTML
El HTML Dinámico o DHTML (del inglés Dynamic HTML) designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de lenguaje HTML estático, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarquía de objetos de un DOM.
Una página de HTML Dinámico es cualquier página web en la que los scripts en el lado del cliente cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la página. La característica dinámica del DHTML, por tanto, es la forma en que la página interactúa con el usuario cuando la está viendo, siendo la página la misma para todos los usuarios.
En contraste, el término más general "página web dinámica" lo usamos para referirnos a alguna página específica que es generada de manera diferente para cada usuario, en cada recarga de la página o por valores específicos de variables de entorno. Este término no debe ser confundido con DHTML. Estas páginas dinámicas son el resultado bien de la ejecución de un programa en algún tipo de lenguaje de programación en el servidor de la página web (como por ejemplo ASP.NET, PHP o Perl), el cual genera la página antes de enviarla al cliente, o bien de la ejecución en la parte cliente de un código que crea la página completa antes de que el programa cliente (usualmente, un navegador) la visualice.
En una página DHTML, una vez ésta ha sido cargada completamente por el cliente, se ejecuta un código (como por ejemplo en lenguaje JavaScript) que tiene efectos en los valores del lenguaje de definición de la presentación (por ejemplo CSS), logrando así una modificación en la información presentada o el aspecto visual de la página mientras el usuario la está viendo.
Usos
Entre los usos más habituales del DHTML están el hacer menús desplegables, imágenes que cambian al pasar el cursor sobre ellas, objetos en movimiento, botones que permiten desplazar el texto que se está mostrando, textos explicativos que aparecen al situar el cursor sobre ciertas palabras clave, cronómetros, etc.
Otro uso interesante de esta tecnología es la creación de juegos de acción que utilizan el navegador web para funcionar, aunque tradicionalmente este tipo de desarrollos han sido complicados debido a las diferencias en el lenguaje y las características soportadas por los distintos navegadores existentes. Recientemente los navegadores más populares han empezado a soportar estándares comunes, como el DOM, lo cual ha facilitado mucho la creación de este tipo de aplicaciones.
JavaScript http://www.webestilo.com/javascript/
JavaScript es el lenguaje que nos permite interactuar con el navegador de manera dinámica y eficaz, proporcionando a las páginas web dinamismo y vida. Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseñado específicamente para el desarrollo de aplicaciones cliente-servidor dentro del ámbito de Internet.
Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos...
XML
Es un lenguaje que tiene a su alrededor distintas tecnologías para cubrir un gran abanico de posibilidades.
XML es un Lenguaje de Etiquetado Extensible muy simple, pero estricto que juega un papel fundamental en el intercambio de una gran variedad de datos. Es un lenguaje muy similar a HTML pero su función principal es describir datos y no mostrarlos como es el caso de HTML. XML es un formato que permite la lectura de datos a través de diferentes aplicaciones.
Las tecnologías XML son un conjunto de módulos que ofrecen servicios útiles a las demandas más frecuentes por parte de los usuarios. XML sirve para estructurar, almacenar e intercambiar información.
Entre las tecnologías XML disponibles se pueden destacar:
XSL : Lenguaje Extensible de Hojas de Estilo, cuyo objetivo principal es mostrar cómo debería estar estructurado el contenido, cómo debería ser diseñado el contenido de origen y cómo debería ser paginado en un medio de presentación como puede ser una ventana de un navegador Web o un dispositivo móvil, o un conjunto de páginas de un catálogo, informe o libro.
XPath : Lenguaje de Rutas XML, es un lenguaje para acceder a partes de un documento XML.
XLink : Lenguaje de Enlace XML, es un lenguaje que permite insertar elementos en documentos XML para crear enlaces entre recursos XML.
XPointer : Lenguaje de Direccionamiento XML, es un lenguaje que permite el acceso a la estructura interna de un documento XML, esto es, a sus elementos, atributos y contenido.
XQL : Lenguaje de Consulta XML, es un lenguaje que facilita la extracción de datos desde documentos XML. Ofrece la posibilidad de realizar consultas flexibles para extraer datos de documentos XML en la Web.
¿Cómo funcionan?
XSL funciona como un lenguaje avanzado para crear hojas de estilos. Es capaz de transformar, ordenar y filtrar datos XML, y darles formato basándolo en sus valores. XPath identifica partes de un documento XML concreto, como pueden ser sus atributos, elementos, etc. XLink por su lado, describe un camino estándar para añadir hiperenlaces en un archivo XML. Es decir, es un mecanismo de vinculación a otros documentos XML. Funciona de forma similar a un enlace en una página Web, es decir, funciona como lo haría <a href="">, sólo que a href es un enlace unidireccional. Sin embargo, XLink permite crear vínculos bidireccionales, lo que implica la posibilidad de moverse en dos direcciones. Esto facilita la obtención de información remota como recursos en lugar de simplemente como páginas Web. XPointer funciona como una sintaxis que apunta a ciertas partes de un documento XML, es como una extensión de XPath. Se utiliza para llegar a ciertas partes de un documento XML. Primero, XLink permite establece el enlace con el recurso XML y luego es XPointer el que va a un punto específico del documento. Su funcionamiento es muy similar al de los identificadores de fragmentos en un documento HTML ya que se añade al final de una URI y después lo que hace es encontrar el lugar especificado en el documento XML. Al ser XPointer una extensión de XPath, XPointer tiene todas las ventajas de XPath y además permite establecer un rango en un documento XML, es decir, con XPointer es posible establecer un punto final y un punto de inicio, lo que incluye todos los elementos XML dentro de esos dos puntos. Finalmente, XQL, lenguaje de consultas, se basa en operadores de búsqueda de un modelo de datos para documentos XML que puede realizar consultas en infinidad de tipos de documentos como son documentos estructurados, colecciones de documentos, bases de datos, estructuras DOM, catálogos, etc.
Lenguajes del lado del servidor.
Son los lenguajes que se procesan en el lado del servidor y que generan la página antes de enviarla al cliente. Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web, justo antes de que se envíe la página a través de Internet al cliente. Las páginas que se ejecutan en el servidor pueden realizar accesos a bases de datos, conexiones en red, y otras tareas para crear la página final que verá el cliente. El cliente solamente recibe una página con el código HTML, es compatible con todos los navegadores.
CGI Perl ASP PHP JSP
B. Comprobación de uso de estándares en el código de programación.
http://www.w3c.es/divulgacion/guiasbreves/
http://www.youtube.com/watch?v=bF16UacAaMw
Guía Breve sobre Estándares Web http://www.w3c.es/divulgacion/guiasbreves/Estandares
Cambio hacia los Estándares Web o cómo mejorar fácilmente tu sitio Web
http://www.w3.org/QA/2003/03/web-kit
Accesibilidad para todos
Una web es accesible cuando puede ser navegable para cualquier persona independientemente si esa persona tiene algún tipo de discapacidad más o menos extrema.
Las webs de los organismos públicos en la mayoría de los países están obligadas a cumplir con determinados estándares de accesibilidad.
¿Por qué cumplir con estándares?
1. Su web va a ser navegable por un mayor número de personas. Y no pesemos ya con un nivel de discapacidad elevado, sino, en personas con vista cansada o que tengan un problema de muñeca en un momento determinado.
2. Esta accesibilidad va a ser valorada por los buscadores.
Entonces es muy recomendable y mucho más hoy en día en que crear desde cero una web accesible cuesta lo mismo o casi lo mismo.
Cómo testar las recomendaciones o estándares de accesibilidad con Tawdis.
Podemos comenzar a testar esos niveles en tawdis en 3 pasos:
Accedemos desde www.tawdis.net escribiendo en "Documento a analizar" la web de la empresa que deseemos y damos click a "analizar".
Ahora veremos como valora el nivel de accesibilidad. En el cuadro de arriba, a la derecha es donde nos marca todo esto. En este cuadro nos mostrará errores de prioridad 1, prioridad 2 y prioridad 3, que simplificando serían niveles bajo, medio y alto divididos cada un en automático y manual. La diferencias entre estos es que los errores automáticos los puede arregla una máquina, en cambio los errores manuales se deben hacer el programador a mano.
Lo interesante de este sistema es que en cada sitio donde haya un error lo va a marcar con un signo de pregunta y dándole click sobre él nos va a mostrar el problema y cómo corregirlo.
De todas maneras es casi imposible conseguir una web que tenga cero errores, es bastante complicado.
Analizando con estádares la programación de tu web.
La comunidad internacional de programadores que se reúne bajo la sigla W3C han acordado una serie de recomendaciones de cómo hay que escribir los códigos de programación en los lenguajes más conocidos y usuales como son el html, xhtml y otros como son las hojas de estilo que se llaman css, etc.
Medir estándares web desde W3C.
Haz el test de medición de estándares en otros 3 sencillos pasos:
Al test de W3C puedes acceder desde http://validator.w3.org.
Una vez allí en "Adress" escribes la dirección de la web y vamos a chequear los errores que tiene respecto al estándar. Estos estándares vienen ser algo así como las reglas de ortografía de una lengua.Conviene que estos estándares se cumplan debido a que es algo que valoran los buscadores.
Una vez que la analizamos nos dirá cuantos errores existen en la web, donde están y cómo solucionarlos. Esto es algo que tiene que corregir el programador. Pero nosotros le podemos dar esta web con esta información para que lo corrija.
Para tener un parámetro para un sitio de empresa que tiene de 30 a 100 páginas se puede decir que cuando tiene de 100 a 150 errores convendría retocar y corregirlos. Comúnmente son errores muy sencillos de corregir y no le llevan tanto tiempo al programador.
Finalmente.
Cuando comenzamos a hacer un sitio web es muy aconsejable ir haciendo estos test durante la programación para que finalmente no tenga errores ni con respecto a los estándares, ni respecto a la accesibilidad.
Espero que puedas mejorar tus webs mediante una mejor accesibilidad y cumpliendo estándares web para ir construyendo en internet un lugar mejor para todos.
Cliente web navegadores (browser)
Los clientes se conectan al servidor y le envían mensajes a su puerto 80 usando el tcp/ip
Son programas que permiten acceder a la web y visualizar en modo grafico documento HTML y xhtml
Visualiza archivos tipo gráficos
Arrancan aplicaciones que muestren archivos recibidos
se les agrega plug ins para mostrar ciertos tipos de documentos
Servidor web
Funcionan permaneciendo a la escucha en un puerto, reciben por mensajes bien definidos por protocolo http las peticiones de los clientes, y los servidores responden con un mensaje de estado correcto, estado de datos o error, Las operaciones realizadas en el adjuntan objetos o recursos web descritos por la URL .
Apache
Iss Internet information Server
El uso de estándares ayuda a que tu sitio web:
Tenga mejor indización en los buscadores, Portabilidad e Interoperabilidad
Los estándares web son tecnologías establecidas por el w3c usadas para crear e interpretar el contenido basado en web de tal manera que estos documentos siempre estén disponibles y accesibles para todos.
Tipos de estandares web
Estándares de tecnologías nuevas
Estándares de accesibilidad
Estándares de interacción multimodal
Estándares de direcciones
Estándares de seguridad
Estándares de privacidad
Estándares de internacionalización
Estándares de independencia de dispositivo
Accesibilidad
Busca que las personas con discapacidad usen la web, Disponibilidad en el acceso para todos a la web, permitiendo la flexibilidad para que puedan accesar usuarios con incapacidad transitoria, con conexión lenta personas de edad avanzada.
Interoperabilidad
El sitio web debe ser utilizado desde cualquier sistema operativo usando cualquier navegador
Usabilidad
Se refiere a la experiencia del usuario en el sitio web donde se actúe con anticipación, autonomía, consistencia, eficiencia, legibilidad, interfaz visible, navegabilidad.
Formato común de sitio web
• Proveer a los usuarios una interfaz común y fácil de navegar
• Facilidad para que los buscadores hagan una mejor indización al sitio diseñado
• Facilidad de mantenimiento
• Aplicar estándares XHTML, CSS, DOM
Estructura de las páginas
Una web debe desarrollar las siguientes capas HTML semántica(contenido), CSS (presentación) javaScript (comportamiento) en un archivo separado cada uno
Un documento web cumple con estándar si
• Esta escrito en xhtml valido
• Usa CSS
• Esta estructurado correctamente y posee un markup semantico
• Funciona en todos los navegadores
• No utiliza elementos flash
Ventajas en el suso de estándares
• Montaje rápido
• Fácil mantenimiento y de menor costo
• Diseño centralizado
• Compatibilidad en todos los navegadores
• Descarga y presentación rápido
• Menor usos de ancho de banda
• Mayor accesibilidad
• Mejor posicionamiento en buscadores
• Mayor cantidad de visitantes al sitio
Estándares para motores de búsqueda
• La pag web debe tener el tag <title>
• Poseer uso adecuado de titulos
• Uso de metatags description, keywords
• Uso de archivo favicon.co
• Especificar fuentes rss como tag rel
Estándares para las páginas
Usar layers <div>
Imágenes usan tag de texto alternativo alt=”texto alternativo”
Usar tags básicos Para titulos, parrafos, hipervínculos, imagenes, listas ordenadas
Todo documento xhtml debe contener Doctype que puede ser transicional, frameset o strict
Los tags xhtml deben estar en minúsculas y deben cerrarse todos los tags que sena abiertos
Uso correcto de javascripts
Uso correcto de links
Dimensiones y estructura
La web debe ser optimizada para 1024 x 768 pixeles como resolución minima
Ancho de página de 900 pixeles
Fuerntes rss
Mapa del sitio
Estructura de navegación
Estructura de la web
Formada por diversos componentes visibles para el usuario
Información organizada y clasificada
Diseño de interacción
Definir procesos mediante los cuales el usuario va interactuar con nuestro siito y deben ser para el usuario faciles de recordar y utilizar.
HOSPEDAR UNA PAGINA WEB TOTALMENTE GRATIS
http://www.youtube.com/watch?v=JluflH6UOP4
Elegir un buen servicio de hosting http://www.comocrearunsitioweb.com/como-elegir-un-servicio-de-hosting
C. Determinación de la información del sitio.
Etapas de desarrollo de un proyecto web
Pasos a seguir para elaborar una página WEB http://fcmfajardo.sld.cu/jornada/consejos.htm
1. Conceptualización o Planificar la Web
2. Armado y configuración de las paginas
3. Pruebas y puesta en marcha del sitio web
La realización y creación de páginas WEB es una labor que requiere de una cierta estructura y planificación al comienzo de su elaboración. El resultado final de nuestro trabajo dependerá de la organización, la originalidad y los elementos utilizados en las páginas que se creen. Debe tenerse siempre presente, a quien va dirigida nuestra WEB, para adecuar los contenidos y el estilo en función del colectivo que va a leer nuestras páginas. Cuide que el lector no se pierda en la navegación, por lo que se debe estructurar de una forma clara la relación de unas páginas con otras.
1. Conceptualización o Planificar la Web
A la etapa de Prediseño o conceptualización podemos dividirla en cinco componentes. Ellos son: objetivos, público, contenidos, estructura y visualización. Estos interactúan entre sí y se condicionan mutuamente.
1.1 Temática del sitio:
La idea de crear un sitio web nace porque tenemos algo que comunicar con el mundo. Y un tema que puede resultar interesante.
El tema también debe de ser concreto. Creando un sitio independiente para cada tema.
No sólo debemos de elegir un tema que resulte atractivo para un grupo de usuarios, si no que debemos de tener información sobre él. No tiene demasiado sentido crear un sitio para escribir un sólo artículo de media página.
El tema elegido determinará el diseño de la página. No es lo mismo si pensamos mostrar fotos de animales para los amantes de las mascotas, una web para niños, una empresa de informática, etc.
1.2 Definición de los objetivos.
El primer paso, para la creación de páginas WEB bien estructuradas, es saber de antemano el mensaje que se desea transmitir. Hay que responder a la pregunta: ¿para qué se pública este sitio?; ¿qué quiero que suceda raíz de mi publicación en la Web?
Las respuestas deben ser del tipo como por ejemplo: quiero que los clientes puedan actualizar la lista de precios, en forma sencilla, que acceda al catalogo electrónico de productos y puedan hacer sus pedidos automáticamente, contribuir acerca de la necesidad de conservar las especies en peligro de extensión, etc.
En la elaboración del objetivo (si existe más de uno, hay que listarlos a todos y jerarquizar) conviene que participen todas las personas que tienen que ver o están interesadas en el éxito del proyecto.
En este momento habría que validar si las aspiraciones expresadas en los objetivos son compatibles con el funcionamiento de Internet. Por ejemplo, si bien es posible vender libros, discos, pizzas o corbatas a través de Internet, posiblemente no funcione con calzado, que necesita ser físicamente probado.
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 lo anterior, es importante que estos objetivos sean explicitados adecuadamente al comienzo del desarrollo, con el fin de que todo el equipo tenga claro el horizonte que debe tener el 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. De más está decir que los objetivos del 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, 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.
1.3. Público
Al hablar de público no nos referimos a cualquier persona que recorriendo la red llegue a nuestra página, sino a aquella parte de la población a la que pretendemos alcanzar e influir con el mensaje. Esto esta estrechamente vinculado con los objetivos establecidos y la naturaleza del sitio que nos proponemos.
Necesitamos construir un identikit de nuestro público, tratando de definir, en general sus intereses, inclinaciones, gustos, preferencias, etc., y en particular, como usuarios de Internet. Tenemos que dar una respuesta lo más concreta y específicamente posible a la pregunta "esa gente, ¿qué busca de mi página?". Porque la Web debería dar respuesta a esa pregunta.
Algunas definiciones de audiencia que deberán estar presentes
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 es permitir el acceso de ellos, a través del cumplimiento de las normas de Accesibilidad que se han recomendado como estándares internacionales.
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, 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á cibernautas que ingresan al Sitio Web desde lugares diferentes a nuestro lugar de origen, por lo que los contenidos deben responder también a esta diversidad.
Formas de establecer la Audiencia
1. Investigar en la propia institución, para determinar a quiénes atienden sus diferentes reparticiones. Entrevistar especialmente a los que atienden público es una fórmula que permitirá determinar con bastante exactitud qué está ocurriendo con la audiencia.
2. 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 cyber?
¿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:
a. Tipos de usuario que se podrían atender a través de Internet
b. Expectativas de los usuarios respecto del sitio
c. Necesidad de información de la institución
3. Estudiar Escenarios de Uso, tiene que ver con la forma en que el equipo de desarrollo responda a dos preguntas:
a. ¿Cuáles son las audiencias previstas?
Determina hacia quiénes se deberán enfocar el sitio y, por lo mismo, comenzar a tomar decisiones respecto de la forma de navegación, servicios interactivos previstos y otros elementos de despliegue que tendrá el sitio.
b. ¿Por qué la gente vendrá a su sitio?
Lo que se busca es que basados en las audiencias posibles, sea factible imaginar los tipos de contenidos que ellos vendrán a buscar al sitio.
1.4 Contenidos
Eye Tracking: ¿en qué se fijan sus clientes?
http://www.youtube.com/watch?v=UXelg0T-iJA
Se debe proceder a hacer las definiciones más concretas que permitan decidir qué contenidos son los que van 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.
Norma general del contenido de un sitio
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, etc.
Interés de los contenidos según usuario interno o externo.
Usuario externo de la institución, interesa información referida a los trámites, seguida por la que informe acerca de cómo tomar contacto con la institución.
Usuario interno, lo más importante será la información de Novedades, seguida por la de organigrama y presentación interna.
Agrupar y Etiquetar el Contenido
Ordenar los contenidos, agrupándolos en conjuntos coherentes y dándoles nombres que los identifiquen. 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.
Comprobaciones empíricas de la validez de los nombres escogidos.
Para ello, se requiere que los contenidos 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.
Identificar Requerimientos Funcionales
Se debe trabajar 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
Análisis de Sitios Similares
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.
D. Diseño de la estructura del sitio.
Consiste en tres etapas:
1. Definir la estructura del sitio o mapas del sitio
2. Definir el árbol de contenidos
3. Definir los sistemas de navegación que se ofrecerá a los usuarios para que avancen a través de sus contenidos.
Elaboración de mapas del sitio.
El mapa del sitio o sitemap como su nombre lo índica es una representación gráfica o textual de un sitio web, equivalente al índice de un libro y consta de una sola página en html mostrando la estructura del sitio:
directorios
archivos y
como están enlazados.
El mapa del sitio facilita la navegación a nuestros usuarios así como de los buscadores
Características de un mapa del sitio en html
• debe de ser claro
• jerarquizado
• con títulos descriptivos
• cortos
• agradables a la vista
Definir el árbol de contenidos
Es un diagrama que muestra muestre de manera práctica cuántas secciones tendrá el sitio en desarrollo y cuántos niveles habrá dentro de cada uno.
2 tipos de árboles
Árbol Organizacional: agrupa los contenidos de la manera como se organiza la institución, pero no basado en su estructura de funcionamiento, sino en su lógica de actividad.
Árbol Funcional: Agrupa los contenidos de acuerdo a las tareas que se puedan realizar dentro del sitio.
Las recomendaciones para la generación de este árbol son las siguientes:
1. Secciones: se debe intentar que sean las menos posibles, con el fin de concentrar las acciones del usuario en pocas áreas; hay que considerar que cada una de las áreas a integrar en el árbol requerirá de mantenimiento posterior en contenidos, gráfica y funcionalidad, lo que encarecerá el costo final de operación del sitio. Dado lo anterior, se recomienda que las secciones se sitúen entre 5 y 7.
2. Niveles: se debe intentar que el usuario esté siempre a menos de tres clicks del contenido que anda buscando. Por ello no se debería crear más de tres niveles de acceso; esto significa una Portada, una Portadilla de Sección y los Contenidos propiamente tales.
3. Contenidos relacionados: se debe considerar que habrá funcionalidades que estén presentes en todo el sitio. Entre ellas se incluyen elementos como Buscador, Preguntas Frecuentes y Formularios de Contacto. Se recomienda que este tipo de elementos quede fuera del árbol y floten sobre éste, con el fin de indicar que desde todas las páginas habrá enlaces a ellos.
Definición de los sistemas de navegación.
Consiste en generar los sistemas de acceso a los contenidos en el Sitio Web. A través de estos, los usuarios podrán avanzar por sus diferentes áreas, sin perderse. En la generación de dichos sistemas se debe atender a dos elementos que serán muy importantes:
Textual: se refiere a que la navegación se hará a través de elementos concretos, tales como menús, guías, botones y otros elementos que deben ser claramente distinguibles dentro de la interfaz. Para generarlos se debe conseguir que cada uno de ellos represente claramente la función para la que fueron designados y no dejar lugar a dudas sobre su función ni sobre la acción que desarrollarán al ser usados. Es decir, un botón debe parecer tal y no sólo un parche de color sobre la pantalla. Adicionalmente, es muy importante que las palabras escogidas para indicar acciones, sean claras y precisas. En este sentido, si un botón necesita ser explicado, es mejor desecharlo y buscar otra solución.
Contextual: es todo lo referido a cómo se presenta la información, utilizando para ellos elementos basados en texto, gráficos o bien de entorno. Los elementos relevantes en este caso, serán todos aquellos que permiten mostrar la navegación en la pantalla. Entre ellos, la gráfica utilizada, la redacción de los textos que se muestran e incluso el nombre del dominio (URL) que permitirá que el usuario sienta que está en el lugar indicado.
Características de los Sistemas de Navegación
Al generar el sistema de navegación, se deben tener en cuenta las siguientes características:
Consistente: el sistema debe ser similar en todo el sitio, en lo referido a su ubicación y disposición en las páginas. Esto se aplica también a aquellas instituciones que pueden tener más de un Sitio Web.
Uniforme: el sistema debe utilizar similares términos con el fin de que el usuario que lo vea en las páginas, confíe en que sus opciones llevan siempre hacia los mismos lugares dentro del sitio.
Visible: el sistema debe distinguirse claramente dentro del sitio, con el fin de que el usuario cuente con él, como si se tratara de una guía permanente en el área en que se encuentre del sitio.
Debe de saber dónde está. Debemos de dejarle claro en qué parte del sitio se encuentra. Para esto es muy útil el título de la página y utilizar un encabezado que identifique la sección. También debe de distinguir si sigue en nuestro sitio, o si ha pulsado un enlace que le lleve a un sitio distinto.
Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y otra vez por la misma página para buscar algo. Por ejemplo, distinguiendo los enlaces ya visitados.
Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben de ser claramente identificables. Además, no deben de ofrecer dudas de a dónde llevan, por ejemplo con nombres de páginas entendibles, que se muestran en la barra de estado, o con textos de información emergentes.
Debe de poder seguir navegando. No le enviaremos a una página sin enlaces, desde la que no pueda continuar recorriendo el sitio. Piensa que puede acceder directamente a esa página, por ejemplo a través de un buscador, por lo que no podría utilizar ni el botón Atrás del navegador.
E. Determinación de elementos de los sistemas de navegación.
Entre los elementos más relevantes que conforman el sistema de navegación se cuentan los siguientes:
1. Menú General: siempre presente en todo el sitio, permite el acceso a cada una de las áreas del sitio.
2. Pie de Página: usualmente ubicado en la parte inferior de cada página, indica el nombre de la institución, teléfonos, dirección física y de correo electrónico.
3. Barra Corporativa: ofrece diversas opciones de información respecto del sitio y tal como el anterior, se muestra en todas las páginas.
4. Ruta de Acceso: listado que aparece en la parte superior de cada página y que muestra el trazado de páginas que hay entre la Portada del sitio hasta la página actual que se esté revisando; cada una de ellas debe tener un enlace, para acceder al área de la cual depende la página. Cada uno de los elementos que conforman este camino debe tener un enlace que permita el acceso a esas áreas. En la literatura internacional en inglés sobre este tema, se llama a este elemento como breadcrumbs.
5. Fecha de publicación: para saber la vigencia de publicación del contenido desplegado.
6. Botón Home: para ir a la portada
7. Botón Mapa del sitio: para ver el mapa del Sitio Web
8. Botón Contacto: para enviar un mensaje al encargado del sitio (o, de existir, a la OIRS).
9. Buscador: presente en cada página si es que la funcionalidad existe en el sitio.
10. Botón Ayuda: para recibir ayuda sobre qué hacer en cada pantalla del sitio.
11. Botón Imprimir: para imprimir el contenido de la página; se espera que el formato de impresión del documento que se muestra en pantalla sea más simple que la página normal del Sitio Web, para dar la impresión al usuario de que hay una preocupación por ayudarle en la tarea de llevar impreso el contenido.
Estructura del menú
El uso de menús es muy habitual en las páginas web. Un menú no es más que una lista de enlaces relativos a nuestro sitio, llamados elementos del menú.
Por lo general el menú se suele colocar en la parte superior de la página, junto al logo o debajo de él, o en un lateral, normalmente el izquierdo.
El menú no debe de ser demasiado extenso. En un sitio grande no podemos pretender enlazar con todas las páginas, y no sería útil hacer buscar al usuario entre cincuenta enlaces.
Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos métodos para que el usuario pueda expandir cada sección y ver enlaces a los apartados de la sección, o utilizar menús desplegables. También podemos mostrar los enlaces a las distintas partes de la sección en que se encuentra el usuario, ya que si está en esa sección es probable que le interesen los apartados relacionados.
Los elementos del menú deben de ser descriptivos. Por ejemplo, no es útil poner una imagen, por bonita que sea, si puede que el usuario no entienda qué significa o a dónde lleva. O que para saberlo tenga que poner el cursor sobre él.
El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en todas las páginas.
En lo que se refiere al código, el menú suele tener estos elementos:
• Los menús se suelen basar en listas <ul></ul>. Dentro de cada elemento de la lista, colocaremos un enlace.
• El aspecto del menú se consigue por CSS.
• Suelen tener código javascript, por ejemplo para mostrarlo, producir efectos más o menos avanzados, o en vez de los enlaces.
Por lo tanto, comenzaremos creando nuestro menú como una lista, a la que más adelante le iremos dando estilo hasta convertirla en un atractivo elemento de navegación
Definición del diseño visual.
Consiste en avanzar hacia la generación del diseño visual de las pantallas del sitio. El cómo presentamos la información es muy importante para un sitio web. Y esto lo conseguimos con un buen diseño.
Ideas básicas para un buen diseño:
Comodidad para el visitante. Le debe de resultar cómodo navegar por el sitio, y también debe de poder captar la información (texto, imágenes, flash, vídeos...). Por eso es importante un buen sistema de navegación, y presentar el contenido de forma clara y espaciada.
Comodidad para el autor. Cuanto más fácil nos resulte realizar modificaciones, mejor. Por eso separaremos el contenido del diseño, utilizando hojas de estilo.
Accesibilidad. Cuanta más gente pueda ver nuestro sitio mejor. Pensemos en cómo accede el visitante. En el aspecto técnico, el sitio debería de seguir los estándares, para facilitar la compatibilidad con navegadores antiguos, u otros dispositivos, como teléfonos móviles. También es importante un diseño que soporte las pantallas pequeñas, pero que aproveche las pantallas de gran tamaño, cada vez más frecuentes. Además, hacerlo legible y poner textos descriptivos a las imágenes puede facilitar el uso para visitantes con problemas visuales.
Usabilidad. Por otra parte, pensemos en quién es el visitante. No es lo mismo si se dirige a niños, adultos, personas mayores o a todo el mundo. En cualquier caso, nuestro sitio debe de ser fácil de usar.
Transmitir. El diseño debe de transmitir lo que el usuario puede esperar de él. Por ejemplo, de un banco esperamos seriedad, por lo que un diseño informal puede ser contraproducente.
Bonito y original. El diseño debe de ser agradable, combinar bien colores, organización de los elementos, etc. Y cuanto más original sea, más lo será nuestro sitio.
Simple. Cuanto más simple sea el diseño, más se facilitarán el resto de aspectos que hemos comentado.
Estos aspectos debemos de tenerlos en cuenta, pero no podemos pretender aplicar cada uno al 100%. Por ejemplo, un diseño más original implicará utilizar más elementos, y que todos aparezcan correctamente ordenados, lo que lo hará más complejo. Y al final un buen diseño depende de la temática de la página y de lo que queramos transmitir con ella.
Diseño de las estructuras de las páginas.
Esta etapa considera la generación de dibujos sólo lineales 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, 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 tengan ningún elemento gráfico o visual concreto, sino que sólo incluyan líneas y bloques que representen objetos de contenido (como logos, viñetas o fotos), el uso de estas imágenes ayudará a que la discusión sobre cada pantalla se centre en la funcionalidad y no en temas más subjetivos como colores o calidad de los elementos de diseño en la página.
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.
Criterios de Usabilidad: se deben tener en cuenta todos los criterios que se dan a conocer sobre usabilidad.
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.
La intención de esta etapa es usar el diseño de pantalla que se ha creado, contando con enlaces reales que permitan ver la forma de usar sus atributos (cada enlace tiene los estados de Enlace, Flotante, Activo y Visitado) y revisar la forma en que se despliegan las páginas que se van a desarrollar.
Adicionalmente, en esta etapa será posible hacer la comprobación efectiva del peso de las páginas una vez construidas y se podrán optimizar los elementos que queden fuera de norma por peso o tamaño.
