La programación de los formularios no es tán distinta de la de las tablas, en la parte en que nos comunicamos con la base de datos con el objeto database, por ejemplo. Es más que todo la organización que ya llevemos en nuestro componente la que ayudará a que sepamos como armar la lógica del formulario.

En el componente que desarrollé segui la lógica siguiente:

URL: index2.php?option=com_reservations&act=cars&task=edit&id=Mazda+323

Paso 1: Crear una función que seleccione al elemento seleccionado y ejecute la función para mostrar el formulario:

function editCar( $car_model, $option, $act, $task )
{
    global $database;
    if ( $car_model != NULL ) {
        $query = “SELECT * FROM #__reservations_cars WHERE car_model = ‘$car_model’”;
        $database->setQuery( $query );
        $car = $database->loadObjectList();
        $car = $car[0];
    }
    $query = “SELECT id_cartype, cartype_description_en FROM #__reservations_cars_type ORDER BY cartype_description_en ASC”;
    $database->setQuery( $query );
    $car_types = $database->loadObjectList();
    Reservations_HTML::editCars( $car, $car_types, $option, $act, $task );
}


Paso 2: Mostrar el formulario con los datos enviados:

function editCars( $car, $car_types, $option, $act )
{
    mosCommonHTML::loadOverlib();
    ?>
    <script type = "text/javascript">
        function submitbutton(pressbutton) {
            var form = document.adminForm;
            if (pressbutton == 'cancel') {
                submitform( pressbutton );
                return;
            }
            if (form.car_model.value == "") {
                alert("Car Information must have a Car Model");
                return;
            } else {
                submitform( pressbutton );
            }
        }
    </script>
    <table class = "adminheading">
        <tr>
            <th class = "edit">
                Car Repository: <small><?php echo ($car == NULL) ? "New" : "Edit"; ?></small>
            </th>
        </tr>
    </table>
    <br />
    <form action = "index2.php" enctype = "multipart/form-data" method = "post" name = "adminForm">
        <?php if ( $car->car_model ) { ?>
        <input name = "old_car_model" type = "hidden" value = "<?php echo $car->car_model; ?>" />
        <?php } ?>
        <table class = "adminform">
            <tr>
                <th colspan = "4">Item Details</th>
            </tr>
            <tr>
                <td width = "75">Car Model:</td>
                <td width = "250"><input class = "text_area" maxlength = "128" name = "car_model" size = "30" type = "text" <?php if ( $car->car_model ) { ?>value = "<?php echo $car->car_model; ?>"<?php } ?> /></td>
                <td width = "75">Car Type:</td>
                <td>
                    <select class = "inputbox" name = "car_type">
                    <?php
                        for ($i = 0, $n = count( $car_types ); $i < $n; $i++) {
                            $cartype = &$car_types[$i];
                            mosMakeHtmlSafe($cartype);
                        ?><option <?php if ( $car->car_type == $cartype->id_cartype ) { ?> selected = “selected” <?php } ?> value = “<?php echo $cartype->id_cartype; ?>”><?php echo $cartype->id_cartype ?></option><?php
                        }
                    ?>
                </select>
            </td>
        </tr>
        <tr>
            <td>Car Published:</td>
            <td>
                <select class = “inputbox” name = “car_published”>
                    <option <?php if ( $car->car_published === 1 ) { ?> selected = “selected” <?php } ?> value = “1″>Published</option>
                    <option <?php if ( $car->car_published === 0 ) { ?> selected = “selected” <?php } ?> value = “0″>Unpublished</option>
                </select>
            </td>
            <td>Car Preview:</td>
            <td>
                <input type = “file” name = “car_preview” />
            </td>
        </tr>
        <tr>
            <td colspan = “4″>
                Car Description (required): <br /><br />
                <?php
                    // parameters : areaname, content, hidden field, width, height, rows, cols
                    editorArea( ‘car_description’, $car->car_description, ‘car_description’, ‘100%;’, ‘350′, ‘75′, ‘20′ ) ;
                ?>
            </td>
        </tr>
    </table>
    <input name = “option” type = “hidden” value = “<?php echo $option;?>” />
    <input name = “act” type = “hidden” value = “<?php echo $act;?>” />
    <input name = “task” type = “hidden” value = “” />
    <input name = “boxchecked” type = “hidden” value = “0″ />
    <input name = “hidemainmenu” type = “hidden” value = “0″>
    <input name = “<?php echo josSpoofValue(); ?>” type = “hidden” value = “1″ />
    </form>
    <?php
}


Es importante que los últimos elementos INPUT estén presentes, pues estos preservan el nombre del módulo, el ACT y el TASK pues todo va al archivo INDEX2.PHP vía POST. Los demás sigo sin comprender cual es su cometido, pero es mejor dejarlo.

Asi mismo, tambien es posible controlar y validar en la misma página del formulario que los datos ingresados son correctos. Dependiendo del botón presionado, así la función actuará. En este ejemplo la función JavaScript submitbutton permite controlar el envio de los datos a la siguiente función y validar que un valor dentro de los datos requeridos, haya sido ingresado.

Paso 3: La función receptora se encarga de tratar los datos ingresados y de redireccionar a donde es debido.

Como podemos darnos cuenta, es bastante sencillo construir un componente de Joomla!. En la siguiente parte del tutorial, veremos el manejo de parámetros nativo en Joomla!, que aunque no implemente en el componente que cree, si es posible de utilizar para crear áreas de configuración con una cuantas líneas del archivo de instalación.

Artículos Relacionados

• Conectandonos a la Base de Datos y trabajar con tablas en el administrador de Joomla! 1.0.x
• Recibiendo parámetros en Joomla! y creando una Toolbar
• Creación de componentes para Joomla! 1.0.x

Mucho del potencial real de las compañías .COM (o de negocios permanentes para la Web) está en la cantidad de usuarios que hacen uso de sus servicios. Yahoo! fué uno de los sobrevivientes de la primera burbuja tecnológica y ahora, es seducida a venderse a Microsoft, que está hasta cierto punto desesperada de recuperar su prestigio en todos los frentes posibles.

Me llama poderosamente la atención la sutileza de Microsoft de ofrecerle a los directivos de Yahoo! comprarles su empresa y también la actitud de los mismos directivos de rechazar semejante oferta asumiendo que el precio de la compañía estaba siendo subvalorado. ¿Es realmente esa la razón fundamental de que Yahoo! rechazará la compra de Microsoft o hay otros intereses detras de ello?

Yahoo! es poseedorea de muchos servicios realmente exitos. Posiblemente su buque insignia de servicios sea Flickr (la mayor comunidad de usuarios aficionados a la fotografía). Obviamente Microsoft no solamente está interesado en adquirir este servicio sino la gama completa de los servicios propiedad e Yahoo!.

Pero recordemos que Microsoft tiene servicios similares. Que objetivo tendría comprar estas herramientas de Yahoo!.

Muchas de las especulaciones apuntan a que Microsoft realmente lo que quiere es hacer frente al gigante de Internet: Google. El modelo de negocios de Google ha sido uno de los más influyentes en esta segunda era de las empresas tecnológicas y es la punta de lanza en el sector de Internet. Google ha adquirido un gran renombre en Internet y ha utilizado este nombre para introducir servicios que poco a poco están peleando con los productos tradicionales de Microsoft.

Los ejemplos de esto son: Gmail y sobre todo Google Docs; fuerte competidor de la suite ofimática de Microsoft; Microsoft Office. Google siempre a lanzados servicios sencillos y sobre todo con un potencial de expansión tremendo a sus usuarios de forma casi gratuita (algunas versiones o características si han sido de pago), y eso pone en seria desventaja a Microsoft que se ve atacada por casi todos los frentes.

Pero volviendo al punto de interés de este escrito. Cual es el verdadero interes de Microsoft de engullir a Yahoo!. Creo que hay varios intereses de por medio:

• Aumentar su presencia de usuarios en Internet; usuarios que pueden ser transformados en una multitud de usuarios de sus otros servicios.
• Hacer mayor frente a Google, que claramente ha retado a Microsoft (aunque la compra de Yahoo! no creará una super fuerza en contra del buscador, si creará un muy fuerte rival).
• Mejorar sus servicios en base a la experiencia del portal. Creo que muchos servicios de Yahoo! desaparecerían de tajo, fusionados con los servicios de Microsoft. Otros como Flickr (sobre todo Flickr) se reestrucurarían a la manera de los de Redmond.

Del otro lado, tenemos a Yahoo! que aunque esta acosada por las grandes pérdidas que ha acumulado y por la presión de los accionistas a vender, se niega a tal acción y dando varias patadas de ahogado, que aunque son en base a la argumentación de rescatar y aumentar su valorización tendrán, a mi parecer, un transfondo mayor.

Por que Yahoo! a integrado el sistema de publicidad de Google en período de pruebas. ¿Acaso Google está asesorando a los directivos de Yahoo! ?. He de recordar que esto es mera especulación y no hay base para tal respuesta. Lo sierto es que Microsoft está interesado en comprar Yahoo! y sea como sea quiere hacerlo, aún pasando por los mismos directivos de Microsoft y comprando las acciones de los inversores.

Mi comclusión final es que Microsoft terminará comprando a Yahoo! por más allá de la oferta inicial. Podemos ver un gran cambio en la estructura de Internet en donde se enfrentarán Google y Microsoft como grandes rivales. Talvez el siguiente paso sea que Google adquiera a Microsoft. El futuro se encargará de decidirlo.

Artículos Relacionados

• Artículos Relacionados

El estándar de programación del módulo nos indica que tengamos un archivo donde se concentre mayormente la parte lógica y otro donde se encuentre el diseño de la aplicación. En este caso, las funciones de obtención de datos las hacemos en el archivo admin.*.php y las de visualización de los datos en el archivo admin.*.html.php.

global $database, $mainframe, $mosConfig_list_limit;
 
$limit = intval( $mainframe->getUserStateFromRequest( “viewlistlimit”, ‘limit’, $mosConfig_list_limit ) );
$limitstart = intval( $mainframe->getUserStateFromRequest( “view{$option}limitstart”, ‘limitstart’, 0 ) );
 
$query = “SELECT COUNT(*) FROM #__reservations_cars”;
$database->setQuery( $query );
$total = $database->loadResult();
 
require_once( $GLOBALS['mosConfig_absolute_path'] . ‘/administrator/includes/pageNavigation.php’ );
 
$pageNav = new mosPageNav( $total, $limitstart, $limit );
$query = “SELECT A.*, B.`id_cartype` FROM #__reservations_cars AS A, #__reservations_cars_type AS B WHERE A.`car_type` = B.`id_cartype` ORDER BY A.`car_model` ASC, B.`cartype_description_en` ASC”;
$database->setQuery( $query, $pageNav->limitstart, $pageNav->limit );
$rows = $database->loadObjectList();
 
if ($database->getErrorNum()) {
    echo $database->stderr();
    return false;
}
Reservations_HTML::CarsList( $option, $act, $rows, $pageNav );

El objeto encargado de conectarnos a la base de datos es $database. Dentro de la función es recomendable que incluyamos las variables $mainframe y $mosConfig_list_limit (para la paginación).

En el ejemplo la segunda línea de la función establece el valor del límite de resultados, y la tercera línea la posición inicial de los registros en la tabla. En Joomla! el funcionamiento del objeto $database hace que primero mandemos la consulta y que mediante funciones carguemos los resultados dependiendo de nuestras necesidades.

Como cuando instalamos Joomla! en nuestro sitio, podemos colocarle un prefijo a la base de datos. Cuando enviamos el query a la función cada nombre de la tabla debe ir con (#__) y la función lo cambiará al verdadero prefijo de la base de datos. En este ejemplo cargamos el arreglo de resultados con la función $database->loadResult();. Siempre es importante verificar errores, en especial en la fase de pruebas con la función $database->getErrorNum().

Creando la tabla de resultados:

Como el ejemplo era algo extenso, he decidido resumirlo en los puntos más importantes.

• La variable $rows de la función anterior debe ser un parámetro por referencia.
• Habrá que incluir la variable $my y $mosConfig_live_site (path del sitio en ruta absoluta);
• Hay que cargar el overLib();

function CarsList( $option, $act, &$rows, &$pageNav )
{
    global $my, $mosConfig_live_site;
    mosCommonHTML::loadOverlib();

Creamos la tabla con los estilos de la hoja de estilo del administrador (para obtenerlos, buscamos un componente ya creado y mediante Firebug vamos obteniendolos). La tabla contenedora es de clase adminlist y se utilizan elementos TH para los cabezales de la tabla.

Es importante que cada línea de la tabla tenga un ID. El ciclo para agregar cada línea de la tabla comienza asi:

$k = 0;
for ($i = 0, $n = count( $rows ); $i < $n; $i++) {
    $row = &$rows[$i];
    mosMakeHtmlSafe($row);
    // --> Codigo <--
    $k = 1 - $k;
}

Cada fila del arreglo $row es un objeto cuyas propiedades son los nombres de los campos de la tabla. La ultima línea del código del ciclo es bastante interesante: convierte el valor de la variable $k a 0 y 1 alternativamente, con el objetivo de hacer el efecto cebra en la tabla.

Toda la tabla debe estar dentro de un formulario HTML y al final de la tabla, colocamos los elementos necesarios para hacer la paginación.

Esto es todo en este nuevo artículo de la serie para la creación de componentes en Joomla!. En la cuarta entrega especificaremos detalles sobre la creación de los formularios y el modo de interacción con los botones del toolbar.

Artículos Relacionados

• Creando los Formularios de un Componente en Joomla!
• Recibiendo parámetros en Joomla! y creando una Toolbar
• Creación de componentes para Joomla! 1.0.x

Lo que me ha gustado más de este editor es que permite utilizar diferentes formatos al HTML tradicional, como Bbcode o la propia sintáxis de Wiki. Posiblemente no pueda reemplazar a otros editores más completos y sobre todo, destinados a usuarios con pocos conocimientos de HTML, pero seguro que para muchos en algunos proyectos sencillos de editores de contenidos resultará bastante útil.

El editor requiere de jQuery como librería de soporte. Su modo de puesta en funcionamiento es bastante sencillo:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>

Tambíen necesitamos un archivo de Settings o en su defecto un arreglo con esa información. Claro, no podemos olvidar incluir las hojas de estilos y asignamos al textarea que queremos asignarle la propiedad de ser un editor enriquecido:

<script type="text/javascript">
    $(document).ready(function() {
        $("#markItUp").markItUp(mySettings);
   });
</script>
...
<textarea id="markItUp"></textarea>


Y claro, se puede personalizar y hacer mil cosas con la librería. El nombre de este componente es MarkItUP.

Artículos Relacionados

• Ejecutando Ruby en el interprete de JavaScript
• Agregando nuevas funcionabilidades a nuestras hojas de estilo con MoreCSS
• pi.comet: Una simple librería para Comet

Versiones de la API:

A fecha de publicación de este artículo existía una API para Python y Ruby. La versión para PHP aún estaba en beta. El servicio no es gratuito y cada uso de la API nos costará 1 crédito con algunas variantes según las opciones que utilicemos.

Principios de funcionamiento con la API de Bluga.net:

• La API está basada en XML y su comunicación es através del objeto base de AJAX: XMLHttpRequest. Desde la misma página de Bluga advierten que si se trata de utilizar por un método propio no funcionará por las restricciones del uso de JavaScript en otros servidores (XSS).
• Hay que registrarse y obtener un API-Key para usar el servicio.
• La respuesta será dada en formato XML de haber tenido éxito en la transacción y en texto plano en caso de falla.

Una llamada estándar será parecida al siguiente ejemplo:

<webthumb>
    <apikey>apikey here</apikey>
    <request>
        <url>webthumb.bluga.net</url>
        <outputType>png</outputType>
        <width>1280</width>
        <height>1024</height>
        <fullthumb>1</fullthumb>
        <customThumbnail width="120" height="120" />
        <effect>mirror</effect>
        <delay>5</delay>
        <excerpt>
            <x>400</x>
            <y>400</y>
            <height>200</height>
            <width>200</width>
        </excerpt>
        <notify>http://webthumb.bluga.net/notify.php</notify>
    </request>
</webthumb>

Donde la respuesta también estaría dada mediante un objeto XML de la siguiente manera:

<webthumb>
    <jobStatus>
        <status id='wt47c5fcba65776' submissionTime='2008-02-27 17:13:46' browserWidth='1024' browserHeight='768' inProcess='1' ></status>
        <status id='wt47c5f71c37c3a' submissionTime='2008-02-27 16:49:48' browserWidth='1024' browserHeight='768' pickup='http://webthumb.bluga.net/data/3a/7c/c3/wt47c5f71c37c3a.zip' completionTime='2008-02-27 16:50:01'>Complete</status>
        <status id='wt47c5f71c3b6d2' submissionTime='2008-02-27 16:49:48' browserWidth='1280' browserHeight='1024' pickup='http://webthumb.bluga.net/data/d2/b6/c3/wt47c5f71c3b6d2.zip' completionTime='2008-02-27 16:50:06'>Complete</status>
    </jobStatus>
</webthumb>

Artículos Relacionados

• Artículos Relacionados

Ahora Josh Gross creador de AjaxAIM ha creado una interesante manera de visualizar información de conexiones entre diferentes objetos utilizando JSON, Mootols y por supuesto, el objeto CANVAS.

Entre los diferentes usos de esta bonita y elegante librería basada en Mootols está la creación de grafos en JavaScript o algunos otros, como hizo notar mi compañero de trabajo: crear garabatos y líneas difíciles de relacionar a simple vista.

Requerimientos:

Este script requiere tres librerías. Estás serían CanvasText (que probee el soporte de texto), ExCanvas (para soporte del elemento canvas en Internet Explorer) y la librería de MooTools con soporte para Class, Class.Extras, Element, Element.Event. Element.Dimensions y Json.Remote.

Documentación:

En la manera más simple, la creación del objeto se produce con la siguiente llamada a la función:

new MooWheel(dataArray, canvasElement);

Ahora, si tenemos que recibir los datos mediante el uso de AJAX, podemos utilizar este otro procedimiento:

new MooWheel(false, canvasElement, {
json: {
url: 'http://your.json.url/request.php',
method: 'get',
send: {
'some_variable': 'some_data'
}
}
});

Esto hace una llamada asíncrona y el formato de respuesta es JSON. La documentación completa de las demás funciones está en la página del componente.

Artículos Relacionados

• pi.comet: Una simple librería para Comet


$act = mosGetParam($_REQUEST, 'act', array(0));
$task = mosGetParam($_REQUEST, 'task');
$cid = mosGetParam($_REQUEST, 'cid', array(0));


En Joomla! generalmente se suele colocar el código de arriba desde el principio del script en el archivo admin.*.php ó *.php y una estructura de control SWITCH para dirigir el flujo de procedimiento según la función que se busca.

Entre las funciones más sencillas para obtener el valor de un parámetro enviado, solemos utilizar la función mosGetParam que recibe el arreglo de valores $_REQUEST y el valor del nombre de la llave. El tercer parámetro es opcional e indica que valor por defecto a asignarle a la variable en caso no se encuentra el valor del parámetro deseado.

Creación del Toolbar en Joomla!

Los archivos que intervienen en la creación de la toolbar son toolbar.*.php y toolbar.*.html.php aunque realmente si seguimos los estándares de desarrollo de un componente en Joomla!, veremos que realmente debe ser el segundo archivo el que imprima cada botón.


mosMenuBar::startTable();
mosMenuBar::archiveList();
mosMenuBar::spacer();
mosMenuBar::publishList();
mosMenuBar::spacer();
mosMenuBar::unpublishList();
mosMenuBar::spacer();
mosMenuBar::customX( 'movesect', 'move.png', 'move_f2.png', 'Move' );
mosMenuBar::spacer();
mosMenuBar::customX( 'copy', 'copy.png', 'copy_f2.png', 'Copy' );
mosMenuBar::spacer();
mosMenuBar::trash();
mosMenuBar::spacer();
mosMenuBar::editListX( 'editA' );
mosMenuBar::spacer();
mosMenuBar::addNewX();
mosMenuBar::spacer();
mosMenuBar::help( 'screen.content' );
mosMenuBar::endTable();


Toda toolbar se inicia con la función mosMenuBar::startTable(); y finaliza con mosMenuBar::endTable();. Hay varias funciones ya definidas como las que siguen en el anterior ejemplo que dibujan el boton de archivar, publicar, despublicar, eliminar, agregar y ayuda. Cada botón se separa con un mosMenuBar::spacer();.

También puede agregarse nuevos botones mediante la función mosMenuBar::customX donde los parámetros son: nombre del comando, imagen de icono, imagen de icono desabilitado y etiqueta.

Cada botón generalmente ejecuta una petición mediante el refresco de la página y esos eventos pueden ser capturados mediante el uso de la función mosGetParam($_REQUEST, ‘task’);. Es muy interesante la creación de componentes para muchos sistemas como Joomla! ó WordPress. En el próximo capítulo de la serie veremos el código para conectarnos a la base de datos del sistema y crear nuestra tabla de resultados con paginación y algunas funciones del toolbar.

Artículos Relacionados

• Creando los Formularios de un Componente en Joomla!
• Conectandonos a la Base de Datos y trabajar con tablas en el administrador de Joomla! 1.0.x
• Creación de componentes para Joomla! 1.0.x

En el terreno de la virtualización para la plataforma Mac OS existen dos grandes soluciones: Parallels y VMware Fusion . Pero, por que comentamos virtualización en este tema; es sencillo: la única alternativa viable para utilizar Internet Explorer en Mac OS X es virtualizar. Y cuando hablo de virtualizar me refiero a todo el sistema operativo de Microsoft: Windows XP o Windows Vista.

Ahora, el proceso es mucho más sencillo. Recientemente me ha tocado maquetar un sitio completo y definitivamente era muy dificil el obviar a Internet Explorer dentro del testeo, especialmente por lo grandes males de los que sabemos que padece el explorador y su “manera” de maquetar las páginas.

Arriba, la prueba de que la virtualización es llevada. En este caso, las pruebas se realizaron en un MacBook con Intel Core 2 Duro a 2.20 GHz y 1 GB de RAM. Mi apreciación personal para este equipo es que para correr Windows Vista virtualizado se necesitan al menos 2 GB de RAM para que el rendimiento de los sistemas operativo no se vea tan drasticamente lento. Dado que Windows XP no demanda tantos recursos como Windows Vista, considero que con la maquina virtual asignada con 256 MB de RAM es más que suficiente.

Creo que esta es la mejor manera de poder hacer uso de estas herramientas que solo están disponibles en el sistema operativo de Microsoft. Esperaria que el rendimiento de los programas de virtualización siga mejorando conforme el tiempo y que de poder ser posible que en un futuro no muy lejano pudiese prescindirse de alguna manera de la carga del sistema operativo huesped; aunque claro, ya existen herramientas como WINE que aunque tienen un gran desempeño de virtualización, realmente no terminan de convencerme.

Después de la prueba y con la máquina virtual apagada, el sistema comienza a recuperarse y estoy empezando a sentir que necesita ser reiniciado, por que será ?

Artículos Relacionados

• Artículos Relacionados

He visto varias cosas interesantes pero estos chicos realmente me sorprenden. Directo del departamento de investigación del blog Ajaxian, llega la noticia de HotRuby que es una implementación del lenguaje Ruby en JavaScript.

El modo de funcionamiento de bastante peculiar pues parece que para hacer esta interesante combinación HotRuby “toma el resultado de YAMV y lo interpreta para luega procesarlo en formato JSON”:

# Ruby
VM::InstructionSequence.compile(cgi['src'], "src", 1,OutputCompileOption).to_a.to_json


Y claro, el codigo en lenguaje Ruby lo puedes embeber en la página HTML con la etiqueta SCRIPT:

<script type = "text/ruby">
    class Pi
        def initialize
            @a = 355.0
        end
        def calc
            b = 113.0
            return @a / b
        end
        PI = 'PI is about'
    end
    puts Pi::PI
    puts Pi.new.calc
</script>
<body onload = "prettyPrint(); new HotRuby().runFromScriptTag('/compileRuby.cgi')">

El codigo resultante puede interactuar “tan bien” con el entorno de DOM que de hecho puede soportar Flash. Los chicos creadores del proyecto han puesto a disposición un excelente ejemplo del funcionamiento de Ruby, JavaScript y Flash. Yo me pregunto, que tan práctico será hacer este tipo de combinación entre lenguajes. Aunque seguro, no podré colocar los datos de conexión a mi base de datos.

Artículos Relacionados

• markItUp: Editor de texto ligero
• Agregando nuevas funcionabilidades a nuestras hojas de estilo con MoreCSS
• pi.comet: Una simple librería para Comet

MoreCSS es un proyecto de origen alemán llamado Yello Green que como se describe anteriomente permite agregar soporte de propiedades CSS que no están en el estándar, pero que nos ayudarán a nosotros como maquetadores a mejorar nuestros hojas de estilo y el diseño en general de la página que estemos trabajando sin recurrir a otras tantas opciones de terceros (generalmente en lenguaje JavaScript).

Instalación y uso

El soporte de estas propiedades a través de MoreCSS está dado por un JavaScript muy al estilo del framework Mootools (es decir, no se entiende nada en la versión empaquetada pero es muy liviana. El métod de uso es muy sencillo:

<link href = "path/to/your/MoreCSS/stylesheet.css" rel = "MoreCSS" />
<script href = "MoreCSS.js" type = "text/javascript"></script>


Como comentan en el sitio del proyecto, es necesario que usted agregue la hoja de estilo de MoreCSS antes de agregar el archivo de la libreria (el archivo JS) y lo optimo será colocarlos antes de cualquier inclusión de elementos.

En muchos casos, el uso de las nuevas propiedades es similar a las del estándard CSS, salvo algunas limitantes por ser un desarrollo muy reciente. También se comenta que para un mejor uso, se utilizen elementos identificados mediante un ID.

Me gusta mucho la propuesta de aumentar las capacidades de CSS por que realmente muchos de los comportamientos de determinados sitios son en base a la propuesta de diseño y que mejor que la hoja de estilo para definir este comportamiento.

Actualmente se soportan más de veinte nuevas características y la lista sigue sumando. Les reomiendo que le hechen un ojo a la librería y puedan hacer sus propias pruebas.

Artículos Relacionados

• markItUp: Editor de texto ligero
• Ejecutando Ruby en el interprete de JavaScript
• pi.comet: Una simple librería para Comet