Trucos y pequeños apuntes sobre CSS

Es de bien nacidos…

A Raúl y Marcos… mil [CS4] gracias maestros…

Nuevo diseño web de Quadrícula

Siguiendo con el experimento, y viendo que nos hemos clavado en la posición 17 de google, vamos a darle un pequeño empujón. Hemos rediseñado la web, haciéndola más clara, mas “crossbrowser”, ahora se puede ver bien hasta en el IE6, y se ha unificado la imágen con la del Qlogg.

Hemos de ver ahora si el empujón es para arriba o para abajo… ¿vosotros que creéis que pasará?

Por cierto… ¿os gusta la nueva web?

Disseny web vilafranca

HTML Dog recursos HTML y CSS bien explicados

HTML DogComo casi todo lo que conocemos de internet, por casualidad he encontrado esta web, www.htmldog.com una buena página donde los tags HTML y el CSS se explican de una manera muy sencilla y comprensible, con la información muy bien estructurada, en niveles, es un muy buen recurso al que acudir en caso de dudas al diseñar nuestras páginas.

La web la ha realizado Patrick Griffiths un experto en front-end, y que ha colaborado en proyectos conocidos por todos, como www.csszengarden.com o http://alistapart.com

Fuentes en sistemas Mac y Windows para webs

fonts.gifMuchas veces cuando empezamos con el diseño de una web sobre Photoshop siempre pensamos en si podríamos utilizar aquella fuente que vimos hace unos días y nos gustó tanto, pero luego recuerdas que a la hora de la verdad son las fuentes de los sistemas operativos, Windows, Mac, Linux y otros, las que te marcan la pauta a seguir. Al principio uno se pregunta que fuentes se podrán utilizar y las no, esto como muchas otras cosas dependientes de un S.O. o un navegador (IE, Firefox, Opera…), lo que habrán hecho las empresas detrás de estas aplicaciones.Una vez investigado el tema di con las fuentes mas comunes que se usan en toda la web y a su vez las que están en la mayor partes de estos sistemas y aplicaciones. Aquí os dejo una tabla comparativa entre Windows y Mac OS y sus diferentes variantes y los nombres de las fuentes.

fuentestipo5.png

Aunque no están todas las fuentes posibles que se pueden utilizar en estos dos sistemas, si las más típicas y usadas en la mayoría de páginas web. Y antes de que me acribillen los pro-pinguinos, Linux lleva también consigo variantes de algunas de las fuentes genéricas, eso si la mayoría con nombres muy distintos. Esto os lo dejo como una pequeña ayuda para simplificar mas el uso de las fuentes en nuestros CSS 😉Apuntes de interés :– Destacar cierta fuente como es Verdana, que MS sacó expresamente con IE4 si mal no recuerdo para el uso en las páginas web.- Nos podemos encontrar con Lucida Sans Unicode que también tiene variantes en ambos sistemas, pero que en el navegador del “zorrito” dependiendo del orden escrito en el atributo css de font-family puede causar una muy mala renderización de la fuente y la complicada lectura.- La Tahoma se ha familiarizado mucho más últimamente, simplemente tiene un fallo muy pequeño, esta descompensada en 1 pixel de altura de linea en comparación de su hermana de mas espaciosa, Verdana, esto puede acarrear algún que otro quebradero de cabeza con el intento de alineación vertical en botones por ejemplo.Salu2, L.N.D.

Estandares web, voto por su uso estricto…

Hoy me ha venido a la memoria una web que realicé hacia el año 2001, justo cuando empezaba en el mundo del diseño web. No sabia mucho, bueno, más bien nada, autodidacta con mas morro que conocimientos, y con ganas de quedar bien con todos los clientes. Me pasaron el cliente y me pidió una web con galerías de fotos, es una tienda de fotografía, de unas 7 secciones aproximadamente. Una de las premisas que me pidió era que se viera bien en explorer y netscape, a 800×600 y a 1024×768. Que hice yo… os lo podéis imaginar, después de darme de hostias con los navegadores… me dí por vencido e hice 4 webs distintas… eso sí, cuadraban todas…iehacks1.jpg

Hoy estábamos peleándonos también con no se que problema que en explorer se veía bien y en firefox fallaba, y es una constante que tengamos problemas con los navegadores, y que tengamos que llenar las hojas de estilos de “IEhacks“. (inciso: buscando las palabras ie hacks en google he encontrado a este que está como yo, hasta las pelotas).

Todos sabemos a que se dedica la w3c, y cito textualmente de su página:

El W3C desarrolla Estándares Web y Pautas.

El w3c trata de alcanzar su objetivo principalmente a través de la creación de Estándares Web y Pautas. Desde 1994, el w3c ha publicado más de noventa estándares, denominados Recomendaciones del W3C. El w3c también está involucrado en tareas de educación y difusión, y en el desarrollo de software, sirviendo a su vez como foro abierto de discusión sobre la Web. Para que la Web alcance su máximo potencial, las tecnologías Web más importantes deben ser compatibles entre sí y permitir que cualquier hardware y software, utilizado para acceder a la Web, funcione conjuntamente. El W3C hace referencia a este objetivo como “interoperabilidad Web”. Al publicar estándares abiertos (no propietarios) para lenguajes Web y protocolos, el w3c trata de evitar la fragmentación del mercado y, por lo tanto, la fragmentación de la Web.

El valor social que aporta la Web, es que ésta hace posible la comunicación humana, el comercio y las oportunidades para compartir conocimiento. Uno de los objetivos principales del w3c es hacer que estos beneficios estén disponibles para todo el mundo, independientemente del hardware, software, infraestructura de red, idioma, cultura, localización geográfica, o habilidad física o mental.

Pues bien, después de tanto tiempo no han conseguido que la industria se ciña a sus estándares …

Evidentemente, el primer culpable que me viene a la cabeza es “Microsoft“, los malos de la película siempre… los buenos “Firefox“, y los extraños “Opera“, “Safari” etc… Pero luego reflexionando, y pensando un poco, resulta que no es así, que la culpa la tenemos los programadores y los diseñadores. Me explico.

Los de la w3c se esfuerzan y gastan una pasta en crear unos estándares, líos de grupos de trabajo y movidas aparte, las empresas que fabrican navegadores va a su bola, y se sacan tags de la manga, pseudo-clases y se dejan tags por implementar, y que hacemos nosotros… empecinarnos en usar las instrucciones que añaden estas empresas unilateralmente, en vez de obviarlas y trabajar siguiendo los estándares estrictos, para conseguir que al final, no gasten cantidades de pasta ingentes en desarrollar instrucciones que saben nadie usará, a no ser que las aprueben en la w3c. Es por esto que la culpa es nuestra, las empresas están en su derecho de cambiar instrucciones o abandonar alguna, si no, no mejoraríamos, pero nosotros también estamos en nuestro derecho de no usar las que nos añaden, si no están aceptadas por todos.

W3c Strictly StandardEs por esto, que voto por el uso estricto de los estándares de la w3c, y por no tener que andar revisando todos los trabajos en los diferentes navegadores, perdiendo tiempo y dinero. Unámonos todos y lo conseguiremos, seamos, W3C Strictly Standard.

Pásalo… Úsalo…

Diseño web fácil usando YAML Builder

YAML BuilderLa intención de Qlogg es la de aportar contenidos propios a Internet, pero hoy voy a hacer una excepción, ya que me parece que vale mucho la pena el dar a conocer herramientas como el YAML. Es de esas cosas que las encuentras y pueden hacerte la vida mucho más fácil, siempre y cuando seas programador, y que permite introducirte en el apasionante mundo del (X)HTML/CSS. El autor es Dirk Jesse y el tipo se ha currado un framework inspirado en Yahoo’s YUI framework Grids Builder.

Bulletproof & Flexible Layouts Made Simple

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

A todos aquellos que se os resisten los “divs”, grupo al cual me incluyo, esta herramienta os ayudará a entender un poco más como funcionan, y si no, por lo menos os dejará vuestras webs más arregladitas…

Saludos

Optimizando CSS: Línea por línea

stylesheet1.pngDesde que comencé con mis primeras webs siempre he querido que código e imágenes fuesen óptimas para que la carga fuera lo mas rápida y ligera posible. La velocidad es muy importante en cuanto al usuario que nos visita, realmente una visita puede reducir su tiempo en la web por causa de una carga lenta, ya sea por parte del servidor o bien del peso completo de la web.En la parte del web, la optimización de imágenes y código es esencial, llevo ya varios meses “picando” los estilos de nuestras webs de forma lineal, aquí pongo un ejemplo comparativo:Antes:

#web{width:960px;margin:0 auto}#contenido{width:745px;float:right;display:block}#menu{width:200px;float:left}#foot{clear:both;height:40px}

Ahora:

#web         { width:960px; margin:0 auto }#contenido   { width:745px; float:right; display:block }#menu        { width:200px; float:left }#foot        { clear:both; height:40px }

Que conseguimos con esto? Bien fácil, la optimización del archivo CSS en cuanto ejecución y lectura. Sí, he dicho lectura, creedme si os digo que una vez te acostumbras no vuelves al anterior método. De esta forma el archivo carga más rápido ya que su peso es menor y la ejecución más rápida ya que el navegador no tiene que recorrer 20.000 saltos de línia y 8.000 tabulaciones.Bueno algun@s dirán -“es mejor separar estructura de diseño en el CSS y en archivos separados uniéndolos todos en una base usando el import“- puede ser para los programadores, sí, pero no para el navegador que carga los archivos linea por linea.Probadlo y luego me contáis 😉

Liberate de los floats!

En muchas cheap NFL jerseys ocasiones, Custom los maquetadores nos encontramos con los wholesale NBA jerseys queridos y odiados fallos de un a float. Para poder limpiar o hacer que el contenedor con float ocupe lo que tiene cheap NBA jerseys que (And ocupar hay una propiedad en CSS que nos facilita esa tarea.

Si al final del contenedor (DIV) que tiene el float CS2 le introducimos una etiqueta, por ej. un <br /> con una clase talleres CSS que contenga:

clear: both;

Esto hará que el contenedor Open tenga imagenes o lo que sea llegue hasta el final y no flote por encima del Sabres contenido posterior.