miércoles, 30 de junio de 2010

1.4.2 Fondo

Para hablar del fondo de los documentos HTML en el diseño web tenemos que tener en cuenta conceptos vistos antes como que el diseño siempre debe estar al servicio del contenido... legibilidad, usabilidad, accesibilidad...

La tabla de Karl Borggrafe

La tabla de Karl Borggrafe viene a informar sobre la legibilidad de las letras sobre fondos de distintos colores. Las mejores combinaciones son:

La tabla de Karl Borggrafe
1. negro sobre amarillo 6. blanco sobre azul
2. amarillo sobre negro 7. azul sobre amarillo
3. verde sobre blanco 8. azul sobre blanco
4. rojo sobre blanco 9. blanco sobre negro
5. negro sobre blanco 10. verde sobre amarillo

... ya vimos como crear reglas una entrada anterior sobre las hojas de estilo para colores del texto, tamaño... y también se puede hacer con el fondo de los párrafos.

Para introducir un color de fondo en toda la página o docuento HTML se debe hacer una regla en la hoja de estilo CSS:

body {
background: #00ff00;
}

... donde 00ff00 en el color verde en hexadecimal

En el siguiente punto 1.4.3 Imágenes veremos también como introducir imágenes en el fondo de un documento HTML desde la hoja de estilo CSS.

1.4.1 Color

Los colores provocan diferentes sensaciones en las personas; cada color tiene un significado que podemos utilizar al diseñar nuestro sitio web, así podemos sugerir o promover diversas sensaciones en nuestros visitantes.

Significado de los colores:

  • Blanco: significa seguridad, pureza y limpieza. A diferencia del negro, el blanco tiene una connotación positiva Es apropiado para organizaciones caritativas y asociable con hospitales, médicos y esterilidad. Puede usarse en sitios web de productos médicos o relacionados con la salud
  • Amarillo: simboliza la luz del sol. Representa alegría, felicidad, inteligencia y energía. Al amarillo simula entrar en calor, provoca alegría, estimula nuestra actividad mental y genera energía muscular. Con frecuencia está asociado a la comida Apropiado para webs infantiles y para ocio. Por su eficacia para atraer la atención, es útil para destacar aspectos importantes de un sitio web.
  • Anaranjado: Representa entusiasmo, felicidad, atracción, creatividad, determinación, éxito, ánimo y estímulo. Por su alta visibilidad también es útil para captar la atención y subrayar aspectos a destacar de un sitio.
  • Rojo: representa fuego y sangre, está asociado al peligro, la guerra, la energía, fortaleza, determinación así como a la pasión, al deseo y al amor. Visibilidad alta, para avisos importantes, prohibiciones y llamadas de precaución. Adecuado para sitios web del motor (coches y motos), bebidas energéticas, juegos, deportes y actividades de riesgo.
  • Púrpura: se asocia a la realeza y simboliza poder, nobleza, lujo y ambición. Sugiere riqueza y extravagancia. Asociado con la sabiduría, la creatividad, la independencia, la dignidad. El púrpura brillante es ideal para diseños dirigidos a la mujer y es apropiado para diseños dirigidos a niños.
  • Azul: el color del cielo y del mar, asociado con la estabilidad y la profundidad. Adecuado para productos de limpieza (personal, hogar e industrial) y lo relacionado con:
    • El cielo: lineas aéreas, aeropuertos.
    • El aire: acondicionadores, paracaidismo.
    • El mar: cruceros, vacaciones y deportes marítimos.
    • El agua: agua mineral, parques acuáticos, balnearios.
    • También es un color adecuado para promocionar productos de alta tecnología o alta precisión
  • Verde: el color de la naturaleza. Representa armonía, crecimiento, exuberancia, fertilidad y frescura. Por estar asociado con la naturaleza es ideal para webs de jardinería, turismo rural, actividades al aire libre o productos ecológicos.
  • Negro: representa poder, elegancia, formalidad, muerte y misterio. En una web puede dar imagen de elegancia y aumentar la sensación de profundidad y perspectiva. Sin embargo no es recomendable usarlo como fondo, pues disminuye la legibilidad.

El sistema RGB

Los colores aditivos son los usados en trabajo gráfico con monitores de ordenador, pues el monitor produce los colores partiendo de tres tubos de rayos catódicos: uno rojo, otro verde y otro azul.

Por este motivo, el modelo de definición de colores usado en trabajos digitales es el modelo RGB(red, green, blue). Los valores de cada color van desde 0 a 255 y, combinando sus valores se obtienen todos los colores visibles. Para mostrar el rojo "puro" en RGB, sería RGB(255, 0, 0).

El sistema hexadecimal

El sistema hexadecimal permite expresar fácilmente un color de la escala RGB al sistema empleado en HTML y en javaScript.

De esta forma, el rojo "puro" RGB(255, 0, 0), en sistema hexadecimal será RGB(ff, 0, 0), y en un fichero html o css se representará #ff0000. Para entender mejor esto, con más información y ejemplos de sitios web con colores determinados, mejor visitar siguientes enlaces:

Colores aditivos y colores sustractivos:
  • Colores aditivos: luces de color (R,G,B): rojo, verde y azul.
  • Colores sustractivos: absorbe los colores y refleja el que se ve (C,M,Y,K): cian, magenta, amarillo y negro.

Enlaces de interés:

martes, 29 de junio de 2010

1.3.8 Consistencia en el diseño: las hojas de estilo CSS

  • Estilo enriquecido CSS (Cascade Stile Sheet): Hojas de Estilo en Cascada. Permite la creación de documentos (páginas HTML) visualmente mucho más ricos separando el contenido del diseño.

  • Fácil de utilizar: permite al diseñador reducir sustancialmente la carga de trabajo al diseñar un sitio web

  • Reutilización en múltiples páginas: cuando la hoja de estilo (CSS) recoge aspectos comunes a varias páginas, puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos.
    http://camaleonscss.com/ es una web con el mismo contenido pero con diferentes ficheros CSS, haciendo clic en sus enlaces podemos ver distintos diseños y maneras de presentar la misma información en pantalla.
  • Reglas básicas de CSS (I): Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentro del documento HTML, así se puede conseguir el mismo efecto que usando el marcado tradicional, por ejemplo, lo que en HTML sería:
    <h2><font color="red">texto del elemento</font><h2>

    en el CSS, para todos los títulos del tipo <h2> sería:

    H2 {
    color: red;
    }
  • CSS (II): a la expresión "H2{color: red;}" se le denomina "regla", y esta que hemos definido en concreto, colorea de rojo los elementos del tipo 'h2'.
    Cada regla tiene dos partes: selector "H2", declaración "{color: red; }", y dentro de la declaración tenemos la propiedad "color" y el valor "rojo"...

    Para invocar las reglas CSS desde un archivo HTML, y que estas reglas hagan efecto en los elemento del fichero HTML al visualizarlo desde un navegador web, hay que hacer una llamada al archivo CSS desde el HTML, esto se hace entre las etiquetas <head> y </head> del fichero HTML, y la orden para que haga efecto es:

    <link rel="stylesheet" type="text/css" href="nombre-hoja-estilo.css">
  • Definición de clases dentro del CSS: se hace igual que una regla pero con un punto delante:
    .nombre {
    color: red;
    }

    así se ha definido la clase "nombre" con la propiedad "color" y el valor "rojo". Para invocarla desde el fichero html:

    <p class="nombre"> ... ... </p>
  • Definición de ID (identificadores) dentro del CSS: se hace de forma parecida a las clases pero se pone delante una almoadilla # en lugar de un punto:
    #nombre {
    font-size: 16px;
    font-weight: bold;
    }

    se ha definido el ID "nombre" con la propiedad de tamaño de fuente de 16 píxeles y en negrita. Para invocar este ID desde el fichero HTML:

    <p id="nombre"> ... ... </p>

    Los ID son más empleados que las reglas para trabajar con lenguajes de programación como Java.


Pseudo-clases o pseudoelementos

Algunos navegadores web no representan algunos de estos elementos, se pueden aplicar tanto a las clases como a los ID (identificadores), justo debajo de donde se definen los primeros, y comienza con el carácter ':', la pseudo-clase o el pseudoelemento y la propiedad y su valor... Un par de ejemplos:

.diferente {
color: green;
text-transform: capitalize;
}
:first-letter.diferente{color: #ff00ff}

En este caso, se asigna a la primera letra (first-letter) de la clase diferente el color #ff00ff.

#pollo {
font-size: 16px;
font-weight: bold;
color: navy;
}
:first-letter#pollo{color: #ff0000;}

En este otro caso se aplica a la primera letra de el ID pollo el color #ff0000.


Aplicar las mismas reglas a varias clases o elementos

La utilidad de esto es no repetir código en reglas de estilo que tienen declaraciones idénticas, los selectores deben ir separados por ",", y se procede de la siguiente manera:

.clase1, h2 {
color: green; text-transform: capitalize;
}
El código anterior aplica las mismas reglas a los elementos de la clase ".clase1" y a los elementos "h2" (cabeceras de segundo grado). La clase .clase1" y el elemento "h2 pueden estar también declaradas en otra parte del archivo CSS con otras propiedades y valores diferentes en sus declaraciones.

Aplicar reglas a determinados elementos HTML dentro de una clase

Atención en el selector de la regla, los términos que están separados por espacios y los que están separados por ",", procedemos así:

.clase1 p h2, clase2 a {
color: green;
text-transform: capitalize;
}
El código anterior aplica las reglas a los elementos "p" (párrafos de texto) y a los elementos "h2" (cabeceras de segundo grado) que se encuentren dentro de la clase ".clase1". Y también aplica las mismas reglas a los elementos "a" (hipervínculos o enlaces) de dentro de la clase ".clase2".

En el documento html, también podemos incluir varias reglas en un mismo elemento de contenido separando los nombres de las clases por espacios:

<img src="url-de-la-imagen" widht=300 height=125 class="case1 clase2 ... " alt="texto alternativo" />

Y aquí una chuleta, o guía de referencia rápida de CSS:

lunes, 28 de junio de 2010

1.3.7 Consistencia en el diseño: Plantillas

Una plantilla es una página pre-desarrollada para crear más páginas con el mismo patrón, diseño o estilo.

Son elementos del lenguaje HTML, que permiten definir y guardar características concretas para la presentación de textos y contenidos en la pantalla, que pueden aplicarse en cualquier parte del documento. Todo esto se verá en las próximas entradas de este blog.

1.3.6 Diseño independiente de la resolución

Se debe diseñar para todas las resoluciones de pantalla:

  1. Decidir resolución mínima: el acceso a sitios de Internet con resoluciones de 640x480 es de un 0,5%. En la actualidad se suele tomar como resolución mínima 800x600 ó 1024x768. Se puede diseñar para varias resoluciones.
  2. Diseñar para esta resolución: o sea, para la resolución decidida en el punto anterior... (ya se que suena raro este punto, pero fue así en clase).
  3. Al convertir en HTML, trabajar con porcentajes: ancho de 980 píxeles y las definiciones de otros elementos en porcentajes para aprovechar todo el ancho posible de la pantalla (980 píxeles me parece poco en estos momentos).
  4. Probar el sitio web con diferentes resoluciones y en diferentes navegadores.

Heatmap

Un heatmap es una herramienta que genera un mapa de calor de nuestro sitio web, esto es un gráfico que muestra donde hacen clic los visitantes de nuestro sitio web, o dicho de otro modo, que partes del sitio web les atrae más.

1.3.5 Espacio disponible y distribución del documento

Hace referencia a la distribución de los elementos de las páginas de nuestro sitio web -sin entrar de muchos más detalles-.

Estructura

Estructura u organización de la página
imagen "robada" de es.kiosquea.net

  • Cabezal o cabecera ("área de titular")
  • Menú de navegación superior "headbar" ("titular de navegación")
  • Menú de navegación lateral "sidebar" ("menú")
  • Contenido ("cuerpo")
  • Pié ("final de la página")

1.3.4 Mapa del sitio web (ii)

Continuación desde la entrada anterior: "1.2.4 Mapa del sitio web (i)"

  • El archivo robots.txt Es un archivo de texto (UTF-8) que dicta unas directrices para que todos los bots de los buscadores puedan:
    • Impedir acceso a robots determinados
    • Reducir sobrecarga del servidor... al poder indicar al bot a que archivos debe acceder y a cuales no
    • Prohibir zonas
    • Eliminar contenido duplicado
    • Fijar mapas del sitio
    El archivo robots.txt es el primer archivo que visitará los robots de los motores de búsqueda y su importancia esencial.

En User-agent ("nombre del robot") para especificar nombre del robot, se puede emplear User-agent:all ó User-agent:* para todos los robots; el robot de Google es "googlebot". Después se ponen las rutas donde queremos prohibir que acceda el /los robots

  • Disallow:/ prohíbe la entrada a todo el sitio.
  • Disallow:/foro/ prohíbe la entrada a el directorio "foro" del site.
  • Disallow: permite la entrada a todo el sitio.
  • Allow:/ permite la entrada a todo el sitio.
  • Sitemap:url_del_sitemap especifica la ubicación de donde está el sitemap.

viernes, 25 de junio de 2010

1.3.4 Mapa del sitio web (i)

El mapa del sitio web consiste en una lista de las páginas que forman un sitio web accesibles por una "araña web" de buscadores (bots).

El mapa del sitio puede ser un documento en cualquier formato, usado como herramienta de planificación para el diseño del sitio web, como una página que lista a las demás de sitio web, y organizado de forma jerárquica. Esto ayuda a los visitantes y a los bots de los motores de búsqueda encontrar las páginas del sitio.

El mapa web es un elemento imprescindible dentro de un sitio web

  • Sitemap: Google creó Google Sitemaps (en inglés: mapas de sitio de Google) para que los desarrolladores web puedan publicar listas de enlaces de sus sitios, si no se hace esto, el robot de Google no mira más de 100 por defecto, pues muchos sitios tienen un número grande de páginas dinámicas solo disponibles cuando los usuarios emplean los formularios correspondientes.

    Los Sitemaps pueden emplearse par indicar a una araña (bot) web como deben ser encontradas las páginas

    BÚSQUEDAS AVANZADAS EN GOOGLE:
    • site:www.coepa.es muestra todas las páginas indexadas del sitio
    • cache:coepa.es muestra la última copia cache que hizo Google del sitio; hasta que no haga otra no indexará más contenido
    • lick:coepa.es muestra todas las páginas que tienen un enlace a "coepa.es", o sea, enlaces externos de los que Google tiene constancia
  • El protocolo de Sitemap consta de etiquetas XML, todos los valores de un Sitemap deben incluir "caracteres de escape de identidad":

    caracteres de escape de identidad
    CarácterCódigo de caracteres de escape
    Símbolo unión &&amp;
    Comillas simples '&apos;
    Comillas "&quot;
    Mayor que >&gt;
    Menor que <&lt;

  • El fichero del Sitemap debe estar codificado en UTF-8
  • El Sitemap debe incluir:
    • Comenzar con la etiqueta de apertura <urlset> y acabar con </urlset>
    • Especificar el espacio de nombres (protocolo estándar) en la etiqueta urlset
    • Incluir una etiqueta de entrada <url> para cada dirección URL como una etiqueta XML principal.
      Aquí es donde se aplican los caracteres de escape de la tabla anterior.
    • Incluir una etiqueta secundaria <loc> para cada etiqueta <url>.
    • Etiquetas opcionales:
      • <changefreq> frecuencia con la que cambia la página, por ejemplo:
        • always
        • hourly
        • daily diariamente.
        • weekly semanalmente.
        • monthly para mensualmente.
        • yearly anualmente.
        • never nunca.
      • <priority> prioridad de la página dentro del sitio web, desde 0.0 como mínimo a 1.0 como máximo, por defecto se asigna 0.5 si no se especifica nada, pero a más prioridad, antes las visitará el bot.
      • <lastmod> última modificación en formato de fecha americano "YYYY-MM-DD".
  • Todas las URL del Sitemap deben proceder de un único host (o sitio web, o dominio)
  • toda la teoría se puede encontrar en http://www.sitemaps.org/es/
  • ¿Tengo que generarlo a mano? Se puede generar de forma automática: muchos CMS estándar incorporan esta funcionalidad. También hay herramientas para esto, como el programa GPL como "OPEN Site Map Generator", disponible en http://sourceforge.net/projects/sitemapgen/
  • Ubicación y comunicación del sitio web con los bots y mediante el Sitemap
    • Se recomienda ubicar el Sitemap en la raíz del sitio http://www.mi-dominio.com/sitemap.xml
    • Mediante interfaz de envío Herramientas para Webmaster de Google
    • Mediante solicitud HTTP <buscador_URL>/ping?sitemap=sitemap_url
    • Mediante el archivo robot.txt http://www.mi-diminio.com/sitemap.xml

miércoles, 23 de junio de 2010

1.3.3 Estructuras de navegación

O "Estructuras del sitio web":

El enunciado hace referencia a la disposición entre las diferentes páginas que forman un sitio web y los enlaces o forma de acceso de unas a otras.

estructura jerarquicaEstructura jerárquica (estructura en árbol): es la más empleada, desde la página principal se accede a las otras páginas secundarias, de las que se accede a otras terciarias, y así sucesivamente.

estructura linealEstructura lineal: parte de una página principal desde la que se accede a las otras de forma secuencial, una tras otra. Es análoga en su disposición a las páginas de un libro.

estructura lineal-ferarquica o mixtaEstructura lineal-jerarquica o mixta (árbol de listas): Mezcla las dos estructuras anteriores, parte de una página principal de la que se accede a otras secciones lineales. Se suele encontrar en sitios web de educación on line (e-learnig) donde se encuentra una estructura jerárquica para representar índices o diferentes temas y después, los contenidos de los temas van en estructuras lineales.

estructura frames (marcos)Estructura de frames (marcos): Es típica en una web que dispone de un menú siempre presente desde el que se accede a los contenidos de diferentes secciones, donde el menú es un fichero HTML estático y cada sección es otro.
Es una práctica en desuso por varios motivos, tanto de accesibilidad (a la hora de llegar desde un buscador) como de indexación (pues los contenidos pueden quedar divulgados en varios ficheros HTML).

estructura webEstructura web: es en la que se puede estructurar diferentes páginas con libertad total. Da más facilidades a los diseñadores, pero a veces es más confusa para los usuarios, ya que permite visualizar un sitio web sin rumbo fijo... es una estructura "del todo vale".

Las imágenes se han realizado con el software free de creación de diagramas de flujo Dia.


Dos reglas importantes: reglas de Jakob Nielsen

Jakob Nielsen nos da las dos reglas más importantes sobre la estructuración de un sitio web:

  1. La estructura del sitio web debe estar al servicio del contenido, reflejar el contenido y sus relaciones... Algo que parece obvio, a veces se suene pasar por alto.
  2. La estructura no debe reflejar la organización de su compañía (empresa, etc). Al usuario no le interesa su organización sino su Web. La estructura debe determinarse por las tareas, incluso si eso significa que varios departamentos tengan que colaborar para realizar un solo documento.
Dicho de otro modo: "El contenido de un sitio web debe estar al servicio del usuario"

Elementos semánticamente relevantes a la hora de definir una página (SEO)

Cuando hablamos de relevancia nos referimos a la relevancia de las palabras para los motores de búsqueda, o de los términos más relevantes para mejorar el posicionamiento de nuestro sitio web. Estos son:

  • Google AdwordsTítulo (title): la relevancia del título se reparte por igual entre cada una de las palabras que la componen, para que cada una de ellas no quede con poca relevancia no es conveniente poner más de cuatro términos o conceptos. Para determinar qué palabras emplear en este campo se puede usar la herramienta libre Google Adwords (def. wikipedia)

    Muy importante, para la elección de estas palabras, visitar la herramienta de Google Adwords:
    Consejos e ideas sobre palabras clave

  • Nombre de los ficheros html (o del las direcciones url de las páginas no principales del sitio web): los nombres se deben corresponder con el contenido del fichero (lo más semánticamente relevante con el contenido), y las palabras relevantes se deben separar por guiones medios (-), nunca guiones bajos (_), pues con estos últimos los buscadores (Google) las interpretaran como una sola palabra, y no tendrá la misma relevancia para los motores de busquedas.
  • Otro aspecto a tener en cuenta es que en los párrafos de texto, tiene más relevancia en las búsquedas las palabras del principio y del final del párrafo, pues lo lógico es que las primeras enuncien el contenido, mientras que las últimas suelen enunciar conclusiones. De la misma manera, los elementos en negrita, en cursiva o subrayados también adquieren una mayor relevancia.

    Un snippet es cada una de los resultados que aparecen al buscar algo en Google, cada snippet tiene tres campos, el enlace a la web a la que hace referencia, un resumen descriptivo del contenido de la web enlazada, y la url, seguida de los enlaces a la caché de Google y a Similares.

    martes, 22 de junio de 2010

    1.3.2 Destinatarios

    Analizar tu audiencia (la de tu sitio web) es una de las claves del éxito en la web

    • Los futuros destinatarios de una web deben ser tenidos en cuenta: planear objetivos, quienes serán los lectores, para que van a visitar tu web y hasta donde puede interesarles. De lo contrario el sitio web puede estar condenado al fracaso antes de empezar.

    • Estrategias para conocer a tu audiencia: (análisis de la competencia)

      1. Vigilar la competencia: que ofrecen, secciones, estructura de contenidos.
        Si tienen comentarios, ver cuales generan polémica, dudas que plantean usuarios, etc.
      2. Seguir los foros: foros que traten sobre la temática de tu web, asuntos más tratados, dudas que se exponen, aspectos negativos o positivos para la audiencia. Puedes montar una encuesta para preguntar opiniones.
      3. No olvidar el posicionamiento: fundamental estar en los primeros resultados para determinadas palabras clave (términos) que tengan que ver con tu mercado para segmentar tráfico.
      4. Encuestas (FeedBack): un buen recurso para sondear a que contenidos acceden los usuarios, cuales sobran o faltan,... una forma de conocer la audiencia de tu sitio.
      5. Estadísticas: páginas más visitadas, porcentaje de abandonos desde la página principal (% rebote), número de páginas visitadas, tiempo de permanencia en la web, etc... existen sistemas de herramientas gratuitas para controlar las estadísticas de nuestro sitio web, las más conocidas son Google Analitics y StatCounter
      6. Web sociales: una primera opción para analizar noticias que envía la gente sobre el tema de nuestro sitio (p.ej. usando el buscador de Facebook), otra opción sería incluir plugins para enviar a twitter, facebook, delicious...

    El concepto de "accesibilidad web"

    El concepto de "accesebilidad web"

    Hace referencia a la capacidad de acceso a la web y a sus contenidos por todos los usuarios independientemente de las limitaciones del individuo (discapacidades, idioma, conocimiento, experiencia, etc...), de las características de su equipo de navegación, o desde donde accede a la web (dispositivos móviles...)

    Pautas de Accesibilidad al Contenido en la Web (WCAG)

    Son para guiar en el diseño de páginas web hacía un diseño accesible, reduciendo la barreras a la información. WCAG son 14 pautas:

    1. Proporcione alternativas equivalentes para el contenido visual y auditivo: se refiere, por ejemplo, a incluir etiquetas con descripciones en las fotografías.

    2. No se base solo en el color: para que los contenidos sean accesibles desde dispositivos sin color.

    3. Utilice marcadores y hojas de estilo apropiadamente: marcar los documentos con elementos estructurados apropiados. Controle la presentación con hojas de estilo (CSS) en lugar de elementos y atributos de presentación.

    4. Identifique el idioma usado: usar marcadores que faciliten la pronunciación o la interpretación del texto.

    5. Cree tablas que se transformen correctamente: con los marcadores necesarios para transformarlas mediante navegadores accesibles.

    6. Asegurarse de que las páginas que incorporan nuevas tecnología se transforman correctamente: por dispositivos que no soportan estas nuevas tecnologías.

    7. Asegurar que el usuario tiene el control sobre los cambios de los contenidos tempo-dependientes: elementos que parpadean, que se desplazan o se actualizan antomáticamente.

    8. Asegurar la accesibilidad directa de las interfaces de usuario incrustadas: algunos elementos no son accesibles desde algunos dispositivos (para discapacitados o desde celulares).

    9. Diseñe para la independencia del dispositivo: usar características que permitan la activación de los elementos de la página a traves de diversos dispositivos de entrada (como monitores obsoletos con poca definición...).

    10. Utilizar soluciones provisionales: usar tecnologías en desarrollo que no estén estancadas o abandonadas.

    11. Utilice las tecnologías y las pautas W3C: de acuerdo con las especificaciones, y seguir pautas de accesibilidad.

    12. Proporcione información de contexto y orientación: para ayudar a los usuarios a entender el sitio y/o posibles elementos complejos.

    13. Proporcionar mecanismos claves de navegación: claridad, coherencia, usabilidad... para que el usuario encuentre lo que busca.

    14. Asegúrese de que los documentos sean claros y simples: para que puedan ser comprendidos fácilmente.

    Breve análisis de usabilidad

    Breve análisis de usabilidad

    1. ID del sitio: logotipo o marca del sitio.
    2. Nombre de la página: apartado o sección del sitio web en el que nos encontramos.
    3. Navegación por exploración: menús y/o submenús a apartados del sitio.
    4. Navegación por búsqueda: incluir buscador dentro del sitio web.
    5. En que parte del sitio estamos: y la jerarquía de donde estamos dentro del sitio.
    6. Etiquetas / descripción del sitio: o eslogan, beneficioso para usuarios y buscadores.
    7. Jerarquía visual limpia: siempre.

    Las 7 reglas del diseño Web

    Las 7 reglas del diseño web

    1. Que el diseñador pueda no quiere decir que deba. p.ej. el saber usar flash no quiere decir que se deba incluir siempre.
    2. Casi siempre hay una excepción. En referencia al punto anterior.
    3. Los usuarios son los jueces definitivos.
    4. La experiencia conjunta es algo a lo que un diseñador siempre debe aspirar.
    5. La humildad es el mejor enfoque. En casi todos lo ámbitos.
    6. Es imposible gustarle a todo el mundo. Al modificar parte del diseño, siempre hay a quien no le gusta.
    7. Intenta mantenerte en lo más alto de las especificaciones y pautas.

    lunes, 21 de junio de 2010

    Principios generales de usabilidad

    Principios generales de usabilidad:

    1. Anticipación: el sitio web debe anticiparse a las necesidades del usuario; para esto se suele emplear un "grupo de control" que suele estar formado por familiares y amigos.

    2. Autonomía: los usuarios deben tener el control sobre el sitio web, deben conocer su situación dentro de un entorno abarcable y no infinito.

      (Breadcrumb: hacer saber al usuario en que parte del sitio web se encuentra)

    3. Métodos de Navegación:

      • Exploración: dentro de un sitio web, navegando mediante barras de menú.

      • Búsquedas: empleando el buscador del propio sitio.

      Lo ideal es incluir los dos métodos de navegación dentro del sitio web. También se suele incorporar en el pié de página o al final del sitio web el apartado de
      UTILIDADES: suele incluir apartados como aviso legal, contacto, política de privacidad y protección de datos, ...

    4. Los colores han de utilizarse con precaución: un 15% de las personas tiene problemas para distinguirlos (daltonismo).

    5. Consistencia: las aplicaciones debes ser consistentes con las expectativas de los usuarios (con su aprendizaje previo). No se deben hacer cambios que modifiquen bruscamente la forma de interactuar de los usuarios con el sitio web.

    6. Eficiencia del usuario: optimizar formularios...

    7. Reversibilidad: que el usuario pueda deshacer el camino andado, como hace el botón de retroceder del navegador web, pero implementado en el sitio web.

    8. Ley de Fitts:
      • "El tiempo para alcanzar un objetivo con el ratón está en función de la distancia y el tamaño del objetivo".
      • "A menor distancia y mayor tamaño más facilidad para usar un mecanismo de interacción"

    9. Reducción del tiempo de latencia: optimizar el tiempo de espera del usuario, permitiendo realizar otras tareas mientras se completa la previa en informando del tiempo que queda.

    10. Aprendizaje: que el proceso sea rápido para el usuario y pueda estar usando el sitio desde el primer momento, de forma intuitiva.

    11. Uso adecuado de metáforas: facilita al aprendizaje del uso del web, el uso inadecuado lo dificulta (ejemplo de clase: "chanes salaos").

    12. La protección del trabajo de los usuarios es prioritario: que no se pierdan los datos que ha introducido el usuario a consecuencia de un error, por ejemplo, a la hora de rellenar un formulario, al enviar datos es importante que el usuario no necesite rellenar otra vez todo si ha fallado el envío.

    13. Legibilidad: contraste de color del texto con el fondo, tamaño de la fuente lo suficientemente grande, etc.

    14. Seguimiento de las acciones del usuario: conocimiento y almacenamiento de información sobre el comportamiento de los usuarios, para conseguir que el usuario pueda realizar las operaciones más frecuentes lo más rápido posible.

    15. Interfaz Visible: hay que evitar elementos "invisibles" de navegación que han de ser inferidos por los usuarios, como menús desplegables, indicaciones ocultas...

    1.3 Consideraciones Sobre Accesibilidad

    Accesibilidad y/o Usabilidad

    Facilidad de uso, ya sea de un sitio web, una aplicación informática o cualquier otro sistema que interactúa con el usuario, independientemente de las limitaciones del usuario o del dispositivo empleado para ello.

    viernes, 18 de junio de 2010

    1.2.4 Páginas Orientadas al Comercio Electrónico

    El comercio electrónico (e-commerce) consiste en la compra y venta de productos o servicios a través de medios electrónicos, como Internet y otras redes informáticas.
    Originalmente el término se plica a realización de transacciones mediante medios electrónicos como el intercambio electrónico de datos, sin embargo con el advenimiento de Internet a mediados de los 90 comenzó a referirse principalmente a la venta de bienes y servicios a través de Internet, usando como medio de pago medios electrónicos, tales como tarjetas de crédito, etc

    CMS's para tiendas en línea:

    • Oscommerce: es el CMS para tiendas en línea más usado, pero lleva años sin renovarse y está obsoleto en todos sus sentidos
      (http://oscommerce.com/).

    • Magento: es un CMS moderno, en expansión, está generando usuarios en la actualidad... "Oscommerce del futuro"
      Es free, la versión comercial vende licencia con soporte. Esta programado en Ajax para mejorar estética y usabilidad, escalable al máximo (mediante plugins o extensiones), buen sistema de plantillas optimizado para SEO (optimización para motores de búsqueda), etc.
      Es muy recomendado e ideal para grandes comercios, pero bastante complejo.
      (http://magentocommerce.com/)

    • Zencart: es una respuesta a la falta de actualizaciones de "oscommerce", se basaron en el para crearlo. Cuenta con poco soporte para la comunidad y se está quedando estancado.
      Puede ser una buena alternativa para tiendas no muy complejas.
      (http://www.zen-cart.com/)

    • Opencart: también basado en "oscommerce" limpiando lo sobrante y simplificando su configuración de uso, es de los más sencillo de usar.
      Una buena alternativa para pequeños comercios sin funciones avanzadas.
      (http://www.opencart.com/)

    • Digistore: basado en "oscommerce" y por una empresa privada. Principalmente han mejorado el panel de administración, interfaz de usuario, plantillas, editor visual de textos, ... "un buen trabajo". Lo malo es que tiene poca comunidad de usuarios.
      (http://www.digistore.co.nz/)

    • Prestashop: este parece que tiene futuro, pero necesita mejorar. Sencillo de instalar y configurar, al contrario que Magento, PrestaShop es más fácil, sencillo, rápido y liviano. Muy interesante para pequeños negocios
      (http://www.prestashop.com/)

    • Vituemart: Basado en Joomla, realmente es una extensión (o complemento) de Joomla; necesita de este para funcionar. Es de las mejores opciones, completo y no demasiado complejo.
      (http://virtuemart.net/)

    1.2.3 Páginas Informativas de Texto y Animación

    Incorporan elemento audiovisuales: animaciones, vídeos, etc. de forma estructural (sitios desarrollados en flash) o como parte de su contenido (vídeo por Internet).

    Flash: una aplicación en Adobe Flash (anteriormente Macromedia Flash) es una aplicación multimedia que se emplea para aportar animación, vídeo e interactividad a los sitios web, también se usa en anuncios y juegos web
    Trabaja sobre "fotogramas" y produce y entrega contenido interactivo, sin importar la plataforma. Un ejemplo de de Flash es el vídeo por Internet (vídeo on line).

    • Flash es el entorno
    • Flash Player es la aplicación de "máquina virtual" necesaria para ejecutar los archivos generados con flash

    jueves, 17 de junio de 2010

    1.2.2 Páginas Informativas de Texto

    Tienen contenido textual por encima de elementos audiovisuales como animaciones, audio o vídeo.

    • Diarios on line: periódicos en linea gratuitos (en un futuro pueden ser de pago), aunque actualmente incluyen muchos elementos no textuales (vídeos, publicidad...)
    • Wikipedia: enciclopedia libre y políglota, sus artículos son redactados por voluntarios del todo el mundo y casi todos los artículos pueden ser redactados por cualquier persona.

    miércoles, 16 de junio de 2010

    1.2.1 Páginas Web Personales

    Son las típicas de las personas que se inician en el diseño web, suelen incluir fotos, biografían, currículos...
    Solo necesitan un host que ofrezca un "constructor web" de "páginas estáticas, algunos incluyen después chats, galerías dinámicas... y se hace conveniente contratar una compañía de hospedaje con funciones adicionales (scripts, etc) en el "constructor web".

    Dominios: Es una red de identificación asociada a un grupo de dispositivos o equipos conectados a la red Internet.

    • Genéricos: .com (genérico), .org (organizaciones), .net (infraestructuras de red)...
    • Territoriales: .es (España), .ar (Argentina), .fr (Francia), .uk, .us...
    • Para identificar personas .name: casi no los usa nadie y en la práctica son igual que los genéricos o los territoriales. Su formato es:
      • nombre.apellido.name
      • apellido1.apellido2.name
      También para direcciones de correo electrónico:
      • nombre@apellido.name
      • nombre@apellido1.apellido2.name
      Se pueden registrar en cualquier registrador de dominios (p.ej. namelia.net)

    Blogs o Bitácoras

    Son sitios que se actualizan periódicamente por uno o varios usuarios apareciendo en primer lugar la última entrada publicada, el término "bitácora" viene de los cuadernos de viaje que se usan en los barcos desde siempre.

    Currículos web

    Presentación de habilidades, capacidades y logros. Aprovecha las capacidades del medio digital y sus características, como soporte multimedia (presentaciones en vídeo), actualidad, ausencia de fronteras (pues está en Internet).

    martes, 15 de junio de 2010

    1.2 (Webmastering)

    Webmastering se puede definir como la "creación de páginas web", y es una labor de la que se encarga una o varías personas. El webmaster es quién (o quienes) está a cargo de un sitio web, de su diseño y la indexación. A modo general sus tareas son:

    • Creación: convertir una idea en un sitio web en linea indizado (o indexado) y visitado.
      • Diseño: formalizar la idea.
      • Realización: del sitio web.
      • Alojamiento: ubicación en línea (on line) de forma permanente
    • Funcionamiento: administración, desarrollo y actualización constante del sitio "día a día".
      • Seguimiento y posicionamiento del sitio y sus competidores.
      • Promoción e indización del sitio para incrementar el tráfico.
      • Mantenimiento y actualización... de contenido y de condiciones de funcionamiento.

    Etapas Webmastering:

    En estas etapas es mejor planificar antes que empezar a diseñar el sitio sin saber donde vamos. Las etapas de "indexación y promoción" y "mantenimiento y actualización" no acaban nunca.


    imagen "robada" de es.kioskea.net

    Las siguientes etapas son de "desarrollo", a excepción de la última que es de "operación":

    • Estudios preliminares: estudio del "nicho de mercado", competencia...
    • Planificación:
    • Validación:
    • Diseño:
    • Plantillas prototípicas:
    • Ejecución:
    • Almacenamiento en línea: alojamiento en línea ("on line")
    • Indexación y actualización:
    • Mantenimiento y actualización: actualizaciones de contenido y de condiciones de funcionamiento.

    Diseño: formalizar la idea, objetivos, estructura, ergonomía y navegación... la mayoría de las decisiones corresponden a la lógica. Se necesita involucrar a los interesados (empleados, gerencia, clientes, etc...)

    Realización: crear sitios web es crear archivos HTML, se puede hacer de dos formas:

    • Escribir directamente el código HTML, mejora la comprensión de como va todo.
    • Usar un editor HTML (WYSIWYG), que es una herramienta que permite crear un sitio web visualmente colocando objetos (Dreamweaver)

    Alojamiento: (host) es donde se almacena "en línea" el sitio web para que puedan acceder a el:

    • Gratuito: se mantiene de publicidad o a través del tráfico en su propio sitio web.
    • Host profesional: garantizan calidad (ancho de banda) y seguridad (de datos y errores). Esencial para paginas web con mucho tráfico (más de 1.000 visitas al día) y ofrecen la posibilidad de comprar el propio dominio.

    Salir a la luz: es el momento en que el sitio web se pasa del ordenador donde se ha diseñado a estar en línea (on line), esto se hace normalmente con un programa cliente FTP (File Transfer Protocol / Protocolo de Transferencia de Archivos) (ej: FileZilla)

    • El "proveedor del host" debe proporcionar un "nombre de usuario" y "contraseña" para poder transferir los ficheros HTML al sitio en línea
    • El proveedor suele hacer Backup (copias de seguridad) del sitio por prevención ante cualquier problema, tanto nuestro como por la intrusión de un "cracker". El servicio de bakcup puede estar incluido o no en el precio del hosting.
      Es importante tener el CMS actualizado para evitar fallos de seguridad.

    1.2 Tipos de Sitios Web

    Genéricamente hay dos tipos de Sitios Web

    • Estáticos: hace referencia a páginas web "escaparate", información sobre una empresa, currículos, servicios y/o productos (sin opción a compra), etc... no permiten la interacción entre la página web y el usuario, dicho de otra, el contenido del sitio está predeterminado.
    • Dinámicos: el contenido del sitio web se genera en el momento que se solicita la información, mostrando una información u otra según la solicitud del usuario. En este tipo de sitios entran los foros (PHP, MySQL, ...), blogs, ...

    Una vez definidos los dos tipos genéricos de sitios web continuamos con los siguientes:

    • Escaparates: Promocionan imagen comercial de una empresa con ejemplos de productos y/o servicios.
    • Catálogo: Muestra todo o muchos productos pero sin opción a compra/venta, el objetivo es presentar lo que vende la empresa.
    • Informativos: Suministran algún tipo de información específica.
    • Comerciales: Sitios que venden a usuarios de Internet de forma directa, algunos permiten pagar en línea.
    • Institucional: Presenta una organización y sus valores, describen actividades y/o tipo de información (clubes de fútbol, asociaciones, museos, ayuntamientos...).
    • Personales: Dedicados a actividades, deportes o temas favoritos de una persona.
    • Comunitario: Reúnen a usuarios con intereses en común, como es el caso de las redes sociales y sitios similares.
    • Intranet: Sitios accesibles dentro de una empresa y oficina para intercambio de información profesional.

    lunes, 14 de junio de 2010

    1.1 Introducción Al Diseño Web

    INTERNET se "originó" en los años 50 (1958) durante la "guerra fría", en 1960 se creó ARPANET por el Departamento de Defensa de los Estados Unidos, un proyecto experimental de ordenadores con la finalidad de que, ante un ataque nuclear, la información estuviese disponible mediante el uso de una red descentralizada con múltiples caminos entre dos puntos y además, so la particularidad de que la división de mensajes completos en fragmentos que seguirían caminos distintos dotarían a a red de la capacitadad para responder ante sus propios fallos.

    • A.R.P.A.: Agencia de Proyectos de Investicación Avanzada. En la Wikipedia aparece D.A.R.P.A. (Defense Advanced Research Projects Agency): Agencia de Investigación de Proyectos Avanzados de Defensa. También ARPA y DARPA en la ficción.

    A pesar de diseñarse con finalidades militares y defensivas, se empezó a usar con intereses científicos conectándose con universidades, así se fue desarrollando la gran red mundial que es ahora Internet.

    Desarrollo de Internet en España (1996):

    Empezó con el funcionamiento de INFOVÍA, un servicio de compañía telefónica que conectaba ordenadores desde cualquier punto de España a precio de llamada local.

    Sitio Web: consiste en un conjunto de archivos HTML conectados por hipervínculos o enlaces alojados en un servidor que está conectado a Internet permanentemente

    Estrategia Cliente/Servidor

    Internet Funciona con la estrategia Cliente / Servidor:

    • Servidores: ordenadores que ofrecen información (o servicios) por solicitud.
    • Clientes: ordenadores que solicitan la información (o servicios).

    Protocolo TCP/IP

    • Protocolo TCP/IP(I): Transfer Control Protocol / Internet Protocol: Toda la información de Internet se transmite por medio de este protocolo:
      • TCP: Protocolo de Control de Transmisión.
      • IP: Protocolo de Internet.
    • Protocolo TCP/IP(II): es un conjunto de protocolos que proporcionan las reglas para comunicarse en Internet. Divide los paquetes (socket's) y añade a cada uno de estos los caracteres de control de errores. Los protocolos TCP/IP se adoptaron en ARPANET en 1970:
      • IP: se encarga de la transmisión de datos.
      • TCP: se asegura de que todo funcione correctamente.

    Sitio web (Sitio de Internet)

    Es un conjunto de archivos HTML conectados por hiperenlaces (también llamados enlaces o hiperenlaces), alojados en un servidor conectado a Internet permanentemente.

    ¿Por que tener un sitio web?

    • Necesidad de "notoriedad" de una empresa u organización.
    • Mejorar reconocimiento, mediante publicidad o popularidad.
    • Recopilación de datos: fotos, vídeos, proyectos, clientes, productos...
    • Ventas en linea, tras superar la falta de confianza, es más cómodo para muchos clientes.
    • Servicio de apoyo al usuario.

    MÓDULO 1 (indice). La Estructura Del Interfaz y Los Elementos De Diseño Web y Multimedia

    Primer día de curso

    En este primer día nos proporcionado parte del material destinado al curso, una carpeta bien chula que incluía en su interior un blog de anillas (no de Blogger) con una libreta para anotaciones, un bolígrafo, etc...

    Nos han dado una pequeña charla sobre normas y deberes en el centro durante el curso, en que va a consistir este, etc. Después comenzado presentándose nuestro profesor,Alexis (buena gente), que nos encomienda entrevistarnos en privado por parejas, para después presentarse cada uno, a modo "terapia de grupo", a toda la clase, pero hablando como si fuese "uno", la persona con la que ha entrevistado antes de forma privada en pareja (nombre, edad, aficiones, etc)... no se si queda muy claro, pero ahí queda.

    Después, si no mal recuerdo, vamos entrando en materia, así que pongo ya el temario de lo que es será el curso, constará de unas 274 horas repartidas en tres módulos:

    Prueba evaluación teórica: 20 de Octubre de 2010

    domingo, 13 de junio de 2010

    Presentacion

    Esta es la primera entrada del blog para el curso de "Diseño Web y Multimedia" que estoy recibiendo en el centro del COEPA de Torrevieja. Como práctica nos han encomendado hacer un blog con Blogger, que en mi caso no va a ser el primero, así que en este pretendo plasmar, si el tiempo me lo permite, todo de lo que vayamos aprendiendo a lo largo del curso, a modo consulta o recordatorio.

    El proceso de creación de un blog en Blogger es bastante sencillo, solo se necesita tener una cuenta de correo electrónico, que prefiero que sea de gmail, pero no es necesario. Se accede al sitio web de Blogger, se hace clic donde pone "CREAR UN BLOG" y se siguen las instrucciones... elección de nombre del blog, plantilla de diseño (hay muchas disponibles), etc... ante cualquier problema es fácil encontrar información de como hacerlo buscando en google.

    Como también nos han nos han pedido que en la primera entrada pongamos algo sobre cada uno, voy a ello...
    Tengo 35 años y me gusta la "música bien hecha" o "con buen gusto" (no toda), la tecnología y lo relacionado con lo creativo. He trabajado como músico tocando el bajo eléctrico y en la actualidad sigo con algunos grupos musicales de pop-rock, también participo de masera espontanea en otros proyectos de diversos estilos musicales (rumba, corridos, bossa, jazz, etc).
    En cuanto a la tecnología, de pequeño gustaba desmontar juguetes electrónicos y experimentar con sus piezas, tengo estudios de FP de segundo grado en Electrónica Industrial y grado superior (FPIII) en Administración de Sistemas, también he he trabajado unos 5 años en venta, reparación y montaje de ordenadores.
    Otra cosa que me gustado mucho, y que tengo aparcado desde hace tiempo, es la fotografía, a los 15 años me revelaba mis fotos en blanco y negro, que es algo que no haría hoy día con las cámaras actuales, pero la fotografía me gustaría retomarla cuando tenga ocasión.

    Con este curso de "Diseño Web y Multimedia" pretendo ampliar conocimientos personales y profesionales, pues esto del diseño web es algo a lo que le tengo ganas desde hace algún tiempo...

    Un saludo

    Realmente esta entrada se edito el día 17 de junio (2010), pero en un principio quiero que las fechas de las entradas del blog estén ajustadas con lo que se va viendo a lo largo del blog.