viernes, 26 de febrero de 2010

Seminario de Implementación Web y Posicionamiento

Seminario WEB UTP

Día: 18 de Marzo del 2010
Hora: 18:00 a 21:00 hrs.
Lugar: Auditorio Madre de Dios – Universidad Tecnológica del Perú
(Esquina Av. 28 de Julio y Av. Petit Thouars, Lima)

Certificado: 20.00 Nuevos Soles (Opcional)

Ingreso Libre (Previa Inscripción)

Inscripciones en línea AQUÍ

Programa:

6:30 PM a 7:30 PM – Implementación de un Sitio Web en un Servidor

Expositor: Sr. Percy Ricaldi Rosas – Web System Administrator ERP-Medifarma S. A.

Temas a Desarrollar:

  • Introducción a dominios y hosting en internet
  • Dominio de Internet
  • Hosting
  • Gestores de contenido

7:30 PM a 9:00 PM - Posicionamiento Web

Expositores:

- Sr. Paolo Moreno – Jefe de Desarrollo de Sistemas – ADDCONSULTA
- Srta. Teresa Flores Ramírez – Ejecutivas de Cuentas SEO – ADDCONSULTA

Temas a Desarrollar:

  • Cómo funcionan los buscadores.
  • Tu Web en los primeros resultados de GOOGLE
  • Factores técnicos de la web para el posicionamiento.
  • Posicionamiento aplicado al contenido.
  • Optimización.

Lo nuevo de Silverlight 3

Microsoft Silverlight es un complemento para navegadores de Internet basado en la plataforma Windows que agrega nuevas funciones multimedia como la reproducción de vídeos, gráficos vectoriales, animaciones y de entorno de desarrollo; en forma similar a lo que hace Adobe Flash.

Silverlight 3

Este evento se desarrollará tanto de forma presencial como por webcast los días 3, 5 y 6 de marzo, pero son cupos limitados así que no duden en inscribirse enviando un correo tal y como indica el afiche.

jueves, 25 de febrero de 2010

Cibertec: Excel 2007 potencia la productividad de usuarios

Para dominar el renovado entorno del programa Microsoft Excel 2007 es fundamental la actualización. En este sentido, con el respaldo de Microsoft, Cibertec implementa el Taller de Funciones en Excel, donde el participante aprenderá a resolver cálculos específicos con el uso de funciones de base de datos, matemáticas, estadísticas, fecha y hora, texto, lógica y búsqueda.
“El curso es una oportunidad para jóvenes y adultos que desean estar preparados para enfrentar los cambios de las versiones de la hoja de cálculo que hoy se manejan en el mercado laboral y a nivel personal”, sostiene Denise Dianderas, jefe de producto de la División de Computación Aplicada (DCA) de Cibertec.
En la primera etapa del taller el participante conocerá los conceptos básicos para manejar la información en el programa hasta administrarla realizando cálculos de una manera sencilla. En la segunda parte descubrirá de manera práctica el nuevo entorno de la hoja de cálculo en la versión 2007.
Al concluir el curso, los asistentes recibirán los certificados Excel XP Proficient y Upgrade Excel Proficient 2007. Las clases se efectuarán en laboratorios modernos, a cargo de expertos en tecnología. Para mayor información los interesados pueden comunicarse al 419-2900, anexo 4205, escribir al correo electrónico Gladys.donayre@cibertec.edu.pe o visitar:
www.cibertec.edu.pe

Curso oficial para desarrolladores y DBA’s

Comunicamos a nuestros lectores que del 22 al 25 de marzo próximo se realizará el primer curso oficial para desarrolladores y DBA’s en Perú: Postgres Plus.
Este curso comienza con la “Introducción a la administración de Postgres”, diseñado para el personal responsable del papel administrativo de templar, de planear, y de optimizar la disposición de datos para uno o los servidores múltiples. El curso avanzado apunta a DBA’s responsables de administrar soluciones avanzadas (incluyendo réplica, seguridad, etc.). Finalmente, el curso del “Funcionamiento y la capacidad de conversión a escala” está preparado para que los DBA’s identifiquen embotellamientos y ejecuten soluciones escalables.
Informes e inscripciones en: (511) 441-9638 o informes@softwarelibreandino.com visite también: http://www.enterprisedb.com/tservices/training/
dbas.do;jsessionid=EEE16CF7B5B61F2546F363424E1EF1B9

martes, 16 de febrero de 2010

3 opciones para convertir texto a MP3

Cuando tenía exámenes en la universidad o cuando quiero ir escuchando noticias sin necesidad de descargar algún podcast puede ser muy útil contar con herramientas que te faciliten la tarea. Para esto te traigo 3 opciones que te pueden servir para convertir texto en audio sin necesidad de descargar algún programa.

carryouttext

Carryout Text: Te permite transformar texto a formato mp3 de forma gratuita y sin necesidad de registrarte. Por ahora es gratuito ya que están planeando lanzar una versión con más funciones para el usuario. Tiene un límite de 150,000 caracteres, así que podrás convertir artículos largos pero no libros. Desventaja: sólo te convierte textos en inglés.

spokentext_logo

Spoken Text: Esta herramienta hace lo mismo sólo que para poder transformar cualquier texto debes registrarte. El sitio ofrece dos maneras de adquirir el texto que debes convertir a audio, la primera es copiando y pegando y la segunda es subiendo desde tu equipo algún archivo.

El sitio soporta archivos en formato PDF, Word (.doc), power point (.ppt), texto simple (.txt) y HTML (.htm).

voz-me

Voz Me: Es un sitio sencillo que sigue la misma dinámica que los anteriores, aquí sólo puedes copiar y pegar texto pero sigue siendo gratuito y sin necesidad de registro. La ventaja es que te ofrece la posibilidad de convertir textos en español, en ingles y en italiano, hindi, catalán y portugués, además de poder escoger si quieres que tu texto sea con voz masculina o voz femenina.

Estas son opciones interesantes que te pueden servir para aprovechar el tiempo para escuchar noticias en lo que haces otra actividad, si ustedes conocen otras opciones no duden en compartirlas.

Pequeños trucos de productividad con las pestañas de Firefox

La extensión para Firefox llamada Tab Mix Plus daría para una serie de post bastante generosa. Lleva mucho tiempo entre las más descargadas y mejor valoradas y ofrece una cantidad de detalles geniales que junto con otras extensiones son los que me impiden dar el salto a Chrome.

Una vez instalada la extensión y reiniciado Firefox podemos acceder a las opciones de la misma en el menú Herramientas:

screenshot082

Como ya os comentamos hace tiempo, una de las cosas cómodas de Firefox y de otros navegadores es que se pueden cerrar las pestañas haciendo click con el botón central del ratón sobre su título. Con TabMixPlus podemos llevar esto a su máxima expresión en la pestaña de opciones llamada Ratón:

screenshot084

Como veis en la imagen tenemos hasta 30 tareas que podemos repartir entre

  • Doble click
  • Click central
  • Ctrl + Click
  • Alt + Click
  • Mayúsculas + Click

Y a su vez cada una de estas opciones tiene dos ramificaciones que es

  • Al hacer el click sobre una pestaña
  • Al hacer el click sobre la barra de pestañas

Algunas interesantes que trae la extensión y otras que me gustan a mí:

  • [Por defecto] Click central sobre la barra de pestañas -> Abre la última pestaña cerrada. Desde hace algunas versiones Firefox permite abrir la última pestaña cerrada con el atajo Shift+Ctrl+T pero a mí me resulta más cómodo hacerlo con el ratón que a la hora de navegar la verdad es que uso pocos atajos del teclado.
  • [Por defecto] Mayúsculas + click sobre pestaña -> Protege pestaña. La pestaña aparecerá marcada con un pequeño icono de advertencia y no se podrá cerrar hasta que la desprotejamos o cerremos Firefox.
  • [Por defecto] Alt + click sobre pestaña -> Bloquea pestaña. La diferencia entre bloquear pestañas y protegerlas es que cuando está bloqueada puedes cerrarla pero lo que no puedes es ir a otra dirección. Si haces click en un favorito por ejemplo se abrirá automáticamente en una nueva pestaña. Lógicamente se pueden combinar las dos opciones y tener una pestaña protegida y bloqueada
  • Doble click sobre pestaña -> Cierra las demás pestañas. Este es mi favorito aunque no está por defecto. Puedes por ejemplo ir abriendo con click central resultados de Google en segundo plano y luego revisarlos y hacer doble click sobre el que más te convence para eliminar el resto de pestañas que no te interesan.
  • Ctrl + Click sobre pestaña -> Copia la URL de la pestaña al portapapeles. Otra opción que me parece de lo más interesante.

Os animo a que descarguéis esta extensión y echéis un ojo a todas sus posibilidades para dejar Firefox a vuestro gusto.

Organizando las pestañas en Firefox con Tree Style Tab

Hay una extensión en Firefox que he visto comentar en más de una ocasión así que estos días he decidido probarla, digo, algunos la ponen de “imprescindible”. Su nombre Tree Style Tab.

tree style tab

Lo que hace está extensión es colocar las pestañas que tenemos en la parte superior en un lateral, ya sea izquierdo o derecho (ideal para monitores panorámicos o si usas una resolución alta). Pero lo que hace peculiar a este añadido es que las nuevas pestañas que abras, y dependiendo como lo hagas, se organizaran por medio ramificaciones. Por poner un ejemplo: un poco al estilo del explorador de Windows cuando te mueves por las carpetas, un árbol de carpetas pues.

¿Para qué me sirve esto? sencillo, para tener una referencia visual de las pestañas que tengan algún tipo de relación. Un escenario práctico es cuando estás investigando sobre un tema y abres y abres enlaces, con Tree Style Tab tendrás una idea de como has llegado a cierto punto, además de poder contraer y expandir específicamente esas pestañas para ahorrar algo de espacio. Debo recalcar que todas las ramificaciones se hacen automáticamente.

Es más fácil verlo que explicarlo, por eso aquí un video demostrando su funcionamiento.

Si bien ésta extensión cuenta con bastantes opciones para modificar y las que vienen por defecto me han servido, una en especial no me ha gustado. Cuando ya la has instalado desde ahora casi todas las páginas que abras desde la barra de direcciones lo hará en una nueva pestaña. Para evitarlo nos vamos a opciones> Tab Operations> Open Tabs contextually. Y en los apartados de la barra de direcciones desmarcamos todas o las que prefiramos mantener.

Tipografía para principiantes: Algunos apuntes y 10 consejos

La importancia de la tipografía Uno de los campos más apasionantes del diseño gráfico y un tanto ignorado por el gran público es es la tipografía. A pesar de lo presente que está en nuestras vidas; documentos de word, presentaciones powerpoints, webs, blogs etc. se le suele prestar poca atención al uso de las fuentes.

Los usuarios tienden a dejar los tipos por defecto del programa de turno y usar solo distintos tamaños, negritas o cursivas, a veces inadecuadamente, esto ha propiciado una sobre exposición de esas fuentes como la Times New Roman de Word que no es que sea una mala tipografía pero está tan vista que aburre.

Es siempre recomendable, antes de acometer un trabajo, dedicarle un poquito de tiempo a la elección de los tipos de letra y estilos (título, subtítulo, cuerpo de texto, “topillos” para las listas…) que se van a usar para optimizar nuestro trabajo y conseguir mejores sensaciones y resultados. Quién sabe, algún día no muy lejano podría haber gente especializada en definir nuestra personalidad por el tipo de letra que elegimos para nuestro Curriculum Vitae.

He aquí algunos apuntes y consejos recogidos y oidos de los profesionales de esta disciplina tan creativa.
Algunas tipografías

¿Dónde encontrar fuentes y cómo instalarlas ?

El sistema operativo trae por defecto un paquete de fuentes instaladas, son las llamadas fuentes de sistema y entre ellas hay algunas que se encuentran tanto en Windows como Linux o MacOS, Verdana o Arial por ejemplo, están entre ellas. Programas como Office o Corel instalan un grupo de fuentes propias y luego el usuario puede buscar en internet o en programas P2P fuentes sueltas o “packs” más o menos nutridos e instalarlas en su sistema.

Escribiendo fuentes o fonts en un buscador encontraremos centenares de páginas repletas de tipografías para descargar, como de costubre no todas buenas, bonitas ni baratas. Porque aunque parezca lo contrario no todas las tipografías son gratuitas, al igual que las fotos tienen unos derechos de autor. Como curiosidad, los precios de una tipografía oscilan desde los 20 euros hasta los miles que se pueden pagar por la tipografía corporativa de una empresa de las gordas. Instalarlas es una tarea sencilla que se suele aprender pronto pero no está de más recordar cómo se hace.

Cuando nos descargamos una fuente para Windows (ojo al descargar que algunas pueden tener versiones para Mac y PC) puede venir principalmente en dos formatos; las llamadas True Type (un único archivo con extensión .ttf) o bien las Type 1 (dos archivos del mismo nombre pero con distinta extensión .pfm y .pfb). Para instalar la fuente lo único que tenemos que hacer es copiar ese/os archivo/os en la cartepa Fonts o Fuentes a la que se puede acceder o bien desde el Panel de control:

Fuentes desde el Panel de control

O bien desde Mi PC:

Directorio de Fuentes

Si se tienen varias fuentes para instalar se puede copiar todas en grupo en la carpeta de Fuentes y se istalarán una a una.

Instalación de fuentes

Cabe recordar aquí el truquillo que veiamos hace algún tiempo para instalar tipos desde el menú contextual.

Algunas características

La vista previa. Para aceder a la vista previa de una fuente simplemente hacemos doble click en el archivo ttf o pfb, tanto dentro de la carpeta de fuentes como desde otra ubicación.

Vista previa de la Century Gothic
(click para ampliar)

Las frases que se usan para la demo de los distintos tamaños de las fuentes incluyen todos los caracteres del alfabeto y resultan ser algo muy simpático del estilo de: «Jovencillo emponzoñado de whisky, ¡qué figurota exhibe!» o en nuestro ejemplo «El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja».

La carpeta de Fuentes de Windows XP. En uno de los tipos de vista permite comparar los tipos que tenemos instalados en nuestro ordenador seleccionando uno en particular, por si estamos buscando una parecida:

Busqueda de fuentes similares
(click para ampliar)

Cómo se clasifican y analizan tipografías. Adivinar el nombre de una fuente a simple vista es un trabajo complicado que requiere años de experiencia y buen ojo. Desde las curvas de las esquinas hasta el puntito de la i son muchos los aspectos que miran los profesionales a la hora de elegir una tipografía para un fin determinado. Uno de los primeros rasgos definitorios de una fuente y que es fácilmente observable por cualquiera es el Serif, o remate de los trazos. Las fuentes Serif son las que tienen ese remate, como la Times New Roman y las Sans Serif son las que no lo tienen como la Tahoma.
Serif y Sans serif

Las familias. De un mismo diseño de fuente se suelen hacer variedades con distintos tamaños, grosores, con serif, sin serif etc etc. A todas esas variedades se les llama la familia y como en la vida misma hay familias muy extensas y otras menos. Si necesitas una versión más fina o más larga de una fuente lo mejor es buscarla en su familia. Lo que no debe hacerse nunca es estirar o encoger las cajas de texto deformando “a mano” el texto porque perderá la proporción y el equilibrio.

Otra curiosidad, algunos de los tipos de letra que usamos actualmente como la Garamond están basados en caligrafías usadas hace hace cientos de años. Otras son totalmente nuevas.

Consejos en el uso de tipografías

  1. Busca siempre la claridad y la facilidad de lectura. En textos largos para pantalla, dónde nunca sabemos cómo será el monitor del usuario, es muy importante que la lectura sea lo más confortable posible. Tipos de letra sencillos (Verdana o Arial son los más extendidos, Garamond puede ser una buena alternativa), un color acorde con el fondo, evitando estridencias y un tamaño de texto adecuado, que no haya que arrugar la nariz para leer ni tampoco tirar de scroll en cada frase, 10 u 11 pixels para el cuerpo de texto y sumando dos para los distintos niveles de título.
  2. Presta atención al medio. No es lo mismo leer un texto impreso que en una web, como hemos dicho es algo más fatigoso para la vista leer en pantalla. Una letra muy recargada cansan mucho la vista y se usan solo para títulos, subtítulos, citas o frases breves. Observa trabajos impresos para comprobar como queda una tipografía sobre papel y elige la más adecuada en cada caso.

    Una teoria extendida recomienda usar, en los textos largos, tipos Serif para imprimir y Sans Serif para pantalla, aunque habiendo tantas y variadas fuentes probablamente se darán interesantes excepciones.
  3. No utilices muchos tipos distintos en un mismo documento. Lo máximo recomendable serían cuatro, siempre teniendo en cuenta que una negrita cuenta como tipo. Si pones una letra con serif en el título suele funcionar mejor una sin serif en el cuerpo. Luego para los subtítulos se suele usar la misma del cuerpo de texto con dos puntos más grande o un punto y negrita.
  4. No instales muchas fuentes a la vez. Las fuentes se cargan en memoria al iniciar Windows y una carpeta de fuentes con miles de archivos ralentiza el ordenador. También se sobrecargan los programas a la hora de desplegar la lista y ésta se vuelve inmanejable para el usuario. Mantén sólo tus preferidas y las que más uses, aparte de las de sistema.

    Puedes guardar tantas tipografías como quieras bien organizadas fuera de la carpeta de Fuentes, podrás verlas haciendo doble click o bien usando un programa específico del tipo del AMP Font Viewer.
  5. Clasifica tus fuentes no instaladas. A poco que empieces a coleccionar tipografías te darás cuenta de que es muy adictivo. Cuando almacenes los distintos tipos manten una clasificación, por ejemplo en función del uso que le vayas a dar, para trabajos, para títulos, divertidas, de películas y videojuegos, signos gráficos… y te será más facil encontrarlas luego.
  6. Inspírate con los profesionales. Fijate como se usan y combinan los tipos e imítalo con descaro para tus trabajos. Por ejemplo, según el blog especializado Smashing Magazine estos son algunos de los tipos de letra preferidos por los diseñadores gráficos.
  7. Para documentos que se van a ver en otro ordenador usa siempre tipografías de sistema. Tal vez os hayais preguntado porqué habiendo fuentes tan chulas como la de Batman, la mayoria de las web usan los mismos tipos de letra; Arial, Verdana, Garamond o Georgia. No es que los diseñadores sean unos sosos, lo que ocurre es que los programas de texto y navegadores no suelen llevar el tipo de letra embebido, es decir, el programa detecta que un texto está hecho con la Batman Forever y busca en su carpeta de fuentes y si no la encuentra le planta la fuente por defecto y se queda tan ancho. Lo mismo ocurre si haces un trabajo en Word, se lo pasas a alguien y lo abre en su ordenador, por ello es mejora trabajar con fuentes de sistema.
  8. Evita el abuso de mayúsculas (parece que estás gritanto), subrayados (ensucia el aspecto) y el texo justificado a ambos lados para pantalla (los navegadores no reparten bien el espacio entre palabras y el efecto cuadrado no compensa la pérdida de homegeneidad)
  9. Usa los ajustes del procesador de textos. Los procesadores de textos, especialmente Microsoft Word son un mundo aparte, pareciera que hace falta un master para aprender usarlos correctamente. Con todo hay que tratar de sacarle el máximo partido; definiendo el espacio entre lineas y párrafos, la sangrías del texto, elegir los “topillos” de las listas, etc en lugar de usar los retornos de carro y la barra espaciadora indiscriminadamente. Si lo hacemos así aunque al principio parece lento luego ahorraremos tiempo y nos aseguraremos que nuestro documentos será organizado y con mejor aspecto.
  10. Por último pero no menos importante, si quieres que tus textos tengan un aspecto mínimamente profesional y los diseñadores no te cojan manía, nunca, nunca, nunca uses la Comic Sans.

Otro día hablaremos de programas y herramientas para gestionar, diseñar y trabajar con tipografías.

Habilitar la vista previa de pestañas en Firefox

Dos cosas de las que tenía bastantes ganas: la vista previa de pestañas en Firefox de forma nativa (sin extensiones) y su integración con la barra de tareas de Windows 7. Para ello es necesario descargar o actualizar a la última versión de Firefox, la 3.6. Si tu versión no se ha actualizado puedes ir en el menú superior a Ayuda/Buscar actualizaciones…

Para ambas cosas tenemos que introducir en la barra de direcciones del navegador about:config y llegaremos a la ya mítica página de Zona para manazas:

Una vez allí buscamos la opción browser.ctrlTab.previews y hacemos doble click sobre ella para que su valor pase a ser true tal como se ve en la imagen:

Estos nos permitirá que cuando pulsemos Control + Tab (atajo en cualquier navegador para cambiar de pestaña) salgo algo con esta pinta:

(click para ampliar)

Ojo, en el momento que dejemos de pulsar la tecla control, desparecerá el previo. Si queremos que se mantenga o buscar entre todas las pestañas algo tenemos que seleccionar el “Mostrar las X pestañas” que aparece en la parte inferior:

Si en about:config activamos también la opción browser.allTabs.previews (haciendo lo mismo que hicimos con la anterior) aparecerá un botón al final de la barra de marcadores que nos permitirá acceder directamente a este cuadro que muestra todas las pestañas:

Por último, si activamos browser.taskbar.previews.enable en Windows 7 , al pasar el ratón por Firefox minimizado en la barra de tareas también tendremos una vista previa de las miniaturas y podremos navegar por ellas usando los efectos de Aero:

Ojo, esto último ségún el director de Mozilla, Mike Beltzner, no está afinado completamente y por eso no aparece activado por defecto. De hecho en la captura de pantalla se ve con la miniatura correspondiente al panel de administración de Wordpress no se muestra correctamente.

15 artículos de CSS para principiantes

Cuanto más trabajo con CSS más pienso en lo fácil que parecía al principio. Y es que aunque hacer hojas de estilo para tus diseños no te parezca tan árido como aprender a programar en Java, hacerlas bien sí que puede traerte algunos quebraderos de cabeza. Aunque haciendo una chapuza a ti te parezca que queda como querías, luego te encontrarás con que en distintos navegadores tu web se ve diferente, con que un día te da por cambiar un píxel de espaciado y se va toda la estructura al carajo, etc…

Por ello lo mejor es empaparse un poquito antes de empezar y aquí os dejo esta lista de artículos para principiantes de Line 25 que descubrí hace tiempo y que me han servido de mucho. No son para principiantes totales, algo tendrás que saber, pero seguro que alguno de ellos tarde o temprano te saca de un apuro.

1. Resetting your styles with CSS Reset

Te parecerá extraño pero aunque empieces tu hoja de estilo desde cero, es posible que para los navegadores tu diseño no parta de cero. Por ello lo primero es poner a todos los navegadores de acuerdo y que no se tomen licencias que tú no quieres a la hora de considerar algunos espacios o dismensiones. Esto se hace a través de la técnica del CSS Reset sobre la que por cierto hay muchas variaciones como se puede observar en Perishable Press o en Inspiringpixel

2. Learn CSS Positioning in ten steps

Un tema que puede volver loco a cualquier los primeros días: las diferentes formas de posicionar un elemento a través de la hoja de estilos. Este me parece el mejor tutorial que he visto hasta la fecha y aún así no acabo de tenerlo del todo claro.

3. Internet Explorer and the CSS box model

Si ves que aparecen CSS e Internet Explorer en la misma frase vete haciendo café. Como decía en el primer tutorial, la forma en que interpretan las medidas los distintos navegadores te hará llevarte las manos a la cabeza más de una vez, pero la forma en la que las interpreta Internet Explorer merece darle de comer aparte. Estupendo artículo para enfrentarse a este problema.

4. Specifics on CSS Specificity

No me gusta el color de este enlace así que voy a cambiarlo en la hoja de estilos [...] ¿Pero qué? [...] ¿Por qué demonios sigue saliendo en rojo si lo acabo de cambiar? Pues probablemente porque en algún otro lugar le hayas dicho al navegador que ese enlace va en rojo y o cambias las prioridades o te puedes armar un buen jaleo. De eso va este tutorial: de qué propiedades de tu hoja de estilos valen más que otras o cómo interfieren entre sí.

5. Faux Columns

Cualquier tutorial que venga de A List Apart es de calidad. En esta ocasión comentan algunos trucos para conseguir que una columna se extienda verticalemente más allá de su contenido. Muy útil cuando tenemos un diseño tipo blog con una columa de dimensión variable que cambia según el tamaño de los post y otra que es siempre igual (la barra lateral) pero que queremos que “acompañe” a la principal.

6. Sexy Ordered Lists with CSS

Algo tan sencillo como darle estilo a una lista ordenada numéricamente pero separando el estilo de los números de los elementos de la lista. Se puede ver un ejemplo del resultado.

7. Divitis. What is and How to Avoid it.

Si vienes de diseñar con tablas seguro que el maravilloso mundo del

te atrapa y te pones a “enmarcar” todos los trocitos de tu web con divisiones. Esto es la divitis y la mayoría de las veces no es necesario. A mí me ha pasado muchas veces que por no saber darle estilo a una lista o a una imagen, la metía dentro de un
y le daba formato a este. Pues como te imaginarás hay formas mucho mejores de hacerlo.

8. Using background-image to replace text

Una clásico. Si aparte del CSS te interesa un poco el mundo del SEO sabrás que aunque pongas un maravilloso logo hecho en Photoshop de tu negocio en la web, convendría que ese logo estuviera acompañádo de un

con el nombre de la empresa en el código HTML. ¿Cómo hacemos para que no se muestre el texto del

pero sí el logo? Hay diversas técnicas con pros y contras discutidas en el tutorial.

9. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

A mí ya me costó en su día lo de usar una única imagen y que al pasar el ratón por encima cambie pero es que de un tiempo a esta parte lo que optimiza la carga de tu sitio web es meter la mayor cantidad posible de iconos en una única imagen y jugar con la posición de esta. Muchos sitios como Google que necesitan un tiempo de carga muy rápido usan ya esta técnica. Al final del tutorial tienes más ejemplos con Facebook o Google Reader.

10. How to create CSS Menu using Image Sprites

Enlace a la caché de Google porque el original no tira bien. En la línea del anterior, cómo crear un menú clásico de navegación de un sitio web con efectos y una única imagen.

11. 10 Examples of Beautiful CSS Typography and how they did it…

De primeras cuando uno se pone a jugar con la tipograf’ia en una hoja de estilos piensa que no tiene muchas posibilidades pero la verdad es que con un poco de imaginación y creatividad se pueden hacer vriguerías desde la hoja de estilos. Aquí tienes unos cuantos ejemplos.

12. CSS Shorthand Guide

Una guía de ¿bolsillo? con técnicas para reducir el tamaño de tu hoja de estilos agrupando diversas propiedades en un única línea. A veces no hace falta que el color, la posición, el tamaño y más cosas vaya cada una por su cuenta. Podemos agruparlas todas y así seguir mejorando la velocidad de carga de nuestro sitio web.

13. Push Your Web Design Into The Future With CSS3

Y con todo lo que te ha llevado a ti aprender CSS2 y ahora resulta que tienes que cambiarlo a CSS3 . No te preocupes, la evolución suele traer muchas más ventajas que inconvenientes así que si quieres aprender cómo poner sombras, transparencias o usar tipografías personalizadas todo a través de CSS aquí aprenderás cómo.

14. How to use headings in HTML

Muy muy sencillo y muy recomendado también con los interesados en el SEO ya que un uso correcto de los encabezamientos en el código HTML es muy buena práctica de cara a Google y otros buscadores.

15. 10 HTML tag crimes You Really Shouldn’t Commit

Apuesto lo que sea a que si llevas menos de un mes con CSS hasta comentido al menos 8 de estos 10 errores. Muchos provienen de que en HTML+CSS al mismo objetivo se puede llegar por distinos caminos pero es no significa que sean todos igual de buenos. Una artículo estupendo


Dummy Image: el Loren Ipsum de las imágenes

Loren Ipsum no es otra cosa que el comienzo de un texto en latín que usan la mayoría de diseñadores web cuando tienen que rellenar espacio en un sitio web que aún está en construcción. En vez de ponerte a inventar palabras, coges un texto predefinido y te ahorras un par de neuronas.

Pues en el Tumblr de Iván lasso descube Dummy Image Generator que hace lo mismo pero con imágenes. ¿Cómo es esto?

Vale, suponte que necesitas colocar en un sitio una imagen de 300 x 250 pixels que aún no sabes cómo será. Pues en el código de tu página web pones:

Y te saldrá algo como esto:

imagen

Para otros ejemplos sólo tienes que cambiar las dimensiones de la línea código (donde pone 300×250) y listo.