sábado, noviembre 16
Charla de Desarrollo Profesional en la UMNG de Bogotá
En el marco del Día de Ingeniería, en la Facultad donde soy docente, tuve la oportunidad de invitar a Juan Duque para que presentara esta interesante charla sobre el Desarrollo Profesional.
El tema fue "Desarrollo Profesional para artistas digitales". Son consejos para mejorar la presentación de Demo-reels, hojas de vida y portafolios. Esto es algo que me parece de suma importancia pero que creo que la mayoría de los programas de artes digitales no están enfatizando lo suficiente.
lunes, octubre 7
Construcción de un template Joomla 3.0 con el framework Bootstrap.
En la siguiente serie de tutoriales tomados del sitio web Inmotionhosting, se muestra cómo crear una plantilla de Joomla 3.0. Esta plantilla incluye inicio y será es adaptable al ancho de pantalla. (las entradas a los tutoriales están en inglés)
La idea es dar la idea básica de desarrollo más que del diseño gráfico.No se promete en absoluto una plantilla atractiva, pero se muestra cómo construir una plantilla Joomla 3.0 que funcione.
Se muestra una captura de pantalla de la plantilla y un enlace de descarga. También está presente una lista de links de los diferentes tutoriales que componen este proyecto.
Traducción al español de las introducciones de los diferetnes turoriales que componen el proyecto. Los destinos están en el sitio original en idioma inglés (http://www.inmotionhosting.com/support/edu/joomla-3/create-template)
La idea es dar la idea básica de desarrollo más que del diseño gráfico.No se promete en absoluto una plantilla atractiva, pero se muestra cómo construir una plantilla Joomla 3.0 que funcione.
Traducción al español de las introducciones de los diferetnes turoriales que componen el proyecto. Los destinos están en el sitio original en idioma inglés (http://www.inmotionhosting.com/support/edu/joomla-3/create-template)
| Sección 1: | Una plantilla muy básica que pronto será una plantilla de Joomla 3.1 En nuestro primer tutorial sobre la creación de Joomla 3.0 Plantillas.
Hits: 26140
|
|
| Sección 2: | Cómo agregar posiciones de módulo a una plantilla de Joomla 3.1 En este tutorial Joomla 3.0, le mostraremos cómo agregar nuevas posiciones de módulo en una plantilla de Joomla 3.0.
Hits: 24201
|
|
| Sección 3: | Adición de un archivo a un templateDetails.xml Joomla 3.1 Template En este artículo, vamos a mostrar el archivo templateDetails.xml que incluimos dentro de la plantilla de Joomla 3.0 que estamos creando.
Hits: 15330
|
|
| Sección 4: | Cómo comprimir una plantilla Joomla 3.1 Ahora que tenemos todos los archivos necesarios para nuestra plantilla, le mostraremos los conceptos básicos de comprimir el archivo y tenerlo listo para la instalación.
Hits: 7320
|
|
| Sección 5: | ¿Cómo instalar una plantilla Joomla 3.1 En este tutorial de Joomla 3.0, que le guiará a través de los pasos para instalar una plantilla Joomla 3.0
Hits: 30575
|
|
| Sección 6: | Cómo cambiar tu sitio Joomla 3.1 Template Después de instalar una plantilla Joomla 3.0, el siguiente paso es activar la nueva plantilla.
Hits: 15537
|
|
| Sección 7: | Cómo agregar archivos CSS y JavaScript a un Joomla 3.1 Template En este artículo, le mostraremos cómo utilizar $ doc-addStylesheet y $ doc-addscript añadir archivos css y javascript a una plantilla de Joomla 3.0.
Hits: 15803
|
|
| Sección 8: | Cómo agregar Bootstrap a Joomla 3.1 Template En este tutorial, le mostraremos cómo agregar los archivos javascript y css de arranque a una plantilla de Joomla 3.0.
Hits: 20965
|
|
| Sección 9: | ¿Cómo hacer un Joomla 3.1 Template Adaptable En este tutorial, vamos a cubrir los cambios que hicimos en el archivo index.php de nuestra plantilla Joomla 3.0 para que sea plenamente responsable.
Hits: 22090
|
|
| Sección 10: | Adición de seguridad a una plantilla de Joomla 3.1 con jexec En este tutorial, le mostraremos cómo agregar jexec a tu Joomla 3.0 para ayudar a agregar una capa de nivel de seguridad a su plantilla.
Hits: 5641
|
|
Adición de CSS y estilo a la plantillaConoce cómo agregamos estilo básico de la plantilla mediante la actualización de nuestro css / style.css archivo |
||
| Sección 11: | Adición de CSS con el formulario de acceso en una plantilla de Joomla 3.1 Ahora que hemos creado nuestro modelo básico, vamos a empezar a añadir CSS a nuestro archivo css / style.css para ayudar a que los módulos se destacan. Primero vamos a actualizar el formulario de acceso.
Hits: 5958
|
|
| Sección 12: | Adición de CSS a los elementos laterales en una plantilla de Joomla 3.1 En este Joomla 3.0 tutorial, le mostraremos cómo el estilo de los módulos en la barra lateral derecha de nuestra plantilla usando CSS.
Hits: 6704
|
|
lunes, septiembre 9
Diseño sensible, adaptable, o escalable. (Responsive design) con Dreamweaver y Boilerplate.
Con seguridad los diseñadores Web no tuvimos durante mucho tiempo la capacidad de dar una buena solución al diseño de contenidos para pantallas grandes, así como también para pantallas más pequeñas de diferentes tamaños en aparatos móviles y de mejor resolución.
Esta entrada trata sobre un análisis del diseño Web con hojas de estilo CSS3 y HTML5,en Adobe Dreamweaver. Este tipo de diseño en principio se denomina Responsive Design (Diseño adaptable traducido del inglés) y que debe su nombre a un artículo, aparecido en 2010:
http://www.alistapart.com/articles/responsive-web-design/. Se describen los diferentes tipos de archivos que maneja el método, y finalmente se presenta un link a un tutorial en video.
La técnica se basa en un hoja de estilo CSS con Mediaquery, los HTML y una librería Javascript.
Gracias a la aparición de la técnica de Plantillas de Diseño Fluido de Dreamweaver CS6, se hace más fácil su implementación.
A pesar de que es una buena alternativa para sitios móviles, debe tratarse con cuidado el manejo de los contenidos ya que podríamos estar enviando al dispositivo móvil archivos que son usados para el ordenador de escritorio, que, en relación al móvil, se supone más potente. Para optimizar los contenidos para móviles, estos deberían estar preparados, sobretodo las imágenes y videos, para las pantallas más pequeñas y procesadores menos potentes. Sin embargo, con cada actualización de tabletas o teléfonos, nos damos cuenta que estos tienen un poder de proceso y memoria que compiten ya con los equipos de escritorio. También se podría usar el Framework Jquery Mobile que optimiza los recursos del móvil.
El archivo "boilerplate" corrige el texto que cambia de tamaño de forma extraña en IE6/7 cuando el tamaño de fuente del cuerpo se establece en unidades "em". Forza la barra de desplazamiento vertical en navegadores distintos de IE. Evita el ajuste de tamaño de texto en iOS cuando cambia la orientación del dispositivo sin que se desactive el zoom de usuario. También establece tamaños de tipografía a "1em", estandariza el ancho de los caracteres para las etiqueta B y STRONG, así como estandariza todo lo relacionado a saltos de línea, reglas, listas ordenadas y desordenadas, colores de links, etc.
En conclusión, la hoja de estilos "boilerplate.css" adelanta un gran camino en la estandarización y pruebas de diseño para los diferentes navegadores que por alguna razón muestran resultados inesperados con los CSS.
El script analiza el ancho de la pantalla donde se esté desplegando la página, y selecciona una porción del código de la hoja de estilo precedida con un
para colocarla al principio de la renderización del CSS.
Dreamweaver 6 adjunta la dirección relativa del archivo respond.min.js (entre otras) cuando se inicia el diseño mediante la acción de menú Archivo/Nuevo diseño de cuadrícula fluida. Los archivos .css y .js se suben al servidor una vez se quiera publicar el sitio.
Además de los dos archivos mencionados, se hace necesario un archivo CSS propio o personalizado, que es el que manejará los estilos de textos personalizados, márgenes, paddings, clases y ID. Este archivo CSS es el que contiene el Media Query.
De acuerdo con mi experiencia, es mejor hacer caso a la advertencia del texto de ayuda de las DIV, la cual dice que no se aconseja anidar DIV-s. Estas se insertan por el comando de menú:
Y deben quedar siempre dentro de la DIV principal denominada ".gridContainer clearfix" (nombre de clase). Una tras otra, sin anidar. Las posiciones y estilos se dan a partir de allí en la hoja de estilos, repitiendo los nombres de las clases y ID para cada caso o @media only screen and (min-width: npx) y colocando los valores acertados para cada ancho de pantalla.
Ejemplo de hoja de estilo propuesta por Dreamweaver mediante este método, con @media Query:
@charset "utf-8";
/* Medios fluidos sencillos
Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
width:100%;
}
/*
Propiedades de cuadrícula fluida de Dreamweaver
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
y Golden Grid System de Joni Korpi
http://goldengridsystem.com/
*/
/* Diseño móvil: 480 px e inferior. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
/* Diseño escritorio: de 769 px hasta un máximo de 1232 px. Hereda estilos de: Diseño móvil y Diseño tableta. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
En el ejemplo anterior se ve que la primera porción de CSS es la estandard y es la que se desplegará en cualquier pantalla si no encontrara la condición de medir mínimo 481px o 769px, casos en los cuales desplegará las reglas estipuladas en cada sección (fíjese que las llaves que encierran cada porción están en color rojo).
deberíamos, por lo tanto, colocar en la carpeta de imágenes las apropiadas a cada tamaño de pantalla y llamarlas mediante la hoja de estilos en cada porción de @media.
Otra opción que funciona bien para el cambiante mundo de los tamaños de imagen es el "width: auto;".
Ya que este atributo acomoda los anchos de la imagen con respecto a su contenedor y en relación al tamaño original. Parece también comunicarse muy bien con el atributo Viewport.
Javascript se consolida como el lenguaje de integración de la web ya que es compatible con los programas de navegación, y como vimos, maneja bien las hojas de estilo.
Adobe no es la solución perfecta a todos los requerimientos de diseño, en algunos casos debemos valernos de investigaciones de otras fuentes como los frameworks de Github , JqueryMobil, Jquery y demás.
Esta entrada trata sobre un análisis del diseño Web con hojas de estilo CSS3 y HTML5,en Adobe Dreamweaver. Este tipo de diseño en principio se denomina Responsive Design (Diseño adaptable traducido del inglés) y que debe su nombre a un artículo, aparecido en 2010:
http://www.alistapart.com/articles/responsive-web-design/. Se describen los diferentes tipos de archivos que maneja el método, y finalmente se presenta un link a un tutorial en video.
La técnica se basa en un hoja de estilo CSS con Mediaquery, los HTML y una librería Javascript.
Gracias a la aparición de la técnica de Plantillas de Diseño Fluido de Dreamweaver CS6, se hace más fácil su implementación.
A pesar de que es una buena alternativa para sitios móviles, debe tratarse con cuidado el manejo de los contenidos ya que podríamos estar enviando al dispositivo móvil archivos que son usados para el ordenador de escritorio, que, en relación al móvil, se supone más potente. Para optimizar los contenidos para móviles, estos deberían estar preparados, sobretodo las imágenes y videos, para las pantallas más pequeñas y procesadores menos potentes. Sin embargo, con cada actualización de tabletas o teléfonos, nos damos cuenta que estos tienen un poder de proceso y memoria que compiten ya con los equipos de escritorio. También se podría usar el Framework Jquery Mobile que optimiza los recursos del móvil.
Ventana de diáologo de Dreamweaver 6, mostrando un archivo
nuevo a partir de una plantilla de Diseño Fluido.
nuevo a partir de una plantilla de Diseño Fluido.
Análisis de la plantilla propuesta por Adobe Dreamweaver CS6.
La técnica de Diseño Adaptable mediante Adobe Dreamweaver CS6 se basa en una hoja de estilos CSS básica denominada "Boilerplate.css", un script de Javascript llamado "respond.min.js" y una hoja de estilo CSS propia, que puede tener cualquier nombre.
Boilerplate.css
El archivo vinculado a nuestro HTML5, "boilerplate.css" es el resultado de una intensa investigación sobre estilos válidos para múltiples navegadores. Adobe dá los respectivos créditos y agradecimientos en el código fuente a varios desarrolladores y a la comunidad de H5BP ( Información detallada acerca de este CSS: h5bp.com/css).El archivo "boilerplate" corrige el texto que cambia de tamaño de forma extraña en IE6/7 cuando el tamaño de fuente del cuerpo se establece en unidades "em". Forza la barra de desplazamiento vertical en navegadores distintos de IE. Evita el ajuste de tamaño de texto en iOS cuando cambia la orientación del dispositivo sin que se desactive el zoom de usuario. También establece tamaños de tipografía a "1em", estandariza el ancho de los caracteres para las etiqueta B y STRONG, así como estandariza todo lo relacionado a saltos de línea, reglas, listas ordenadas y desordenadas, colores de links, etc.
Este archivo iguala a ceros muchos de los valores de las reglas CSS básicas dentro de un DIV con clases de CSS no semánticas como .clearfix, .visuallyhidden y .focusable
En conclusión, la hoja de estilos "boilerplate.css" adelanta un gran camino en la estandarización y pruebas de diseño para los diferentes navegadores que por alguna razón muestran resultados inesperados con los CSS.
Respond.min.js
Básicamente, el script recorre la CSS a que se hace referencia en la página (la CSS propia o la que se haya creado con la página y que es independiente de boilerplate.css) y se ejecuta una expresión regular o dos en su contenido para encontrar preguntas de los medios y sus bloques asociados de CSS.El script analiza el ancho de la pantalla donde se esté desplegando la página, y selecciona una porción del código de la hoja de estilo precedida con un
"@media only screen and (min-width: npx) siendo "n" el ancho mínimo de la pantalla"
para colocarla al principio de la renderización del CSS.
Dreamweaver 6 adjunta la dirección relativa del archivo respond.min.js (entre otras) cuando se inicia el diseño mediante la acción de menú Archivo/Nuevo diseño de cuadrícula fluida. Los archivos .css y .js se suben al servidor una vez se quiera publicar el sitio.
La hoja de estilos propia. (miNombre.css)
Además de los dos archivos mencionados, se hace necesario un archivo CSS propio o personalizado, que es el que manejará los estilos de textos personalizados, márgenes, paddings, clases y ID. Este archivo CSS es el que contiene el Media Query.
De acuerdo con mi experiencia, es mejor hacer caso a la advertencia del texto de ayuda de las DIV, la cual dice que no se aconseja anidar DIV-s. Estas se insertan por el comando de menú:
insertar/Objetos de diseño/DIv de diseño de cuadrícula fluida
Y deben quedar siempre dentro de la DIV principal denominada ".gridContainer clearfix" (nombre de clase). Una tras otra, sin anidar. Las posiciones y estilos se dan a partir de allí en la hoja de estilos, repitiendo los nombres de las clases y ID para cada caso o @media only screen and (min-width: npx) y colocando los valores acertados para cada ancho de pantalla.
Ejemplo de hoja de estilo propuesta por Dreamweaver mediante este método, con @media Query:
@charset "utf-8";
/* Medios fluidos sencillos
Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
width:100%;
}
/*
Propiedades de cuadrícula fluida de Dreamweaver
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
y Golden Grid System de Joni Korpi
http://goldengridsystem.com/
*/
/* Diseño móvil: 480 px e inferior. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
/* Diseño escritorio: de 769 px hasta un máximo de 1232 px. Hereda estilos de: Diseño móvil y Diseño tableta. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
En el ejemplo anterior se ve que la primera porción de CSS es la estandard y es la que se desplegará en cualquier pantalla si no encontrara la condición de medir mínimo 481px o 769px, casos en los cuales desplegará las reglas estipuladas en cada sección (fíjese que las llaves que encierran cada porción están en color rojo).
Manejo de imágenes.
Es posible diseñar las imágenes y contenidos para que mediante el procedimiento Mediaquery cargue en cada dispositivo las que le corresponden a su tamaño. Una solución posible es colocar los tamaños del ancho de las imágenes, DIV y demás características en porcentajes, haciendo que no ocupen el ancho total mediante una regla de ancho máximo
por ej.: img {width: 90%; max-width: 1200px;}
deberíamos, por lo tanto, colocar en la carpeta de imágenes las apropiadas a cada tamaño de pantalla y llamarlas mediante la hoja de estilos en cada porción de @media.
Otra opción que funciona bien para el cambiante mundo de los tamaños de imagen es el "width: auto;".
img {width: auto; max-width: 600px;}
Ya que este atributo acomoda los anchos de la imagen con respecto a su contenedor y en relación al tamaño original. Parece también comunicarse muy bien con el atributo Viewport.
¿Qué usar, ID o Clases?
Es una buena pregunta. Las ID son identificaciones únicas a objetos como DIV que no se deban repetir en el diseño, van precedidas por el signo "#", por su lado, las clases son objetos que pueden ser genéricos (van precedidos con "."), tales como tipos de letra en de títulos H1, H2, etc, párrafos, etc, y siempre tienen nombre único con la diferencia que en el HTML el objeto al que se le haya aplicado dicha clase (spam class) renderizará el estilo cuantas veces lo encuentre. Digamos, por lo tanto, que no es el hecho de qué usar más o menos veces, sino de saberlo aplicar.Conclusión
El uso de herramientas como Dreamweaver, o un Frameworks para el Javascript, los CSS o el HTML nos ayuda mucho en la consecusión rápida de nuestras metas de diseño ya que adelanta trabajo en las pruebas con navegadores.Javascript se consolida como el lenguaje de integración de la web ya que es compatible con los programas de navegación, y como vimos, maneja bien las hojas de estilo.
Adobe no es la solución perfecta a todos los requerimientos de diseño, en algunos casos debemos valernos de investigaciones de otras fuentes como los frameworks de Github , JqueryMobil, Jquery y demás.
Tutorial de este artículo.
Diseño adaptable en Dreamweaver10 reglas heurísticas de Usabilidad de Jacob Nielsen.
Jakob Nielsen “el gurú de la usabilidad” es una de las personas más respetadas en el ámbito mundial sobre usabilidad en la web.
Jakob estudió 249 problemas de usabilidad y a partir de ellos diseñó lo que denominó las“reglas generales” para identificar los posibles problemas de usabilidad.
- Visibilidad del estado del sistema: el sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo, a través de retroalimentación apropiada dentro de un tiempo razonable.
- Relación entre el sistema y el mundo real: el sistema debería hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares al usuario, más que con términos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.
- Control y libertad del usuario: hay ocasiones en que los usuarios elegirán las funciones del sistema por error y necesitarán una “salida de emergencia” claramente marcada para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer.
- Consistencia y estándares: los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.
- Prevención de errores: mucho mejor que un buen diseño de mensajes de error es realizar un diseño cuidadoso que prevenga la ocurrencia de problemas.
- Reconocimiento antes que recuerdo: se deben hacer visibles los objetos, acciones y opciones, El usuario no tendría que recordar la información que se le da en una parte del proceso, para seguir adelante. Las instrucciones para el uso del sistema deben estar a la vista o ser fácilmente recuperables cuando sea necesario.
- Flexibilidad y eficiencia de uso: la presencia de aceleradores, que no son vistos por los usuarios novatos, puede ofrecer una interacción más rápida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios adapte el sistema para usos frecuentes.
- Estética y diseño minimalista: los diálogos no deben contener información que es irrelevante o poco usada. Cada unidad extra de información en un diálogo, compite con las unidades de información relevante y disminuye su visibilidad relativa.
- Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.
- Ayuda y documentación: incluso en los casos en que el sistema pueda ser usado sin documentación, podría ser necesario ofrecer ayuda y documentación. Dicha información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.
http://web.braintive.com/10-reglas-heuristicas-de-usabilidad-de-jakob-nielsen/
lunes, agosto 12
Esqueumorfismo
Es una palabra proveniente del griego, que es usada en la cerámica y que significa la representación de una pieza o parte en otra, así esta no se use. En la computación es la representación de objetos del mundo real, en las Interfaces Gráficas.
En lo referente a lo ornamental puede usarse para familiarizar al usuario con referencias a objetos a los que visualmente se está acostumbrado. En cuanto al uso, hace referencia a objetos que por su uso referencian interacciones parecidas a la del mundo físico, por ejemplo una cesta de basura, carpetas, etc.
Aunque el uso excesivo o inadecuado de esta técnica provoca en las interfaces su desuso, si hay algunas que lo necesitan, o por lo menos, minimizar el diseño de elementos decorativos en pro del uso.
Un ejemplo del diseño Esqueumorfista llevado a su máxima expresión es el software Reason:
Enlaces de interés
En lo referente a lo ornamental puede usarse para familiarizar al usuario con referencias a objetos a los que visualmente se está acostumbrado. En cuanto al uso, hace referencia a objetos que por su uso referencian interacciones parecidas a la del mundo físico, por ejemplo una cesta de basura, carpetas, etc.
Hasta la fecha, Apple se caracteriza por diseñar interfaces que representan el mundo real.
Muchas veces el diseñador de Interfaces se apega a la imitación esqueumórfica y limita la funcionalidad, imitar un libro en un entorno digital, donde haya que pasar muchas páginas para llegar al objetivo de mi lectura, limita la usabilidad y acceso a la información. Aunque es posible que al lector le guste la parafernalia de pasar las hojas y escuchar el sonido del paso de éstas, tarde o temprano terminará queriendo pasar al contenido mediante el uso de un menu de contenidos.
Una señal más de la interfaz esqueumórfica se da al resaltar frases o palabras en un iBook para iPad, la cual imita perfectamente un resaltador de tinta.
Imagen de un iBook que imita un libro del mundo físico.
La tendencia de imitar los objetos del mundo físico en las Interfaces de Usuario se viene dando desde el momento mismo de la creación de aplicaciones para computador. Como lo es el caso WinAmp, entre otras, que usaba la metáfora visual de la parte frontal de un equipo de sonido Hi-Fi de los años 90.
WinAmps 2.0
La representación del mundo fisico en las interfaces, empieza con la creación también de los teclados llamado hoy "QWERTY" por la disposición de las citadas teclas en el dispositivo de entrada. Dispositivo que cada vez va mejorando en los aparatos móviles, pero que en el fondo sigue recreando la disposición del teclado original de las máquinas de escribir y adicionando una que otra funcionalidad como los signos de "@", ".com" y sus respectivas mezclas junto a la tecla "ALT".
Vale la pena meditar si hoy día escribimos más pensando en la página como PDF (o sea electrónica) que una para imprimir, más si hay tantas campañas sobre ecología y protección de un medio ambiente sin tintas, tala de árboles para producción de papel, etc.
Disposición original de las letras en un teclado de máquina de escribir.
"Con el diseño esqueuomorfista se consigue una cierta familiaridad de base con la interfaz por analogismo del usuario con los referentes materiales que conoce. Se parte de conocimientos previos para aplicarlos a lo nuevo y eso, en realidad, es siempre positivo. En ocasiones, sin embargo, nos impide aprovechar la liberación de lo material y sus ataduras pueden incluso entorpecer la usabilidad, pero al final esto se vincula más con malas decisiones de diseño en sí mismas que a la influencia real de la inclinación al esqueuomorfismo."
Revista Caracteres.net
(http://revistacaracteres.net/blogs/pantallas/2012/02/a-favor-y-en-contra-del-esqueuomorfismo/)
Aunque el uso excesivo o inadecuado de esta técnica provoca en las interfaces su desuso, si hay algunas que lo necesitan, o por lo menos, minimizar el diseño de elementos decorativos en pro del uso.
La aplicación iBooks de IOS, vs la versión simplificada que elimina la representación de los entrepaños de madera, sombras y demás elementos decorativos que si bien ayudan a ubicar al usuario dentro de un "mundo físico-virtual", su eliminación da un estilo más versátil y contemporáneo si se quiere.
Enlaces de interés
Las ideas de diseño detrás de la moderna interfaz de Windows 8
http://www.baboo.com.br/windows/as-ideias-de-design-por-tras-da-interface-moderna-do-windows-8/
Windows 8 y la carga cognitiva
http://www.baboo.com.br/windows/windows-8-e-a-carga-cognitiva/Por qué el skeumorfismo en su justa medida es positivo
http://applesencia.com/2013/08/razones-uso-skeumorfismo-positivo
miércoles, febrero 27
Breve Manual de tipografía
Este manual introductorio nos dará una guía para empezar a conocer la tipografía.
lunes, febrero 25
Flujo de trabajo para Indesign en DPS
Es la plataforma de Adobe para la publicación y creación de publicaciones para dispostivos móviles como iOS, Android y Kinet.
Las publicaciones se manejan siempre desde el programa Indesign, con las herrramientas Folio Builder y Overlay Creator del menú ventana.
Algunas consideraciones a tener en cuenta son:
Debe crear una ID de Adobe específica para DPS, en https://digitalpublishing.acrobat.com/
Esta ID es gratuita y sirve para dejar grabadas en el sitio web de Adobe los trabajos que se vayan haciendo. Adobe tiene la esperanza de que en algún momento estas cuentas se vuelvan de pago, ya que para poder vender las revistas digitales hay que pagarles una suscripción. Mientras tanto sólo las pueden ver los desarrolladores o los clientes a los que se les haya creado una ID.
Bajar el programa Adobe Viewer en el dispositivo móvil. Loguearse en él para ver las publicaciones que se vayan haciendo en Indesign. En las tiendas de Apps de cada plataforma está el programa.
Actualizar el programa Indesign con los últimos plugins y Adds-on como son Folio Builder y Overlay Creator. Esto se hace mediante el menú ayuda de Indesign y escogiendo Actualizaciones. Allí salen todas las actualizaciones de la Suite CS 5.5 y 6. En caso de ser la Suite 6, esta actualización es automática. Si es 5.5, se indicará una URL en donde bajar dos actualizaciones independientes para Indesign. También están las URLs en el sitio de DPS (https://digitalpublishing.acrobat.com/) a las cuales se accede una vez logueados e inscritos.
Una vez hecha la inscripción en el sitio de DPS, hay la posibilidad de acceder a una serie de recomendaciones y tutoriales para aprender el manejo de las publicaciones digitales.
Recomendaciones
Las publicaciones en Folio Builder (Ventan/extensiones en Indesign), se hacen importando archivos sueltos de indesign o añadiendo la publicación abierta actualmente en Indesign. Al añadir las publicaciones, estas se convierten en artículos. Esto se comienza a hacer en Ventana, Extendiones, Folio Builder.
Las publicaciones en Indesign se deben configurar sin páginas opuestas. Si se debe convertir una publicación impresa en DPS, debe tener en cuenta que las páginas maestras cambiarán al configurar una sola página en la vista de página.
Se deben crear publicaciones diferentes para la vista vertical y horizontal (al voltear el dispositivo). En Folio Builder se puede especificar una carpeta que contiene las dos publicaciones y Folio Builder crea los artículos para cada posición. La manera de hacerlo es poner nombres iguales a cada configuración con la extensión "_v" y "_h". Ejemplo: "revista_h.indd" y "revista_v.indd". Esos archivos se colocan en la misma carpeta.
Sitio de tutoriales para DPS, ¿Qué se puede aprender?
Se pueden crear publicaciones con desplazamiento Vertical y Horizontal (es diferente de la posición del dispositivo), es decir, al arrastrar el contenido con el índice hacia arriba-abajo o izquierda-derecha. Se crea una publicación añadiendo la publicación abierta y colocando la propiedad de Publicación como "vista normal" en folio Builer. Luego se abre el archivo que queremos sea desplazamiento horizontal y se adiciona como artículo a la publicación dentro del panel de Folio Builder, a este se le pone la propiedad de "Vista Horizontal" y haciendo click en el checkbox de desplazamiento horizontal.
La ventana de Overlay Creator y la de Interacción, se usan para crear interacciones de gestos con los contenidos. EN algunos casos la interacción es sólo para la versión Flash o PDF, y en otros casos para DPS, o ambas. Estos se colocan en la publicación mediante la creacion de contenedores. Hay otras interaccione como cubos 3D, Zoom a imágenes, presentación de diapositivas, incrustación de HTML dentro de contenedores, incrustación de URL locales y externas dentro de contenedores, hipervínculos a URL externas, internas y páginas con el uso de "navto", http, etc, (que para DPS son artículos) de la publicación. Estas ayudas se encuentran en Adobe tutorial para DPS. Otra manera es buscar muchas publicaciones al respecto en Youtube, mediante la búsqueda de DPS, overlay creator o folio builder.
Las publicaciones se manejan siempre desde el programa Indesign, con las herrramientas Folio Builder y Overlay Creator del menú ventana.
Algunas consideraciones a tener en cuenta son:
Debe crear una ID de Adobe específica para DPS, en https://digitalpublishing.acrobat.com/
Esta ID es gratuita y sirve para dejar grabadas en el sitio web de Adobe los trabajos que se vayan haciendo. Adobe tiene la esperanza de que en algún momento estas cuentas se vuelvan de pago, ya que para poder vender las revistas digitales hay que pagarles una suscripción. Mientras tanto sólo las pueden ver los desarrolladores o los clientes a los que se les haya creado una ID.
Bajar el programa Adobe Viewer en el dispositivo móvil. Loguearse en él para ver las publicaciones que se vayan haciendo en Indesign. En las tiendas de Apps de cada plataforma está el programa.
Actualizar el programa Indesign con los últimos plugins y Adds-on como son Folio Builder y Overlay Creator. Esto se hace mediante el menú ayuda de Indesign y escogiendo Actualizaciones. Allí salen todas las actualizaciones de la Suite CS 5.5 y 6. En caso de ser la Suite 6, esta actualización es automática. Si es 5.5, se indicará una URL en donde bajar dos actualizaciones independientes para Indesign. También están las URLs en el sitio de DPS (https://digitalpublishing.acrobat.com/) a las cuales se accede una vez logueados e inscritos.
Una vez hecha la inscripción en el sitio de DPS, hay la posibilidad de acceder a una serie de recomendaciones y tutoriales para aprender el manejo de las publicaciones digitales.
Recomendaciones
Las publicaciones en Folio Builder (Ventan/extensiones en Indesign), se hacen importando archivos sueltos de indesign o añadiendo la publicación abierta actualmente en Indesign. Al añadir las publicaciones, estas se convierten en artículos. Esto se comienza a hacer en Ventana, Extendiones, Folio Builder.
Las publicaciones en Indesign se deben configurar sin páginas opuestas. Si se debe convertir una publicación impresa en DPS, debe tener en cuenta que las páginas maestras cambiarán al configurar una sola página en la vista de página.
Se deben crear publicaciones diferentes para la vista vertical y horizontal (al voltear el dispositivo). En Folio Builder se puede especificar una carpeta que contiene las dos publicaciones y Folio Builder crea los artículos para cada posición. La manera de hacerlo es poner nombres iguales a cada configuración con la extensión "_v" y "_h". Ejemplo: "revista_h.indd" y "revista_v.indd". Esos archivos se colocan en la misma carpeta.
Sitio de tutoriales para DPS, ¿Qué se puede aprender?
Se pueden crear publicaciones con desplazamiento Vertical y Horizontal (es diferente de la posición del dispositivo), es decir, al arrastrar el contenido con el índice hacia arriba-abajo o izquierda-derecha. Se crea una publicación añadiendo la publicación abierta y colocando la propiedad de Publicación como "vista normal" en folio Builer. Luego se abre el archivo que queremos sea desplazamiento horizontal y se adiciona como artículo a la publicación dentro del panel de Folio Builder, a este se le pone la propiedad de "Vista Horizontal" y haciendo click en el checkbox de desplazamiento horizontal.
La ventana de Overlay Creator y la de Interacción, se usan para crear interacciones de gestos con los contenidos. EN algunos casos la interacción es sólo para la versión Flash o PDF, y en otros casos para DPS, o ambas. Estos se colocan en la publicación mediante la creacion de contenedores. Hay otras interaccione como cubos 3D, Zoom a imágenes, presentación de diapositivas, incrustación de HTML dentro de contenedores, incrustación de URL locales y externas dentro de contenedores, hipervínculos a URL externas, internas y páginas con el uso de "navto", http, etc, (que para DPS son artículos) de la publicación. Estas ayudas se encuentran en Adobe tutorial para DPS. Otra manera es buscar muchas publicaciones al respecto en Youtube, mediante la búsqueda de DPS, overlay creator o folio builder.
martes, febrero 12
Ideas para el Portafolio electrónico
Dismul
http://dismul.blogspot.com/search/label/portafolio
Esta es una recopilación de vínculos de interés para la realización de portafolios. Información en línea.
7 herramientas para lucir tu perfil profesional
http://www.clasesdeperiodismo.com/2012/11/20/7-herramientas-para-lucir-tu-perfil-profesional
Cómo usar Twitter para encontrar trabajo
Son simples herramientas y tips que te permitirán incrementar tus chances de conseguir un empleo
http://www.elcivico.com/notas/2012/11/18/twitter-encontrar-trabajo-96445.asp
30 Ideas para conservar tus seguidores en Twitter y añadir algunos más
http://clickefectivo.com/?p=11803
Cinco maneras de encontrar trabajo en Internet
http://www.enter.co/enterprise/cinco-maneras-de-encontrar-trabajo-en-internet
Cómo armar un portafolio profesional
http://www.grafiscopio.com/como-armar-un-portafolio-profesional/
30 Portafolios minimalistas para su inspiración
http://sixrevisions.com/design-showcase-inspiration/minimalist-portfolio-website/
Las influencias ocultas de las redes sociales
http://formulasparaganardinero.com/video-ted-la-influencia-oculta-de-las-redes-sociales/
Trabajando la marca personal en las redes sociales
http://ecomunicados.wordpress.com/2012/09/07/trabajando-la-marca-personal/
3 herramientas para medir la repercusión de un Tweet
http://marketinghoy.cl/marketing-digital/redes-sociales/3-herramientas-para-conocer-la-repercusion-de-un-tweet
La idea gráfica de la página de landing
http://www.bluecaribu.com/infografia-anatomia-de-una-landing-page-perfecta
http://dismul.blogspot.com/search/label/portafolio
Esta es una recopilación de vínculos de interés para la realización de portafolios. Información en línea.
7 herramientas para lucir tu perfil profesional
http://www.clasesdeperiodismo.com/2012/11/20/7-herramientas-para-lucir-tu-perfil-profesional
Cómo usar Twitter para encontrar trabajo
Son simples herramientas y tips que te permitirán incrementar tus chances de conseguir un empleo
http://www.elcivico.com/notas/2012/11/18/twitter-encontrar-trabajo-96445.asp
30 Ideas para conservar tus seguidores en Twitter y añadir algunos más
http://clickefectivo.com/?p=11803
Cinco maneras de encontrar trabajo en Internet
http://www.enter.co/enterprise/cinco-maneras-de-encontrar-trabajo-en-internet
Cómo armar un portafolio profesional
http://www.grafiscopio.com/como-armar-un-portafolio-profesional/
30 Portafolios minimalistas para su inspiración
http://sixrevisions.com/design-showcase-inspiration/minimalist-portfolio-website/
Las influencias ocultas de las redes sociales
http://formulasparaganardinero.com/video-ted-la-influencia-oculta-de-las-redes-sociales/
Trabajando la marca personal en las redes sociales
http://ecomunicados.wordpress.com/2012/09/07/trabajando-la-marca-personal/
3 herramientas para medir la repercusión de un Tweet
http://marketinghoy.cl/marketing-digital/redes-sociales/3-herramientas-para-conocer-la-repercusion-de-un-tweet
La idea gráfica de la página de landing
http://www.bluecaribu.com/infografia-anatomia-de-una-landing-page-perfecta
Cómo vivir antes de morir por Steve Jobs
Los expertos de Silicon Valley tienen un término para definir el carisma de Steve Jobs: el campo de distorsión de la realidad. Pero la verdad es que a la mayoría de nosotros nos gusta vivir en la realidad de Jobs, donde un exquisito diseño y la utilidad pura para hacer algunas herramientas útiles es adictiva. El ordenador Macintosh (que llevó al el ratón, y su interfaz gráfica de usuario a la fama), Pixar Animation Studios (que produjo Toy Story , la primera película largometraje totalmente animada en 3D), el iPod, el iPhone, el iPad fueron sus ideas.
Jobs luchó contra una forma rara de cáncer pancreático - agregando a una historia épica de la vida que refleja la historia de la propia Apple: siempre el más débil, nunca con un éxito espectacular. En agosto de 2011 renunció como CEO de Apple, quedando como Presidente de la Junta. Murió el 5 de octubre de 2011.
Biografía de Steve Jobs (link)
Jobs luchó contra una forma rara de cáncer pancreático - agregando a una historia épica de la vida que refleja la historia de la propia Apple: siempre el más débil, nunca con un éxito espectacular. En agosto de 2011 renunció como CEO de Apple, quedando como Presidente de la Junta. Murió el 5 de octubre de 2011.
"La última década en el negocio pertenece a Jobs". Fortune Magazine
Biografía de Steve Jobs (link)
Suscribirse a:
Entradas (Atom)