Scrollorama es un plugin para jQuery que permite agregar algunos efectos al desplazarnos verticalmente a través de una página web. Podemos configurar efectos tales como:
Flying
Fading in/ out
Rotation
Zooming in / out
Parallax
Cómo se usa
Divide en bloques tu diseño entonces aplica este código:
$(document).ready(function() {
var scrollorama = $.scrollorama({
blocks:\'.scrollblock\'
});
});
Para...
Hace tiempo atrás mencionamos a jQuery Masonry, que organiza nuestros div ó contenedores en CSS de una forma mas atractivas sin dañar el diseño así se redimensione la página web. A este respecto esta imagen resume lo que hace:
Aqui un listado de algunos sitios web que hace uso de esta libreria para jQuery que nos sirven de inspiración para nosotros:
Cutets...
Esta aplicacion web consiste en un gestor de contenidos, es decir una estructura de soporte para crear y administrar contenidos. Esto fue la primera versión de una aplicacion web que desarrolle hace unos meses, que me parecio bien compartirla. Consiste en una interfaz back-end para crear documentos (por ejemplo un libro) donde insertaremos datos relacionados como el titulo, autor, fecha....
En vista de la necesidad de mostrar una serie de fotos de un viaje reciente y sin el deseo de subir mis fotos a Facebook ó al perfil de Hotmail, se me ocurrió desarrollar una útil galería de imágenes con la ayuda de PHP y con la extensión lightBox para jQuery. El objetivo...
Es un complemento, extensión ó plug-in (como quieran llamarle) para jQuery que consigue, con un par de configuraciones, que los tooltips (mensajes temporales cuando posamos puntero sobre vínculos) tenga el efecto similar a los de Facebook.
Por defecto el plug-in coloca los tooltips en el centro debajo del elemento que tenga el atributo title, aunque usando el parámetro gravity podemos colocarlo en la posición que deseemos. Incluso podemos usarlo en los formulario, cajas de texto ó agregar el contenido del tooltip dinamicamente.
Inspirandome en TeuxDeux un administrador de tareas sencillo pero eficaz que corre perfectamente sobre el navegador web (vía Ajaxian), se me ocurrió realizar uno con similar funcionalidad. En realidad no he probado esta herramienta, pues hay que registrarse (y no quize demorar) así que me guié del video relacionado:
Está es la primera parte, así que no verán algo muy sofisticado pero si funcionalmente básico.
Empecemos definiendo la estructura de la tabla en MySQL que guardará la información de las tareas del día:
CREATE TABLE IF NOT EXISTS `activity` ( `id` int(11) NOT NULL auto_increment, `fecha` datetime NOT NULL, `dia` tinyint(2) NOT NULL, `nrodiasemana` tinyint(2) NOT NULL, `mes` tinyint(2) NOT NULL, `descripcion` varchar(300) NOT NULL, `completado` tinyint(1) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=0;
Como apreciarán le damos mucha atención a los campos relacionados con la fecha: número del día, número del día dentro de la semana, número del mes y obviamente la fecha en sí en formato largo, aunque no usaremos la parte del tiempo.
En PHP creamos una clase con algunos propiedades y métodos que nos simplificará el código y podremos usar en otros procesos más adelante.
<?php class todo{
var $dayname = array('Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado');
var $monthname = array(1=>'Enero',2=>'Febrero',3=>'Marzo',4=>'Abril',5=>'Mayo',6=>'Junio',7=>'Julio',8=>'Agosto',9=>'Septiembre',10=>'Octubre',11=>'Noviembre',12=>'Diciembre');
function todo(){ //constructor }
function add_dates($date,$ndays){ if (preg_match("/[0-9]{1,2}\/[0-9]{1,2}\/([0-9][0-9]){1,2}/",$date)) list($day,$month,$year)=split("/", $date);
if (preg_match("/[0-9]{1,2}-[0-9]{1,2}-([0-9][0-9]){1,2}/",$date)) list($day,$month,$year)=split("-",$date);
private function conexion() { if(!($con=@mysql_connect("localhost","root",""))){ echo"Error al conectar a la base de datos"; exit(); } if (!@mysql_select_db("base_datos",$con)) { echo "Error al seleccionar la base de datos"; exit(); } return true; }
function add_event($field){ if($this->conexion()==true){ return mysql_query("INSERT INTO activity (fecha, dia, nrodiasemana, mes, descripcion, completado) VALUES ('".$field[0]."', ".$field[1].",".$field[2].",".$field[3].",'".$field[4]."',".$field[5].")"); } }
function show_event($fecha){ if($this->conexion()==true){ return mysql_query("SELECT * FROM activity WHERE fecha='".$fecha."'"); } } } ?>
Expliquemos brevemente:
Definimos dos array $dayname y $monthname que contienen como valores los nombres de los días y meses respectivamente en nuestro idioma.
La función add_dates suma ó resta n días a una fecha determinada. Recibe la fecha en formato cadena dia-mes-año y devuelve en formato fecha mes-dia-año.
La función conexión, se sobreentiende. Hay que cambiar los valores de base datos, usuario y password por los nuestros.
La función add_event, agrega un nuevo registro a la tabla activity donde se registran todas nuestras tareas. Recibe como parámetro un array con los valores a guardar.
La función show_event, muestra todas las tareas de una fecha específica.
Ahora vamos a los procesos independientes que harán uso de la clase creada. Uno de estos procesos es agregar un nueva tarea a la lista. El archivo addevent.php contiene lo siguiente:
if(isset($_POST['submit'])){ $fecha_texto = $_POST['date']; // fecha en formato texto if (preg_match("/[0-9]{1,2}-[0-9]{1,2}-([0-9][0-9]){1,2}/",$fecha_texto)) list($month,$day,$year)=split("-",$fecha_texto); // extraer valores para convertir a fecha Unix
Luego de crear una instancia de la clase, verificamos los valores recibidos por el método POST.
Debido a que la variable $_POST['date'] está en formato texto, debemos cambiarla a formato fecha propiamente dicho, y mediante mktime la creamos en formato UNIX.
Las variables siguientes extraen la parte de interes de la fecha UNIX. También la descripcion de la tarea contenida en la variable $_POST['descripcion'].
Usamos el método add_event para grabar los valores de las variables descritas. Si devuelve good todo está bien.
Otro proceso independiente que usaremos es showeventday.php que mostrará ó listará todos las tareas de una fecha específica.
<?php $fecha_texto = $_POST['date'];
if (preg_match("/[0-9]{1,2}-[0-9]{1,2}-([0-9][0-9]){1,2}/",$fecha_texto)) list($month,$day,$year)=split("-",$fecha_texto); // extraer valores para convertir a fecha Unix
La variable $_POST['date'] contiene la fecha en formato texto y, como en el proceso anterior, hay que pasarlo a formato fecha UNIX.
De la fecha UNIX obtenemos la fecha en formato año-mes-día.
Creamos una instancia de la clase y usamos el método show_event pasando como parámetro la fecha.
Usamos un bucle para desplegar las tareas del día si las hubiera.
De momento estos dos procesos usaremos. En la segunda parte veremos la modificación y eliminación de tareas, aunque estos dos procesos ya nos dan una idea de cómo poder hacerlo.
Vamos ahora a la parte de JavaScript. Esta lista de tareas hace uso de jQuery, así que este archivo functions.js contiene funciones y proceso que nos ayudan con las peticiones AJAX. Veamos:
$(document).ready(function(){
$("input[name^=newactivity]").keypress(function (e) { if(e.keyCode == 13){ var descripcion = $(this).attr('value'); // capturar indice de input newactivity var element_id = $("input[name^=newactivity]").index(this); //capturar fecha de campo oculto var date = $("#date\\["+(element_id+1)+"\\]").attr('value');
Antes que nada, en el archivo final index.php (que veremos má adelante), vamos a usar una caja de texto ó input tipo texto para agregar tareas a cada día de la semana. Así que para ello trabajamos con un array de cajas de texto con está sintaxis input name="newactivity[n]" donde n es el número de indice, lo mismo para un caja de texto oculta cuyo valor es la fecha del día.
Bien, lo primero que hace este archivo es verificar si se ha pulsado la tecla Enter (código 13). Captura el valor de la caja de texto donde se ha pulsado (que viene a ser a descripción de la tarea) y también su indice. Con este indice podemos ubicar la caja de texto oculta y también capturar su valor (es decir la fecha del día).
Estos dos valores son enviados mediante AJAX al proceso add_event.php (que explicamos antes) y guardará los datos en la tabla MySQL. Luego de esto llama a la función ShowEventDay que se conecta con el proceso showeventday.php para consultar las tareas del día especifico y los lista dentro del div que le corresponde al indice de campo de texto.
Parece un poco confuso pero el archivo final aclarará todo.
Finalmente, el archivo index.php contiene lo siguiente:
Mysql Ajax Table Editor es una aplicación web de código abierto que nos facilita la adición y edición de los datos de una tabla MySQL.
Además de los básicos añadir, editar, copiar, borrar y ver; los registros pueden ser paginados, ordenados (por columna), buscados (y búsqueda avanzada) y exportados a formato CSV.
Algo interesante es el poder unir varias tablas mediante el operador JOIN en las consultas SQL. También los nombres de las columnas pueden ser personalizados para una mejor presentación. Viene con 5 idiomas listo para usar.
En PHPClasses encontramos una clase en PHP de un paginador. Lista los datos de una tabla en MySQL y su paginador en la parte inferior, pero además permite realizar una búsqueda en la base de datos y paginar los resultados. Todo lo anterior mediante llamadas AJAX, sin tener que recargar la página.
La clase tiene muchas opciones de configuración como: páginas a mostrar, registros por página, establecer conexión, etc.
Usando la clase
<?php // this is only used in debugging, // use error_reporting(0) in production environment error_reporting(E_ALL || E_STRICT);
$query = "SELECT * FROM customers"; //$query = "SELECT * FROM customers WHERE id > 1";
// Number of records per page $recordsPerPage = 5; if(!empty($_GET['search'])){ $searchQuery = $_GET['search']; }
$pageId= intval($_GET['page']); if (empty($pageId)) { $pageId = 1; }else{ $pageId = intval($pageId); } // if you are testing it locally uncomment the following line // to see how it is going to look like //sleep(2);
$paginator = new Paginator($pageId,$recordsPerPage,$query,$conn);
$paginator->debug = FALSE;
// field(s) to search in // string or array of fields $paginator->fields = 'name'; //$paginator->fields = array('name','id');
$paginator->searchQuery = $searchQuery;
// call the core function that paginates $rows = $paginator->paginate(); ?>
VanadiumJS valida el contenido de las entradas de texto (input text y check) de los formularios HTML. Por eso decimos que trabaja de la lado-cliente, pues verifica los datos según una condición específica y luego se envia los datos al servidor. Es una herramienta trabaja con llamadas AJAX no-obstructivas haciendo uso de jQuery. Es una utilidad poderosa e intuitiva fácil de instalar y usar tal y como lo demuestran sus ejemplos de uso.
JobSpice, una interesante aplicación web hecha con jQuery y AJAX que nos ayuda a crear nuestro currículum u hoja de vida de manera sencilla e interactiva:
Mediante añadir bloques ó secciones editables, tales como: Información de contacto, Objetivos, Educación, Experiencia, etc.
Cada sección que añadimos podemos editar mediante la técnica "edit in situ".
También podemos arrastrar las secciones para ubicarlos en el lugar u orden deseado.
Una vez terminado nuestra hoja de vida podemos ver una vista previa a la vez que le aplicamos diversos estilos.
Si deseamos grabar nuestro trabajo ó compartir en la red debemos registrarnos, caso contrario podemos imprimir ó exportarlo en formato PDF.
Esta interesante aplicación nuevamente nos muestra qué podemos lograr con el uso de librerías con jQuery en JavaScript y funcionalidad AJAX.