Web Design & Hosting by Miguel Estrada

Remodelaciones de Sitios Web - Analogía July 30, 2008

Posted by developpeur in : Español, Internet Hispano, Web Development , add a comment

A veces es difícil explicarle a un cliente los procesos, terminologías y situaciones colaterales implícitas en el desarrollo web, las analogías son una forma de explicar de una manera más coloquial de tal forma que sea sencillo su entendimiento.

Para el caso de este post, o sea Remodelación de un Sitio Web, tomaremos como analogía la remodelación de una casa. Así que primeramente hay que contextualizarnos asignando equivalencias. Para el caso de esta analogía solamente tomaremos 3 elementos del proceso de construcción de una casa: Planos, Obra Negra y Acabados. Equiparándolos con los procesos de desarrollo web: Diseño, Programación, Integración.

Explico cada uno:

Planos (Diseño): Como nos gustaría que se viera la casa, donde va cada área, ubicar instalación eléctrica, agua, gas, etc. Lo mismo para un sitio web, como queremos que se vea, donde va cada sección, cuantas páginas, etc.
Obra Negra (Programación): Lo que sustenta lo casa, block, castillos, dalas, cemento, etc. Para un sitio web: código del frontend, el del backend, bases de datos, servidor, sistema operativo, etc.
Acabados (Integración): Piso de mármol o imitación madera, pintura económica o lavable, los detalles pues. Para un sitio web se refiere específicamente a la segmentación gráfica y la integración del CSS.

A fin de aclarar las situaciones que confunden en las remodelaciones, he asignado una escala de acuerdo al nivel de modificación que se requiera:

Nivel 1: Usualmente textos, es como cambiar las chapas o los grifos de una casa, son asuntos menores de muy bajo costo, no hace falta cambiar planos ni obra negra.
Nivel 2: Usualmente gráficos. A veces únicamente nos piden conservar la estructura de un sitio web pero cambiar su apariencia gráfica o alguna foto en cuestión, esto es relativamente sencillo, por supuesto tiene un costo mayor, pero equivale según el caso a cambiar desde el color de las paredes hasta un cambio de piso o detalles de acabados, no implica cambios en obra negra sin embargo se sugiere algo de maquetación para que el resultado sea lo más cercano a lo esperado, igualmente para los sitios web, una propuesta gráfica es recomendable.
Nivel 3: Modificaciones a la estructura del sitio, usualmente cuando queremos agregar una página nueva, una sección nueva o cambiar la distribución de los elementos y esto repercute en todo el sitio, su costo es más elevado. Bueno comparándolo con una casa esto equivale desde añadir una puerta, una recámara adicional, un segundo piso, etc., o sea cambios en la obra negra y por lo tanto lo ideal es recurrir a un plano para que el resultado sea cercano a lo visualizado.
Nivel 4: Rediseño de la estructura del sitio, usualmente una nueva versión mejorada sirviendo al mismo propósito que ya tenía el sitio. Equivale a tumbar la casa y hacer una nueva en el mismo predio. Un costo importante. Obvio planos y obra negra totalmente nuevos.
Nivel 5: Reingeniería. Usualmente implica un cambio de tecnología, plataforma, sistemas y se abre a la posibilidad de nuevos propósitos. Equivale a tumbar la casa, modificar las dimensiones del predio y hacer un condominio o locales comerciales.

Por lo anterior es sumamente importante al momento de crear o remodelar un sitio web (como lo es en una casa) observar los siguientes detalles:

Certeza en el diseño: para no estancarse, regresarse o equivocarse en las fases siguientes.
Estructura funcional: que sea resistente, bien armada y adecuada al propósito.
Futuras ampliaciones: dejar margen para crecer, si es posible de acuerdo a un plano.
Vista agradable: que el proyecto sea vistoso de acuerdo a su propósito.

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

How to save data in fillable PDF forms May 29, 2008

Posted by developpeur in : English , add a comment

I recently had to fill up an important amount of government fillable PDF forms, as you may already know you can not save this data (most of the time) you may only print such forms, so there’s no way you keep a digital record in your so called “paperless office”. Or like in my case fill the forms at home in my laptop and print them the next day at the office. The answer is simple, you still won’t be able to save the data, but you can print it to a “digital document” such as XPS or TIF and print it or review it later (still you won’t be able to re-edit such file).

Well, probably others may have come to this solution, but for the sake of rich and useful search engine results here goes the solution:

Fill out the fillable PDF form with Acrobat Reader.
Click the print button on the Acrobat Reader.
Instead of choosing your default printer choose: Microsoft XPS Document Writer (if not installed download it for free HERE).
Click OK or Print
You’ll be prompted for assigning a name to the file, directory path and saving it, so just do that and you’re done.

Now, the next morning or year when you want to print on paper that form, just look for the file and open it with Internet Explorer. Either open your IE, and then go to File+Open and browse to the file from there, or open it by right-clicking the .xps file and go to the “Open with” option and choose IE.

If you want to know more about XPS files, I wrote a post about them last year: XPS vs PDF for Digital Documents.

Sphere: Related Content

Upgrading PostNuke from 0.762 to 0.764 February 19, 2008

Posted by developpeur in : English, PostNuke, Web Development , add a comment

From 0.762 to 0.764 there are no DB changes, so just replace all files EXCEPT third party modules, custom blocks, custom themes AND config.php

Process:

Backup files.
Set theme to extralite.
Delete all files.
Upload version 0.764
Place back third party modules, custom blocks, custom themes.
Place back your old config.php

Etiquetas en fotogramas de Flash January 29, 2008

Posted by developpeur in : Español, Flash , add a comment

Para hacer etiquetas (labels) o comentarios (comments) dentro de una Fotograma (Frame) en Flash:

Ir a la pestaña o ventana de Propiedades.
Escribir un texto donde dice “Fotograma”.
Seleccionar que tipo de etiqueta será.

Hay 3 tipos de etiqueta:

Nombre: Identifican a fotogramas clave en la Línea de Tiempo y se usan en vez del número de fotograma (que puede variar al crecer la animación) para indicar un fotograma de destino en “Acciones”.
Comentario: Observaciones para uno mismo o para otras personas que trabajan en el mismo documento.
Anclaje: Simplifican la navegación. Permiten usar los botones para avanzar y retroceder del navegador, para saltar de un fotograma a otro, o de una escena a otra.

En este link vienen otros aspectos generales del Flash

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.