ceslava | diseño y desarrollo web

Categoría: Accesibilidad

  • Recursos de Diseño | Design resources

    Una recopilación de sitios que hay que visitar:

    Design Resources

    A list of very resourceful web sites in the design community.

    Design Portals

    howdesign, scene360, netdiver, pixelsurgeon, kaliber10000, surfstation, design is kinky, gouw.nu, fwa, design interact, ultrashock, media inspiration, newstoday, css beauty, design meltdown, webcreme, cssremix.com

    Design Books

    adobe photoshop books, html books, interface design books, web design books, flash books, dreamweaver books, color usage books, typography books, photography books, ajax books, web design standards, css books

    Stock Photography

    istockphoto, dreamstime, photos.com, corbis, thinkstock, picturequest, gettyimages, comstock, veer

    Web Standards and CSS

    alistapart.com, thinkvitamin.com, creativebehavior.com, treehousemagazine.com, webstandards.org, dezwozhere.com links, webstandardsgroup.org, andybudd.com, meyerweb.com, the web developer’s handbook, adaptivepath.com essays, csszengarden.com

    Development Resources

    thebestofwebhosting.com, htaccess-cheatsheet, dynamicdrive.com, webdesigntimes.com, css property index, understandingxml.com, css form creator, css rounded box generator, css browser compatibility chart, cssbasics.com, css layout gala

    Design Magazines

    Communication Arts, Step Magazine, Create Magazine, Print Magazine, How Design Magazine, Dynamic Graphics Magazine, CMYK Magazine

    The Best Designs – [TheBestDesigns.com] – Recognizing The Best of Web Design

  • 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

  • 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

  • Optimizador online CSS | Online CSS Optimizer

    En el link inferior tienes un acceso a una web para rápidamente limpiar tu CSS. Copia y pega o introduce la URL.

    CSS Cascading Style Sheet Optimiser

    Style Sheet Optimiser

    This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go. More information on this tool can be found on the about page.

    Online CSS Optimiser/Optimizer : flumpCakes

  • CSS sólo para Firefox, Chrome, Safari, Opera | Hacks

    En el «head« del HTML del sitio incluimos lo siguiente:

    <style type="text/css"> <!-- @import url(files/css/FFstyles.css) screen; --> </style>

    Este código es independiente de la lí­nea que llama al archivo CSS original del sitio. Lo que queremos lograr, es «importar» una hoja de estilos alterna o más bien, complementaria, con estilos especí­ficos para Firefox.

    Y, ¿por qué sólo para Firefox?.

    Simple, la regla @import es completamente ignorada por Internet Explorer, por lo que este nuevo CSS importado sólo lo va a leer el Firefox, y como el @import tiene prioridad en cuanto a la jerarquí­a de importancia de los estilos declarados, estos sobreescribirán a los que ya fueron declarados en la hoja de estilos original del sitio.

    Esto nos da una gran posibilidad de crear estilos especí­ficos para Firefox, que el IE no los tomará en cuenta, dándonos así­ un control mucho mayor sobre la presentación final del sitio.

    Michael Mí¼ller C. | Diseño y Desarrollo Web, Estándares, CSS, HTML y más! | Guayaquil, Ecuador | Web Design Blog

    Actualización 4/11/11

    Esta entrada tiene ya 4 años y en su día ni siquiera hablábamos de Chrome ni de dispositivos móviles.

    Hay muchos hacks para apuntar a los navegadores, para que nuestros estilos sean distintos según el navegador y su versión.

    3 soluciones

    • Puedes utilizar bien distintas hojas mediante condicionales para IE
      <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css"  />< ![endif]-->
  <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css"  />< ![endif]-->
    /***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */
    •  CSS Browser Selector: Esta solución que mediante javascript y la detección del navegador se añaden clases al HTML
  • Manual  de Posicionamiento Web y Marketing Electrónico
    Introducción
    Sobre los Buscadores
    Los buscadores proporcionan la principal fuente de visitas a un sitio Web. Por esto es importante comprender cómo funcionan y qué podemos hacer para tener una buena posición entre sus resultados ya que la mayor parte de nuestro trabajo de mercadeo se va a enfocar en optimización para buscadores (SEO «“ Search Engine Optimization).
    Palabras Clave
    Que son las  palabras clave (keywords)?
    Las palabras o frases clave son términos de búsqueda que los navegantes usan en buscadores para encontrar información. Por ejemplo, ingresando la palabra clave «mercadeo» en Google obtenemos una búsqueda que tiene alrededor de 4 millones de resultados, todos vinculados de una forma u otra con mercadeo.
    Análisis de  Palabras Clave (keywords)
    Un análisis de palabras y frases clave permite identificar los términos más apropiados para el trabajo de optimización del sitio Web. Este análisis se usa también para manejar campañas de publicidad por términos.
    Densidad de  Palabras Clave
    Se entiende por densidad de palabras clave a la cantidad de palabras clave que aparecen en un espacio determinado. Por ejemplo, en este párrafo, la palabra párrafo ha aparecido dos veces, lo que le da una densidad media y natural.
    Contenido
    El Texto de  Un Sitio
    El contenido del sitio es muy importante tanto para los visitantes como para los buscadores. Por suerte, los buscadores están diseñados para responder a la misma calidad que buscan los visitantes, por ende solo hace falta concentrarse en escribir buen contenido para los visitantes del sitio y dejar que los buscadores hagan su trabajo.
    Creando Contenido de Alta Calidad
    Los mejores enlaces entrantes son los que se consiguen por sí­ solos, y los mejores visitantes son los que regresan. Si nuestro sitio tiene contenido de alta calidad otros sitios querrán apuntar hacia nosotros y los visitantes que lleguen tendrán una buena impresión, confiarán en nuestro sitio y regresarán en el futuro. Sin embargo, no basta con crear contenido de buen nivel, lo importante es resaltar por encima de los demás.
    Enlaces
    Enlaces  (links) Internos
    Enlaces internos son todos los enlaces que enví­an al visitante a otra página de nuestro sitio. Es importante que todas las páginas estén conectadas de alguna forma coherente en el sistema de navegación, y además es recomendable que ninguna página se encuentre a más de 3 clicks de la página inicial.
    Enlaces (links)  de Salida
    Los enlaces de salida son todos los enlaces que enví­an al visitante fuera de nuestro sitio. Estos enlaces pueden tener un efecto positivo o negativo sobre la popularidad de nuestro sitio dependiendo de la impresión que tengan los buscadores de la página a la que estamos apuntando, y hasta cierto punto la forma en que utilizamos los enlaces.
    Enlaces  (links) Entrantes
    Los enlaces entrantes son enlaces que se encuentran en otros sitios y apuntan al nuestro. Estos enlaces entrantes son, después del tí­tulo de la página, el segundo factor más importante en establecer la popularidad de nuestro sitio. De hecho, en términos de mercadeo electrónico, en este tema de enlaces entrantes es en el cual más horas se invierte cuando se trabaja en mejorar la popularidad de un sitio Web.
    Optimización del Sitio
    Accesibilidad Web
    El concepto de accesibilidad Web trata sobre los mecanismos para crear sitios Web accesibles universalmente. La red puede ser accedida por diversidad de usuarios desde diferentes navegadores y plataformas; y de esta misma forma también es accedida por sistemas automatizados como los buscadores. Desde el punto de vista de mercadeo electrónico, es importante cumplir con los lineamientos de accesibilidad para poder atender a la mayor cantidad de usuarios, y porque los buscadores hacen uso de las etiquetas y propiedades de accesibilidad.
    URLs, Tí­tulos y Encabezados
    El URL, el tí­tulo y los encabezados en una página Web son elementos que describen el contenido y por ende son de mucha importancia tanto para visitantes como para los buscadores.
    Etiquetas Meta (metatags)
    Las etiquetas meta solí­an ser parte del algoritmo para organizar los resultados de una búsqueda, pero debido a la facilidad con que el autor del sitio puede manipularlas en la actualidad son pocos los buscadores que hacen uso de su contenido para posicionamiento. Sin embargo, las etiquetas meta aún son utilizadas para lo que fueron creadas, por ende es importante conocer como funcionan y utilizarlas adecuadamente.
    Manual de Mercadeo Electrónico