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.

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.

 

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

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.

Informació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

• Crear una galería de fotos usando CakePHP y Flickr

  Junto con la ayuda de JavaScript para efectos (lightbox).  Si deseas implementar una simple y rápida galería en tu página web entonces este tutorial es lo que necesitas.

• Subir videos a Youtube

  Se explica como hechar mano de la API de Google y el framework Zend para subir videos a YouTube.

• Enviando datos de un formulario con CURL

  Interesante artículo de como enviar datos de un formulario con CURL.

• Guardar imágenes en MySQL con PHP

  Algo que quizás se nos pasa por la cabeza, es justamente como guardar imágenes en una base de datos MySQL. Acá se explica como hacer esto con PHP.

• Primeros pasos con OpenID y PHP

  OpenID es una manera de minizar el proceso de registrarse en diferentes sitios web. Acá se explica como usar OpenID y como desarrollar, paso a paso, formularios gestionados por OpenID.

• Dibujar imágenes y gráficos con PHP

  GD es una poderosa librería para la manipulación de imágenes. Aquí se explica como dibujar imágenes ó gráficos dinamicamente con PHP y la librería GD.

• Mostrar imágenes almacenadas en MySQL

  Un anterior tutorial explicaba como almacenar imágenes en MySQL, ahora acá se explica como mostrar dichas imágenes en nuestro sitio web.

• Pagos por PayPal usando IPN

  Aprende como trabajar con Pagos PayPal usando el IPN (Internet payment notification) de PayPal.

• Generar PDF con PHP

  Se explica como generar con PHP documentos PDFs. Esto es útil si un blogger desea mostrar una versión de impresión de sus artículos, u otros usos relacionados.

• Entender el funcionamiento de las Sesiones

  La implementación de Sesiones con PHP involucra mucha seguridad. Lectura obligatoria para los principiantes en PHP.

Ver Artículo Completo ››

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.

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 ››

Algunos sitios web dentro de sus artículos integran un cuadro con una imagen y una pequeña descripción en la parte inferior de esta. Esto es ventajoso por que un usuario normal por lo general lo primero que mira no es texto sino contenido gráfico, y que mejor si este está acompañado de una pequeña descripción de lo que trata. Así se sentirá impulsado a leer el artículo completo. Además es una buena práctica SEO, pues estos textos cercanos a las imagenes sirven para los motores de búsqueda de imágenes.

¿Cómo lograrlo?

Con unas simple líneas CSS y HTML podemos lograr añadir textos descriptivos debajo de las imágenes.

Primero el código de estilos, dentro de las etiquetas <head>:

 <style type="text/css">
	.picture { 
		background-color: #F9F9F9;
		border: 1px solid #CCCCCC; padding: 3px;
		font: 11px/1.4em Arial, sans-serif; 
	}
	.picture img { 
		border: 1px solid #CCCCCC;
		vertical-align:middle; 
		margin-bottom: 3px;
	}
	.right { 
		margin: 0.5em 0pt 0.5em 0.8em; 
		float:right; 
	}
	.left { 
		margin: 0.5em 0.8em 0.5em 0; 
		float:left;
	}
</style>

Ahora dentro del <body> de nuestro documentos html:

<div class="picture left" style="width:220px;"> 
<img src="marte.jpeg" alt="Planeta Marte" width="210" height="210" /> <br />
Marte, apodado a veces como el Planeta Rojo, es el cuarto planeta del Sistema Solar.
</div>

Por supuesto luego de esas líneas puede venir en contenido completo del artículo ó tema que trata la página.

Podemos colocar la imagen a la izquierda ó derecha, como gustemos y se vea mejor. He aquí un ejemplo. ¿Verdad que se ve mas atractiva una página web de esta forma?

Creo que el título lo dice todo. Esta librería permite leer y manipular el contenido de una hoja de cálculo hecha con Microsoft Excel. Vamos directo al grano y veamos un ejemplo. Usaremos Microsoft Office Excel 2007 para la hoja de cálculo, ósea el archivo tendrá la extensión xlsx. También usaremos la versión 5.2.x de PHP.

1. Descargue la libreria PHPExcel

Descargamos la ultima versión. Después de descomprimirla ubicamos la carpeta Clases y la movemos a una carpeta donde pondremos nuestro ejemplo para este caso se llamará phpexcel_ejemplo. De tal manera que quede así: \ruta_servidor\phpexcel_ejemplo\Clases.

2. Creamos un documentos de Excel

La hoja de cálculo tendrá el siguiente formato: (descargar archivo de ejemplo). La ubicamos en la carpeta phpexcel_ejemplo.

3. Creamos la interfaz web

Mediante HTML creamos una formulario para el ingreso de los valores, y también escribimos código para usar la librería PHPExcel. Este archio lo guardamos con el nombre de index.php en la carpeta phpexcel_ejemplo.

 <?php
/** Incluir la ruta **/
set_include_path(get_include_path() . PATH_SEPARATOR . './Classes/');

/** Clases necesarias */
require_once('PHPExcel.php');
require_once('PHPExcel/Reader/Excel2007.php');

// Variables de la página
$_VIEWDATA = array(
	'v_precioTotal'	=> 0,
	'v_descuento' => 0,
	'v_precioFinal'	=> 0
);

// Petición de cálculo?
if (isset($_REQUEST['boton_calcular'])) {
	// Cargando la hoja de cálculo
	$objReader = new PHPExcel_Reader_Excel2007();
	$objPHPExcel = $objReader->load("calculo.xlsx");
	
	// Asignar hoja de calculo activa
	$objPHPExcel->setActiveSheetIndex(0);
	
	// Asignar data
	$objPHPExcel->getActiveSheet()->setCellValue('automatico', $_REQUEST['transmision_Automatica']);
	$objPHPExcel->getActiveSheet()->setCellValue('cuero', $_REQUEST['asientos_Cuero']);
	$objPHPExcel->getActiveSheet()->setCellValue('suspension', $_REQUEST['suspension']);
	
	// Calculos
	$_VIEWDATA['v_precioTotal'] = $objPHPExcel->getActiveSheet()->getCell('total')->getCalculatedValue();
	$_VIEWDATA['v_descuento'] = $objPHPExcel->getActiveSheet()->getCell('descuento')->getCalculatedValue();
	$_VIEWDATA['v_precioFinal'] = $objPHPExcel->getActiveSheet()->getCell('final')->getCalculatedValue();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo</title>
</head>

<body>
    <form id="formulario" method="post" name="formulario" action="index.php">
        <table>
            <tr>
                <th>Transmisi&oacute;n autom&aacute;tica :</th>
                <td>
                    <select id="transmision_Automatica" name="transmision_Automatica">
                    	<?php if(isset($_REQUEST['transmision_Automatica'])) { ?>
                    	<option value="<?php echo $_REQUEST['transmision_Automatica']; ?>" selected="selected"><?php echo $_REQUEST['transmision_Automatica']; ?></option>
                    	<?php } ?>
                        <option value="No">No</option>
                        <option value="Si">Si</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>Asientos de cuero:</th>
                <td>
                    <select id="asientos_Cuero" name="asientos_Cuero">
                    	<?php if(isset($_REQUEST['asientos_Cuero'])) { ?>
                    	<option value="<?php echo $_REQUEST['asientos_Cuero']; ?>" selected="selected"><?php echo $_REQUEST['asientos_Cuero']; ?></option>
                    	<?php } ?>
                        <option value="No">No</option>
                        <option value="Si">Si</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>Suspensi&oacute;n:</th>
                <td>
                    <select id="suspension" name="suspension">
                    	<?php if(isset($_REQUEST['suspension'])) { ?>
                    	<option value="<?php echo $_REQUEST['suspension']; ?>" selected="selected"><?php echo $_REQUEST['suspension']; ?></option>
                    	<?php } ?>
                        <option value="No">No</option>
                        <option value="Si">Si</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>&nbsp;</th>
                <td>
                    <input id="boton_calcular" name="boton_calcular" type="submit" value="Calcular" />
                </td>
            </tr>
        </table>
    </form>
    <?php if (isset($_REQUEST['boton_calcular'])) { ?>
    
    <h2>Detalles del Precio</h2>
    <p>Basado en tus preferencias, el precio de tu carro será S/. <?php echo number_format($_VIEWDATA['v_precioFinal'], 2); ?> Nuevos Soles.</p>
    <table>
        <tr>
            <th>Precio Total:</th>
            <td><?php echo number_format($_VIEWDATA['v_precioTotal'], 2); ?> Nuevos Soles</td>
        </tr>
        <tr>
            <th>Descuento:</th>
            <td><?php echo number_format($_VIEWDATA['v_descuento'] * 100, 2); ?>%</td>
        </tr>
        <tr>
        	<td colspan="2"><hr noshade="noshade"></hr>
        </tr>
        <tr>
            <th>Total Final:</th>
            <td><?php echo number_format($_VIEWDATA['v_precioFinal'], 2); ?> Nuevos Soles</td>
        </tr>
    </table>
    <p><a href="index.php">Calcular nuevo precio</a></p>
    
    <?php } ?>
</body>
</html>

4. A probar ...!

Vamos al navegador web y escribirmos http://localhost/phpexcel_ejemplo/index.php y tendremos una interfaz con los datos que obtenemos de la hoja de cálculo.

Seguramente se nos ocurrirá muchas cosas en la cual emplear está interesante librería. ¿Y que tal si la combinamos con AJAX?. La librería PHPExcel contiene documentación detallada para usarla correctamente, además de muchos otros ejemplos.

Encontre en Slideshare esta interesante presentación de PHPBarcelona Conference, donde se dan consejos bien útiles para la optimización de aplicaciones hechas con PHP desde lado del cliente. Por ejemplo un aspecto interesante es la regla del 20/80 que es el tiempo de carga de la página principal de una web. 20% corresponde al lado del servidor (entregar index.html) y el 80% al cliente (cargar css, javascript, flash, imagenes, etc). Es en ese 80% donde se debe dar la optimización. Además se explica el uso de Firebug para ayudarnos a corregir dichos problemas.

Les dejo el enlace para que ustedes mismos puedan beneficiarse de esta diapositiva.

En Deziner Folio se ha realizado un lista de 7 editores de texto para Drupal, aunque puede también nos sirve para nuestros proyectos personalizados.

YUI Rich Text Editor

UI control que reemplaza los controles textarea de los documentos HTML conviertiendo en un editor de contenido potente.

TinyMCE

TinyMCE es uno de los más recomendados editor de texto. Es totalmente configurable y personalizable, fácil de integrar con nuestro CMS (Content Management Systems) favorito. Su configuración avanzada hace que este editor se acerque casi a los editores de texto de escritorio, por su facilidad de uso.

FCKeditor

Es otro de los más conocidos y recomendados editor de contenido. Pese a que es bien potente no necesita ningún tipo de instalación en la máquina cliente.

HtmlArea

Una interesante herramienta para el edición de contenido. 

WYMeditor

WYMeditor es un editor hecho con XHTML/JavaScript.

widgEditor

widgEditor es un editor de contenido simple. Fácil de instalar y personalizar.

NicEdit

NicEdit es un editor de contenido creado con JavaScript/AJAX, permite la fácil edición de contenido.