domingo, 18 de marzo de 2012

FLASH VS. HTML


¿Qué es HTML?
Es el Lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
¿Qué es Flash?
Adobe Flash Professional es el nombre o marca comercial oficial que recibe uno de los programas más populares de la casa Adobe, junto con sus programas hermanos Adobe Illustrator y Adobe Photoshop y que se trata de una aplicación de creación y manipulación de gráficos vectoriales con posibilidades de manejo de código mediante el lenguaje ActionScript en forma de estudio de animación que trabaja sobre "fotogramas" y está destinado a la producción y entrega de contenido interactivo para las diferentes audiencias alrededor del mundo sin importar la plataforma.
¿QUE DIFERENCIA HAY ENTRE FLASH Y HTML?
El Html significa Hyper Text Markup Language, o sea que está construido como tipo de lenguaje en grado de operar para la Hipertextualidad, que es la característica principal de Internet : saltar de una página a otra.
El Flash, en vez, es un Editor o Authoring, un programa que a su vez se basa en un Script de programación, que utiliza otro tipo de lenguaje.
Ventajas: que la pagina web diseñada queda muy presentable y con muchos efectos alucinantes. Un ejemplo es esta página web de pozos de agua, http:www.sondeosdelcantabrico.com, empresa que se dedica a construir perforaciones. Podeis ver en la página como a lo largo del tiempo van sucediendo cosas, y como el usuario interactúa dentro de la página web sin que ésta vaya a otros enlaces, es decir, que es siempre la misma página web. Bueno pues eso es un poquito flash.
Las desventajas de programar mediante películas es que los robots no pueden leer el contenido de las películas. por lo que es dificil posicionar una página web en los buscadores.


Entre otras características que diferencian el Flash con el HTML, están:
·      Una página construida en Flash, por ser Multimedia, se convierte de una Página Web a un Sitio Web. O bien permite de superar el formato o corte de periódico que tenían las páginas Web y finalmente acercarlas al mundo de Internet, a la capacidad de la televisión con sonidos imágenes en movimiento efectos especiales, etc.
·      Con HTML, no es que no sea posible insertar este tipo de cosas, como sonidos o imágenes, pero deben apoyarse en otros programas, por ejemplo: para visualizar una película se debe bajar o cargar (download) en la computadora y después verlo sucesivamente con un video player.
·      La música también se puede insertar, pero el Html tiene sus limites, sobretodo en la espectacularidad del sitio, por esto inventaron otro lenguaje, que se llama Dhlm dónde la d caracteriza el Dinamismo y Movimiento con el que logra crear algunos efectos.
      MI OPINIÓN:
     A pesar de que también existen editores de Html, que pueden desarrollar un sitio sin conocer el programa, y lo logran de una forma dinámica, no consiguen alcanzar la multimedialidad que Flash proporciona.
      Fuentes: 
     



sábado, 3 de marzo de 2012

Propuestas de LayOuts

La página escogida para presentar los LayOuts según 3 objetivos específicos es la de la campaña educativa "Pilas con las Pilas" - www.pilasconlaspilas.com

Los objetivos son:

1. Reflexivo: Mostrar al usuario un contraste entre la contaminación provocada por las pilas mal desechadas y los beneficios que podemos ver si logramos una correcta disposición final de estos elementos, con el fin de hacerlo reflexionar sobre su forma de desecharlas.

Propuesta:

2. Eventual: Incentivar al usuario a participar del récord proponiéndole planes, premios e itinerarios entretenidos que llamen su atención.

Propuesta:


3. Corporativo: Describir el proyecto fácil y digerible par el usuario presentando todas las entidades que ayudan con este propósito y su interés por esta causa ambiental.

Propuesta:

Abstracción LayOuts

LayOuts evidenciados mediante esquemas destacando:
- Retícula
- Jerarquía
- Identidad Corporativa
- Elementos de Navegación

RCN - www.canalrcnmsn.com

http://dl.dropbox.com/u/52349283/RCNLayout.pdf

McDonalds - www.mcdonalds.com

http://dl.dropbox.com/u/52349283/McDonaldsLayout.pdf

Nikon - www.nikon.com

http://dl.dropbox.com/u/52349283/NikonLayout.pdf



miércoles, 29 de febrero de 2012

Conceptos de LayOut

¿Qué es layout?
Cuadrícula imaginaria que divide en espacios o campos la página que se diseña para facilitar la distribución de elementos como textos ó gráficos en la misma. Es una como una estructura beta de la forma de organización de la información

¿Qué elementos se tienen en cuenta al diseñar un layout?
Los elementos que componen una página web son los: textos, imágenes, tablas, gráficos, etc. También son elementos del layout los colores y el tipo de letra.
¿Qué herramientas de la web existen para realizar layout?
Se debe tener en cuenta que el término layout es aplicado en muchos campos como la arquitectura, el desarrollo de páginas web y el desarrollo de proyectos y programas. En lo que páginas web respecta existen muchas herramientas que me permiten esta práctica, una de ellas muy utilizada (no es de la web pero se puede adquirir por medio de esta) es Adobe Illustrator gracias a las herramientas esquemáticas que ofrece. Además, existen sitios web tipo blog que me permiten modificaciones variadas en distintos aspectos estructurales y visuales., por ejemplo: http://www.mywickedspace.com/generators/myspace-layout-generator.php

¿Qué importancia tiene el layout en la arquitectura de información?
Es importante el desarrollo de un layout antes de iniciar a concretar la página web ya que esta me permitirá organizar la información del sitio, es como un boceto de la estructura que manejará según los objetivos que se requieren. A la hora de realizar los diseños hay que tener en cuenta que un layout claro permitirá una navegación mucho más fácil.

Ejemplos gráficos de layout: (esquemáticos)
Existen estructuras de layout de navegación líquida que se adaptan al ancho de la pantalla para rellenarla, no es muy recomendable, por ejemplo:

También encontramos páginas con un ancho fijo para evitar generar espacios en blanco indeseables, donde si la pantalla es muy ancha los laterales se rellenan con algo pensado preoviamente con el sitio, por ejemplo:

finalmente se puede mostrar un ejemplo de las variaciones en número de columnas y filas:

fuentes:

martes, 28 de febrero de 2012

Análisis XBOX

Sistema de Etiquetado:
El sistema con el que cuenta, puede ser planificado o no, dependiendo del punto de vista desde el que se le vea, ya que para alguna persona que tal vez no conozca el mundo de los video juegos, o el mundo Xbox, las diferentes etiquetas no le van a informar mucho sobre su contenido, sin embargo, para personas conocedoras de este campo, las etiquetas son más que claras sobre su contenido.
Las etiquetas se presentan mediante texto, y rodean en su gran mayoría, un contexto virtual mediante el campo de los video juegos.




Enlaces:


Los enlaces son comunes en su campo de navegación, ya que se encuentran frecuentemente en todas sus diferentes ventanas de texto, estos principalmente nos redirigen a sitios propios de la misma página, o en ocasiones sitios de información de Microsoft.





Indexación:


xbox.com, merece ser reconocida por su gran orden en cuanto a al sistema de búsqueda se refiere, cuenta con un orden bastante acertado tanto en el motor, como en su misma diagramación.




Diseño del Sistema de Navegación:


El sistema de navegación prospectiva, nos permite conocer de forma sencilla que se aproxima, a hacia donde nos dirijen ciertos vínculos mostrados como enlaces dentro de textos o icónicos. La página nos permite navegar hacia adelante o hacia atras para devolvernos o adelantarnos a contenidos previamente ya vistos, por lo que se llama HTML. Sin embargo, no muestra enlaces ya visitados mediante algun tipo de demarcación.


Contexto:


El contexto gráfico es 100% notorio, ya que mediante algunos iconos, colores y/o formas muestra la gran marca XBOX, de tal manera que nos basta con entrar al sitio para saber la organización con la que se trata, el nombre de la marca refuerza esta identidad al estar siempre visible y al presentarse siempre como botón de inicio o Home.
Un aspecto en el cual se presenta una falencia, es al no presentar la ruta jerarquica, para que el usuario se entere en que parte del sitio está.


Flexibilidad:


La página al referirse y centrarse en el tema de los video juegos, es decir con un público de diferentes tipos y edades, debe ser y es una página muy amigable, ya que presenta botones principales en todo momento y nos permite ingresar a cualquiera de sus sitios desde el lugar en que nos encontremos.


Tipos de Navegación:


Navegación Global: El sitio cuenta con una nevagación global bastante vistosa y llamativa, la cual siempre está visible y nos permite llegar a los lugares principales de la página con gran facilidad y repidez.



Navegación Local: La navegación local aquí se usa para ingresar a sitios más especificos sobre cada categoría de la navegación global.




Navegación Jerarquica: La navegación jerarquica nos permite saber siempre dentro de que parte del sitio nos encontramos es decir, siempre reconoce cual es su padre y su hija como en el siguiente ejemplo, donde a pesar de estar dentro de un submenu de Xbox 360 + Kinect, nos marca que esa es la padre y que estamos dentro de ella.




Navegación AD-HOC: Este tipo de navegación en este sitio, nos ayuda a introducirnos siempre más sobre cierto tema, de tal manera que lleguemos a nuestro objetivo, o siquiera nos hacerquemos demasiado a él.


 Categorías:


Xbox.com presenta diferentes formas de interacción, ya sea mediante barras de navegación, o menús desplegables.


 Tipo de Búsqueda:


La excelente búsqueda con la que cuenta el sitio, ayuda mucho en su flexibilidad, cuenta con diferentes tipos de organización, ya sea por temática, cronológica o alfabética, podemos organizar nuestra búsqueda de la forma en que la necesitemos. Y nos retorna una retroalimentación muy completa de cada sitio en el que buscó y no encontró información de la que requerimos.




Análisis Casa Oben

SISTEMA DE ETIQUETADO
El sitio de Casa Oben maneja un sistema de etiquetado planificado, utiliza términos de acuerdo a su contexto de mercado.
Usa un tipo de etiquetado textual, y evita los íconos, ya que sus etiquetas son palabras referentes a lo que contiene cada etiqueta




ENLACES
Los enlaces dentro de cada una de las etiquetas en el cuerpo del texto, cuenta con hipertextos para la localizzación en las diferentes ciudades del país.


INDEXACIÓN
El sitio cuenta un sistema de búsqueda eficiente siempre y cuando se conozca el tipo productos que se necesitan (salas, comedores, alcobas y niños). Sin embargo no tiene un motor de búsqueda para las palabras clave. La exposición de los productos a través de fotografías tipo catálogo funciona bien con la diagramación escogida.

DISEÑO DE SISTEMA DE NAVEGACIÓN
La página permite avanzar y retroceder dentro de ella pero sólo a través de las herramientas del navegador.
Cuenta con un sistema de navegación prospectiva (sabemos a dónde nos llevan los links gracias a que las etiquetas textuales lo advierten).
No muestra enlaces ya visitados.
CONTEXTO
- El logo corporativo está siempre visible en la página como botón de inicio.
- La identidad gráfica funciona perfectamente
- La jerarquía no está muy clara ya que todo parece al mismo nivel de relevancia. Pero esto no es un factor negativo ya que los servicios prestados permiten este tipo de jerarquía
FLEXIBILIDAD
Hay problemas de navegación ya que para ir a un tipo de producto diferentes se debe recorrer el sitio desde el principio
TIPOS DE NAVEGACIÓN
La página maneja todos los tipos de navegación: Global, Local y AD-HOC

global


local


AD-HOC


FUENTE: http://www.casaoben.com/



Análisis PUJ

SISTEMA DE ETIQUETADO
Este sitio, cuenta con un sistema de etiquetado planificado, utiliza términos de acuerdo al contexto de la educación.
Maneja un tipo de etiquetado textual, ya que sus diferentes etiquetas son presentadas mediante textos.
ENLACES

Aunque cuenta siempre con un botón que lleva a la página inicial, se debe seguir la jerarquía nuevamente para llegar a cierto lugar deseado.


TIPOS DE NAVEGACIÓN
La página maneja todos los tipos de navegación: Global, Local, Jerárquica e inclusive Ad Hoc.


global


Jerárquico


Local


AD-HOC


CATEGORÍAS
En las categorías encontramos las brras de navegación y los menús desplegables a lo largo de todo el sitio.










MARCOS
No presenta marcos dentro del sitio.


TIPOS DE BÚSQUEDA
La poca posibilidad de búsqueda que se maneja no es nada amigable.
Es clasificada alfabéticamente.
No cuenta con ningún tipo de retroalimentación



SISTEMAS DE BÚSQUEDA
Se centra en un sistema de búsqueda según la temática, ya que muestra su directorio por facultades o departamentos





FLEXIBILIDAD

Los enlaces dentro de cada una de las etiquetas en el cuerpo de texto.




INDEXACIÓN

La página cuenta con un sistema de búsqueda bastante deficiente, ya que no permite buscar a través del sitio, solo buscar en el directorio, sin embargo, tampoco funciona. Además en ocasiones presentan diagramación defectuosa que genera una desorganización.



DISEÑO DE SISTEMA DE NAVEGACIÓN
La página permite avanzar y retroceder dentro de ella.
Cuenta con un sistema de navegación prospectiva (sabemos a dónde nos llevan los links).
No muestra enlaces ya visitados.

CONTEXTO
- El nombre de la universidad esta siempre visible en la página como botón de inicio.
- La identidad gráfica funciona, sin embargo hace falta recurrir más a esta (se podría jugar más con el logo y los colores corporativos).
- La jerarquía no esta muy clara ya que todo parece al mismo nivel de relevancia.
Análisis del sitio web de la Pontificia Universidad Javeriana desarrollado por Juan Sebastián Durán C. y Alejandro González S.