armen3003
Usuario (Colombia)
Jeditable plugin para jQuery. Con unas pocas líneas de código JavaScript que le permiten hacer clic y editar el contenido de los diferentes elementos de XHTML. Como Funciona En esta oportunidad he realizado una aplicación donde listo registros de una tabla usuarios. Cuando el usuario hace clic en la celda de la fila , el bloque de texto se convierte en un formulario, para que el usuario pueda editar el contenido pulsando enter o presiona el botón Enviar, luego nuevo texto se envía al servidor web y se guardara quedando con el nuevo texto. Incluimos las librerias <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jeditable.js"></script> JS dijo:$(document).ready(function() { // ambos procesaran en save.php // servira para editar los de tipo input text. $('.text').editable('save.php'); // servira para editar el cuadro combinado de paises $('.select').editable('save.php', { data : " {'1':'Argentina','2':'Bolivia','3':'Peru', '4':'Chile'}", type : 'select', submit : 'OK' }); // servira para editar el textarea. $('.textarea').editable('save.php', { type : 'textarea', submit : 'OK' }); }); Listado de registros de la tabla usuarios dijo:<fieldset id="content"> <legend>Editando registros de una tabla con Jeditable plugin jQuery.</legend> <table id="table"> <thead> <tr class="head"> <th>Nombre</th> <th>Apellidos</th> <th>Edad</th> <th>Email</th> <th>Pais</th> <th>Observaciones</th> </tr> </thead> <tbody> <?php while($row = mysql_fetch_array($query)) { $id = $row['id_usuario']; ?> <tr> <td><div class="text" id="nombre_usuario-<?php echo $id ?>"><?php echo $row['nombre_usuario']?></div></td> <td><div class="text" id="apellido_usuario-<?php echo $id ?>"><?php echo $row['apellido_usuario']?></div></td> <td><div class="text" id="edad_usuario-<?php echo $id ?>"><?php echo $row['edad_usuario']?></div></td> <td><div class="text" id="email_usuario-<?php echo $id ?>"><?php echo $row['email_usuario']?></div></td> <td><div class="select" id="id_pais-<?php echo $id ?>"><?php echo $paises[$row['id_pais']]?></div></td> <td><div class="textarea" id="observacion_usuario-<?php echo $id ?>"><?php echo $row['observacion_usuario']?></div></td> </tr> <?php } ?> </tbody> </table> </fieldset> save.php, se realizara la actualizacion de todos los campos de la tabla usuarios dijo:<?php include( "conexion.php" ); $data = explode("-",$_POST['id']); $campo = $data[0]; // nombre del campo $id = $data[1]; // id del registro $value = $_POST['value']; // valor por el cual reemplazar $paises = array( "1"=>"Argentina", "2"=>"Bolivia", "3"=>"Peru", "4"=>"Chile" ); // sql para actualizar el registro $query = mysql_query("UPDATE usuarios SET ".$campo." = '".$value."' WHERE id_usuario = '".$id."'" ); echo ($campo == 'id_pais') ? $paises[$value] : $value; ?> Descargar || Demo FUENTE
VideoTutorial 1 del Curso sobre la Api de Facebook. En este video analizaremos cómo funciona Facebook, y veremos qué es una APP interna, veremos la plataforma de developers, y nos crearemos nuestra primera APP. Verás que en el video surgen algunos problemas mientras la creamos, pero es porque Facebook constantemente está cambiando su interface de trabajo. También nos descargaremos el SDK de PHP para poder trabajar con la API, y daremos una pequeña descripción de sus elementos. Link: http://vimeo.com/27460498 Descargar Video- Incluye Archivos Utilizados En El Video VideoTutorial 2 del Curso sobre la Api de Facebook. En este video usaremos los archivos facebook.php y base_facebook.php que vienen con la API. Crearemos una new Facebook y le pasaremos como parámetro el API ID ( API ID ) y el API SECRET que nos proporciona deverlopers.facebook.com para nuestra APP. Usaremos los métodos getUser, api, getLogoutUrl, getLoginUrl. Obtendremos los datos de la cuenta del usuario usando el array $user_profile, y explicaremos el tema de los permisos para obtener acceso a los datos del usuario. Link: http://vimeo.com/27509343 Descargar Video- Incluye Archivos Utilizados En El Video VideoTutorial 3 del Curso sobre la Api de Facebook. Utilizaremos la autenticación oauth de Facebook para poder manejar los permisos que deben pedírsele al usuario para poder acceder a sus datos mas sencibles, como el email o publicar en su muro por ejemplo. Utilizaremos el método $facebook->api para realizar una consulta FQL con la cual obtener los datos del usuario directamente desde las tablas de Facebook. Finalmente veremos cómo obtener los datos del usuario desde el array de resultados, y dejaremos lista nuestra APP para comenzar a generarle una interface mas funcional en los próximos videos. Link: http://vimeo.com/27895536 Descargar Video- Incluye Archivos Utilizados En El Video VideoTutorial 4 del Curso sobre la Api de Facebook. Acá configuraremos nuestra primera APP funcional. Usaremos la que hemos creado ( probando_ando ) para construirle un menú de navegación y una sencillísima maquetación CSS, desde la cual el usuario podrá ir al Fans Page de la APP, o a su Perfil. Luego desarrollaremos un pequeño sistema denomindado tip de programación web, que le mostrarán al usuario un mensaje con random ( aleatorio ), y se le dará la posibilidad al mismo usuario de compartirlo en su muro. Para eso usaremos la librería simpleFacebookGraph.js que trae todo lo necesario para usar el javascript de facebook a nivel nativo, utilizando su método fb.publish. Link: http://vimeo.com/28091565 Descargar Video - Incluye Archivos Utilizados En El Video VideoTutorial 5 del Curso sobre la Api de Facebook. Comenzaremos un bloque dedicado a la creación de nuestra segunda APP funcional dentro de Facebook. Dicha aplicación, consiste en un sistema de noticias actuales, subidas por los propios usuarios. Se les dará la opción a quienes se suscriban a la APP, de ver las noticias, crear nuevas noticias, y viralizarlas a través de distintas herramientas (botón send, postear en el muro, invitar a sus amigos a usar la app, entre otras cosas). En este video en particular nos concentraremos en mostrar la flexibilidad en la construcción de la APP, le crearemos el menú de navegación, veremos que es mas eficiente cargar los links usando top.location con rutas absolutas, entre otros tips que si bien es cierto no usan mucho la API, nos permitirán evitar posibles errores a futuro. Link: http://vimeo.com/28290812 Descargar Video - Incluye Archivos Utilizados En El Video VideoTutorial 6 del Curso sobre la Api de Facebook. Seguimos desarrollando nuestra APP de noticias en Facebook. Crearemos la interface para mostrar el listado de noticias, ordenándolas por categorías, y desarrollaremos el detalle de cada noticia desde la base de datos mysql. También usaremos el método $facebook->api para obtener los datos del usuario que creó la noticia. Ete video nos permitirá hacernos una idea de cómo se construye una APP a nivel general, haciendo interactuar el código PHP con las herramientas de la API de Facebook. Link: http://vimeo.com/28468539 Descargar Video - Incluye Archivos Utilizados En El Video VideoTutorial 7 del Curso sobre la Api de Facebook. Nuevo!!! Acá seguiremos configurando la interface del detalle de la noticia.Incorporaremos 3 funcionalidades de viralización, el botón Send, el botón Me Gusta, y una opción para que el usuario pueda compartir en su muro la noticia Ademas mostraremos el nombre de la categoría a la que pertenece la noticia para darle mas usabilidad a la app. Link: http://vimeo.com/28649300 Descargar Video - Incluye Archivos Utilizados En El Video ACTUALIZANDO... FUENTE
Este es un script que nos permitirá implementarle a nuestros formularios la posibilidad de que los usuarios puedan ingresar fechas a través de un elegante calendario construido con javascript y css. Trabaja con unas librerías que están incorporadas en el link de descarga. A continuación les muestro una sencilla manera de implementarlo: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento sin título</title> <link href="css/calendario.css" type="text/css" rel="stylesheet"> <script src="js/calendar.js" type="text/javascript"></script> <script src="js/calendar-es.js" type="text/javascript"></script> <script src="js/calendar-setup.js" type="text/javascript"></script> </head> <body> <input type="text" name="ingreso" id="ingreso" value="dd-mm-yyyy" /> <img src="ima/calendario.png" width="16" height="16" border="0" title="Fecha Inicial" id="lanzador"> <!-- script que define y configura el calendario--> <script type="text/javascript"> Calendar.setup({ inputField : "ingreso", // id del campo de texto ifFormat : "%d-%m-%Y", // formato de la fecha que se escriba en el campo de texto button : "lanzador" // el id del botón que lanzará el calendario }); </script> </body> </html>DEMO DESCARGAR EJEMPLO FUENTE
No cabe duda de que cada vez se oye hablar mas del estándar HTML 5, casi todos los navegadores lo soportan ya y algunos sitios web empiezan a implementarlo, aprovechando sus numerosas características multimedia. Así que si quieres estar al día y aprender mas sobre este estándar os dejo aquí una lista con diez sitios en los que buscar inspiración además de documentaros a fondo, con tutoriales, recursos, ejemplos, etc… http://diveintohtml5.org/ http://w3schools.com/ http://html5demos.com/ http://html5.org/ http://dev.w3.org/html5/spec/Overview.html http://developer.mozilla.org/ http://www.focus.com/images/view/11905/ http://html5gallery.com/ http://html5games.com/ http://studio.html5rocks.com/ Te invito a que visites mis otros post: FUENTE
Una base de datos es un elemento fundamental en la mayoría de las aplicaciones web. Si usamos PHP, probablemente usemos MySQL - integrante del conocido LAMP. PHP es relativamente sencillo y la mayoría de nuevos desarrolladores pueden escribir código funcional en pocas horas. Sin embargo, construir una solida aplicación con diseño de base de datos toma su tiempo y experiencia. Por ello, siguiendo este post de sitepoint, vamos a listar los 10 peores errores de MySQL; pero, que también podrían darse con otro servidor de base de datos SQL. 1. Usar MyISAM en vez de InnoDB MySQL tiene una variedad de motores o database engines; pero, es probable que nos hayamos encontrado casi siempre con MyISAM y/o InnoDB. MyISAM es el motor por defecto; sin embargo, a menos que no estemos creando una base de datos sencilla o de pruebas, usar MyISAM como nuestro motor es una opción equivocada. MyISAM no soporta restricciones de claves foráneas o transacciones, esenciales para mantener la integridad referencial de los datos. Además, del hecho de que toda la tabla se bloquea cuando uno inserta o actualiza un registro, lo que provoca un efecto adverso en el rendimiento de la aplicación, cuando esta crece. La solución: Usar InnoDB... 2. Usar las funciones MySQL de PHP Desde sus inicios, PHP nos provee de librerías de funciones especiales para el manejo de MySQL. Muchas aplicaciones dependen de las funciones mysql_connect, mysql_query, mysql_fetch_assoc, etc. pero el propio manual de PHP dice:
Muchas veces cuando desarrollamos nuestras aplicaciones web necesitamos interactuar con nuestra base de datos en Mysql, recuperar o mostrar registros con unas líneas de código SQL. Y esta vez hare un listado de sentencias SQL muy útiles para nuestros proyectos con PHP y Mysql. Son Basicas pero pueden ayudarte... Conectarse a la base de datos dijo:<?php $cn = mysql_connect( "localhost","user","pwd" ); mysql_select_db("demo", $cn); ?> Recuperar el total de registros de una tabla usando COUNT dijo:<?php $query = mysql_query("SELECT COUNT(*) 'total' FROM mi_tabla", $cn); $row = $query->mysql_fetch_array(); echo "Total de Registros".$row['total']; ?> Otra manera es utilzando la funcion mysql_num_rows dijo:<?php $query = mysql_query("SELECT * FROM mi_tabla", $cn); echo "Total de Registros".$query->mysql_num_rows(); ?> Obtener un limite de registros de nuestra tabla con LIMIT dijo:<?php /* El primer parametro indica la posicion desde donde se empesara a mostrar los registros 0 es el primer registro. El segundo indica la cantidad de registros a mostrar */ $query = mysql_query("SELECT * FROM mi_tabla LIMIT 0, 10", $cn); ?> Mostrar registros aleatoreos con RAND() dijo: <?php $query = mysql_query("SELECT * FROM mi_tabla ORDER BY RAND()", $cn); ?> Mostrar el máximo y mínimo valor de un campo con MAX y MIN dijo:<?php // Obtener el mayor id de mi tabla $query = mysql_query("SELECT MAX (id_tabla) FROM mi_tabla", $cn); // Obtener el minimo id de mi tabla $query = mysql_query("SELECT MIN (id_tabla) FROM mi_tabla", $cn); ?> Utilizando LIKE para hacer una búsqueda dijo:<?php // Los registros que empiecen con la letra M $query = mysql_query("SELECT * FROM mi_tabla WHERE nombre_campo LIKE 'M%'", $cn); // Los registros que finalicen con la letra M $query = mysql_query("SELECT * FROM mi_tabla WHERE nombre_campo LIKE 'M%'", $cn); // Los registros que contenga la letra S $query = mysql_query("SELECT * FROM mi_tabla WHERE nombre_campo LIKE '%S%'", $cn); ?> Usando expresiones regulares REGEXP dijo:<?php // Que contengan la letra s $query = mysql_query("SELECT * FROM mi_tabla WHERE nombre_campo REGEXP 's'", $cn); // Los registros que inician con b: $query = mysql_query("SELECT * FROM mi_tabla WHERE nombre_campo REGEXP '^b'", $cn); // Los que finalizan con la palabra te $query = mysql_query("SELECT * FROM mi_tabla WHERE nombre_campo REGEXP 'fy$'", $cn); ?> FUENTE
Este es un sencillo script nos muestra algunos métodos para encriptar usando Javascript...Usaremos básicamente dos maneras, uno reversible y otro irreversible. Lo haremos en formato md5 y base64. Primero usaremos una librería llamada md5.js ( la podrán descargar mas abajo ). Este es un método irreversible, muy útil para darle seguridad a los registros de usuarios por ejemplo. A continuación les muestro cómo implementarla con un sencillo ejemplo: <html> <head> <title>Documento sin título</title> <script src="js/md5.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> /*haremos una pequeña función para mostrar cómo funciona */ function ejemplo(texto){ var segura=calcMD5(texto);//encripto la cadena usando la función calcMD5() alert("La cadena "+texto+" encriptada es="+segura);//muestro la cadena encriptada } </script> </head> <body> <form name="form" action="md5_js.php" method="get"> Ingrese un texto:<input type="text" name="name" /><br /> <input type="button" value="Encriptar" title="Encriptar a md5" onClick="ejemplo(document.form.name.value)" /> </form> </body> </html> DEMO Ahora mostraremos un método reversible. Se trata de encriptación en base 64, para lo cual necesitaremos la librería base_64.js (también la pueden descargar mas abajo). A continuación les muestro un ejemplo: <html> <head> <title>Documento sin título</title> <script src="js/base_64.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> /*haremos una pequeña función para mostrar cómo funciona */ function ejemplo(texto){ var encripta=Base64.encode(texto);//encripto la cadena var des=Base64.decode(encripta);//desencripto la cadena alert("La cadena "+texto+" encriptada es="+encripta);//muestro la cadena encriptada alert("La cadena "+encripta+" desencriptada es="+des);//muestro la cadena desencriptada } </script> </head> <body> <form name="form" action="md5_js.php" method="get"> Ingrese un texto:<input type="text" name="name" /> <br /> <input type="button" value="Encriptar" title="Encriptar a md5" onClick="ejemplo(document.form.name.value)" /> </form> </body> </html> DEMO DESCARGAR EJEMPLOS FUENTE
Cheat Sheets Útiles Para Desarrolladores Y Diseñadores Web Para los diseñadores o desarrolladores web, aprenderse de memoria todo lo relacionado con un lenguaje resulta una tarea bastante difícil, es por eso que aquí les dejo una gran recopilación de Cheat Sheets o Chuletas. Para los que no saben que esto, los cheat sheets son guías de referencia con la información más útil, características y/o funciones de un lenguaje en particular. En esta colección he recopilado 54 Cheat Sheets que pueden ser de bastante utilidad para los diseñadores y desarrolladores web. HTML ____________________________________________________________________________________________________________ HTML5 Visual Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ HTML5 Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ HTML5 Canvas Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ HTML Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ HTML Character Entities Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ ASCII-HTML-Characters DESCARGAR ____________________________________________________________________________________________________________ XHTML Cheat Sheet DESCARGAR CSS ____________________________________________________________________________________________________________ CSS 3 Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ CSS 2.1 Help Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ CSS 3 Help Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ CSS2 Visual Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ CSS2 Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Most Practical CSS Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ SEO (Optimizacion Para Buscadores) ____________________________________________________________________________________________________________ SEO Cheat Sheet 0.4 DESCARGAR ____________________________________________________________________________________________________________ SEO Cheat Sheet: Anatomy of A URL DESCARGAR ____________________________________________________________________________________________________________ SEO Web Developer Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ WordPress ____________________________________________________________________________________________________________ WordPress Visual Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ WordPress Help Sheet Wallpaper DESCARGAR ____________________________________________________________________________________________________________ WordPress Template Tags Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Complete WordPress Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ WordPress Help Sheet DESCARGAR ____________________________________________________________________________________________________________ Color ____________________________________________________________________________________________________________ RGB Hex Colour Chart DESCARGAR ____________________________________________________________________________________________________________ Color Quick Reference Guide DESCARGAR ____________________________________________________________________________________________________________ Colors Cheatsheet DESCARGAR ____________________________________________________________________________________________________________ JavaScript ____________________________________________________________________________________________________________ JavaScript Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ JavaScript Quick Reference Card DESCARGAR ____________________________________________________________________________________________________________ jQuery ____________________________________________________________________________________________________________ jQuery 1.4 Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ jQuery 1.4 API Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ jQuery 1.3 Visual Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ jQuery – CSS Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ jQuery 1.3 Cheatsheet DESCARGAR ____________________________________________________________________________________________________________ Mootools ____________________________________________________________________________________________________________ Mootools 1.2 Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Mootools r.83 Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Prototype ____________________________________________________________________________________________________________ Prototype 1.5.0 Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Prototype 1.6.0.2 Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Script.aculo.us ____________________________________________________________________________________________________________ Script.aculo.us Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ PHP ____________________________________________________________________________________________________________ Emezeta Card PHP Cheat Sheet (v0.2) DESCARGAR ____________________________________________________________________________________________________________ PHP Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ PHP Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ PHP Help Sheet DESCARGAR ____________________________________________________________________________________________________________ .htaccess ____________________________________________________________________________________________________________ htaccess Cheatsheet DESCARGAR ____________________________________________________________________________________________________________ htaccess Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ mod_rewrite ____________________________________________________________________________________________________________ mod_rewrite Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Emezeta Card ModRewrite Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Expresiones Regulares (RegExp) ____________________________________________________________________________________________________________ Regular Expressions Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Regular Expressions – Quick Reference Guide DESCARGAR ____________________________________________________________________________________________________________ MySQL ____________________________________________________________________________________________________________ MySQL Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ MySQL Cheatsheet by Example DESCARGAR ____________________________________________________________________________________________________________ Another MySQL Cheatsheet DESCARGAR ____________________________________________________________________________________________________________ Ruby On Rails ____________________________________________________________________________________________________________ Ruby on Rails Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Ruby On Rails – A Cheatsheet DESCARGAR ____________________________________________________________________________________________________________ ASP ____________________________________________________________________________________________________________ ASP Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Python ____________________________________________________________________________________________________________ Python Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Python 2.6 Cheat Sheet DESCARGAR ____________________________________________________________________________________________________________ Te invito a que visites mis otros post: 5 trucos de CSS para el diseño de tu sitio web Cómo mejorar tu sitio Web mediante JavaScript Los mejores complementos de Chrome para desarrolladores. Aprende Sobre Seguridad Web Para Proteger Tus Aplicaciones 10 Webs Para Aprender HTML 5 Que son y como usar los MetaTags de HTML 8 errores que debemos evitar cuando diseñamos una web ¿Ves caracteres raros en tu web? Codifica Los Caracteres Herramienta de variacion de colores para paginas web Las mejores 8 Extensiones para Webmasters de Firefox 7 herramientas increíblemente útiles para evaluar un diseño Coleccion De La Revista Solo Programadores FUENTE
Cómo mejorar tu sitio Web mediante JavaScript Con JavaScript disponemos de un poderoso lenguaje que nos permite añadir muy buenas funcionalidades a nuestras páginas Web con solo unas pocas líneas de código. NOTA:El propósito de este artículo no es entrar en detalle sobre que es JavaScript ni detallar su funcionamiento. Lo que intentamos es entregar algunos pequeños códigos para que puedan insertarlos en sus sitios y saber que es lo que hace cada uno de ellos. Con ese aviso, vamos de lleno a este tutorial. La verdad es que para el desarrollo no necesitaremos materiales especiales, a lo más un editor Web (como Dreamweaver o NVU) o simplemente un editor de texto (como Block de Notas) para insertar los códigos. Contenido: En resumen veremos: 1- Crear un link para que añadan nuestro sitio a Favoritos. 2- Que dejen nuestro sitio como página de inicio. 3- Abrir una ventana emergente. 4- Evitar doble envío de formularios. 5- Marcar/desmarcar todos los checkboxes de un formulario. 6- Redirigir de acuerdo a la resolución de pantalla del usuario. 7- Imprimir la página. Procedimiento: 1.- Añadir sitio a Favoritos: Este pequeño truco nos sirve para crear un vínculo (mediante texto o imagen) para que nuestros visitantes le hagan click y automáticamente añadan nuestra página a Favoritos. El código es bastante sencillo, y es como sigue: <a href="javascript:window.external.AddFavorite('http://www.ejemplo.com','Titulo del sitio');">Agregar a favoritos</a> Solo deben cambiar la URL por la suya y el “Título del Sitio” por el que corresponda. Además si desean, el texto Agregar a favoritos pueden reemplazarlo por una imagen. 2.- Página de Inicio: Otra manera de crear lealtad con nuestros usuarios es otorgarles la posibilidad de dejar nuestro sitio como página de inicio, para que cada vez que abran su navegador, cargue nuestro sitio directamente. Esto se hace añadiendo el siguiente código, el cual creará un vínculo para que cuando hagan click se establezca la página de inicio: dijo:<a href="http://www.ejemplo.com#" class="chlnk" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.ejemplo.com');" style="cursor: hand"> Haznos tu página de inicio</a> 3.- Abrir una ventana emergente: También conocidos como “pop-ups”. A pesar de lo odiosos que pueden ser, tienen una cierta utilidad para algunos contenidos que queramos desplegar. Para abrir ventanas emergentes, debemos primero insertar la siguiente función entre las etiquetas <head> y </head>: <script language="JavaScript"> function Abrir_ventana (pagina) { var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140"; window.open(pagina,"",opciones); } </script> En esta función podemos editar varios parámetros de la ventana a abrir, como por ejemplo si tendra barra de estado, su ancho, alto, si tendra scrollbar, etc. Ahí podrán ajustar dependiendo de la necesidad que tengan. Luego para hacer uso de esa función, en los vínculos desde donde las llamaremos ponemos: <a href="javascript:Abrir_ventana('popup.html')">Abrir la ventana</a> Donde popup.html es la página que se abrirá en la ventana emergente. 4.-Evitar el doble envío de formularios: Cuando tenemos formularios en nuestro sitio (contacto, registro, etc), muchas veces ocurre que algunos usuarios por distintas razones realizan más de un click y se produce un doble envío. Para prevenirlo, debemos partir por insertar la siguiente función entre las etiquetas <head> y </head>: <script LANGUAGE="JavaScript"> <!-- var cuenta=0; function enviado() { if (cuenta == 0) { cuenta++; return true; } else { alert("El formulario ya está siendo enviado, por favor aguarde un instante."; return false; } } // --> </script> Y luego en las propiedades del formulario añadimos la parte de ‘onSubmit” del siguiente código, tal como se muestra: dijo:<form method="POST" action="proceso.php" onSubmit="return enviado()"> ... <input type="submit" value="Enviar"> </form> 5.- Marcar/desmarcar todos los checkbox de un formulario: Cuando presentamos un formulario a los visitantes, en ocasiones les entregamos una serie de opciones que les dejamos marcar o desmarcar. Para esto es muy útil añadir un pequeño link para que los marquen o desmarquen todos si así lo desean. Para esto primero añadimos entre las etiqueas <head> y </head>: <SCRIPT LANGUAGE = "JavaScript"> <!-- function modificar_boxes(chequear,cantidad){ for (i=0; i < cantidad ; i++ ){ if (chequear){ document.forms[0].opcion.checked=true; }else{ document.forms[0].opcion.checked=false; } }} --> </SCRIPT> Y luego en el formulario luego de que añadimos los checkboxes, añadimos lo siguiente: dijo:<INPUT TYPE=button NAME="marcar" VALUE="Marcar todos" onClick="modificar_boxes(true,3)"> <INPUT TYPE=button NAME="desmarcar" VALUE="Desmarcar todos" onClick="modificar_boxes(false,3)"> 6.- Redirigir de acuerdo a la resolución de pantalla del usuario: Cuando construimos un sitio Web, un aspecto importante a tener en cuenta es la resolución de pantalla de los visitantes. Siempre se ha pensado en un estandar de 1024×768 pero hoy en día muchos usuarios tienen resoluciones mayores y en algunos casos menores, por lo que es una buena opción tener distintas modalidades de nuestro Sitio y redirigirlos de acuerdo a la que tienen. Primero debemos añadir entre las etiquetas <head> y </head>: <script LANGUAGE="JavaScript"> function redireccionar() { var url640x480 = "http://www.tu-sitio.com/640x480"; var url800x600 = "http://www.tu-sitio.com/800x600"; var url1024x768 = "http://www.tu-sitio.com/1024x768"; if ((screen.width == 640) && (screen.height == 480)) window.location.href= url640x480; else if ((screen.width == 800) && (screen.height == 600)) window.location.href= url800x600; else if ((screen.width == 1024) && (screen.height == 768)) window.location.href= url1024x768; else window.location.href= url640x480; } </script> Ahí podemos modificar de acuerdo a las resoluciones que deseemos soportar. Y luego modificamos la etiqueta <body> dejandola así: dijo:<body onLoad="redireccionar()"> 7.- Imprimir la página: Para el final dejamos un truco bastante sencillo, el cual nos permitirá entregarle a los usuarios la utilidad de que impriman la página actual, mediante el siguiente código: <a href="javascript:print()">Imprimir</a> Con eso podrán imprimir el resultado de alguna información que les presentemos. Te invito a que visites mis otros post:
Con la llegada de las extensiones al navegador de Google, Chrome puede ampliar su funcionalidad adaptándose a nuestras necesidades como diseñadores web. Complementos de Chrome para diseño web: Firebug Lite:depurar errores de código en una página web. Awesome Screenshot:captura páginas web y modifícalas. Web Developer:añade un set de herramientas a tu navegador para el desarrollo web. BuiltWith:accede a información sobre cómo ha sido realizado un determinado website. Chrome Sniffer conoce que tecnología, frameworks y aplicaciones open source está usando un website Window Resizer comprueba como se visualiza el diseño de un site en diferentes resoluciones de pantalla. Stylebot personalizar muy rápidamente los estilos CSS de cualquier web Apture Highlights: accede de forma instantánea y sin dejar la web que estas navegando a Google, YouTube, Flickr, Wikipedia....para acceder a más información sobre un tema. Speed Tracer: mejora los tiempos de carga de tu site, identificando los problemas que afecten al rendimiento. EyeDroper averigua el color que es usado en una determinada web. MeasureIT mide todos aquellos elementos de una web. EM Calculator convierte pixels en em desde el navegador. Te invito a que visites mis otros post: Cheat Sheets Útiles Para Desarrolladores Y Diseñadores Web 5 trucos de CSS para el diseño de tu sitio web Cómo mejorar tu sitio Web mediante JavaScript Aprende Sobre Seguridad Web Para Proteger Tus Aplicaciones 10 Webs Para Aprender HTML 5 Que son y como usar los MetaTags de HTML 8 errores que debemos evitar cuando diseñamos una web ¿Ves caracteres raros en tu web? Codifica Los Caracteres Herramienta de variacion de colores para paginas web Las mejores 8 Extensiones para Webmasters de Firefox 7 herramientas increíblemente útiles para evaluar un diseño Coleccion De La Revista Solo Programadores