Web Design & Hosting by Miguel Estrada

Importancia de diseñar en XHTML CSS con estándares W3C July 24, 2008

Posted by developpeur in : Español, Internet Hispano, Web2.0 , add a comment

El diseño en XHTML/CSS es muy diferente al HTML típico (la versión 4). Diseñar para HTML es muy fácil ya que se puede hacer (la mayoría de las veces) a través de un GUI como Dreamweaver, Firefox, Photoshop, etc., con la consecuente pérdida de estándares y ante (o vs.) el creciente énfasis de los buscadores en precisamente eso: ESTANDARES.

Bien, el XHTML es el formato de mayor vigencia actualmente (al 2008) y el más premiado por los motores de búsqueda por su facilidad para ser explorado por los robots, entre más estricto y puro es mejor. La páginas web programas en XHTML/CSS por lo general son sujetas a una verificación voluntaria por el W3C, aun cuando dicha verificación es voluntaria y no hay multas por no pasar la verificación, si puede representar un costo (sobre todo para las páginas web comerciales) en el largo plazo al ir cayendo en la posición que se tenga en las “paginas de resultados de los motores de búsqueda” (los SERPs), o bien jamás aparecer en ellos.

No es que yo nunca haya usado un GUI, de hecho mi favorito es el Dreamweaver, pero tampoco se puede usar para todo, vamos… hasta una navaja suiza tiene sus límites, y sin duda el XHTML con CSS es mejor programarlo a mano o al menos revisarlo o limpiarlo a mano antes de verificarlo y publicarlo.

La siguiente analogía va como ejemplo, supongamos que el motor de búsqueda es un buzo de aguas profundas buscando un tesoro en el fondo del mar. Nuestra página web es el espacio del océano (el agua) donde se ha decido buscar dicho tesoro. El tesoro es el producto o servicio que ofrecemos en nuestra página.

Cuando un motor de búsqueda explora una página web hecha con un GUI equivale a bucear en lodo, será difícil, lento y tal vez nunca encontremos el tesoro.
Cuando un motor de búsqueda explora una página web XHTML con estándares W3C equivale a bucear en agua purificada, todo será fácil, rápido y visible.

Sphere: Related Content

Pasos para diseñar en XHTML CSS July 24, 2008

Posted by developpeur in : Español, Internet Hispano, Web Design, Web2.0 , add a comment

¿Cómo hacer una página web en XHTML/CSS? ¿Cuáles son los pasos para diseñar en XHTML/CSS? Son preguntas recurrentes en foros de diseño web en diferentes idiomas, sin que hasta el momento yo haya encontrado una respuesta simple, lo cierto es que posiblemente no la hay debido a que cada desarrollador aplica una metodología distinta en su proceso. Libros excelentes se han escrito sobre el tema, sin embargo queda abierto al criterio del desarrollador el orden de los pasos a seguir. A mí me gusta programar manualmente pues obtengo resultados prácticamente exactos al modelo gráfico presentado (al cliente o al jefe).

Mi metodología es la siguiente:

Diseño Gráfico:
Diseñar (en photoshop, fireworks o lo que quieras) la apariencia gráfica que tendrá la página, “el modelo”, con todo y textos, botones, etc… vamos, como una fotografía de la página.
Etiqueta CSS:
Genero un archivo CSS con las etiquetas de estilo en blanco de acuerdo a las áreas que logro identificar en el modelo: header, content, footer, etc.
Etiqueta XHTML:
Genero un archivo XHTML 1.0 Strict, defino y posiciono las divisiones con las respectivas etiquetas de estilo, incluyo todos los textos, al menos en forma simulada (lorem ipsum) si no existen los reales todavía.
Define Estilos:
Asigno las características de estilo a cada una de las etiquetas del CSS creado previamente y que estaban en blanco.
Segmenta:
Procedo a segmentar o “rebanar” las piezas del modelo grafico que me serán de utilidad y que serán recogidas por el CSS o el XHTML una vez en el servidor.
Ajusta:
Reviso que las piezas del paso anterior hayan quedado en su lugar de acuerdo al modelo, reviso medidas, cabos sueltos, etc.
Verifica:
Procedo a revisar que la página pase efectivamente la verificación de la W3C.

Espero que esta metodología sea de ayuda para los diseñadores o desarrolladores web que apenas se inician en esto, igualmente invito a los desarrolladores y diseñadores web veteranos que quieran compartir su metodología, lo hagan en los comentarios de este post para enriquecer este recurso.

Sphere: Related Content

Resultados Orgánicos vs. Resultados Pagados November 27, 2007

Posted by developpeur in : Español, Internet Hispano, Web Marketing, Web2.0 , add a comment

En Resumen:

Resultados Orgánicos: Tardan en aparecer entre 3 a 6 meses (para sitios nuevos) y se logran a partir de la correcta escritura del código fuente (programación) de cada página web y la adecuada inclusión de los estándares propuestos por los motores de búsqueda. Los resultados orgánicos o “naturales” en los motores de búsqueda por lo general aparecen del lado izquierdo de la página. Al optimizar orgánicamente una página web en el largo plazo generará relevancia o “Ranking” en palabras clave específicas.
Resultados Pagados: Es el posicionamiento pagado o “Enlaces Patrocinados” en las páginas de resultados de los buscadores y aparecen de 30 minutos a una hora después de realizar el pago al buscador, sin importar si el sitio está bien programado o no. Por lo general los resultados pagados aparecen del lado derecho de la página y/o arriba de los resultados orgánicos. El posicionamiento pagado no genera relevancia, pero genera tráfico inmediato.

Ninguno excluye al otro, ambos se complementan. Aunque en el largo plazo los resultados orgánicos generan relevancia y tráfico de calidad. En la siguiente imagen queda manifiesta su ubicación, los Resultados Orgánicos están marcados con Verde y los Resultados Pagados con Amarillo.

La explicación:

Difícilmente se podrían resumir en un solo artículo todos los elementos que comprenden el Web Marketing, vamos… solo para enterarse “en corto” de los elementos que la componen habría que consultar al menos unas 50 páginas de la Wikipedia (a diciembre de 2007) lo cual tampoco es mala idea y seguramente en un futuro habrá que escribir al respecto resumiendo aun mas dicha información.

Sin embargo las preguntas más frecuentes (al menos las que me hacen a mi) van relacionadas con los SERPs (Search Engine Result Pages), o las Páginas de Resultados de los Motores de Búsqueda, el cómo aparecer más rápido en ellas o el cómo salir “hasta arriba” en los resultados. Lo anterior cae específicamente dentro de uno de los ocho métodos (a dic. 2007) del Web Marketing conocido como SEM
(Search Engine Marketing) lo que en español sería algo así como “Mercadotecnia en Buscadores” aunque, para efecto de estándares, en este artículo usaremos la terminología a como se conoce en Internet.

Como decía, el SEM es uno de los ocho métodos que componen el Web Marketing, y el mismo SEM está compuesto a su vez por otros 4 métodos: SEO, Posición Pagada, Inserción Pagada y SMO. Sin embargo la mayoría de empresas y profesionales que se dedican al Web Marketing enfocan sus esfuerzos usualmente en 2 métodos del SEM: El SEO y la Posición Pagada, también conocida como PPC
(Pago Por Click) que es de lo que trata este artículo y particularmente sobre sus diferencias, así que vamos a ellas.

SEO (Search Engine Optimization)

Método que se ocupa de los Resultados Orgánicos, e implica el proceso de incrementar el volumen y la calidad de tráfico (visitas) hacia un sitio web desde las páginas de resultados de los buscadores mediante la correcta escritura del código fuente de cada página web y la adecuada inclusión de estándares en el mismo. A este proceso también se le llama Optimización Orgánica, ya que se logra a través de métodos naturales (el código fuente) y es recompensada por los buscadores otorgándoles relevancia o PageRank (en el caso de Google) que es parecido a un “Rating” para internet, resultando en un tráfico de mayor calidad a medida que aumenta el Rank o “rating” de la pagina web. Esta optimización por lo general es realizada por un Desarrollador Web o bien por un Diseñador Web con conocimiento de causa.

Ventajas del SEO:

Genera relevancia o PageRank (rating).
La calidad del tráfico es superior que un enlace patrocinado una vez que se tiene un buen rating.
Efectos duraderos
Es relativamente económico.

Desventajas del SEO:

Difícilmente reconoce tecnologías encapsuladas como el FLASH u obsoletas como los Frames.
Tarda en aparecer en los SERPs, a veces hasta 6 meses o más.
Implica actualizaciones generacionales a medida que los buscadores actualizan sus algoritmos.
Se requieren aplicaciones adicionales para medirlo.

Posición Pagada (PPC)

Se refiere a los Enlaces Patrocinados
o Resultados Pagados, también se le conoce como PPC (Pago Por Click) e implica la contratación de un anuncio similar a un clasificado en una posición notoria dentro de las páginas de resultados de un buscador (los SERPs) que aparecen al introducir determinada palabra clave (keyword), generalmente son visibles a un lado o arriba de los resultados orgánicos. Dicha contratación se hace directamente con la empresa propietaria del buscador (a través de agencias, distribuidores, consultores, etc.) generalmente a través de un prepago equivalente a $50 USD como mínimo, presupuesto del cual se va descontando una cantidad cada vez que algún navegante da click en el anuncio. El costo del click es determinado libremente en una subasta automatizada, por ejemplo: Si el costo del click empieza en 0.25 centavos pero un anuncio competidor ofrece 0.30 centavos por click su anuncio aparecerá arriba del nuestro, generalmente el sistema de subasta permite introducir rangos de subasta automáticos para evitar una supervisión tediosa, aun así se recomienda supervisar el comportamiento del anuncio al menos unas 3 veces al día si la competencia en vasta.

Ventajas del PPC:

La programación del sitio es irrelevante.
Aparece de inmediato en los SERPs, entre 15 minutos a 2 horas.
Genera tráfico inmediato
Aparece solo cuando se busquen las palabras clave contratadas.
Es medible desde el origen.

Desventajas del PPC:

No genera relevancia o PageRank (rating).
Es efímero, pues deja de ser visible en el momento en que agota su presupuesto.
Es caro, si el anuncio tiene muchos competidores el costo (por subasta) del click puede llegar a ser bastante alto y agotar rápidamente el presupuesto planeado.

Sphere: Related Content

My blogging addiction widget November 22, 2007

Posted by developpeur in : Web2.0, Widgets , 1 comment so far

81%How Addicted to Blogging Are You?

Sphere: Related Content

Social Networks in English November 17, 2007

Posted by developpeur in : English, Web2.0 , add a comment

This is a compilation of the top social networks in english with their ranks and market share to Feb. 2007 according to Hitwise.com

MySpace 80.74%
Facebook 10.32%
Bebo 1.18%
BlackPlanet 0.88%
Xanga 0.87%
iMeem 0.73%
Yahoo! 360 0.72%
Classmates 0.72%
hi5 0.69%
Tagged 0.67%
LiveJournal 0.49%
Gaiaonline.com 0.48%
Friendster 0.34%
Orkut 0.26%
Live Spaces 0.18%
HoverSpot 0.18%
Buzznet 0.18%
Sconex 0.14%
MiGente.com 0.11%
myYearbook 0.11%

And then some…

Sphere: Related Content

Web 2.0 Widgets November 14, 2007

Posted by developpeur in : Cheat Sheets, Web2.0, Widgets, Zeitgeist , 3comments

This a partial compilation, please feel free to post your widget link in the comments in any language.
Esta es una recopilación parcial, por favor aporta el link de tu widget en los comentarios y en cualquier idioma.
Ceci est un recueil partiel, svp mettre le lien de ton widget dans les commentaires et dans quelque langue.

Define Widget:

Web Widgetmania