viernes, 5 de noviembre de 2010

Módulos esenciales de Drupal

Joomla, WordPress y Drupal han estado en lucha constante desde que se concibieron, para ganarse el primer lugar del mejor CMS. Ninguno de los 3 es el mejor porque depende mucho de para que se quieran utilizar. 

En este post veremos los módulos que no pueden faltar en Drupal. Los primeros 3 son los principales (CCK, Views Panels), deberían venir por default en el paquete de instalación de Drupal.

CCK: Permite definir Content Types y Fields dentro de los Content Types, es como si pudieramos crear nuevas tablas en la Base de Datos, a través del CMS.

Views: A partir de cualquier Nodo (Content Types y Fields) mediante el módulo Views, podemos crear vistas para esos datos en innúmerables formatos.

Panels: Brinda una forma más sencilla de establecer el Layout de los Nodos, Bloques y Views que creamos mediante el CMS.

Admin Menu: Pone todas las opciones de administración en un útil menú drop down, acelera muchísimo el trabajo del webmaster o system administrator.

PathAuto: Crea URLs amigables para los humanos como /blog/diciembre/12 y cualquier otro Token que se puede definir en la configuración.

WYSIWYG API + CKEditor + IMCE: Es esencial para los usuarios, los escritores, editores y demás usuarios del CMS, sin estos módulos, la labor de escritura y publicación en web se reduce de manera sustancial.


Filefield: Crea un CCK field para subir archivos en cualquier nodo.


ImageAPI + ImageCache + Imagefield: Para manipulación de imágenes en el CMS.

martes, 10 de agosto de 2010

Video tutoriales de C# con Visual Studio 2008

Recientemente he estado volviendo a aprender C# y .NET para quitar un poco el herrumbre. Me encontré con estos videos, luego de pasar varias horas buscando un tutorial que verdaderamente sea útil y muestre aplicaciones y casos de la vida real.

En los videos, el autor muestra como hacer una aplicacion en ASP y C# .NET, conectar a una base de datos SQL, crear un connection manager, crear la capa de datos, desplegar los datos mediante Gridview.

En el canal hay 9 lecciones completísimas, pero vamos a tener que navegar entre videos de clases de guitarra también :S. Por suerte el autor tituló muy bien cada lección y le puso al inicio de cada video, de qué se trata éste.


martes, 20 de julio de 2010

Firebug: una navaja suiza para desarrolladores

No me imagino un día normal de trabajo desarrollando páginas web sin Firebug, una extensión para desarrollo de Firefox que te permite hacer mil cosas con ayuda del navegador.

En la parte izquierda, podemos navegar por todo el DOM de la página. En la parte derecha, al posicionarnos sobre algún elemento del DOM (de la parte izquierda) aparecen 3 pestañas muy útiles: Style, Layout y DOM. En Style, podemos ver toda la cascada de estilo del elemento e incluso podemos modificar, agregar y eliminar estilos "en caliente" y verlos de inmediato reflejados en la página que estamos analizando en ése momento.

La dirección para conseguir el plugin de Firefox es ésta: https://addons.mozilla.org/es-ES/firefox/addon/1843/
Hacemos click en el botón verde "Añadir a Firefox" y una vez instalado, lo podemos desplegar en cualquier momento, en cualquier página, haciendo click en el ícono de una cucaracha abajo, a la derecha del navegador.

Otros plugins muy útiles para el desarrollador, y que uso a diario, de la mano de Firebug son:

ColorZilla es un color picker para obtener el color de cualquier pixel.

MeasureIt para medir en pixeles.

Web Developer toolbar ofrece varias opciones para trabajar, como deshabilitar el JavaScript, validar la página, deshabilitar las imágenes, mostrar sus rutas, dimensiones, etc.

HttpFox te da control sobre lo que realmente está cargando el navegador cuando ingresas a una página, haces click a un botón, formulario, etc.

Otra pestaña muy útil es "Net" en la parte derecha, nos permite ver todo el proceso de carga de la página: archivos .js, hojas de estilo .css y en general, todo lo que cargue el navegador para poder desplegar la página, y además les pone cronómetro a cada archivo por separado y en total.

martes, 6 de julio de 2010

Drop Down Menu, jQuery y CSS

Primero el producto terminado.

La librería jquery la pueden agregar al javascript de ésta forma en la sección <head>:
 
<script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
 

Primero un poco de HTML de ejemplo:

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Luego el CSS:


ul.topnav {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    float: left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: #002244;
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.topnav li a:hover{
    background: #003366;
}
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 42px;
    float: left;
    background: #333333 url("drop_down_arrow.gif") 0 10px no-repeat;
}
ul.topnav li span.subhover {cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: both;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    float: left;
    width: 145px;
    background: #333;
    padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background: #222;
}




Finalmente un poco de jQuery:


$(document).ready(function(){

    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

    $("ul.topnav li span").click(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});

miércoles, 23 de junio de 2010

Configurar PHP, Apache y MySql en Windows

O cómo crear un servidor WAMP (Windows, Apache, MySql, PHP), que es lo mismo.

Para ir en orden, lo primero que necesitamos es una máquina Windows, y asegurarnos de tener apagado el servicio de http del IIS (si está instalado) o que no esté en el puerto 80.

Luego necesitamos tener los 3 componentes, el Apache, PHP y MySql. El paquete completo de PHP para Windows lo podemos conseguir en el sitio oficial php.net en ésta dirección http://windows.php.net/download/ Escoja alguna de las versiones VC6. Las VC9 son para IIS.

Siempre traten de configurar la más reciente version, y sólo retrocedan si hay problemas de compatibilidad.

El Apache se consigue en el sitio de Apache Foundation en ésta dirección http://httpd.apache.org/download.cgi

Para MySql, se puede bajar un instalador del MySql Community Server aquí http://dev.mysql.com/downloads/mysql/

Podemos instalar MySql y Apache en cualquier órden, pero instalemos PHP después del Apache Server.

Una vez que tenemos el zip de PHP, descomprímalo y coloquelo en el lugar de su elección. Yo siempre lo instalo en C: para tener paths cortos y evitar comportamientos no deseados con los espacios. Es bueno agregar el path donde está php-win.exe en PATH de las variables de entorno.

PHP viene con un php.ini preconfigurado para production o development. En ésta parte del archivo:

; Directory in which the loadable extensions (modules) reside.
; http://php.net/extension-dir
; extension_dir = "./"
; On windows:
; extension_dir = "ext"

cambiamos extension_dir a apuntar a la dirección de la carpeta ext, que es donde se encuentran algunas extensiones de PHP, algunas de las cuales vamos a habilitar para poder usar MySql en PHP.

Más abajo encontramos esto:

; Windows Extensions
; Note that ODBC support is built in, so no dll is needed for it.
; Note that many DLL files are located in the extensions/ (PHP 4) ext/ (PHP 5)
; extension folders as well as the separate PECL DLL download (PHP 5).
; Be sure to appropriately set the extension_dir directive.

A partir de aquí, se puede descomentar las líneas de las extensiones que necesitemos. Para habilitar MySql descomentamos

;extension=php_mysql.dll

o

;extension=php_pdo_mysql.dll

dependiendo de las necesidades que tengamos, por ejemplo, Magento y Drupal necesitan php_pdo_mysql.dll

Con esto terminamos por ahora la configuración de PHP.

Para configurar Apache, buscamos el archivo httpd.conf dentro de la carpeta conf, este es el archivo de configuración de Apache.

Después de todas las declaraciones de módulos LoadModule, escribimos ésto:

LoadModule php5_module "c:/php/php5apache2.dll" Para Apache 2

o

LoadModule php5_module "c:/php/php5apache2_2.dll" Para Apache 2.2


Y más abajo, después de las declaraciones AddType, escribimos ésto

AddType application/x-httpd-php .php

para agregar php a los archivos que Apache es capáz de manejar.

Con ésto, ya deberíamos tener lista nuestra configuración, ahora le damos stop y luego start al apache monitor en el tray icon de apache para cargar la nueva configuración y probamos si en localhost podemos ver php. Yo lo que hago siempre es poner un archivo php en el root de localhost, con este simple código:

<?php phpinfo(); ?>

Luego lo abrimos en un browser, y debería aparecer la tabla morada con información detallada de la configuración de PHP. En especial buscamos que existan los títulos mysql y pdo_mysql que nos indica que las extensiones cargaron correctamente, y que podemos usar funciones mysql en nuestros scripts php.

martes, 22 de junio de 2010

Cómo cargar contenido mediante AJAX con YUI3?

La librería YUI ofrece una gama amplia de posibilidades para cargar contenido dinámicamente mediante llamados de http. La clase IO es la encargada de manejar toda la parte de transacciones en YUI.

Primero, ponemos tags html básicas e incluimos YUI3 a nuestra página html:

<html
>
<head>
<script type="text/javascript" charset="utf-8"
src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"
>
</script>

luego incorporamos nuestro código a la página, mediante otro llamada JavaScript y cerramos el head:


<script type="text/javascript" charset="utf-8"
src="io.js"
>
</script>
</head>


El resto de la página es un solo un div que va a funcionar de contenedor para el contenido que vamos a invocar mediante AJAX:


<body>
<div class="container"></div>
</body>
</html>


Ahora en nuestro archivo io.js llamamos la función principal YUI.use:

YUI().use("node", "io-base", function(Y) {
//TODO
)};

Vamos a usar las librerías node y io-base.

Seguidamente, dentro de la función use, asignamos el url del recurso a una variable uri, y construimos 2 funciones, una que se va a ejecutar cuando la transacción finalice, y otra que se ejecuta en caso de error, complete y failure:

var uri = "data.xml";

function complete(id, o, args) {
var id = id;
var args = args;
var data = o.responseText;
var container = Y.one(".container");
container.set("innerHTML", data);
};
function failure(id, o, args) {
alert("Transaction Failed");
};

Los parámetros que YUI ofrece a ésta función son id, o y args, que pueden ser cambiados a cualquier otro nombre siempre y cuando se respete la nueva nomenclatura y el orden, por ejemplo, pueden ser llamados complete(transaccion, objeto, argumentos). El primer parámetro id, es el id de la transacción, el segundo es el objeto http que contiene todos los datos del cuerpo del llamado. El último parámetro es un objeto utilitario que podemos usar para enviar otros parámetros a la función.

Para nuestro ejemplo, el objeto o es el que nos interesa, pues contiene la propiedad responseText, que es una representación textual del llamado http. Finalmente escogemos un nodo con Y.one para meter el dato mediante set("innerHTML").

Finalmente, asignamos los eventos complete y failure a las funciones antes declaradas, y hacemos el llamado AJAX:

Y.on('io:complete', complete, Y);
Y.on('io:failure', failure, Y);

var request = Y.io(uri);

Al llamarse la función Y.io con la dirección del recurso (uri) como parámetro, es cuando se hace el llamado http.