Desarrolla mas rapido con Zen Conding


Todos sabemos la importancia de agilizar nuestro trabajo y mas cuando uno se encuentra de manera independiente y tienes que estar desarrollando proyectos de una manera ágil y rápida, Un buen metodo para esto es usar los beneficios que nos otorgan algunos snippets y bundles que son una buena manera de acelerar nuestra escritura y nuestro código al empezar un proyecto web, ¿Pero que les parece si llevamos esto un poco mas lejos y transformamos una compleja estructura html en algo tan simple con un selector de CSS? gracias al proyecto llamado Zen Coding agilizaremos nuestra manera de escribir nuestras etiquetas de una manera eficaz y rápida sin tener que invertir tanto tiempo en escritura en etiquetas que muchas veces también son las que siempre usamos en nuestros proyectos de paginas web.

¿Que es Zen Coding?

Zen Coding es un plugin para tu editor de texto web (Notepad++,Dreamweaver, Textmate, NetBeans, Coda y muchos mas) este plugin nos permite generar HTML/XML/XSL de una forma eficaz y rápida.

¿Como me ayudara?

Zend Coding nos ayudara a escribir HTML haciendo que no sea necesario abrir y cerrar tags tecleando todos los carácteres esto mediante el uso de abreviaciones cortas, aquí les mostrare unos ejemplos en cuanto al uso de este fabuloso plugin.
Imagina que la estructura de tu nuevo proyecto se ve así:
  1. <div id="header">
  2.     <ul id="menu">
  3.     <li><a href=""></a></li>
  4.     <li><a href=""></a></li>
  5.     <li><a href=""></a></li>
  6.     <li><a href=""></a></li>
  7.   </ul>
  8. </div>
Con ZenCoding podemos utilizar estas abreviaciones y tener nuestro codigo rapido y eficaz:
  1. div#header>ul#menu>li*4>a
O imagina que quieres crear algo asi:
  1. <div id="header"></div>
  2. <div id="content"></div>
  3. <div id="footer"></div>
Con tan solo crear esta linea y apretar Expand Abbreviation en tu menu commands lo optienes agilmente, (tambien puedes elegir los atajos que por default vienen como (Ctrl+,) para el Expand abbreviation o en tu editor adaptarlos a tus necesidades en las preferencias de keyword shortcuts)
  1. div#header+div#content+div#footer

¿Como Funciona?

Zen Coding funciona expandiendo abreviaciónes y transformando los selectores que digitamos en codigo Html, aqui te muestros a continuacion las abreviaturas mas usadas.
  • > : Crea un elemento padre con hijo (div#header>ul#menu>li).
  • + : Crea dos elementos juntos: (div#header+div#content+div#footer).
  • * : Crea elementos multiples (ul#menu>li*4>a)..
  • $* : Crea elementos numerados (ul>li.menu$*5).
Espero que esta herramienta les sea de gran ayuda como lo ha sido para mi.

Para mayor información el proyecto se encuentra alojado en Google Code y dispone de una gran cantidad de plugins para una buena gama de editores web, elige el que uses y empieza a optimizar la manera en que haces tu codigo aqui
publicó No hay comentarios:
Etiquetas:

jQuery Mobile: Framework UI JavaScript


jQuery Mobile es un framework de desarrollo UI, que nos permite escribir una aplicación web para móviles, completamente funcional, sin necesidad de escribir una sola línea de código JavaScript. A pesar de haber sido recientemente lanzado, ya podemos ver que se convertirá en un gran framework de desarrollo.
Este es el primero de dos artículos, donde veremos rápidamente las características de este framework, incluyendo las páginas básicas, barras de navegación, controles de formularios y efectos de transición...

jQuery Mobile

jQuery Mobile es un framework de interfaz de usuario de desarrollo de web que nos permite desarrollar aplicaciones web para celulares o móviles que trabajen en cualquier Smartphone y Tablet.
El jQuery Mobile framework se basa en el core de jQuery y proporciona una serie de herramientas, incluyendo el manejo del DOM de HTML y XML, el control de evento, la comunicación con el servidor a través de Ajax, así como los efectos de animación y de imágenes para páginas web.
El framework jQuery Mobile en sí se descarga de manera independiente, adicionalmente hay que descargar alrededor de 12KB (la versión comprimida) del core de jQuery. Como el el resto del framework de jQuery, jQuery Mobile es gratis, bajo una doble licencia (MIT y GPL).
En estos momentos, jQuery Mobile se encuentra en fase de desarrollo, la versión Alpha 2 (v1.0a2) se lanzó hace unos meses. El código, al estar en alpha, esta sujeto a cambios. Sin embargo, el framework actual es bastante sólido. Con un impresionante conjunto de componentes disponibles, jQuery Mobile promete convertirse en un gran framework y conjunto de herramientas para el desarrollo de aplicaciones web para móviles.

Características de jQuery Mobile

Las características básicas de jQuery Mobile incluyen:
  • Simplicidad: El framework es simple de usar. Podemos desarrollar páginas utilizando principalmente el marcado con un escaso código JavaScript.
  • Mejora progresiva: Mientras jQuery Mobile aprovecha las últimas tecnologías de HTML5, CSS3 y JavaScript, no todos los dispositivos móviles brindan este soporte. La filosofía de jQuery Mobile es soportar tanto la gama alta de los dispositivos, como aquellos que no soportan grandes funcionalidades. Se trata de proveer la mejor experiencia posible.
  • Accesibilidad: jQuery Mobile ha sido diseñado pensando en la accesibilidad. Brinda soporte a las aplicaciones de internet enriquecidas y accesibles “Accessible Rich Internet Applications” (WAI-ARIA)para ayudar a hacer páginas web más accesibles a los visitantes con discapacidad que usen tecnologías de asistencia.
  • Tamaño pequeño: El tamaño total de jQuery Mobile framework es relativamente pequeño. Unos 12kb de la biblioteca JavaScript, 6kb de CSS y algunos íconos.
  • Tematización: El framework también proporciona un sistema de temas que nos ofrece una aplicación a nuestro propio estilo.

Soporte de Navegador

Hemos recorrido un largo camino en el soporte de navegadores en dispositivos móviles, pero no todos los dispositivos móviles ofrecen soporte para HTML5, CSS3 y JavaScript. En este escenario es donde jQuery Mobile y sus características entran en juego.
Como se ha indicado, jQuery Mobile es compatible tanto con la gama alta como con la baja de dispositivos, incluyendo los que no soportan JavaScript. La Mejora Progresivaconsiste en los siguientes principios (según la wikipedia):
  • Todo el contenido básico debe ser accesible a todos los browsers
  • Toda la funcionalidad básica debe ser accesible a todos los browsers
  • Escasos, el margen de beneficio semántico contiene todo el contenido
  • Disposición realzada es proporcionado por el CSS externamente ligado
  • Comportamiento realzado es proporcionado por Javascript discreto, externamente ligado
  • Las preferencias del browser del usuario final son respetadas.
Todo el contenido básico debe mostrarse (según el diseño) en dispositivos básicos, mientras que las plataformas más avanzadas y navegadores serán progresivamente mejorados con vinculaciones a CSS y JavaScript externos.
jQuery Mobile actualmente provee soporte a las siguientes plataformas móviles:
  • Apple® iOS: iPhone, iPod Touch, iPad (todas las versiones)
  • Android™: todos los equipos (todas las versiones)
  • Blackberry® Torch (versión 6)
  • Palm™ WebOS Pre, Pixi
  • Nokia® N900 (en progreso)
Podemos ver una matríz de compatibilidad de jQuery Mobile en su sitio web oficial.

Resumen de los componentes de UI

jQuery Mobile provee un soporte robusto a diferentes tipos de elementos de UI. En la siguiente imagen podemos ver un sumario de los componentes que actualmente son soportados.
Componentes de jQuery Mobile
Las barras de herramientas, botones, pestañas, menús pop-ups, diálogos, transiciones, paneles de edición y elementos de formulario son soportados. La mayoría, si no todos, los elementos de UI que necesitamos para nuestras aplicaciones web móviles son provistos.
En el siguiente artículo hablaremos sobre los métodos y eventos soportados por el framework, la estructura de una página de jQuery Mobile y su elementos.
publicó 2 comentarios:
Etiquetas: ,

Evitar cache con PHP :D



En esta ocasión veremos la forma de prevenir el cache de contenido con PHP. Normalmente cuando se accede a una página web, el browser guarda una copia para que en la siguiente ocasión que solicites esa página accedas de forma mas rápida.
Nuestro objetivo es evitar que el browser guarde el contenido de nuestras páginas, esto para que el usuario acceda siempre a la ultima información de nuestro web.
Evitando Cache
Para evitar cache de contenido, enviamos headers para los diferentes navegadores indicando que el contenido no se debe guardar en la memoria cache. Esto lo hacemos de la forma:
  1. header("Expires: Tue, 03 Jul 2001 06:00:00 GMT");
  2. header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  3. header("Cache-Control: no-store, no-cache, must-revalidate");
  4. header("Cache-Control: post-check=0, pre-check=0", false);
  5. header("Pragma: no-cache");
Ahora bien, en caso que vayamos a utilizar esta función repetidas veces es conveniente contertir este código en una función.
  1. // archivo: functions.php
  2. function noCache() {
  3.   header("Expires: Tue, 01 Jul 2001 06:00:00 GMT");
  4.   header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  5.   header("Cache-Control: no-store, no-cache, must-revalidate");
  6.   header("Cache-Control: post-check=0, pre-check=0", false);
  7.   header("Pragma: no-cache");
  8. }
Luego en cada página que deseamos prevenir cache, primero incluimos el archivo y luego llamamos a la función, esto se hace al inicio de toda página php.
  1. include("function.php");
  2. noCache();
  3. // codigo php
Como ven, con dos lineas adicionales a nuestras páginas podemos evitar el cache. Espero les sirva este tip que aunque es muy sencillo siempre hace falta.
publicó No hay comentarios:
Etiquetas: ,
Suscribirse a: Entradas (Atom)