Categoría: CSS y XHTML

Las mejores soluciones son a menudo las más simples. A continuación se presenta una lista de los 8 consejos que contienen sólo una propiedad css.

1. Centrado vertical

line-height:24px;

Cuando se tiene un recipiente con altura fija se puede utilizar la propiedad line-height para centrar verticalmente el contenido.

2. Prevenir que el contenido exceda esquemas de ancho fijo

#main{
	overflow:hidden;
}

Cuando el contenido extra (por ejemplo, una imagen grande) se coloca en contenedores de ancho fijo, puede romper el esquema. Para evitar que eso ocurra puedes usar este truco. Se esconde una parte del contenido, pero al menos, la estructura de la maquetación se mantendrá intacta.

3. Prevenir saltos de línea en los enlaces

a{
	white-space:nowrap;
}

Este pequeño truco permite evitar los saltos de línea en sus vínculos. Recomendamos usar esto cuando hay mucho texto para no tener que romper los vínculos en 2 líneas.

4. Mostrar siempre a barra de scroll en Firefox

html{
	overflow:-moz-scrollbars-vertical;
}

Firefox oculta la barra de desplazamiento por defecto. Así que, cuando navegas por un sitio que tiene diferentes alturas de página se nota un desplazamiento horizontal. Este código hace que siempre se muestre la barra de desplazamiento.

5. Centrado horizontal de elementos

margin:0 auto;

Hoy en día, para cualquier navegador moderno, esta línea de css le es suficiente para centrar horizontalmente un bloque.

6. Quitar la barra de desplazamiento vertical de texto en IE

textarea{
	overflow:auto;
}

Las área de texto tienen en IE las barras de desplazamiento visibles por defecto. Si quieres no se muestren, usa esta línea.

7. Forzar los saltos de página la impresión del documento

h2{
	page-break-before:always;
}

Con esta línea de código se pueden controlar los lugares en los que desea insertar el salto de página al imprimir un documento.

8. Eliminar el borde punteado de un vínculo activo

a:active, a:focus{
	outline:none;
}

Con ese sencullo código se elimina el borde punteado que deja Firefox sobre el último enlace que hemos pulsado.


Vía: CSS Globe

Categoría: diseño web

Como desarrolladores web tenemos un constante anhelo de aprender cosas nuevas. En un sector que evoluciona tan rápido, si no estás al día corres el riesgo de quedar obsoleto y anticuado. Mantenerse al día de las tendencias, las modas y las nuevas técnicas para el desarrollo de sitios web es una parte esencial para ser un buen desarrollador web.

Nos pasamos (literalmente) la mayor parte del día delante del ordenador e incluso en nuestro tiempo libre, para leer, aprender y estar al corriente de las noticias relacionadas con la tecnología web. Esto nos lleva a tener una gran colección de enlaces favoritos, pero a través de los años, sólo hay un puñado de sitios web que frecuentemos.

Nos gustaría compartir 20 sitios web que han ampliado nuestro conocimiento, la ampliación de competencias, y la mejora de la calidad y eficiencia de los proyectos de desarrollo web. La mayoría de estos (esperemos) que ya los conozcas, pero si encuentras uno o dos enlaces de los que nunca has oído hablar, habremos logrado nuestro objetivo.

1) Alertbox: Novedades en Usabilidad Web
Alertbox es la columna bi-semanal de Jakob Nielsen que analiza la usabilidad web. Desde siempre somos seguidores de sus desarrollos de sitios web profesionales. La mayor parte de sus recomendaciones tienen sentido y están respaldadas por estudios del mundo real y cuidadosas encuestas.

Sus columnas tratan temas como las ventajas de la ruta de navegación y los 10 errores más comunes en diseño. Un buen enlace que ofrecer a las personas cuando se nos pregunta sobre el diseño óptimo de páginas web es la columna sobre "Resolución de pantalla" y del diseño de la página.

2) TheBestDesigns.com
En los días en que sus jugos creativos no parecen fluir como deberían, a menudo ayuda a inspirarse ver el trabajo de otras personas. TheBestDesigns.com es una galería de sitios web para visitar en esos días. TBD tiene un par de cosas que lo distinguen de otras galerías de diseño web - entre ellos están: la elección de la calidad sobre la cantidad, el diseño basado en CSS, diseño y etiquetado de cada una con las palabras clave de modo que los usuarios pueden encontrar convenientemente diseños similares.

3) A list apart
A list apart nos inspiró a convertirnos a la Web semántica y las normas de código. Al principio, la mayoría de nosotros probablemente no nos preocupamos de capitalización, etiquetas HTML sin cerrar (… que no validan con una estricto doctype) o entendiendo el valor real de la accesibilidad en páginas web.

4) Getting Real by 37 signals
"Getting Real", es un libro que está disponible en línea, escrito por 37 señales. Se trata de la creación de aplicaciones basadas en web en una forma productiva y exitosa. El libro abarca temas que van desde las filosofías que ayudan a llevar a cabo visitas a los productos de calidad a la contratación de las personas adecuadas para hacer el trabajo.

5) Digg / Tecnología
Digg es un sitio donde las personas presentan vínculos y votan si el contenido es digno de ser leído por sus usuarios y que artículos no merecen la luz del día. Una gran parte de nuestra capacidad para estar al día con las nuevas tecnologías, técnicas, y las nuevas normas se debe a que frecuentan Digg de la sección de Tecnología. La comunidad es un poco freak lo que es una buena y mala noticia, por lo que le permite omitir la basura y llegar a las buenas cosas de inmediato.

6) Web Design from Scratch
Scratch es un sitio web dirigido por Ben Hunt, eso es (copio directamente de la página) "Una guía completa para el diseño de los sitios web que el trabajo". Se atiende principalmente a la web de los constructores, pero siempre es bueno "volver a lo básico" y obtener una actualización sobre las cosas que hay que dar por sentado.

7) MooTools
Mootools es un ligero marco en el que simplifica la forma de escribir JavaScript y proporciona potentes clases AJAX, efectos, y funciones. Es una gran ayuda en el desarrollo de complejas páginas web de forma rápida y elegante.

8) ReadWriteWeb
ReadWriteWeb es un blog sobre noticias de tecnología web. Atiende a la web de los profesionales que tienen la necesidad de conocer lo que es hasta ahora. Fue fundada por Richard MacManus, quien también co-fundó el grupo de trabajo Web 2.0 - una red de blogs que cubren la generación Web 2.0.

9) Zen, zona de Desarrolladores
Este es un sitio web escrito por algunos de los principales desarrolladores de PHP y que proporcionan noticias, artículos, tutoriales y otras cosas relacionadas con PHP. Si estás buscando una fuente fiable de información acerca de PHP, no hay otro lugar a buscar que el Zend Developer Zone.

10) CSS Zen Garden
Css Zen Garden es una clara idea de los desarrolladores de nuevos CSS. Css Zen Garden explora el poder de las hojas de estilo externo mostrando una gran variedad de diseños aportados por los desarrolladores de toda la industria.

11) CSSplay: experimentando con hojas de estilo
Otro maravilloso sitio web sobre CSS. Ofrece demostraciones de las soluciones basadas en CSS, como las galerías de imágenes, sombras, mapas de imagen, etc.

12) Tutoriales web de W3schools
Este es un increíble centro de conocimientos para el desarrollo web todas las cosas, que abarca temas tales como JavaScript, HTML, PHP, SQL, y más. En la parte inferior de su logo, que cita, "Los mejores cosas de la vida son gratis" - esto es cierto en su caso.

13) Books 24x7
La Colección ITPro en Books24 × 7 ofrece las versiones digitalizadas de libros de tecnología. Es una web basada en suscripción, pero si está en condiciones de pagarla (o puede convencer al jefe para obtener una suscripción), es la mejor manera de acceder a una literatura de calidad a través de la comodidad de su computadora.

14) Drupal
Drupal restauró nuestra fe en aplicaciones de código abierto. Antes de Drupal, habíamos trabajado en Oscommerce, Zen Cart y Moodle. Todos los proyectos trabajaban en PHP y CSS, HTML (por defecto utilizaban diseños de tablas, con poco cuidado de la semántica, entre algunas cosas) y fueron diseñadas con poca usabilidad y accesibilidad en mente.

15) WebMonkey
¡He aquí un viaje al pasado! Esto es como un recordatorio a los de más edad (un poco) y los desarrolladores con más experiencia que el sitio se encuentra en marcha. Fue, en su tiempo, un lugar para visitar y aprender sobre el desarrollo web, que abarca temas tales como la programación Web, E-business, y el diseño de páginas. También cuenta con una "referencia rápida" en la barra lateral.

16) Meyer Web
Esta es una recopilación de los escritos de Eric Meyer, un consumado autor sobre el tema de las CSS. No sólo es él un experto en CSS, es también un defensor de código semántico. Su trabajo era, y es, verdaderamente revolucionario. A él le debemos la comprensión de "restablecer CSS".

17) 456 Berea Street
456 Berea Street es la creación de Roger Johansson, un profesional web de Suecia. Los temas incluyen reseñas de libros, trabajos escritos acerca de CSS y XHTML, y desarrollo web de noticias y eventos.

18) Web Standards
La Web Standards Project "lucha por normas que reducen el coste y la complejidad de desarrollo al tiempo que aumenta la accesibilidad y la viabilidad a largo plazo de cualquier sitio publicado en la Web".

19) Fiftyfoureleven.com
Un maravilloso sitio web para el desarrollador web modernas. El sitio web "está destinado como un recurso para los desarrolladores web: gente que diseña código y programa sitios web y aplicaciones para la web". El sitio web es parte de la red 9rules y está escrito principalmente por Mike Papageorge que en el blog trata de temas como "Marketing en Internet", y temas más específicos como el de "Logos Olímpicos".

20) SitePoint
SitePoint es uno de los mayores sitios web que ha sobrevivido a la constante evolución de los gustos de los desarrolladores y diseñadores web. Un co-fundador del sitio web, Matt Mickiewicz, en primer lugar tiene un sitio web llamado Webmaster-Resources.com Foros Comunidad puesto en marcha en 1999.


Traducción libre de SixRevisions

Categoría: diseño web

A la hora de diseñar los emails en formato HTML que nuestras aplicaciones enviarán a los usuarios, hay que tener en cuenta varios puntos que nos ayudarán a un diseño más correcto:

• Olvidarse del tableless: si, aunque sea duro, es mejor volver a las tablas y olvidarse del posicionamiento y la maquetación vía CSS.
  
  
• Usar los estilos dentro de las etiquetas: la mayoría de los lectores de correo online ignoran lo que hay entre la cabecera del HTML, por eso es conveniente usar los estilos dentro de las etiquetas.
  
  
• No uses imágenes de fondo: aunque para un buen diseño puede ser esencial, hay algunos lectores que no mostrarán los background, por lo que es mejor no usarlos para asegurarnos de que todo el mundo vea correctamente el correo.
  
  
• Considera las imágenes bloqueadas por defecto: por seguridad los clientes de correo bloquean las imágenes por defecto, por lo que no es conveniente usarlas para indicar el contenido del mensaje.
  
  
• Usa el atributo alt en las imágenes: como estarán bloqueadas por defecto, es necesario indicar la mayor información posible en ese atributo.
  
  
• Usa paths absolutos: ya que el mail se leerá en otro servidor es necesario indicar la ruta completa para que los contenidos se vean correctamente.
  
  
• Ten cuidado con el tamaño de los archivos: a parte de que el usuario no debe esperar para poder leer el correo, algunas veces los correos con archivos pesados son considerados spam.
  
  
• Evita flash y similares: evita el uso de flash u otros contenidos multimedia que puede que no se vean en el cliente.
  
  
• Diseña para espacios pequeños: aunque se trate de un HTML no siempre el espacio donde se ve es amplio, piensa en dimensiones pequeñas a la hora de diseñar.
  

Vía: CSS Globe

Categoría: diseño web



No es el mejor navegador, (nosotros recomendamos Firefox, Safari, Opera...) pero la gente que prefiera usar Internet Explorer, al menos dispondrá de un navegador más respetuosos con los estándares.

Tal como se venía anunciando, la nueva versión del navegador de Microsoft fue presentada en el MIX ‘08, con una demostración de sus nuevas características, entre las que se destacan su integración a Facebook y eBay, conformidad con los estándares y capacidad para trabajar con sitios que emplean AJAX.

• Conformidad con los estándares: Algo que se había anticipado en el Blog de IE, a partir de que se anunció que la nueva versión había pasado el Acid2 test.
  Además, hace un par de días, Dean Hachamovitch, Manager General de Internet Explorer, adelantó que por defecto, IE8 presentaría el modo obediente con los estándares, de acuerdo con los principios de interoperabilidad que habían anunciado semanas atrás.
  
  
• Por otra parte, la integración de IE8 con otros sitios y servicios se realiza utilizando una nueva tecnología, llamada “WebSlices”, que es una forma de conseguir actualizaciones de otros sitios vía el navegador, sin tener que visitar los mismos.
  De este modo, Microsoft ha capitalizado su sociedad con Facebook, la red social más popular de la web, al incorporarla a la toolbar de su navegador. Lo mismo sucede con eBay, Live Maps y Me.dium.
  
  
• Se asegura que IE8 funciona mucho mejor en sitios con AJAX.
  

Adelantándose a todas las previsiones, que esperaban su lanzamiento público recién para mediados de año, la beta pública ya está disponible para su descarga, por lo que comenzaran a llegar comentarios a partir de su prueba efectiva, por parte de los usuarios.

Vía: Maestros del web