Agregar marcas en Google Maps con un formulario HTML (+ jQuery + XML + PHP)

Podemos sacarle mucho provecho a Google Maps. Una característica interesante son los marcadores ó marcas (makers) que podemos ubicar sobre los mapas. Este pequeño artículo te explica, de manera general, como podemos hacer para agregar marcas haciendo uso de un formulario HTML sobre el mismo mapa. Usaremos código PHP para guardar estos marcadores en un archivo XML. Cuando se carge nuevamente el mapa cargará las marcas guardadas en el archivo XML. Haremos uso de jQuery para el manejo de JavaScript sin complicaciones.

Ver Artículo Completo ››

Cómo integrar slideshow en tu tema de WordPress

Si tienes WordPress como CMS entonces este tutorial será de tu interés. Smooth Gallery es un slideshow (en nuestro idioma, una especie de presentación ó diapositivas de imágenes junto con texto de forma interactiva) hecho con JavaScript y que podemos usarlo en nuestras aplicaciones web con tan solo unas cuantas líneas de código y configuraciones. En CatsWhoCode le han dado una aplicación interesante, pues en su página inicial se muestra un slideshow de las imágenes de los artículos recientes del blog, con el titulo y un extracto de este (si le echamos un vistazo tendremos una idea de lo que se quiere lograr).

Ahora CatsWhoCode explica como aplicar este slideshow en WordPress paso a paso. 

Slideshow en WordPress fácilmente

Tutorial | How to : Integrate a slideshow in your wordpress theme

Barras de progreso con jQuery, JavaScript, CSS y Photoshop

Barras de progreso con jQuery

jQuery.UI ProgressBar Widget

Progress Bar 1

Barra de progreso con jQuery y PHP

Progress Bar 2

Plugin jqUploader para jQuery

Progress Bar 3

Plugin para jQuery

Progress Bar 4

Ver Artículo Completo ››

Comparando utilidades de compresión JavaScript

En vista de que en el desarrollo de aplicaciones web se hecha mano de JavaScript, es necesario poder aligerar en gran medida el peso de nuestros códigos JavaScript para una rápida carga de nuestro aplicaciones en el navegador.

Y en realidad la mesa está servida, por un lado por que existen varios frameworks JavaScript que nos facilitan escribir código en este lenguaje con unas cuantas líneas; y por otro lado, pues tenemos a nuestra alcance una gran variedad de herramientas para comprimir nuestros scripts, incluyendo a los frameworks.

Puesto que estos frameworks no son conocidos por ser ligeros en cuanto a KB, pero podemos  aligerar su peso dependiendo del compresor usado y el tipo de compresión. A este respecto The JavaScript CompressorRater nos puede ayudar ya que utiliza algunos de los compresores (JSMin, Dojo shrinksafe, Packer, the YUI Compressor) y frameworks (Dojo, YUI, Ext JS, jQuery, base2, Scriptaculous) más populares para comparar cuál de ellos nos combiene.

Un dato interesante de este test es que la librería YUI es la que más se puede comprimir de todas sus rivales (hasta 6.7% de compresión) usando Packer (tipo de compresión: shrink, privateVars) como compresor. Echen un vistazo ustedes mismos.

Enlace | The JavaScript CompressorRater

Crear barra de navegación con ActionScript 3.0 [video]

Interesante video tutorial de como crear paso a paso una barra de navegación (Navigation Bar) con ActionScript 3.0.

Si les gusta el diseño interactivo con Adobe Flash, puede ver en este blog Flash Script Videos, donde se hace una recopilación diaria de videos-tutoriales de flash.

Además, cabe resaltar, que el autor del video tiene recopilaciones de video-tutoriales sobre Flash, Photoshop y Dreamweaver, como para tenerlo a la mano.

Barra de calificación con estrellas (rating star) con JavaScript-YUI

Richard Healy de Gamma Tan ha creado un widget de calificación que utiliza YUI como soporte.  La versión 0.1.1 esta disponible para descargar. Es un widget estándar que puedes incorporar en tus formularios sin ningún problema. Puedes ver una demostración de su funcionamiento.

 Rating Widget JavaScript

UrlRewriter.NET: Reescribir URL en ASP .NET (URL's amigables)

En un artículo anterior hablamos acerca de los enlaces ó URLs amigables que nos es más que convertir esos enlaces dinámicos generados por el lenguaje de servidor que usamos a enlaces estáticas. En aquella ocasión echamos mano del archivo .htaccess para configurar las urls en nuestro servidor Apache. ¿Y que hay de las aplicaciones web hechas en ASP .NET?

UrlRewriter.Net es un componente open-source, ligero y altamente configurable para ASP .NET 1.1 y 2.0. Este componente proporciona características para reescritura de urls similares a los módulos de Apache mod_rewrite configurados en el archivo .htaccess.

Por si no quedo claro. Gracias a que podemos reescribir los urls de nuestro sitio web mediante UrlRewriter.Net podemos hacer esto:

URL antes de reescribirla
http://localhost:2661/URLRewrite2/DynamicPage.aspx?MyTitleId=1

Después de reescribir la url

http://localhost:2661/URLRewrite2/Article/Asp-Net-website-paths-1.aspx

Ha eso se le llama también urls amigables ó urls usables (relacionada con usabilidad).

¿Cómo usar el UrlRewriter.Net?

Pues eso es lo mejor, puede ver este post URL Rewriting with URLRewriter.Net Simplest Way que muestra paso a paso la forma de implementar este componente en nuestro sitio web si trabajamos con ASP .NET. Puedes descargar un ejemplo también.

Enlaces | Descargar UrlRewriter.Net

Detectar dispositivo móvil con PHP

Diferenciar entre dispositivos móviles y navegadores de escritorio con PHP

Un dilema a la hora de desarrollar contenidos para móviles es cómo diferenciar entre dispositivos móviles y navegadores de escritorio. La manera adecuada de hacer esto es usando una base de datos de todos los dispositivos móviles que existen, tales como DeviceAtlas ó WURFL (acá se explica cómo). Pero existen algunos inconvenientes.

Menos mal que siempre en el desarrollo de aplicaciones existen soluciones alternas (claro no tan fiables en este caso) que cubren esta necesidad.

El siguiente código PHP detecta el dispositivo móvil que está solicitando una petición a nuestra web y de acuerdo a ello mostrará un contenido más compacto y ligero.

El código se basa en una lista de los más conocidos navegadores móviles (alrededor de 90) y algunos casos especiales para Opera Mini, estándares W3C y algunos navegadores para Windows.

He probado este código con un navegador de escritorio y 2 navegadores móviles distintos. El resultado ha sido favorable.

<?php
$mobile_browser = '0';

//$_SERVER['HTTP_USER_AGENT'] -> el agente de usuario que está accediendo a la página.
//preg_match -> Realizar una comparación de expresión regular

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i',strtolower($_SERVER['HTTP_USER_AGENT']))){
$mobile_browser++;
}

//$_SERVER['HTTP_ACCEPT'] -> Indica los tipos MIME que el cliente puede recibir.
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or
((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){
$mobile_browser++;
}

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda','xda-');

//buscar agentes en el array de agentes
if(in_array($mobile_ua,$mobile_agents)){
$mobile_browser++;
}

//$_SERVER['ALL_HTTP'] -> Todas las cabeceras HTTP
//strpos -> Primera aparicion de una cadena dentro de otra
if(strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
$mobile_browser++;
}
if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
$mobile_browser=0;
}

if($mobile_browser>0){
// Mostrar contenido para dispositivos móviles
// Estos pueden ser más ligeros: un titulo, resumen y algunos enlaces.
// Aca puede redirigir a la ruta donde este el contenido para moviles
// Por ejemplo: http://miweb.com/movil ó http://movil.miweb.com
echo 'hola navegador cell phone';
}else{
// Contenido que se puede apreciar en navegadores de escritorio
echo 'hola navegador normal';
}
?>

Este código lo subí a http://ribosomatic.com/ejemplos/ejemplo.php y pueden probarlo con su dispositivo móvil, el mensaje deberá ser: hola navegador cell phone.

Colección de tutoriales, tips y recursos para PHP

PHPInformación que todo desarrollador-programador en PHP debe tener a la mano. Interesante artículos sobre como implementar PHP agregando ciertas funcionalidades en nuestras aplicaciones web, además algunos recursos a tener en cuenta y algunos recordatorios-tips.

Tutoriales

Ver Artículo Completo ››

Herramientas para dar formato y resaltar sintáxis de tus códigos fuente

Una lista de algunas herramientas (servicios ó librerías) para darle un formato adecuado (tabulación, eliminar espacios en blanco, etc) y resaltar la sintaxis (de diversos colores) de nuestros códigos fuente de diversos lenguajes de programación.

Resaltado de color y formato para código fuente

Quick Highlighter puede darle formato a código escrito en 85 lenguajes de programación, tales como PHP, Ruby, HTML, JavaScript, Perl, Python, Smarty, XML, CSS, Delphi, C++ y muchos más. Esta herramienta da formato a tu código fuente y subraya las palabras reservadas propias del lenguaje seleccionado.

PrettyPrinter le da formato al código fuente, similiar a indent (etiqueta html). Reconoce PHP, Java, C++, C, Perl, JavaScript y CSS.

Ver Artículo Completo ››

Navegación

Categorias

Archivos