BloG InFoRmaTiCo » Html http://elblogdeerik.com El BloG De EriK Thu, 01 Jul 2010 11:29:24 +0000 en hourly 1 http://wordpress.org/?v=3.0 Crear Sitemap Manualmente http://elblogdeerik.com/crear-sitemap-manualmente http://elblogdeerik.com/crear-sitemap-manualmente#comments Tue, 22 Jun 2010 21:49:08 +0000 Erik http://elblogdeerik.com/?p=1116 Os voy a intentar explicar brevemente como crear un Sitemap Casero .

Lo lógico si estamos hablando de sitios web muy extensos es utilizar algun tipo de scripts  o programa para crearlo.Pero en este caso como nuestro supuesto sitio tiene pocas páginas lo crearemos manualmente.

La extensión del documento debe ser .xml , lo crearemos con el bombre genérico de “sitemaps.xml” .

Se coloca siempre en la raíz de nuestro sitio para indexarlo en los buscadores o mostrarlo a los respectivos interesados.El archivo .xml es un archivo de texto y lo empezaremos escribiendo la introducción de todo archivo .xml.

<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

Aquí escribiremos el body
</urlset>

El sistema para introducir nuestras url es el siguiente.

<url>
<loc>http://www.tupagina.es/</loc>
<lastmod>2010-06-22</lastmod>
<changefreg>monthly </changefreg>
<priority>0.8</priority>
</url>

La etiqueta <loc> es obligatoria y se escribe con la barra diagonal (/) al final  y comenzar por “http://”.

La siguiente etiqueta (<lastmod>) opcional , informa al buscado la fecha de  actualización del documento . El formato es el siguiente “aaaa-mm-dd”.

La etiqueta <priority> podemosdarle un valor de prioridad entre el 0 y el 1.

La etiqueta  <changefreg> informa al buscado la frequencia de actualización de la página, pero aunque introduzcamos diariamente no se revisa diariamente, es solo orientativo. Permite los siguientes parámetros.

  • always (siempre)
  • hourly (cada hora)
  • daily (diariamente)
  • weekly (semanalmente)
  • monthly (mensualmente)
  • yearly (anualmente)
  • never (nunca)

Un ejemplo de como quedaría este sitemap casero.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://tupagina.com/</loc>
<lastmod>2010-06-22</lastmod>
<changefreg>daily</changefreg>
<priority>1</priority>
</url>
<url>
<loc>http://tupagina.com/imagenes</loc>
<lastmod>2010-06-20</lastmod>
<changefreg> daily </changefreg>
<priority>0.8</priority>
</url>

<url>

<loc>http://tupagina.com/comentarios</loc>

<lastmod>2010-06-20</lastmod>

<changefreg> hourly </changefreg>

<priority>0.7</priority>

</url>

</urlset>
]]> http://elblogdeerik.com/crear-sitemap-manualmente/feed 1 Redireccionar web en HTML http://elblogdeerik.com/redireccionar-web-en-html http://elblogdeerik.com/redireccionar-web-en-html#comments Fri, 18 Jun 2010 19:13:54 +0000 Erik http://elblogdeerik.com/?p=1108 Si queremos redireccionar nuestra web a otra diferente utilizando código HTML  podemos utilizar este comando.

Añadimos en la cabecera “<head>” del código de nuestra web la etiqueta META  donde

  • CONTENT  es el tiempo en segundos que queremos que tarde en redireccionar.
  • URL es la web a la que queremos redireccionar
<html>
 <head>
 <title>Redirigir al navegador a otra URL</title>
 <META HTTP-EQUIV="REFRESH"  CONTENT="10;URL=http://www.elblogderik.com">
 </head>
 <body>
 Vas a ser redireccionar en 10 segundos a El Blog De Erik
 </body>
 </html>
]]> http://elblogdeerik.com/redireccionar-web-en-html/feed 0 Como quitar barra lateral en WordPress http://elblogdeerik.com/como-quitar-barra-lateral-en-wordpress http://elblogdeerik.com/como-quitar-barra-lateral-en-wordpress#comments Mon, 14 Jun 2010 21:43:46 +0000 Erik http://elblogdeerik.com/?p=1094 En muchas ocasiones deseamos quitar la barra lateral de nuestros blog en wordpress. Algunos motivos pueden ser para crear un foro y ocupar el máximo espacio o simplemente porque queramos crear una página estática.

  • En primer lugar creamos una copia de nuestro “page.php” y le cambiamos el nombre a “personalizada.php”
  • Buscamos la linea <?php get_sidebar(); ?> y la eliminamos.
  • Tenemos que acordarnos de intruducir en las primeras lineas de nuestra nueva página el siguiente código.
<?php
 /*
Template Name: personalizada
  */
   ?>
  • Ahora solo queda añadirle estilos , para eso iremos a nuestra nueva página “personalizada.php” y crearemos nuestras nuevas clases.
//Buscaremos
<div id="content-body"> 
//Y lo sustituiremos
<div id="content-body-personalizada">
 //si es el theme por default o cualquier otro
<div id="content"> 
// lo renombramos a
<div id="content-personalizada">
  • Y para finalizar añadimos a nuestra hoja de estilos que se llama “style.css” las reglas para las nuevas clases que hemos creado.
  • En este caso que ocupe un 100% del espacio de nuestra web.
#content-body-personalizada {
width:100%;
}

Una vez terminado todos los paso nos dirigimos a nuesta página y pulsamos quick edit o edición rápida y solo debemos selecciona en plantilla el nombre que le hemos puesto en esta caso “foro”.

]]> http://elblogdeerik.com/como-quitar-barra-lateral-en-wordpress/feed 1 Evitar que un buscador indexe una página Web http://elblogdeerik.com/evitar-que-un-buscador-indexe-una-pagina-web http://elblogdeerik.com/evitar-que-un-buscador-indexe-una-pagina-web#comments Tue, 02 Feb 2010 14:07:28 +0000 Erik http://elblogdeerik.com/?p=915 En muchas ocasiones queremos que los buscadores no indexen algunas partes concretas  de nuestras páginas web , por ejemplo un formulario de contacto o simplemente información privada.

Evitar esto es muy facil debemos insertar en el header del código de la página entre las etiquetas meta la siguiente linea.

<META NAME="ROBOTS" CONTENT="no index"> 


Imaginemos que tenemos página que utilizamos como directorio Web y no queremos que indexe las páginas

apuntadas en esta web.

Añadiremos la siguiente linea 

<META NAME="ROBOTS" CONTENT="nofollow,no index">


El atributo “nofollow” se utiliza para indicar a los buscadores de que los enlaces existentes no seran seguidos por lo motores de busqueda. Muy habitual para evitar spam de comentarios con backlinks.

]]> http://elblogdeerik.com/evitar-que-un-buscador-indexe-una-pagina-web/feed 0 Breve guia sobre las etiquetas META http://elblogdeerik.com/breve-guia-sobre-las-etiquetas-meta http://elblogdeerik.com/breve-guia-sobre-las-etiquetas-meta#comments Sat, 21 Nov 2009 19:42:32 +0000 Erik http://elblogdeerik.com/?p=837

Voy a explicar una pequeña guía sobre los campos META o META tag en inglés , muy importantes si de posicionamiento estamos hablando , porque ayuda a los buscadores a clasificar nuestros sitios web y obtener un tráfico dirigido hacia nosotros.

Estos campos siempre se encuentran al principio del código de la página y no son visibles para los usuarios .

Una gran cantidad de campos META son iguales para todas las páginas de nuestra web.

Identificamos el idioma de nuestra web.

<meta name=”DC.Lenguage” SCHEME=”RFC1766” CONTENT=”Spanish”>

<meta http-equiv=”Content-Language” content=”es-ES”>

Dirección Web del autor de la página.

<meta name=”author” content=”Web del programador Web”>

Dirección Email del autor de la página

<meta name=”made” content=”Email del programador Web”>

Juego de caracteres de la Web ( Elegiríamos el siguiente juego de caracteres para Europeo Occidental).

<meta http-equiv=”Content-type” content=”text/html;ISO-8859-1”>

Si de posicionamiento estamos hablando las etiquetas META variables mas importantes son .

  • Campo META title

  • Campo META description

  • Campo META keywords

Campo META title

Empiezo por el campo meta title ya que es el más importante para los buscadores.

Este campo debe coincidir con el <TITLE> de nuestra página y quedaría de la siguiente manera.

Lo mas aconsejable es que el title sea un resumen menor a una decena de palabras de la página donde se encuentra, no de todo el sitio web.

El título lo componen las lineas subrayadas que encontramos en nuestros buscadores.

Un ejemplo :

<meta name=”description” content=”Blog informático – Guía breve sobre campos META (title,keywords,description) ”>

Una manera segura de aumentar el tráfico dirigido a nuestra web es elegir correctamente nuestra etiqueta title , buscando las más atractivas a la vista para los usuarios.

Campo META description

El siguiente campo que vamos a explicar es el

<meta name=”description” content=”descripción de la página del sitio web”>

Deberemos limitar este texto entre 20 a 30 palabras y lo encontraremos en las búsquedas a continuación del título.

Antigüamente las etiquetas META se usaban para buscar contenido , es decir dependiendo de la etiqueta que utilizas servía para aparecer en los buscadores. Tras el abuso de los webmaster la mayoría de buscadores lo ignoran y la utilizan para mostrar a los usuarios la descripción del sitio.

Aquí vemos la importancia de crear una etiqueta que incite al usuario a entrar en tu web.

Ejemplo:

<meta name=”description” content=”Manual breve sobre las etiquetas META keywords , title , description. Guia Detallada ”>

Campo META keywords

La etiqueta META keywords facilita a los buscadores la indexación y clasificación de nuestra página .

Suelen ser entre 30 y 40 palabras , donde se escriben los temas que componen la página , separados por comas cada uno.

Generalmente se suelen utilizar las mismas claves para todas las páginas de nuestro sitio web. Siempre es conveniente incluir estas mismas palabras en el contenido de la página porque sería incoherente utilizar unas palabras claves y que no pertenezcan al tema de la web.

Esta etiqueta fue la más abusada por los programadores y actualmente es casi totalmente ignorada por los buscadores pero una minoría casi inexistente si lo utilizan.

<META NAME="keywords" CONTENT="keyword 1 , keyword 2, keyword 3">

Un ejemplo concreto para nuestra Web sería :

<META NAME="keywords" CONTENT="blog informatico , etiquetas meta ,meta keywords , meta description , meta title ,guia , manual etiquetas ">

Espero que os haya servido de ayuda y hayais entendido el concepto y su uso de las etiquetas META. Para cualquier duda o sugerencía no dudeís en comentar.

]]> http://elblogdeerik.com/breve-guia-sobre-las-etiquetas-meta/feed 0 Mostrar enlaces como si fueran botones con CSS http://elblogdeerik.com/mostrar-enlaces-como-si-fueran-botones-con-css http://elblogdeerik.com/mostrar-enlaces-como-si-fueran-botones-con-css#comments Sat, 14 Nov 2009 22:06:14 +0000 Erik http://elblogdeerik.com/?p=828 Os reescribo este código que he utilizado para otros trabajos para simular un botón con un enlace corriente.

<html>
 <head>
 <title>Ejemplo como mostrar enlaces como si fueran botones CSS</title>
 <style type="text/css">
 a{ margin: 1em 0; float: left; clear: left; }  
 a.boton {
 text-decoration:none;
 background: #EEE;
 color: #222
 border 1px outset #CCC;
 padding: .1em .5em;
 }
 a.boton:hover {
 background:#CCB;
 }
 a.boton:active {
 border: 1px inset #000;
 }
 </style>
 </head>

 <BODY>
 <!--Vamos a mostrar enlaces como si fueran botones con CSS.-->

 <a href="#">ENLACE1</a>    

 <a href="#">ENLACE2</a>
 </BODY>

</html>

Graficamente quedará de la siguiente manera.

CSS

]]> http://elblogdeerik.com/mostrar-enlaces-como-si-fueran-botones-con-css/feed 0 Bloquear boton derecho del raton. http://elblogdeerik.com/bloquear-boton-derecho-del-raton http://elblogdeerik.com/bloquear-boton-derecho-del-raton#comments Wed, 21 Oct 2009 17:16:40 +0000 Erik http://elblogdeerik.com/?p=772 Hoy he necesitado evitar que se copien o almacenen en disco las imagenes de una web , y buscando una solución fácil he decidido desactivar el botón derecho del mouse he encontrado varias soluciones que expongo en las siguientes lineas.

Para bloquear el botón derecho del mouse en blogger solo hace falta dirigirnos a diseño>añadir Gadget y seleccionar HTML/JavaScript y pegar el siguiente código.

<script language="Javascript">
<!-- Begin
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
// End -->
</script>

La opción que me ha servido en mi caso para bloquear botón derecho del ratón en wordpress ha sido la de copiar y pegar el siguiente código en todas aquellas páginas de mi theme que quería tener esta función (single.php, index.php) que puede variar según las necesidades de cada uno.

    <script type="text/javascript">


    document.oncontextmenu = function(){return false}


    </script>
]]> http://elblogdeerik.com/bloquear-boton-derecho-del-raton/feed 8 Formulario de Contacto Html http://elblogdeerik.com/formulario-de-contacto-html http://elblogdeerik.com/formulario-de-contacto-html#comments Mon, 19 Oct 2009 10:49:14 +0000 Erik http://elblogdeerik.com/?p=761 Formulario de contacto simple en html

<h1>Contacta</h1>
<FORM NAME="Enviar" Enctype="text/plain" action="mailto:"TUCORREO"?Subject=Cualquier comentario" method="post">
<br><br>
<b>
Nombre: <input type="text" name="Nombre"><br>
Correo: <input type="text" name="Correo"><br>
Tlf:<br> <input type="text" name="tlf"><br>
Mensaje: <TEXTAREA name="Mensaje" rows="10"></TEXTAREA><br>
<input type="submit" value="enviar"></b>
</FORM>

Resultado:

formulario

:: Otros formularios

]]> http://elblogdeerik.com/formulario-de-contacto-html/feed 0 Relojes incrustados en codigo html. http://elblogdeerik.com/relojes-incrustados-en-codigo-html http://elblogdeerik.com/relojes-incrustados-en-codigo-html#comments Sat, 20 Jun 2009 19:10:47 +0000 Erik http://elblogdeerik.com/?p=271 ¿Quieres tener uno de estos relojes en tu web?

Es muy fácil, sólo tienes que elegir el reloj que mas te guste y hacer un clic en conseguir este reloj. A continuación te dirigiremos a una página donde aparecerá un código que debes copiar para tener el reloj en tu web.

También puedes hacer un clic en el botón ver mas relojes como este para poder ver otros modelos de relojes.



vuelos baratos

:: Mas relojes

]]> http://elblogdeerik.com/relojes-incrustados-en-codigo-html/feed 2