Para crear este efecto hemos añadido a  nuestra etiqueta <div></div> los siguientes estilos.

background: -moz-linear-gradient(center top , #2B2B2B 0%, #6B6B6B 100%) repeat scroll 0 0 transparent; border-bottom: 2px solid #BDBDBD;
box-shadow: 0 0 3px #1C1C1C;
color: #444; opacity: 0.8;
padding: 20px;
text-shadow: 0 0 1px #1C1C1C;

Y de esta manera y con estos recursos se pueden obtener resultados verdaderamente interesantes.

Hemos encontrado una cuantas utilidades que nos ayudan a desarrollar nuestro proyectos web de una forma o otra. La primera herramienta nos permite visualizar nuestra nueva página web en nuestro navegador con diferentes resoluciones. Y de este modo poder testear en diferentes tamaños de pantalla la web.

Dirección: http://browize.com

HTMLform.com es una herramienta que nos permite crear un formulario de contacto e incluso utilizar ya creados de uan forma gráfica e intuitiva.

Dirección: http://htmlform.com

Framebox.org es una utilidad para crear esqueletos de webs, bocetos conceptuales y testeo de estructuras con labels, radibuttons, etc..

Dirección: http://framebox.org

CSS3generator es un rápido generador de código CSS3 para crear vanguardistas detalles en nuestras webs románticas y neoclásicas

Dirección: http://css3generator.com

::  ENLACE CSS Menu Maker

Hoy os muestro este recurso para desarrolladores web que me ha ayudado en muchas ocasiones , si queremos crear un menú rapidamente con CSS+HTML, y no queremos diseñarlo desde cero  . Debemos saber que tipo de menú queremos : vertical , horizontal , etc…  y una vez seleccionamos buscamos el que más se acerque a nuestra idea o a nuestro gusto.

Descargamos el código y lo implementamos en nuestro website . Pudiendolo modificar a nuestras espectativas o dejarlo tal como nos lo hemos descargado.

Ejemplo del código que nos permiten descargar.

	<div class="menu">

		<ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" id="current">Products</a>
				<ul>
					<li><a href="#">Drop Down CSS Menus</a></li>
					<li><a href="#">Horizontal CSS Menus</a></li>
					<li><a href="#">Vertical CSS Menus</a></li>

					<li><a href="#">Dreamweaver Menus</a></li>
			   </ul>
		  </li>
			<li><a href="/faq.php">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>

                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
			<li><a href="/contact/contact.php">Contact</a></li>
		</ul>
	</div>

Y el CSS

.menu{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font-family:verdana,geneva,arial,helvetica,sans-serif;
 font-size:14px;
 font-weight:bold;
 color:8e8e8e;
 }
.menu ul{
 background:url(images/menu-bg.gif) top left repeat-x;
 height:43px;
 list-style:none;
 margin:0;
 padding:0;
 }
 .menu li{
 float:left;
 }
 .menu li a{
 color:#666666;
 display:block;
 font-weight:bold;
 line-height:43px;
 padding:0px 25px;
 text-align:center;
 text-decoration:none;
 }
 .menu li a:hover{
 color:#000000;
 text-decoration:none;
 }
 .menu li ul{
 background:#e0e0e0;
 border-left:2px solid #0079b2;
 border-right:2px solid #0079b2;
 border-bottom:2px solid #0079b2;
 display:none;
 height:auto;
 filter:alpha(opacity=95);
 opacity:0.95;
 position:absolute;
 width:225px;
 z-index:200;
 /*top:1em;
 /*left:0;*/
 }
 .menu li:hover ul{
 display:block;
 }
 .menu li li {
 display:block;
 float:none;
 width:225px;
 }
 .menu li ul a{
 display:block;
 font-size:12px;
 font-style:normal;
 padding:0px 10px 0px 15px;
 text-align:left;
 }
 .menu li ul a:hover{
 background:#949494;
 color:#000000;
 opacity:1.0;
 filter:alpha(opacity=100);
 }
 .menu p{
 clear:left;
 }    
 .menu #current{
 background:url(images/current-bg.gif) top left repeat-x;
 color:#ffffff;
 }

::  ENLACE CSS Menu Maker

Esto va cojiendo forma y para demostrarlo nuestro amigo el organismo World-Wide Web Consortium (W3C) ha creado un nuevo logo para HTML5. El nuevo lenguaje tan esperado parece que inminentemente va a llegar entre nosotros y que tendrá un lugar entre la tecnología del desarrollo web, gracias a la ayuda del gigante Google y muchisimos desarrolladores de diferentes plataformas la inmensa mayoria sigue con precaución a un cambio tan drástico.

Ahora la W3C ha tratado de colaborar a su popularidad con la creación de un logo que según sus creadores “se mantiene fuerte y verdadero, resistente y universal como el lenguaje de marcado que se utiliza. Brilla tan fuerte y de forma tan contundente como los desarrolladores web que piensan en el futuro. Es el estándar de los estándares, una bandera para el progreso”.

El logo fue diseñado por la agencia Ocupop, que se centra en el branding, la identidad y el diseño web, entre otras facetas del marketing y el trabajo de diseño. Y su puesta en escena tratará de servir para identificar mejor a todos los desarrollos web que hagan uso de un estándar prometedor en muchos frentes.

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”.

Este código es muy útil si queremos crear un paginador en HTML rapidamente.Solo debemos copiar este código nuestro sitio y en el archivo style.css copiar el código que adjunto posteriormente.

<div id="paginacion">

  <li><a href="pagina1.html">1</a></li>
  <li><a href="pagina2.html">2</a></li>
  <li><a href="pagina3.html">3</a></li>
  <li><a href="pagina4.html">4</a></li>

</div>

Este lo adjuntamos en el archivo style.css , pudiendolos modificar según nuestras necesidades y gustos.

#paginacion ul{
 list-style-type: none;
}
#paginacion li{
 display: inline;
}
#paginacion li a{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 12px;
 color: #003399;
 text-decoration: none;
 margin: 2px;
 padding: 6px;
 border: 1px solid #D6D6D6;
}

#paginacion li a:hover{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 12px;
 color: #FFFFFF;
 text-decoration: none;
 margin: 2px;
 padding: 6px;
 border: 1px solid #D6D6D6;
 background-color: #0066CC;
}

En nuestra andadura recojiendo plugin para mozilla Firefox hemos encontrado otro plugin llamado Web Devoloper que és realmente útil si quieres comprobar como se vera nuestro sitio web en construcción en diferentes resoluciones.

Web devoloper nos permite simular cualquier tipo de resolución para saber si tenemos cuadrados los objetos de nuestro website y nos posibilita ver y editar CSS o la información de nuestros estilos entre otras muchas opciones.

:: Enlace Descarga

:: Enlace autor

:: Enlace Mozilla

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>

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.