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.
Optimizar el htaccess para que sea SEO Friendly ¿lo que?
El fichero htaccess se utiliza para los servidores web Apache, la mayoría de los hosting actuales utilizan este archi-conocido servidor web para dar servicio a los usuarios que tienen sus páginas web alojadas en sus dominios.
Bien, en el fichero htaccess se configuran todos los parámetros referentes a la forma en la que el servidor web debe servir las peticiones de los usuarios. Por ejemplo, es el que se utiliza para definir una página 404 (si tecleamos un enlace que no existe dentro del dominio nos saldrá el error 404 indicado que no existe documento).
Existe varios trucos, bueno nos son trucos, sino formas de utilizar este fichero para ganar en velocidad y optimización a la hora de servir el contenido de nuestra página web.
El htaccess se debe alojar en la raíz de nuestra página web y este será recogido por el servidor web y aplicará los parámetros que tengamos definidos en el para mostrar el contenido al usuario.
A continuación les dejo un ejemplo del contenido del un htaccess funcional para apache 2.0 con comentarios incluidos en cada opción:
# .htaccess personalizado - script escrito por Eduardo L. Arana - info@arananet.net.
# Esta opcion fuerza al navegador cliente a que utilice los parametros Cache-Control y Expires para ganar en velocidad.
FileETag None
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/javascript text/css application/javascript
# Solucion para redireccionar nuestro dominio, cuando el usuario teclea http://ejemplo.com en vez de http://www.ejemplo.com, a esto lo llamamos redirección 301.
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.grupov10\.com [NC]
RewriteRule ^(.*)$ http://www.grupov10.com/$1 [L,R=301]
# Modulo utilizado para acelerar el contenido servido por el servidor web.
<IfModule mod_gzip.c>
mod_gzip_static_suffix .gz
AddEncoding gzip .gz
AddEncoding gzip .gzip
mod_gzip_on YES
mod_gzip_handle_methods GET
mod_gzip_temp_dir /tmp
mod_gzip_can_negotiate Yes
mod_gzip_dechunk Yes
mod_gzip_send_vary On
mod_gzip_update_static No
mod_gzip_keep_workfiles No
mod_gzip_minimum_file_size 250
mod_gzip_maximum_file_size 1048576
mod_gzip_maximum_inmem_size 60000
mod_gzip_min_http 1000
mod_gzip_item_exclude reqheader "User-agent: Mozilla/4.0[678]"
mod_gzip_item_include mime ^application/pdf$
mod_gzip_item_include mime ^image/
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include file .js$
mod_gzip_item_include file .woff$
mod_gzip_item_include file .css$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include file .html$
mod_gzip_item_include file .pl$
mod_gzip_item_include file .cgi$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^httpd/unix-directory$
mod_gzip_item_include mime ^application/postscript$
</IfModule>
#Con esta opcion le indicamos al servidor web que muestre una página de error cuando intentan acceder a un recurso que no existe en la página web actual.
ErrorDocument 404 /noencontrado.html
# Con esta opción le indicamos al servidor web que debe comprimir la información (imágenes, scripts, código) antes de enviarla, ganamos en velocidad.
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
<IfModule mod_expires.c>
## Activamos la caducidad para las distintas extensiones de nuestra página web ##
ExpiresActive On
## imagenes##
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
## CSS ##
ExpiresByType text/css "access plus 1 month"
## PDF ##
ExpiresByType application/pdf "access plus 1 month"
## JS & Flash ##
ExpiresByType application/x-javascript "access plus 2 month"
ExpiresByType text/javascript "access plus 2 month"
ExpiresByType application/javascript "access plus 2 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
## Favicon ##
ExpiresByType image/x-icon "access plus 1 year"
## Por defecto ##
ExpiresDefault "access plus 2 days"
</IfModule>
<Files .htaccess>
order allow,deny
deny from all
</Files>
Espero que les resulte útil.
El htaccess se debe alojar en la raíz de nuestra página web y este será recogido por el servidor web y aplicará los parámetros que tengamos definidos en el para mostrar el contenido al usuario.
A continuación les dejo un ejemplo del contenido del un htaccess funcional para apache 2.0 con comentarios incluidos en cada opción:
# .htaccess personalizado - script escrito por Eduardo L. Arana - info@arananet.net.
# Esta opcion fuerza al navegador cliente a que utilice los parametros Cache-Control y Expires para ganar en velocidad.
FileETag None
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/javascript text/css application/javascript
# Solucion para redireccionar nuestro dominio, cuando el usuario teclea http://ejemplo.com en vez de http://www.ejemplo.com, a esto lo llamamos redirección 301.
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.grupov10\.com [NC]
RewriteRule ^(.*)$ http://www.grupov10.com/$1 [L,R=301]
# Modulo utilizado para acelerar el contenido servido por el servidor web.
<IfModule mod_gzip.c>
mod_gzip_static_suffix .gz
AddEncoding gzip .gz
AddEncoding gzip .gzip
mod_gzip_on YES
mod_gzip_handle_methods GET
mod_gzip_temp_dir /tmp
mod_gzip_can_negotiate Yes
mod_gzip_dechunk Yes
mod_gzip_send_vary On
mod_gzip_update_static No
mod_gzip_keep_workfiles No
mod_gzip_minimum_file_size 250
mod_gzip_maximum_file_size 1048576
mod_gzip_maximum_inmem_size 60000
mod_gzip_min_http 1000
mod_gzip_item_exclude reqheader "User-agent: Mozilla/4.0[678]"
mod_gzip_item_include mime ^application/pdf$
mod_gzip_item_include mime ^image/
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include file .js$
mod_gzip_item_include file .woff$
mod_gzip_item_include file .css$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include file .html$
mod_gzip_item_include file .pl$
mod_gzip_item_include file .cgi$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^httpd/unix-directory$
mod_gzip_item_include mime ^application/postscript$
</IfModule>
#Con esta opcion le indicamos al servidor web que muestre una página de error cuando intentan acceder a un recurso que no existe en la página web actual.
ErrorDocument 404 /noencontrado.html
# Con esta opción le indicamos al servidor web que debe comprimir la información (imágenes, scripts, código) antes de enviarla, ganamos en velocidad.
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
<IfModule mod_expires.c>
## Activamos la caducidad para las distintas extensiones de nuestra página web ##
ExpiresActive On
## imagenes##
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
## CSS ##
ExpiresByType text/css "access plus 1 month"
## PDF ##
ExpiresByType application/pdf "access plus 1 month"
## JS & Flash ##
ExpiresByType application/x-javascript "access plus 2 month"
ExpiresByType text/javascript "access plus 2 month"
ExpiresByType application/javascript "access plus 2 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
## Favicon ##
ExpiresByType image/x-icon "access plus 1 year"
## Por defecto ##
ExpiresDefault "access plus 2 days"
</IfModule>
<Files .htaccess>
order allow,deny
deny from all
</Files>
Espero que les resulte útil.
Lo importante de utilizar el redireccionamiento 301 en tus enlaces
Cuando necesitamos redirecionar un subdominio u página web a otra dirección, existen varios métodos aunque no todos son fiables y soportado por los buscadores. El redireccionamiento 301 es el más seguro entre los mortales (302 o meta refresh). El redireccionamiento 301 le informa a los buscadores que esta redirección será permanente y que esta nueva redirección debe ser la que conste como actual es su indice.
Es conocido que los Spammers utilizan otro tipo de redirecionamiento como los 302 y los meta refresh, estos son penalizables y no válidos por la mayoría de buscadores. Hay que evitar su uso siempre.
Espero que les resulte útil este consejo ;).
Intentar obtener enlaces de dominios .edu, .gov para obtener un mejor posicionamiento.
Así es, es bien sabido que podremos obtener un mejor ranking y posicionamiento en nuestra página web si logramos que dominios con extensión .edu y .gov nos enlacen. Estos dominios, al ser más difíciles de obtener, tienen mayor prioridad que el resto (de los mortales) :p. Esto nos ayuda por un lado a ganar en posicionamiento y por otro lado a que nuestra página web presente más credibilidad de cara al usuario.
Espero que les resulte útil este briconsejo, jajajaj.
La importancia de los Headlines en nuestra página web.
Los famosos Headlines tags (H1, H2, H3, etc) son un importante aporte o recurso que podemos explotar para el posicionamiento. Podemos utilizar estas secciones de nuestra página web para incluir keywords sobre el tema que intetamos destacar. Se conoce que los buscadores utilizan estas secciones para destacar el artículo del que estamos hablando, tiene más prioridad siempre el titulo que utilicemos en nuestro articulo que el propio contenido.
Intenta optimizar los títulos de tus artículos sin exceder la densidad de keywords en tu página para evitar que te penalicen.
Espero que les resulte útil este briconsejo, jjjejejjej
Como funcionará Google a partir del 2013 en sus busquedas
El pasado 24 de abril de 2012 Google lanzó una nueva actualización de su algoritmo de búsqueda (nombre clave Penguin) sip, Pinguino (será una indirecta al s.o. de Linus Torvals :p ). Una de las principales características de esta nueva actualización, tiene que ver con las busquedas llamadas “web spam”. La función "Web Spam" busca sitios que no cumplan con esta nueva actualización y les baja del ranking actual. Con esto quieren lograr que solo aquellas páginas con un contenido de calidad sean las primeras en aparecer. A continuación detallamos algunas de las funcionalidades que nos ayudarán mejor a posicionar nuestra web o la de nuestros clientes y sean compatibles con este nuevo algoritmo.
Compatible con el nuevo algoritmo:
* Contenido de calidad - Con esto queremos decir, evitar copiar y pegar texto a lo loco y publicar contenido propio.
* Evitar el uso excesivo de palabras claves o repetirlas en demasía. La densidad de keywords debe ser de un 3% al 12%.
* La actividad de la página web en las redes sociales será un punto a favor para el posicionamiento.
* Otro punto a favor es que el contenido que publiquemos debe estar bien formateado, con imagenes y videos (en lo posible).
* Intentar que el artículo disponga de contenido que la competencia no tiene o no haya publicado.
Incompatible con el nuevo algoritmo:
* Duplicar el contenido - Lo dicho antes, evitar copiar y pegar, !Escribir! que no cuesta tanto! jejejej.
* Utilizar enlaces canónicos para identificar el contenido de nuestras páginas y evitar de esta forma la duplicidad de código (ejemplo: sitio web normal y sitio web móvil).
* Evitar el uso de "Anchor Text" - Google mirará de cerca este tipo de enlaces, si el porcentaje de los keywords utilizados en dicho enlaces es superior a la media lo considerará no-natural lo que ocasionará un descenso en nuestro ranking.
Consejo:
Siempre deberemos comprobar, en caso de la campaña SEO la lleve una empresa externa en la web que estamos diseñando, que estos cumplan o estén actualizados con los nuevos conceptos, para evitar que nuestro cliente pague por un servicio que ya no aplica las características y formas del nuevo algoritmo de google.
A continuación les dejo un video en el que Matt Cutts nos explica estos cambios:
A continuación les dejo un video en el que Matt Cutts nos explica estos cambios:
Espero que les resulte útil. ;)
Primer entrada y Bienvenida ;)
Hola amig@s de la red, esta es mi primer entrada en este nuevo #Blog que he creado sobre el mundillo del desarrollo y maquetación Web. Día a día iré subiendo contenido sobre trucos y atajos sobre el desarrollo de páginas web y contenido referente a este mundo en constante innovación.
Mi página web personal es http://www.arananet.net, es interactiva, realizada en HTML5 y CSS3.
Podrán encontrarme en las siguientes direcciones:
Twitter: https://twitter.com/edu_arana
Web: http://www.arananet.net
Google+: https://plus.google.com/u/0/106346284226770317437/posts
Saludos.
Mi página web personal es http://www.arananet.net, es interactiva, realizada en HTML5 y CSS3.
Podrán encontrarme en las siguientes direcciones:
Twitter: https://twitter.com/edu_arana
Web: http://www.arananet.net
Google+: https://plus.google.com/u/0/106346284226770317437/posts
Saludos.
Suscribirse a:
Entradas (Atom)