Búsqueda personalizada

20 dic 2013

SEO BÁSICO - Posicionamiento web

Quiero posicionar mi web. ¿Qué hago?

Aquí os voy a explicar brevemente los puntos más importantes para tener un buen posicionamento web en los buscadores, sobre todo en Google. No voy a andarme con muchos rodeos, voy a ser breve y concisa.

1.       El contenido web

El contenido web, es uno de los puntos más importantes para tener buen posicionamiento. Tener contenido repetido o copiado es muy penalizado por los buscadores.
Es muy importante tener contenido de calidad e interesante que invite a los usuarios a visitar y sobre todo a volver a vuestro lugar.

2.       Los metatags

Los metatags son las etiquetas situadas entre las etiquetas <head></head>
Etiqueta title nos sirve para indicar el titulo de nuestra página.
Ejemplo: <meta name=”title” content=”Titulo de la página”>
Etiqueta description nos sirve para describir nuestra página.
Ejemplo <meta name=”description” content=”descripción de la página”>
Etiqueta keywords, actualmente en desuso.

3.       Estructura web

Para estructurar bien una página web vamos a tener la siguiente estructura:


1. Las etiquetas meta title y meta description que utilice las palabras claves seleccionadas.
2. Una sola cabecera H1 también deberá utilizar las palabras claves seleccionadas
3. El texto en el que deberán estar las palabras claves
4. Las imágenes necesarias, siempre con el atributo alt en el que pondremos alguna palabra clave
5. Una o varias cabeceras H2, H3, H4... (en la medida de lo posible con palabras claves)

4.       SEO imágenes

Para optimizar las imágenes se le debe de poner la etiqueta “alt” para poner las palabras claves de la imagen, y los atributos “width” y “height” para que la página cargue más rápido.
Ejemplo: <img src=”foto.jpg” alt=”texto descriptivo” width=”100” height=”150” />

5.       LINK SEO

Enlaces externos

Es ideal que tengamos muchos enlaces externos, muchos y de diferentes dominios.
Si tienes un blog, aquí una recomendación donde poder promocionar tu blog.

Links internos
Usaremos el anchor text para poner las palabras claves que describan el enlace.

6.       Sitemap

El sitemap del usuario es una página web en la que se muestra la estructura de la página web. En este fichero se colocan todos los enlaces a todas las páginas de la página web y se organizará de manera que el usuario sepa localizar cada página en cada momento.

El sitemap para buscadores (sitemap.xml) es imprescindible desde el punto de vista seo.
Este fichero esta escrito en xml e indica a los buscadores qué páginas están listas para ser indexadas. Una buena herramienta para hacer tu sitemap la puedes encontrar aquí:

7.       Robots.txt

Este fichero se situará en la raíz de nuestro sitio web y sirve para indicar a los buscadores  que ficheros deben o no deben rastrear.
Nos podemos crear un fichero de texto con el nombre robots.txt y escribir las siguientes líneas:


User-agent: *
Disallow:

Con esto indicamos que todos los robots (User-agent:*) pueden rastrear cualquier carpeta.
Si queremos evitar que rastreen alguna carpeta lo especificaríamos así:

Disallow:/carpeta/




13 dic 2013

Herramienta para crear automaticamente sitemap de una página web

Aquí os voy a poner el enlace de una página web que os crea el sitemap automáticamente de tu sitio web, poniento tan sólo la url del sitio te lo genera y te la opción de descargar en varios formatos.

Ya tan solo, lo que tienes que hacer es colocarlo en la raiz de tu sitio web.

Aquí el enlace:

http://www.xml-sitemaps.com/

Quitar index.html o index.php con .htaccess - Otros

Añadir las siguientes líneas a vuestro archivo .htaccess, que deberá estar en vuestro directorio raiz


RewriteEngine on RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.html\ HTTP/
RewriteRule ^index\.html$ http://escribeturelato.es/ [R=301,L]
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
RewriteRule ^index\.php$ http://escribeturelato.es/ [R=301,L]

No olvideis reemplazar "escribeturelato.es" por el nombre de vuestra página. :-)

Quitar o añadir www a la url con .htaccess - Otros

Quitar www a la url con .htaccess

Añadir las siguientes líneas al archivo .htaccess


# Quitar el www del nombre de dominio
RewriteCond %{HTTP_HOST} ^www\.midominio\.com$ [NC]
RewriteRule ^(.*)$ http://midominio.com/$1 [R=301,QSA,L]



Obligar a que tenga la www la url

Añadir las siguientes líneas al archivo .htaccess

# Redirigir el dominio sin www a www
RewriteCond %{HTTP_HOST} ^midominio\.com$ [NC]
RewriteRule ^(.*)$ http://www.midominio.com/$1 [R=301,QSA,L]

Botones Compartir y Me gusta Facebook y Google+ - Otros

Boton Compartir de Google+

<!--COMPARTIR GOOGLE -->
<!-- Inserta esta etiqueta en la sección "head" o justo antes de la etiqueta "body" de cierre. -->
<script type="text/javascript" src="https://apis.google.com/js/platform.js">
 {lang: 'es'}
</script>
<!-- Inserta esta etiqueta donde quieras que aparezca Botón Compartir. -->
<div class="g-plus" data-action="share" data-annotation="none"></div>
<!--FIN COMPARTIR GOOGLE -->

Botón +1 de Google+

<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone"></div>

<!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
<script type="text/javascript">
window.___gcfg = {lang: 'es'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!--FIN ME GUSTA GOOGLE -->


ME GUSTA Y COMPARTIR DE FACEBOOK JUNTOS

SCRIPT
<script type="text/javascript">
(function() {
var element = document.createElement('script');
element.type = "text/javascript";
element.async = true;
element.id = "facebook-jssdk"
element.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(element, s);
})();
</script>

BOTONES
<div class="fb-like" data-href="<?php echo dameURL();?>" data-width="292" data-layout="button_count" data-send="true"></div>



PD: La funcion dame URL la he creado para que comparta la página actual en la que se encuentre el usuario, a continuación la función PHP dameURL();

<?php
function dameURL(){
$url="http://".$_SERVER['HTTP_HOST'].":".$_SERVER['SERVER_PORT'].$_SERVER['REQUEST_URI'];
return $url;
}
?>

12 dic 2013

Mostrar solo fecha campo datetime PHP

Si tienes un campo en una base de datos con formato DATETIME y quieres mostrar solo la fecha, no la fecha y la hora, puedes hacer lo siguiente:




<?php
//select a la base de datos

$campodatetime;

$date = date_create($campodatetime);
$fecha=date_format($date, 'd-m-Y');

echo $fecha;
?>

Crear div o capa transparente - CSS

Para crear un div o capara transparente o semitransparente, podemos usar el siguiente código CSS.

Todas las líneas hacen lo mismo, pero se usan todas para que funcione en todos los navegadores
.capa {
opacity: 0.2;
-moz-opacity: 0.2;
filter: alpha(opacity=20);
-khtml-opacity: 0.2;
}

11 dic 2013

Obtener URL de la pagina actual con PHP

La funcion para obtener la URL:


<?php
function dameURL(){
$url="http://".$_SERVER['HTTP_HOST'].":".$_SERVER['SERVER_PORT']
.$_SERVER['REQUEST_URI'];
return $url;
}
?>


$_SERVER['HTTP_HOST']: Sirve para obtener el nombre del dominio.
$_SERVER['SERVER_PORT']: Sirve para obtener el puerto.
$_SERVER['REQUEST_URI']: Sirve para obtener la URI.

Y para llamar a la función:

echo dameURL();

Código para poner Icono a una página Web

Código para poner icono a una página web


<head> ... <!-- Código del Icono --> <link href="icono.ico" type="image/x-icon" rel="shortcut icon" /> ... </head>


4 dic 2013

Acortar caracteres de una cadena de texto PHP

function acortar($texto) {
//Maximo de caracteres
$maximo = 20;
//Se saca el total de caracteres
$longitud = strlen($texto);
//Comprobamos si supera el maximo de caracteres
if ($longitud > $maximo) {
//Si es asi lo acortamos
return substr($texto, 0, $maximo) . "...";
} else {
//Si no lo supera lo dejamos como estaba
return $texto;
}
}

3 dic 2013

Fecha de hoy en PHP

Formato de fecha actual en PHP

$fecha_actual = date("d-m-Y");

Sombreado de div Box-shadow

Hoy algo sensillo:

Ejemplo de sombreado de caja:


box-shadow: 2px 2px 5px #999;


Caja con sombreado

1 dic 2013

Entrada Especial de Navidad

Hoy me he levantado contenta.

Hoy me he levantado motivada y muy muy contenta. Me he levantado de la manera, ¿cómo explicarlo?, cómo si ayer me hubiese tocado la primitiva y hoy todavía lo estuviese asimilando.

Os preguntaréis, ¿ayer me tocó la primitiva o pasó algo en especial? Y la respuesta es no.

Simplemente me he despertado agradecida por lo que tengo, agradecida porque veo que sigo progresando. Cada día que programo me doi cuenta que lo hago con más soltura, cada vez tengo que consultar menos, cada vez lo hago más deprisa, con menos errores, más optimizado, el trabajo no me falta...

Soy consciente de que la gran parte de lo que sé es por autoaprendizaje, por tutoriales, por internet, por libros que me he ido comprando y empollando, por proyectos que he ido haciendo que no han valido para nada pero me han servido de mucho, por trabajos que he hecho y que nunca he cobrado, y por muchas frustraciones del comienzo (aunque no me arrepiento).

Pero esta entrada quería dedicarlas en especial a mis maestros del instituto donde me formé. Hoy hace más o menos un año que me fui de ese instituto, por circunstancias personales y me fui a otro, y hasta hoy y hasta que me muera estaré agradecida a las personas que me dieron las bases de mis conocimientos.

El instituto en cuestión es IES Las Marismas de Huelva. El primer año fue un año de fracaso, repetí curso porque no estudié, pasé un año muy malo, pero no desistí. Lo volví a intentar, y el segundo año coincidí con unos compañeros de clase a cual mejor. Hicimos un grupo de trabajo en el cual se fundaba en el compañerismo, el estudio, la competitividad sana y las ganas de superación. Eso a los maestros les gustaba y nos animaban a ser aún mejores.

A mí, personalmente, estos maestros me enseñaron a ser mas adulta, a buscarme la vida y a hacer las cosas bien. A disfrutar lo que hacía, y en sí yo creía en un idea, que la desarrollara. También me ensañaron en la jerarquía de mandos, cosa que yo no tenía muy bien sabida, ya que me la pasaba un poco a la torera y no estaba de más.

Bueno, me estoy enrollando un poco y me ha salido un post un poco largo y al final casi no he dicho nada de lo que quería decir pero aquí lo dejo, FELIZ NAVIDAD y gracias a los profesores y compañeros que tuve en el IES LAS MARISMAS  de Huelva en los años 2011 y 2012.

27 nov 2013

Envío de un correo HTML con PHP

<?php// Varios destinatarios
$para  'aidan@example.com' ', '
// atención a la coma
$para .= 'wez@example.com';
// subject
$titulo 'Recordatorio de cumpleaños para Agosto';
// message
$mensaje '
<html>
<head>
  <title>Recordatorio de cumpleaños para Agosto</title>
</head>
<body>
  <p>¡Estos son los cumpleaños para Agosto!</p>
  <table>
    <tr>
      <th>Quien</th><th>Día</th><th>Mes</th><th>Año</th>
    </tr>
    <tr>
      <td>Joe</td><td>3</td><td>Agosto</td><td>1970</td>
    </tr>
    <tr>
      <td>Sally</td><td>17</td><td>Agosto</td><td>1973</td>
    </tr>
  </table>
</body>
</html>
'
;// Para enviar un correo HTML mail, la cabecera Content-type debe fijarse
$cabeceras  'MIME-Version: 1.0' "\r\n";
$cabeceras .= 'Content-type: text/html; charset=iso-8859-1' "\r\n";
// Cabeceras adicionales
$cabeceras .= 'To: Mary <mary@example.com>, Kelly <kelly@example.com>' "\r\n";
$cabeceras .= 'From: Recordatorio <cumples@example.com>' "\r\n";
$cabeceras .= 'Cc: birthdayarchive@example.com' "\r\n";
$cabeceras .= 'Bcc: birthdaycheck@example.com' "\r\n";
// Mail it
mail($para$titulo$mensaje$cabeceras);?>
Fuente: http://php.net/manual/es/function.mail.php

25 nov 2013

Lista de ciudades de España HTML

Os ahorro el trabajo de hacer la lista de ciudades de España en select. Espero que me lo agradescais porque yo lo he tenido que hacer a mano. Jajaja.


<select name="provincia" size="1">
            <option value='selecciona'>Selecciona</option>
            <option value='A Coruña' >A Coruña</option>
            <option value='álava'>álava</option>
            <option value='Albacete' >Albacete</option>
            <option value='Alicante'>Alicante</option>
            <option value='Almería' >Almería</option>
            <option value='Asturias' >Asturias</option>
            <option value='ávila' >Ávila</option>
            <option value='Badajoz' >Badajoz</option>
            <option value='Barcelona'>Barcelona</option>
            <option value='Burgos' >Burgos</option>
            <option value='Cáceres' >Cáceres</option>
            <option value='Cádiz' >Cádiz</option>
            <option value='Cantabria' >Cantabria</option>
            <option value='Castellón' >Castellón</option>
            <option value='Ceuta' >Ceuta</option>
            <option value='Ciudad Real' >Ciudad Real</option>
            <option value='Córdoba' >Córdoba</option>
            <option value='Cuenca' >Cuenca</option>
            <option value='Gerona' >Gerona</option>
            <option value='Girona' >Girona</option>
            <option value='Las Palmas' >Las Palmas</option>
            <option value='Granada' >Granada</option>
            <option value='Guadalajara' >Guadalajara</option>
            <option value='Guipúzcoa' >Guipúzcoa</option>
            <option value='Huelva' >Huelva</option>
            <option value='Huesca' >Huesca</option>
            <option value='Jaén' >Jaén</option>
            <option value='La Rioja' >La Rioja</option>
            <option value='León' >León</option>
            <option value='Lleida' >Lleida</option>
            <option value='Lugo' >Lugo</option>
            <option value='Madrid' >Madrid</option>
            <option value='Malaga' >Málaga</option>
            <option value='Mallorca' >Mallorca</option>
            <option value='Melilla' >Melilla</option>
            <option value='Murcia' >Murcia</option>
            <option value='Navarra' >Navarra</option>
            <option value='Orense' >Orense</option>
            <option value='Palencia' >Palencia</option>
            <option value='Pontevedra'>Pontevedra</option>
            <option value='Salamanca'>Salamanca</option>
            <option value='Segovia' >Segovia</option>
            <option value='Sevilla' >Sevilla</option>
            <option value='Soria' >Soria</option>
            <option value='Tarragona' >Tarragona</option>
            <option value='Tenerife' >Tenerife</option>
            <option value='Teruel' >Teruel</option>
            <option value='Toledo' >Toledo</option>
            <option value='Valencia' >Valencia</option>
            <option value='Valladolid' >Valladolid</option>
            <option value='Vizcaya' >Vizcaya</option>
            <option value='Zamora' >Zamora</option>
            <option value='Zaragoza'>Zaragoza</option>
          </select>

Mercedes Conde Blanco

20 nov 2013

Contar y limitar caracteres de un textarea con JavaScript

Aquí os dejo un código JavaScript que cuenta los caracteres de un textarea, definiendo el límite e impide que se escriba más caracteres de dicho límite.


<html> 
<head> 
<SCRIPT language="JavaScript" type="text/javascript"> 

function contador (campo, cuentacampo, limite) { 
if (campo.value.length > limite) campo.value = campo.value.substring(0, limite); 
else cuentacampo.value = limite - campo.value.length; 


</script> 
</head> 
<body> 
<center> 
<form name="form1"> 
sólo puedes entrar 125 caracteres. 
<textarea name="mensaje" wrap=physical cols="28" rows="4" onKeyDown="contador(this.form.mensaje,this.form.remLen,125);" onKeyUp="contador(this.form.mensaje,this.form.remLen,125);"></textarea> 
<input type="text" name="remLen" size="3" maxlength="3" value="125" readonly>te quedan todavía 
</form> 
</center> 
</body> 
</htm>

Espero que les sirva de ayuda.

Mercedes Conde Blanco

19 nov 2013

Canvas a partir de datos MySql

Voy a copiar aquí un código que me parece aún más interesante que el del artículo anterior.
Con este código se crea el gráfico a partir de datos de la base de datos.

HTML
<!DOCTYPE html>
<html><head><title>Nombre de la página</title><link rel=”STYLESHEET” href=”nombre_del_archivo_de_estilo.css”/></head>
<body>
<center><canvas id=”myCanvas” width=”1280″ height=”720″ style=”border:1px solid #FFFFFF;”>Your browser does not support the HTML5 canvas tag.</canvas></center>

JavaScript
<script>
function draw(inicio, valor)
{
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”); // En 2D
// Defines el ancho
ctx.width=1280;
var ancho=ctx.width;
//Defines el alto
ctx.height=720;
var alto=ctx.height;
// Crear gradiente para el fondo
var grd=ctx.createLinearGradient(0,0,ancho,0);
grd.addColorStop(0,”black”); // Punto y color de inicio
grd.addColorStop(0.5,”#309a07″); // Color intermedio
grd.addColorStop(1,”black”); //Color final
// Rellenar el fondo con el gradiente
ctx.fillStyle=grd;
ctx.fillRect(0,0,ancho,alto);
// Dibujo los datos
// El punto de partida es x=inicio, y=alto (el alto es abajo del todo). La x la vamos moviendo a la derecha, la y es fija abajo del todo.
ctx.moveTo(inicio,alto);
// Movemos la línea hacia arriba en la variable y, manteniendo la x fija por ser una barra vertical
ctx.lineTo(inicio,valor); 
ctx.lineWidth=10; // Definimos el grosor de la línea
ctx.globalAlpha = 0.99; // Definimos la transparencia
ctx.strokeStyle = “white”; // Color de la línea
ctx.stroke();
}
</script>

PHP
<?php
//Llamamos al archivo que nos conecta a la base de datos
require_once(“archivo_con_los_datos_de_conexion_a_la_base.inc”); 
// Hacemos la petición de datos a la base
$salida=mysql_db_query (“nombre_de_la_base_de_datos”, “Select * from nombre_de_la_tabla”);
$numdatos=mysql_num_rows ($salida);
for ($a=0;$a<$numdatos;$a++)
{
$dato=mysql_fetch_row($salida); // Extraemos una fila
$inicio=$dato[0]; //En el ejemplo, la primera columna era una simple key autoincrementable
$inicio=$inicio*20; // Vamos moviendo 20 pixeles a la derecha cada dato
$valor=$dato[1]; //En el ejemplo, la segunda columna es el dato a dibujar
$valor=$valor*7.2; //La altura era de 720 y los datos de 0 a 100. Escalamos
$valor=720-$valor; // Canvas tiene las coordenadas (0,0) arriba a la izquierda. Invertimos la y para que empiece desde abajo.
echo “<script>draw($inicio, $valor);</script>”; // Llamamos a la función que dibuja
}
?>
</body>
</html>

Un ejemplo de cómo puede quedar:


Código y gráfico procedente de la página : http://www.robermartinez.com/blog/2012/10/27/canvas-con-html5-y-php-a-partir-de-datos-sql/

Gracias por el aporte del autor

Sencilla Gráfica en 2D con canvas html

Aquí os pongo un ejemplo de gráfica en canvas 2D que he pillado por ahí, es de código libre, así que lo podeis usar a vuestro antojo:


<!DOCTYPE html>
<html lang="es">
 
  <head>
    <meta charset="utf-8"/>
    <title>Dibujo con Canvas</title>
  </head>

  <script type="text/javascript">
            function dibujar(){

                var ctx = document.getElementById ('nuestroCanvas');
                var contenido = ctx.getContext ('2d');
                var imagenGrafica = new Image();
                imagenGrafica.src = 'grafica.png';
                imagenGrafica.onload = function(){

                        //Cargo la imagen en la posición
                        contenido.drawImage(imagenGrafica,0,0);
                       
                        //Indicar el grosor de la línea
                        contenido.lineWidth = 4;
                        //Dibujo las líneas para simular la gráfica
                        contenido.beginPath();

                        contenido.moveTo(16,156);
                        contenido.lineTo(77,66);
                        contenido.lineTo(135,100);
                        contenido.lineTo(194,200);
                        contenido.lineTo(255,185);
                        contenido.lineTo(316,195);
                        contenido.lineTo(376,155);
                        contenido.lineTo(436,185);
                       
                        contenido.strokeStyle = "hsla(333, 71%, 53%, 1)";
                        contenido.stroke();

                         //Indicar el grosor de la línea
                        contenido.lineWidth = 1;
                         //Dibujo las líneas para simular la gráfica
                        contenido.beginPath();

                        contenido.moveTo(16,126);
                        contenido.lineTo(77,176);
                        contenido.lineTo(135,160);
                        contenido.lineTo(194,100);
                        contenido.lineTo(255,155);
                        contenido.lineTo(316,225);
                        contenido.lineTo(376,85);
                        contenido.lineTo(436,185);
                       
                        contenido.strokeStyle = "hsla(120, 100%, 50%, 1)";
                        contenido.stroke();



                }
            }


</script>
 
  <!--Este código ha sido realizado por @eneakao, puedes utilizarlo libremente-->
  <body onload="dibujar()">
    <canvas id="nuestroCanvas" width="451" height="274"></canvas>
  </body>

</html>

Aquí os podeis descargar el ejemplo.

Espero que os sirva.

12 nov 2013

Etiqueta en imagen cuando pasas el cursor - Tooltip

Ahora vamos a ver como hacer un Tooltip de forma sencilla. Para quien no sepa que es un tooltip, es como una especie de cartelito que aparece cuando ponemos el ratón encima de una imagen o un enlace.

Aqui el CSS:


.tooltip { display: inline; position: relative; }
.tooltip:hover:after { bottom: 26px; content: attr(title); /* este es el texto que será mostrado */ left: 20%; position: absolute; z-index: 98; /* el formato gráfico */ background: rgba(255,255,255, 0.2); /* el color de fondo */ border-radius: 5px; color: #FFF; /* el color del texto */ font-family: Georgia; font-size: 12px; padding: 5px 15px; text-align: center; text-shadow: 1px 1px 1px #000; width: 150px; }
.tooltip:hover:before { bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; /* el triángulo inferior */ border: solid; border-color: rgba(255,255,255, 0.2) transparent; border-width: 6px 6px 0 6px; }

Y aquí el HTML:


< a class="tooltip" href="" title="Diesel, 80.000km ...">Coche


Ejemplo: Coche




Mercedes Conde Blanco

8 nov 2013

Mapa interactivo de España -> use maps html


Me surgió la necesidad de encontrar un mapa interactivo de españa, con sus enlaces para cada ciudad. Estuve buscando pero no encontré nada. Al final eché mano de viejos conocimientos del Gimp e hice el mío propio, dejo aquí la imagen y el código del mapeado.



Y aquí el código del mapeado:


<img src="Sin nombre" width="300" height="208" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Mercedes Conde -->
<area shape="poly" coords="54,15,67,26,84,20,84,10,86,2" href="lacoruña" />
<area shape="poly" coords="61,25,57,34,66,40,90,32,83,22" href="pontevedra" />
<area shape="poly" coords="66,42,81,47,99,44,102,32,89,32" href="orense" />
<area shape="poly" coords="87,2,83,22,90,31,100,32,101,23,96,3" href="lugo" />
<area shape="poly" coords="96,5,102,22,128,19,144,9" href="asturias" />
<area shape="poly" coords="101,23,102,37,128,42,133,36,136,16" href="leon" />
<area shape="poly" coords="137,19,154,25,157,17,168,13,160,7,141,11" href="cantabria" />
<area shape="poly" coords="164,9,165,16,170,22,178,15,180,10" href="vizcaya" />
<area shape="poly" coords="182,13,176,20,184,20,189,13" href="gipuzcua" />
<area shape="poly" coords="168,19,170,27,180,31,184,20" href="alava" />
<area shape="poly" coords="136,20,132,38,152,46,153,44,144,33,150,23" href="palencia" />
<area shape="poly" coords="125,40,127,61,141,62,145,55,156,52,152,44" href="valladolid" />
<area shape="poly" coords="97,44,111,58,128,61,125,42,102,38" href="zamora" />
<area shape="poly" coords="147,34,160,52,170,42,169,22,164,12,159,12,150,27" href="burgos" />
<area shape="poly" coords="171,42,191,44,191,36,172,29,168,28" href="larioja" />
<area shape="poly" coords="180,30,196,43,206,17,187,14" href="navarra" />
<area shape="poly" coords="204,25,210,43,224,55,233,53,230,48,234,43,234,24" href="huesca" />
<area shape="poly" coords="234,22,235,43,231,49,235,55,246,48,252,39,255,28" href="lleida" />
<area shape="poly" coords="254,29,278,48,281,30,276,25,265,27" href="girona" />
<area shape="poly" coords="247,48,260,61,278,47,254,30" href="barcelona" />
<area shape="poly" coords="231,54,228,69,235,74,244,63,258,57,248,49" href="tarragona" />
<area shape="poly" coords="227,68,219,73,208,90,216,96,226,96,236,74" href="castellon" />
<area shape="poly" coords="189,44,185,60,197,67,205,62,218,56,220,50,207,38,205,25" href="zaragoza" />
<area shape="poly" coords="197,66,193,80,206,88,230,66,230,53,221,53" href="teruel" />
<area shape="poly" coords="160,51,168,61,176,59,183,64,189,62,184,58,188,44,172,42" href="soria" />
<area shape="poly" coords="166,59,161,67,168,80,170,85,184,73,194,79,197,68,189,63,178,64" href="guadalajara" />
<area shape="poly" coords="140,62,147,77,166,58,160,52,144,55" href="segovia" />
<area shape="poly" coords="130,63,132,70,118,81,129,86,142,82,148,76,140,62" href="avila" />
<area shape="poly" coords="107,56,98,67,92,70,99,77,99,82,107,81,111,77,118,83,131,68,129,62" href="salamanca" />
<area shape="poly" coords="142,83,160,65,169,85,159,90" href="madrid" />
<area shape="poly" coords="97,81,97,94,86,95,93,108,100,103,110,110,122,108,132,102,125,84" href="caceres" />
<area shape="poly" coords="132,102,149,98,158,107,172,100,166,86,155,91,141,83,125,87" href="toledo" />
<area shape="poly" coords="165,87,173,103,183,107,198,103,203,87,185,74" href="cuenca" />
<area shape="poly" coords="200,100,209,118,224,113,221,95,215,95,203,88" href="valencia" />
<area shape="poly" coords="208,117,209,133,215,137,232,116,225,114" href="alicante" />
<area shape="poly" coords="184,134,199,153,216,140,208,133,208,119,201,118,193,127" href="murcia" />
<area shape="poly" coords="173,104,174,124,183,135,202,117,209,119,200,102" href="albacete" />
<area shape="poly" coords="136,100,132,118,148,127,175,123,173,103" href="ciudadreal" />
<area shape="poly" coords="92,105,93,114,89,124,96,133,113,138,118,132,124,131,122,122,133,116,135,101,110,110" href="badajoz" />
<area shape="poly" coords="185,137,179,151,173,156,173,165,189,165,198,152" href="almeria" />
<area shape="poly" coords="181,131,168,146,146,152,146,159,158,166,174,166" href="granada" />
<area shape="poly" coords="148,125,146,141,152,150,171,145,179,131,174,124" href="jaen" />
<area shape="poly" coords="118,132,127,146,135,143,140,155,154,150,147,140,146,127,132,117,121,122,124,131" href="cordoba" />
<area shape="poly" coords="118,134,109,137,103,143,106,147,105,159,111,162,129,161,138,152,134,143,126,146" href="sevilla" />
<area shape="poly" coords="104,161,104,168,112,178,123,183,127,179,124,161" href="cadiz" />
<area shape="poly" coords="124,161,128,177,138,172,157,165,146,154,136,152" href="malaga" />
<area shape="poly" coords="92,130,83,143,87,156,105,161,104,149,101,143,108,137" href="huelva" />
<area shape="poly" coords="123,189,125,196,137,194" href="ceuta" />
<area shape="poly" coords="153,199,166,202,167,194" href="melilla" />
<area shape="poly" coords="11,169,10,197,79,197,80,168" href="tenerife" />
<area shape="poly" coords="240,106,249,123,294,95,270,77,265,85" href="mallorca" />
</map>



Espero que os sirva.

6 nov 2013

Gradientes de colores para todos los navegadores CSS3

 /* navegadores sin soporte */
    background: black url(images/cabecera_degradado.jpg) repeat-x;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(black));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, black, white);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, black, white);
    /* Opera 11.10+ */
    background: -o-linear-background(top, black, white);
    /* IE 10 */
    background: -ms-linear-background(top, black, white);
    /* estándar */
    background: linear-background(top, black, white);

4 nov 2013

Plantillas para WordPress

Si estáis buscando plantillas para WordPress gratuitas, os recomiendo la página

http://www.themesparawordpress.com/


Si sabéis de otras buenas páginas, os ánimo a dejarmelas en comentarios. Un saludo.

17 oct 2013

Posicionamiento web

Para poder tener un buen posicionamiento web, se debe tener en cuenta varios puntos, los cuales voy a enumerar aquí. Son buenas costumbren que deben tomar los diseñadores y programadores webs.


Posicionamiento interno

Son aquellas mejoras que podemos aplicar sobre nuestra web, contenido, apariencia, accesibilidad, etc.

  • Crear contenidos de calidad. Es común el dicho de: "el contenido es rey".
  • Realizar la estructuración y el diseño de una página web pensando en el posicionamiento, significa prestar atención a que sea funcional, fácil de acceder y que capte la atención del usuario.
  • Crear títulos únicos y descripciones pertinentes del contenido de cada página. Cada página es una tarjeta de presentación para el buscador. Los títulos y descripciones son puntos de partida para la identificación de los términos relevantes a lo largo de la web por los buscadores. Las mejores prácticas recomiendan escribir títulos de entre 60 y 70 caracteres.
  • Hacer nuestra web lo más accesible posible: limitar contenido en Flash, frames o JavaScript. Este tipo de contenido no permite el rastreo o seguimiento de la información por parte del robot en las diferentes páginas o secciones. Para ellos son un espacio plano por el cual no se puede navegar.
  • Enlazar internamente las páginas de nuestro sitio de manera ordenada y clara. Un «mapa del sitio» en el código (tanto el de Google como uno presente en el sitio) permitirá dar paso al buscador por las diferentes secciones del sitio en forma ordenada, mejorando su visibilidad.
  • Mejorar la experiencia del usuario con mejoras del diseño y disminución de las tasas de rebote.
  • Alojar la web en un servidor fiable.
  • Utilizar negrita o cursiva en los contenidos para las palabras clave que se pretenden posicionar.
  • Utilizar las etiquetas “meta” (description y title) con las palabras claves, elegidas estratégicamente con anterioridad. La etiqueta “meta title” es el factor on-page más importante para el posicionamiento, después del contenido general. La etiqueta “meta description” ofrece una explicación breve del contenido de una página y es normalmente utilizada por los buscadores para mostrar un breve resumen del contenido de la página en los resultados de búsqueda.
  • Utilizar las cabeceras h1, h2, h3, etc. para destacar términos importantes, o títulos. Se deberían usar palabras claves en las cabeceras.
  • Optimizar las URL, colocamos las palabras claves más importantes y significativas para la búsqueda.
  • Crear un diseño web limpio en publicidad y que entregue el contenido relevante en la mitad superior del sitio web7
  • Actualizar la página con contenido original de calidad.
  • Optimizar el tiempo de carga de una web para conseguir la reducción del ancho de banda, aumentar la tasa de conversión y mejorar la experiencia de usuario.
  • Utilizar un correcto etiquetado del sitio web.



Posicionamiento externo


Son aquellas técnicas que usamos para mejorar la notoriedad de nuestra web en los medios online. Por norma general, se busca conseguir menciones online, en forma de link, de la web a optimizar.

  • Conseguir que otras webs de temática relacionada enlacen con tu web. Para ello es interesante realizar una búsqueda para aquellos términos que consideras deberían llevar tráfico a tu web y estudiar cuáles de ellos tienen un contenido complementario. Si por ejemplo quieres posicionarte por el término "peluquería madrid" puede ser interesante intentar conseguir backlinks de peluquerías de otras ciudades.
  • Ahora mismo hay cientos de redes sociales, por ejemplo Hi5, Facebook y, Orkut, en las cuales poder participar y obtener visitas de nuestros nuevos «amigos». Para Google, la red social que mayor impacto tiene en el posicionamiento web es Google Plus, que ha tomado el lugar en importancia de Twitter y Facebook.
  • Darse de alta en directorios importantes como Dmoz y Yahoo!. Los directorios han perdido mucho interés en los buscadores pero siguen siendo un buen punto de partida para conseguir enlaces o un primer rastreo de tu web por los buscadores. Ambas requieren de un filtro humano para su inclusión lo que asegura la calidad de las web añadidas, pero también ralentiza y dificulta su inclusión.
  • Registrarse y participar en foros, de preferencia en foros temáticos relacionados a la actividad de su página web. La frecuente participación tiene que ir acompañado de aporte real y valioso como para ser tomado en cuenta como un usuario calificado, el detalle del éxito para conseguir visitas y aumentar el posicionamiento es el enlace hacia su página web presentado en su firma.
  • Escribir artículos en otros sitios web. Los artículos son un método muy poderoso para mejorar el posicionamiento y conseguir atraer visitas.Si puedes escribir unos artículos de un curso, de los trucos del día, la utilidad del producto de tu web.
  • Intercambiar contenido.





Fuente: Wikipedia

11 oct 2013

Exportar base de datos de PHP a excel

Exportar base de datos de PHP a excel


<?php
//Exportar datos de php a Excel
header("Content-Type: application/vnd.ms-excel");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("content-disposition: attachment;filename=Reportes.xls");
?>
<HTML LANG="es">
<TITLE> Exportacion de Datos </TITLE>
</head>
<body>
<?php
$NombreBD = "Tu_DB";
$Servidor = "localhost";
$Usuario = "root";
$Password ="";
$IdConexion = mysql_connect($Servidor, $Usuario, $Password);
mysql_select_db($NombreBD, $IdConexion);
$sql = "SELECT Apellido, Nombre, Dni, Domicilio FROM Excel";
$result=mysql_query($sql,$IdConexion);
?>
<TABLE BORDER=1 align="center" CELLPADDING=1 CELLSPACING=1>
<TR>
<TD>Apellido</TD>
<TD>Nombre</TD>
<TD>Dni</TD>
<TD>Domicilio</TD>
</TR>
<?php
while($row = mysql_fetch_array($result)) {
printf('< tr>
< td> %s < /td>
< td> %s < /td>
< td> %s < /td>
< td> %s < /td>
< /tr>', $row["Apellido"],$row["Nombre"],$row["Dni"],$row["Domicilio"]);
}
mysql_free_result($result);
mysql_close($IdConexion);  //Cierras la Conexión
?>
</table>
</body>
</html>

Fuente: http://code.goibela.com/php/mis-funciones/exportar-datos-desde-php-a-excel/

Mercedes Conde Blanco

Más visitas para tu blog

Más visitas para tu blog

Vuestras visitas:

Trucos Blogger

Sobre Google

Los + vistos en la semana

 

© 2014 Aplicaciones ...---Chey---.... All rights resevered. Designed by Chey Developer

Back To Top
Recibe las actualizaciones directo a tu correo