Proyecto Videojuego para distintos soportes

Videojuego Letter War

Definiciones Usabilidad

Imágen vectorial

Se representan gracias a trazos geométricos, controlados por cálculos y fórmulas matemáticas   Se describen matemáticamente las líneas y curvas o VECTORES ,  que toman algunos puntos de la imágen como referencia para construir el resto.

Elementos de un vector son las curvas Béizer (rep.matemáticamente), ésta queda definida por los nodos o puntos de anclaje y por las manecillas de control que definen la  forma.

Ventajas:

• Capacidad de almacenar los dibujos en un archivo muy compacto, (sólo se requiere la info.para generar cada uno de los vectores.) Éstos pueden definir algunas propiedades de los objetos, como el grosor de la línea o, incluso, su color de relleno.
• No son dependientes de resolución, pues la imagen vectorial se define por una ecuación matemática .
• No importa el tamaño con que se dibuje; siempre aparecerá con igual nitidez.
• Los dibujos se pueden escalar sin perder información,,ya que el programa recalcula automáticamente la posición y longitud de cada uno de los vectores.
• El dibujo es siempre editable.
• Se puede reutilizar un dibujo o parte de éste .
• El tamaño de los ficheros puede ser muy compacto, dado que sólo se almacena una serie de fórmulas matemáticas.
• Permiten un manejo de fuentes Type 1 y TrueType que son también objetos vectoriales. A cada letra se le pueden asignar contornos editables y descomponer en varios objetos
• Se pueden incluir bitmaps en un dibujo vectorial,si es necesario, un vector puede exportarse a un formato ráster estándar, como GIF o JPG.
• Estas líneas o curvas béizer son muy manejables, ideal para trabajar en la creación de logotipos o dibujos.

Desventajas:

• Falta de eficacia para representar imágenes de tipo fotográfico.
• No son conducentes a ininterrumpida secuencias de color sutil tono y variaciones de sombra.
• Cuando el tamaño de algunas imágenes vectoriales se reducen también drásticamente, líneas finas pueden desaparecer.

Formatos vectoriales principales.

Los formatos de gráficos vectoriales se pueden dividir en 2 tipos: los soportados mediante el plug-in correspondiente y los basados en lenguajes de marcado (todos ellos con el consabido riesgo de la incompatibilidad).

1. Gráficos vectoriales “clásicos”:

necesitan del plug-in correspondiente para poder ser visualizados en un navegador web.
Cada programa de ilustración maneja su propio formato. Los ficheros de CorelDraw son .CDR, los de Xara, .XAR, los de windows Draw, .DRW… estos ficheros son incompatibles entre sí, y las distintas versiones también. Por suerte, los programas disponen de filtros de importación o de formatos puente entre aplicaciones. El más importante es el PostScript (lenguaje de definición de páginas y objetos en formato vectorial, que se creó para la impresión en dispositivos de alta resolución, estándar mundial ). Adobe Illustrator y Freehand crean ficheros en PostScript nativo, con una extensión .AI o .ART y .EPS.

Para gráficos vectoriales simples en Windows existen los metafiles (WMF y EMF). Finalmente, los dos formatos vectoriales con más futuro en el mundo del diseño para la Web son los de Shockwave Flash (.SWF) y el SVG (scalable vector graphic) Los ficheros de Flash pueden crearse con programas como Flash o Director y son más bien un formato multimedia completo: contienen  imagenes estáticas o animaciones más o menos complejas, interactividad. PICT fue desarrollado por Macintosh para guardas imagenes vectoriales.

También son gráficos vectoriales los elaborados con los programas de diseño asistido por ordenador (CAD, acrónimo de Computer Aided Design), en 2D y en 3D. Los formatos que almacenan información vector y de pixeles en un sólo archivo son: PICT (macintosh), WMF (windows), EPS (encapsulated postcript, empleado para impresión en papel) y PDF (formato portátil de adobe).

* Adobe Flash ® (formato SWF)
* Adobe Illustrator ® (formato AI)
* CorelDRAW ® (formato CDR)
* Drawing eXchange File, formato de intercambio de Autocad (formato DXF)
* FreeHand ® (formatos FH9, FH10, FH11,FH12, etc)
* Gimp
* HPGL: (HP Graphic Language), Un estándar de facto para los trazadores gráficos (Plotter).
* IGES
* InkScape
* Metaarchivo de Windows (WMF) (permite también la inclusión de mapas de bits)
* Paint Tool SAI
* Portable Document Format ® (PDF)
* PostScript ®

2. los basados en lenguajes de marcado (alternativa en la implantación de imágenes vectoriales):

El lenguaje de marcado utiliza texto (sin formato) para definir etiquetas y otros elementos. En HTML,  cada etiqueta escrita se traduce en un elemento legible a través de un navegador web. En las imágenes vectoriales, los elementos de esas imágenes se definen igualmente con texto, que después es interpretado por el navegador web, al igual que un archivo HTML es interpretado por un navegador.

Los estándares más “populares” son:

DrawML: estándar de imágenes vectoriales para web orientado a la creación de organigramas y gráficos esquemáticos.

DrawML: aplicación de XML (eXtensible Markup Language) y hace uso del lenguaje Java para definir los gráficos que después se presentan en la ventana del navegador.

Mediante DrawML podemos definir complejos organigramas gráficos con necesidad de pocas instrucciones.

PGML (Precision Graphics Markup Language : lenguaje de marcado de gráficos de precisión) es una aplicación de XML que permite la creación de gráficos complejos y de calidad, ya que permite la posibilidad de renderizado.

VML (Vector Markup Language : lenguaje de marcado vectorial) es un estándar desarrollado por la empresa Microsoft que intenta hacer sencillo el desarrollo de este tipo de gráficos, mediante atributos y etiquetas cortas y descriptivas.

VML es una aplicación de XML que utiliza CSS2 (Cascade Style Sheets, level 2 : hojas de estilo en cascada, nivel 2).

El estándar VML permite la creación de imágenes complejas y de precisión, animación, renderizado, transparencia, corrección gamma y cromaticidad.

Web Schematics, al igual que el estándar DrawML, está diseñado para el fácil diseño de organigramas y gráficos de esquemas. Para trabajar utiliza las funciones de HTML y CSS1, con lo que se pueden diseñar fácilmente figuras geométricas, como círculos, rectas, polígonos, etc.

SVG (Scalable Vector Graphics : gráficos vectoriales dimensionables) es un formato desarrollado por el W3C para la creación de gráficos vectoriales.Es una aplicación XML que soporta, entre otras, tecnología CSS2. Permite corrección gamma, cromaticidad y otros efectos.
Tiene una ventaja extra: el fichero se generará en forma de texto editable, de forma que podrá editarse incluso con el bloc de notas, alterando directamente las fórmulas matemáticas de los vectores.

La conversión de una imagen de vectores a una imagen de pixeles se llama render

http://www2.canalaudiovisual.com/ezine/books/jirflashmx/3flash12.htm#vectorial
http://observatorio.cnice.mec.es/modules.php?op=modload&name=News&file=article&sid=293
http://www.vitaminaweb.com/diseno_estilo/articulos/001/index6.php
http://www.hipertexto.info/documentos/imagen.htm
http://mabeleditorial.spaces.live.com/Blog/cns!AB3F847E0F92B0D2!627.entry

http://www.jaguar.edu.co/z_aprendizaje/tutoriales/imagenDigital/index.php

http://mayesticks.blogspot.com/2006/05/vectores.

http://www.tech-faq.com/lang/es/vector-images.shtml&usg=ALkJrhgpF-yuPE5vwvybo9DCGAPG9eTztA

Imagen digital en distintos dispositivos

Photoshop-teórico I

Todo diseñador tiene como primer buen amigo a mister Photoshop. Al principio todo es muy ” buena onda” pero con el tiempo hay que preguntarse que significa realmente “photoshopear” como suele (mal)decirse.

Si bien Photoshop es una gran herramienta para trabajar con imágenes de pre-prensa, en el caso de los medios digitales es demasiado grande. Nos sirve para modificar el comportamiento de la foto, se vale de una serie de filtros que ofrecen gran plasticidad pero poca técnica. No hay que olvidar que esos  filtros provienen de los utilizados en la fotografía análoga.
Antes de poner manos en los filtros, entendamos que se pueden lograr grandes dramatismos modificando niveles, brillo y curvas. ( próx. post)

Levels/niveles

Para modificar los niveles, hay que tener presente primero lo que significa el histograma, que es un gráfico de barras que muestra  tonalidad de sombras . Una fotografía de 8 bits en escala de grises, tiene sólo un canal y utiliza 256 tonalidades (grises).(negro= “0” y  blanco =“255”). Una imagen color (R G B) tendra 8 bytes, es decir 24 bits (8 bits rojo.- 8 bits  verde- 8 bits azul o 256 tonos de azul x 256 tonos de verde y 256 tonos de rojo…osea bastantes colores)

para más información de niveles

Brillo-contraste/Brightness-contrast

Permite ajustar la cantidad de sombras y luces , es importante activar la casilla de previsualizar y de más opciones.

Queda revisar el ajuste que permite la herramienta curves…..para la próxima.

Para ver más sobre fotografía:

http://www.digitalfotored.com/fotografia/index.htm

iPhone para flickr

dpi en pantalla

El medio digital  se basa en los DPI . Una imagen de 100 ×100 px en un monitor X medirá x centímetros, que no tiene  que ser igual que al tamaño con que se  mostrará en otro monitor. En una pantalla, una imágen se ve a un tamaño u otro dependiendo del número de píxeles que tenga. Los dpi sólo sirven para determinar el tamaño de las imágenes en un medio impreso. El problema es adaptarse a la resoluciones de uso, garantizando que el  contenido necesario esté disponible inmediatamente para la mayoría de los usuarios y cómo le prestamos soporte a los usuarios con tamaños menos frecuentes o en desuso.

Actualmente la resolución de pantalla más utilizada es 1024×768 px. Esto significa que los sitios deberían visualizarse adecuadamente en este tamaño, mostrando la información más importante en el espacio disponible para los navegadores. Ningún contenido importante debería quedar oculto bajo el primer pantallazo. El texto debería ser fácilmente legible y estar dispuesto en bloques que no creen líneas que dificulten la continuidad de la lectura.

Si yo le quito dpi la imágen cambia su tamaño pero no paramétricamente. Una imágen de 72 dpi, tiene ya una info determinada, entonces si yo le quiero poner más, le estoy inventado cosas,  y  resoluciones que no  son de su naturaleza…

Sitio para simular diferentes resoluciones de pantalla: http://www.cuervoblanco.com/simulador-resoluciones.html

El Usuario iPhone= joven + rico

• En USA los usuarios habituales son gente joven  , cerca de un 75%  son  consumidores previos de apple

• Muchos de los usuarios iPhone son jóvenes , 50% bajo los 30, y un 15% son estudiantes.

• El 50% de los usuarios reemplazaron el teléfono convencional mientras que el 40%  reemplazó su  telefono inteligente (como Blackberrys y Windows Mobile devices).

• El 70% de los usuarios revisa su buzón de mail.  El 75%,dice que ocupa más su mobile browsing que antes.

• El desafío es que se navegue mas en la web  ( 40%  responde que el iPhone tiene problemas de accesibilidad para la mayoría de los sitios visitados) debido a la carencia de cobertura  en plataformas como Flash.

Para el usuario iPhone las cuentas de telefono  aumentan un promedio de 24%. , lo cual parece no importarle mucho ya que el usuario tiene un ingreso económico mayor que el promedio…Este punto  es el eterno desafío de apple :que su tecnología llegue a más y no sólo a los “ maqueros elegidos”….ese día llegará?

Post original
http://www.readwriteweb.com/archives/todays_iphone_users_are_young_rich_and_technically_savvy.php

Transferencia de imágen teléfonos móviles.

vAl igual que la mayoria de los medios digitales, privilegiar la rapidez  es vital en los teléfonos móviles. Cobra importancia el valor del segundo ( la tarifa plana no es algo común entre los usuarios de celulares), el tipo de aparato, etc. La limitación del soporte celular es bastante, todo debe ser más preciso ya que nada sobra en el formato celular, la pantalla es chiquita, las conexiones lentas….

Cuadro comparativo de velocidad de transferencia

Estándar	Generación	Banda de frecuencia	Rendimiento
GSM	G2	Permite la transferencia de voz o datos digitales de bajo volumen.	9,6 kbps	9,6 kbps
GPRS	G2.5	Permite la transferencia de voz o datos digitales de volumen moderado.	21,4 a 171,2 kbps	48 kbps
EDGE	G2.75	Permite la transferencia simultánea de voz y datos digitales.	43,2 a 345,6 kbps	171 kbps
UMTS	G3	Permite la transferencia simultánea de voz y datos digitales a alta velocidad.	0,144 a 2 Mbps	384 kbps

vía kioskea

Si bien en el mundo crece con ritmo frenético el número de teléfonos móviles( en el l caso de Chile particularmente marcado) , la web móvil aún no es de uso masivo.

La mayoría de los dispositivos, incluyen tecnología WAP (Wireless Application Protocol) no soporta imágenes y estilos. Mientras que la tecnología WAP2 soporta imágenes , html y css.

Más información de la web móvil:

http://www.desarrolloweb.com/articulos/disenar-para-dispositivos-moviles.html

http://www.incubaweb.com/3233/navegadores/google-mobilizer-haz-tu-web-apta-para-moviles/

http://www.w3c.es/Divulgacion/Tarjetas/MWBP/#check_graphics_and_colors

http://www.eltallerdigital.com/informacion.jsp?idArticulo=17

http://www.maestrosdelweb.com/editorial/tu-sitio-web-en-dispositivos-moviles/

Formatos digitales (2): Imágen-video

Usualmente una película de video muestra 24 cuadros por segundo (varía según formato). Para  grabar estos formatos se necesita una cámara de vídeo y una tarjeta digitalizadora. Digitalizar un video es transformar las imágenes y audio a un formato binario.

Tipos de formato:

AVI y AVI 2.0 (Audio Video Interleave): se digitalizará en éste cuando la película pueda ser reproducida por cualquier PC sin importar la versión de MICROSOFT WINDOWS® .Almacena la información por capas, (una capa de video seguida por una de audio) .

MPEG (Moving Picture Experts Group) : standard para compresión de video y audio. Hay 4 tipos según la calidad : MPEG- MPEG-2, MPEG-3 y MPEG-4. Este es el origden del formato MP3. Se digitaliza en este formato cuando la película dura más de 45 min. Por su grado de compresión entre cuadros da buenos resultados en películas extensas y ricas en movimiento y color.

DivX: formatos de streaming (transmisión en directo a través de Internet). Funciona sobre los sistemas operativos Windows y MacOS actuales y que, combinado con la compresión MP3, tienen una calidad superior a la del VHS con un caudal menor a 1 Mbit/s. Antes se  llamaba así al codec de video,  pero actualmente se refiere a los products DivX, Inc.

Microsoft Windows Media Video : funciona con el Windows Media player (6.2 en adelante). Las extensiones de este tipo son las .asf y .wmv para el video y .wma para el audio.

Real Video: requiere de su propio player que es el Real Player y para hacer streaming requiere del Real Server. El  sistema de  codificación permite descargar las secuencias de película de acuerdo a la velocidad de nuestra conexión  ( no hay que descargar toda la secuencia de video  para verla).

Apple Quicktime: mac ofrece sus archivos .mov , que requieren de Quicktime player Tienen la extensión .qt y .mov y los programas para verlos están disponibles en una amplia gama de plataformas.