YoxView : Excelente plugin para galería de imágenes con jquery

YoxView es un plugin Opensource para jQuery que sirve para animar galerías de imágenes en forma de Lightbox, esta herramienta esta basada en el plugin Lightbox2 para PrototypeJS y mejorada.
Para utilizarlo basta con bajarse el zip en la Web Oficial.
El zip no viene con el archivo html, así que lo armaremos lo más simple para este ejemplo.

Paso 1: Incluir los archivos JS y CSS

Solo incluiremos un archivo Js y CSS, dentro del yoxview-init.js se encuentra un proceso para incluir la librería jQuery y otros componentes, la hoja de estilos servirá para la apariencia de la galería, luego inicializaremos el yoxview.

<script type="text/javascript" language="javascript" src="yoxview-init.js"></script>
<link href="yoxview.css" rel="Stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $(".yoxview").yoxview();
});
</script>

Paso 2: Estructura HTML

Como al inicializar el yoxview le pasamos por parámetro la clase “.yoxview” tendremos que hacer lo mismo en el html, agregar la clase “.yoxview” al div de la galería.

<div class="thumbnails yoxview">
    <a href="img/_fire.jpg">
    <img title="House on fire" src="img/fire.jpg"></a>
    <a href="img/_avocado.jpg">
    <img title="Avocado" src="img/avocado.jpg"></a>
    <a href="img/_flower.jpg">
    <img title="Yam flower" src="img/flower.jpg"></a>
    <a href="img/_amsterdam.jpg">
    <img title="Amsterdam" src="img/amsterdam.jpg"></a>
    <a href="img/_tomatoes.jpg">
    <img title="Cherry tomatoes" src="img/tomatoes.jpg"></a>
    <a href="img/_roses.jpg">
    <img title="Roses" src="img/roses.jpg"></a>
</div>

Esto es todo, solo falta probar el HTML en el navegador para ver que tan excelente queda.

10 consejos SQL para acelerar tu Base de datos

La mayoría de sitios en la Web depende de una o varias Bases de datos, ya sean para consultar, ingresar, borrar registros. Y en todas es necesaria la optimización para el aceleramiento y ahorrar recursos de nuestro Servidor, este articulo trae 10 consejos muy útiles para optimizar y acelerar nuestras bases de datos.

1. Optimizar las consultas con el Cache de Consultas SQL

Utilizando la función date de PHP podemos consultar en el cache de la base de datos:

$today = date("Y-m-d");
$r = mysql_query("SELECT username FROM user WHERE signup_date >= '$today'");

2. No olvidar agregar índices a los campos

Esto acelerara considerablemente sus consultas a la base de datos, para ver si olvido poner índice en algunos campos puede utilizar EXPLAIN, colocándolo delante de la consulta SQL.

EXPLAIN SELECT ...
FROM usuarios u
JOIN comentarios c ON u.id=c.usuario_id

3. Utilizar LIMIT 1 para obtener una única fila

Cuando sabemos que nuestra consulta nos devolverá solo un registro, por ejemplo al consultar por un id de usuario, es recomendable utilizar LIMIT 1, esto hará que cuando el registro sea encontrado, ya no recorrerá las demás filas para comparar.

$rs = mysql_query("SELECT 1 FROM user WHERE id = '1' LIMIT 1");

4. Agregar índice a los campos de búsqueda

Al tener en una tabla, campos con los que hacemos búsqueda, es bueno que esos campos sean índices para acelerar la consulta.

5. Utilizar el mismo tipo de columnas para los JOIN

Cuando relacionamos tablas tenemos que agregar índices, luego de esto asegurarnos que los dos campos tengan el mismo tipo de dato (DECIMAL, INT, etc.). Ya que esto afectara a procesos y operaciones internas de MySQL.

 $r = mysql_query("SELECT company_name FROM users
     LEFT JOIN companies ON (users.state = companies.state)
     WHERE users.id = $user_id");

6. No utilizar el ORDER BY RAND()

Si queremos sacar un registro de una tabla aleatoriamente, es mejor sacar el valor por código PHP, ya que al utilizar RAND() en MySQL estaremos llamando a la función por cada registro en la tabla para obtener un resultado.

// mal
$r = mysql_query("SELECT username FROM user ORDER BY RAND() LIMIT 1");
// bien
$r = mysql_query("SELECT count(*) FROM user");
$d = mysql_fetch_row($r);
$rand = mt_rand(0,$d[0] - 1);
$r = mysql_query("SELECT username FROM user LIMIT $rand, 1");

7. Evitar utilizar el SELECT *

Traer toda la data es casi siempre innecesario y hace procesar más al motor de base de datos, es muy recomendable cambiar el habitual * por los campos necesarios.

// mal
$r = mysql_query("SELECT * FROM user WHERE user_id = 1");
$d = mysql_fetch_assoc($r);
echo "Welcome {$d['username']}";
// bien
$r = mysql_query("SELECT username FROM user WHERE user_id = 1");
$d = mysql_fetch_assoc($r);
echo "Welcome {$d['username']}";

8. Utilizar NOT NULL

A menos que tengas buenas razones para poner NULL a un campo, trata siempre de evitar esto y colocarlas con NOT NULL, ya que este tipo de columnas (NULL) requieren de un espacio adicional y de una complejidad interna en las sentencias de comparación

9. Guardar direcciones IP en campos UNSIGNED INT

Muchos de los desarrolladores (me incluyo) guardamos las direcciones IP en un campo VARCHAR sin saber que las podemos almacenar en campos INT que tiene solo 4 bytes de espacio, tenemos que asegurarnos que el campo sea UNSIGNED INT para aceptar valores más altos, ya que la dirección IP utiliza el rango de 32 bit.
Para transformar las IP a campo numérico y viceversa podemos utilizar funciones MySQL y PHP.

//mysql
$r = "UPDATE users SET ip = INET_ATON('{$_SERVER['REMOTE_ADDR']}') WHERE user_id = $user_id";
//php
$ip_num = ip2long($_SERVER['REMOTE_ADDR']);
$ip_normal = long2ip($row['ip_address']);

10. Evitar ejecutar consultas dentro de bucles

Un claro ejemplo es al actualizar una serie de filas en la BD, esto se podría resumir en una sola consulta para optimizar recursos en nuestro servidor.
PHP

foreach  ($display_order  as $id => $ordinal) {
    $sql = "UPDATE categories SET display_order = $ordinal WHERE id = $id";
    mysql_query($sql);
}

MySQL

UPDATE  categories
    SET display_order = CASE id
        WHEN 1 THEN 3
        WHEN 2 THEN 4
        WHEN 3 THEN 5
    END
WHERE id IN (1,2,3)

Post Original: Nettuts+

zp8497586rq

jfdghjhthit45

Fancy Checkbox con CSS y jQuery

Este es un script que cambiara la apariencia de los clásicos elementos checkbox de los formularios web,
para nuestro ejemplo utilizaremos jQuery que lo llamaremos directamente de Google API.

Comenzando con el JavaScript

Primero incluiremos la librería jQuery, luego utilizaremos una función para que convierta los simples checkbox en botones seleccionables:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".checklist input:checked").parent().addClass("selected");
	$(".checklist .chk-select").click(
		function(event) {
			event.preventDefault();
			$(this).parent().addClass("selected");
			$(this).parent().find(":checkbox").attr("checked","checked");
		}
	);
	$(".checklist .chk-deselect").click(
		function(event) {
			event.preventDefault();
			$(this).parent().removeClass("selected");
			$(this).parent().find(":checkbox").removeAttr("checked");
		}
	);
});
</script>

Trabajando el CSS

Ahora incluiremos los estilos para dar la apariencia a la lista de checkbox

<style type="text/css">
.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.checklist li {
	float: left;
	margin-right: 10px;
	font: normal 12px "Lucida Grande","Lucida","Arial",Sans-serif;
}
.checklist li.selected a.chk-deselect {
	display: block;
}
.checklist li.selected .chk-select {
	display: none;
}
.chk-select,a.chk-deselect{
    padding: 5px 7px;
    float: left;
    font-weight:bold;
    text-decoration:none;
}
.chk-select {
	display: block;
	background: #8DC63F;
	color: #fff;
}
a.chk-deselect{
	display: none;
	background: #eee;
    color: #8DC63F;
}
.checklist li input {
	display: none;
}
.sendit {
	display: block;
	float: left;
	top: 118px;
	left: 10px;
	width: 115px;
	height: 34px;
	border: 0;
	cursor: pointer;
	background: #3FA2C6;
	margin: 20px 0;
    color:#fff;
    font-weight:bold;
}
.round{
 -webkit-border-radius: 3px;
 -moz-border-radius: 6px;
 -ms-border-radius: 6px;
}
</style>

Creando el HTML

Dentro del body generaremos una lista HTML con siguiendo esta estructura

<ul class="checklist">
    <li>
        <input name="jqdemo" value="value1" type="checkbox"/>
        <a class="chk-select round" href="#">#php</a>
        <a class="chk-deselect round" href="#">#php</a>
    </li>
    <li>
        <input name="jqdemo" value="value2" type="checkbox"/>
        <a class="chk-select round" href="#">#css</a>
        <a class="chk-deselect round" href="#">#css</a>
    </li>
    <li>
        <input name="jqdemo" value="value3" type="checkbox" checked="checked"/>
        <a class="chk-select round" href="#">#js</a>
        <a class="chk-deselect round" href="#">#js</a>
    </li>
    <li>
        <input name="jqdemo" value="value4" type="checkbox"/>
        <a class="chk-select round" href="#">#ajax</a>
        <a class="chk-deselect round" href="#">#ajax</a>
    </li>
</ul>

Ejemplo

Redireccionar subdominios a sub carpetas con htaccess

En este post explicaremos un método para redireccionar subdominios a sub carpetas utilizando .htaccess para el objetivo, de esta forma no será necesario crear subdominios en un panel de administración del proveedor de hosting.

Este código redireccionara un subdominio y ejecutara la carpeta correspondiente
[php]
RewriteEngine On
RewriteCond %{HTTP_HOST} ^demos.tednologia.com$
RewriteCond %{REQUEST_URI} !^/demos/
RewriteRule (.*) /demos/$1
RewriteEngine On
RewriteCond %{HTTP_HOST} ^descargas.tednologia.com$
RewriteCond %{REQUEST_URI} !^/descargas/
RewriteRule (.*) /descargas/$1
RewriteEngine On
RewriteCond %{HTTP_HOST} ^galeria.tednologia.com$
RewriteCond %{REQUEST_URI} !^/galeria/
RewriteRule (.*) /galeria/$1
[/php]

jfdghjhthit45

Utilizando Facebook Connect con PHP

n nuestro anterior Post vimos como loguearnos a nuestro WebSite con Twitter y el protocolo OAuth, esta vez realizare un tutorial para hacerlo con Facebook Connect, si utilizan WordPress pueden ver la implementación mediante un plugin aquí : Facebook Connect para WordPress.

Paso 1 : Crear una aplicación en Facebook

En este paso debemos crear y configurar nuestra aplicación Facebook, pueden entrar a esta dirección para hacerlo:
http://www.facebook.com/developers/createapp.php

Ahora entramos en el Tab Connect e ingresamos en Connect URL la ruta de nuestro site (esto será necesario para relacionar el Website de logueo y la aplicación Facebook).

Paso 2: Crear la aplicación para login en nuestra Web.

Para esto necesitaremos de la librería Facebook Connect PHP5 Library, nos ayudara mucho para obtener diferentes datos de facebook respecto al usuario logueado.
Descargar
Después de bajar la librería procedemos a separar los archivos útiles para nuestro propósito, para esto solo necesitaremos los siguientes archivos.

/facebook-client
/lib
/javascript
/index.php
/xd_receiver.php

Luego de esto abriremos el archivo config.php ubicado en /lib, aquí ingresaremos los datos respectivos a nuestra aplicación:

define(CONNECT_APPLICATION_PATH, "/path");
$callback_url    = 'http://urlpruebas.com';
$api_key         = '123456***';
$api_secret      = 'f4ec5e***';

Teniendo la aplicación de nuestro Site ya configurada pasaremos a crear un nuevo index.php, el anterior lo eliminan o lo pueden renombrar.
En código html agregaremos esto al final de




< ?php if(!$user){?>

< ?php }?>

el primer script nos permitirá utilizar métodos de Facebook como Autenticación, Cerrar Sesión, Transformar los tags (FBML), entre otros.
El segundo script alojado en nuestro Site, permitirá manejar ventanas de login, funciones que extienden la clase FB.
Dentro del body colocaremos este script php que identificara si el usuario esta logueado o no, en base a esto pintara un boton para loguarnos o los datos del usuario y una lista de amigos.

< ?php
include_once 'lib/config.php';
$user = User::fbc_getLoggedIn();
if($user){
 $fb_active_session = $user->fbc_is_session_active();
}else{
 $fb_active_session = FALSE;
}
if (!$user){
    if (is_fbconnect_enabled()) {
        $html = '
        Connect';
    }else{
        $html = 'fbconnect disabled';
    }
    echo $html;
}else{
    if ($user->fbc_is_facebook_user()){
        echo $user->fbc_getProfilePic_xfbml(true).'
'; echo $user->fbc_uid.'
'; echo $user->fbc_first_name.'
'; echo $user->fbc_last_name.'
'; echo $user->fbc_name.'
'; echo 'Logout'; $friends = $user->fbc_get_all_friends(TRUE); if(count($friends)>0){ for($i=0;$i<10;$i++){ echo ''; } } } } ?>

jfdghjhthit45

Videos muy buenos sobre charla del GrupoPHP Argentina

div style=”text-align:center”>
El pasado 6 de Marzo de hizo la primera charla del GrupoPHP de Argentina, trataron de temas muy buenos como Programación Orientada a Objetos en PHP5, Optimización y escalabilidad, desarrollo de aplicaciones Facebook, entre otros, aquí les dejo los enlaces para que puedan ver las charlas.

zp8497586rq

Utilizando Twitter OAuth con PHP

Twitter OAuth es un protocolo de autenticación que permite a los usuarios conectarse con nuestro WebSite mediante una confirmación previa en Twitter.

En estos días son muchas las Web que usan este método para el registro de usuarios de forma más fácil.
En este tutorial explicaremos detalladamente como lograr implementar esta funcionalidad a nuestro sitio Web.

Paso 1: Crear una aplicación en Twitter.

Para crear una aplicación en Twitter deberán loguearse e ingresar al enlace:
Settings > Connections
En el modulo derecho podremos ver un enlace pequeño para registrar aplicaciones, posteriormente le dan a “Register new application”.

Prestemos atención al formulario Demo.

  • Application Name: Este sera el texto que aparecera en el from del Tweet.
  • Application Website: El enlace del from en el Tweet.
  • Callback URL: Sera la url a donde redireccionara Twitter despues de loguearte.
  • Default Access type: Esto servira para interactuar con Twitter desde nuestra Web (Tweetear, seguir a otros, enviar mensajes privados, etc).

Luego del registro exitoso, nos mostraran la configuración que luego necesitaremos para integrar la aplicación con nuestro sitio Web.

Paso 2 : Implementando Twitter OAuth con PHP

Para esto existe una clase que hará más sencillo el proceso, descargaremos la librería aquí.
Ahora abriremos el archivo config.php y colocaremos la información correcta que la encontraremos en la aplicación creada en Twitter.

Para nuestro demo, necesitaremos estos archivos:

  • config.php : Archivos de configuración para Loguearse con Twitter.
  • OAuth.php : Clase para manejar el protocolo OAuth
  • twitteroauth.php : Clase para interactuar con Twitter y el protocolo OAuth.
  • callback.php : Proceso que redireccionara a una ruta personalizada.
  • redirect.php : Genera una url valida y redireccionara a Twitter para loguearse a nuestro WebSite.
  • logout.php : Cerrar sesión en nuestro Website ( no en Twitter.com ).

Estos archivos vienen por defecto en la librería, nuestro trabajo será generar un index que nos verifique el estado del usuario de Twitter, si esta logueado podrá imprimir sus datos, sino pintara un enlace para iniciar sesión.

< ?php
session_start();
require_once('config.php');
require_once('twitteroauth.php');
if (empty($_SESSION['access_token']) || empty($_SESSION['access_token']['oauth_token']) || empty($_SESSION['access_token']['oauth_token_secret'])){
    header('Location: ./logout.php');exit;
}
$access_token = $_SESSION['access_token'];
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token['oauth_token'], $access_token['oauth_token_secret']);
$content = $connection->get('account/verify_credentials');
print_r($content);exit;
?>

De esta manera podemos loguearnos con una cuenta Twitter en nuestra Web, olvidándonos por completo de llenar registros y validarlos, Twitter hará la validación de credenciales, datos, etc.
Cuando iniciemos una nueva aplicación Web que necesite un registro podemos agregar esta funcionalidad como alternativa para aquellos que dispongan de una cuenta en esta red social.

Más info: Twitter API Wiki / OAuth FAQ

jfdghjhthit45
zp8497586rq