Menú e interfaz Mac Os con jQuery

iconDock es un plugin de jQuery que simula el “efecto dock” de Mac Os.

Demos:

• http://icon.cat/software/iconDock/0.8b/dock.html

También hay una serie de extensiones que simulan la interfaz del sistema operativo leopard:

• Demo interfaz leopard

• Web con el tutorial

mParallax para Mootools

Este plugin permite crear una superposición de capas que simulan un paisaje con profundidad y además con movimiento cuando pasamos el cursor sobre él. Sólo con javascript (mootools y el citado plugin mParallax).
La descripción según podemos leer en la web del proyecto:

mParallax is an adaptation for MooTools framework of jParallax whose its author, Stephen Band, describes it like "jParallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Con ie7 y firefox funciona, pero en mi versión de ie6 da problemas.

En estos enlaces se puede ver funcionando, es muy interesante:

• Demo con imágenes

• Demo con texto

Titanium

Appcelerator Titanium es una plataforma de código abierto que sirve para desarrollar rich applications de escritorio usando tecnologóas cómo html, css, javascript, flash o silverlight.

Aquí tenemos una pequeña introducción:

Se puede descargar desde la web del proyecto http://titaniumapp.com/download

Optimización de la velocidad de carga

Siempre he tenido curiosidad porque tarda más o menos tiempo en cargar una web. Aquí tenéis una pequeña explicación de donde se inverte el tiempo y cómo se realizan las peticiones.

Menos del 10-20% del tiempo de carga de una página se invierte en la descarga del html. El resto, un 80-90% del tiempo es necesario para la carga de componentes de la página (imágenes, scripts, css..).

Para optimizar el tiempo de carga, las principales cosas que tenemos que tener en cuenta son:

• La especificación HTTP/1.1 define que los navegadores no pueden descarga más de dos componentes en paralelo por hostname. Por ejemplo, si se sirven imágenes desde múltiples hostnames, podemos obtener más de 2 descargas a la vez (en paralelo).

• En cambio con la descarga de scripts no ocurre igual, el navegador no empieza otras descargas, incluso si utilizan diferentes hostnames. Esto es debido a que en muchas ocasiones, los navegadores bloquean las peticiones HTTP adicionales mientras se están descargando los scripts.

• Aunque la página esté en caché y no haya demasiada actividad de descarga, se producen intervalos de tiempos en los que no se realiza descarga, en vez de eso, el tiempo se gasta por el navegador procesando el parseo del html, javasctipt y el css, además de la carga de los componentes desde su caché.

En esta web hay más información, sobre las best practices (las mejores prácticas):

• http://developer.yahoo.com/performance/rules.html

Un add-on para firefox que analiza páginas, te dice porque son lentas y te dice cómo mejorarlo. (necesita firebug):

• http://developer.yahoo.com/yslow/

Mapeo relacional de objetos php

ORM (Object relational mapping o mapeo relacional de objetos) es una técnica utilizada en algunos lenguajes de programación para convertir datos entre el sistema de tipos utilizado en un lenguaje de programación orientado a objetos y el utilizado en una base de datos relacional. En la práctica esto crea una base de datos orientada a objetos virtual, sobre la base de datos relacional. Esto posibilita el uso de las características propias de la programación orientada a objetos (básicamente herencia y polimorfismo). Un 35% de tiempo de desarrollo de software está dedicado al mapeo entre objeto y su correspondiente relación. Hay paquetes comerciales y de uso libre disponibles que desarrollan el mapeo relacional de objetos, aunque algunos programadores prefieren crear sus propias herramientas ORM.

Proyectos en php:

• phpORM

• Doctrine

• Propel

• EZPDO

• DABL

• Data Shuffler

• Outlet

• Coughphp

Generador imágenes dinámicas (Codeigniter)

<?php 

class Imagenes extends Controller {



     function Imagenes()

     {

         parent::Controller();    

    }

    function getimage(){

        

        

        $this->load->database();

        $db_request = $this->db->query('SELECT * FROM imagenes WHERE id_imagen='.$this->uri->segment(3));

        $fila = $db_request->row();

        $fichero_imagen = $fila->nombre_imagen;

        $path = './documentos-imagenes/';

        if(file_exists($path.$fichero_imagen)){

            $config['image_library'] = 'gd2';

            $config['source_image']    = './documentos-imagenes/'.$fichero_imagen;

            $config['maintain_ratio'] = FALSE;

            $default = array('width', 'height');

            $array= $this->uri->uri_to_assoc(4, $default);

            $config['width'] = $array['width'];

            $config['height']    = $array['height'];

            $config['dynamic_output'] = TRUE;

            $config['quality'] = 90; //calidad de 0 a 100%            

            $this->load->library('image_lib', $config);            

            if (!$this->image_lib->resize())

            {

                echo $this->image_lib->display_errors();

            }

        }

    }

}

    

/* End of file imagenes.php */

/* Location: ./system/application/controllers/imagenes.php */

Ahora podemos generar imágenes, por ejemplo en cualquier otra página php:

$this->load->helper('url');  // Utilizamos el url helper

echo '<img src="'.site_url("imagenes/getimage/1/width/90/height/100").'" />';

echo '<img src="'.site_url("imagenes/getimage/2/width/100/height/150").'" />';

Le pasamos el identificador y el tamaño.  Podemos también añadirle más parámetros y opciones.

De forma sencilla y rápida podemos tener cualquier imagen, adaptada al tamaño que queramos, en cualquier sitio de la web.

 

Carrusel con jQuery y php

Archivo que muestra el carrusel


<?php

include_once 'jcarousel_functions.php';

$jcarousel_visible = 3;

?>

<!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" xml:lang="en-us">

<head>

<title>jCarousel Examples</title>

<!--

jQuery library

-->


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



<!--

jCarousel business javascript

-->

<script type="text/javascript" src="lib/jcarousel.lite.js"></script>




<script type="text/javascript">

/* <![CDATA[ */

jQuery(document).ready(function() {

$(".carousel").jCarouselLite({

auto: 2000, // cada dos segundos cambia

speed: 800, // velocidad

btnNext: ".next", //indicar botón anterior

btnPrev: ".prev", //indicar botón siguiente

scroll: <?php echo $jcarousel_visible;?>, //número de items que pasa cada vez

visible: <?php echo $jcarousel_visible;?> //número de items visibles

});






});

/* ]]> */

</script>

</head>

<body>

<div id="wrap">

<h1>jCarousel</h1>


<h2>Carrosel con jQuery</h2>



<h3>Ejemplo de implementación con php</h3>






<div class="carousel">

<ul class="jcarousel-list">



<?php



$jcarousel_items = jcarousel_getItems();



foreach ($jcarousel_items as $item) {


echo '<li><p>'.$item['title'].'</p><a href="'.htmlspecialchars($item['src']).'"><img src="'.htmlspecialchars($item['src']).'" width="113" height="125" alt="'.htmlspecialchars($item['title']).'" /></a></li>';

//Es importante especificar en la etiqueta img los atributos height y width para el correcto funcionamiento

}

echo '<li></li>';

?>

</ul>

</div>

<button class="prev">&lt;&lt;</button>


<button class="next">&gt;&gt;</button>







</div>

</body>

</html>


Fichero con las funciones


<?php

$jcarousel_items = array(
array(
'title' => 'item 1',
'src' => 'images/image1.jpg',
),

array(
'title' => 'item 2',
'src' => 'images/image2.jpg',
),
array(
'title' => 'item 3',
'src' => 'images/image3.jpg',
),
array(
'title' => 'item 4',
'src' => 'images/image4.jpg',
),
array(
'title' => 'item 5',
'src' => 'images/image5.jpg',
),

);

/**
* This function returns the number items. Typically, this
* would fetch it from a database (SELECT COUNT(*) FROM items) or
* from a directory.
*/
function jcarousel_countItems()
{
global $jcarousel_items;

return count($jcarousel_items);
}

/**
* This function returns the items. Typically, this
* would fetch it from a database (SELECT * FROM items LIMIT $limit OFFSET $offset) or
* from a directory.
*/
function jcarousel_getItems($limit = null, $offset = null)
{
global $jcarousel_items;

// Copy items over
$return = $jcarousel_items;

if ($offset !== null) {
$return = array_slice($return, $offset);
}

if ($limit !== null) {
$return = array_slice($return, 0, $limit);
}

return $return;
}

?>



Más información aquí

Descargar ejemplo

Menú desplegable con jQuery

<html>

<head>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

//<[[CDATA[

$(document).ready(function(){

//añadir funcion para la clase submenu al clickear

$(".submenu").click(function(){

// slow, normal, fast o el tiempo en milisegundos

$(this).next().slideToggle("slow");

});

//Para que aparezca escondido desde un principio

$(".submenu").next().hide();

//Cambiar el href para que no navegue a la página

$(".submenu").attr("href","javascript:void(0);");

});

//]]>

</script>

</head>

<body>

<ul>

<li><a class="submenu" href="/seccion1/">Seccion 1</a>

<ul style="background-color: #888FFF;">

<li><a href="#">enlace 1</a></li>

<li><a href="#">enlace 2</a></li>

<li><a href="#">enlace 3</a></li>

</ul>

</li>

<li><a class="submenu" href="/seccion2/">Seccion 2</a>

<ul style="background-color: #888FFF;">

<li><a href="#">enlace 1</a></li>

<li><a href="#">enlace 2</a></li>

<li><a href="#">enlace 3</a></li>

</ul>

</li>

</ul>

</body>



</html>

Pincha aquí para ver el menú funcionando

introducción a codeigniter I

Por ejemplo, vamos a crear una home de inicio.
Acceder al directorio para ver si está corriendo bien el framework.
Vamos a modificar el mensaje de bienvenida un poquillo. La ruta del fichero es system/application/controllers/welcome.php, lo renombramos a home.php y su contenido será el siguiente:


class Home extends Controller {

function Home()
{

parent::Controller();
}

function index()
{
$this->load->view('home_view');
}
}

/* End of file home.php */
/* Location: ./system/application/controllers/home.php */

Para editar la vista nos vamos a system/application/views/welcome.php y renombramos el fichero a home_view.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

<title>Welcome to CodeofWorld</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>



<h1>Welcome to CodeofWorld!</h1>



<p>Esto es una prueba de iniciación a codeigniter ;)</p>

</body>

</html>

Ahora hay que configurar el controlador inicial:

system/application/config/routes.php

$route['default_controller'] = "home";

y accedemos a ver los resultados: