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.

Seguro que alguna vez os a pasado que cuando escribes algún tipo de código en HTML que supuestamente está en codificación de carácteres UTF, no nos reconoce los acentos y nos muestra estos símbolos tan raros y molestos

Generalmente lo podemos solucionar cambiando nuestro sistema de codificación de nuestro editor.

El método es simple debemos introducir antes el simbolo & más la palabra acute terminando con ;

Para mostrar la á       &aacute;
Para mostrar la é        &eacute;
Para mostrar la í         &iacute;
Para mostrar la ó       &oacute;
Para mostrar la ú       &uacute;
Para mostrar la ñ      &ntilde;

EJEMPLO:

Para poner la palabra “programación” lo pondríamos de la siguiente forma  programaci&oacute;n

La extensión de estos archivos es y será siempre .swf . La forma más fácil de incrustarlo es subiendo el archivo a nuestro servidor donde tenemos los archivos de nuestra web. Lo más recomendable sería crearnos un directorio en la carpeta raíz que apuntada a estas animaciones.

Por ejemplo “/flash/animacion1 “.

Una vez lo hayamos subido al servidor como si fuera una simple imagen , nos fijamos en la ruta que nos lleva a este archivo. El modo de ponerlo en nuestro código es simple, siempre deberemos poner el mismo código y modificar los parámetros según nuestros gustos o objetivos.

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0″ width=”32″ height=”32″> <param name=”movie” value=”archivo.swf” /> <param name=”quality” value=”high” /> <embed src=”archivo.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”32″ height=”32″></embed> </object>

La primera parte es la que indica al usuario que se descarga una versión de Adobe en el caso que no la tenga para poder visualizar la animación. En el siguiente parámetro debemos poner el tamaño de nuestra animación.

Donde vemos ” value=”archivo.swf” ” y “ src=”archivo.swf” “ pondremos nuestra ruta del archivo en nuestro caso pondremos nuestra ruta  ” /flash/nombrearchivo.swf ”

Sabes otras formas de incrustar Flash ? Nos la comentas?

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

Uno de los fantasmas de los desarrolladores es Internet Explorer en concreto el Internet Explorer 6 y en ocasiones el 7. Esto quiere decir que estos navegadores utilizan los estandares de una forma un poco particular , dejando la definición de standar de lado.

Uno de los problemas más comunes es el uso de .png transparente en IE6 e IE7 , veremos que nos aparece con un fondo manchado y no con la transpariencia que nos gustaría.

Por la red navegan varias soluciones y hacks. En mi opinión el más viable y eficaz es utilizar el típico javascript.

Podemos encontrar multiples Javascript pero en este caso vamos a utilizar unitpngfix.js ya que tras probar varios es el más simple y facil de implementar.

PASO 1

Lo podemos descargar del enlace  unitpngfix.js

PASO 2

El archivo esta compuesto por el JavaScript llamado “unitpngfix.js” que lo debemos copiar en la carpeta raíz o en algun sitio donde lo tengamos localizado.

Copiamos el archivo de imagen “clear.gif” en la misma carpeta que el archivo anterior.

PASO 3

Copiamos el siguiente código en la cabecera de nuestro website teniendo en cuenta que las rutas coincidan.

<script type=”text/javascript” src=”unitpngfix.js”></script>

:: ENLACE DESCARGA unitpngfix.js

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

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.

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

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>