Visualizando twitter

Muy buena infografía, vista en http://www.rosauraochoa.com/, recomendado por http://www.blogpocket.com/

Anuncios

MAMP/servidor local

Cuando comenzamos a hacer proyectos web y se empieza a jugar con PHP, MySQL,  nos preguntamos –donde probar estos proyectos si no tenemos un servidor contratado?….. bueno es acá donde aparece esta aplicación … MAMP (“WAMP” en el caso de windows), un servidor local. De esta manera nos ahorramos el hosting momentáneamente.

Un servidor web, es un programa para transferir texto, un puente para el diálogo entre tus sitios y  el navegador (todos los navegadores entienden el texto de modo distinto, de ahí el problema….Internet explorer es el+ retardado y problemático de todos, como ya sabemos). Aparte de transferir hipertexto o HTML, transmite scripts o Java/Javascript.

MAMP= Mac +Apache+ Mysql+ Php. Es una aplicación (se puede descargar gratis). Instalado el programa, ya puedes trabajar las páginas con contenido dinámico  internamente (un theme para wordpress, por ej.).

Cuando abrimos la aplicación basta dejar los valores señalados por defecto… En el caso de mac, es bueno cambiar la opción de dirección de servidor apache (que traen los mac) por –www/mysq-.
Todo listo para empezar a armar y desarmar codigos, plugins y todas esas hierbas. Sigue leyendo MAMP/servidor local

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

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

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