Nacimiento de Quazar

Cada vez más usuarios acceden a Interet desde dispositivos móviles tales como tablets y smartphones. De la misma forma, los últimos años han estado caracterizados por un gran auge en el desarrollo de aplicaciones móviles, principalmente para iOS y Android. Por esta razón, nuestra compañía ha unido esfuerzos con el nuevo CEO de Quazar, Neftalí Loría para crear esta división de la empresa y ofrecer estos nuevos servicios a nuestro amplio grupo de clientes y amigos, tanto a nivel nacional como fuera de Costa Rica.

¿Qué es “Responsive Web Design”?

El diseño web “sensible” o “Responsive Web Design” en inglés, es una técnica utilizada para crear sitios web que muestren sus contenidos ordenados especialmente para el tipo de dispositivo en que se está viendo el sitio, logrando esto sin necesidad de crear diferentes versiones del sitio web para las diferentes resoluciones que presentan las tablets y los smartphones. Un ejemplo de esto se puede obtener en el propio sitio web de Quazar Web Design. Un enlace donde se muestran las diferentes formas en que se muestra el sitio según el dispositivo se puede encontrar en este proyecto de Matt Kersley, tal como lo muestra la imagen adjunta (Ver proyecto en: http://mattkersley.com/responsive/):

Quazar también se especializará en el diseño de Mobile Apps

Si usted cuenta con un proyecto en mente que requiera el diseño de una aplicación para dispositivos móviles, Quazar también le ofrece este servicio tanto para apps dirigidas a iOS, Android un otros sistemas operativos para dispositivos móviles.

Damos así la bienvenida oficial a Quazar a nuestra empresa, orgullosos del nivel de diseño y la alta calidad del código HTML/CSS. Quazar no sólo viene a ampliar nuestra oferta de servicios, sino a fortalecernos en cuanto al volumen de trabajo para nuestros clientes actuales. Aprovechamos para felicitar a Neftalí Loría como el nuevo CEO y Co-Propietario de Quazar Web Design.

Conozca más de Quazar

Aprovechamos para invitarle a mantenerse en contacto con Quazar en nuestros distintos canales, donde estaremos compartiendo recursos y noticias con todo el acontecer del Responsive Web Design y del ambiente de diseño para Mobile Apps.

En Facebook: http://www.facebook.com/quazarcr

En Twitter: @QuazarCR

En GooglePlus: Quazar en G+

Hoy tuvimos la oportunidad de compartir con estudiantes de la escuela de Ingeniería en Computación del Tecnológico de Costa Rica una charla en la que expusimos un poco sobre HTML5 y CSS3. Exploramos las nuevas capacidades que vienen a mejorar la experiencia para el usuario y los aportes en cuanto a diseño y rendimiento.

La implementación de estas nuevas tecnologías ha empezado a tomar más fuerza en los últimos meses gracias a la salida de versiones actualizadas de los principales navegadores de internet (incluso el infame Internet Explorer, que con su última versión trata de ponerse al nivel de la competencia) y el boom por el uso de HTML5 y CSS3 en cada vez más sitios.

Como se discutió en la charla, el punto aquí no es preguntar si se debe empezar a utilizar HTML5 o no, sino más bien preguntarse cuando empezar a usarlo, debido que es inevitable que de aquí a un año los sitios nuevos que no utilicen los nuevos estándares empezarán a verse anticuados o al menos no sobresaldrán por encima de la competencia.

Si bien es cierto que encontramos obstáculos en la implementación con navegadores como IE6, 7 y 8, también existen alternativas para hacer correcto su funcionamiento y dejar de limitarnos a la hora de diseñar, con el fin de obtener los mejores beneficios al utilizar HTML5 y CSS3, los cuales son mayores que los obstáculos que se presentan en los navegadores antiguos.

A continuación les dejamos el link de la presentación “Descargar HTML5 y CSS3: Construyendo la Web 2.0 (Formato .PDF 11.4MB) “, donde abarcamos una explicación global de los nuevos elementos, propiedades, funcionalidades, APIs y varios ejemplos de sitios web para empezar a asumir el reto de aprender lo que sin duda alguna será el lenguaje web dominante de los próximos años.

Agradecemos a la Asociación de Estudiantes de Ingeniería en Computación por la invitación recibida, es un gusto para InterGraphicDESIGNS participar y apoyar iniciativas como esta, que promueven la apertura y el conocimiento a nuestros futuros profesionales.

Otra herramienta relacionada es el Closure Inspector, herramienta necesaria para ayudarse a trabajar con Firebug JavaScript Debugger.

A pesar de que la noticia del lanzamiento de una nueva librería JavaScript creada por Google generó mucho entusiasmo en el medio de los desarrolladores de sitios web, lo cierto es que conforme pasan los días la mayor parte de la comunidad de desarrolladores parece seguir inclinándose por jQuery, e incluso, medios de gran autoridad en el tema como la revista especializada SitePoint han publicado un artículo dedicado exclusivamente a señalar algunas fallas en la calidad del código.

Las críticas, bien argumentadas, son desarrolladas por Dmitry Baranovskiy, creador de otra popular librería de JavaScript: Raphaël.

El artículo ha desatado una interesante discusión sobre el poder de la marca “Google”, y el hecho de cómo cualquier producto lanzado por Google parece tener rápida aceptación sólo debido a la buena reputación de esta marca en el mercado. En este caso, Google ha sido duramente criticado sobre su responsabilidad de realizar pruebas más intensivas a la calidad de su código, y responsabilizarse aún más por el nivel de los productos que lanza al servicio de la comunidad de desarrolladores.

Links de Interés:

• Google Closure
• Closure Compiler
• Closure Inspector
• SitePoint: Google closure: How not to write JavaScript
• Dmitry Baranovskiy
• Raphaël
• jQuery

Google nos brinda el “API de Google Chart que permite generar gráficos de forma dinámica”.

Se utiliza llamando a la url de la API de la siguiente forma:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World

Este link devolverá una imagen con el gráfico.

Donde:

• http://chart.apis.google.com/chart? es la ubicación del API de Chart.
• & separa los parámetros.
• chs=250x100 es el tamaño del gráfico en píxeles.
• chd=t:60,40 son los datos del gráfico.
• cht=p3 es el tipo de gráfico.
• chl=Hello|World es la etiqueta del gráfico.

Te dejamos la guia del desarrollador de la API de Google Chart. Además si deseas una visualización mas personalizada (no solo para gráficos, puedes encontrar para tablas de resultados también) con varios ejemplos te recomendamos  Google Visualization API

Si lo que buscas es algo en PHP, la librería de pChart te puede dar la solución para la personalización  de gráficas.

Este sería el código (bastante amigable):

<?php
// Standard inclusions
include(“pChart/pData.class”);
include(“pChart/pChart.class”);

// Dataset definition
$DataSet = new pData;
$DataSet->ImportFromCSV(“Sample/bulkdata.csv”,”,”,array(1,2,3),FALSE,0);
$DataSet->AddAllSeries();
$DataSet->SetAbsciseLabelSerie();
$DataSet->SetSerieName(“January”,”Serie1″);
$DataSet->SetSerieName(“February”,”Serie2″);
$DataSet->SetSerieName(“March”,”Serie3″);
$DataSet->SetYAxisName(“Average age”);
$DataSet->SetYAxisUnit(“µs”);

// Initialise the graph
$Test = new pChart(700,230);
$Test->setFontProperties(“Fonts/tahoma.ttf”,8);
$Test->setGraphArea(70,30,680,200);
$Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
$Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2);
$Test->drawGrid(4,TRUE,230,230,230,50);

// Draw the 0 line
$Test->setFontProperties(“Fonts/tahoma.ttf”,6);
$Test->drawTreshold(0,143,55,72,TRUE,TRUE);

// Draw the line graph
$Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());
$Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);

// Finish the graph
$Test->setFontProperties(“Fonts/tahoma.ttf”,8);
$Test->drawLegend(75,35,$DataSet->GetDataDescription(),255,255,255);
$Test->setFontProperties(“Fonts/tahoma.ttf”,10);
$Test->drawTitle(60,22,”example 1″,50,50,50,585);
$Test->Render(“example1.png”);
?>

Este es el resultado:

Que opción es la mejor, es una cuestión de gusto y personalización. Pero con estas opciones es muy fácíl que hayas encontrado alguna que te pueda dar esa gráfica que buscas.

Con este componente se pueden crear gráficos de: línea, barra, barra horizontal, barras apiladas, de candela, de área, pie, radar y de dispersión. Cabe mencionar que los gráficos tienen bastantes opciones de personalización para darle el gusto personal.

¿Qué tan complicado es usar este componente?

Se necesita incluir el componente en nuestro HTML y también debemos proveer el archivo de datos en el servidor. Dicho archivo de datos puede ser un archivo de texto plano, o un .PHP, Perl, Python o Java.

Para un gráfico simple, sencillamente se ubica el archivo data.txt en el sitio y se apunta el componente al URL de dicho archivo. No obstante, lo que en realidad queremos es cargar nuestros gráficos con datos extraídos de una base de datos o algo calculado de antemano. Para hacer esto, necesitamos crear el archivo de datos en algún lenguaje como PHP (el cual realizará los cálculos o recuperará datos de una base de datos) y apuntamos el componente a este archivo para que el gráfico se cargue con dichos datos.

Para hacer este trabajo más sencillo, Open Flash Chart incluye clases creadas en PHP, Perl, Python y Java las cuales se encargan de crear los datos a ser desplegados en los gráficos del componente.

Les adjunto un archivo comprimido con un ejemplo funcional en PHP que incluye todo. Para probarlo, su servidor web debe tener soporte para PHP, el navegador debe tener instalado el Flash Player y únicamente deben subirlo lugar deseado en su sitio web.

ejemplo-grafico

A continuación les muestro un pantallazo del gráfico de pie sencillo creado por el ejemplo.

Gráfico

Existe una forma más modular desarrollada por Nicole Sullivan, en la que podemos construir los archivos CSS: CSS Orientado a Objetos (OOCSS).  Esta forma pretende brindar extensibilidad y mantenibilidad a nuestro código CSS, sin dejar de lado la facilidad de comprensión del mismo.

El objetivo de esta metodología es “escribir código CSS escalable, sano y mantenible”, en palabras de Sullivan, quien usa y recomienda un “grid framework” de la conocida librería de Yahoo “Yahoo YUI”. Sin embargo, cada quien puede escribir su CSS sin necesidad de este framework pero aplicando los principios del OOCSS.

El adoptar el uso de OOCSS, implica el pensar en reutilización de estilos y su fácil mantenimiento. Cada componente es una estructura fija HTML, en la cual se aplican una seria de reglas CSS que controlan su diseño (estructura) y otra serie de reglas CSS que controlan su apariencia (piel o “skin”).

Una recomendación de Sullivan es evitar a toda costa lo que ella llama “selectores basados en la ubicación”, esto es, estilos que afectan el contenido según la ubicación que tengan en la página. Para esto, ella recomienda agregar una clase base para el objeto HTML y  agregar clases “hija” que son las que aplican los estilos según la ubicación en la página; con esto, este CSS puede ser fácilmente reutilizado en otro lugar del sitio.

Ejemplo

Supongamos que todas las páginas del sitio tienen un menú lateral, cuyo código CSS es el siguiente:


<div class=”menulateral”>
… contenido del menú ...
</div>


Ahora, supongamos que hay una página de noticias en la que queremos que este menú tenga un estilo diferente, por ejemplo, diferente color de fondo. Tradicionalmente, se agregaría una clase al <body> de esta forma:

<body class=”noticias”>

Con esto, las reglas de estilo que se escribirían para esa página serían algo así:

body.noticias .menulateral {
background-color: #FF0000;
}

El enfoque recomendado por OOCSS es diferente. En vez de tener una clase aplicada al <body>, se crea una clase por cada tipo de elemento que se quiere que se vea diferente. Con OOCSS, el ejemplo anterior cambiaría a lo siguiente:

.noticiasmenulateral { /* extends .menulateral*/
background-color: #FF0000;
}

Esta clase hereda de la clase existente que describe el estilo estándar para el elemento. Así, se aplica “en adición” a la clase base existente:

<div class=”menulateral noticiasmenulateral”>
… contenido del menú ...
</div>

Conclusión

Siguiendo estos principios, se puede tener una estructura bastante ordenada y reutilizable no solamente en el mismo sitio sino en otros proyectos; además que OOCSS brindaría beneficios significativos en cuanto al rendimiento de las páginas.

Al enfocarse en reutilizar estilos CSS en todo el sitio, con OOCSS los archivos CSS serían considerablemente más pequeños, aunque los archivos HTML sean un poco más grandes. Esto es deseable ya que el tamaño de los archivos CSS influencia directamente la cantidad de tiempo que el navegador usa para desplegar una página en blanco mientras el sitio carga. Archivos CSS más pequeños implican menos tiempo invertido leyendo una página en blanco.

Evitando los selectores basados en la ubicación, se reduce la cantidad de trabajo que el navegador debe hacer para determinar la apariencia de un elemento específico en la página. Tanto en dispositivos móviles, como en el escritorio de computadoras, puede producir un mejoramiento en el rendimiento del sitio.

Un aspecto que debe tomarse muy en cuenta, es la facilidad o complejidad que puede resultar del OOCSS en un equipo de trabajo, ya que motivar a todo un equipo a adoptar OOCSS puede convertirse en un compromiso muy grande. Lo que convendría es aplicar OOCSS en un proyecto pequeño y decidir si vale la pena aplicarlo en proyectos más grandes en los que varias personas se encuentran involucradas.

Información Complementaria

De manera muy general, la escogencia de un entorno de desarrollo llega a tener matices muy personales, ya que esta es la herramienta que un desarrollador web utilizará la mayor parte del tiempo.

Aptana Studio es un IDE gratuito para el desarrollo de aplicaciones web que está basado en la plataforma Eclipse y soporta diferentes formatos de archivos, entre los que podemos mencionar: Javascript, HTML, CSS, ScriptDoc, XML, entre otros. Además, este IDE provee coloreo de código, chequeo de sintaxis, organización estructural del código fuente, depuración, autocompletitud integrada con el DOM (Document Object Model) y diferentes marcos de trabajo (Extjs, jQuery, Scriptaculous, Dojo etc.) entre una lista bastante grande de opciones, herramientas y perspectivas.

Una característica muy útil es que brinda la posibilidad de asociar un proyecto con una conexión FTP para subir y descargar archivos directamente en un servidor de producción.

Adicionalmente se provee de un administrador de “Plugins” para el soporte de código PHP, Ruby on Rails, integración con Subversion, CVS y Git, soporte para librerías como Adobe Spry, Adobe AIR, Yahoo YUI, entre otras.

A pesar de ser un entorno de desarrollo muy completo, al estar basado en Eclipse, esto lo convierte en un IDE bastante pesado y aplicable sólo para computadoras con ciertas características en su hardware.

Conozca más de Aptana Studio

A continuación un link de referencia que presenta ejemplos:

• Formulario interactivo que muestra resultados de la manipulación de z-index.
• Tutorial del z-index.

Ver artículo aquí.

Requiere PHP 4.3 o superior y MySQL 3 o superior.

Ha superado las pruebas de testing en Firefox y en IE 6.0 o superior.

El producto aún tiene en desarrollo varias tareas esenciales en la administración de bases de datos, por lo que la recomendación iría en tener esta herramienta como apoyo a otros editores de BD.

Ir al sitio oficial de TurboDbAdmin