jajajaja, asi me reí cuando lñeí por primera vez el comentario de un compañero, ya que en post anteriores cuando se iniciaba el proyecto correspondiente a la Semana de Ciencia y Tecnologia,  afirmaba que era el momento en el que ambas materia impartidas por el Profe ISC Walter, se unificaban en un solo proyecto, y al igual la confusion de clases que tenemos con estas, y el compañero Moguel alias el "Mo", me comentó de que efectivamente asi estaba sucediendo y donde precisamente vamos a utilizar la HIPERTECNICA, Jjajja

En este blog no hay muchos comentarios porque la mayoria estan en mi blog de hipermedia, ya que durante el proyecto de la Semana de Ciencia y Tecnologia, no tomabamos esta clase, la utilizamos para el proyecto de lleno, y jejeje.

eldien843.blogspot.com

Accesibilidad I. Nivel WAI-A


Proporcione contenidos alternativos equivalentes a los contenidos audiovisuales
Ofrezca contenidos que cuando sean presentados al usuario proporcionen la misma funcionalidad o propósito que los contenidos audiovisuales.
Puntos que se deben seguir:
 Proporcione texto equivalente a todos los restantes elementos. Esto incluye: imágenes, representaciones gráficas de texto, gráficos con mapas, animaciones, applets, scripts, frames, botones gráficos, sonidos y video.
 Proporcione enlaces de texto redundantes para cada región de un "server-sive image map"
 Proporcione una descripción audible de la información importante de las imágenes de una presentación multimedia.


El color no es indispensable
Asegúrese que el texto y los gráficos son comprensibles sin el uso del color.
Puntos que se deben seguir:
 Asegúrese que toda la información que contenga color puede ser igualmente accedida sin color.


Use las marcas y las hojas de estilo adecuadamente
Marque los documentos con los elementos estructurales adecuados. Controle la representación visual con hojas de estilo.


Use el lenguaje de una manera clara
Use marcas que faciliten la pronunciación e interpretación de abreviaturas o texto en diferente lenguajes.
Puntos que se deben seguir:
 Identifique claramente los cambios de lenguaje natural de un documento de texto. Ej. Use el atributo de HTML "lang"

Accesibilidad II. Nivel WAI-A


Cree tablas que se transformen adecuadamente
Asegúrese que se las tablas tienen las marcas suficientes para ser transformadas por navegadores accesibles y otros navegadores.
Puntos que se deben seguir:
 Para las tablas de datos, identifique las cabeceras de filas y de columnas. Ej. Use para identificar las cabeceras.
 En las tablas de datos que tienen 2 o más niveles lógicos de cabecera de fila o columnas, use marcas para asociar las celdas de datos y las celdas de cabecera.


Asegúrese que las páginas que contienen elementos de nuevas tecnologías son accesibles sin ellas
Asegúrese que las páginas son accesibles incluso cuando las nuevas tecnologías usadas no son soportadas o están desactivadas.
Puntos que se deben seguir:
 Organice los documentos para que puedan ser leídos sin el uso de hojas de estilo.
 Asegúrese que el contenido dinámico equivalente es actualizado cuando el contenido cambia.
 Asegúrese que las páginas son utilizables cuando scripts, applets u otro contenido de programación estén desactivados o no estén soportados. Si esto no es posible, proporcione información equivalente en una página alternativa.


Asegúrese el control de los elementos basados en el tiempo
Asegúrese que todos los elementos de que mueven, parpadean o se actualizan automáticamente, pueden ser parados o pausados.
Puntos que se deben seguir:
 Evite que la pantalla parpadee. Existen personas que son fotosensiblemente epilépticas.
"y "

"no están definidas en ningún estándar de W3C así que no las use.


Asegure accesibilidad directa de las interfaces definidas
Asegúrese que las interfaces usadas siguen las normas de un diseño accesible.
Puntos que se deben seguir:
 Los elementos como scripts y applets deben ser directamente accesibles o compatibles con tecnologías accesibles.

Accesibilidad III. Nivel WAI-A


Diseñe de manera independiente del dispositivo
Asegúrese que el usuario pueda navegar con el dispositivo que le resulte más adecuado.
Puntos que se deben seguir:
 Proporcione mapas de cliente "client-side maps" en vez de mapas de servidor "server-side maps" excepto en las regiones que no se puedan definir con una forma geométrica.


Use soluciones interinas
Use soluciones interinas para ayudar a las tecnologías asistidas y viejos navegadores. Estas soluciones podrán ser eliminadas cuando los navegadores avancen en sus capacidades.


Use las tecnologías W3C
Use las tecnologías W3C y siga las guías de accesibilidad.
Formatos como PDF, Shockwave, Flash, etc. Requieren aplicaciones especificas o conectores "plug-ins". Muchos de estos formatos no son accesibles y debería proporcionarse contenido equivalente a estos.


Proporcione información de orientación y contexto
Proporcione información de orientación y contexto para ayudar los usuarios a comprender páginas o elementos complejos.
Puntos que se deben seguir:
 Titule cada frame para facilitar la identificación del contenido y la navegación.


Proporcione mecanismos claros de navegación
Proporcione mecanismos de navegación claros y consistentes para facilitar que las personas encuentren lo que buscan.


Asegúrese que los documentos son claros y simples
Asegúrese que los documentos son claros y simples de manera que son fáciles de entender.
Puntos que se deben seguir:
 Use el lenguaje apropiado más claro y simple que sea posible adecuado al contenido del sitio.

Ha llegado el momento en el que las dos materiaas que llevamos Tecnicas de Diseño Web y Metodlogia de desarrollo de Hipermedia, se conviertan en una misma,  asi como lo leen, estas dos materias se encuentran estrechamente relacionadas que todos las confundimos y llega el momento en el que no sabemos que materia nos toca o si el tema le pertence a hipermedia o a tecnicas, Ayuda!!!!! sin embargo con un poco de analisis y observacion nos damos cuenta jeje, sin embargo con que tengamos el conocimiento de  ambas no importa si es esta o aquella, si bien lo aprendimos lo podemos aplicar en ambas o en cualquier otra que asi lo requiera.

En esta clase se discutio cada uno de los puntos necesarios para la elaboracion de un sitio web, desde el momento en el que se decir crear, posteriormente se define el objetivo que no es otra cosa mas que decir el porque o para que,  una vez que conozcamos esto es el momento que definir que vamos a poner y como lo vamos a poner, es decir, como quiero que mi publico objetivo lo vea y se interese por el, que no le aburra yu que le se facilite las cosas, que todo sea obvio, en esta parte se define si va a tener dos, tres o mas columnas nuestra paginas.

Si bien ya definimos como se va a ver el contenido, es momento de ver como se va ver cada una de las paginas que conforman nuestro sitio web, desde los colores hasta las imagenes editadas, videos etc etc.

Y si bien nuestro diseño no nos convence podemos crear dos o mas pantillas para ver como se veria de esta forma o de otra siempre y cuando no varie mucho.

Terminado el sitio viene su posicionamiento, las reglas que se deben de seguir pero igual estan las que NO SE DEBEN SE SEGUIR.

En fin esta es toda la clase y me parecio muy buena ya que se fué formando del la lluvia de ideas que tiene el grupo y parte de investigacion rapida en internet, todo se complementa.

No participes en esquemas de vínculos diseñados para incrementar el ranking o el valor de PageRank de tu sitio. En particular, evita vínculos que enlacen con los creadores de sitios fraudulentos o "vecindarios indeseables" de la web, ya que tu propio ranking podría verse afectado negativamente por ellos

Aquí resalto la importancia de hacer enlaces o alianzas con otros portales. Evita establecer alianzas con páginas que no tengan relevancia para la tuya o participar en esquemas de intercambio de enlaces con páginas que no aporten ningún valor a tus clientes. De nuevo, Google te está vigilando. Si no tienes muchas visitas y de repente tu portal aparece por todas partes, esto se puede ver como fraudulento y te penalizarán. Tu objetivo es crear enlaces de importancia y relacionados con tu temática.

DESCRIPCION DEL MAPA CONCEPTUAL

En el diseño de un sitio web existen varios aspecto que hay que tener en cuenta, entre ellos destacan:

1 REGLAS

Cuando creas un nuevo sitio web o rediseñas uno existente hay cuatro reglas básicas se debería seguir para lograr que el sitio sea más efectivo y funcional y tenga más éxito.

1. Que sea fácil de leer

Cuando haces un sitio web lo primero de lo que necesitas asegurarte es de que es fácil de leer. Cuando escribas contenidos recuerda que la mayoría de los visitantes de sitios web no leen cada palabra de una página, de hecho solo 'escanean' la página buscándo lo que quieren.

Cambia los contenidos

Cambia la página y usa encabezados entre las ideas principales de modo que la gente que escanee tu sitio pueda encontrar rápidamente lo que busca. Usa encabezados significativos entre cada párrafo o idea principal, esto ayuda en la SEO y ayudarán con las etiquetas. Usa siempre una escritura estructurada. Adicionalmente evita los párrafo largos, has de dividir los párrafos demasiado largos.

Color y tipo de letra

Ayuda a que sea más legible, usa contrastes fuertes de colores entre las fuentes y el fondo. Un texto negro sobre fondo blanco puede resultar desolador pero es muy legible. Para hacer un sitio web más amable a la vista prueba un fondo que no sea del todo blanco y una letra gris oscura casi negra.

ejemplos:

a. Evita los colores vibrantes en el fondo como el morado o el amarillo. Estos colores de fondo hacen que un texto sea dificil de leer.

b. Evita usar una imagen detrás del texto

c. Evita usar colores muy vivos de texto sobre fondos de color vivo.

Desde el punto en que muchos navegadores solo reconocen las fuentes básicas, usa las fuentes básicas. En realidad no hay fuentes estandar, o básicas, pero hay ciertas fuentes que estan instaladas en la mayoría de navegadores. Esto incluye Arial, Verdana, Tahoma y Times New Roman. Tus lectores verán algo diferente de lo que tú ves si usas otras fuentes.

Navegadores estandar

Cuando desarrolles tu sitio y lo pruebes usa un navegador estandar como FireFox. Si desarrollas tu web según los estándares funcionará en la mayoría de navegadores, incluído Internet Explorer (IE). Se recomienda que pruebes el sitio usando las más novedosas versiones de buscadores.

2. Simplifica la navegación

Los menús y enlaces componen la navegación que es lo que el visitante usa para ir de una página a otra en un sitio. Un visitante de tu sitio debería ser capaz de llegar a donde quiere en tan solo tres clicks de ratón.

Los puntos de navegación múltiple hacen más fácil encontrar las cosas. Repite el menú superior y el del final. También crea menús a la izquierda o derecha.

Usa enlaces dentro de tu texto a otras partes de tu web. Puedes crear enlaces que serán beneficiosos en la SEO. Generalmente hay dos formas de crear enlaces dentro de tu texto.

La forma equivocada: 'Para conocer técnicas de SEO pinche aquí'

La forma correcta: 'Es importante usar buenas técnicas de SEO'

Usa estos textos en los enlaces que lo describen de la mejor forma posible. Hay programas que indexan automáticamente los contenidos de las páginas y que visitan tu sitio y leen los enlaces. Las arañas pueden indexar los enlaces descriptivos dentro de una categoría pero no tienen nada que hacer si leen 'pincha aquí' hasta que llegan a la página enlazada.

3. Diseño de contenidos.

Como mucho pueden usarse uno o dos diseños en el diseño de un sitio web. Cuando un lector navega por tu web debería poder acostumbrarse a mirar en los mismos sitios para tus direcciones, tus subdirecciones y tus contenidos. Esto es todo lo que hay que decir.

4. Es conveniente aligerar el peso de las páginas.

El peso de la página es el tamaño total de una págína en tu sitio, medida en bytes, el código, el texto y las imágenes. Lo que tu sitio web pesa marca una diferencia para tus espectadores. Una página que pesa poco es mejor porque se carga más rápido.

¿Qué significa que sea ligera?

a. Que no haya grandes imágenes ( a menos que el propósito del sitio sea mostrar imágenes, como arte o fotografía)

b. Es mejor que hay pocas imágenes

c. Optimiza las imágenes para la web, que no tengan más de 72 dpi.

d. Usa una dimensión de imagen tan pequeña como sea posible para ese diseño determinado.

¿Cuánto ha de pesar una página?

Algunos estudios hablan de 64K como un tamaño máximo adecuado para una página web. 64K es el máximo, de cualquier modo todavía es, en mi opinión, demasiado grande. La página más pequeña es la mejor. 25K esta bien, 15K es incluso mejor. Hay un equilibrio entre diseño y funcionalidad. Es una buena idea marcarse un poco más la función como objetivo.

Prueba las páginas en tu servidor mientra la desarrollas para que puedar ir probándola. Puedes probar el peso de las páginas on line para asegurarte de que vas por el camino adecuado.

Formas de hacer las páginas más ligeras.

a. Usa hojas de estilo

b. Usa DIVs en lugar de TABLEs, donde sea posible.

EJEMPLOS

http://www.scourdesign.com/ En este sitio encontramos tipografias diferentes, no toman en cuenta la accesibilidad, en cuanto a su contenido tiene muchas imagenes y al conexion de 4 mbits no la veo lenta al momento de acceder pero imaginense como seria con 512 mbps.

http://www.cssimport.com/ En este sitio podemos apreciar diversas palntillas elaboradas solamente con CSS y que hacen empleo de etiquetas DIV en lugar de tablas, y pues el sitio mismo es un claro ejemplo.

2 MARKETING

El objetivo principal de una página de Internet como la que le ofrecemos es atraer más clientes y aumentar sus ventas. Para esto se necesita:
1. Sus clientes potenciales lleguen a su sitio.
2. Que los que llegan compren.
3. Que los que compran vuelvan.
Estos conceptos son comúnmente usados en publicidad, pero la mayor parte de los diseñadores de páginas no los incorporan en sus diseños.

Los elementos óptimos que debe de tener un sitio de Internet son:

Número de Páginas
Número de Cuartillas de texto
empresa
Inserción de logotipo de su
Fotografías descriptivas
Título en cada página
Animaciones GIF y Elementos con Flash

EJEMPLOS:

http://www.ecommercechile.cl/web.html

Excelente pagina que nos permite observar esta caracteristica de los sitios web, aqui vemos como la pagina principal tiene congruencia con las demas en el diseño y tipo de contenido, las letras son del tipo arial, hace uso de imagenes, describe sus servicios tiene cierta profundidad y otro aspecto es que mantiene interesado al usuario que viista este sitio y este interesado en al gun servicio.

3.- VISUALIZACION EN NAVEGADORES WEB

Cualquiera que se dedique al diseño web o al desarrollo de aplicaciones online sabe que un proyecto, antes de considerarse terminado, debe ser probado en la mayor cantidad de navegadores posible. Una forma de simplificar el trabajo es hacer pruebas según el motor interno de cada navegador, que principalmente son:

• Trident: Internet Explorer
• Gecko: Firefox, Flock, Camino, K-Meleon, Epiphany, etc…
• Webkit: Safari, Chrome, Konqueror, etc…
• Presto: Opera

Si probamos el nuevo sitio web en al menos un programa de cada grupo y no aparecen problemas, nos aseguramos una buena compatibilidad. Pero también es cierto que cada navegador usa una versión diferente de su motor de renderizado, por lo que este truco no resulta del todo fiable.
Por ese motivo en los últimos años han aparecido servicios que nos facilitan hacer pruebas en casi todos los navegadores existentes y en un amplio rango de versiones. Desde las más modernas, a otras con una década a sus espaldas que nadie con un poco de cordura usará, por ejemplo IE 4.
http://browsershots.org/ Gratuito
crossbrowsertesting.com: De paga

4.- RESOLUCION EN PANTALLA

Podemos hablar de dos tamaños de pantalla diferentes:

* Tamaño absoluto: es el tamaño "real" de la ventana del monitor, medido generalmente en pulgadas. Depende del monitor.
* Resolución o tamaño relativo : viene determinada por el número de pixels que se muestran en la ventana del monitor, siendo el píxel la unidad mínima de información que se puede presentar en pantalla, de forma generalmente rectangular. Depende de la tarjeta gráfica.

El tamaño absoluto se suele expresar en pulgadas de diagonal (1 pulgada = 25,4 mm). El más común en la actualidad es de 17’’ en ordenadores de sobremesa, aunque todavía quedan bastantes equipos antiguos con monitores de 15’’ y existen en el mercado bastantes de 21’’. El tamaño absoluto de los monitores de los equipos portátiles suele ser de 14-15’’.

En cuanto a la resolución, los valores más comunes son de 800x600 y de 1024 x768 pixels, aunque quedan todavía usuarios que trabajan por debajo, a 640x480, y por encima, a resoluciones de 1152x864 y 1280x960 pixels.

El tamaño absoluto y la resolución deben estar en concordancia para una visualización correcta, siendo valores aceptables los siguientes:

* 14" - 15": Resolución máxima apreciable: 800x600
* 17": Resolución máxima apreciable: 800x600 ó 1024x768
* 21": A partir de 1024 x 768

EJEMPLOS:

http://www.viviendasahbitat.tk/

http://hispanidadymestizaje.es/requerimientos.htm Este sitio tiene problemas con la resolucion de pantalla

5.- TIPOS DE AUDIENCIA

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 es permitir el acceso de ellos, a través del cumplimiento de las normas de 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.
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 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 usuarios locales que ingresan al Sitio Web desde lugares diferentes lugar para el que fue creado el sitio, por lo que los contenidos deben responder también a esta diversidad.

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?
• ¿Por qué la gente vendrá a su sitio?
Al responder la primera pregunta, será posible determinar hacia quiénes se deberá 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.
Al responder la segunda pregunta 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.

EJEMPLOS

www.itsmotul.edu.mx Este sitio tiene como publico objetivo los alumnos y personal docente, directivo y administrativo del tecnologico de la ciudad de Motul y de aquellos interesados en estudiar en esta isntitucion.

www.wikipedia.com Esta diseñado para todo tipo de publico, pero hace un enfoque especial en estudiantes.

6.- USABILIDAD Y NAVEGABILIDAD

Un sitio accesible es el que puede ser usado correctamente por personas con discapacidad. Las páginas web de un sitio accesible se transforman correctamente al reproducirse en otros navegadores a pesar de las posibles deficiencias físicas, sensoriales y cognitivas de los usuarios o de las barreras tecnológicas y del entorno de trabajo existentes.

para ser accesible el sitio debe albergar un contenido fácilmente comprensible y navegable. El contenido debe presentarse de manera clara, con un lenguaje simple y con mecanismos obvios de navegación para moverse entre las páginas. Estos aspectos también afectan directamente a la usabilidad del sitio web.

La usabilidad es la calidad del sitio web según la perciben los usuarios que acceden. Además de los ya mencionados, incluye aspectos como la facilidad de aprendizaje, o la posibilidad de realizar búsquedas.

Público objetivo

Accesibilidad y usabilidad son dos aspectos íntimamente relacionados. Ambos mejoran la efectividad, eficiencia y satisfacción de los usuarios. La accesibilidad está orientada a ampliar la base de usuarios que pueden acceder con éxito al sitio web.
Por otro lado, la usabilidad se enfoca más al público objetivo del sitio web. De esta manera un sitio orientado a desarrolladores profesionales puede hacer uso de funciones avanzadas de búsqueda y emplear un lenguaje más técnico que otro orientado a un público más general.

Al hacer estas y otras tareas posibles para usuarios con discapacidad, se las está haciendo también más fáciles para los usuarios promedio. Es decir, se está mejorando la usabilidad del sitio web para todos los usuarios, según la filosofía del Diseño para Todos.

EJEMPLOS:

http://www.tawdis.net/ Sitio web que nos permite realizar un analisis de nuestro sitio de acuerdo a estandares y normas con el fin de verificar y conocer que tan accesible es nuestro sitio web.

7. USO EFICIENTE DE CONTENIDO MULTIMEDIA

El uso excesivo de contenido multimedia hace que las paginas web sean muy pesadas lo que provoca que el usuario promedio cierre la pagina antes que está termine de cargarse por completo, sin embargo cuando el uso de este es eficiente, ademas de ofrecer un gran atractivo y proporcionar al usuario cierta comodidad y ser agradable ante sus ojos favorece que el cliente se interese y navegue por nuestro sitio web.

El contenido multimedia puede estar conformado tanto por imagenes como por audio y video o la combinacion de ambas. Esto permite a nuestro sitio web darle cierto dinamismo y creatividad, aqui recae el uso de flash y programas de edicion de video, audio etc con el unico fin de optimizar los contenidos logrando calidad y que no pese tanto.

FUENTES CONSULTADAS QUE SUSTENTAN LA INFORMACION QUE SE PRESENTA

http://www.lukor.com/webmasters/08040950.htm
http://www.tupaginaweb.com.mx/disenodepaginasweb.htm
http://www.stvisual.com/blog/como-visualizar-nuestras-webs-en-distintos-navegadores/
http://dglibre.com/2009/03/30/prueba-tus-sitios-web-en-todos-los-navegadores/
http://www.guiaweb.gob.cl/guia/capitulos/dos/audiencia.htm
http://acceso.uv.es/accesibilidad/artics/01-usabilidad-accesibilidad.htm

Esta es una descripcion de los que son los sitios confiables, lo pongo ya que esta tarea incluida encontrar la informacion en este tipo de sitios web.

SITIOS WEB CONFIABLES

• Sitios web orientados al usuario: directos, frontales y con información completa , segmentada y clara;


• Links hechos con enfoque al encuentro de información. Los links debieran ser textuales o si son imagenes, tener etiquetas "alt" o "title" bien definidas.


• No generar enlaces que lleven a otros, para pasar a otra web sin contenido.


• Páginas web livianas, con imágenes de bajo peso y nunca fotos completas cargadas como thumbnails;


• Poseer direcciones y teléfonos claros;


• Tener contraste entre el color de tipografía y el fondo de la web;


• No usar en forma indiscriminada música y efectos de .gif animados o animaciones flash, pues su uso excesivo hace aparecer a las webs como amateurs.


• No generar tedisosas intro flash, pues en general a los visitantes les produce más molestias que beneficios, no generando una primera imagen "potente".


• Generar contenido propio ( desable) o si es de recopilación, adaptarlo al usuario final, evitando textos excesivamente largos. Lo ideal es generar briefs, que permitan descarga de archivos adjuntos o bien, lleven a una nueva web, con información más detallada;


• Usar meta tags: títulos, descripciones y palabras claves lo más relacionadas a lo que el navegante encontraría en el sitio;


• Privilegiar el contenido, por que al final, las personas buscan algo que desean encontrar y cuando ésto se produce, su decisión de compra o de información, estará directamente relacionada a lo que ven, pero por sobre todas las cosas, su decisión de prospección o contacto se generará a partir de la "impresión" de la web y qué tan relevante, único o fidedigno sea el contenido mostrado.
  
  Por último, la sintaxis, ortografía, lógica y calidad de lo publicado cobran especial atención, haciendo que las personas prefieran un sitio web sobre otro, basados en el concepto de "confiabilidad", es decir cuán confiable le ha parecido la web que visita.