miércoles, 10 de abril de 2013
Tutorial para hacer modelado en Azzurri Clay - Linux
Muchas veces estamos en la etapa de Diseño de Bases de Datos específicamente en el modelado de Bases de Datos, es por eso que exiten herramientas para el modelado de Base de Datos, entre ellas se encuentra Azzurri Clay, que es una herramienta modeladora de Base de Datos que corre como un Plug-in en Eclipse. Tiene las siguiente propiedades:
Para iniciar el Azzurri Clay hay que estar en corriendo Eclipse como lo muestra la figura
Bueno para comenzar a trabajar, se debe tener creado un Proyecto. Selecciónelo al momento de empezar a crear los diagramas, si no se tiene un proyecto creado, debe crearlo siguiendo los pasos a continuación:
Seleccione File-> New-> Project, como se muestra en la figura.
Seguidamente, aparecerá una ventana donde se debe seleccionar la opción Java Project como lo muestra la figura, Luego haga clic en Next > para seguir al siguiente paso.
Asigne un nombre al proyecto en la caja de texto Project Name, Bueno en Project Layout, seleccione Create separate source and output folders esto quiere decir que va crear las fuentes y las carpetas del proyecto por separado, luego le da en Finish
Muy bien una vez que se tiene el proyecto para trabajar, se puede iniciar la sesión en Azzurri Clay.
Bueno para eso se ubican en la carpeta Fuente de nuestro proyecto y con el botón derecho del raton haga clic en New->Other, Seguidamente aparecerá la ventana mostrada en la figura siguiente.
Seleccione la opción Azzurri Clay Database Design Diagram y haga clic en Next >
Luego seleccione un directorio donde trabajar, un nombre para el diagrama y el SQL Dialect en nuestro caso vamos a trabajar con MySQL 4.0.
Azzurri Clay proporciona una barra de herramienta con la que es posible agregar tablas, hacer referencias foráneas y seleccionar elementos en el diagrama que se está realizando.
Muy bien antes de empezar a modelar mi BD de ejemplo le cambiare el nombre a mi BD, en el modelado en Azzurri Clay nos permite Editar el nombre de las Bases de Datos, que esté trabajando para ello hacemos clic derecho del ratón en el espacio de trabajo del Azzurri Clay y seleccionamos Edit Schemas…
En la Propiedad Name le cambiamos el nombre, para mi BD de ejemplo se llamara my_anbo.
Muy bien ahora vamos a crear 2 tablas para nuestro proyecto para agregar las tablas basta con hacer clic en Add Table y dibujar la tabla en el Espacio de Trabajo, al hacer esto, se podrá ver como se muestra en la figura.
Haciendo doble-clic a una tabla se le podrá asignar un nombre en el espacio de Name en la pestañaTable tal como se muestra en la figura
En la pestaña Columns se debe colocar toda la información referente a las columnas (Name, Data Type, Alias, Primary Key, Mandatory, Auto-Increment).
Muy bien creemos 2 Tablas con los siguientes datos
empleados empleadoIDnombreapellidotiendas tiendaIDnombreciudadestadogerente
Bien luego de haber creado las tablas empezaremos a crear las claves foráneas haciendo referencia de la tabla tienda en la tabla empleado. Para hacer esto haga clic en Foreing Key Reference y dibuje la relación desde la tabla en la que se va hacer referencia (empleado) hasta la tabla que hace referencia (tienda).
Posteriormente, se crea de manera automática el campo tiendaID (Clave primaria de la tabla tienda) en la tabla empleado, campo por el cual va estar referenciada la tabla tienda, tal como lo muestra la figura.
Bien para ver las propiedades de la clave Foránea creada, haga clic sobre la relación y con el botón derecho despliegue el submenú de opciones que pueden efectuarse sobre la relación. Para editar las propiedades seleccione la opción Edit Foreign Key, seguidamente aparecerá la ventana mostrada en la siguiente figura.
Luego de en la ventana desplegada se puede configurar la clave foránea creada.
Bueno luego de haber hecho el modelado de nuestra BD, se pueden generar los Scripts SQL de todo el modelo de la BD, se puede generar los scripts de un elemento en especifico de la BD o del Modelado completo, bueno se puede hacer de dos formas una es haciendo clic derecho en el área de trabajo o en un elemento de la BD dependiendo del caso, bueno en nuestro caso vamos a generar los scripts de toda la BD, como venía diciendo una forma es haciendo clic derecho sobre el área de trabajo y otra es en la opción por menú Clay -> Generate SQL (CREATE TABLE) Scripts, como lo muestran en las figuras respectivamente.
Luego de seleccionar la opción antes mencionada, aparece una ventana donde se requiere asignar un nombre al script SQL a generar. Para ello, se ubican en la caja de texto File Name e introduzcan el nombre del sripts.
Seguidamente, haga clic en Next -> aparecerá una ventana para especificar que DDL de las tablas del diagrama, se van a generar opciones especiales, si es el caso, y el símbolo de terminación de las sentencias SQL.
Una vez seleccionadas las opciones, haga clic en Finish, inmediatamente aparecerá una nueva pestaña en el área de trabajo que contendrá las sentencias SQL como se muestra a continuación.
Luego de tener nuestras sentencias SQL de nuestra BD, pasamos a la siguiente etapa del desarrollo de nuestra BD que es el desarrollo nuestro scripts, para ello nos vamos a Inicio -> Todos los programas -> MySQL -> MySQL Query Browser como se muestra a continuación.
Entramos a nuestro Browser del MySQL con un usuario que tenga todos los privilegios (El usuario anbo lo cree yo con todos los privilegios de todas formas hay un usuario que trae por defecto el MySQL que es el root y no tiene password y viene con todos los privilegios) bien nos conectamos como nos muestra la figura.
Nota: si no especifican la BD al momento de conectar nos tira el siguiente mensaje de advertencia solo debemos ignorar el mensaje para poder conectarnos.
Bien después abrimos los script que habíamos hecho en el Azzurri Clay en File -> Open Script …
Lo ubicamos en la carpeta que tenemos creado el proyecto en eclipse.
Bueno ahora tenemos nuestra BD solo falta agregarle algunos comandos para la creación de la BD y algunos insert de prueba que siempre es de costumbre para la prueba de la data.
Bien nos debe ir quedando algo parecido a la imagen que se muestra abajo.
Bien en vista de esta noticia http://digitizor.com/2010/11/05/innodb-dropped-from-oracle-mysql-classic-edition/ aquí esta en españolhttp://www.softwarelibre.net/oracle_retira_el_motor_innodb_de_mysql_classic_edition_eng voy a quitarle el motor InnoDB a nuestra BD, quedando como la imagen de abajo.
Bueno el código seria este:
USE mysql;DROP DATABASE IF EXISTS my_anbo;CREATE DATABASE my_anbo;USE my_anbo;CREATE TABLE my_anbo.tienda (tiendaID INT UNSIGNED NOT NULL AUTO_INCREMENT, nombre CHAR(50), ciudad CHAR(50), estado CHAR(2), gerente CHAR(50), PRIMARY KEY (tiendaID));CREATE TABLE my_anbo.empleado (empleadoID INT UNSIGNED NOT NULL AUTO_INCREMENT, tiendaID INT UNSIGNED NOT NULL, nombre CHAR(50), apellido CHAR(50), PRIMARY KEY (empleadoID), INDEX (tiendaID), CONSTRAINT FK_emp_tie_1 FOREIGN KEY (tiendaID)REFERENCES my_anbo.tienda (tiendaID));INSERT INTO tienda VALUES (default, ‘Mr. Huellas Sports’, ‘San Felipe’, ‘YA’,'Carlos Ruiz’),
(default, ‘Beco’,'Caracas’,'DC’,'Nelson Martinez’);INSERT INTO empleado VALUES (default,1,’Guillermo’,'Rodriguez’),
(default,1,’Giancarlo’,'Rossi’),
(default,2,’Cindy’,'Collins’),
(default,2,’Hector’,'Gonzales’),
(default,2,’Danny’,'Hernandez’);
Fuente: http://adolfredobelizario.wordpress.com
martes, 5 de febrero de 2013
Fancybox Yii Framework
//creamos un link echo CHtml::link('link',"#data", array("id"=>"fancy-link")); echo CHtml::link(CHtml::image(Yii::app()->theme->baseurl.'/images/red.png'),"#data", array("id"=>"fancy-link", "class"=>"imgl"));
//put fancybox on page $this->widget('application.extensions.fancybox.EFancyBox', array( 'target'=>'a#fancy-link', 'config'=>array(),)); //usamos un div <div style="display:none"> <div id="data"> <p>Probando fancybox</p> </div> </div>
fuente: http://www.yiiframework.com/extension/fancybox/#c9132
lunes, 4 de febrero de 2013
Creando un Panel Lateral Desplegable en jQuery
Ahorita aprenderemos a crear nuestro propio panel lateral desplegable basado en jQuery. Lo haremos partiendo de cero y explicándolo como siempre paso a paso, de forma que todos podamos comprender cómo funciona. Todo ello inspirándonos en el panel lateral de Google Reader.
Introducción: ¿Qué vamos a hacer?
Aquí retomamos los temas relacionados con javascript y jQuery de la mano de este control en forma de panel lateral desplegable.
Aquí retomamos los temas relacionados con javascript y jQuery de la mano de este control en forma de panel lateral desplegable.
Para ello nos inspiraremos en el funcionamiento de Google Reader, del cual “copiaremos” en mayor o menor medida su funcionamiento y estética. Este será el aspecto final del control a crear:
La idea es que tengamos una lista de distintos canales RSS a cargar en la parte derecha, esta lista estará dentro de un panel lateral que se podrá colapsar o mostrar a gusto del propio usuario.
En este caso no cargaremos realmente fuentes RSS como hace Google Reader, para simplificar la tarea lo que haremos será cargar una web completa proveniente del elemento seleccionado en un iframe, por darle un poco de vistosidad al tutorial.
¡Vamos a por el primer paso del tutorial!
Paso 1: La estructura HTML
Como acostumbramos a realizar en nuestros temas, mantendremos una estructura sencilla, intentando que sea vistosa pero sobretodo clara a la hora de comprender qué estamos haciendo:
Como acostumbramos a realizar en nuestros temas, mantendremos una estructura sencilla, intentando que sea vistosa pero sobretodo clara a la hora de comprender qué estamos haciendo:
Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel lateral desplegable</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="top">
<h1>
<a title="Volver a portada" href="/">Google Reader</a>
</h1>
</div>
<div id="lateral">
<h2>Suscripciones</h2>
<ul id="menu">
<li>
<a href="http://cokidoo.com/">
<span class="icon"></span>
<span>Cokidoo Labs</span>
</a>
</li>
<li>
<a href="http://web.ontuts.com">
<span class="icon"></span>
<span>Ontuts</span>
</a>
</li>
<li>
<a href="http://cokisam.com">
<span class="icon"></span>
<span><strong>Cokisam (2)</strong></span>
</a>
</li>
<li>
<a href="http://erasmusu.com">
<span class="icon"></span>
<span>Erasmusu</span>
</a>
</li>
</ul>
</div>
<div id="content">
<h2>Inicio</h2>
<a id="toggler"></a>
<div id="render">
<i id="tip">Selecciona uno de los canales a cargar en el listado del panel lateral izquierdo.</i>
<iframe id="iframe" width="100%" height="100%" src="" frameborder="0"></iframe>
</div>
</div>
<div id="footer">
<span>Tutorial realizado por <a href="http://cokidoo.com">Adrián Mato</a> para <a href="http://web.ontuts.com">Ontuts</a></span>
</div>
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel lateral desplegable</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="top">
<h1>
<a title="Volver a portada" href="/">Google Reader</a>
</h1>
</div>
<div id="lateral">
<h2>Suscripciones</h2>
<ul id="menu">
<li>
<a href="http://cokidoo.com/">
<span class="icon"></span>
<span>Cokidoo Labs</span>
</a>
</li>
<li>
<a href="http://web.ontuts.com">
<span class="icon"></span>
<span>Ontuts</span>
</a>
</li>
<li>
<a href="http://cokisam.com">
<span class="icon"></span>
<span><strong>Cokisam (2)</strong></span>
</a>
</li>
<li>
<a href="http://erasmusu.com">
<span class="icon"></span>
<span>Erasmusu</span>
</a>
</li>
</ul>
</div>
<div id="content">
<h2>Inicio</h2>
<a id="toggler"></a>
<div id="render">
<i id="tip">Selecciona uno de los canales a cargar en el listado del panel lateral izquierdo.</i>
<iframe id="iframe" width="100%" height="100%" src="" frameborder="0"></iframe>
</div>
</div>
<div id="footer">
<span>Tutorial realizado por <a href="http://cokidoo.com">Adrián Mato</a> para <a href="http://web.ontuts.com">Ontuts</a></span>
</div>
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Sin la hoja de estilo creada, nuestro documento debería mostrarse de la siguiente forma:
Lo único destacable de este primer paso es comprender que estamos creando la división sin contenido “toggler” que será la que nos permita mostrar / ocultar el panel lateral de id “lateral” mediante el control de los eventos en javascript.
Vamos pues a darle un poco de estilo al ejemplo antes de ponernos con la lógica en javascript…
Paso 2: Aplicando estilo con CSS a nuestro panel lateral
En este caso, el código CSS es muy básico y se centra principalmente en recrear el aspecto visual de la interfaz de Google Reader, es puramente estético, aunque tiene alguna cosa curiosa que comentaremos tras visualizar el código:
En este caso, el código CSS es muy básico y se centra principalmente en recrear el aspecto visual de la interfaz de Google Reader, es puramente estético, aunque tiene alguna cosa curiosa que comentaremos tras visualizar el código:
Quote
/*
Document : main.css
Author : adrian mato
Description : Estilo general
*/
@CHARSET "UTF-8";
/*
Section : CSS RESET
Description: Reseteamos practicamente todos los valores de los selectores para facilitar el cross-browsing
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, button{
border:0pt none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0pt;
padding: 0pt;
vertical-align: baselinebaseline;
}
body{
line-height: auto;
font-size: 12px !Important;
background: #fff;
font-family: Helvetica, Arial, sans-serif;
margin: 0pt;
cursor: default;
color: #000;
}
table{
border-collapse: separate;
border-spacing: 0pt;
}
strong{
font-weight: 700;
}
caption, th, td{
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after{
main: "";
}
blockquote, q{
quotes: "" "";
}
html,body{
height: 100%;
overflow: hidden;
}
.clearfix{
overflow: hidden;
}
/*
Section : TOP
Description: Cabecera de nuestro lector RSS
*/
#top{
height: 40px;
line-height: 40px;
padding: 10px 10px 0;
border-bottom: 1px solid #c9d7f1;
}
#top h1{
width: 138px;
height: 30px;
background: transparent url("img/logo_bg.gif") no-repeat 0 0;
display: block;
text-indent: -9999px;
}
#top h1 a{
display: block;
}
/*
Section: LATERAL
Description: Panel lateral donde mostramos las distintas fuentes RSS
*/
#lateral{
width: 260px;
height: 100%;
float: left;
}
#lateral h2{
font-size: 13px;
font-weight: 700;
padding: 10px;
}
#lateral ul{
padding: 10px 0 0;
list-style: none;
list-style-position: inside;
}
#lateral li{
font-size: 13px;
position: relative;
line-height: 24px;
}
#lateral li a{
display: block;
padding-left: 23px;
text-decoration: none;
color: #000;
}
#lateral li.active a, #lateral li.active a:hover{
background: #c2cff1
}
#lateral li a:hover{
background-color: #ffffcc;
}
#lateral li a span{
padding-left: 16px;
}
#lateral li a .icon{
width: 16px;
height: 16px;
position:absolute;
top: 4px;
background: transparent url("img/rss_bg.gif") no-repeat left center;
}
/*
Section: CONTENT
Description: Zona donde cargamos el contenido seleccionado
*/
#content{
height: 100%;
margin-left: 260px;
}
#content h2{
height: 40px;
line-height: 40px;
padding: 0 10px 0 20px;
background: #c2cff1;
font-size: 18px;
font-weight: 700;
}
#content #render{
height: 100%;
overflow: hidden;
}
#content #tip{
display: block;
padding: 20px;
}
#content #iframe{
display: none;
}
/*
Section: TOGGLER
Description: Boton que permitirá mostrar / ocultar el panel
*/
#toggler{
width: 16px;
height: 100%;
border-left: 1px solid #c2cff1;
background: #EBEFF9 url("img/toggler_bg.gif") no-repeat left center;
float: left;
}
#toggler:hover{
background: #c2cff1 url("img/toggler_bg.gif") no-repeat -25px center;
cursor: pointer;
}
#toggler.off{
background: #EBEFF9 url("img/toggler_off_bg.gif") no-repeat left center;
margin-left: 0;
}
#toggler.off:hover{
background: #c2cff1 url("img/toggler_off_bg.gif") no-repeat -25px center;
margin-left: 0;
}
/*
Section: FOOTER
Description: Pie de página del panel
*/
#footer{
width: 100%;
height: 30px;
line-height: 30px;
text-align: rightright;
border-top: 1px solid #8c9dc8;
background: #C2CFF1;
position: fixed;
bottombottom: 0;
}
#footer span{
padding-right: 10px;
}
Document : main.css
Author : adrian mato
Description : Estilo general
*/
@CHARSET "UTF-8";
/*
Section : CSS RESET
Description: Reseteamos practicamente todos los valores de los selectores para facilitar el cross-browsing
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, button{
border:0pt none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0pt;
padding: 0pt;
vertical-align: baselinebaseline;
}
body{
line-height: auto;
font-size: 12px !Important;
background: #fff;
font-family: Helvetica, Arial, sans-serif;
margin: 0pt;
cursor: default;
color: #000;
}
table{
border-collapse: separate;
border-spacing: 0pt;
}
strong{
font-weight: 700;
}
caption, th, td{
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after{
main: "";
}
blockquote, q{
quotes: "" "";
}
html,body{
height: 100%;
overflow: hidden;
}
.clearfix{
overflow: hidden;
}
/*
Section : TOP
Description: Cabecera de nuestro lector RSS
*/
#top{
height: 40px;
line-height: 40px;
padding: 10px 10px 0;
border-bottom: 1px solid #c9d7f1;
}
#top h1{
width: 138px;
height: 30px;
background: transparent url("img/logo_bg.gif") no-repeat 0 0;
display: block;
text-indent: -9999px;
}
#top h1 a{
display: block;
}
/*
Section: LATERAL
Description: Panel lateral donde mostramos las distintas fuentes RSS
*/
#lateral{
width: 260px;
height: 100%;
float: left;
}
#lateral h2{
font-size: 13px;
font-weight: 700;
padding: 10px;
}
#lateral ul{
padding: 10px 0 0;
list-style: none;
list-style-position: inside;
}
#lateral li{
font-size: 13px;
position: relative;
line-height: 24px;
}
#lateral li a{
display: block;
padding-left: 23px;
text-decoration: none;
color: #000;
}
#lateral li.active a, #lateral li.active a:hover{
background: #c2cff1
}
#lateral li a:hover{
background-color: #ffffcc;
}
#lateral li a span{
padding-left: 16px;
}
#lateral li a .icon{
width: 16px;
height: 16px;
position:absolute;
top: 4px;
background: transparent url("img/rss_bg.gif") no-repeat left center;
}
/*
Section: CONTENT
Description: Zona donde cargamos el contenido seleccionado
*/
#content{
height: 100%;
margin-left: 260px;
}
#content h2{
height: 40px;
line-height: 40px;
padding: 0 10px 0 20px;
background: #c2cff1;
font-size: 18px;
font-weight: 700;
}
#content #render{
height: 100%;
overflow: hidden;
}
#content #tip{
display: block;
padding: 20px;
}
#content #iframe{
display: none;
}
/*
Section: TOGGLER
Description: Boton que permitirá mostrar / ocultar el panel
*/
#toggler{
width: 16px;
height: 100%;
border-left: 1px solid #c2cff1;
background: #EBEFF9 url("img/toggler_bg.gif") no-repeat left center;
float: left;
}
#toggler:hover{
background: #c2cff1 url("img/toggler_bg.gif") no-repeat -25px center;
cursor: pointer;
}
#toggler.off{
background: #EBEFF9 url("img/toggler_off_bg.gif") no-repeat left center;
margin-left: 0;
}
#toggler.off:hover{
background: #c2cff1 url("img/toggler_off_bg.gif") no-repeat -25px center;
margin-left: 0;
}
/*
Section: FOOTER
Description: Pie de página del panel
*/
#footer{
width: 100%;
height: 30px;
line-height: 30px;
text-align: rightright;
border-top: 1px solid #8c9dc8;
background: #C2CFF1;
position: fixed;
bottombottom: 0;
}
#footer span{
padding-right: 10px;
}
Echemos un vistazo a las tres principales divisiones:
• lateral: división que contiene el listado de elementos seleccionables que permiten cargar las distintas webs a visualizar.
• content: división que contiene el contenido a cargar y visualizar.
• toggler: división contenida dentro de “content” y que recibe las acciones de mostrado / ocultado de “lateral”.
• lateral: división que contiene el listado de elementos seleccionables que permiten cargar las distintas webs a visualizar.
• content: división que contiene el contenido a cargar y visualizar.
• toggler: división contenida dentro de “content” y que recibe las acciones de mostrado / ocultado de “lateral”.
Como habréis podido comprobar estamos trabajando siempre con una maquetación líquida, por lo que trataremos siempre de aprovechar el espacio en la ventana de nuestro navegador, no trabajaremos con medidas fijas, salvo el ancho de “toggler”, que me apetece tenerlo fijo.
Una maquetación líquida escapa de tamaños fijos, la forma en la que se muestra el diseño siempre va en relación al tamaño disponible en la ventana.
Las divisiones tratarán siempre de ocupar el 100% del ancho de nuestra ventana de navegador de forma natural, para la altura, le haremos saber que nos interesa que ocupe el 100%, esto no funcionará del todo bien, pero lo ajustaremos mediante javascript en el próximo paso.
Las divisiones tratarán siempre de ocupar el 100% del ancho de nuestra ventana de navegador de forma natural, para la altura, le haremos saber que nos interesa que ocupe el 100%, esto no funcionará del todo bien, pero lo ajustaremos mediante javascript en el próximo paso.
Otro detalle interesante es que mediante la clase “off” aplicada a la división “toggler” estaremos alternando el aspecto visual del control de muestreo / ocultado del panel lateral, el cual será mostrado u ocultado mediante código javascript:
Como habréis podido comprobar, la división “lateral” no tiene una clase CSS para controlar su estado, el mostrar o no esta división será sólo cosa del código javascript…
¡Vamos a ello!
Paso 3: Añadiendo interacción con javascript mediante jQuery
Repasemos qué es lo que queremos de nuestro control en forma de panel lateral despegable antes de aplicar la interacción:
• Mostrar listado de elementos en el panel lateral.
• Ocultar el panel lateral.
• Cargar la web de cada elemento seleccionado del panel lateral.
Repasemos qué es lo que queremos de nuestro control en forma de panel lateral despegable antes de aplicar la interacción:
• Mostrar listado de elementos en el panel lateral.
• Ocultar el panel lateral.
• Cargar la web de cada elemento seleccionado del panel lateral.
Con esto en mente, necesitaremos identificar mediante selectores de jQuery los distintos elementos que gestionaremos en nuestro código javascript, y posteriormente ir trabajando en toda la funcionalidad anteriormente mencionada.
Antes de entrar en detalle echemos un vistazo al código final:
Quote
$(document).ready(function(){
/*
* VARIABLES GLOBALES
*/
//status de panel lateral: 1 ON (default), 0 OFF
var status = 1;
//selectores
var iframe = $("#iframe");
var tip = $("#tip");
var title = $("#content h2");
var toggler = $("#toggler");
var lateral = $("#lateral");
var content = $("#content");
var lateralWidth = lateral.width() + "px";
//dimensiones disponibles para elementos del panel
var windowHeight = 0;
var renderHeight = 0;
var togglerHeight = 0;
/*
* AL CARGAR EL DOCUMENTO
*/
calculateDimensions();
applyDimensions();
/*
* AL CAMBIAR DE TAMAÑO LA VENTANA DEL NAVEGADOR
*/
$(window).resize(function(){
calculateDimensions();
applyDimensions();
});
/*
* AL HACER CLICK EN TOGGLER (PANEL LATERAL)
*/
toggler.click(clickToggler);
/*
* AL SELECCIONAR UNO DE LOS ITEMS DEL LISTADO LATERAL
*/
$("#lateral a").click(loadItem);
/*
* FUNCIONES DE CONTROL DE ELEMENTOS DE INTERFAZ
*/
// calculo de dimensiones disponibles
function calculateDimensions(){
windowHeight = document.documentElement.clientHeight; //alto disponible en ventana del explorador
renderHeight = (windowHeight - 51 - 40 - 31) +"px";
togglerHeight = (windowHeight - 51 - 40 - 31) +"px";
/* ¿De donde salen esos valores a restar? Pues de:
* 51: #top: 40px de height, 10px de padding-top, y 1px de border-bottom
* 40: #content h2: 40px de height
* 31: #footer: 30px de height y 1px de border-top
*/
}
// aplicado de dimensiones disponibles
function applyDimensions(){
content.css("height", renderHeight);
toggler.css("height", togglerHeight);
}
// control de elemento lateral (toggler)
function clickToggler(){
//ocultamos panel si esta mostrandose
if(status ==1){
lateral.hide();
content.css("margin-left","0px");
toggler.addClass("off");
status = 0;
}
//mostramos panel si esta oculto
else{
lateral.show();
content.css("margin-left", lateralWidth);
toggler.removeClass("off");
status = 1;
}
}
//control de items a cargar en listado lateral
function loadItem(e){
//mostramos iframe y ocultamos consejo (tip)
iframe.css("display", "block");
tip.css("display", "none");
//cargamos en iframe el nuevo sitio seleccionado
iframe.attr("src", $(e.currentTarget).attr("href"));
//cancelamos el comportamiento normal, que nos llevaria a la web seleccionada, solo queremos cargarle en el iframe
title.html("Visualizando » <i>" + $(e.currentTarget).text() + "</i>");
return false;
}
});
/*
* VARIABLES GLOBALES
*/
//status de panel lateral: 1 ON (default), 0 OFF
var status = 1;
//selectores
var iframe = $("#iframe");
var tip = $("#tip");
var title = $("#content h2");
var toggler = $("#toggler");
var lateral = $("#lateral");
var content = $("#content");
var lateralWidth = lateral.width() + "px";
//dimensiones disponibles para elementos del panel
var windowHeight = 0;
var renderHeight = 0;
var togglerHeight = 0;
/*
* AL CARGAR EL DOCUMENTO
*/
calculateDimensions();
applyDimensions();
/*
* AL CAMBIAR DE TAMAÑO LA VENTANA DEL NAVEGADOR
*/
$(window).resize(function(){
calculateDimensions();
applyDimensions();
});
/*
* AL HACER CLICK EN TOGGLER (PANEL LATERAL)
*/
toggler.click(clickToggler);
/*
* AL SELECCIONAR UNO DE LOS ITEMS DEL LISTADO LATERAL
*/
$("#lateral a").click(loadItem);
/*
* FUNCIONES DE CONTROL DE ELEMENTOS DE INTERFAZ
*/
// calculo de dimensiones disponibles
function calculateDimensions(){
windowHeight = document.documentElement.clientHeight; //alto disponible en ventana del explorador
renderHeight = (windowHeight - 51 - 40 - 31) +"px";
togglerHeight = (windowHeight - 51 - 40 - 31) +"px";
/* ¿De donde salen esos valores a restar? Pues de:
* 51: #top: 40px de height, 10px de padding-top, y 1px de border-bottom
* 40: #content h2: 40px de height
* 31: #footer: 30px de height y 1px de border-top
*/
}
// aplicado de dimensiones disponibles
function applyDimensions(){
content.css("height", renderHeight);
toggler.css("height", togglerHeight);
}
// control de elemento lateral (toggler)
function clickToggler(){
//ocultamos panel si esta mostrandose
if(status ==1){
lateral.hide();
content.css("margin-left","0px");
toggler.addClass("off");
status = 0;
}
//mostramos panel si esta oculto
else{
lateral.show();
content.css("margin-left", lateralWidth);
toggler.removeClass("off");
status = 1;
}
}
//control de items a cargar en listado lateral
function loadItem(e){
//mostramos iframe y ocultamos consejo (tip)
iframe.css("display", "block");
tip.css("display", "none");
//cargamos en iframe el nuevo sitio seleccionado
iframe.attr("src", $(e.currentTarget).attr("href"));
//cancelamos el comportamiento normal, que nos llevaria a la web seleccionada, solo queremos cargarle en el iframe
title.html("Visualizando » <i>" + $(e.currentTarget).text() + "</i>");
return false;
}
});
El código como podéis comprobar es relativamente sencillo, tiene unas cuentas líneas pero casi todas son fáciles de entender, vamos a tratar de visualizarlo en pequeños pasos.
Variables de estado y de selección
Como hemos comentado a lo largo de otros temas es importante guardar la referencia a los distintos elementos que se utilizarán de forma constante, además de tener alguna variables globales que nos permitan controlar el estado de algunos elementos:
Como hemos comentado a lo largo de otros temas es importante guardar la referencia a los distintos elementos que se utilizarán de forma constante, además de tener alguna variables globales que nos permitan controlar el estado de algunos elementos:
Quote
/*
* VARIABLES GLOBALES
*/
//status de panel lateral: 1 ON (default), 0 OFF
var status = 1;
//selectores
var iframe = $("#iframe");
var tip = $("#tip");
var title = $("#content h2");
var toggler = $("#toggler");
var lateral = $("#lateral");
var content = $("#content");
var lateralWidth = lateral.width() + "px";
//dimensiones disponibles para elementos del panel
var windowHeight = 0;
var renderHeight = 0;
var togglerHeight = 0;
* VARIABLES GLOBALES
*/
//status de panel lateral: 1 ON (default), 0 OFF
var status = 1;
//selectores
var iframe = $("#iframe");
var tip = $("#tip");
var title = $("#content h2");
var toggler = $("#toggler");
var lateral = $("#lateral");
var content = $("#content");
var lateralWidth = lateral.width() + "px";
//dimensiones disponibles para elementos del panel
var windowHeight = 0;
var renderHeight = 0;
var togglerHeight = 0;
El código es bastante claro y legible, así que no vamos a dar más explicación al mismo.
Guardar referencias en variables javascript de los distintos elementos de nuestro documento nos facilitará la vida además de aportar una mayor rapidez de ejecución.
Las variables windowHeight, renderHeight y togglerHeight nos servirán a la hora calcular y aplicar dimensiones a los distintos elementos que forman parte del juego.
Calculando y aplicando dimensiones a nuestro panel lateral
Gestionaremos distintos eventos pero todos ellos terminarán accediendo a dos métodos:
• calculateDimensions(): calculamos las dimensiones en altura necesarias a aplicar a cada elemento según espacio disponible.
• applyDimensions(): aplicamos las dimensiones a cada elemento.
Gestionaremos distintos eventos pero todos ellos terminarán accediendo a dos métodos:
• calculateDimensions(): calculamos las dimensiones en altura necesarias a aplicar a cada elemento según espacio disponible.
• applyDimensions(): aplicamos las dimensiones a cada elemento.
Este sería el código de ambas funciones:
Quote
// calculo de dimensiones disponibles
function calculateDimensions(){
windowHeight = document.documentElement.clientHeight; //alto disponible en ventana del explorador
renderHeight = (windowHeight - 51 - 40 - 31) +"px";
togglerHeight = (windowHeight - 51 - 40 - 31) +"px";
/* ¿De donde salen esos valores a restar? Pues de:
* 51: #top: 40px de height, 10px de margin-top, y 1px de border-bottom
* 40: #content h2: 40px de height
* 31: #footer: 30px de height y 1px de border-top
*/
}
// aplicado de dimensiones disponibles
function applyDimensions(){
content.css("height", renderHeight);
toggler.css("height", togglerHeight);
}
function calculateDimensions(){
windowHeight = document.documentElement.clientHeight; //alto disponible en ventana del explorador
renderHeight = (windowHeight - 51 - 40 - 31) +"px";
togglerHeight = (windowHeight - 51 - 40 - 31) +"px";
/* ¿De donde salen esos valores a restar? Pues de:
* 51: #top: 40px de height, 10px de margin-top, y 1px de border-bottom
* 40: #content h2: 40px de height
* 31: #footer: 30px de height y 1px de border-top
*/
}
// aplicado de dimensiones disponibles
function applyDimensions(){
content.css("height", renderHeight);
toggler.css("height", togglerHeight);
}
Las dimensiones a nivel de ancho no son un problema, sí lo son a nivel de altura, ya que aunque por CSS especifiquemos claramente que queremos que midan 100%, los anchos, márgenes y otro tipo de propiedades distorsionan y añaden pixels extra a la altura.
Como vemos en la imagen, hay ciertas cantidades fijas a restar a la altura pertenecientes a otras dimensiones y sus propiedades:
Una imagen vale más que mil palabras… ¿no? Ahora sólo nos queda afrontar el control de interacción y eventos.
Funcionamiento de la interfaz
Necesitamos dos funciones para controlar el funcionamiento de todo:
• clickToggler(): Mostrado y ocultado para cuando se pinche en el elemento “toggler”.
• loadItem(): Carga de la web del elemento seleccionado en la división “content”.
Necesitamos dos funciones para controlar el funcionamiento de todo:
• clickToggler(): Mostrado y ocultado para cuando se pinche en el elemento “toggler”.
• loadItem(): Carga de la web del elemento seleccionado en la división “content”.
Una vez tenemos estas y otras funciones definidas, sólo queda invocarlas en los eventos correspondientes…
Control de eventos en nuestro panel lateral
En total tenemos cuatro eventos en juego, veamos cuáles son:
• $(document).ready: al finalizar la carga del documento.
• $(window).resize: al variar las dimensiones de la ventana del navegador.
• toggler.click: al hacer click el el botón de mostrado / ocultado de panel lateral.
• $(“#lateral a”).click: al hacer click en alguno de los elementos del panel lateral.
En total tenemos cuatro eventos en juego, veamos cuáles son:
• $(document).ready: al finalizar la carga del documento.
• $(window).resize: al variar las dimensiones de la ventana del navegador.
• toggler.click: al hacer click el el botón de mostrado / ocultado de panel lateral.
• $(“#lateral a”).click: al hacer click en alguno de los elementos del panel lateral.
Aquí tenemos el código javascript:
Quote
/*
* AL CARGAR EL DOCUMENTO
*/
calculateDimensions();
applyDimensions();
/*
* AL CAMBIAR DE TAMAÑO LA VENTANA DEL NAVEGADOR
*/
$(window).resize(function(){
calculateDimensions();
applyDimensions();
});
/*
* AL HACER CLICK EN TOGGLER (PANEL LATERAL)
*/
toggler.click(clickToggler);
/*
* AL SELECCIONAR UNO DE LOS ITEMS DEL LISTADO LATERAL
*/
$("#lateral a").click(loadItem);
* AL CARGAR EL DOCUMENTO
*/
calculateDimensions();
applyDimensions();
/*
* AL CAMBIAR DE TAMAÑO LA VENTANA DEL NAVEGADOR
*/
$(window).resize(function(){
calculateDimensions();
applyDimensions();
});
/*
* AL HACER CLICK EN TOGGLER (PANEL LATERAL)
*/
toggler.click(clickToggler);
/*
* AL SELECCIONAR UNO DE LOS ITEMS DEL LISTADO LATERAL
*/
$("#lateral a").click(loadItem);
Y ya está, hemos terminado con el código javascript. Ya tenemos la estructura html, el estilo y maquetación y el funcionamiento mediante javascript… ¡Sólo queda probarlo!
Reflexión final
Una vez más vuelvo a insistir en lo de siempre: con un poco de curiosidad y ganas por profundizar en lo que nos interesa podemos -en este caso- crear controles dinámicos en javascript de forma realmente sencilla.
Una vez más vuelvo a insistir en lo de siempre: con un poco de curiosidad y ganas por profundizar en lo que nos interesa podemos -en este caso- crear controles dinámicos en javascript de forma realmente sencilla.
Lo más importante es tener claro qué es lo que queremos que haga nuestro control (sus eventos, etc…) y luego buscar la mejor solución posible a cada uno de esos requisitos ya sea con jQuery u otras librerías javascript que manejemos.
Espero que os haya resultado útil y…
Descarga2
Cargar Multiples Imagenes con Uploadify
Hola chicos en este tutorial le enseñare a cargar múltiples imágenes a una carpeta ubicada en su servidor y a guardar en base de datos con Uploadify, después de este tutorial podrán modificarlo para adaptarlo a sus aplicaciones, este ejemplo esta hecho en mysql y PHP.
Creamos la Base de Datos
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,`filename` varchar(200) DEFAULT NULL,`filedate` int(11) DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;Creamos el archivo donde guardaremos en la Base de Datos “insert.php” :
El archivo contiene una consulta sencilla donde haremos nuestra inserción a la Base de Datos.// connect database$dbc = mysql_connect("localhost", "root", "root");// select databasemysql_select_db("test", $dbc);if(isset($_POST)) {//echo $_POST['name'];$fileName = $_POST['name'];$time = time();mysql_query("INSERT INTO uploadify(filename, filedate) VALUES('$fileName', '$time')");$inserted_id = mysql_insert_id($dbc);if($inserted_id > 0) { // if successecho "uploaded file: " . $fileName;}}Modificacamos nuestro Uploadify usando el metodo “OnComplete”:
Modificamo el archivo añadiendo jQuery Ajax para realizar el llamado a “insert.php” atravez de POST$(document).ready(function() {//alert('I am ready to use uploadify!');$("#file_upload").uploadify({'uploader': 'uploadifyit/uploadify.swf','script': 'uploadifyit/uploadify.php','cancelImg': 'uploadifyit/cancel.png','folder': 'uploads','auto': false, // use for auto upload'multi': true,'queueSizeLimit': 4,'onQueueFull': function(event, queueSizeLimit) {alert("Please don't put anymore files in me! You can upload " + queueSizeLimit + " files at once");return false;},'onComplete': function(event, ID, fileObj, response, data) {// you can use here jQuery AJAX method to send info at server-side.$.post("insert.php", { name: fileObj.name }, function(info) {alert(info); // alert UPLOADED FILE NAME});}});});
Fuente: AQUI
Suscribirse a:
Entradas (Atom)
