Tamaño del original

Cuando diseñes una web a 800x600px, por favor hacé el original a 800x600px… una hoja A4 apaisada en el illustrator tiene aproximadamente 800×600 px. Entonces porqué no hacerlo en una A4 apaisada en vez de hacerlo por ejemplo a una resolución extraña como 1400x600px?
Explico el porqué de este pedido:

• el cuerpo del texto no puede ser menor a 9px y cuando se manejan en un tamaño de pantalla grande (lo que mencionaba arriba… 1600×700 px) tienden a usar los espacios como si fuera una hoja de papel y pones muchos textos a 6px que despues en una web ni Dios lo puede leer. Pero claro en el papel se ve bien…. Por eso cuando diseñenen una web tengan en cuenta esto: el tamaño mínimo de una tipografía es de 9px, más chico que eso, la tipo se destruye!!
• En el uso de backgrounds o formas libres, tengan en cuenta no sólo el tamaño de un monitor de 800×600 de resolucion, sino que deben pensar que también se debe ver bien en todo tipo de monitores, de la resolucion que sea. Uno de los principales objetivos de comunicación para un diseñador web es justamente ese: que el diseño se vea lo mejor posible en todas las resoluciones posibles. Muchas veces, el diseñador gráfico no tiene en cuenta este aspecto y su diseño queda bien para una resolución, pero sucede que ese diseño que se veia perfecto, en otras resoluciones pierde muchisimo porque queda como un cuadrado. Espero ser claro. Mi consejo es: cuando diseñes una web, oh diseñador gráfico de mi alma, imagines cómo va a ser el resto del entorno (imaginátela cómo sería poniendo tu monitor en distintas resoluciones), no sólo la página en sí.

Colores

Ver algo en papel no es lo mismo que verlo en una pantalla. Por eso mismo, DG, cuando diseñes una web tené en cuenta que los contrastes no se aprecian de igual manera. Puede que quede chetazo un fondo naranja con tipo blanca en un papel, pero el usuario web se va a defecar para leer eso. Te va a denunciar por haberlo dejado ciego despues de haber leido un par de párrafos!

Texto

• Rodear una imagen con texto se puede, pero solamente se puede con una alineación recta hacia alguno de los lados, no se puede contornear una imagen con texto.
• Yo personalemente no recomiendo los justificados (en el cuerpo del texto), en el quark te divide las palabras y no te quedan espacios en blanco en el cuerpo del texto, pero en HTML esto no ocurre asi. A tenerlo en cuenta. el HTML no te hace hyphenation.
• A menos que esté en una imagen, el texto no se puedo poner inclinado!

Bueno, espero que sirva este pequeño aporte a la salud mental de los que la luchamos en la web.

Bookmarkealo

Esto parece ser la eterna cuestión entre los desarrolladores web: ¿HTML or XHTML? En muchos lados aparece planteada la pregunta en foros y blogs, los desarrolladores web le preguntan a Robert o a otra gente que escribe sobre este tema: qué es lo que ellos piensan acerca de cuál es la mejor opción a seguir. Robert no escribió este post para decir cuál es la última opción, sino más bien para que nos enteremos cuáles son las consecuencias del camino que elegimos. Entonces, empecemos desde el principio:

¿Estricto o Transicional? (strict | transitional)

Definitivamente estricto. Los doctypes transicionales son exactamente lo que el nombre implica: un tipo de documento para una fase de transición, esto significa que no va a ser usado permanentemente. Si escribís HTML y elegís transitional, obtendrás un rendereo en Quirk Mode (algo asi como "modo caprichoso") de tu HTML, como resultado conseguirás que los browsers tratarán de imitar un comportamiento viejo e incorrecto. Si elegís XHTML Transitional para tu .HTML, el IE interpretará el código del modo más estricto disponible, en cambio obligarás a los browsers basados en Mozilla que lo interpren en modo "Casi Estandar".

En cambio, si usas el doctype strict, obtendrás una interpretación (por parte del browser) correcta, completamente compatible con los estándares, más consistente y más compatible a futuro.

¿Qué es XHTML?

Un documento XHTML es el que está bien armado de acuerdo con las reglas del XML. Todos los tags deben estar cerrados y correctamente jerarquizados, y para los tags como img, input, link, etc, se le debe agregar una barra al final de tag para cerrarlo, como este: <input type="text" />. Si estás escribiendo código que debería ser accesible para la gente que usa Netscape 4 y algunos otros browsers viejos, entonces asegurate de poner un espacio antes de la barra (Nota: este tip no es para que se vea bien en Netscape 4, sino para que por lo menos funcione).

Supuestamente podés guardar una página hecha en XHTML y usarla sin problemas como XML.

¿Porqué XHTML?

Eso depende totalmente de tus necesidades. Alguna gente cree que es muy fácil y consistente escribir el código en esta moda XML, donde todo debe estar bien formado y todos los elementos deben estar cerrados. Otra gente lo elige para extender su funcionalidad con "namespaces", para usarlo en conjunción con MathML. Algunos otros, deben trabajar con XHTML, no por su propia elecci�n, sino porque los productos de su compañía son entregados en XHTML.

¿Escuché algo sobre application/xhtml+XML?

Si, esto es el tipo MIME que va en tu código. Para el HTML, el tipo de media (MIME) es text/html. De acuerdo con el W3C, la organización responsable de recomendaciones como HTML, XHTML, etc. (mejor conocidas como estándares web), aplica en su documentación para los XHTML Media Type:

La application/xhtml+XML DEBERÍA ser usada para los documentos XHTML para aplicar a los agentes de usuario XHTML (XHTML user agents). Los autores que desean que sus archivos soporten ambos “user agents” (HTML y XHTML) DEBEN aplicar a su código el content negotiation (negociación del contenido) para identificar los documentos HTML con txt/html y a los XHTML con application/xhtml+XML. También nota que no es necesario para los documentos XHTML servidos como application/xhtml+XML seguir con las guías de compatibilidad HTML.

Esto significa que los browsers que puedan manejar application/xhtml+XML deberían renderizar la página de esta manera. Sin embargo, IE no soporta este media type, entonces, requiere que le mandes el código como txt/html. Básicamente, debes mandar las páginas con diferentes media types a diferentes browsers, usando algo llamado “Content negotiation” (negociación del contenido). Por ahora, probablemente pienses que todo esto suena mucho como una gran molestia, y decides aplicar directamente el txt/html para todos. Después de todo, el Apéndice C: Guías de Compatibilidad HTML, presenta la validez de renderizar los XHTML como txt/html.

Sin embargo, debes leer esto:

Los documentos XHTML servidos como txt/html no serán procesados como XML [XML1.0], entonces, los errores de armado “bien formado” (well-formed) del XML, no serán detectados por los user agents. También enterate que las reglas del HTML serán aplicadas para el DOM y las hojas de estilo…

Lo que significa que esos browsers no renderizarán tus páginas como XHTML, sino que lo harán como HTML y fallarán al manejarlo y tratarán de adivinar cómo se supone que debe ser. Entoces, muy probablemente, te volverás loco al ver que el comportamiento del documento no es el que buscas.

También, algo más que es completamente importante saber es que ciertos scripts no funcionarán cuando mandas el documento como application/xhtml+XML. Por ejemplo, si usas el document.write o tenés en tu página publicidades provistas por un proveedor de contenidos de publicidad (como Google AdSense), esto dejará de funcionar. Si implentas una aplicaacián AJAX usando la propiedad innerHTML en un elemento, tampoco funcionará.

¿Cuál es la opinión de Robert Nyman (autor del artículo)?

Su opinión es que la cosa más importante es que debes elegir un doctype estricto, sea HTML o XHTML Si querés usar XHTML y servirlo como txt/html, asegurate de que no tienes código que intencionalmente pueda romperse cuando lo presentas como application/xhtml+XML. No uses scripts como los mencionados arriba en una página XHTML y andá un poco más allá para que esté bien formado. Estáte alerta que la página mandada que no está bien formada como application/xhtml+XML no se renderizará para nada, en vez de eso, sólo le mandará al usuario final un mensaje de error.

Entonces, elige lo pienses que va a adecuarse mejor a tus necesidades, y elige prudentemente. Y asegurate de que es una decisión deliberada.

Lectura relacionada (en inglés):

• The Road to XHTML 2.0: MIME Types (a.k.a. XHTML�s Dirty Little Secret) por Mark Pilgrim
• How browsers work por Anne van Kesteren
• Activating the Right Layout Mode Using the Doctype Declaration por Henri Sivonen
• XHTML and error handling por Robert Nyman

Bookmarkealo

Navegando por unos de mis sitios favoritos, encontré este plugin excelente…su nombre: Scriptographer.Se trata de un plugin para Adobe Illustrator CS y CS2, que utiliza la potencia del javascript dentro de illustrator. Todaví­a no lo entiendo muy bien, pero las poquitas cosas que logré hasta ahora me han impresionado. Supongo que incluso uno mismo podrí­a hacer un javascript para aplicar a los vectores con este plugin. También se pueden vectorizar imágenes usando efectos muy buenos.

• Acá les dejo el link del sitio: www.scriptographer.com/
• Galerí­a

Bookmarkealo

Muchas veces, al armar un sitio, necesitamos imagenes con transparencia para para determinados diseños que así­ lo requieren. Siempre que pasa esto tenemos que pensar cuál es la alternativa más adecuada para lograr que el diseño se vea tal cual lo pensamos. Las altenativas que tenemos disponibles, al menos en principio, son:

1. Usar GIF transparente
2. Usar un JPEG con el fondo incorporado en la imagen
3. Usar un PNG

Pero cuando empezamos a trabajar nos damos cuenta que estas opciones tienen muchos contratiempos que paso a detallar:

1. GIF: la calidad de la imagen es muy reducida (como saben sólo permite hasta 256 colores), por lo que no podemos usar imagenes muy complejas en cuanto a colores. Y otro gran, e insalvable, problema es el del antialias… el GIF transparente siempre nos pide que le definamos un color de fondo para los bordes de las imagenes, ni hablar de un gradiente.
2. Usar un JPEG con el fondo incorporado en la imagen: esto en realidad es mucho más limitado, porque lo que justamente buscamos es poder variar el fondo sobre el que está la imagen.
3. El PNG, por su no pérdida de calidad, por la posibilidad de distintos niveles de opacidad, parece la mejor opción. Sin embargo, tiene algunas desventajas: pesa una tonelada y el maldito IE6 (y anteriores) no soporta las transparencias, si bien se puede hacer uso de filters agregados en la hoja de estilo que solucionan el problema, pero es poco versatil y bastante complicado hacer que funcione como uno quiera (el IE7 si va a aceptar transparencias… era hora!)

Entonces se me ocurrió algo… hacer un PNG con sus transparencias, pero en vez de montarlo directamente sobre el HTML lo meto dentro de un SWF (del mismo tamaño de la imagen) y luego a este SWF resultante, en el HTML le pongo el wmode=transparent y ahí­, además de haber logrado la imagen transparente sin perdida de calidad, le puedo reducir el peso al mismo nivel que un JPG normal!!!! Cuando hice este sitio, se me ocurrió hacer esto que acabo de explicar y me dio resultado!!El único problema que tiene este método, es que no sirve para hacer imágenes de background dado que los SWF no son soportados para cumplir esta función. Si se me ocurre como solucionar esto último, prometo postearlo.

Bookmarkealo

A la hora de crear un sitio con CSS, seguramente te has encontrado con un montón de asuntos que más de una vez te han hecho dar ganas de golpearte la cabeza contra la pared. Dave Shea, ha escrito este artículo, que es un intento de hacer el proceso de diseño más fácil y una referencia rápida para ver cuando estás en algún problema.

Si tienes algún ítem para agregar, por favor siéntete libre de hacerlo aquí.

Hay traducciones disponibles en: inglés (el artículo original), francés, alemán, holandés, italiano, húngaro, finlandés, ruso, portugués, japonés y chino simplificado. Siéntete libre de proveer más.

Cuando estés con dudas, valida.

Cuando se procede con el debug, te puedes salvar de muchos dolores de cabeza simplemente validando el código como primera medida. XHTML/CSS escrito inapropiadamente causará muchos fallos técnicos.

Construye y testea tu CSS en los browsers más avanzados disponibles antes que en los otros, no después.

Si construyes y testeas un sitio en un browser "quebrado" (no conforme a los WebStandards), tu código estará relegado al modo "quebrado" de renderización de aquel browser. Cuando viene el tiempo de testear en browsers compatibles con los estándares, te frustrarás con una renderización impropia. Por lo tanto, empieza desde la perfección y a partir de ahí empezar a corregir con hacks para los browsers más viejos y menos compatibles. Tu código será más compatible con los estándares desde el inicio, y no serán necesarios muchos hacks para que funcionen en los otros browsers. Actualmente, los browsers estándares son Mozilla, Opera y Safari.

Al utilizar floats para el layout, asegúrate de asociarlos correctamente con la propiedad clear.

Los float son engañosos y no siempre se comportan como lo esperas. Si un float se extiende más alla de los bordes de un elemento contenedor, o no se comporta como esperas, asegúrate de que lo que quieres es posible. Chequea el tutorial de Eric Meyer sobre el tema.

Para evitar la sobreexposicion de los márgenes, aplica padding o border.

Debes "luchar" con el espacio en blanco extra donde no quieres ninguno o la inexistencia de este en donde sí lo quieres. Si estás usando márgenes, la sobreposición de los márgentes probablemente sea el responsable. Andy Budd explica cómo ganar esa "lucha".

Intenta evitar la aplicación de padding/borders y un ancho fijo en un elemento.

IE5 interpreta el boxmodel mal, lo que trae muchos problemas. Hay muchas formas de resolver el problema, pero lo mejor técnica es aplicar el padding a un elemento padre en vez de aplicarlo al elemento hijo que tenga el ancho fijo.

Evita el "flash" en el contenido sin estilos que aparece al cargar una página en IE.

Si usaste @import para linkear una hoja de estilos externa, tarde o temprano verás que el IE, al cargar una página provoca un "flash" en el contenido HTML sin formato antes de que el CSS sea aplicado en la página. ¡Esto se puede evitar!

No cuentes con el min-width en IE.

IE no ofrece soporte para el min-width. El IE considera width como min-width hasta cierto punto, por ello, con un poco de filtros para el IE, puedes simular el mismo resultado.

Cuando dudes, achica los anchos.

Algunas veces, los errores de redondeo producen cosas como 50%+50% igual a 100.1%, lo cual acaba arruinando el layout en algunos browsers. Trata de usar 49% en lugar de 50% o tambien 49.9%.

¿Contenido mostrado impropiamente en IE?

Es posible que sufras el bug Peekaboo, especialmente si el error aparece en un evento mouse-over. Mira position is everything para corregirlo.

Cuidado al estilizar links si estas usando anclas (anchors).

Si usas anclas en tu código (<a name="anchor">), observarás que éstas asumen las estilizaciones de las pseudoclases :hover y :active. Para evitar esto, usa id para las anclas, o usa sintaxis más específica: :link:hover, :link:active.

Asegúrate de que los efectos que buscas realmente existen.

Existen extensiones CSS específicas para determinados browsers que no son parte de las especificaciones oficiales. Al aplicar filtros o formatear la barra de scroll, estás trabajando con código propietario que sólo va a funcionar en IE. Si el validador te dice que el código es indefinido, es muy probable que sea código propietario, por lo tanto no van a funcionar bien en el resto de los browsers.

Divide y conquista: usa comentarios para "apagar" grandes secciones del estilo.

Especialmente útil cuando trabajas con hojas de estilo largas y a las que no estás familiarizados. Por ejemplo, tienes un error y no conoces la hoja de estilo usada, si comentando la mitad del CSS en cuestión el error persiste, entonces el error se encuentra en la otra mitad. Comenta lo que queda y prueba de nuevo. Si el problema ya no se presenta, es que está en la sección comentada. Perfecciona el comentario y prueba. Continúa hasta que el problema se resuelva.

Recuerda el proceso mnemónico LoVe/HAte para los links.

Al estilizar pseudo-clases para los links, siempre hazlo en este orden: Link, Visited, Hover, Active. Cualquier otro orden no trabajará consistentemente. Si usas :focus modifica el orden a LVHFA (o Lord Vader”s Handle Formerly Anakin”, como lo sugirió Matt Haughey).

Recuerda el proceso mnemónico "TRouBLEd" para los bordes.

Border, margin y padding admiten declaración abreviada en un orden preestablecido: en el sentido horario a partir de arriba, o sea: arriba (top), derecha (right), abajo (bottom) e izquierda (left), entonces margin:0 1px 3px 5px; significa que el margen superior será de 0 (cero) 1px para el margen derecho, 3px para el de abajo y 5px para el de la izquierda.

Declara siempre las unidades para los valores diferentes de cero.

El CSS requiere que especifiques las unidades en todas las cantidades, tales como fonts, margins y tamaños (la única excepción es el line-height, que extrañamente no requiere la especificación de unidad). El comportamiento particular de un determinado browser cuando una unidad no fue especificado, no debe ser considerado. Cero es cero, sea en px, em o lo que sea. No hay necesidad de especificar unidad alguna. Ejemplo: padding:0 2px 0 1em;

Prueba con diferentes tamaño de font.

Browsers avanzados como Mozilla y Opera te permiten redimensionar el tamaño del texto independientemente del tamaño especificado. Algunos usuarios utilizarán tamaños por defecto diferentes al tuyo, por ello intenta acomodar tu layout al mayor rango posible.

Utiliza la misma grafía en tu HTML y CSS.

Algunos browsers son case-sensitive (sensibles al tamaño de la letra). Usar una clase llamada homePage esta bien, pero aplicando el estilo como homepage causará problemas en browsers que renderizan en modo estricto (como el Mozilla por ejemplo).

Prueba tus CSS embebidos en el HTML, lanza el sitio con los CSS importados.

Si trabajas con la hoja de estilos embebida en código fuente del HTML, eliminas cualquier error de cache mientras testeas. Esto es muy importante cuando trabajas en algunos browsers en Mac. Pero luego, asegúrate de mover tu CSS a un archivo externo, importado con el @import o <link> antes de publicar.

Agrega bordes evidentes para ayudar a corregir tu layout.

Una regla universal tal como div {border.1px solid #00;} puede ser una poderosa aliada para identificar un problema en el layout. Pero agregando bordes a elementos específicos puede ayudar a identificar sobreposición o espacio en blanco extra no deseado que de otra forma no podriamos identificar.

No uses comillas simples en los paths para las imágenes.

Cuando especifiques una imagen de fondo, no uses comillas simples para la imagen. No son necesarias y además IE5/Mac no las soporta.

No hagas links a hojas de estilo vacias para usarlos de "placeholders" (ej handheld o print).

IE5/Mac no soporta hojas de estilo vacias y como consecuencia, el tiempo de carga aumenta. En vez de eso, coloca por lo menos una regla (o tal vez un comentario) en la hoja de estilo para atender especificamente al IE5/Mac.

Y ahora, a partir de aquí, algunos items que no necesariamente se aplican al lado funcionalidad de las cosas, pero deben ser considerados cuando se desarrolla:

Organiza tu archivo CSS.

Asegúrate de comentar los bloques del CSS apropiadamente, agrupa los selectores parecidos entre si y establece una clara separación y nomenclación entre ellos, usa espacios en blancos para formatear tu código (recomendación: usa espacio simple para compatibilidad con diferentes plataformas).

Nomina los class/ID basados en su función en el código, no en su apariencia.

Si defines una clase por ejemplo .grandeazul, y después se te solicita cambiar el texto a pequeño y rojo, el nombre de la clase deja de tener lógica. En vez de eso, usa clases con nombre descriptivo de su función como por ejemplo .textoDestacado.

Usa los filtros CSS como último recurso.

Los hacks y los filtros del CSS pueden ayudarte a aplicar o a no aplicar selectivamente diversas directivas en varios elementos. Pero su uso indiscriminado no es aconsejable, trata de buscar una manera más estándar y para lograr tu objetivo. Si bien, estos hacks y filtros pueden llegar a ser la salvación, en lo posible trata de evitarlos. Aquí hay una larga lista de filtros.

Combina los selectores.

Mantener tu CSS liviano es importante para minimizar los tiempos de carga; siempre que sea posible, agrupa los selectores, saca partido de la herencia del CSS, y reduce las redundancia usando declaraciones abreviadas.

Considera la accesibilidad cuando usas técnicas de reemplazo de imágenes.

La clásica técnica de FIR para el reemplazo de imágenes tiene problemas para los screenreaders y para todos aquellos que tienen desactivada la carga de imágenes. Existen alternativas, usalas moderadamente.

Nota: esta traducción la hice en el castellano más neutro posible para que cualquiera pueda ponerlo en su blog

Bookmarkealo

Reflection.js 1.0 allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it”ll degrade and your visitors won”t notice a thing. Best of all, it”s under 4KB.

Y la verdad es que es muy simple de aplicar, consiste en guardar el archivo reflection.js en tu carpeta de scripts (o donde sea que uno los guarde) y después aplicar a la imagen que se quiera reflejar class="reflect" en el mismo tag de la imagen. También se le pueden especificar color de background. Acá va un ejemplo:

Y acá va el código que usé para que sea vea lo de arriba:

Bookmarkealo

El problema:

El cliente querí­a que el menú de su sitio web (por cierto un diseño minimalista bastante bueno, hecho por Gabriel) ocupe la totalidad del ancho de la página. Esto implicaba que debia ajustarse a todas las resoluciones. Y por supuesto, debí­a funcionar bien en todos los browsers. Entonces lo primero que se nos ocurre probar con las listas, el clásico ul. No funcionó. Estuvimos buscando en bocha de lugares, pero no hubo caso. Sólo encontramos soluciones parciales al problema. Cuando lográbamos hacerlo andar en firefox, no andaba en IE y viceversa. Asi que, bueno… tuvimos que pensar en otra solución…

La solución

Es realmente simple: primero hacer un div que englobe los elementos. Cada ítem que lleva el menú no lo haremos usando el tag ul, sino que deberán ser puestos en un div por cada uno. Así debería quedar el HTML:

Se ve fácil, no? Muajajajaja… no, en serio, la parte del CSS es también muy simple: al div que contiene los ítems, al que nosotros llamamos nav, debemos especificarle mediante la propiedad width que ocupe el 100%. Luego debemos definir los divs que están dentro del div nav: debemos aplicar el float:left para que los elementos se alinéen a la izquierda uno al lado del otro y acá viene lo más importante y a la vez la gran falencia de este método: a la propiedad width debemos ponerla en el porcentaje relativo a la cantidad de ítems de la lista, esto hace por ejemplo, que no se pueda usar para generar ítems dinámicamente. Para que se entienda mejor: si tenemos 5 ítems en la lista, entonces el width para cada uno será de 20%. Otra falla que tiene es que si a ese ítem le queremos añadir margin, padding o border, debemos también ajustar el width para que no se nos desacomode.
Énigüei, es algo simple y sirve si ya está definida la cantidad de ítems y sea un sitio estático. Aunque ahora que me pongo a pensar sí se puede hacerlo de manera dinámica! Y ahi una cosita más: como siempre el fáquin IE necesita un poquito de hacks!!! Acá va el código CSS:

Bueno, espero que sirva, si alguien conoce una solución mejor, por favor que me la haga saber.

Bookmarkealo

Cameron Olthuis en su blog hace un top 10 de tutoriales CSS. Coincido casi al 100%. Por supuesto, por ahi uno haría algunos cambios de orden o aparecerían otros sitios, pero quería respetar la decisión del autor y dejé la lista tal como está en el post original. Bueno, acá va la lista:

1. Hoverbox Image Gallery: Linda galería de imágenes hechas solamente con CSS.
2. CSS Bar graphic: Si para mostrar los resultados de una encuesta te enredabas con imágenes en distintas proporciones, ahora con un poco de CSS ya lo tenés resuelto muy fácil.
3. CSS Vertical Menus: Una lista con muchos menúes verticales libres para usar.
4. Listamatic: colección de menúes tanto verticales, horizontales o experimentales. Muy recomendable, me ha sacado de apuros en más de una ocasión.
5. Floatutorial: Excelente colección de modos de uso de la propiedad float
6. Rounded Corners:
7. 40 CSS Layouts: como su nombre lo indica, un compendio de 40 layouts.
8. CSS Photo gallery: otro tutorial como el que está en el primer lugar de este top 10, pero un poco más complicado
9. CSS Drop Shadows: sombras tras las imágenes muy bien logrado
10. Style Sheet Switcher: para cambiar el estilo de una página

Y bueno, no pude dejar de caer en la tentación de poner algunos a los que yo considero que deben estar en el top 10:

• BBMD Nice Forms
• Text Tricks
• CSS Image Maps
• CSS Play (acá siempre están experimentando)

Bookmarkealo

Mi admirado Vitaly Friedman, que ya dio un inmensísimo aporte a la comunidad de los webdevelopers con su manual para el derrollador web y sus bookmarks esenciales para el desarrollador web, escribió un artículo bastante interesante sobre cuáles son las reglas a tener en cuenta para desarrollar una web exitosa. Ojo, esto no significa que sea algo absoluto y único que si no lo cumplís te puede causar el mismo efecto que comer una sandía y tomar vino y esas cosas, pero es una muy buena guía para tener en cuenta. Como pequeño aporte que hago, traduzco los tí­tulos de estas reglas… a la explicación de cada uno se la van a tener que bancar en el idioma de Shakespeare, que está aquí. La lista es la siguiente (y la traducción no es del todo literal, pero ayuda):

1. Respetá a tus visitantes. No les obligues a leer determinado contenido, dejá que naveguen libremente.
2. La mala publicidad (es decir mal diseñada o fuera de lugar) es pésima. Capaz que con un banner chillón captás la atención, pero después te van a odiar por eso.
3. Informá y enseñá a tus visitantes. Compartí tus ideas, experiencias, etc. de esa manera vas a obtener a la larga que mucha gente se entere de quién sos y qué ofrecés
4. Desarrollá tu propio estilo. Desarrollá tus propias ideas. Navegá mucho, inspirate, pero no copies, porque eso es una bosta!

\r\n

5. Respetá los estándares. Pensá en la gente que visita tu sitio.
6. Sé claro (aka no compliqués las cosas al pedo). Si es ambiguo lo que decís/mostrás va a ser muy dificil que te tengan en cuenta.
7. Odiá al Internet Explorer si querés, pero no ignorés a la gente que lo usa. Sí, el Internet Explorer es un invento de satán, pero lamentablemente mucha gente lo usa (muchisima). Y lo mejor que se puede hacer es que el sitio sea accesible para todos sin importar el browser que use.
8. Preocupate por el contenido de tu sitio.
9. No te preocupes por los web-crawlers ni por la SEO. Ni tampoco te preocupes por el PageRank o cosas por estilo… si tu sitio esta bien hecho, esas cosas vienen solas.
10. Hacé contactos, publicitá tu sitio, pero no llegues a hacer spam. El spam es una mierda, que seguro se vuelve en tu contra).
11. Escribí, publicá, sentite libre de preguntar. Participá en todo lo que puedas, una cosa maravillosa que tienen los blogs es la posibilidad de hacer comentarios y opinar y preguntar y funciona!!!
12. Respondé tus e-mails immediatamente!!! (algo que debo aprender, no puedo ser tan fáquin colgado)
13. Usá las ventajas de la Semántica Web.
14. Conectáte con tus colegas, sean bloggers, galerías CSS… lo que sea.
15. Pensá en términos globales.
16. Nunca compromentas tus principios. Eso quiere decir que no dejes llevar por las pelotudeces que diga alguien (sea cliente, jefe, etc), si está equivocado, corregilo. no le digas si a todo
17. Está siempre actualizado. Siempre es bueno saber qué está pasando en la red.
18. Aprendé a manejarte en el bloque creativo. Buscá info en foros, blogs para poder llevar tus ideas a cabo.
19. Hacé más linda la Web. Con tu aporte podés hacer que la internet sea un poco más agradable.
20. Conocé el Poder de la Web. Tenés la palabra! podés ayudar a mucha gente.

Bueno, espero que sirva… sé que mi traducción no es la mejor, pero ayuda como guía, el texto original en inglés tiene su link arriba, pero lo repito por las dudas: http://www.alvit.de/blog/article/20-rules-of-…

Y repito, estas reglas no van a traer el éxito si no creés en lo que estás haciendo ni explorás tu creatividad. cada idea puede ser la idea.

Bookmarkealo