CSSeros

Actualmente este sitio está en desarrollo. Si quieres conocer un poco más acerca del proyecto, puedes leerlo en la página de presentación.

Disculpanos si llegaste buscando algo y no lo has encontrado, eso se debe a, como te escribimos arriba, estamos en proceso de desarrollo, recopilando contenidos, probando la propuestas de diseño y enfocando mejor el rumbo del proyecto. El sitio no está muerto, regresa en unos días.

Si quieres ser parte de este proyecto, deja tu comentario con tus datos y lo que puedes ofrecernos.

Dentro de la amplia gama de opciones que hay en cuestión de editores web gratuitos, no he encontrado alguno que me convenza al 100%.

En Maestros del Web escribieron un buen artículo, recomendando algunos editores muy detalladamente, el detalle (valga la repetición) en varios de ellos está en que son de pago, aunque yo creo que si en realidad se acomoda a tus necesidades, el dinero es lo que menos importa.

En mi caso, busco editores multilenguajes (principalmente html, xml, php y css), con colores amenos -que vengan configurados por default, no me gusta estar configurando colores y es el principal motivo por el que no uso editores como Notepad++. Además de eso, busco que sean fáciles de usar, que las opciones estén a simple vista, sin tantas complicaciones. Algo muy importante para mí también es el auto-completado de código.

Esas características solo las he encontrado en 2 editores (para windows), con los que me he acomodado muy bien. El primero de ellos es TSW Webcoder, que llevo usándolo ya casi 4 años (antes era gratuito, desde el 2005 tiene costo). Soporta PHP, XML, HTML, CSS, contiene la librería de funciones de php y mysql, un gestor de proyectos muy completo, gestor FTP muy sencillo… es el que más me a gustado.

El otro editor que uso comunmente es TopStyle, que he usado ya por 3 años, aunque el problema con este último es que soporta solo html, css y coloreado básico para lenguajes de programación del lado del servidor, la ventaja está en su interfaz limpia y revisión de propiedades css instantánea.

Ambos tienen editor visual (si es que lo necesitas), validación de código XHTML y CSS vía W3C. La desventaja de ambos es que son de pago.

¿Tú qué editor usas?

Apple y Microsoft tienen algunos buenos documentos para desarrolladores web:

• Best practices para desarrollo web (Apple)
• The XMLHttpRequest Object (Apple)
• Atributos de CSS (Microsoft)

En general, las dos bases de datos de estas compañías son interesantes y tienen buenos artículos, aunque cada una está enfocada a su plataforma (MacOS y Windows).

Creo que el primer consejo que alguien me dio para escribir hojas de estilo en cascada fue: no uses hacks, solo usa el selector child. Así que mi postura frente a los hacks CSS es totalmente en contra.

Los hacks en CSS pueden usarse para:

• Eliminar bugs de Internet Explorer 6 (o anteriores)
• Disminuir diferencias entre navegadores
• Conseguir efectos vistosos (y que se vean en todos los navegadores)

El uso de hacks en CSS implica que las líneas de código aumenten considerablemente, conflictos con otros elementos y sobre todo la dificultad de modificar las hojas de estilo.

Para el primer punto, en mi experiencia, no he tenido la necesidad de usar más que algunos ‘arreglos’ (fixes o como quieran llamarles) que se encargan de solucionar pequeños problemas con IE6, por ejemplo el clásico problema de los elementos flotados que se soluciona con la propiedad display:inline.

Para el segundo punto solo puedo darles el mejor tip de CSS que encontré en esta página web.

Y para el tercer punto, no veo la necesidad de usar efectos como dropdowns o efectos parecidos, aunque en otras ocasiones uno se ve obligado a usar hacks por los malos diseñadores y creen que están en 1999 (frase trillada, pero es la realidad).

Así, yo prefiero escribir mis hojas de estilo de forma muy plana, evitando perder tiempo en la búsqueda de la perfección en cada navegador y obviando detalles que sé que al tratar de solucionarlos me traerán más problemas con otros elementos. Estos detalles los dejo para cuando he terminado.

¿Ustedes usan hacks en sus hojas de estilo o prefieren escribir código plano?

Nuevos retos: móviles. No hay mucho que decir… lo de siempre…

Diseño básico… XHTML estructurado… fuera JS, fuera Flash. Media=”handheld” basta.

Lo único malo es que no hay documentación suficiente para poder aprender, así que todo será a prueba y error.

Para empezar, estaba medio desorientado, pero ya agarré la onda… el proyecto es desarrollar una página para móviles (PDA’s, Palms, handhelds en general, hasta los famosísimos UMPC’s, también celulares que de la primera generación que entraban a internet), así que, lo que haré será:
- Desarrollar un solo código HTML para handhelds y dispositivos de pantalla normal.
- Desarrollar 2 hojas de estilo: 1 para pantallas normales y otra para handhelds (ahí entra <link rel=”stylesheet” type=”text/css” media=”handheld” />).
- Desarrollar otra página para móviles de la primera generación con internet, esto sería con WML.

De esta forma creo que abarcaría la mayoría de los navegadores para móviles… ¿alguien tiene experiencia en esto que quiera compartir?

font-variant: small-caps
Resultado: Texto con Small Caps

font-weight: lighter
Me encanta esta propiedad sobre todo para títulos (h1, h2, h3…) con “Trebuchet MS”.
Resultado: los títulos de los posts en este blog.

text-transform: capitalize | lowercase | uppercase | none
Transforma un texto en párrafo de letra capital, párrafo en minúsculas o mayúsculas (respectivamente). Muy útil para cuando tienes que cumplir con el estándar de la RAE.
Resultado: ejemplo de texto en minúsculas —– ejemplo de texto en minúsculas (con text-transform: uppercase)

border-bottom: dotted
Pone un borde inferior punteado al elemento. Lástima que NO funcione en Internet Explorer.
Resultado: texto con borde punteado.

Antes que nada, y para no echarme a la mitad de flatcheros que me leen (que son 2):
- El objetivo de este post no es desacreditar la aplicación, por dios!!, eso sería pecado.
- Todo lo contrario: que sirva de guía para tomar la desición de NO usar flash para generar sitios web enteros. Es decir, el post pretende dar a entender que flash no es la mejor solución en la mayoría de los casos para hacer un sitio web entero.

En cuanto a la accesibilidad
- Necesita un plugin para el navegador, que es muy fácil de instalar, cierto, pero eso le toma al usuario algunos minutos, entre pasar a la página del plugin, aceptar el contrato, descargar.
- No ofrece las ventajas de CSS/HTML en cuanto a la accesibilidad de personas con dificultades físicas (dificultad para ver bien, específicamente).
- Mucho menos puede ser accesible desde cualquier dispositivo, como lo puede ser html.

En cuanto a la optimización para buscadores
- Los buscadores no indexan completamente un sitio en flash. Veamos un ejemplo: sabritas en google: 9 páginas indexadas, todas con poco contenido y títulos poco amigables.
- No se indexan los contenidos de flash, ni el texto, ni las imagenes, sonidos u objetos multimedia que puedan existir en la web.

Para el desarrollador
- Necesita muchos recursos (aunque en la actualidad esto no puede representar un problema).
- ActionScript Es complicado.

Otras cosas
- No funciona el botón ‘Regresar’ del navegador.
- No funciona la opción ‘buscar’ del navegador.
- Compraron a Jakob Nielsen

Conclusión
En sí Flash no es malo, sino es mal aplicado. Lo que yo pienso puede ser una buena implementación de flash son banners o anuncios, en los videos que tan bonito se ven (como lo hace Google, YouTube o Fael), intranets o aplicaciones web donde tienes el control sobre el usuario y no tienes la necesidad de ser indexacdo por los buscadores.

Nota: estoy basándome en lo que me han contado, en lo que he buscado por ahí en google, en lo que escribió Nielsen antes de ser comprado por macromedia, antes de que Acrobat comprara macromedia y antes de que saliera Macromedia Flash 8, en el que tengo entendido se solucionaron muchos problemas, como los de accesibilidad, así que no duden en comentarlo.

Existen dos formas de hacer un efecto roll over de imágenes con CSS (como el que está en el header de esta página).

LA PRIMERA FORMA es hacerlo como yo lo hice (de mala forma, según mi percepción). La ventaja es que se trata de algo lógico y simple, pero que quita estética:

a {
display: block;
width: ##px;
height: ##px;
background-image: url(”imagen.jpg”);
}

a:hover {
background-image: url(”imagen2.jpg”);
}

La desventaja es que la imagen se carga a la hora de pasar el puntero por encima del elemento (a), por lo que tardará un tanto en descargarlo (sin recargar la página).

LA SEGUNDA FORMA es hacer una sola imagen y mediante la propiedad background-position, cambiar la posición de la imagen para que se vea la otra parte, de esta forma la imagen se cargaría al cargar la página y no sería necesario cargarla al pasar el ratón por encima del elemento… bueno, mejor lo explico con código:

a {
display: block;
width: ##px;
height: ##px;
background-image: url(”imagen.jpg”);
}

a:hover {
background-image: url(”imagen.jpg”);
background-position: left -25px; /* tomando en cuenta que la imagen mide 25 pixeles, la duplicaríamos a 50 pixeles, en los 25 pixeles restantes copiariamos el estado hover */
}

La imagen en cuestión sería esta:

Y el ejemplo de rollover con CSS