Pues eso amig@s,
Si quieren añadir un efecto tipo fade in en vuestra página web, solo es necesario añadir (aparte de cargar la librería jQuery en el <head> el siguiente código antes de finalizar el </body>:
<script type="text/javascript">
$(document).ready(function(){
/*! Fades in page on load */
$('body').css('display', 'none');
$('body').fadeIn(500);
});
</script>
Espero que les resulte útil!.
martes, 12 de noviembre de 2013
lunes, 11 de noviembre de 2013
Como animar una serie de imagenes en HTML5 (Crear una animación tipo gif)
Pues eso amig@s,
Si necesitan realizar una animación en HTML5 cargando una serie de imagenes, al más puro estilo de un GIF animado, con el siguiente código pueden hacerlo:
<html>
<head>
<title>Demo: Crear animación por Edu Arana</title>
<script type='text/javascript'>//<![CDATA[
onload = function startAnimation() {
var frames = document.getElementById("animacion").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
//]]>
</script>
</head>
<body>
<p><div id="animacion">
<img src="anima/1.gif" />
<img src="anima/2.gif" />
<img src="anima/3.gif" />
<img src="anima/4.gif" />
<img src="anima/5.gif" />
</div>
</p>
</body>
</html>
Donde en el DIV animacion insertamos un IMG con la imagen que necesitemos animar. Funciona tanto en IE como así también en Chrome.
Espero les resulte útil.
Salu2.
Si necesitan realizar una animación en HTML5 cargando una serie de imagenes, al más puro estilo de un GIF animado, con el siguiente código pueden hacerlo:
<html>
<head>
<title>Demo: Crear animación por Edu Arana</title>
<script type='text/javascript'>//<![CDATA[
onload = function startAnimation() {
var frames = document.getElementById("animacion").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
//]]>
</script>
</head>
<body>
<p><div id="animacion">
<img src="anima/1.gif" />
<img src="anima/2.gif" />
<img src="anima/3.gif" />
<img src="anima/4.gif" />
<img src="anima/5.gif" />
</div>
</p>
</body>
</html>
Donde en el DIV animacion insertamos un IMG con la imagen que necesitemos animar. Funciona tanto en IE como así también en Chrome.
Espero les resulte útil.
Salu2.
lunes, 4 de noviembre de 2013
Como hacer que una imagen parpadeé en Javascript
Con el siguiente código, se puede lograr el efecto de que una imagen con un name concreto cree el efecto de parpadeo:
<script type="text/javascript">
function parpadea() {
var imagen = document.images["parpadear"];imagen.style.visibility = (imagen.style.visibility == "visible") ? "hidden" : "visible";
}
setInterval("parpadea()", 500); //Aquí definimos el tiempo en milisegundos.
</script>
<img name="parpadear" src="url de la imagen que desean colocar" alt="imagen parpadeante" />
Espero les resulte útil.
martes, 16 de julio de 2013
Hacer un Sistema de Registro de Usuarios en PHP y MySQL incluyendo un campo autoincremental
Hola amig@s,
Realizando pruebas en PHP con MYSQL para un proyecto de una maratón, he encontrado un código básico de registro en PHP y MYSQL que realiza un insert en una tabla en concreto. El código original lo pueden encontrar aqui: http://web.tursos.com/como-hacer-un-sistema-de-registro-de-usuarios-en-php-mysql/.
La particularidad de este proyecto es que por cada usuario registrado se debía generar un único identificador, es decir, cuando un usuario se registra en el formulario, se le asigna un ID y así por cada registro. Luego mediante consultas SQL se asocia el nombre del usuario y otros datos con su ID.
Utilizando la opción AUTO_INCREMENT de MYSQL podemos decirle a la bbdd a la hora de crear la tabla que este campo que definimos como AUTO_INCREMENT será gestionado por ella y que por cada registro, generará un numero siguiendo un patrón o una secuencia. En oracle se llaman secuencuales y se llaman con la sentencia .NEXTVAL.
Este es el script para crear la tabla:
CREATE TABLE 'usuarios' (
id MEDIUMINT NOT NULL AUTO_INCREMENT,
'usuario' VARCHAR(20) NOT NULL,
'password' VARCHAR(10) NOT NULL,
'nombre' VARCHAR(20) NOT NULL,
'apellido' VARCHAR(20) NOT NULL,
'email' VARCHAR(30) NOT NULL,
'facebook' VARCHAR(30) NOT NULL,
'twitter' VARCHAR(30) NOT NULL,
PRIMARY KEY ('id')
)
Como pueden ver, el ID no puede ser nulo y tiene tiene el parámetro AUTO_INCREMENT al final de la definición del campo. Definimos aparte la PK ID para que sea único.
Recordar que para crear la tabla pueden utilizar (si su hosting lo permite) la herramienta PHPMYADMIN.
Luego creamos un fichero para definir los parámetros de conexión a nuestra bbdd MYSQL, por ejemplo conexion.php:
<?php
// dirección del servidor de bbdd, si es nuestro hosting, lo dejamos como localhost
define('DB_SERVER','localhost');
// nombre de la instancia
define('DB_NAME','TU_BASE_DE_DATOS');
// usuario de bbdd
define('DB_USER','TU_USUARIO');
// contraseña de bbdd
define('DB_PASS','TU_CLAVE');
$con = mysql_connect(DB_SERVER,DB_USER,DB_PASS);
mysql_select_db(DB_NAME,$con);
?>
Por ultimo creamos un fichero php en donde utilizaremos el código de inserción y el html para mostrar al usuario:
<?php
session_start();
// aqui definimos el fichero que utilizaremos para la conexion a la bbdd
include_once "conexion.php";
?>
<html>
<head>
<title>Ejemplo de formulario de registro en PHP+MYSQL</title>
<style>
*{
font-size: 14px;
font-family: sans-serif;
}
form.registro{
background: none repeat scroll 0 0 #F1F1F1;
border: 1px solid #DDDDDD;
margin: 0 auto;
padding: 20px;
width: 278px;
}
form.registro div {
margin-bottom: 15px;
overflow: hidden;
}
form.registro div label {
display: block;
float: left;
line-height: 25px;
}
form.registro div input[type="text"], form.registro div input[type="password"] {
border: 1px solid #DCDCDC;
float: right;
padding: 4px;
}
form.registro div input[type="submit"] {
background: none repeat scroll 0 0 #DEDEDE;
border: 1px solid #C6C6C6;
float: right;
font-weight: bold;
padding: 4px 20px;
}
.error{
color: red;
font-weight: bold;
margin: 10px;
text-align: center;
}
</style>
</head>
<body>
<form action="" method="post" class="registro">
<div><label>Usuario:</label>
<input type="text" name="usuario"></div>
<div><label>Clave:</label>
<input type="password" name="password"></div>
<div><label>Repetir Clave:</label>
<input type="password" name="repassword"></div>
<div><label>Nombre:</label>
<input type="text" name="nombre"></div>
<div><label>Apellido:</label>
<input type="text" name="apellido"></div>
<div><label>Email:</label>
<input type="text" name="email"></div>
<div><label>Perfil Twitter:</label>
<input type="text" name="twitter"></div>
<div>
<input type="submit" name="enviar" value="Registrar"></div>
</form>
</body>
</html>
<?
if(isset($_POST['enviar']))
{
if($_POST['usuario'] == '' or $_POST['password'] == '' or $_POST['repassword'] == '')
{
echo 'Por favor llene todos los campos.';
}
else
{
$sql = 'SELECT * FROM usuarios';
$rec = mysql_query($sql);
$verificar_usuario = 0;
while($result = mysql_fetch_object($rec))
{
if($result->usuario == $_POST['usuario'])
{
$verificar_usuario = 1;
}
}
if($verificar_usuario == 0)
{
if($_POST['password'] == $_POST['repassword'])
{
$usuario = $_POST['usuario'];
$password = $_POST['password'];
$sql = "INSERT INTO usuarios (usuario,password,nombre,apellido,email,facebook,twitter) VALUES ('$usuario','$password','$nombre','$apellido','$email','$facebook','$twitter')";
mysql_query($sql);
echo 'Usted se ha registrado correctamente.';
}
else
{
echo 'Las claves no son iguales, intente nuevamente.';
}
}
else
{
echo 'Este usuario ya ha sido registrado anteriormente.';
}
}
}
Este es el aspecto que tiene el formulario una vez terminado:
Recordemos que el campo ID lo gestiona la bbdd por lo que no es necesario incluirlo en el INSERT.
Espero que les resulte útil este código.
Saludos.
Realizando pruebas en PHP con MYSQL para un proyecto de una maratón, he encontrado un código básico de registro en PHP y MYSQL que realiza un insert en una tabla en concreto. El código original lo pueden encontrar aqui: http://web.tursos.com/como-hacer-un-sistema-de-registro-de-usuarios-en-php-mysql/.
La particularidad de este proyecto es que por cada usuario registrado se debía generar un único identificador, es decir, cuando un usuario se registra en el formulario, se le asigna un ID y así por cada registro. Luego mediante consultas SQL se asocia el nombre del usuario y otros datos con su ID.
Utilizando la opción AUTO_INCREMENT de MYSQL podemos decirle a la bbdd a la hora de crear la tabla que este campo que definimos como AUTO_INCREMENT será gestionado por ella y que por cada registro, generará un numero siguiendo un patrón o una secuencia. En oracle se llaman secuencuales y se llaman con la sentencia .NEXTVAL.
Este es el script para crear la tabla:
CREATE TABLE 'usuarios' (
id MEDIUMINT NOT NULL AUTO_INCREMENT,
'usuario' VARCHAR(20) NOT NULL,
'password' VARCHAR(10) NOT NULL,
'nombre' VARCHAR(20) NOT NULL,
'apellido' VARCHAR(20) NOT NULL,
'email' VARCHAR(30) NOT NULL,
'facebook' VARCHAR(30) NOT NULL,
'twitter' VARCHAR(30) NOT NULL,
PRIMARY KEY ('id')
)
Como pueden ver, el ID no puede ser nulo y tiene tiene el parámetro AUTO_INCREMENT al final de la definición del campo. Definimos aparte la PK ID para que sea único.
Recordar que para crear la tabla pueden utilizar (si su hosting lo permite) la herramienta PHPMYADMIN.
Luego creamos un fichero para definir los parámetros de conexión a nuestra bbdd MYSQL, por ejemplo conexion.php:
<?php
// dirección del servidor de bbdd, si es nuestro hosting, lo dejamos como localhost
define('DB_SERVER','localhost');
// nombre de la instancia
define('DB_NAME','TU_BASE_DE_DATOS');
// usuario de bbdd
define('DB_USER','TU_USUARIO');
// contraseña de bbdd
define('DB_PASS','TU_CLAVE');
$con = mysql_connect(DB_SERVER,DB_USER,DB_PASS);
mysql_select_db(DB_NAME,$con);
?>
Por ultimo creamos un fichero php en donde utilizaremos el código de inserción y el html para mostrar al usuario:
<?php
session_start();
// aqui definimos el fichero que utilizaremos para la conexion a la bbdd
include_once "conexion.php";
?>
<html>
<head>
<title>Ejemplo de formulario de registro en PHP+MYSQL</title>
<style>
*{
font-size: 14px;
font-family: sans-serif;
}
form.registro{
background: none repeat scroll 0 0 #F1F1F1;
border: 1px solid #DDDDDD;
margin: 0 auto;
padding: 20px;
width: 278px;
}
form.registro div {
margin-bottom: 15px;
overflow: hidden;
}
form.registro div label {
display: block;
float: left;
line-height: 25px;
}
form.registro div input[type="text"], form.registro div input[type="password"] {
border: 1px solid #DCDCDC;
float: right;
padding: 4px;
}
form.registro div input[type="submit"] {
background: none repeat scroll 0 0 #DEDEDE;
border: 1px solid #C6C6C6;
float: right;
font-weight: bold;
padding: 4px 20px;
}
.error{
color: red;
font-weight: bold;
margin: 10px;
text-align: center;
}
</style>
</head>
<body>
<form action="" method="post" class="registro">
<div><label>Usuario:</label>
<input type="text" name="usuario"></div>
<div><label>Clave:</label>
<input type="password" name="password"></div>
<div><label>Repetir Clave:</label>
<input type="password" name="repassword"></div>
<div><label>Nombre:</label>
<input type="text" name="nombre"></div>
<div><label>Apellido:</label>
<input type="text" name="apellido"></div>
<div><label>Email:</label>
<input type="text" name="email"></div>
<div><label>Perfil Facebook:</label>
<input type="text" name="facebook"></div><div><label>Perfil Twitter:</label>
<input type="text" name="twitter"></div>
<div>
<input type="submit" name="enviar" value="Registrar"></div>
</form>
</body>
</html>
<?
if(isset($_POST['enviar']))
{
if($_POST['usuario'] == '' or $_POST['password'] == '' or $_POST['repassword'] == '')
{
echo 'Por favor llene todos los campos.';
}
else
{
$sql = 'SELECT * FROM usuarios';
$rec = mysql_query($sql);
$verificar_usuario = 0;
while($result = mysql_fetch_object($rec))
{
if($result->usuario == $_POST['usuario'])
{
$verificar_usuario = 1;
}
}
if($verificar_usuario == 0)
{
if($_POST['password'] == $_POST['repassword'])
{
$usuario = $_POST['usuario'];
$password = $_POST['password'];
$sql = "INSERT INTO usuarios (usuario,password,nombre,apellido,email,facebook,twitter) VALUES ('$usuario','$password','$nombre','$apellido','$email','$facebook','$twitter')";
mysql_query($sql);
echo 'Usted se ha registrado correctamente.';
}
else
{
echo 'Las claves no son iguales, intente nuevamente.';
}
}
else
{
echo 'Este usuario ya ha sido registrado anteriormente.';
}
}
}
Este es el aspecto que tiene el formulario una vez terminado:
Recordemos que el campo ID lo gestiona la bbdd por lo que no es necesario incluirlo en el INSERT.
Espero que les resulte útil este código.
Saludos.
Y dices que tu perfil de facebook es seguro? jajajaj
Buscando información de como obtener los datos de un usuario para implementar un registro del tipo "Registrate con tu cuenta Facebook". He visto un truquillo en la web technostriker.com de como obtener los datos de un usuario de facebook sin siquiera tenerlo agregado como amig@ o como "Me gusta".
Los pasos para obtener esta información son los siguientes:
1-Accedemos a nuestro perfil.
2-Sin cerrar la sesión, accedemos a este link http://developers.facebook.com/tools/explorer/
3-En en input GET introducimos el nombre del usuario o página de la que necesitemos obtener información.
Yo por ejemplo he utilizado mi usuario, si observan, a la izquierda hay un + dentro hay un desplegable, en el que podrán obtener hasta la portada que tiene el usuario en su facebook, información de su cuenta de correo, etc.
Por cada opción que seleccionemos, debemos darle al botón Enviar.
Muy lamentable que facebook ponga a disposición esta información sin ni siquiera utilizar algún tipo de restricción.
Nota: Esta entrada es para dar a conocer la poca seguridad que ofrece Facebook a sus usuarios. No me hago responsable de ninguna forma en los usos que pueda darse esta información.
Saludos.
Los pasos para obtener esta información son los siguientes:
1-Accedemos a nuestro perfil.
2-Sin cerrar la sesión, accedemos a este link http://developers.facebook.com/tools/explorer/
3-En en input GET introducimos el nombre del usuario o página de la que necesitemos obtener información.
Yo por ejemplo he utilizado mi usuario, si observan, a la izquierda hay un + dentro hay un desplegable, en el que podrán obtener hasta la portada que tiene el usuario en su facebook, información de su cuenta de correo, etc.
Por cada opción que seleccionemos, debemos darle al botón Enviar.
Muy lamentable que facebook ponga a disposición esta información sin ni siquiera utilizar algún tipo de restricción.
Nota: Esta entrada es para dar a conocer la poca seguridad que ofrece Facebook a sus usuarios. No me hago responsable de ninguna forma en los usos que pueda darse esta información.
Saludos.
jueves, 4 de julio de 2013
Encuentra los típicos errores SEO en tu web con SEORCH
Este servicio gratuito llamado SEORCH http://www.seorch.eu/index.html nos permite comprobar todos los factores de nuestra página web para ver si cumple con alguno de los requisitos minímos utilizados por los buscadores para posicionar nuestra página web.
Es muy útil y al igual que GTMETRIX.COM también te da consejos sobre como mejorar el código.
Solo basta con teclear la dirección de nuestra página web y un keyword al que utilizaremos como referencia:
Espero que les resulte útil ;).
Es muy útil y al igual que GTMETRIX.COM también te da consejos sobre como mejorar el código.
Solo basta con teclear la dirección de nuestra página web y un keyword al que utilizaremos como referencia:
Espero que les resulte útil ;).
lunes, 1 de julio de 2013
Comprobando el tiempo de carga de nuestra página web con GTMetrix.com
Un buen servicio para comprobar como de saludable es nuestra página web, es utilizando la herramienta ofrecida por GTMetrix. Con este servicio podremos conocer el tiempo de carga de nuestra página web y así mismo utilizarla para comprobar errores y aplicar optimizaciones en nuestra página web como por ejemplo (optimizar imagenes, código JavaScripts, etc).
Mientras más alto sea el nivel del ranking de nuestra página web, mejor será interpretada por los buscadores.
A continuación les dejo una captura de una de las páginas web que estoy desarrollando actualmente, www.grupov10.com.
Por cierto, cabe destacar que este servicio es gratuito ;)
Espero que les resulte útil.
Mientras más alto sea el nivel del ranking de nuestra página web, mejor será interpretada por los buscadores.
A continuación les dejo una captura de una de las páginas web que estoy desarrollando actualmente, www.grupov10.com.
Por cierto, cabe destacar que este servicio es gratuito ;)
Espero que les resulte útil.
Suscribirse a:
Entradas (Atom)