Pemex tiene sitio nuevo y está hecho con CSS, recién me enteré por un comentario que dejó Sergio Valladares en una entrada antigua en este blog.
De entrada el sitio se ve bien, al parecer siguen un manual de identidad por la imagen de presidencia que está presente en el sitio. En general el sitio está bien hecho, tiene muchos contenidos, documentos y fotografías que lo enriquecen mucho.
Solamente unas pequeñas recomendaciones:
- Los textos de lectura son pequeños, incluyendo el menú superior
- Los textos justificados siempre han dado problemas, para el texto en web no existe la separación silábica de modo que se generan ríos en las mánchas de texto. Ya hemos escrito de eso antes.
- No valida como documento XHTML Transitional
Nadie dijo que fuera fácil, pero que el sitio esté hecho bajo estándares ya es ganancia, así que felicitaciones al equipo de diseño y desarrollo de Pemex por montarse en el barco de los estándares.
Ayer le mandé un email a Sergio felicitándolo y me escribió de vuelta dándome algunos otros detalles del desarrollo, incluyendo el por qué de los textos justificados (que no depende de él si no de otras personas que así lo prefieren), en fin, échenle un vistazo al sitio, de los pocos sitios del gobierno federal hecho casi-completamente en CSS.
Actualización: Sergio nos habló un poco de como fue el proceso del resideño del sitio, interesante lectura, si quieren saber que dijo pasen a leer los comentarios.
26 de Julio de 2007 |
3:29 pm |
CSS, Web
1. Etiqueta las áreas generales. Esto hará que encuentres mucho más fácilmente el bloque que quieres modificar. Tienes que "comentar" el nombre del bloque, esto se logra poniendo el título dentro de /* el título */
/* -- Header -------------------------- */
#header { }
/* -- Contenido ----------------------- */
#contenido { }
/* -- Footer -------------------------- */
#footer { }
2. Manten tus bloques agrupados, por ejemplo todos los elementos que vayas a controlar con CSS deben quedar en el mismo bloque y después del elemento padre.
#contenido { }
.contenido h1 { }
.contenido p { }
3. Usa el shorthand, o lo que es lo mismo la versión abreviada del CSS. Hay diferentes sitios donde puedes ver como es el shorthand, aquí pongo una liga a una de las guías de shorthand.
Sin shorthand
#midiv {
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 15px;
}
Con shorthand
#midiv {
font: normal 12px/15px Verdana, Arial, Helvetica, Sans-serif;
}
4. Genera los nombres de las clases y/o divs de forma inteligente, por ejemplo en vez de nombrar una clase .textorojo, nómbrala .alerta, así cuando quieras cambiar el color de la alerta su nombre seguirá siendo util y no tendrás que modificar tus archivos HTML.
Otro caso es si tienes un layout de dos columnas nombra a estas por la función que desempeñan, por ejemplo: #subnav, #contenido en vez de nombrarlas #col1, #col2 porque si las cambias de lugar las confusiones comienzan.
5. No uses altas y bajas en los nombres de las clases o los divs, esto puede hacerte perder mucho tiempo si tienes un archivo de CSS de varios cientos de líneas de código.
Recién terminamos este sitio para Sonograph, lider regional de impresión de etiquetas en rollo. Buscando acceder al mercado de EU se hizo una versión en inglés. El sitio es 100% informativo, está hecho con XHTML + CSS.
Para los títulos (que usan una tipografía custom) usé sIFR, la tipografía se llama Alwyn.
En otras cosas pero relacionadas a esto, quiero decir que el servicio de hospedaje de prodigy es pésimo, el control panel es horrible, nada intuitivo y cada link es abierto en una ventana nueva con _blank. Este es el segundo cliente que tengo que tiene contratado su hospedaje con prodigy hosting, la verdad ni el peor servicio que haya contratado en EU (que han sido varios) se compara con este, además del control panel que está hecho con las patas los pies, tuve otros problemas con las formas de contacto, el servicio no acepta por default un index.php hay que pedir a soporte que haga ajustes para que corra. En general muy mal, perdí casi una semana con los de soporte técnico para arreglar cosas que deberían estar corriendo por default.
Bueno, habiéndome desahogado... si le ven algún bug al sitio les agradezco me lo hagan saber. Ir a Sonograph.
5 de Julio de 2007 |
10:40 am |
CSS, Web
Esta vez el sitio no lo hice yo, si no Victor de Desarrollos Digitales. Pero igual me da gusto que se reconozca el trabajo de otros mexicano y claro, también porque este trabajo lo veo como hecho en equipo. Mi participación fue con el diseño, hice la página de inicio y se la entregué en un archivo .PSD. Aquí el sitio de Suspiros Pastelería.
El sitio fue agregado a CSSmanía y hasta el momento con una calificación de 9, CSSmanía es el directorio de sitios hechos bajo estándares web más importante hoy en día. Bien por Victor que es de los pocos —Asesores de Sistemas— (una vez se encabronó por que lo presenté a otro amigo como "El programador") realmente preocupado por los estándares y el buen diseño.
Aquí pueden ver una captura de lo que hice.
Estoy contento porque el sitio de El Pescadito ha sido publicado en varios directorios de sitios hechos con CSS + XHTML, y gracias a eso (me imagino yo) TutorialBlog publicó recientemente 30 sitios en azul e incluyeron el sitio de El Pescadito.
After a few days off, we’re back with 30 great xhtml and css websites that use Blue to great effect.
Hay otras entradas interesantes como estas:
12 de Abril de 2007 |
3:13 am |
CSS, Web
Este es otro directorio de layouts hechos con CSS, según dice en el sitio son "Grado A" osea que se ven bien en todos los navegadores además de que están optimizados para ayudarte con el posicionamiento en los buscadores.
El código de los layouts es muy limpio, un buen recurso sin duda. Puedes descargarlos aquí.
Si eres un fanático de los estándares o simplemente te gusta el diseño web, te recomiendo este link donde se recopilan los sitios que promueven el uso de los estándares y el CSS. La lista es muy completa, creo que están si no todos por lo menos los más populares. Día Chronie.
15 de Agosto de 2006 |
12:24 pm |
CSS, Web
Por fin entregamos el sitio del Instituto Sonorense de Cultura, fueron muchas noches de leer el manual del CMS, y de aprender CSS por supuesto jeje, a prueba y error.
Bueno, lo más importante de este rediseño es que es casi tableless, (el CMS renderea cosas que no pude corregir), es cierto, cuesta más trabajo pero los resultados no pueden dejar de tomarse en cuenta. Código limpio y más fácil de mantener, separación de contenidos y presentación :), además el sistema de tags que usa el Article Manager herramienta responsable del funcionamiento del sitio hicieron que este rediseño fuera mmm... entretenido por decirlo de una manera, ya sabes, cuando descubres algo que siempre andabas buscando. Hay cosas del Article Manager que me gustan como su sistema de tags, similar al de Movable Type, pero tiene otras cosas que no me gustan para nada, por ejem. cuando ingresas una nota hay un editor WYSIWYG, que genera tags tan despreciables como los -font- jeje, todo lo que le hagas al texto a través del editor ese lo genera en HTML tags, osea colores, tamaños, etc. por fuera de eso todo es blancura ;).
El sitio usa 3 templates diferentes básicamente, el que usa el index general, el que usan los index de cada categoría y el que usan los artículos individuales. Antes cada template pesaba 45 kb, hoy pesan ¡5kb! y tienen más elementos en su funcionalidad que antes.
Hablando del diseño le dimos una revisada a las fuentes utilizadas y le dimos prioridades a los diferentes elementos de información, ya dentro de una nota la estructura en la información es más marcada, en el index y las categorías necesitamos desplegar más info en menos espacio, es por eso que los titulos no son tan grandes. Por el contrario en las notas individuales podemos jugar más con los elementos, meterles más diseño, lo que hice aquí fue poner el título grande, para que en cuanto entres sepas de que se está hablando, después sigue el sumario que es una pequeña introducción a la nota que da información al lector y que le sirve también para ver de que se trata, y ya si está interesado seguirá leyendo en el texto de lectura que es a donde va a caer después de los dos primeros elementos. Aquí puedes ver de que hablo.
En general el sitio ahora es más liviano, más usable además de cambiarle la cara al ISC que buena falta le hacía ya a dos años del primer diseño.
Al parecer es muy fácil de implementar y tienes el control del radio de la curvatura, interesante.
Spiffy Corners
26 de Marzo de 2006 |
6:47 am |
CSS
Este es un dolorcito de cabeza con el que todos nos hemos encontrado :p
Aquí puedes verlo funcionando.
Aquí el truco:
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;}
El reto era obtener el mayor número de layouts basados en el mismo markup, cada uno con CSS y HTML válido, sin hacks y compatibles entre browsers. El resultado es un set de 40 layouts funcionales y listos para descargarse. Por: Alessandro Fulciniti
Muy buen recurso, la verdad es que muchas veces me he quebrado la cabeza tranto de hacer esto o lo otro, pero aquí vemos ejemplos funcionando y utilizando recursos al mínimo.
CSSmanía, directorio de sitios web diseñados en CSS, nos ha listado :). Yo envié uno de mis sitios, pero alguien (no se quien pero ¡gracias!) envío otro de nuestros sitios y también fue listado.
CSSmanía es uno de los directorios de sitios en CSS con más actividad en la actualidad, un sitio que debe estar en tus bookmarks definitivamente. Ha tenido gran éxito ya que dos grandes en esta área andan un poco flojos últimamente. stylegala.com y cssvault.com
