Categoría: CSS

  • Se busca código | Google Code Search

    Si eres programador y buscas nunca mejor dicho fuentes, entra en el Google Code Search.

     Acerca de Google Code Search

    Google Code Search pone a tu disposición una ubicación donde buscar código fuente de acceso público alojado en Internet a fin de ayudarte a encontrar definiciones de funciones y código muestra. Esta aplicación permite:

    • utilizar expresiones regulares para realizar búsquedas más precisas,
    • restringir la búsqueda por lenguaje, licencia o nombre de archivo,
    • ver el archivo fuente con ví­nculos que enlazan con todo el paquete y con la página web de donde proviene.

    Preguntas frecuentes sobre Google Code Search

  • ¿El tamaño importa?

    El tamaño ha importado por ahora a más de 50 usuarios que al final han dejado sus ojos en este interesante artí­culo y sus cincuenta y tanto comentarios.

    La utopí­a de una red 100% accesible cuando sus clientes sólo ven $$$ sólo tendrá mi fe cuando la tecnologí­a y no los diseñadores se esfuercen más. Son los navegadores los que deberí­an personalizar la experiencia del usuario, este hace su configuración y decide cómo navegar, esa es la experiencia que busca.

    Si sirve de algo, depende del uso gráfico que el cliente quiera se podrá trabajar en em o en %. De todas formas coincido en que los usuarios podrán luego aumentar (Ctrl+) o disminuir(Ctrl-) a gusto y necesidad. Y en mi caso sí­ utilizo Cleartype. (que conste por si hay encuesta)

    Estándar 100% fácil de leer

    AccesibilidadTengo ordenadores desde los tiempos de Maricastaña. Paso al dí­a, unas 10 o 15 horas «“el que más»“ mirando la pantalla de mi Mac. Leer es una de las primeras actividades que realizo en el ordenador. Realmente, desde hace 2 años, con algunas dificultades.

    Un dí­a salí­a del trabajo, bastante cansado por cierto y, mientras caminaba a casa, me daba cuenta que no podí­a leer ningún cartel de forma clara como pensaba. No me lo podí­a creer. Nunca tuve problemas de visión, ni nada parecido. Al principio no le habí­a prestado atención al tema, pero al cabo de dos semanas, me ocurrí­a lo mismo. Pensaba que era el cansancio, pero no, era la vista. Fui al oculista, me hicieron unos chequeos y en efecto, tení­a problemas de visión. La oculista me dijo que no eran graves. No uso aumento sino, unas lentes correctoras con un leve aumento. Me dijo que, por como estaba el tema, o leí­a docenas libros al dí­a o me pasaba mucho tiempo frente al ordenador. En efecto, era lo segundo. Me dijo que un montón de gente se jode la vista leyendo en el ordenador, sobre todo por los factores lumí­nicos de los monitores, la cantidad de horas frente a la pantalla y la aproximación que tienen con ésta.

    Al darme los anteojos, me dijo que tratara de subir el tamaño del texto a leer siempre que pudiera, así­ forzaba la vista lo menos posible. A partir de ese momento, comencé a subir progresivamente el tamaño de letra de mi sitio, y el de otros mediante el navegador. No muy tarde, comencé a ver las ventajas de leer con letra, un poquito más grande de lo habitual (11px a 12px). Pocos sitios pasan de esta medida y, realmente se agradece cuando usan tipografí­as grandes.

    ¿Y por qué estoy escribiendo esto? Porque hoy estuve leyendo una conversación entre blogs sobre el tema: el uso de tipografí­as grandes en los sitios web, particularmente, los blogs.

    Hoy mi sitio «“y no porque se inició esta charla»“ cuenta con un tamaño de tipografí­a bastante grande para lo habitual. Yo no me muevo en valores con pí­xeles, utilizo em para casi todo lo relacionado con tipografí­as. Hay dos tipos de unidades de medida: relativas y absolutas. Las unidades de medidas relativas especifican una medida en relación a otra propiedad de medida. La medida em es relativa, lo cual dependerá de otro valor base, ya sea propia del navegador, o bien, especificada por el usuario o el autor sobre el elemento base <body>. El cuerpo de letra en este weblog, si no me equivoco es de .9em, que equivaldrí­a a unos 15px para el resto de mortales que leen el blog si utilizan Firefox o Internet Explorer en Windows «“con la configuración base»“ y dependiendo de la configuración que dispongan. Lo común, para algunos diarios, revistas y blogs es, usar este tamaño de letra para los tí­tulos y no para los textos. Los textos, en letra pequeña. Nunca acepté que las letras pequeñas son mejores que las grandes. Quizás, tanto otros como yo, ponemos más sobre la balanza lo estético que lo útil. Es una debilidad que traemos los de carne y hueso. Pero eso se acabó hace un tiempo, y amigos, lamento decirles que no es moda. Esto viene de hace mucho. La letra grande vino y se quedó para eso: para facilitar la docena de horas frente a la pantalla del maldito ordenador.

    Están los que se enojan con esto. Están los que adoran. El primer dí­a que subí­ la letra del sitio más de 11 pí­xeles, la gente se quejó. Digo la gente por no decir cinco personas de las mil que leí­an a diario. A los 8 meses cambié de nuevo los tamaños. Fue a raí­z de aumentar mi sitio con los controles del navegador. Simplemente me dio mucho gusto verlo así­, con esos tamaños y que, cada vez me costaba menos leer comentarios de la gente. Recibo al dí­a más de 100 comentarios y se agradece tener este tamaño para poder leer la opinión de la gente.

    Jonathan escribió un artí­culo sobre la lectura fácil que tiene muchos puntos interesantes. Bien como lo explica, letras grandes; lectura sin esfuerzos. Pero el problema que yo veo en estas cosas es, que no siempre es aplicable esto en un diseño, menos en uno corporativo. No porque quede feo «“esto es trabajo del que lo diseñe»“ sino porque utilizar tipos grandes complica muchas cosas, entre ellas, los espacios disponibles y la posibilidad de determinados contenidos estar a la vista. Si siguiéramos el texto de Jonathan al pie de la letra, muchos sitios tendrí­an kilométricas páginas de contenidos. Algunas fotos darí­an la sensación de ser í­conos más que fotografí­as. El balance se corromperí­a en muchos casos. Es por eso, y en mi opinión, meter tamaños grandes de forma desproporcionada no ayuda; tipografí­as grandes pero no en exageración. Zeldman condujo estudios hace años sobre esto, y dieron como resultados en la mayorí­a de los casos, tipografí­a de 13px era legible por más del 80% de los participantes sin dificultad. Cuando se reducí­a a la estética 11px, dependiendo la tipografí­a «“si era serif o sans»“ se reducí­a al 60%.

    En mis pruebas, los resultados no variaron mucho. Ahora estoy implementando tamaños superiores a los 13px con muy buenos resultados. El contraste se aprecia con más relevancia, las formas de las tipografí­as destacan más y el rango de accesibilidad que estoy dando es muy superior por sobre la media.

    Federico hace hincapié en el tema pero creo, en mi opinión, que se lee olvidó algo: usar tipografí­as grandes no es problema. El problema está en cómo los diseñadores utilizan estas tipografí­as. En los casos que vemos tipografí­as grandes y nos duele la vista, es porque no le han encontrado el balance que armoniza todo. Muchos saben de lo que hablo: los tamaños de los tí­tulos, los espacios en blanco, los interlineados, etc.

    Hoy en dí­a, muchos medios on-line están adaptando estas medidas. Algunos van en el rango de los 11px/13px y otros, como por ejemplo, 20 Minutos, se encuentra en rangos mayores. El punto es: yo leo mejor gracias a estos detalles. No solo por el tamaño de las tipografí­as, sino por la excelente proporción que los diseñadores han utilizado.

    Letras grandes, usuarios contentos y sanos, menos ciegos y más lectores.

    Minid.net » Blog Archive » Estándar 100% fácil de leer

  • Hackeando Navegadores | Browsers Hacks

    En el link inferior hay una tabla muy completa y actualizada de los odiosos hacks que hay que utilizar para apmliar la compatibilidad de nuestros diseños.

    centricle : css filters (css hacks)

  • IE 8.0 | Firefox 3.0

    Los diseñadores hemos ido odiando a IE a medida que í­bamos trabajando. La cuota de usuarios ha ido decreciendo en favor de Firefox, con sus pestañas, sus plugins y gracias a Dios una lógica y coherente gestión de CSS.

    Parece que por fin se han puesto las pilas y no sólo han mejorado con la versión 7 sino que según parece ya están preparado IE 8.0

    You may get to have a look at the future of the Internet Explorer browser sooner than you might think. Although Microsoft is currently lagging behind Mozilla that has introduced Firefox 3.0 Gran Paradiso

    since early December 2006, third party sources confirm that the next version of Internet Explorer is already cooking in the Redmond labs.

    Internet Explorer 8.0 will be introduced at MIX 07, at the Venitian Hotel in Las Vegas between April 30 and May 2. One of the sessions at MIX 07 is addressed to designers and developers and is entitled: «First Look at the Future of IE.»

    And if there is any doubt that the future of Internet Explorer is synonymous with IE 8.0, then here is the description of the session: «Hear what Microsoft’s browser investments mean to you, and make sure you get a voice in shaping the next version of Internet Explorer. Hear about what features and layout issues are being worked on, and let us know what causes you the most problems.»

    At the 2007 International Consumer Electronics Show in Las Vegas, Microsoft has confirmed that the development of Internet Explorer 8.0 has already debuted. Coincidentally, at MIX 06, Microsoft Chairman Bill Gates promised that releases of Internet Explorer will be separated by 9 to 12 months maximum. In this context, Internet Explorer 8.0 should be launched towards the final quarter of 2008.

    However, the Microsoft representative at CES 2007 pointed out to a period of 18 to 24 months until Internet Explorer 8.0 hits the market. Additionally, speculations reveal that Microsoft will not release an interim Internet Explorer version 7.x, but will rather concentrate its efforts on the development of IE8.

    Another interesting supposition regarding IE 8 states that an alpha edition of Internet Explorer 8 has already been deployed in-house at Microsoft.

    Internet Explorer 8.0 – Alpha edition already available? – Softpedia

  • CSS Optimize | Optimizador de CSS online

    Otro sitio para adelgazar y limpiar nuestro CSS. Añadirlo junto a este.

    Optimize and Clean up your CSS

  • Plantillas y Layouts CSS Gratuitos | Free CSS & Layouts Templates

    Colección de plantillas y Layouts basados en CSS gratis.

    (X)HTML- and CSS-Templates

    • Open Source Templates
      15 impressive templates
    • OSWD
      Hundreds of templates and layouts of all possible kinds.
    • OSWT
      A huge collections with search- and sort-functions. With annoying advertisement.
    • Maxdesign
      23 layouts and design solutions
    • CSSplay
      Stu Nicolls presents dozens of free professional layouts. Sometimes a permission to use layouts is required.
    • Tinderbox
      One layout in many variations
    • Changingman
      Beautiful liquid 3-col-layout.
    • Mollio
      Seven variations of one template, incl. style guides as .pdf-files.
    • Six Shooter Media
      15 Templates
    • Yahoo! UI Library: Grids CSS
      A complex solution for many problems you might ever have: grid design is a principle well-known from image editors and layout tools.
    • CSS Design Templates
      12 Templates
    • ThreeColumnLayouts, by CSS Discuss
      Collection of 3-column-templates, gathered from a dozen of sources on the Web.
    • CSS Intensivstation
      15 Layouts
    • CSSFILL
      Small collection for personal web-sites
    • CSS Frames Layouts
      Frames are also possible with CSS
    • CSS Template Gallery
      The site includes a search function, however it includes only 32 templates.
    • Ex-Designz
      98 (X)HTML-based CSS-templates
    • Code-Sucks
      6 templates and various layouts with 2-4 columns.
    • Jimmy Lin
      8 simple templates
    • Layout Gala
      40 professional Layouts for fresh and serious online-presentations.
    • Little Boxes
      16 Layouts, classic.
    • Solucija
      19 Templates

    Even more freebies!

    • 25 CSS Template Resources
      A comprehensive list in the Web Developer»™s Handbook.
    • An extensive collection of css-templates
      List of resources with free css-layouts, by Manuela Hoffmann (in German!).

    Free CSS Layouts And Templates | Smashing Magazine

  • Consejos y manuales diseño web | CSS vs. tablas | Colección enlaces

    Ferran Garriga nos hace su recopilación de sitios útiles relacionados con el Diseño Web, básicos o avanzados, son muy interesantes. Para tu del.icio.us

    En éste post intentaré ir poniendo enlaces para el diseño web siguiendo los estándares más actuales.

    1. LeandonoÁs Blog: Diseño de logos y demás con la moda del web 2.0 con multitud de tutoriales
    2. Demasiada Cafeí­na: Nos proporciona un excelente manual explicativo del XHTML + CSS
    3. Manual xhtml: Nos proporciona un manual básico para empezar desde cero en éste mundillo.
    4. El porqué de no utilizar tablas: Explicación de porqué no usar tablas para realizar el diseño v1.0 [sí­ para tablas de datos]
    5. Porqué el diseñar con tablas es estúpido: Explicación de porqué no usar tablas para realizar el diseño v2.0 [sí­ para tablas de datos]
    6. Tutorial de posicionamiento y layout en Css: Pequeño ejemplo de cómo podemos realizar un pequeño diseño usando simple css
    7. Cómo migrar a Css sin traumas: Pequeña introducción a cómo comenzar con css
    8. MaestrosDelWeb [CSS]: Excelente web que trata todos los temas relacionados con éste mundillo
    9. HTMLPlayground: Web en donde tenemos todos los tags de CSS en donde automáticamente nos sale un ejemplo, su resultado y en donde podemos modificar el código para ir aprendiendo, está muy bien
    10. Webéame: Es como el menémame pero con contenidos webs, para estar a la última con las notí­cias más frescas.

    . Punto de acceso zeGnus .: Diseño web

  • Generador gratuito online de Layouts CSS | CSS layouts generator

    Si tienes clara la estructura de tu página pero no te manejas bien con CSS, en este sitio te generan en dos clics el XHTML y el CSS. Prúebalo.

    CSS Layout Generator

    The layout generated has changed significantly from previous versions. The main reason for change was to simplify the layout and in doing so make it easier to use. It no longer provides fixed width columns with fluid center or full length columns by default.

    This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

    Links to articles in the «Layout Hints» box to the right and the CSS Forum will provide help where needed.

    The generator requires a DOM capable browser with JavaScript enabled.

    To create your layout select the structural elements your site requires (header, footer, columns). Then specify a size in the field provided and choose a background color from the color chooser below.

    The color chooser changes values as you move your mouse along a row. To set the value of a row, click on the color row, to release click again. Once the color in the box is the color you are after, click in the background-color field to assign it the value.

    CSSCreator