10.03.2008

tutoriales de OOP (POO)

Tutorial/es de programación orientada a objetos. POO (OOP).

Realizando una busqueda en Cristalab sobre programación orientada a objetos podeis encontrar decenas de tutoriales: Cristalab/tutoriales

Uno de los que más me gustaron en su día fue este de aqui:
http://www.cristalab.com/tutoriales/232/programacion-orientada-a-objetos-oop-con-javascript.html

patrones de diseño de fuentes por defecto

Los navegadores aceptan unas determinadas fuentes. Añadir otras a veces es un tema delicado.
Si lo que queremos es que la fuente de nuestro texto principal de la web adquiera un look interesante deberemos jugar con las propiedades CSS y con las fuentes que nuestros navegadores aceptan por defecto para asegurarnos que todo el mundo verá lo mismo (o practicamente lo mismo).

He encontrado un portal buenísimo en el que juegan con esto que os estoy contando. Entrar dentro y hechar un vistazo el diseño de fuentes. Y es que no nos damos cuenta, pero con muy poquitas fuentes podemos mostrar un look muy cool y atractivo.

link: http://www.typechart.com

El look de una fuente en una página web cambia por completo la esencia que puede transmitir en un portal, más aún cuando ese portal muestra a diario muchísima información y lo más destacado visualmente es el bloque de texto. Importantísimo valorar esta parte del diseño en nuestras interficies web. Muchas veces vereís interficies muy guapas y sin duda la parte del look de la fuente está muy trabajada. Nunca olvideis esto para vuestros diseños.

10.02.2008

Convertir caracteres UTF-8 con PHP

24/9/08 - En ocasiones los textos de la página web pueden contener caracteres raros en lugar de acentos u otras letras propias del idioma español, como la ñ o las letras con diéresis y de otros idiomas latinos. Esto suele ocurrir en casos en que la base de datos trabaje en un juego de caracteres distinto que la página, o que los datos estén mal cargados en la misma. Generalmente estos errores surgen por un tratamiento inadecuado del juego de caracteres UTF-8, que no están procesados como UTF-8, sino como si fueran ISO-8859-1. Con PHP podemos decodificar esos caracteres para que a la hora de mostrar los textos en la página aparezcan correctamente. Para ello existen una funciones que vamos a comentar en este artículo de DesarrolloWeb.com.

Cuando vemos incorrectamente un texto nos pueden aparecer textos como estos:

Solución útil y apañada a UTF-8

Este texto tiene caracteres codificados en UTF8, que debemos decodificar para que aparezcan correctamente los acentos y demás símbolos del alfabeto latino.

Decodificar una cadena UTF-8 con PHP

Existe una función de PHP que realiza el trabajo de conversión de los caracteres UTF8 a sus correspondientes códigos reales.

La función se llama utf8_decode() y lo que hace es convertir una cadena que realmente utiliza ISO-8859-1 pero que tiene caracteres codificados a con UTF-8. La conversión genera el string en ISO-8859-1 pero con un sólo byte para todos los caracteres, con lo que se verán correctamente.

Se utiliza así:

utf8_decode("Solución útil y apañada a UTF-8");

Devolverá una cadena el texto correctamente escrito:

Solución útil y apañada a UTF-8

Codificar una cadena al juego de caracteres UTF-8

Existe una función para hacer justo el paso contrario, que vamos a ver también en desarrollo web .com. Es decir, partiendo de una cadena en el juego de caracteres ISO-8859-1, obtener la correspondiente traducción a UTF-8.

Esto lo podemos necesitar, por ejemplo, si nuestra base de datos está definida con UTF-8 y tenemos entrada de datos ISO-8859-1.

El uso es bien simple:

echo utf8_encode("Mañanas de programación PHP");

Y devolverá el correspondiente string convertido a UTF-8, que si lo mostramos en una página que utiliza el juego de caracteres ISO-8859-1, se vería de esta manera:

Mañanas de programación PHP


Fuente: http://www.desarrolloweb.com/articulos/convertir-caracteres-utf-8-con-php.html

Tutorial rápido de SQL

Para los que más o menos tengan una idea de SQL, este es un pequeño tutorial interesante:
http://www.desarrolloweb.com/articulos/2355.php

10.01.2008

Tutoriales de expertos en photoshop

Si buscas expertos, si quieres aprender de ellos dentro del mundo del diseño, sin duda alguna desde que navego por la red uno de los mejores sitios que he encontrado es http://www.3dtotal.com/. Tutoriales de photoshop, de 3DS Max, etc.
No son los típicos y fáciles tutoriales que encuentras failmente, si no que son tutoriales avanzados.

Los grandes expertos muy pocas o casi ninguna vez revelan sus secretos . Porque no quieren o porque no tienen tiempo para andarse escribiendo "tutoriales". Hay gente que que descubre los secretos y los muestra a la sociedad, con ello puedes aprender muchísimo. Y lo primero de todo a valorar el trabajo de un disño y a entender las miles de formas que hay para llegar a ese resultado final. Que no te asuste el camino. Asume tus límites e intenta siempre mejorar.

Gran página la verdad. No hacen falta libros de photoshop ya.

Para que os hagais una idea os remito directamente a este tuorial del cual no tengo palabras:
http://www.3dtotal.com/team/Tutorials_3/making_of_fantasy_budapest/budapest_01.asp

Por cierto este tutorial me recuerda mucho al background de la web de una de las mejores empresas de desarrollo web del mundo: http://www.2advanced.com/

Lista de tutoriales sobre tecnologias web

Sigo con http://woork.blogspot.com y os enlazo a una lista de tutoriales sofre diferentes temas de tecnologias web:
http://woork.blogspot.com/2007/10/table-of-contents.html

7 trucos para crear tu diseño en blogger

No me cansaré de decirlo, este blog: http://woork.blogspot.com es obligatorio para un desarrollador web. Espectacular la de información que nos ofrece.
De ahi he encontrado este magnifico post para que aprendamos o aprofundicemos en el diseño de nuestro querido Blog blogspot.
http://woork.blogspot.com/2008/09/7-tips-to-design-professional-blog.html

9.30.2008

Qué es el Diseño de Interacción

Por Javier Velasco M.

Escrito Agosto 2004*, Publicado en mantruc.com Septiembre 2006

También disponible en Versión PDF (200 KB)

El diseño de interacción determina las posibilidades de operación de un sistema tecnológico: las posibilidades de acción de las personas que lo usarán, y las reacciones del sistema ante estas acciones.

Nociones básicas: Interacción e Interfaz

Comencemos por definir la interacción y la interfaz que nos mediatiza la interacción. La interacción es un diálogo de comportamiento entre dos entidades, el accionar de una condiciona la respuesta de la otra. De acuerdo al diccionario de la RAE:

interacción. 1.
f. Acción que se ejerce recíprocamente entre dos o más objetos, agentes, fuerzas, funciones, etc.
Real Academia Española ©

Todo sistema electrónico es interactivo, ya que modifica su comportamiento (funciones) de acuerdo a los comandos de un usuario.

La interacción entre un sistema y su usuario se canaliza a través de una interfaz o punto de encuentro. La interfaz hace tangibles las posibilidades del sistema y permite al usuario comunicar sus comandos al sistema.

interfaz. (Del ingl. interface, superficie de contacto).
1. f. Inform. Conexión física y funcional entre dos aparatos o sistemas independientes.
Real Academia Española ©

En los aparatos físicos, las interfaces se componen de perillas, botones, luces, pantallas, parlantes. En el software todo se debe canalizar a través de una interfaz doble: en primer lugar, está la interfaz del computador - dispositivos de entrada y salida, principalmente teclado, mouse, pantalla y parlantes - y en segundo, las interfaces del sistema operativo, generalmente compuesta de elementos como ventanas, directorios, menús, cursores.

El diseño de interacción y el diseño de la interfaz son mutuamente dependientes, muchas veces las decisiones de un plano condicionarán las decisiones en el otro plano.

Hasta el momento1 , los sistemas electrónicos y tecnológicos en general, no están dotados de inteligencia propia. Todo sistema será tan inteligente como su diseño permita.

Dado que todo lo que puede hacer una máquina estará condicionado por su diseño, la tarea de diseñar su comportamiento consiste en prever las posibles acciones y respuestas de un humano ante este sistema, y diseñar reacción del sistema ante los comandos del humano. Se asemeja a crear la coreografía para un baile.

Antiguamente, los computadores tenían capacidades muy limitadas, esto significaba que el baile debía hacerse al paso de la máquina y que el usuario debía ser un experto en el lenguaje de la máquina, para ser capaz de seguirle el paso y lograr que ésta se moviera según su voluntad.

Actualmente, tanto el hardware como el software han evolucionado para ofrecer mayor flexibilidad en el diseño de cada función. Los usuarios de computadores actualmente son personas comunes que no poseen estudios en informática. Este factor hace más necesario crear coreografías más antropomorfas, donde sea la máquina la que siga el paso del humano. Ésa es la meta del diseño de interacción: crear sistemas que satisfagan las necesidades de las personas que los usan, en una forma que resulte espontánea y satisfactoria.

Quién se ocupa del diseño de interacción

Como ya se ha explicado, todo aparato tecnológico implica un diseño de interacción para poder ser operado por un usuario. Sin embargo, no todas las empresas que diseñan y construyen aparatos ó sistemas tecnológicos adoptan el diseño de interacción como un proceso particular, ni el rol de diseñador de interacción como un papel específico dentro de su equipo de trabajo. Muchas veces el diseño de interacción se realiza como parte de otros procesos, a veces a cargo de ingenieros y personas de negocios, otras veces como parte del aspecto ergonómico de los proyectos.

El diseño de interacción como actividad particular toma fuerza durante los años 90 con el crecimiento del área de la Interacción Persona-Ordenador (IPO / HCI) como una rama de las ciencias de la computación. Este crecimiento da origen a una serie de metodologías bajo el enfoque de Diseño Centrado en el Usuario.

Bajo un proceso ideal, es el diseñador de interacción quien creará las especificaciones para la construcción del sistema. Esto implica determinar las funcionalidades que ofrecerá el sistema, los parámetros para cada una de éstas, las secuencias de comandos necesarias para ejecutarlas y los elementos de la interfaz que permitirán a las personas manejar estas funciones, así como sus nombres, ubicación, tamaño relativo; y todos los elementos que canalicen la comunicación entre sistema y usuario, gatillos y mensajes.

Un ejemplo tangible

Para llevar todos estos conceptos abstractos a un plano más tangible, revisemos un caso común, con aparatos que usamos a diario. A continuación se analiza el comportamiento de dos equipos de sonido, de constructores diferentes, en una misma operación.

Nuestro breve análisis se basará en operaciones comunes a ambos equipos, el encendido y la selección de modo, función o fuente. Ambos sistemas ofrecen las mismas posibilidades en este sentido, sus modos son los mismos:

  • Radio
  • CD
  • Cassette
  • Entrada Auxiliar

En ambos casos, las interfaces han sido descritas en Inglés.

Equipo N 1

En este primer caso, vemos que el encendido opera únicamente a través del botón de encendido (Power). Esto implica que cualquier operación inicial con el sistema deberá ser precedida del uso de este botón. Cabe destacar que el botón de encendido ha sido diferenciado de los demás por una textura particular (tres puntos en relieve).

El equipo se enciende entonces en su modo anterior, el último que fue usado antes de ser apagado. Existe un botón único (Function) que permite cambiar el sistema de un modo a otro en un ciclo. Esto implica presionar el botón Function tres veces para pasar del modo Disc al modo FM.

Un análisis más exhaustivo de la interfaz nos revela que su distribución simétrica obedece más a criterios estéticos que de operación. Pero en esta instancia, nos centraremos exclusivamente en los comandos antes mencionados.

Equipo N 2

Nuestro segundo equipo también cuenta con el tradicional botón de encendido y apagado al que nos hemos acostumbrado (Power), pero además combina las dos funciones en cuestión al permitir su encendido a través de cualquiera de los cuatro botones de modo (o función). Esto implica una mayor flexibilidad de decisión para los usuarios, permitiendo eliminar un paso en su tarea; un usuario puede encender el sistema directamente en modo CD con sólo presionar el botón CD una vez.

La presentación de los modos de operación en cuatro botones paralelos e independientes, también otorga una mayor libertad de acción al usuario ya que no obliga a recorrer un ciclo para pasar de un modo al otro, como en el caso anterior en el que todo esto se hacía mediante un solo botón.

Al revisar la interfaz general, también se puede destacar que las dos funcionalidades analizadas se ubican en una posición predominante del tablero y se agrupan de manera lógica.

Este breve análisis nos da cuenta de cómo el enfoque o criterio utilizado durante el proceso de diseño afectará la experiencia del usuario. Las funcionalidades revisadas dan cuenta de dos procesos de diseño diferentes que dieron distinto grado de importancia a las necesidades de los usuarios.

Habiendo sido dueño y usuario de ambos sistemas por más de dos años, puedo dar testimonio personal a favor del segundo equipo de sonido. Estas pequeñas diferencias, sumadas a un diseño general más amigable, hacían del uso de este segundo sistema una experiencia considerablemente mejor que la del otro diseño.

Los santiaguinos de ojo inquisitivo se habrán dado cuenta que ambas fotos fueron tomadas sintonizando a Radio Concierto ¿qué esperaban? ;)

Un ejemplo Web

Hace algunos años, una tienda chilena de comercio electrónico presentaba la siguiente interfaz de búsqueda:

La interacción de este sistema está obligando al usuario a seleccionar al menos dos de sus opciones para poder realizar la búsqueda.

No permite hacer una búsqueda que cubra todos los precios, todas las marcas y todos los departamentos en la tienda. ¿Por qué no? ¿Será malo para el negocio dejar a sus clientes buscar en su base completa de productos?

Este caso nos permite ver cómo la interacción afecta la experiencia de usuario. En este caso, interrumpiendo el flujo de búsqueda por una restricción arbitraria del sistema.

Esto implica que durante este proceso de diseño particular, decisiones de negocio y limitaciones técnicas primaron por sobre la experiencia de usuario.

Jugando al diseñador

Para seguir haciendo más tangible estos conceptos tan abstractos, te invito a hacer un ejercicio:

Estamos trabajando en el diseño de un reloj despertador. Nuestro reloj será un dispositivo simple, sin funcionalidades complementarias, todo lo que necesita efectuar un usuario con el aparato es:

  • Leer la hora.
  • Configurar la hora actual.
  • En caso de optar por un despliegue digital, se debe seleccionar el modo de despliegue: 24 horas, o ciclos de 12 horas AM y PM.
  • Configurar la hora del despertador.
  • Encender y apagar el despertador.
  • Apagar la alarma.

Entonces, tú como diseñador deberás determinar las secuencias de acciones que permiten operar estas diferentes acciones, la cantidad, forma y tamaño relativo de los botones, palancas, selectores o perillas que permitirán elegir dichas funciones. Deberás definir los íconos o textos que permitirán al usuario comprender la utilidad de cada uno de estos elementos, así como las señales del sistema que dan a entender su modo actual de operación.

Metodología de diseño de interacción

El diseño de interacción comienza durante las etapas estratégicas del diseño, con la definición de requerimientos y funcionalidades, elementos claves que dan forma a la estrategia del sistema. Al hablar de diseño estratégico nos referimos a decisiones de negocios que permiten elegir una estrategia a tomar con un producto: estrategias de diferenciación de la competencia, audiencia primaria a enfocar el producto. El diseño de un producto tecnológico es un proceso complejo con múltiples dimensiones, estas decisiones estratégicas dan forma al producto, aunque muchas veces se las considere fuera del proceso de diseño.

Para crear un diseño amigable es fundamental entender a las personas que usarán el sistema, por esto parte importante de este trabajo consiste en entrevistar personas que representen al tipo de usuario final del sistema. Empaparse del modo de pensar, las necesidades y el lenguaje de los usuarios permitirá al diseñador estar en mejor pie para anticipar sus expectativas y reacciones, generando una interacción natural para ellos.

Alan Cooper, uno de los principales impulsores del método de diseño mediante personas y escenarios, explica que los ingenieros corresponden a un tipo distinto de humano – homo lógicus – que tiene una fuerte inclinación a la racionalidad. Esta racionalidad los inclina a aceptar todas las situaciones posibles al momento de diseñar un sistema, mientras que un diseñador dedicado – homo sapiens – que ha estudiado a sus usuarios, podrá enfocar el diseño en lo más probable. Este enfoque lleva a desarrollar una menor cantidad de funcionalidades, lo que implica que cada una de éstas podrá ser diseñada con mayor cuidado.

La principal ventaja del método de diseño con personas es que ayuda al equipo a enfocar sus energías en las necesidades de los personajes que se han definido. Al no definir claramente para quién estamos diseñando, cualquier característica y capricho que se pueda imaginar de los usuarios es creíble.

Existe una variedad de enfoques y métodos para guiar este proceso, algunos más formales, otros más flexibles. Algunos de estos modelos presentan un enfoque basado en la ingeniería, otros son más antropológicos.

Interacción en Web

En el caso de la Web (HTML), la interfaz se limita al trabajo con una plataforma restringida a páginas y con un número restringido de opciones para el input humano en la interacción:

  • Links
  • Formularios
    • Líneas o cajas de texto
    • Botones
    • Menús pull-down
    • Radio buttons
    • Checkboxes

Una interfaz restringida a páginas significa que cada paso que da el sistema en la interacción requiere del cambio de la página completa. Esta restricción ha permitido a los diseñadores plasmar la actividad de sus sistemas en diagramas de página o Wireframes.

Aplicaciones Ricas de Internet

Las limitaciones interactivas del lenguaje propio de la Web han representado tanto una ventaja como una desventaja para quienes diseñan interacción para este medio. La ventaja es que utilizan un lenguaje estandarizado que permite a los usuarios entender inmediatamente las posibilidades interactivas de cada elemento. La desventaja para los diseñadores es que pone límites muy restringidos a las posibilidades de interacción del sistema y encasilla su creatividad.

Los diseñadores han intentado desde los comienzos de la Web romper con las limitaciones del HTML y crear interfaces más flexibles. Sin embargo, estas interfaces de flexibilidad interactiva mayor no han podido ser estandarizadas en un 100%, y parte importante de éstas implican alguna tecnología propietaria ó plugins (javascript, flash, java, Ajax). Estas aplicaciones ricas permiten implementar funcionalidades web con una interacción más flexible, similar a las aplicaciones desktop. Bajo estos sistemas, la metáfora de la página se diluye, y los Wireframes se hacen insuficientes para documentar los diseños.

Para profundizar en el tema, pueden revisar:

1 - Ray Kurzweil, quien lleva más de 30 años estudiando sistemas de Inteligencia Artificial, afirma que los computadores alcanzarán y superarán de manera inevitable la inteligencia humana por el año 2030. Entonces podrán comenzar a diseñar nuevos sistemas más inteligentes que ellos mismos. Kurzweil plantea esto en su libro The Age of Spiritual Machines, la base teórica se puede encontrar en Internet en su “Law of Accelerating Returns”. (Volver al texto)

Nota de la Edición: Este artículo fue escrito originalmente el año 2004 para el sitio web de AIChile.org. Dado que nunca fue publicado en dicho sitio, ahora lo rescatamos de los archivos para publicarlo en mantruc.com



Fuente: http://mantruc.com/publicaciones/diseno-interaccion.html

De PSD a HTML/CSS - Maquetación

Nettuts en mi opinión es uno de los mejores portales sobre tutoriales de desarrollo web. Excelente todo lo que postean.
Muy interesante este:
http://nettuts.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

Mega post de Vectores, Brushes, Patterns, Photoshop

Creo que debe descargarse este espectacular post.

http://www.taringa.net/posts/downloads/1153152/Mega-post-de-Vectores,-Brushes,-Patterns,-Photoshop-II.html

LavaLamp for jQuery lovers!

Creo que no hay que perder este enlace. Fantastico tutorial sobre LavaLamp una extensión para jQuery. Realización de un menú dinámico:

http://www.gmarwaha.com/blog/2007/08/

Video seminario sobre PHP

Esta vez espectacular los videos sobre PHP de Luis Almeida. Me encanta los consejos que da y de la forma que lo dice.
Desde aqui podeis acceder a estos videos:
http://www.dominaphp.com/seminario.php

Merece la pena subirlos a otro sitio, cosa que haré en breve para que no se pierda esta reliquia y como más fuentes haya mejor.

Mejores libros sobre desarrollo web

Aqui tienes una selección de los mejores libros sobre desarrollo web que la comunidad NetTuts ha elegido:
http://nettuts.com/web-roundups/the-best-web-development-books-as-voted-by-you/

Metodología para el desarrollo de aplicaciones orientadas a objetos - Franco Díaz



La programación orientada a objetos requiere un profundo conocimiento y unas bases sólidas. Sí, puedes programar con orientación a objetos sin tener esos undamentos bien consolidados, pero tu curva de aprendizaje será mucho más lenta y no entenderás porque se hacen ciertas cosas.
Recomiendo la lectra de este libro:

Metodología para el desarrollo de aplicaciones orientadas a objetos - Franco Díaz

Te lo puedes descargar aqui:
http://rapidshare.com/files/114461334/poo.rar

9.29.2008

Tecnicas para crear wallpapers espectaculares

Para los amantes de photoshop. La red está plagada de cosas y nadie va a venir a la mesita de tu ordenador a decirte hay esto y ta otro en internet que te puede interesar. Aunque ya vendrá eso...
He encontrado un ebook espectacular que por el momento no he sabido descargar. Se trata de un libro sobre la creación de formas raras con photoshop.
Si no sabes como crear esas formas que muchas veces ves en wallpapers y estas intigrado en hacerlo aqui tienes este pequeño pero interesantisimo ebook:
http://issuu.com/nytryk/docs/photoshop/5?mode=embed&documentId=080917090730-52ff955785014a888c7ef9853a911d16&layout=grey

Y hablando de wallpapers recmiendo mirar el software Ultra Fractal para realizar formas estramóticas y de enorme belleza.

** No hace falta ni mencionar que estas dos tecnicas las podemos aplicar en multitud de otras cosas que no san wallpapers. Comopor ejemlo de fondo de nuestro sitio web, del header de nuestro sitio web, etc...