Archive for the Tutoriales Category
Posted on August 13, 2010 by Damian
Hasta hace poco Twitter permitía la actualización de status a través de un método sencillo mandando usuario , contraseña y mensaje de una sola vez a través de una sencilla función. Hoy en día esto ya no es así y el único modo de interactuar con la API de Twitter es usando OAuth
Posted on August 2, 2010 by Damian
Hoy en día los buscadores están empezando a puntuar la velocidad de carga de las páginas webs para mostrar los diferentes resultados ( engrosando así sus algoritmos para mejorar la experiencia de los usuarios). Hay diversidad de formas de acelerar la carga de una página web pero podemos resumirlas en unas cuantas.
Posted on June 13, 2010 by Damian
Hola a todos! Últimamente empieza a sonar más fuerte HTML5 y CSS3 , a medida que los navegadores se hacen más compatibles con estas nuevas tecnologías, así que hoy pensé en traerles un par de “trucos” que pueden realizar con CSS3 y que hasta ahora solo era posible con Javascript o imágenes.
Esquinas redondeadas
Hace un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners.
Hoy les explico lo mismo tan solo usando CSS3.
<div class="rounded"> Este es un ejemplo para http://blog.timersys.com</div>
Dado un div cualquiera aplicamos la propiedad border-radius
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
}
Degradados y sombras con CSS3
Utilizando el ejemplo anterior vamos a aplicarle sombras al DIV y luego un degradado. Aunque en mi ejemplo utilizo DIVS cabe decir que se puede aplicar a otros objetos como botones y crear efectos muy buenos. Pueden ver un ejemplo de botones con degradado y sombras aquí.
Aplicando sombras al DIV y letras
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
}
Y por último le aplicamos un degradado
.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff));
background: -moz-linear-gradient(top, #D7E9F3, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
}
Listo !! con estas simples lineas habremos creado unos lindos efectos. Tengan en cuenta que van a necesitar las últimas actualizaciones de sus navegadores para que esto funcione correctamente.
Ver Ejemplo online
Descargar código del ejemplo
Posted on May 24, 2010 by Damian
En mi post anterior prometí que iba a explicar un poco de que trata GreaseMonkey y como lo prometido es deuda aca estamos.
Como bien dice la wikipedia Greasemonkey es una extensión para el navegador Mozilla Firefox e Iceweasel que permite, por medio de pequeñas porciones de código creadas por usuarios, modificar el comportamiento de páginas web específicas. Con esta extensión es posible mejorar la experiencia de lectura de un sitio web, hacerlo más usable, añadir nuevas funciones a las páginas web, corregir errores, mejorar servicios de búsquedas y muchas otras cosas más.
Estas pequeñas o no tan pequeñas porciones de código estan creadas por diversos usuarios de internet en lenguaje javascript y se les llama user scripts. Los nombres de dichos script tienen el formato xxxxxx.user.js , donde xxxxxx es el nombre que querramos ponerle.
Ahora veamos como es un user script por dentro empezando por la cabezera y sus @
// ==UserScript==
// @name eMessages Timersys
// @namespace http://blog.timersys.com
// @description eMessages tool to display messages in eRepublik
// @require http://direccionweb.com/jquery.js
// @include http://ww*.erepublik.com/*
// ==/UserScript==
- @name :nombre del programa
- @namespace :web del autor o otra dirección de interes
- @description :descripción del programa
- @include : Página web en la cual nuestro script funcionará
- @require : A diferencia del resto esta no es obligataria y tan solo la debemos usar cuando querramos cargar uno o más archivos externos. En este caso lo voy a usar para cargar JQuery
A partir de la cabezera todo lo que sigue es código Javascript. En nuestro caso podemos usar JQueryya que hemos incluido el archivo en la cabezera metadata.
Además Greasemonkey dispone de su propia API. Con la cual por ejemplo podemos hacer llamada AJAX de forma similar a como lo hacemos con JQuery.
jQuery(document).ready(function(){
GM_xmlhttpRequest({
method: 'GET',
url: 'http://blog.timersys.com/erepublik/ajax_progreso.php?usuario=12',
onload:function(response){
$('.column:first').prepend( response.responseText);
}
});
Con esta explicación se pueden dar un pequeña idea de como funciona GreaseMonkey. La mayor base de datos de user scripts está en userscripts.org
.
En taringa hay 2 buenos tutoriales para los que quieran empezar: Parte I + Parte II
Documentación de GreaseMonkey (en ingles)
Posted on May 16, 2010 by Damian
Yo personalmente las pocas veces que he implementado un Auto Suggest o caja de sugerencias en mis proyectos he utilizado AJAX Auto Suggest V2.0. No es que haya probado muchos , pero en su día este fue el que más me convencio por su facilidad de uso y de personalización.
Para utilizarlo primero debemos incluir sus archivos:
<link type="text/css" rel="stylesheet" href="autosuggest_inquisitor.css">
<script src="bsn.AutoSuggest_2.1.3.js" type="text/javascript"></script>
Crear un campo de texto y asignarle un Id:
<input type="text" style="width: 200px; color: rgb(204, 204, 204);" id="materiales_input" name="materiales" autocomplete="off">
Luego definimos algunas opciones y creamos el objeto autosuggest:
function autosuggest(){
var options = {
script: "get_materiales.php?limit=6&",//página la cual recibirá la llamada AJAX
varname: "materiales",// nombre de la variable que contendra el valor escrito
json:false,//Podemos elegir JSON o XML
maxresults:10,//Un máximo de resulados para mostrar
timeout:9999,//numero en milisegundos antes de que se cierre la lista de valores sugeridos
noresults:'Ingresar nuevo material a la base de datos' //valor que muestra en caso de no encontrar resultados
};
var as = new bsn.AutoSuggest('materiales_input', options); //creamos el objeto AutoSuggest
}
Para más opciones consultar la página del autor.
Llamamos a la función cuando cargue la página:
<body onload="autosuggest();">
Por último creamos un archivo PHP que devuelva los resultados de búsqueda(en este caso XML) para que se muestren en las sugerencias.
get_materiales.php:
<?
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Fecha del pasado
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // siempre modificado
header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header ("Pragma: no-cache"); // HTTP/1.0
include_once('config/db.php');
$conn=get_db_conn();
$input=utf8_decode(cleanQuery($_GET['materiales']));
$query='SELECT * FROM categoria_materiales WHERE nombreMaterial LIKE \'%'.$input.'%\'';
$materiales=mysql_query($query,$conn);
if (isset($_REQUEST['json']))
{
header("Content-Type: application/json" );
echo "{\"results\": [";
$arr = array();
while ($row=mysql_fetch_assoc($materiales))
{
$arr[] = "{\"id\": \"".$row['idCatMaterial']."\", \"value\": \"".$row['nombreMaterial']."\", \"info\": \"\"}";
}
echo implode(", ", $arr);
echo "]}";
}
else
{
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?><results>";
while ($row=mysql_fetch_assoc($materiales))
{
echo "<rs id=\"".$row['idCatMaterial']."\" info=\"\">".$row['nombreMaterial']."</rs>";
}
echo "</results>";
}
?>
Explicando get_materiales.php:
Formato XML:
<results>
<rs id="1" info="Cheshire">Foobar</rs>
<rs id="2" info="">Foobarfly</rs>
<rs id="3" info="">Foobarnacle</rs>
</results>
Formato JSON:
{ results: [
{ id: "1", value: "Foobar", info: "Cheshire" },
{ id: "2", value: "Foobarfly", info: "" },
{ id: "3", value: "Foobarnacle", info: "Essex" }
] }
Como anotacíon en mi caso al enviar el formulario compruebo si el material ingresado existe en la base de datos y sino existe lo agrego. Por ese motivo en noresults muestro el mensaje de “Añadir a la base de datos”.Para ello hago lo siguiente:
<?
include_once('db.php');
$conn=get_db_conn();
if($_POST['materiales']!=''){
$material=cleanQuery($_POST['materiales']);
$existe=mysql_query("SELECT * FROM materiales WHERE nombreMaterial ='$material'",$conn);
if (mysql_num_rows($existe) == 0) mysql_query("INSERT INTO materiales (nombreMaterial) VALUES ('$material')",$conn);
}
?>
Con todo esto tendriamos el autosuggest o caja de sugerencias funcionando a la perfección.
Pueden ver un EJEMPLO FUNCIONANDO
O tambien DESCARGARSE EL CÓDIGO
Un saludo a todos, espero sus comentarios!
Posted on December 31, 2009 by Damian
Para detectar el idioma del navegador y hacer una web multilenguaje existen diversos métodos. Yo particularmente suelo usar el siguiente:
Primero creo el archivo lang-functions.php
<?php
/*
=============================================================================
Funcion: detectar_idioma_navegador()
-----------------------------------------------------------------------------
Proposito: Esta funcion detecta el idioma por defecto seleccionado en el navegador del visitante.
Si no se detecta un lenguaje valido, se asigna el selecionado por defecto.
=============================================================================
*/
function detectar_idioma_navegador() {
global $conf;
$languages = preg_replace('/(;q=\d+.\d+)/i', '', getenv('HTTP_ACCEPT_LANGUAGE'));
$bol_language_detected = false;
// Comprobamos si el navegador usa alguno de los idiomas que hemos predefinido.
foreach ($conf['lang_enabled'] as $tmp_arr_language) {
if (preg_match('/' . $tmp_arr_language . '/i', $languages)) {
$tmp_str_language_detected = $tmp_arr_language;
$bol_language_detected = true;
break;
}
}
// Si el navegador usa uno de los idiomas seleccionados, se devuelve el path del fichero de idioma
// En caso contrario, se devuelve el path del idioma original
if ($bol_language_detected) {
return $tmp_str_language_detected;
} else {
return $conf['lang_default'];
}
}
Una vez creado el archivo lo incluyo de la siguiente manera:
include("languages/lang-functions.php");
$conf['lang_default'] = 'es'; // idioma por defecto
$conf['lang_enabled'] = array('es','en');
$conf['lang'] = detectar_idioma_navegador();
if(isset($_GET['lang'])) $conf['lang']=$_GET['lang'];// Podemos crear un link como por ej una bandera para permitir cambiar el idioma al usario
require_once("languages/".$conf['lang'].".php");
Por último nos queda crear los archivos de idiomas de la siguiente forma:
es.php
<? // Spanish language file
setlocale(LC_ALL,'es_ES');
define("_MENSAJE", "HOLA SOY UN MENSAJE EN ESPAÑOL");
?>
en.php
<? // English language file
setlocale(LC_ALL,'es_ES');
define("_MENSAJE", "Hi im a English message");
?>
En la web escribiriamos echo (_MENSAJE); y según el idioma del navegador aparecerá de una forma u otra.
Espero que haya servido de ayuda
« Older Entries
Con tu lector preferido.
Via Email.
Por Twitter.