Posts on CSSLab

De Design System a Instruction System

Sat, 28 Mar 2026 01:08:25 +0000

¿Siguen siendo necesarios los Design Systems en la era de agentes de IA?

Durante la última década, los design systems se consolidaron como un pilar fundamental en el desarrollo de productos digitales. Empresas como Google, IBM y Shopify demostraron que la estandarización de componentes, patrones y guías visuales no solo mejoraba la consistencia, sino también la velocidad de desarrollo y la colaboración entre equipos.

Sin embargo, hacia 2025–2026 emerge una nueva pregunta: ¿siguen siendo necesarios los design systems en un contexto donde agentes de IA pueden generar interfaces completas a partir de instrucciones bien definidas?

El rol histórico del Design System

Un design system tradicional incluye:

Librerías de componentes reutilizables
Tokens de diseño (colores, tipografía, spacing)
Guías de UX/UI
Documentación y buenas prácticas
Integración con herramientas de desarrollo (Storybook, Figma, etc.)

Su objetivo principal es reducir la ambigüedad y evitar inconsistencias en productos complejos. Algunos buenos ejemplos son:

El cambio de paradigma: IA + instrucciones (skills)

Con la adopción masiva de modelos generativos y agentes especializados, el flujo de desarrollo está cambiando:

Antes: Diseño → Figma → Design System → Implementación manual

Ahora: Prompt / Skill → Agente IA → UI generada → Iteración

Herramientas emergentes como v0, Lovable y Bold permiten generar interfaces completas (React, Tailwind, etc.) a partir de descripciones declarativas.

Esto introduce un nuevo concepto clave: las instrucciones estructuradas (skills) como fuente de verdad.

Lo que la IA puede reemplazar parcialmente

Componentes repetitivos
Variantes visuales
Boilerplate frontend

Lo que NO desaparece (todavía)

Consistencia semántica profunda
Decisiones de diseño organizacionales
Gobernanza
Experiencia compleja

De Design System a Instruction System

Antes: Design System como código

<Button variant="primary" size="lg" />

Ahora: Design System como instrucción

Usa botones primarios con alto contraste, bordes redondeados y feedback accesible.

Un ejemplo en la práctica:

Enfoque tradicional

import { Button } from "@company/ui";

<Button variant="primary">Guardar</Button>

Enfoque con IA

Genera un botón principal para acción crítica, con:
- alto contraste
- accesibilidad WCAG AA
- padding amplio
- feedback visual en hover

Las ventajas que aparecen con el enfoque de desarrollo con asistencia de Inteligencia Artificial:

Velocidad: menor fricción inicial, ideal para prototipos y MVPs.
Flexibilidad: no estás limitado a un set rígido de componentes.
Adaptabilidad: IA puede adaptar la UI según el caso de uso.

Al mismo tiempo, surger riesgos y desafíos:

Deriva de diseño (Design Drift): sin reglas claras, cada generación puede divergir.
Falta de estandarización: difícil mantener coherencia en equipos grandes.
Dependencia del prompt: resultados inconsistentes si las instrucciones no son precisas.
Auditoría y mantenimiento: más difícil rastrear decisiones que antes estaban codificadas.

Hacia un modelo híbrido

La propuesta que me surge es asignar responsabilidades diferentes a cada enfoque, no se reemplaza completamente el design system, sino que se combinan ambos mundos:

Núcleo estable (Design System ligero)

Tokens Principios de diseño Componentes críticos

Capa dinámica (IA + skills)

Generación de UI Variantes Experimentación

Ejemplo de arquitectura híbrida en un proyecto:

/design-system
  tokens.json
  core-components/

 /ai-skills
  button.md
  form.md
  layout.md

Últimas palabras

No, los design systems no han muerto. Pero su forma tradicional —como librerías rígidas de componentes— está siendo desafiada. Estamos transitando hacia un modelo donde:

La intención reemplaza a la implementación
Las instrucciones complementan al código
Los agentes de IA actúan como intérpretes del sistema de diseño

El futuro no es design system vs IA, sino:

Design Systems como contratos semánticos, ejecutados por agentes inteligentes.

Para leer más:

CSS View Transitions: guía técnica de @view-transition

Fri, 06 Feb 2026 01:08:25 +0000

El módulo CSS View Transitions introduce una forma nativa de crear animaciones fluidas entre diferentes vistas de una aplicación web. A diferencia de soluciones basadas en JavaScript o librerías externas, esta especificación permite definir transiciones visuales directamente desde CSS, integrándose con la View Transition API del navegador.

El objetivo principal es mejorar la continuidad visual al cambiar de estado dentro de una página (SPA) o al navegar entre documentos del mismo origen (MPA), manteniendo un rendimiento óptimo y una implementación declarativa.

¿Qué es @view-transition?

@view-transition es una CSS at-rule que permite a un documento participar en transiciones de vista cuando ocurre una navegación o un cambio de estado compatible. Su uso es especialmente relevante en transiciones cross-document, donde dos páginas distintas comparten una animación de entrada y salida.

Esta regla no define animaciones por sí sola, sino que habilita el contexto en el que el navegador genera pseudo-elementos especiales (::view-transition-*) que pueden ser animados con CSS.

@view-transition {
  navigation: auto | none;
  types: none | <custom-ident>#;
}

See the Pen CSS @view-transition example by Jorge Epuñan (@juanbrujo) on CodePen.

Propiedades

navigation
- auto: habilita automáticamente transiciones en navegaciones same-origin.
- none: desactiva las transiciones de navegación.
types
- Permite definir uno o más identificadores de tipo para personalizar transiciones específicas.
- Estos tipos pueden ser utilizados junto a pseudo-clases como :active-view-transition-type().

Ejemplo:

En cada página que participa en la transición se declara la regla:

@view-transition {
  navigation: auto;
}

Luego se definen animaciones usando los pseudo-elementos generados por el navegador:

@keyframes fade-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

::view-transition-old(root) {
  animation: fade-out 250ms ease forwards;
}

::view-transition-new(root) {
  animation: fade-in 250ms ease forwards;
}

Soporte actual en navegadores

El soporte para CSS View Transitions ha avanzado rápidamente, pero aún no es completamente uniforme:

Chrome / Edge: Soporte estable para view transitions. Las transiciones cross-document están disponibles en versiones recientes.
Safari (macOS / iOS): Soporte incorporado a partir de Safari 18.
Firefox: Implementación progresiva en versiones recientes.
Fallback: En navegadores sin soporte, la navegación o el cambio de estado ocurre normalmente sin animación.

No existe actualmente una forma estandarizada de detectar soporte de @view-transition usando @supports.

Limitaciones técnicas

Restricción de mismo origen: Las transiciones entre documentos solo funcionan si ambos pertenecen al mismo origen.
Control limitado del ciclo de vida: El navegador gestiona la captura y el renderizado de vistas, lo que limita el control fino en ciertos escenarios.
Compatibilidad parcial de types: Algunas características avanzadas aún no están disponibles en todos los navegadores.
Necesidad de fallback: Siempre se recomienda diseñar la experiencia considerando navegadores sin soporte.

Referencias

MDN: @view-transition
CSS-Tricks: Toe Dipping Into View Transitions

<meter> y <progress> de HTML5

Sun, 04 May 2025 01:08:25 +0000

Uso y diferencias de cómo usar meter y progress de HTML5

HTML5 introdujo nuevas etiquetas que permiten construir componentes de interfaz de usuario comunes sin necesidad de JavaScript adicional. Dos de estos elementos son <progress> y <meter>, útiles para mostrar progreso de tareas y mediciones dentro de un rango conocido, respectivamente. Al final del artículo tendrás un ejemplo aplicado.

La etiqueta `<progress>`:

<progress> permite crear fácilmente barras de progreso en aplicaciones web. Es útil para mostrar el avance de tareas como la carga de archivos o la navegación en formularios de múltiples pasos.

<progress value="50" max="100"></progress>

Hay dos atributos que debe especificar en un elemento <progress>: max y value. El atributo max especifica el total, y el atributo value especifica cuánto del total se ha completado.

Si se omite el atributo value, el navegador mostrará una barra de progreso indeterminada, útil cuando no se conoce el tiempo exacto de finalización.

Para personalizar el estilo de las barras de progreso, se pueden utilizar pseudo-elementos específicos para cada navegador. A continuación, se muestra un ejemplo que funciona en navegadores modernos:

progress {
  appearance: none;
  width: 100%;
  height: 20px;
  border-radius: 4px;
  background-color: #eee;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

A la fecha de publicación de este artículo, para customizar los estilos de progress se deben usar pseudo-clases CSS específicos:

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 4px;
}

progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 4px;
}

progress::-moz-progress-bar {
  background-color: blue;
  border-radius: 4px;
}

Esto crea una barra de progreso con esquinas redondeadas y un color verde para indicar el progreso.

La etiqueta `<meter>`:

<meter> se utiliza para representar una medición dentro de un rango conocido, como el uso de espacio en disco o la temperatura. A diferencia de <progress>, que muestra el avance dentro de un total, <meter> indica un valor dentro de un rango definido.

<meter min="0" max="100" low="30" high="70" optimum="50" value="45"></meter>

Sus atributos son:

min y max: Definen el rango mínimo y máximo.
low y high: Indican los límites para valores bajos y altos.
optimum: Especifica el valor óptimo dentro del rango.
value: Representa el valor actual.

El navegador ajustará el color de la barra según el valor actual y los atributos definidos.

Al igual que con <progress>, se pueden aplicar estilos personalizados a <meter> utilizando pseudo-elementos específicos:

meter {
  appearance: none;
  width: 100%;
  height: 20px;
  border-radius: 4px;
  background-color: #eee;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

meter::-webkit-meter-bar {
  background-color: #eee;
  border-radius: 4px;
}

meter::-webkit-meter-optimum-value {
  background-color: green;
  border-radius: 4px;
}

meter::-webkit-meter-suboptimum-value {
  background-color: orange;
  border-radius: 4px;
}

meter::-webkit-meter-even-less-good-value {
  background-color: red;
  border-radius: 4px;
}

meter::-moz-meter-bar {
  border-radius: 4px;
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background-color: green;
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background-color: orange;
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background-color: red;
}

Esto aplica colores diferentes según el valor actual del <meter>, facilitando la visualización de si el valor es óptimo, subóptimo o crítico.

Demo:

See the Pen Untitled by Jorge Epuñan (@juanbrujo) on CodePen.

JavaScript:

Para aplicaciones que requieren actualizaciones en tiempo real, como barras de progreso en directo o mediciones dinámicas, puedes actualizarlos dinámicamente utilizando JavaScript mediante event listeners:

function updateProgress(value) {
  document.getElementById('uploadProgress').value = value;
}

setInterval(function() {
  let currentValue = Math.min(100, document.getElementById('uploadProgress').value + 1);
  updateProgress(currentValue);
}, 1000);

Compatibilidad con navegadores:

Los elementos <progress> y <meter> son compatibles con todos de los navegadores modernos. Sin embargo, la compatibilidad con pseudo-elementos para dar estilos puede variar entre navegadores.

CSS text-wrap: La nueva forma de controlar saltos de línea

Sun, 27 Apr 2025 01:08:25 +0000

El mundo del diseño web está en constante evolución, y CSS sigue introduciendo propiedades que nos dan mayor control sobre la presentación del texto. Una de las adiciones más interesantes recientemente es la propiedad text-wrap, que permite a los desarrolladores definir con precisión cómo se comportan los saltos de línea en nuestros textos, algo que se necesitaba hace mucho tiempo.

¿Qué es text-wrap?

La propiedad text-wrap está diseñada para gestionar el comportamiento de los saltos de línea en bloques de texto, ofreciendo valores como wrap, nowrap, balance y stable. Cada uno de estos valores proporciona diferentes opciones para controlar cómo el texto se adapta a los diferentes tamaños de pantalla.

El problema de los textos solitarios

Uno de los problemas comunes en el diseño web responsive es la aparición de palabras solitarias en la última línea de un párrafo, especialmente en encabezados. Estas palabras aisladas (conocidas como huérfanas en tipografía) pueden afectar negativamente el equilibrio visual y la legibilidad. Tradicionalmente, resolver esto requería soluciones con JavaScript o técnicas de CSS como agregar un expacio a través de   entre las últimas palabras del texto. Pésimas soluciones.

text-wrap: pretty

El valor pretty de la propiedad text-wrap está diseñado específicamente para evitar estas palabras solitarias. Cuando se aplica, el navegador ajusta automáticamente el texto para asegurar que al menos dos palabras aparezcan en la última línea de un párrafo o encabezado.

h1 {
  text-wrap: pretty;
}

Esto es particularmente útil para mejorar la apariencia de títulos y encabezados en diseños responsive, donde el ancho del contenedor puede cambiar significativamente según el dispositivo.

text-wrap: balance

Otro valor interesante es balance, que distribuye las palabras de manera más equilibrada entre todas las líneas. Esto es especialmente valioso para bloques de texto cortos como titulares, donde se busca una distribución visual óptima.

h2 {
  text-wrap: balance;
}

Demo

Preferí no hacer una demo propia porque ya hay una muy completa en CodePen:

See the Pen text-wrap: pretty by Jen Simmons (@jensimmons) on CodePen.

Combinando con otras propiedades de texto

La propiedad text-wrap se complementa perfectamente con otras propiedades de CSS para control tipográfico, como hyphens, word-break y overflow-wrap. Juntas, estas propiedades ofrecen un toolkit completo para optimizar la legibilidad y apariencia de nuestros textos en la web.

Soporte en navegadores

El soporte para text-wrap ya está disponible en varios navegadores modernos:

text-wrap: balance está soportado en Chrome y navegadores basados en Chromium desde la versión 113, Safari y Firefox también han incorporado soporte para esta propiedad.
text-wrap: pretty está disponible en Chrome 114+ y Edge 114+

¿Qué es @container en CSS y cómo se usa?

Wed, 09 Apr 2025 01:08:25 +0000

En el mundo del diseño web, la adaptabilidad es clave. Ya tenemos @media para adaptar nuestros estilos a distintos tamaños de pantalla, pero ¿qué pasa si queremos que un componente cambie su estilo según el tamaño de su contenedor y no del viewport? Ahí entra en juego una nueva y poderosa herramienta: @container.

En este artículo te explico qué es, cómo se usa y te muestro ejemplos prácticos para que empieces a usarlo hoy mismo.

¿Qué es @container?

@container es una regla de CSS (también conocida como Container Queries) que permite aplicar estilos a un elemento en función del tamaño de su contenedor, no del tamaño de la ventana del navegador.

Esto permite que los componentes sean realmente adaptables, lo cual es muy útil en diseños modulares y reutilizables. Antes de usarlo, necesitas:

Definir qué elemento actuará como contenedor usando la propiedad container-type.
Escribir reglas @container dentro del CSS.

.card {
  container-type: inline-size;
}

Esto le indica al navegador: Observa el ancho de este elemento para aplicar las reglas siguientes.

Ejemplo básico: Cambiar layout de una tarjeta

Supongamos que tienes una tarjeta .card con un título y una imagen. Puedes hacer que el diseño cambie si el contenedor es más ancho de 400px:

HTML:

<div class="card">
  <img src="foto.jpg" alt="Foto">
  <h2>Título de la tarjeta</h2>
</div>

CSS:

.card {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }

  .card img {
    width: 100%;
    max-width: 150px;
  }
}

En este ejemplo, si el contenedor es más ancho de 400px, imagen y texto dentro de la tarjeta se ordenan en columnas.

Consultas más específicas: container-name

Si necesitas aplicar reglas a un contenedor específico, puedes usar container-name y hacer consultas específicas:

CSS:

.sidebar {
  container-type: inline-size;
  container-name: sidebar-container;
}

@container sidebar-container (min-width: 300px) {
  .widget {
    display: flex;
  }
}

Demo:

See the Pen Untitled by Jorge Epuñan (@juanbrujo) on CodePen.

Transparencia a un color declarado como variable en CSS

Thu, 19 Dec 2024 01:08:25 +0000

Una tarea común en el diseño es aplicar transparencia a un color, y con técnicas más actuales, colores definidos como variable. Esto puede lograrse con pre-procesadores CSS y nativamente utilizando combinaciones de sintaxis modernas como rgba(), hsla() y otros ya soportados ampliamente. Este artículo explica cómo manejar esta necesidad técnica con ejemplos prácticos.

Definir Variables de Color en CSS

Las variables CSS se declaran dentro de un selector, generalmente :root para que estén disponibles globalmente:

:root {
  --color-principal: #3498db; /* Azul claro */
}

Esta declaración permite reutilizar --color-principal en cualquier lugar del código.

La transparencia en CSS

Para agregar transparencia a un color, CSS ofrece funciones como:

rgba(): Permite especificar colores en el formato RGB con un canal alfa para controlar la opacidad:

color: rgba(52, 152, 219, 0.5); /* color azul con 50% de opacidad */

hsla(): Similar a rgba(), pero usa el modelo de color HSL (Hue, Saturation, Lightness):

color: hsla(204, 70%, 53%, 0.5); /* azul con 50% de opacidad */

Como notarás, para definir colores utilizando rgba() y hsla() necesitas convertir la variable en hexacromía, lo que implica un nuevo impedimento. Pero encontré una propiedad que soluciona mi problema a la perfección:

La función color-mix()

A partir de CSS Color Module Level 5, color-mix() permite mezclar colores en hexacromía declarados como variables directamente con transparencia:

:root {
  --color-principal: #3498db;
}

.elemento {
  background-color: color-mix(in srgb, var(--color-principal) 50%, transparent); /* variable CSS con 50% de opacidad */
}

Vite + Vue + Ant Design System + custom design

Sun, 18 Dec 2022 01:08:25 +0000

En un Design System que estoy trabajando actualmente, el stack consiste en: Vite, Vue, Ant Design System (Antdv) y otras librerías. Mi intención es customizar Antdv con tal de no crear nuevas clases o sobreescribir estilos sino nativamente crear la identidad gráfica, a través de custom variables de Antdv.

El proceso no fue corto y finalmente encontré la receta, la que muestro en este artículo con tal de ayudar a alguien más.

Desde ya dejo el enlace al repositorio funcional donde puedes verificar la funcionalidad.

El proceso

Instala con NPM, Yarn o el bundler que quieras: Vite, Vue, Ant Design System Vue (no mostraré este proceso ya que asumo que sabrían como hacerlo en su proyecto actual o nuevo). Es importante que consideres utilizar la librería unplugin-vue-components la que permite que puedas importar Antdv por módulos sin tener que declararlos manualmente, sino lo hace automágicamente. Esta es la configuración recomendada para esta stack. Además, necesitarás instalas la librería Less.

Instalación original

La configuración

Aquí la receta especial. En tu archivo vite.config.(ts|js) verifica lo siguiente:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    ...
    Components({
      resolvers: [AntDesignVueResolver(
        { importStyle: "less" }  // importante
      )],
    }),
  ],
  css: {
    preprocessorOptions: { // modifica aquí las variables de Less que necesites
      less: {
        modifyVars: {
          "primary-color": "#1DA57A",
          "link-color": "#1DA57A",
          "border-radius-base": "16px",
        },
        javascriptEnabled: true,
      },
    },
  },
});

Antdv modificado

Puedes verificar todas las variables Less de Antdv en su repositorio.

Ver demo

Pensamientos del futuro próximo

Fri, 17 Dec 2021 01:08:25 +0000

Este artículo contiene pensamientos, experiencias personales y mucha observación de comportamiento. Espero sea útil.

Tenía reservada una hora médica y al pagar le pregunto a la asistente: «¿Para reservar un examen radiológico lo puedo hacer aquí mismo?» A lo que me responde: «No señorito, lo hace en el piso 1 o por internet o envía un correo a qwerty@examenes.xyz». Me siento a esperar mi hora y observo un tótem donde con tu identificación obtienes un número para que te atienda un humano, como lo acababa de hacer. Observo más gentes con sus teléfonos móviles esperando.

Recordé que hace unos días le pedí a mi sobrino de 13 años que le buscara por internet a su abuela (mi mamá) una receta de cocina que quiere hacer. Le pedí además si lo hacía en su computador (tiene uno para jugar, con más luces que teclas claro) así podría leer mejor las recetas. Me dijo que mejor en el celular y lo proyectaba en el televisor para que se viera grande. «Gracias» – le dije y me preguntó finalmente:

«¿Lo busco en Youtube?»

Ambas historias las relacioné recién sentado esperando al médico. Nuestro oficio tiene las horas contadas. Programar, diseñar, crear para web ya no puede ser así. No va a ser tal y como lo hemos hecho.

Si piensas, adultos de más de 60 años apenas entran a la web por sus móviles y utilizando aplicaciones (de comunicación) básicamente; la juventud de hasta 16 años seguro ni conoce un browser (se lo preguntaré a mi sobrino). Los que tenemos entre 23 y 55 años probablemente utilizamos computadores para trabajar (ofimática, programar, utilizar algún sistema interno hecho para Internet Explorer, enfin) y aún nos son útiles. Pero en el dia-a-dia, apenas utilizamos el navegador en nuestros mismos teléfonos.

Sentado pensando esto mismo intenté agendar una hora para el examen antes mencionado utilizando Safari iOS y me costó un montón, y finalmente siendo un heavy-user no lo terminé.

Lo que hacemos día a día tiene que cambiar pronto, para bien y no para peor.

Pensar en la web como un medio de propagación de datos y ya no de despliegue de información.

Olvidarse del browser y comenzar a pensar en motores de renderizado.

Aplicar finalmente webapps o aplicaciones híbridas como el fin último y no como un medio más. Recordé cuando en MacOS X aprendí a hacer widgets, con HTML, CSS y JavaScript te permitía acceder algunas funciones del filesystem del sistema operativo y a través de éste a algunas funcionalidades del hardware. Luego creabas un manifest.json le agregabas a la carpeta la extensión .widget y ya estaba empaquetado y funcional para al doble-clic activarse. Las PWA llegaron mucho después.

Tanto hardware diferente que podrían resumirse en pocos que interactúen con las personas directamente (cosas de películas pero que sabemos ya son realizables). Imaginé ese mismo tótem con mi identidad me mostró quien era y con que doctor y hora era mi atención, podría desplegar el medio de pago, seleccionar el seguro médico y entregarme el valor final y cobrarlo con mi tarjeta. Todo por API’s. Nada del otro mundo.

Olvidarse de crear interfaces responsive sino que dedicadas al motor de renderizado, quien se encarga de mostrarlo correctamente en el dispositivo adecuado (sea un teléfono celular, un tótem de auto-atención o una aplicación de red social.

Y que finalmente las empresas de software dejen de gastar tiempo, dinero y talento en frameworks librerías y herramientas sino en estandarizar y actualizar el código y las reglas que tendremos que aplicar y que tienen que soportar.

Esta web tan divergente tiene que llegar a un fin, para nuestro bien, ya no es sano.

Pienso que pronto ya nadie usará Internet tal como la hemos construido. Tiene los dias contados, ya no tiene sentido.

Pasamos de una web de los ’90 lleno de información a una web del 2021 totalmente volcada a la multimedia y a vender lo que sea, con tal de monetizar fácil y rápidamente. No veo una vuelta atrás en esto.

Pienso que ya no necesitamos esa web, que quede como un rezago como aún lo son una BBS, Gopher, IRC y porque no los blogs y el mismo e-mail.

Evento clear de un input search

Sun, 20 Dec 2020 01:24:38 +0000

HTML5 hace años incorporó varios nuevos tipos de input, entre ellos el search. Este nuevo input -aparte de semántico- coloca una ✕ para borrar el valor ingresado en el input y comenzar de nuevo con la búsqueda.

En sus comienzos este comportamiento fue ignorado por muchos desarrolladores ya que era propietario de Safari (Webkit) pero actualmente con soporte más amplio, me ví en el caso de tener que utilizar este evento clear, con el siguiente resultado: existe un nuevo evento para este input: search.

Con el siguiente simple código veremos su comportamiento:

<input type="search" id="searchbox" />

document.getElementById("searchbox").addEventListener("search", function(event) {
  console.log('search X clicked');
});

Ver ejemplo

Detectar dark-mode en browsers

Wed, 16 Sep 2020 15:13:06 +0000

Hace ya varios meses que diferentes sistemas operativos y aplicaciones traen como opcional el dark-mode, donde todo lo claro se ha vuelto oscuro. ¿Moda, accesibilidad? Realmente no he indagado, pero eso trae pequeños problemas en cuanto al uso de navegadores web. Me topé con uno en específico que me llevó a escribir este artículo.

Hechos:

Navegando por Internet y con varios enlaces abiertos, veo que un favicon de color negro apenas se nota en el tab de color gris oscuro.

Pequeño problema pero solucionable. Hay 2 técnicas para detectar el dark-mode en el browser: con CSS y con JS. Veamos ambos códigos:

CSS:

/* Dark-mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

/* Light-mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

CSS Dark-mode

JS:

Para hacerlo con JavaScript debes detectar el mismo @media (prefers-color-scheme: dark) para luego retornar true/false y hacer lo que quieras con el DOM:

window.matchMedia('(prefers-color-scheme: dark)').matches

Por ejemplo, en el siguiente código cambiamos el favicon.ico si tiene el modo dark habilitado:

const favicon = document.querySelector('#favicon')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  favicon.href="favicon-dark.ico"
}

Dark-mode JS

Evitar el spam del mailto (el que he utilizado)

Fri, 08 Mar 2019 13:36:50 +0000

Spambots aman scrapear páginas para sacar emails para, evidentemente, mandar email spam. En este corto artículo presentaré la técnica que he utilizado y ha sido efectivo, además la encuentro simple entre varias que analicé. Incluye HTML, CSS y opcional (puedes seguir utilizando href=“mailto:nombre@email.com” un poco de JavaScript para hacerle aún más difícil el trabajo al spambot.

Tenemos un clásico enlace con el email:

<a href="mailto:nombre@email.com">nombre@email.com</a>

Tip 1:

Revertimos el texto con el email dentro de la etiqueta para volver a revertirlo con CSS:

<a href="mailto:nombre@email.com" class="reverse">moc.liame@erbmon</a>

.reverse {
  unicode-bidi: bidi-override;
  direction: rtl;
}

Tip 2:

Quitamos el mailto="" el cual también puede ser scrapeado y con un poco de JavaScript hacemos accesible el poder utilizarlo para abrir un cliente de correo al clic:

<a href="#" class="reverse" data-name="nombre" data-domain="email" data-tld="com" onclick="window.location.href = `mailto:${this.dataset.name}@${this.dataset.domain}.${this.dataset.tld}`; return false;">moc.liame@erbmon</a>

Si no te gusta el onclick="" en el markup puedes generar una función con el mismo comportamiento.

Ver resultado final:

Codepen

Link ejemplo

Reset de todas las propiedades CSS de selectores con una sola propiedad: all

Fri, 09 Nov 2018 14:03:41 +0000

Existe una propiedad CSS que remueve todas los estilos aplicados por el browser a un selector y la deja sin nada, desnuda y cruda. No me refiero a un reseter, menos a un normalizer. La propiedad all: unset; aplicada a un selector, por ejemplo, un <input />, <button>, <select> y muchos otros que tienen diferencias de render entre browsers, puedes remover todo estilo aplicado por defecto y crear los tuyos de cero sin tener que sobre-escribirlos.

Un ejemplo a continuación con los siguientes elementos HTML:

<button>button</button>
<input type="text" value="input">
<select>
  <option>select</option>
</select>
<a href="#">link</a>

Codepen

Link ejemplo

Crearemos una clase CSS para aplicar el estilo a las etiquetas y ver el resultado esperado:

.unstyle {
  all: unset;
}

Codepen

Link ejemplo

Al aplicar all: unset; todo parece similar, solo texto los cuales puedes aún interactuar (button, input, select y link (si tuvieran algo). Ahora podemos crear estilos base para, por ejemplo, .button donde el mismo estilo se aplique a todas las etiquetas que tengan esta clase:

Codepen

Link ejemplo

Como observan, no necesitamos quitar el text-decoration: underline; del o el border: 0; del <button>, simplemente escribimos el CSS que queremos para cualquier etiqueta que necesitamos se comporte como un botón.

Últimas observaciones

Como consejo, no se les ocurra utilizar esta propiedad como su nuevo reseter / normalizar o algo por el estilo:

body {
  all: unset;
  ...
}

Esta propiedad es para situaciones puntuales, como las que acabo de mostrar. Quizás para listas (ordenadas, desordenadas o de definición) y algunos otros elementos puntuales. Quizás sea útil para crear componentes de vista (UI components) en sus propias guías de estilos.

Soporte:

A la fecha de publicado este artículo no se ve mal:

Link:

Autocorrección de input en móviles

Tue, 21 Aug 2018 13:48:38 +0000

¿Se han enfrentado en un formulario al ingresar texto a un input el dispositivo te ofrece autocorregir lo ingresado? Es fastidioso con campos de password por ejemplo o cuando quieres ingresar un email o un nombre de usuario. Además, suelen capitalizar las primeras palabras. Bueno, se puede deshabilitar fácilmente utilizando 2 simples atributos:

autocorrect=“off”

<input type="text" name="nombre_input" autocorrect="off">

autocapitalize=“off”

<input type="text" name="nombre_input" autocapitalize="off">

Ver ejemplo (en móvil)

Soporte:

Por ahora sólo iOS en Safari Mobile y Chrome. Más info

Centrando verticalmente IV: CSS Grid

Mon, 18 Dec 2017 21:20:33 +0000

Con CSS Grid a la vuelta de la esquina en cuanto a soporte cross-browser, podemos ya considerarlo para centrar horizontal y verticalmente. De todos los artículos escritos anteriormente esta es lejos la manera más simple y fácil de lograr centrar un elemento respecto de su contenedor.

HTML:

<div class="container"> 
  <p class="centered">Centrado con CSS Grid</p>
</div>

.container {
  height: 100%;
  display: grid;
}

.centered {
  margin: auto;
}

Codepen

Link ejemplo

CSS3 @supports

Mon, 04 Dec 2017 14:05:39 +0000

CSS @supports

CSS3 trae consigo un nuevo selector como parte del grupo condicional feature queries: @supports. Esta regla (no es en sí un selector) prueba si el browser soporta cierto par de propiedad: valor y los operadores AND, IN, OR.

Uso:

Por ejemplo, si se quiere determinar si el browser soporta CSS Grid, se utiliza la nomenclatura como a continuación:

@supports (display: grid) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
  }
  .column-one {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  ...
}

Ejemplo JS Bin

Para algo más complejo, en el siguiente ejemplo preguntamos si el browser no soporta CSS Grid para entregar un fallaback:

@supports not (display: grid) {
  div { float: left; }
}

Soporte:

Actualmente su soporte es amplio en browsers modernos, salvo a la fecha de la excepción de IE11 el cual no tienen ningún soporte.

Cuestionamiento:

Esto es algo personal, pero este feature querie en específico me causa un regreso a la web que era reinada por los browsers y no por los estándares. Escribir código para navegadores específicos y dejar sin soporte a otros que no tienen las mismas características es volver un poco a la época de los Applets, prefijos -webkit -moz y otros. Ojalá sea sólo una impresión mía.

Input vacío con CSS

Wed, 05 Jul 2017 14:28:44 +0000

Reto: diseñador envió una interfaz donde un color diferente no sólo al placeholder, sino al background-color del mismo input como se ve a continuación:

Me dije:

OK, puedo cambiarle el color al texto del placeholder pero no conozco una propiedad CSS que me diga si el input está vacío para darle el color de fondo al input. Y no quiero meter JS sólo para eso. Investigaré.

:placeholder-shown

Esta propiedad es aún un Working Draft pero actualmente tiene soporte para Firefox, Chrome, Safari, Opera y los browsers móviles más populares. Si, IE no está soportado aún pero qué diablos.

A continuación, el CSS con el cual logré lo que el diseño se proponía:

input {
  display: block;
  width: 100%;
  padding: .6em .8em;
  margin-bottom: .5em;
  font-size: 1.1em;
  color: #1C2E36;
  border: 1px solid #D6E1E4;
}

input:focus {
  border-color: #00BA68;
  background-color: #FAFBFC;
  outline: 0;
}

input:placeholder-shown {
  background-color: #FAFBFC;
}

input::-webkit-input-placeholder {
  color: #A4B3B7;
}

Ejemplo en JS Bin

De por qué el silencio

Thu, 20 Apr 2017 12:43:36 +0000

Hace muchos meses que CSSLab no se actualiza en cuanto a su contenido. Tampoco en su estructura. Lo último que hice fue cerrar las inscripciones a CSSLab Weekly y las razones fueron entregadas a quienes recibían esos emails semanalmente, y tiene que ver con lo que escribo en este artículo personal. Entonces, llego a este momento en que quiero transparentar qué ha sucedido y cuál sería la el estado de este sitio que me ha dado tantas satisfacciones…

¿Qué pasó?

Muchas cosas. Básicamente tuve una crisis de pánico y stress muy elevado durante agosto – septiembre 2016. Claro que venía de antes, se acumulaba, pero se gatilló en esa época. Busqué ayuda médica -afortunadamente- y en ello sigo hasta hoy, varios meses después. Busqué en internet y el famoso devpression era una opción, pero lo mío no era eso, sino acumulación de stress -personal y profesional- y que se gatilló bajo ciertas circunstancias y me afectó la parte cognitiva de mi desempeño; en otras palabras, no podía resolver problemas como lo venía haciendo por tantos años. Me afectó en lo personal y en mi trabajo, ambas cosas muy importantes en mi vida. Me alejé médicamente de lo laboral por 2 meses prácticamente, y apenas toqué el computador. Hacía ejercicios, leía, cuidaba de mi huerto y de mi gato. No quería ver televisión o escuchar música; no quería ruído en general, ni ver gente. Tampoco ver ó tocar código fuente, siendo algo esencial en mi vida por tantos años. Ni imaginar las veces que quise mandar todo a la cresta y comenzar de nuevo, en otro rubro, y en otro lugar. Pero paciencia y buenos consejos fueron clave para mi positivo avance.

¿Y cómo sigo?

Estoy con ayuda médica -psiquiátrica-, psicológica y alternativas. Hago reiki, yoga, tomo flores de Bach y duermo con aromaterapia. Personalmente creo que la suma de todos ellos me han ayudado a avanzar mucho en poco tiempo. Amigos cercanos a quienes les conté desde el comienzo me han apoyado mucho con consejos, libros y palabras de apoyo y mucho ánimo, y que mi estado es mejorable 100%. Aunque no lo imaginé, mi condición era más común que creía y concluí que por más que contara lo sucedido, si no lo has vivido no podrías comprenderlo.

¿Y qué haré?

Parte del problema era dedicarme 100% a otros y 0% a mí persona y mis intereres propios. Desde entonces estoy dedicado 99% a mí y 1% a otros. Lamentablemente eso implica no actualizar CSSLab y seguir aprendiendo nuevas tecnologías sólo para mí, lo que me llena por el momento. Eso justifica la desactualización de este sitio, junto con la recuperación de la capacidad cognitiva para seguir aprendiendo y aplicando mis capacidades para resolver problemas. Veo un horizonte genial, he vuelto a hacer código y de mejor calidad, y las ganas que tengo de volver a ser el colaborador de antes crece cada día más.

Últimas palabras

Gracias por la paciencia. Si estas palabras te reflejan en algo tu estado actual, no temas en buscar ayuda. Por mi lado, en Twitter soy un poco más activo, agrego links y algunas palabras más interesantes para quienes me siguen. Pero estoy confiado que ya vendrán mejores momentos.

Gracias totales por leerme y principalmente por la paciencia. Nos leemos muy pronto.

Múltiples event listeners en JavaScript

Mon, 22 Aug 2016 21:08:06 +0000

En JavaScript, para agregar un evento a un selector ó un conjunto de ellos se utiliza comúnmente addEventListener() pero que tiene una sutil limitación: sólo puedes darle 1 evento a la vez.

¿Por qué querría agregar más de un evento a un elemento?

Suena a locura pero puede suceder, principalmente en selectores HTML para formularios. La última vez que lo necesité fue para un elemento input de tipo number el cual agrega flechas para cambiar el valor, por lo que puedes ingresar un número por el teclado ó utilizando las flechas. Con eso, necesité escuchar el evento keyup y change para poder hacer algo con ese valor posteriormente:

Ejemplo en JS Bin

/**
 * multipleEventsListeners.js
 * Add the capability to attach multiple events to an element, just like jQuery does
 * https://gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b
 */
 
function multipleEventsListeners(elem, events, func) {
  var event = events.split(' ');
  for (var i = 0; i &lt; event.length; i++) {
    elem.addEventListener(event[i], func, false);
  }
}

/*
Use: 
var input = document.querySelector('input');
multipleEventsListeners(input, 'keyup change', function(e){
  console.log(this.value);
});
*/

ES6:

function multipleEventsListeners(elem, events, func) {
  events.split().forEach(e => elem.addEventListener(e, func, false));
}

/*
Use: 
const input = document.querySelector('input');
multipleEventsListeners(input, 'keyup change', function(e) {
  console.log(this.value);
});
*/

Link:

EventTarget.addEventListener() en MDN

Etiquetas de título en HTML5

Wed, 17 Aug 2016 20:38:32 +0000

Ya estamos acostumbrados al estándar HTML5 hace años y lo utilizamos tranquilamente en nuestros proyectos web este 2016. Pero, ¿realmente conoces su uso y lo aprovechas? No basta con declarar un nuevo doctype; si no utilizas correctamente sus etiquetas será poco o nada el provecho que le sacarás al estándar.

En este artículo me enfocaré en el uso y reglas recomendadas en HTML5 para las etiquetas HTML para título de contenido, las que van del <h1> al <h6>.

Por mucho tiempo se consideró que una regla en HTML y el SEO era que cada página individual de un sitio debiese tener 1 sólo <h1&gt. Antes que eso, se utilizaba el logo / marca del sitio para colocar el nombre del sitio envuelto en ese <h1&gt con alguna técnica de image-replacement del momento.


  <body>
    <div id="header">
      <h1>Mi Sitio</h1>
    </div>
    <div id="content">
      <h2>Mi Título</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
  </body>

Un concepto importante que debemos entender es el de document outline:

El document outline es una estructura de un documento generado por los encabezados, títulos de formularios, títulos de tabs y cualquier otro punto de referencia apropiados para trazar el documento. El user agent puede utilizar esta información para generar por ejemplo, una tabla de contenido, y para tecnologías para asistir a discapacitados a través de dispositivos / browsers de accesibilidad.

Un outline común en HTML4 se muestra a continuación:


  <h1>Mi Sitio</h1>
  <h2>Sobre Mí</h2>
  <p>Lorem ipsum...</p>
  <h3>Mis Gustos</h3>
  <p>Lorem ipsum dolor sit amet...</p>
  <h2>Contáctame</h2>
  <p>...</p>

Lo que genera un outline:

Mi Sitio
1. Sobre Mí
  1. Mis Gustos
2. Contáctame

El concepto detrás del document outline en HTML5 sugiere que las etiquetas de título sean entendidas siempre con referencia a las etiquetas de seccionamiento incorporadas en esta versión del estándar. Las etiquetas <section>, <article>, <aside> y <nav>, pueden ayudar a crear una estructura más lógica en el document outline.

Los aspectos más importantes a considerar dentro del document outline en HTML5 para entender realmente cómo aplicar las etiquetas de título son los siguientes:

Sectioning root (sección raíz)

Es un contenedor que provee el scope para las secciones definidas dentro de él. Cada uno tiene un diferente outline y la etiqueta es considerado el superior de todos. Otras son: <blockquote>, <figure>, <td>, <details>, <dialog>, y <fieldset>.

Sectioning content (sección de contenido):

Cada sección raíz es dividido en una serie de secciones de contenido, los que son anidables y semánticos. El tipo debe ser elegido y utilizado según la naturaleza del contenido que va a contener: <section>, <article>, <nav> y <aside>.

Heading content (contenido encabezado):

Son etiquetas de texto para las secciones de contenido: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.

Finalmente, un ejemplo práctico puede ser considerado el siguiente:


  <h1>Mi Sitio</h1>
  <section>
    <h1>Sobre Mí</h1>
    <p>Lorem ipsum...</p>
    <section>
      <h1>Mis Gustos</h1>
      <p>Lorem ipsum dolor sit amet...</p>
    </section>
  </section>
  <section>
    <h1>Contáctame</h1>
    <p>...</p>
  </section>

Mi Sitio
1. Sobre Mí
  1. Mis Gustos
2. Contáctame

Sugerencia:

A continuación se sugiere un uso mental para las etiquetas de título dentro de una estructura de seccionamiento HTML5, el que por supuesto depende mucho del tipo de proyecto web en que estés trabajando:

Utiliza una etiqueta <h1> por sección raíz ó sección de contenido.
Debería siempre agregarse un <h1> entre la etiqueta <body> y la primera sección de contenido, para identificar el documento completo.
Cuando una etiqueta <h1> identifica una sección de contenido, ésta debe estar ubicada inmediatamente al abrir la etiqueta.
Dado lo anterior, siempre la segunda etiqueta de título debe ser un <h2> ó menor que la anterior para crear una estructura ordenada en cascada del document outline.
La especificación del estándar HTML5 permite que cualquier etiqueta de título sea utilizada para identificar una sección, de la <h1> al <h6>.

Grilla CSS Responsive / Fluid + Fixed

Wed, 01 Jun 2016 15:52:51 +0000

Grillas CSS abundan y son múltiples sus utilidades (aunque se sigan usando de forma incorrecta y abusando de sus componentes asociados pero enfin, herrar es umano). Vinieron para quedarse por mucho más tiempo y nos han acostumbrado a los layout tan comunes que hoy en día todas nos parecen iguales: 3 columnas, grilla 12 columnas, responsive, líquido… a fin de cuentas todos terminan pareciéndose.

¡Al-2016-todos-los-sitios-se-ven-iguales!

Pero sucedió lo que temía. Llegó cliente -y la diseñadora de cómplice- con un requerimiento que me hizo erizar los pelos: “Jorge, estamos pensando en tener una grilla responsive pero la columna de la derecha tenga un ancho fijo de 200px. Y que en el breakpoint de móviles necesitamos que esta columna desaparezca”.

Grilla Responsive pero con columna fija. OK he visto eso, donde la columna del menú (generalmente de la derecha) tiene ancho fijo y la otra columna de contenido con porcentaje y un margin-left es el ancho de la columna fija.

OK pero esta es responsive. No creo haber visto algo así. Entonces me puse a pensar, prototipar, y encontrar con la solución más crossbrowsing posible, y a continuación les presento lo logrado incluyendo soporte IE8+.

La solución

Preferí utilizar la propiedad CSS display: table; y sus anexas por el crossbrowsing y porque me permitía principalmente contener un layout fijo/elástico sin añadir mucho código o raros hacks.

HTML:

<div class="table-layout table-fixed">
  <!-- left / fluid column-->
  <div class="table-cell">
    <h1>fluid column</h1>
  </div>
  <!-- right / fixed column-->
  <div class="table-cell fixed-width">
    <h1>fixed column: 200px</h1>
  </div>
</div>

CSS:

/* la tabla padre, contenedora */
.table-layout {
  display: table;
  width: 100%;
}
  .table-layout.table-fixed {
    table-layout: fixed;
  }
    /* cada celda lateral */
    .table-layout .table-cell {
      display: table-cell;
      width: 100%;
      vertical-align: top; /* necesario para Safari y Firefox */
    }
    .table-layout .fixed-width {
      width: 200px; /* el ancho fijo que estimes necesario */
    }

EJEMPLO 1

Ejemplo en JS Bin

EJEMPLO 2

Agregando la propiedad CSS table-layout: fixed; pude posicionar un carrusel adentro de un table-cell sin que se desarmara y se fuera todo al carajo:

Ejemplo en JS Bin

EJEMPLO 3

Con una columna fluída y una fija, puedo posicionar en la columna fluída cualquier grilla CSS de las columnas que fueran necesarias:

Ejemplo en JS Bin

EJEMPLO 4

Finalmente, esta solución me permitía esconder la columna fija cuando la resolución alcanzara -por ejemplo- el breakpoint de dispositivos móviles:

Ejemplo en JS Bin

SCSS @media mixin

Wed, 06 Apr 2016 12:48:30 +0000

Este útil mixin de SCSS me ha ayudado a mantener consistencia y legibilidad en el código de un proyecto donde estamos muchas personas trabajando de manera remota.

La idea es definir los valores normales para el estado que desees (desktop-first, mobile-first) y las variaciones de @media las declaras dentro del mismo selector. Así es fácil saber todas las propiedades y valores que éste tiene, logrando inter-operabilidad en equipos de trabajo de varias personas y teniendo algunos de ellos mantener mi código y vice-versa.

// variables:
$breakpoint-xs: 360px;
$breakpoint-sm: 767px;
$breakpoint-md: 1023px;
$breakpoint-lg: 1360px;

@mixin media($media) {
  @if $media == xs {
    @media (max-width: $breakpoint-sm) { @content; }
  }
  @else if $media == sm {
    @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md) { @content; }
  }
  @else if $media == md {
    @media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) { @content; }
  }
  @else if $media == lg {
    @media (min-width: $breakpoint-lg) { @content; }
  }
}

Uso:

@include media(xs) {
  property: value;
}

Ejemplo (SCSS):

.elemento {
  font-size: 1.2em;
  color: #c00;

  @include media(xs) {
    font-size: 1.6em;
  }
}

Output (CSS):

.elemento {
  font-size: 1.2em;
  color: #c00;
}
@media (max-width: 767px) {
  .elemento {
    font-size: 1.6em;
  }
}

Link:

Responsive Web Design in Sass: Using media queries in Sass 3.2

La variable CSS currentColor

Tue, 09 Feb 2016 19:32:21 +0000

Estos días se anunció que Google Chrome incluye soporte para CSS Variables, lo que finalmente abre las puertas a que los nuevos features de CSS sean finalmente adquirido por los browsers. Pero una variable poco conocida y con buen soporte crossbrowsing ha existido por años: currentColor. Esta capacidad tiene muchas aplicaciones las que veremos en este artículo.

Uno de las características menos conocidas de CSS es que si defines color en una declaración junto al border (por ejemplo) sin especificar el color, este border va a adquirir el color del texto por defecto, por ejemplo:

p { 
   color: #f00;
   border-bottom: 4px solid; 
}

Ejemplo en JS Bin

Así si cambias el color de texto el color del borde también heredará el cambio del color (y además funciona con propiedades como outline y box-shadow):

Ejemplo en JS Bin

Creo que se entendió el concepto. Veamos ahora un ejemplo práctico: dado un párrafo, es usual que los enlaces se les entregue el mismo color que el texto:

p {
   color: #666;
}
p a {
   color: currentColor;
   font-weight: bold;
}

Ejemplo en JS Bin

Con el valor currentColor podremos reducir las declaraciones de colores de nuestro código CSS, e inclusive podremos construir un conjunto de interfaces (componentes) que dependan y hereden el color automágicamente:

p {
  color: #34495e;
}
p a {
  color: currentColor;
  font-weight: bold;
}
p .btn {
  display: inline-block;
  border-radius: 10px;
  border: 1px solid;
  text-decoration: none;
  padding: .1em 1em;
  line-height: 1.5;
}

Ejemplo en JS Bin

La pseudo-class :not

Tue, 22 Dec 2015 20:28:49 +0000

Esta es una de las pseudo-clases menos utilizadas pero con gran utilidad al momento de alcanzar selectores CSS que no comparten cierta regla. La pseudo-clase :not permite seleccionar todos los selectores excepto que satisfacen cierta condición. Esto es muy útil ya que solíamos definir las propiedades a los elementos que necesitábamos y luego escribíamos la excepción y dependiendo de cómo, podía ser con clase CSS ó selectores hermanos/adyacentes u otros. Por ejemplo, para darle un borde separador a todos los elementos de un menú menos para el último podíamos:

.menu a {
  margin-right: 5px;
  padding-right: 5px;
  border-right: 2px solid gray;
}
.menu a:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

Ejemplo en JS Bin

Con :not todo se hace más fácil y con mucho menos código:

.menu a:not(:last-child) {
  margin-right: 5px;
  padding-right: 5px;
  border-right: 2px solid gray;
}

Ejemplo en JS Bin

Soporte: IE9+ con tranquilidad

Eventos JavaScript para un input type="number"

Thu, 08 Oct 2015 21:47:23 +0000

En un proyecto tengo que obtener el valor de un input de tipo number, el cual en algunos browsers trae controles para aumentar/disminuir el valor:

var input = document.querySelector('input'),
    log = document.querySelector('.log');
multipleEventsListeners(input, 'keyup change', function(e){
  log.textContent = 'New value: ' + this.value;
});

El evento que escucha el cambio a través de los controles es onchange, y el que reacciona al cambio manual del valor de éste input es onkeyup, como se muestra en el siguiente ejemplo:

Ejemplo en JS Bin

🍻 can be styled

Fri, 10 Jul 2015 18:54:01 +0000

Sólo un experimento utilizando emojis como nombre de clase CSS. No se atrevan a usarlo en producción.

HTML:

<p class="🍻">Emojis can be styled</p>

CSS:

.🍻 {
  font-size: 10vmin;
  text-align: center;
  color: green;
}
  .🍻:before {
    content: "?";
  }

Ejemplo en jsbin.com

Alcanzar y manipular pseudo-elementos CSS con JavaScript

Thu, 09 Jul 2015 22:00:09 +0000

Los pseudo-elementos (y pseudo-clases) son selectores CSS virtuales que no existen esplícitamente en el árbol de DOM. Pero aparte de esa característica, puede ser manipulado con propiedades CSS como cualquier otra, a excepción que agrega una nueva propiedad content la que permite ingresar texto al pseudo-elemento.

Como estos selectores no existen en el árbol del documento, cómo alcanzarlos y manipularlos con JavaScript? Afortunadamente es posible con el método getComputedStyle():

HTML:

<p> Mundo</p>

CSS:

p:before {
  content: "Hola";
}

JS:

var elem = document.querySelectorAll("p");
if( elem.length ) {
  [].forEach.call( elem, function(e) {
    var pseudoContent = window.getComputedStyle(e,':before').content;
    document.body.innerHTML += "Pseudo-element content: " + pseudoContent;
  });
}

Ejemplo en JS Bin

También puedes obtener otras propiedades CSS aplicadas, por ejemplo, el color de texto:

JS:

var pseudoColor = window.getComputedStyle(e,':before').getPropertyValue('color');

Ejemplo en JS Bin

Link:

getComputedStyle in CanIUse

Sobre pseudo-clases y pseudo-elementos

Thu, 02 Jul 2015 16:34:14 +0000

Las pseudo-clases y los pseudo-elementos son tipos de selectores CSS que permiten alcanzar estados y elementos que no están en el DOM original. La lista de pseudo-clases es amplia, la de pseudo-elementos no ha crecido hasta la actual versión de CSS3 (aunque en CSS4 se vienen varios más):

Pseudo-clases:

:link
:visited
:active
:hover
:focus
:target
:empty
:enabled
:disabled
:checked
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:first-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:root
:lang(x)
:not(s)

Pseudo-elementos:

::before
::after
::first-line
::first-letter

Mientras las pseudo-clases se encargan de entregar una manera de seleccionar elementos HTML basados en la información que no es accesible en el DOM (por ejemplo, el estado :active ó su posición basado en los elementos hermanos como :nth-of-type()), los pseudo-elementos crean una abstracción en el DOM creando un nuevo elemento virtual el que puede ser manipulado en su contenido y forma (por ejemplo ::before).

Nomenclatura:

El estándar CSS2.1 define a ambos con doble-punto (:) pero en CSS3 las pseudo-clases se prefijan con doble-punto (:) y los pseudo-elementos con doble-doble-punto (::). Lamentablemente nos queda IE8 en el regazo, soportando estas útiles e importantes pseudo-propiedades sólo con doble-punto (:); como consecuencia todos los browsers siguen soportando ambas nomenclaturas. Si sigues soportando IE8, debes usar doble-punto (:); caso contrario puedes utilizar doble-doble-punto (::) para pseudo-elementos si quieres obedecer las reglas CSS3 de W3C.

Star-Rating sólo con CSS

Wed, 17 Jun 2015 13:04:25 +0000

Cualquier sistema de votación (star-rating system) requiere de los 3 componentes básicos de todo sitio web: HTML, CSS y JavaScript. Pero a medida que la tecnología avanza, es posible dejar la ayuda que JavaScript brindó por mucho tiempo mientras CSS no entraba de lleno a la capa de interacción, principalmente a través de CSS3. Pero existen propiedades CSS2 que siempre han permitido cierto grado de complejidad pero que por culpa de IE6 y su hermano mutante y deforme IE7 no eran posible utilizarlos. Con soporte IE8+ ya podemos utilizar tranquilamente -por ejemplo- selectores avanzados de atributos y descendientes, los que precisamente son los protagonistas de este artículo.

Me propuse a hacer un star-rating con HTML y CSS, dejando a JavaScript la tarea de conectar el dato con el servidor, si fuese el caso. Terminé con 2 opciones diferentes, y al ponerme a investigar descubrí que ya existía por lo menos una de las soluciones a las que llegué. Para no perder el trabajo, de todas maneras las expongo aquí por si a alguien más les son útiles.

Para ambos ejemplos el marcado HTML es el mismo:

<div class="star-rating">
  <a href="#">★</a>
  <a href="#">★</a>
  <a href="#">★</a>
  <a href="#">★</a>
  <a href="#">★</a>
</div>

Técnica 1

Consiste en al hacer :hover a todo el contenedor .star-rating y al elemento (estrella), se cambia el color de todos al color de estrella seleccionado (amarillo), salvo a los selectores hermanos del elemento que vuelven a tener el color normal:

.star-rating a {
  display: inline-block;
  color: #95a5a6; /* gris (normal) */
}
.star-rating:hover a {
  color: #f39c12; /* amarillo (seleccionado) */
}
  .star-rating:hover a:hover ~ a {
    color: #95a5a6; /* gris (normal) */
  }

Ejemplo en JS Bin

Técnica 2

Como en CSS los hermanos adyacentes sólo alcanzan los que están hacia adelante en el árbol que el propio, no podemos dar estilos a los anteriores al :hover, el cual es el propósito de todo star-rating. Entonces, por qué no darlos vuelta? Flotamos los elementos (estrellas) hacia la derecha (float: right;) logrando invertirlos y obtenemos el resultado que necesitamos:

.star-rating a {
  float: right;
  color: #95a5a6; /* gris (normal) */
}
  .star-rating a:hover {
    color: #f39c12; /* amarillo (seleccionado) */
  }
  .star-rating a:hover ~ a {
    color: #f39c12; /* amarillo (seleccionado) */
  }

Ejemplo en JS Bin

Hover Intent moderno en menues dropdown

Thu, 07 May 2015 12:12:07 +0000

La utilidad (y poca accesibilidad) de los menúes dropdown son conocidos e incuestionables. Pero existe un pequeño problema cuando el usuario navega sobre ellos, el cual se puede apreciar a continuación:

El Problema

Vemos que cuando se pasa el mouse sobre los elementos que gatillan los paneles se sobreponen a lo que está debajo de ellos si el movimiento es lo suficientemente rápido. No es un comportamiento crítico pero la solución es tan simple que mejor es tenerla siempre presente.

Como sabemos la construcción de un menú dropdown (un elemento que contiene sub-elementos que son desplegados sólo cuando el usuario pasa el mouse sobre el elemento padre) no es más que un cambio en el pseudo-estado :hover. Si está sobre el elemento muestra los sub-elementos, si no, vuelve a esconderlos.

El HTML base:

<ul class="nav">
  <li>
    <a href="#">Element</a>
    <ul>
      <li><a href="#">Sub-Element</a></li>
      <li><a href="#">Sub-Element</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Element</a>
    <ul>
      <li><a href="#">Sub-Element</a></li>
      <li><a href="#">Sub-Element</a></li>
    </ul>
  </li>
  ...
</ul>

Y el CSS base:

.nav {
  position: relative;
}
	.nav ul {
	  position: absolute;
	}
	.nav li {
	  list-style: none;
	}
	.nav a {
	  display: block;
	  width: 90px;
	}
	.nav > li {
	  float: left;
	}
		.nav > li > a + ul {
		  visibility: hidden;
		}
			.nav > li:hover > a + ul {
			  visibility: visible;
			}

Ejemplo en JS Bin

La Solución

Lo que se propone es atrasar el comportamiento del :hover a los sub-elementos, con unos pocos milisegundos (ms) de delay (en mis ejemplos, 0.3ms). Con esto haremos que el usuario cuando esté pasando sobre los elementos no los despliegue al instante sino que espere esos milisegundos antes de gatillarlos, denotando la verdadera intención del usuario: mostrar los sub-elementos o sólo pasar sobre el elemento. Este comportamiento se denomina hover intent y se puede realizar de 2 maneras: mediante la propiedad CSS3 transition-delay y con fallback con JS para los browsers que no soportan esta propiedad (IE9 e inferiores):

Utilzando CSS3:

/* 
  la declaración resumida es: 
  transition: propiedad duración tipo delay;
*/
.nav > li > a + ul {
  visibility: hidden;
  /* al salir el mouse del menu desplegado no debe haber delay
     por eso está en 0s */
  transition: visibility 0s linear 0s;
}
  .nav > li:hover > a + ul {
    visibility: visible;
    /* al entrar el mouse al elemento hay un delay de 300ms
       para desplegar el menu */
    transition: visibility 0s linear 0.3s;
  }

Ejemplo en JS Bin

Utilzando JS/jQuery:

(function () { 
  var menuDropdown = $('.nav'),
      delay = 300; // retardo dropdown (ms)

  // esconde los submenues por defecto
  $('a + ul', menuDropdown).hide();

  $("li", menuDropdown).hover(function() { // mousein
    var elem = $(this);

  // indicador que el mouse ha entrado al elemento padre
  elem.attr('mIn', 'true');

  setTimeout(function () {
    // mostramos submenu
    if (elem.attr('mIn') == 'true') {
      $('a + ul', elem).show();
    }
    }, delay);
    
  }, function() { // mouseout

    // indicador que el mouse ha salido del submenu desplegado
    $(this).attr('mIn', 'false');
    // escondemos submenu
    $('a + ul', $(this)).hide();
    
  });
}());

Ejemplo en JS Bin

Selects con estilo

Tue, 24 Mar 2015 15:50:41 +0000

Estamos en pleno año 2015, la humanidad está trabajando para llevar humanos a Marte y todavía no podemos dar estilos CSS crossbrowsing a las etiquetas <select> Y para qué mencionar los <input type="checkbox"> y <input type="radio">…

A pesar de existir plugins y artimañas que lo permitan, siempre he recomendado dejar los estilos por defecto de los elementos de formularios, ya que por años han sigo bloqueadores de la conversión. Por su importancia, los formularios deben tener los menos impedimentos posibles a la hora de que el usuario llene el campo, y la incompatibilidad ó mal aplicación de un diseño a estos campos suelen ser una de las principales causas de rebote en la conversiones. El usuario quiere responder o seleccionar un campo, y éste no funciona o al click no queda seleccionado. Frustración aparte, despídete de los datos de ese usuario.

En el presente, teniendo IE11 como browser por defecto de Microsoft, Chrome / Opera compartiendo un mismo motor de render y Firefox con cada vez más frecuentes actualizaciones, podemos respirar más tranquilos y entregar estilos CSS directo al elemento <select> sin preocuparse de utilizar algún plugin, eso sí siempre y cuando el soporte mínimo sea IE9+. Para IE8 y menores aún deberás tomar una decisión: no le doy diseño personalizado, ó agrego esfuerzo aplicando un plugin como Chosen ó Selectric.

Vamos al asunto: dado un <select><option value=""></select>, existen 2 técnicas dependiendo del diseño que se le vaya a aplicar: con una imagen de fondo, o sin (puro CSS si el diseño lo permite):

<div class="select">
  <select>
    <option value="">Seleccione uno:</option>
    <option value="opcion-1">Opción 1</option>
    <option value="opcion-2">Opción 2</option>
    <option value="opcion-n">Opción N</option>
  </select>
</div>

IE 9 no permite remover la flecha por defecto del campo <select>, entonces lo que hacemos es darle rodear el <select> con un contenedor, el que tiene un ancho menor (el <select> tendrá un width: 130%;) y con eso esconderemos la flecha ya que estará fuera del contenedor del <select>. Para el resto de los browsers, deberemos limpiar el estilo por defecto del <select> mediante la propiedad CSS appearance: none; (con prefix) para luego aplicar el diseño:

Técnica 1: con imagen de fondo

.select {
  border: 1px solid #ccc;
  width: 140px;
  overflow: hidden;
  background: #fff url("arrowdown.gif") no-repeat 90% center;
}
  .select select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    appearance: none;
  }

Técnica 2: puro CSS

Suponiendo el diseño es sencillo, simple y orientado a la conversión, basta que el <select> tenga un fondo y un borde de color sólido y la bendita flecha / triángulo que siempre será útil. Para hacer triángulos con CSS uso mi mixin en LESS ó un generador de triángulos CSS:

.select {
  position: relative;
  border: 1px solid #ccc;
  width: 120px;
  overflow: hidden;
  background-color: #fff;
}
  .select:before {
    content: '';
    position: absolute;
    right: 5px;
    top: 7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 5px 0 5px;
    border-color: #000 transparent transparent transparent;
    z-index: 5;
    pointer-events: none;
  }
  .select select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    appearance: none;
  }

Autocomplete nativo con datalist

Tue, 17 Mar 2015 18:26:34 +0000

Un intersante y poco conocido elemento HTML5 es <datalist>, con el cual permite crear de forma nativa un campo de input con autocomplete, y con nativo me refiero sin JavaScript.

Para utilizarlo, necesitarás un campo de <input /> común y corriente y linkearlo con el listado de palabras/términos a ser desplegados cuando el usuario tipea en este <input />:

<label>Marcas de Cerveza</label>
<input list="cervezas" placeholder="Escribe una marca de cerveza:" />

Ahora construímos el listado con <datalist> y en cada <option> las opciones disponibles:

<datalist id="cervezas">
	<option value="Heineken" />
	<option value="Budweiser" />
	<option value="Skol" />
	<option value="Cristal" />
	<option value="Quilmes" />
	<option value="Estrella Damm" />
	<option value="Sol" />
	<option value="Cusqueña" />
	<option value="Paceña" />
	<option value="Tecate" />
	<option value="Corona" />
	<option value="Águila" />
	<option value="Guinness" />
	<option value="Carlsberg" />
	<option value="Becks" />
	<option value="Brahma" />
	<option value="Polar" />
	<option value="Medalla" />
</datalist>

Ver Ejemplo 1

Nótese que para linkear el <input /> con el <datalist> se utiliza el atributo list=“ID-DEL-DATALIST”. Otro detalle, el autocomplete detecta las primeras letras de la palabra/término definido en cada <option /> y no las letras intermedias que contiene la palabra.

Carga dinámica de datos

Si la lista llega a ser muy extensa, podemos hacer una carga dinámica de las palabras/términos mediante AJAX. Para ello necesitaremos un poco de JavaScript.

Carguemos el listado de países en un campo mientras el usuario está escribiendo en él:

<input id="paises" list="json-paises" placeholder="Escribe el nombre de un país" />
<datalist id="json-paises"></datalist>

JavaScript para llamar el JSON por AJAX y llenar el <datalist> con los países:

// Definición de un par de variables
var dataList = document.querySelector('#json-paises'),
		input = document.querySelector('#paises');
// Creamos un nuevo XMLHttpRequest
var request = new XMLHttpRequest();
// Una ves listo, definimos eventos para sus estados
request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parseando JSON
      var jsonOptions = JSON.parse(request.responseText);
      // Iterando sobre el arreglo JSON
      jsonOptions.forEach(function(item) {
        // Creando un option por cada país.
        var option = document.createElement('option');
        option.value = item;
        dataList.appendChild(option);
      });
      input.placeholder = "Escribe el nombre de un país";
    } else {
      // Error!
      input.placeholder = "Error al cargar lista de países ;^(";
    }
  }
};
// Cambiamos el texto del placeholder
input.placeholder = "Cargando países";
// Abrimos y enviamos el request
request.open('GET', 'json-paises.json', true);
request.send();

El formato del json-paises.json:

[
	"Afganistán", 
	"Albania", 
	"Alemania", 
	"Andorra", 
	"Angola", 
	"Anguila", 
	"Antigua y Barbuda",
	...
]

Ver Ejemplo 2

Soporte:

Desde IE10, pasando por Firefox, Chrome, Opera, Android Browser y sólo Safari decepcionando.

Detectando media queries con JavaScript

Tue, 17 Feb 2015 15:33:30 +0000

Hace varios años tuve la inquietud de poder trabajar con el ancho y alto del viewport y sus cambios mediante jQuery, logrando crear un plugin para ello. BrowserSizr fue pionero en una época donde responsive no existía como palabra ni concepto. Desde entonces se ha masificado y estandarizado este comportamiento, y el DOM ya permite detectar y probar los resultados de media queries mediante JavaScript.

El objeto MediaQueryList puede recibir el estado de una query ó recibir notificaciones cuando estos estados cambien. Para utilizarlo, antes, se debe crear el objeto representando el media query a través del método window.matchMedia. En el siguiente ejemplo, trabajaremos con el valor de 600px de un max-width que ya tengo definido con CSS:

var mediaquery = window.matchMedia("(max-width: 600px)");
if (mediaquery.matches) {
   // mediaquery es 600
} else {
  // mediaquery no es 600
}

Ver ejemplo 1

Si necesitas constantemente saber en qué estado está el o los media queries, es más eficiente registrar un `listener` que pueda entregarte el resultado siempre que un cambio ocurra:

function handleOrientationChange(mediaquery) {
  if (mediaquery.matches) {
    // mediaquery dentro de 600
  } else {
    // mediaquery fuera de 600
  }
}
mediaquery.addListener(handleOrientationChange);

Ver ejemplo 2

Soporte:

Chrome, Safari, Firefox, IE10+.

Detectar Blur / Focus a la ventana

Fri, 30 Jan 2015 15:41:48 +0000

Este pequeño snippet permite detectar y realizar alguna acción mediante JavaScript cuando una ventana/tab esté activa (focus) ó desactiva (blur).

Algunas aplicaciones útiles que se me ocurren:

Guardar datos si el usuario está en un formulario.
Iniciar/detener animaciones que quieras que el usuario vea.

A pesar de actualmente existir una API para Page Visibility sabemos que su soporte para IE es escaso. En este caso se utilizarán los eventos onfocus y onblur los que tienen buen soporte (IE8+).

function windowBlurFocus(){
  var focused = true;
  window.onfocus = function() {
    focused = true;
    onFocus();
  };
  window.onblur = function() {
    focused = false;
    onBlur();
  };
}

Ver Ejemplo

Workflow Moderno para Proyectos Front-end

Tue, 30 Dec 2014 16:57:15 +0000

Hace unas semanas preparé una pequeña presentación mostrando mi más nuevo proyecto personal: un workflow, una nueva manera de trabajar proyectos front-end. Lo he utilizado y perfeccionando a medida que encuentro mejoras, y aquí les comparto los slides de la presentación. Básicamente muestro herramientas de automatización que ayudan a optimizar el flujo de trabajo y por ende minimizar errores, como GruntJS y de mantenimiento de librerías como Bower, además de mi boilerplate y cómo utilizarlos en tu ambiente de desarrollo local.

A continuación la presentación en Speakerdeck y más abajo el enlace al HTML de los slides.

Ver presentación

Conoce cómo funciona el browser y optimiza tu código frontend

Wed, 26 Nov 2014 15:49:30 +0000

Hace no más de 2 años que la tendencia de los usuarios de internet han visto cómo han crecido de manera indirecta las siguientes afirmaciones:

Los sitios han crecido en peso de sus archivos (CSS, JS, imágenes, tipografías).
- La cantidad de usuarios que utilizan redes móviles (2G, 3G y 4G) ha crecido mucho, pero muuuucho.

Por ende:

Hay poca consciencia de que sitios pesados y redes móviles limitadas no son buenos coeficientes de una misma ecuación.

Esto debe llevarnos a una nueva manera de pensar sobre la optimización de sitios relativos al front-end. Y no sólo por los usuarios y las experiencias que puedan llevar un lento desempeño de tus sitios en sus dispositivos; recuerda que Google considera dentro de su algoritmo de posicionamiento que el tiempo de renderizado sea menor a 1 segundo, suponiendo que con 3 segundos el usuario ya se fue de tu sitio y esperando 10 segundos lo más probable es que nunca más vuelva.

En este artículo mostraré cómo funciona un browser desde que inicia el render del código de una página y con esa información algunas técnicas para aumentar la optimización de los elementos que la componen.

Tramo crítico de renderizado

Por años se consideró como velocidad de carga como la rapidez en que vemos la estructura, diseño y contenido de la página cargada. Pero luego Google definió el tramo crítico de renderizado (critical rendering path) como la secuencia de pasos que el browser toma de convertir código y recursos asociados en la vista inicial de una página web. Esto cambia la noción completamente, orientándola hacia lo esencial, lo fundamental en tu esa página para después cargar lo secundario. ¿El foco? Contenido más rápido, mayor pagerank.

A continuación mostraré los procesos que suceden cuando ingresas una URL en el browser y el servidor resuelve lo que esa URL contiene:

De nada a contenido

Básicamente lo primero que entregará un servidor será código HTML como el siguiente:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Título</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
      <p>Texto <b>en negrita</b>.
      <img src="imagen.jpg">
    </p>
  </body>
</html>

Lo que hace el navegador es parsear este código dentro del DOM (Document Object Model), el que corresponde a la representación en forma de árbol del lenguaje HTML. El browser construye el DOM incrementalmente, o sea, comienza a parsear el HTML apenas el primer trozo de código es recibido y agrega nodos a la estructura del árbol tanto como sea necesario:

En este punto la ventana del navegador aún no muestra nada, pero se está referenciando a un archivo style.css dentro de Nótese que los estilos de un sitio son parte crítica del renderizado dado que tienen que ser descargados apenas el parser HTML pase por . Si tenemos definido como estilos básicos:

p { font-weight: normal; }
p b { display: none; }

Éstos son parseados dentro de CSSOM ó CSS Object Model, el que desafortunadamente no puede ser construido incrementalmente como el DOM debido al efecto cascada que determina la naturaleza de CSS; imagina que después de la declaración CSS anterior definieras:

p { font-weight: bold; }

Lo que causaría que sobre-escribieras la primera declaración de p {}, demostrando que se debe esperar que todo el CSS sea descargado y procesado antes podamos renderizarlo. Por ende, CSS bloquea el render hasta que la representación de CSS y HTML sean entendidos por el browser, construyendo recién en ese momento el árbol de renderizado (render tree). Esta estructura combina el DOM y CSSOM pero considerando sólo los elementos visibles:

Como habrán notado, el dentro de

no está considerado debido a que no es visible para el DOM (display: none;) mediante CSS.

Los pixeles recién aparecen luego de 2 pasos: estructura (layout) y pintura (paint). La estructura se encarga de calcular las posiciones y dimensiones de cada elemento respecto al viewport actual; ya la pintura agrega los colores, formas, sombras y demás efectos de estilo terminando de mostrar la página renderizada. Cada vez que el árbol de render cambia (por ej. mediante JavaScript) o el viewport cambia (utilizando interfaces líquidas, adaptativas ó responsive) estructura y pintado vuelven a crearse.

Estructuras líquidos/responsive tienen mayor carga en el layout/paint que estructuras adaptativas

El tramo crítico de renderizado completo se ve en el siguiente diagrama:

¿Y las imágenes?

No son considerados críticas para la construcción del DOM, por lo tanto, no bloquean el renderizado de una página. Pero sí influyen y bloquean el evento Load, el que corresponde a la carga y proceso de todos los elementos considerados dentro de un HTML adicionando CSS y JavaScript. Así vemos que las imágenes deben ser siempre optimizadas pero no bloquean el tramo crítico de renderizado.

No olvidemos a JavaScript

JavaScript es otro actor que influye directamente en nuestro tramo crítico de renderizado. A partir del primer código HTML entregado, lo expandiremos agregando JavaScript:

<!DOCTYPE html> <html lang="es"> <head> <title>Título</title> <link href="style.css" rel="stylesheet"> </head> <body> Texto en negrita. <script> document.write('<h1>olakease</h1>'); var elem = document.querySelector('h1'); elem.style.color = 'green'; </script> <img src="imagen.jpg"> </body> </html>

Este sencillo script demuestra que cambiar el DOM puede tambien influir en el CSSOM. Mientras JavaScript agrega un nuevo elemento al DOM <h1>olakease</h1>, el parser debe parar hasta que el script sea ejecutado por completo. Luego se determina el color del elemento recién creado, lo que hace que CSSOM esté presente antes de que el script sea ejecutado.

Ahora aislemos el script llevándolo a un llamado de un archivo externo .js**:**

<!DOCTYPE html> <html lang="es"> <head> <title>Título</title> <link href="style.css" rel="stylesheet"> </head> <body> Texto en negrita. <script src="app.js"></script> <img src="imagen.jpg"> </body> </html>

El nuevo archivo externo realiza un request adicional, pero a pesar del lugar en que lo llames dentro del HTML, siempre CSS será parseado primero. Apenas CSSOM es interpretado, el contenido del script puede ser ejecutado y solo después de esto el parser del DOM puede terminar de ser ejecutado. Es un juego de parser-render-bloqueo-render-bloqueo-parser.

Técnicas de optimización

Ahora que conocemos los conceptos, es hora de anotar cómo podemos poner algo en práctica. Hay 3 puntos claves donde puedes optimizar el tramo crítico de renderizado y que permite que el browser produzca resultados visibles con mayor rapidez.

No olvides tener en cuenta que debes utilizar estos consejos con cautela y sabiduría; hazlo con cuidado, asesórate y recuerda que no existen recetas milagrosas ni fórmulas de éxito; cada situación es particular.

Minimiza los bytes que son llamados por el servidor

Regla simple: mientras más liviano tu sitio, más rápido carga y renderiza. Sencillo. Minifica, comprime y utiliza caché en tus assets estáticos y tu HTML. No temas comprimir el código HTML removiendo espacios blancos (whitespaces) y comentarios innecesarios cuando vayas a ambiente productivo.

Minimiza el CSS que bloquea el renderizado

Recuerda que CSS bloquea al renderizado y ejecución de JavaScript, así que entregar los estilos al usuario lo más rápido posible es imperativo. Asegúrate que todas las etiquetas estén dentro del de tu documento HTML para que el navegador las cargue y renderice de inmediato.

Otra estrategia es disminuir el CSS que bloquea el renderizado mediante media queries. Digamos que nuestro sitio de ejemplo tiene estilos para impresión y reglas declaradas para dispositivos móviles en orientación landscape. Puedes separar el CSS en varios archivos y dejar que el browser las parsee condicionalmente:

<head> <title>Sitio Ejemplo</title> <link href="style.css" rel="stylesheet"> <link href="print.css" rel="stylesheet" media="print"> <link href="landscape.css" rel="stylesheet" media="orientation:landscape"> </head>

Claramente el peso de nuestro style.css será menor debido al código removido y que repartimos entre los otros 2 archivos .css, los cuales serán utilizados sólo cuando realmente necesarios. Esto no quiere decir que no serán cargados; el navegador los descarga al inicio pero en menor prioridad que el principal y en paralelo al proceso de renderizado.

Otro recurso es agregar como estilo inline (dentro del mediante ) evitando que el browser realice un request al servidor por un nuevo archivo. Esta técnica se utiliza para el primer render, el que se realiza above de fold. El CSS que comanda lo que primero está en el viewport del browser, para luego continuar con el resto de la estructura mediante archivos enlazados con .

<head> <title>Sitio Ejemplo</title> <script> header { ... } header nav { ... } header .logo { ... } </script> <link href="style.css" rel="stylesheet"> </head>

Algunas herramientas que te ayudan a calcular el CSS crítico (above the fold) y separar los estilos para servir esta vista son:

grunt-criticalcss

critical

Finalmente, ¿que tal llamar tus archivos .css de forma asíncrona? Suena descabellado pero se creó loadCSS, una función JavaScript que carga CSS de forma asíncrona, especial para esos pesados @font-face por ejemplo.

Minimiza el bloqueo del parser de JavaScript

Lo misma regla ocurre con JavaScript. Si necesitas unas pocas líneas de código en el render inicial, considera agregarlos dentro de tu HTML mediante ahorrarás descargas al servidor y por ende tendrás una respuesta más rápida al usuario.

En un caso óptimo llamas todo tu JavaScript en un mismo archivo al final de tu documento HTML. Pero en otros pasos, escribiendo código modular, puedes separar tus archivos y llamarlos asincrónicamente siempre y cuando no interactúen con el DOM ni el CSSOM:

... <script src="retardo.js" async></script> </body> </html>

Con esto le dices al navegador que no necesita ejecutar el script en el momento en que es llamado en documento HTML. Esto también permite que el browser continúe construyendo el DOM y ejecute scripts cuando el DOM esté completo. Imagina código de Analytics, redes sociales en este retardo.js, el que no interactúa con el DOM ni el CSSOM.

Finalmente, una técnica y herramienta interesante es basket.js donde en teoría, cargas tus script críticos y recurrentes y los guardas en el localstorage del browser (HTML5), para utilizarlo desde ahí mientras dure la navegación del usuario y cuando éste regrese.

Suena bien. Manos a la obra.

Links:

Web Fundamentals by Google

Google PageSpeed Insights

Optimizing the Critical Rendering Path

Recorrer arreglos en pre-processors

Wed, 05 Nov 2014 15:44:24 +0000

Hace unos 4 proyectos atrás, me enfrenté al dilema de crear y recorrer un array de elementos -en este caso colores en hexacromía- y crear clases CSS dinámicamente a partir de cada uno de los colores contenidos en el arreglo. Algo sencillo de lograr en JavaScript pero que curiosamente tiene diferentes soluciones por cada tipo de [pre-processor][1]. Mientras SCSS y Stylus son más sencillos, con LESS es necesario un poco más de código para lograr lo mismo, pero que se espera se solucione en una pronta versión.

A continuación, snippets de cómo recorrer arreglos y usar sus elementos en LESS, SCSS y Stylus:

LESS

// Creamos un arreglo con 4 colores: @colores: '#767676','#8cc079','#b35d5d','#81babd'; // Guardamos el total de elementos del arreglo: @cuantos: length(@colores); // Recorramos cada uno de los elementos del arreglo @colores: .loop (@index) when (@index > 0){ // Obtengamos el nombre de cada color @color: e(extract(@colores,@index)); // Ahora podemos utilizarlo: elemento-@{index} { color: @color; } .loop (@index - 1); } .loop(0){} // Seguimos recorriendo hasta llegar al total (último): .loop(@cuantos); // Fin

SCSS

// Creamos un arreglo con 4 colores: $colores: (#767676, #8cc079, #b35d5d, #81babd); // Recorramos cada uno de los elementos del arreglo @colores: @each $color in $colores { // Obtengamos el índice de cada $color en $colores: $i: index($colores, $color); // Ahora podemos utilizarlo: elemento-#{$i} { color: $color; } } // Fin

Stylus

// Creamos un arreglo con 4 colores: colores = ( #767676 #8cc079 #b35d5d #81babd ) // Guardamos el total de elementos del arreglo: cuantos = length(colores) - 1 // Recorramos cada uno de los elementos del arreglo @colores hasta llegar al total (último): for i in (0..cuantos) // Ahora podemos utilizarlo: elemento-{i + 1} color colores[i] // Fin

[1]: http://www.csslab.cl/etiqueta/pre-procesadores/ “Enlace en CSSLab.cl a “Tag: Pre-Procesadores””

Bordes Doblados Flat – LESS mixin

Wed, 08 Oct 2014 15:34:33 +0000

El siguiente es un mixin para [LESS][1] que creé que genera el efecto de bordes doblados dado un elemento HTML y con colores sólidos asociados.

Uso:

.flatCornerFold(@foldSize,color,bgcolor,direction,intensity);

foldSize: tamaño del doblez en forma de triángulo.

color: HEX para doblez (más claro) y sombra (más oscuro).

bgcolor: HEX para el fondo del triángulo; debería ser el mismo del fondo de la página (body) para dar el efecto de transparencia.

direction: valores: bottomright (por defecto) | topright | topleft | bottomleft.

intensity: opacidad (0% ~ 100%) del efecto del doblez.

Ejemplo:

@color: #ecf0f1; @bgcolor: #ecf0f1; @foldSize: 3rem; selector { .flatCornerFold(@foldSize,@color,@bgcolor,bottomright,25%); }

Ejemplo Avanzado:

selector { .flatCornerFold(1rem,#ecf0f1,#ecf0f1,bottomright,25%); } selector:after, selector:before { transition: .3s; } selector:hover { .flatCornerFold(3rem,#ecf0f1,#ecf0f1,bottomright,25%); }

Ver en GitHub

[1]: http://www.csslab.cl/etiqueta/less/ “Enlace en CSSLab a “Etiquetas: LESS””

Loops para todos los gustos

Tue, 30 Sep 2014 13:45:05 +0000

En desarrollo front-end se da a menudo que tengamos etiquetas y selectores que se repitan varias veces, con la misma o diferentes clases ó valores que vayan en incremento/decremento. Pero como HTML y CSS no son lenguajes de programación (no tienen lógica asociada) esto no lo podemos automatizar.

Un loop es un bloque de código que se ejecuta tanto cuanto una condición sea verdadera (true).

Afortunadamente, los [pre-processors][1] que existen actualmente son basados en lenguajes de programación ([JavaScript][2], Ruby, etc.) a los que podemos aplicar este y muchos otros tipos de lógica y que luego interpretan el código y lo compilan como HTML/CSS puro. En esta ocasión abordaré loops en los [pre-processors][1] más usados actualmente: [HTML] Jade, Slim, Liquid, Haml, [CSS] Less, Sass y Stylus

En los siguientes ejemplos, para cada [pre-processor][1] se iterará sobre sus elementos 10 veces:

Jade

- for (var x = 0; x < 10; x++) element(attr="value")</code>

Slim

- for i in (1..10) element #{i}

Liquid

{% for x in (1..10) %} Element {{ i }} {% endfor %}

Haml

- (1..10).each do |i| %element

Less

.loop(@index) when (@index > 0){ selector:nth-child(@{index}) { property: @index * 1px; } .loop(@index - 1); } .loop(0){} .loop(10);

Sass

@for $i from 1 through 10 .#{element}-#{$i} property: $i * 1px

Stylus

for $i in (1..10) property $i * 1px

Links:

Jade: Node template engine

Slim: Fast, lightweight template engine

Liquid templating language

Haml

Less: CSS pre-processor

Sass: Syntatically awesome stylesheets

Stylus: expressive, robust, feature-rich CSS preprocessor

[1]: http://www.csslab.cl/etiqueta/pre-procesadores/ “Enlace en CSSLab.cl a “Tag: Pre-Procesadores”” [2]: http://www.csslab.cl/categoria/javascript/ “Enlace en CSSLab.cl a “Categoría: JavaScript””

Textos con borde

Wed, 17 Sep 2014 16:21:09 +0000

Un pequeño efecto que realicé para este nuevo diseño de CSSLab fue agregar borde a un caracter dentro de los blockquote, pero este efecto puede aplicarse a textos de cualquier tipo y con cualquier fuente, incluso si son @font-face. Entre las soluciones que encontré, existen principalmente 2:

-webkit-text-stroke

Esta propiedad sólo es utilizada por browsers Webkit y ha sido así desde que se creó. No ahondaré en su uso por este mismo motivo, pero mostraré su sintaxis:

-webkit-text-stroke: 4px black;

Múltiples text-shadow

Esta propiedad sí tiene amplio soporte y permite tener múltiples sombras alrededor de un mismo caracter, junto a regular su espesor y nivel de desenfoque hará que una línea del grueso que definamos rodee cada caracter, de la siguiente manera:

text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000;

texto-con-borde

Link:

Adding Stroke to Web Text | CSS Tricks

Cerrar video cuando termina en iOS

Thu, 04 Sep 2014 04:06:39 +0000

En iOS, cuando intentamos utilizar un elemento nos vemos obligados a que el player del dispositivo se haga cargo. No podemos aplicar autoplay ni responder a su comportamiento, ya que es intrínseco del sistema operativo y no del browser. Felizmente iOS implementó un callback el cual responde a eventos del video y en este caso, responde cuando el video termina. Cuando tocamos un video podemos saber el final de éste y aplicar algún evento mediante [JavaScript][1].

Dado el siguiente elemento de video:

<video id="video" controls> <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source> <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> </video>

Con [JavaScript][1] podemos escuchar el final del video y aplicar algún otro evento:

$('#video').bind('ended', function() { // Cerramos la ventana del video var videoEl = document.getElementById('video'); videoEl.webkitExitFullScreen(); });

[1]: http://www.csslab.cl/categoria/javascript/ “Enlace en CSSLab a “JavaScript””

Centrando texto verticalmente III: flexbox

Wed, 13 Aug 2014 16:08:00 +0000

No he escrito nada sobre la propiedad flexbox debido a su poco alcance en los browsers pero creo que ya es el momento. Se puede utilizar display: flex desde IE10+ (con prefijo -ms-) y Firefox / Chrome / Opera lo soportan bastante bien.

Por ahora esta propiedad permite la mejor manera de [centrar verticalmente][1] cualquier texto sin tener que agregar HTML extra.

Dado el siguiente HTML:

<div class="vertical-centered-text"> Este texto será centrado verticalmente gracias a display: flex; </div>

El sencillo CSS:

.vertical-centered-text { -ms-display: flex; display: flex; /* alineacion vertical */ align-items: center; /* alineacion horizontal */ justify-content: center; }

[1]: http://www.csslab.cl/2014/08/01/centrando-texto-verticalmente-ii/ “Enlace en CSSLab a “Centrado Vertical II””

Centrando texto verticalmente II

Fri, 01 Aug 2014 17:14:12 +0000

Recuerdas las tablas? Sabes que aún son útiles? No como etiqueta HTML, sino la propiedad CSS display: table. Aquí presento una técnica sencilla y rápida que permite [centrar verticalmente][1] cualquier bloque de texto dado cierto elemento HTML con alto fijo.

Dado el siguiente HTML:

<div class="vertical-centered-text"> <h2>Este texto será centrado verticalmente gracias a display: table; y display: table-cell;</h2> </div>

El CSS que permite el centrado es el siguiente:

.vertical-centered-text { height: 200px; display: table; } .vertical-centered-text > * { display: table-cell; vertical-align: middle; }

[1]: http://www.csslab.cl/2008/03/19/centrando-texto-verticalmente/ “Enlace en CSSLab a “Centrado Vertical””

Familias tipográficas web-safe

Wed, 23 Jul 2014 22:53:46 +0000

No hay cosa peor de que transfieras un diseño para web y que se vea mal en el computador de tu cliente que justo tiene una tipografía mala o una versión de sistema operativo que no te imaginabas aún existía. Para eso hay 2 muy buenas soluciones:

Utilizar una fuente web-safe, es decir, que funciona correctamente a través de la gran mayoría de sistemas operativos y plataformas.

Utilizar [@font-face][1] que hace un poco más lenta la carga pero como queda en memoria caché funciona de maravilla durante la navegación.

Con la primera opción trabajaremos este artículo. A continuación entrego una buena lista de font-family que puedes estar tranquilo funcionará para tus clientes:

font-family: Arial, Helvetica, sans-serif;

font-family: Arial, Helvetica, sans-serif;

font-family: 'Arial Black', Gadget, sans-serif;

font-family: ‘Arial Black’, Gadget, sans-serif;

font-family: 'Bookman Old Style', serif;

font-family: ‘Bookman Old Style’, serif;

font-family: 'Comic Sans MS', cursive;

font-family: ‘Comic Sans MS’, cursive;

font-family: Courier, monospace;

font-family: Courier, monospace;

font-family: 'Courier New', Courier, monospace;

font-family: ‘Courier New’, Courier, monospace;

font-family: Garamond, serif;

font-family: Garamond, serif;

font-family: Georgia, serif;

font-family: Georgia, serif;

font-family: Impact, Charcoal, sans-serif;

font-family: Impact, Charcoal, sans-serif;

font-family: 'Lucida Console', Monaco, monospace;

font-family: ‘Lucida Console’, Monaco, monospace;

font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;

font-family: 'MS Sans Serif', Geneva, sans-serif;

font-family: ‘MS Sans Serif’, Geneva, sans-serif;

font-family: 'MS Serif', 'New York', sans-serif;

font-family: ‘MS Serif’, ‘New York’, sans-serif;

font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;

font-family: Symbol, sans-serif;

font-family: Symbol, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

font-family: 'Times New Roman', Times, serif;

font-family: ‘Times New Roman’, Times, serif;

font-family: 'Trebuchet MS', Helvetica, sans-serif;

font-family: ‘Trebuchet MS’, Helvetica, sans-serif;

font-family: Verdana, Geneva, sans-serif;

font-family: Verdana, Geneva, sans-serif;

font-family: Webdings, sans-serif;

font-family: Webdings, sans-serif;

font-family: Wingdings, 'Zapf Dingbats', sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

[1]: http://www.csslab.cl/2010/11/30/mas-y-mejores-tipografias-con-font-face/ “Enlace en CSSLab a “Más y mejores tipografías con @font-face””

Aleatoriedad en LESS

Thu, 10 Jul 2014 15:36:58 +0000

Una de las muchas ventajas de los CSS pre-processors es permitir utilizar JavaScript nativamente -bueno, el pre-processor mismo está escrito en JavaScript– y con ello extender su uso antes de procesar el archivo y transformarlo en nuestro querido .css.

En este artículo mostraré varios mixins que permiten generar algún grado de aleatoriedad (random) dado cierto tipo de valor que necesites como por ejemplo, usándolos para calcular algún otro valor ya definido. Por supuesto puedes extenderlos, llevándolos a tus propias necesidades:

Número aleatorio

/* makeRandom: Mixin para generar un número aleatorio int debe ser 0 ó 1, 1 para hacerlo entero */ .makeRandom(@min: 0, @max: @min+1, @int: 0) { .checkInt() { @getNum: `Math.random() * (@{max} - @{min} + @{int})`; @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`); } .checkInt(); @randNum: @base + @min; } /* Uso: */ .rand1 { .makeRandom(); /* random decimal entre 0 - 1 */ random-number: @randNum; } .rand2 { .makeRandom(@max: 2); /* random decimal entre 0 - 2 */ random-number: @randNum; } .rand3 { .makeRandom(10, 20, 1); /* random entero entre 10 - 20 */ random-number: @randNum; }

Gist: makeRandom()

Aleatorio de un arreglo

/* Definiendo algunas variables de colores en este caso */ @blue: #009be1; @green: #64c200; @red: #ff1842; @orange: #ffbf00; @yellow: #ffd400; /* Creando el arreglo */ @colors: '@{green}','@{blue}','@{red}','@{orange}','@{yellow}'; /* randomFromArray: Mixin para elegir un elemento aleatorio de un arreglo */ .randomFromArray(@min: 1, @max: length(@colors), @int: 0) { @getNum: `Math.random() * (@{max} - @{min} + @{int})`; @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`); @randNum: floor( @base + @min ); @color: e( extract(@colors, @randNum) ); } /* Uso:*/ body { .randomFromArray(); background-color: @color; }

Gist: randomFromArray()

Generador de color HEX aleatorio

/* randomColor: Mixin para crear aleatoriamente una hexacromía para color */ .randomColor(){ @randomColor: `Math.floor(Math.random()*16777215).toString(16)`; @colorHex: e(@randomColor); @color: ~"#@{colorHex}"; } /* Uso:*/ body { .randomColor(); background-color: @color; }

Gist: randomColor()

Estilos para IE9, IE10 e IE11

Wed, 18 Jun 2014 23:15:53 +0000

Desde IE10 quer ya no existen los [comentarios condicionales][1], ese útil invento de Microsoft para que nosotros desarrolladores front-end pudiéramos lidiar con los estilos específicos para IE5, 6, 7, 8…. y 9.

Los quitaron porque creían que con IE10 todo estaba solucionado y volvían a abrazar los estándares, lo que fue en parte cierto. Pero quedan detalles por solucionar y ante ello, encontré un útil [hack][2] para permitir estilos específicos para IE9, IE10 e IE11:

@media screen and (min-width:0\0) { /* Tus estilos CSS para IE9, IE10, IE11 */ }

… pero hay más …

@media \0screen\,screen\9 { /* Tus estilos CSS para IE6, IE7, IE8 */ }

@media \0screen { /* Tus estilos CSS para IE8 */ }

@media screen\0 { /* Tus estilos CSS para IE8, IE9, IE10 */ }

Link:

[Moving IE specific CSS into @media blocks | keithclark.co.uk][3]

[1]: http://www.csslab.cl/?s=comentarios+condicionales “Enlace en CSSLab a “Comentarios Condicionales”” [2]: http://www.csslab.cl/categoria/hacks/ “Enlace en CSSlab a “Hacks”” [3]: http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/ “Enlace externo a “Moving IE specific CSS into @media blocks | keithclark.co.uk””

Triángulos con CSS: LESS Mixin

Tue, 10 Jun 2014 19:06:55 +0000

Crear formas geométricas con puro CSS y 1 elemento HTML ha sido una tarea creada hace años ya y que tiene recopilaciones varias de métodos y usos. Personalmente para crear triángulos con CSS uso un generador genial que espero nunca lo bajen: CSS triangle generator.

A raíz de su constante uso, creé un mixin para LESS que me permite crear triángulos equilátero, isósceles y escaleno con sólo variar los valores de ancho/alto y dirección:

Uso

Llama el mixin en tu sentencia CSS y entrégale los valores que necesitas:

.triangle(direccion,ancho,alto,color);

Dirección: valores

top

bottom

left

right

topright

topleft

bottomright

bottomleft

Ejemplo: básico

@tamano: 50px; @color: red; .basico { .triangle(bottomright,@tamano,@tamano,@color); }

Ejemplo: avanzado

@tamano: 50px; @color: red; .avanzado { width: @tamano*2; height: @tamano; line-height: @tamano; background-color: @color; position: relative; &:after { position: absolute; left: 0; top: -@tamano; .triangle(top,@tamano,@tamano,@color); } &:before { position: absolute; left: 0; top: @tamano; .triangle(topleft,@tamano*2,@tamano*2,@color); } }

Ver en GitHub

*actualización: Gracias a Félix Ortega por traducir el mixin a SASS:

3D CSS3 transform con bordes dentados en Firefox

Fri, 16 May 2014 13:51:34 +0000

Sucede que creamos lindos estilos para elemento con CSS3 y queremos aplicar la propiedad transform para darle profundidad 3D. Observamos que ocurre lo siguiente en Firefox:

Solución:

Agregar la propiedad outline con valor transparente ó con el mismo color del fondo.

outline: 1px solid transparent;

Automatización de tareas para proyectos en Front-End

Mon, 07 Apr 2014 15:21:37 +0000

GruntJS es la herramienta de automatización de tareas escrita en JavaScript que más crece actualmente. Es robusta y está activamente siendo mejorada, y sólo requiere NodeJS para funcionar. Su fortaleza está en crear rutinas automatizadas para procesos repetitivos, como por ejemplo: compilar un archivo LESS/SCSS/HAML/Handlebars/Liquid, minificar archivos .css y .js, concatenar librerías .js, comprimir imágenes, recargar el browser cada vez que hayan nuevos cambios entre muchos otros que se te puedan ocurrir.

En esta ocasión mostraré un sencillo flujo que pueden utilizar para proyectos front-end; es un buen comienzo para quienes no están familiarizados aún con su utilidad y el uso cotidiano del Terminal/Consola.

Primero, debes tener lo fundamental para funcionar:

NodeJS (descargar e instalar)

LiveReload (extensión de Chrome y otros navegadores)

Grunt command line interface (CLI): se instala através del comando de terminal:
$ sudo npm install -g grunt-cli

Descargar desde GitHub

package.json

Es el archivo que contiene los nombres de las librerías que utilizaremos para automatizar nuestras tareas recurrentes y que reside en la raíz del proyecto. Aquí están el nombre y la versión de cada plugin que necesitaremos, de una larga lista de plugins existentes.

Gruntfile.js

Es el archivo base con el cual crearemos las tareas que necesitamos corra GruntJS por nosotros y que reside en la raíz del proyecto junto a package.json. En este archivo están definidas los plugins que utilizaremos y cómo deben trabajar, en esta ocasión incluyo los siguientes:

uglify minifica archivos JavaScript

imagemin comprime imágenes

less compila y minifica archivos .less

watch corre tareas definidas cada vez que se realizan cambios a ellas, en este caso todas las anteriores.

ftp-deploy realiza subida de los archivos que indiques a un servidor definido a través de FTP.

Uso

El directorio base se llama /proyecto-simple y contiene todo lo necesario para comenzar a trabajar. Suponiendo que trabajas en un servidor local, la estructura básica de archivos es la siguiente:

/proyecto-simple/Gruntfile.js /proyecto-simple/package.json /proyecto-simple/ftppass (este archivo cuando necesario debes renombrarlo a .ftppass) /proyecto-simple/index.html

El directorio donde trabajarás tus assets se llama /assets-dev y contiene:

/proyecto-simple/assets-dev/js/ /proyecto-simple/assets-dev/less/ /proyecto-simple/assets-dev/less/inc/ /proyecto-simple/assets-dev/images/

Los que después de procesados por GruntJS residirán en /assets y son los que debes llamar desde tus archivos HTML:

/proyecto-simple/assets/js/ /proyecto-simple/assets/js/libs/ /proyecto-simple/assets/css/ /proyecto-simple/assets/images/

Para comenzar a trabajar, en Terminal/Consola debes estar en el directorio que estés trabajando:

$ cd /path/to/proyecto-simple/

Para instalar los plugins a utilizarse y que están definidos en package.json:

$ sudo npm install

Con esto se llamarán a todos los repositorios e instalará los paquetes necesarios para hacer las tareas que tenemos asignadas. Esto puede tomar unos minutos y creará un directorio /node_modules en la raíz de tu proyecto. Este directorio sólo le es útil a GruntJS, no debemos utilizarlo en ambiente productivo.

Antes de correr GruntJS, abre Gruntfile.js y revisa los path que concuerden con los que estés trabajando, principamente los relacionados con ftp-deploy (si lo vas a utilizar). Si todo concuerda, acciona el comando:

$ grunt

El cual comenzará a procesar las tareas y se quedará en watch esperando cambios o actualizaciones en los archivos. En este momento debes llamar el directorio de trabajo en tu browser (a través de tu servidor web local) y activar LiveReload. Cuando el ícono cambie es porque está sincronizado con GruntJS y a cada cambio en archivos html/less/js/images en tu proyecto, watch hará que se actualicen los archivos y LiveReload recargará el browser por tí.

Si hay un error en tu sintaxis lo más probable es que GruntJS te avise y deje de correr, por lo que debes corregirlo antes de continuar.

Deploy

Se adjunta el plugin ftp-deploy el que debe utilizarse cuando necesitas mover archivos a tu servidor productivo. Se configura en Gruntfile.js la URL, puerto y dónde se lee el u/p de acceso. Éstos se guardan en un archivo ftppass el que se adjunta, pero en tu directorio de trabajo debe guardarse como archivo oculto .ftppass. Además, está pre-configurado los archivos y directorios que se excluyen, como Gruntfile.js, package.json, /assets-dev y /node_modules entre otros. Cuando necesites subir a productivo tus archivos, desactivas el watch de GruntJS (⌘+. ó ctrl+.) y envías todos tus archivos al servidor con el siguiente comando:

$ grunt ftp-deploy

Happy Coding 🙂

Animaciones CSS3 al fin del ciclo

Wed, 26 Mar 2014 21:19:32 +0000

Existe una propiedad CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con [animaciones CSS3][1]. Supongamos que estamos creando una animación simple, que no necesitamos sea cíclica, por lo tanto, la ejecutaremos sólo 1 vez. La escribimos y la aplicamos, como a continuación:

/* creando la animación */ @keyframes gira-y-quedate { from { transform: rotate(0deg); } to { transform: rotate(160deg); } }

#elemento { animation-name: gira-y-quedate; animation-duration: 1s; animation-iteration-count 1; }

 Como notarán al terminar la animación esperamos que quede con la rotación de 160 grados y se detenga pero lo que sucede es que vuelve al keyframe inicial, a los 0 grados. Ese es el comportamiento por defecto de la propiedad animation-fill-mode, la cual especifica cómo debe aplicarse una animación CSS al elemento antes y después que se ejecute. Los valores de esta propiedad son: <ul> <li> none (por defecto, la animación no aplicará ningún estilo al elemento antes ó despues de ejecutarse) </li> <li> forwards (el elemento mantendrá su(s) valor(es) en el último keyframe de su animación) </li> <li> backwards (el elemento aplicará su(s) valor(es) definidos en el primer keyframe de su animación) </li> <li> both (la animación aplicará las propiedades de fowards y backwards, antes y después de ejecutarse) </li> </ul> Por lo que aplicando correctamente la propiedad al llamado de la animación obtenemos el resultado esperado: <pre><code class="language-markup">#elemento { 

animation-name: gira-y-quedate; animation-duration: 1s; animation-iteration-count 1; animation-fill-mode: forwards; }

<div class="ejemploancho"> <div id="elemento-ejemplo2"> </div> <button class="btn_animar verejemplo" rel="elemento-ejemplo2">Animar</button> </div> <h4> Link: </h4> <ul> <li> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state" target="_blank" title="Enlace externo a "animation-play-state | MDN"">animation-play-state | MDN</a> </li> </ul> 

[1]: http://www.csslab.cl/2011/06/21/animaciones-css3-avanzadas/ “Enlace en CSSLab a “Animaciones CSS3 avanzadas””

Checkboxes con estilo

Mon, 17 Mar 2014 14:12:29 +0000

Los formularios son una de las razones de porque el mundo corporativo entró a Internet: captura de datos de usuarios. Es la forma más fácil y rápida de obtener ese ansiado contacto, con el cual puedo convertir a ese usuario en mi cliente. Para los fabricantes de browsers, la visualización de los campos de formularios no ha sido normalizada y cada uno lo hace a su criterio, incluso con diferencias entre el mismo browser pero en diferentes plataformas.

Técnica 1: CSS + JavaScript (IE8+)

Para darle un diseño mejor y uniforme entre browsers/plataformas acudimos a un pequeño truco que involucra CSS y una pizca de JavaScript para el manejo de clases.

Para un simple y sencillo formulario con algunos input de tipo checkbox (el uso de la class=“check” es para diferenciarlo de otros campos puedan existir en el mismo formulario):

<fieldset> <label class="check" for="check1"> <input type="checkbox" checked="checked" id="check1"> Check 1 </label> <label class="check" for="check2"> <input type="checkbox" id="check2"> Check 2 </label> <label class="check" for="check3"> <input type="checkbox" id="check3"> Check 3 </label> </fieldset>

La técnica consiste en envolver el input=“checkbox” dentro del label, con tal de hacerlo completo clickeable. Así, escondemos con CSS el campo y trabajamos sólo con el label, habilitando al click en cada uno la inyección de una class=“c_on” cuando el checkbox está siendo seleccionado.

label.check { display: block; cursor: pointer; padding-left: 26px; background: url('check_off.png') left center no-repeat; } label.check input { position: absolute; left: -9999px; } label.check.c_on { background: url('check_on.png') left center no-repeat; }

Finalmente acudimos a JavaScript para hacer el cambio de clase para mostrar tal o cual imagen:

var input = document.querySelectorAll("label.check input"); if(input !== null) { [].forEach.call(input, function(el) { if(el.checked) { el.parentNode.classList.add('c_on'); } el.addEventListener("click", function(event) { event.preventDefault(); el.parentNode.classList.toggle('c_on'); }, false); }); }

Técnica 2: CSS3 (IE9+)

Para esta técnica reordenamos el HTML ya que trabajaremos con [selectores avanzados de atributos][1] (siblings):

<fieldset> <input type="checkbox" id="check1" checked="checked"> <label for="check1">Check 1</label> <input type="checkbox" id="check2"> <label for="check2">Check 2</label> <input type="checkbox" id="check3"> <label for="check3">Check 3</label> </fieldset>

El CSS es extenso, ya que se trabaja con pseudo-clases :checked y :not(:checked), además de pseudo-elemento :after como se lee a continuación:

[type="checkbox"] { position: absolute; left: -9999px; } [type="checkbox"] + label:after { content: ''; position: absolute; } [type="checkbox"] + label { display: block; position: relative; padding-left: 26px; cursor: pointer; line-height: 36px; font-size: 28px; color: #e74c3c; text-shadow: #2c3e50 2px 2px 1px; transition: color .3s; } [type="checkbox"] + label:after { width: 30px; height: 30px; transition: all .2s; top: 0; left: 0; } /* OFF */ [type="checkbox"]:not(:checked) + label:after { background: url('check_off.png') left center no-repeat; } /* ON */ [type="checkbox"]:checked + label { color: #fff; } [type="checkbox"]:checked + label:after { background: url('check_on.png') left center no-repeat; }

[1]: http://www.csslab.cl/2007/12/06/la-descendencia-del-css/ “Enlace en CSSLab a “La descendencia del CSS””

Auto-prefix en Sass

Wed, 05 Mar 2014 21:22:09 +0000

Utilizar pre-procesadores CSS se ha vuelto una necesidad en la actualidad, ya que sus múltiples ventajas hacen que no exista excusa para seguir escribiendo CSS puro. Lo mejor es que no intervenimos el lenguaje, sólo lo escribimos más eficiente.

Ahora les presento un útil mixin para Sass que ayuda a lidiar con los prefijos propietarios de algunas propiedades CSS3. Mientras de a poco los fabricantes de browsers los van eliminando, aún tenemos que utilizarlos por compatibilidad retroactiva.

Mixin:

$prefixes: "webkit", "moz", "ms", "o", "none"; @mixin prefix($property, $arguments) { @each $prefix in $prefixes { @if $prefix == "none" { #{$property}: $arguments; } @else { -#{$prefix}-#{$property}: $arguments; } } }

Uso:

elemento { @include prefix(propiedad, valor); }

En el browser renderiza:

elemento { -webkit-propiedad: valor; -moz-propiedad: valor; -ms-propiedad: valor; -o-propiedad: valor; propiedad: valor; }

jQuery geoRegionalización

Wed, 22 Jan 2014 16:11:40 +0000

Este sencillo plugin permite generar dependencia entre 2 ). En general este texto ya tiene un estilo según el browser que utilizamos y se acomoda a utilizar este estilo preexistente:

Pero hay una propiedad CSS -propietaria- que permite cambiar el estilo al texto que ingresas a través de placeholder:

input::-webkit-input-placeholder { color: red; } input:-moz-placeholder { color: red; } input:-ms-input-placeholder { color: red; }

HTML5: el atributo download

Mon, 23 Sep 2013 15:58:47 +0000

HTML 5 trae el nuevo atributo download para enlaces. Cuando utilizado dentro de un , este atributo puede ir definiéndose a sí mismo (lo que causará que se descargue solamente el archivo) ó puede contener el nombre del archivo a ser descargado, sin la ruta asociada la que va como de costumbre dentro del atributo href="". Con esto definido el archivo linkeado será forzado a ser descargado.

<a href="archivos/pdf/informe.pdf" download>Descargar informe.pdf [66kb]</a>

Ejemplo: descargar informe.pdf

<a href="archivos/pdf/informe.pdf" download="mi-lindo-informe">Descargar mi-lindo-informe.pdf [66kb]</a>

Ejemplo: descargar mi-lindo-informe.pdf

Su soporte aún es limitado, siendo Firefox, Opera y Chrome los únicos que por ahora responden a su uso. Y sólo browsers desktop por el momento.

Links:

Can I Use – Download attribute

Downloading resources in HTML5: a[download]

overflow: scroll en iOS

Tue, 20 Aug 2013 20:09:19 +0000

En desktop, para tener un elemento escroleable basta con que declares un alto fijo y defines overflow: auto | overflow: scroll y si el contenido interior es mayor que el alto aparecerá la barra de scroll automáticamente. En browsers móviles y tablets ocurre lo mismo pero la sensación es muy inferior ya que el touch/drag es errático y no incluye el movimiento elástico que estamos acostumbrado al scroll en estos dispositivos touch. En el siguiente video pueden ver claramente a lo que me refiero (en el cuadro de la derecha tiene aplicada la propiedad mágica):

-webkit-overflow-scrolling: touch

Esta propiedad creada por Apple especialmente para Safari Mobile permite precisamente lo que no es soportado por este navegador: crear un scroll a un elemento sin interferir en el el registro del touch dentro de la ventana misma del browser. En pocas palabras, permite un scroll interno (con momentum) dentro de una página que ya tiene un scroll genérico, ya que en dispositivos móviles el evento touch está asociado a la ventana completa. Esta propiedad fue agregada desde iOS 5.1.

[Ver Ejemplo (en dispositivos touch)][1]{.verejemplo}

Links:

Scrollability

PastryKit

ScrollFix

iScroll

[1]: http://www.csslab.cl/ejemplos/ipad-scroll/ejemplo.html “Enlace en CSSLab a “Ejemplo Overflow: Scroll en iOS””

Web y especialización

Fri, 19 Jul 2013 21:18:19 +0000

Oye Jorge, tengo ganas tomar un diplomado. ¿Sabes de alguno que me recomiendes?
Hey, voy a hacer un postgrado en XXX de YYY en la Universidad ZZZ, ¿Qué te parece?

Ambos casos me han sucedido más de una vez y mi respuesta a ellas ha sido algo como: «Mira, nosé, no estoy actualizado de la enseñanza en instituciones en nuestro oficio» junto con un «¡pero seguro te irá bien!». Pero por interno pienso: «¿Para qué pierden tiempo y dinero? ¿Vale la pena un curso para aprender conocimiento que está ahí, libre, actualizado, complejo pero no ‘certificado’?».

Mi [inquietud por el sistema educacional][1] no es nuevo y [ha sido enunciado y discutido en este mismo sitio][2], con resultado insólito: fuí invitado a hacer clases en una universidad. Confieso que fue una experiencia única; no me lo esperaba y sin embargo fue muy gratificante. Finalmente fueron 4 años en varios cursos, desde alumnos de primer año hasta a punto de egresar, con diferentes tipos de satisfacciones y que ahora muchos son profesionales. Pero en el fondo, experiencia.

Una noche mi hijo me pide: «Papi, quiero comer tortilla de atún»– y yo rápidamente pienso: «sé que he visto como se hace pero A-HO-RA no sé como hacerlo.» Para ampliar mi angustia Diego (mi hijo) replica «que quede como los de la Blanca, ¡son los mejores!» (tema aparte quién es Blanca, pero hace buenas tortillas). Quedamos en que la llamaríamos para que nos explique su receta, pero mi orgullo me decía «busca tu propia receta», lo que se tradujo en «googlea y dale tu toque personal». Finalmente, hice la tortilla de atún y le puse algo más (orégano, ajinomoto y cilantro picado) y el veredicto fue: «¡Muy rico, diferente al de la Blanca!». Orgullo para mí 😀

Según mi visión existen 3 tipos de profesionales:

El que sabe y hace la tarea designada.

El que no sabe y resuelve la tarea designada por sus propios medios (lógica).

El que no sabe y busca que le enseñen como hacer la tarea designada (Internet, cursos, esfuerzo propio y ojalá perseverancia).

Para el primer tipo:

¡genial! pero no le irá siempre bien, nadie se las sabe todo todas las veces.

Para el segundo:

¡dotado! pero no siempre le irá bien, seguro en alguna tarea no tendrá las habilidades.

Para el tercero:

ojalá puedas googlear y aprender, sino te saldrá caro (ó busca a alguien que te enseñe, ó busca un curso, ó dile a tu empleador que te espere porque tienes que aprender lo que te pidieron para después ver si puedes aplicarlo).

Siempre he valorado más la experiencia por sobre los papeles. «Demuéstrame lo que sabes» es mi consigna cuando trabajo con alguien; aunque no lo explicite es lo que mantengo en mente. Felizmente he podido trabajar con gente, profesionales, del más alto nivel técnico, ético y profesional. Y de ellos, lo que me han demostrado:

0% tiene estudios de postgrado.

50% tiene estudios universitarios terminados.

50% tiene estudios universitarios incompletos.

25% estudió lo que ejerce actualmente.

El conocimiento es libre y está disponible, tómalo. En Chile, el diploma puede ser aún un peso en ciertas empresas, pero todo depende de quién te contrate. En mi experiencia, nunca me han pedido validar mi título profesional (salvo para hacer clases en universidad). Conozco empresas que te piden tener y validar un título, pero ese diploma ¿Qué mide? ¿Qué profesores te miden? ¿Qué escuela te mide? ¿Están vigentes, trabajan en el medio, saben que Mozilla dejó OGG por WebM? Trabajamos en un medio muy cambiante, lo que sabes hoy próxima semana cambia y próximo mes ya es obsoleto. Lo que aprendes en un medio formal de aprendizaje no es suficiente para medir el conocimiento que tienes, pero sí para medir el método que puedes tener para aprender nuevos conocimientos. Para mí esa es la diferencia.

Últimas líneas: lee, conéctate, comparte, aprende. Si te quedas atrás vendrá alguien más que te sobrepasará sin pensarlo. Nuestro medio es muy cambiante, se actualiza cada hora. Github, RSS, Twitter son los medios para aprender lo último. Universidades y cursos son los que te dan metodología y un papel firmado que dice que puedes seguir procesos. Te dan herramientas pero debes saber manejarlas en la práctica. Y mantenerlas actualizadas.

Aún así prefiero Coursera, Codecademy, Khan Academy …

No dejaré que el resultado de un exámen decida mi futuro.

Si tienes 6 minutos 10 segundos de tiempo no los desperdicies, dale play al siguiente video.

[1]: http://www.csslab.cl/2006/07/03/html-y-la-ensenanza/ “Enlace en CSSLab.cl a “HTML y la enseñanza”” [2]: http://www.csslab.cl/2007/07/18/html-y-la-ensenanza-2/ “Enlace en CSSLab.cl a “HTML y la enseñanza 2"”

Íconos y pantallas iPhone/iPad

Tue, 18 Jun 2013 23:11:21 +0000

Para un proyecto espontáneo que se me ocurrió hacer, utilicé los íconos y pantallas que recomienda Apple para todos los sitios que requieran ser visualizados en sus teléfonos y tabletas. En mis tiempos mozos, [cuando comencé a jugar con web móvil][1] sólo existía 1 tamaño y 1 resolución. Años han pasado y a continuación está la lista completa si quieres tener todo cubierto: icons (resoluciones) y splash-screens (resoluciones y orientación).

 <link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">  <link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">  <link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">  <link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">  <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">  <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">  <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">  <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">  <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">  <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

Por defecto Safari agregará bordes redondos y un fino brillo al ícono, similar a cómo son tratados los íconos de aplicativos. Desde iOS 2 tienes la posibilidad de que el sistema no se comporte de esta manera; basta con agregar precomposed al nombre del archivo, ó al nombre del rel:

<link href="apple-touch-icon-precomposed" href=" apple-touch-icon-precomposed.png">

Link:

[Mulitple “apple-touch-startup-image” resolutions for iOS | StackOverflow][2]

[Apple Webpage Touch Icons][3]

[1]: http://www.csslab.cl/2008/07/10/desarrollos-web-para-iphone/ “Enlace en CSSLab.cl a “Desarrollos Web para iPhone”” [2]: http://stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad “Enlace externo a StackOverflow” [3]: http://useyourloaf.com/blog/2013/02/23/apple-webpage-icons.html “Enlace externo a Use Your Loaf”

IE v/s console

Thu, 13 Jun 2013 16:02:12 +0000

¿Cansado de soportar IE? Te entiendo, pero aún hay clientes que piden que sus proyectos se vean en estos browsers antiguos. Frustraciones aparte, cuando escribes Javascript y usas console.log() para debuggear tu código en la consola del browser, es usual que éstas funcionalidades se quiebren en IE8-.

console.log('IE8- dará error por esto');

Solución 1

window.console && console.log('IE seguirá funcionando ahora, pero no mostrará nada en la consola. ¡Se lo pierde!');

Solución 2

Verifica si console existe y si es undefined, crea una vacía:

if ( ! window.console ) console = { log: function(){} };

Después utiliza console.log como quieras, no entregará error en IE:

console.log('IE seguirá ignorando console.log');

Link: Testing for console.log statements in IE | StackOverflow

Giveaway Books

Fri, 24 May 2013 02:30:37 +0000

Sorteo realizado, los libros fueron enviados por correo. Espero sean aprovechados. Gracias por interesarse, apenas tenga más leídos los vuelvo a distribuir.

Pantone Web Color
Edgar Méndez, México

The Psychology Of…
Pato Mas, Chile

No Me Hagas Pensar
Leticia Chamorro, Paraguay

[ES] Tengo unos libros que acumulan polvo y seguro será más útil a otras personas que a mi estante. Quiero regalarlos, donde sea que estén en este planeta, me encargo de enviarlos y el costo es por mi cuenta. La condición es que sea leído por quien se lo adjudique y traspasado a algún conocido interesado en el mismo tema, para que no siga olvidado en otro oscuro e ineficiente librero.

Modalidad: Cada libro tiene una detallada descripción y al final hay un formulario donde pueden elegir el que más te interese. Inscríbete en el que te anime, y sortearé entre los inscritos en cada uno.

[PT] Tenho uns livros que só acumulam pó y tenho certeza que terá mais utilizade a outras pessoas que à meu estante. Quero dar eles de presente, onde seja que morem no planeta, eu corro com os gastos. Minha condição é que seja lido e depois entregado a outra pessoa que esteja interessado no mesmo tema.

Modalidade: Cada livro tem uma descrição detalhada e no final um formulário onde preenchem os dados com o livro do seu interesse. Vou sortear e contactar entre os inscritos em cada livro.

Pantone Web Color: Resource Kit

Idioma: português
Año: 1997
Estado: usado, bueno.
Alcance: [ES] estudiantes, personas que quieran aprender a combinar y generar gráficas con matices orientados a web. Muy didáctico.
[PT] estudantes, pessoas que queram aprender a combinar e gerar gráficas com matizes orientados à web. Muito didático.

La Filosofía de House

Idioma: español
Año: 2010
Estado: usado.
Alcance: profesionales, personas con mentalidad orientada al pragmatismo filosófico, que se cuestionan desde el desayuno hasta sus propios sueños. Seguidores de la seria House, pero más aún, seguidores de un estado mental de insatisfacción hacia el mundo material e inmaterial. Heidegger, Nietzsche, Spinoza y Nicholas Tesla son tus amigos.

A cabeça de Steve Jobs

Idioma: português
Año: 2008
Estado: excelente.
Alcance: [ES] Jobs generó cambios en muchos paradigmas, y en este libro se describe las razones de porqué él actuó como lo hizo. No justifica pero muestra todo lo necesario para entender la genial mentalidad de un emprendedor único en su especie.
[PT] Jobs gerou mudanças em muitos paradigmas, e este livro descreve as razões de por quê ele atuou como ele fez. Não justifica mais mostra tudo o necessário para entender a genial mentalidade de um empreendedor únido em sua espécie.

The Psychology of Human-Computer Interaction

Idioma: Inglés
Año: 1983
Estado: [ES] Excelente, usado y rayado por mí mismo. [PT] Excelente, usado e riscado por mim mesmo.
Alcance: [ES] Compré este libro porque fue revisado por Jeff Raskin, el ideador de la interfaz gráfica de Mac OS. ES INCREÍBLE, una joya donde muestran toda la experiencia del equipo XEROX PARK de 1981 por lograr la perfección en lo que creían serían las nuevas interfaces digitales: monitor-mouse-teclado. MUCHA TEORÍA.
[PT] Comprei este livro porque foi revisado por Jeff Raskin, o idealista tras a interfaz de Mac OS. É INCRÍVEL, uma jóia onde mostram toda a experiência do time XEROX PARK de 1981 por obter a perfeição en o que pensavam sería as novas interfaces digitais: monitor-mouse-teclado. MUITA TEORÍA.

Não me faça pensar

Idioma: Português
Año: 2006
Estado: Usado y prestado un par de veces.
Alcance: [ES] Imperdible, si trabajas con web TIENES QUE LEERLO POR LO MENOS DOS VECES EN TU VIDA. Muy didáctico, muchas ilustraciones y ejemplos, perfecto para un viaje corto de unas 4 horas. Imprescindible.
[PT] Imperdível, se você trabalha com web TEM QUE TER E LER PELO MENOS DUAZ VEZES NA SUA VIDA. Muito didático, ilustrado e com exemplos, perfeito para uma viagem curta de umas 4 horas. Imprescindível.

¿Qué no es HTML5?

Wed, 15 May 2013 02:40:32 +0000

Es un acrónimo ya muy utilizado y, la mayoría de las veces, mal denominado. Conocemos lo que es, trabajamos con él a diario, pero hay mucha gente que aún no conoce el real significado y por ende, sus limitaciones y alcances.

Esta presentación la trabajé hace un año, precisamente para mostrar a través de qué no es HTML5, lo que realmente es. Lo hice al contrario para que al ser comprendido quede más profundo lo aprendido.

Ver Presentación

Resumiendo, HTML5:

No es AJAX

No es Flash

No es CSS3

No son WebSockets

No es jQuery

No es todo Mobile

es más que sólo declarar un doctype

No es SVG

No es para IE

Por ende:

Es otra familia (más) de estándares para el desarrollo de aplicaciones y sitios web.

Conformada por HTML, JavaScript y CSS3 que combinadas son soportadas de forma nativa por los dispositivos.

Ya no necesitas indicar el tipo de doctype, script ó el link.

Contiene nuevas etiquetas de marcado semánticas y dedicadas a la indexación.

audio y video finalmente son nativos.

Llega canvas para manejo gráfico avanzado.

Permite animaciones aceleradas con uso de GPU y almacenamiento de datos en el cliente mediante LocalStorage y el uso nativo de hardware a través de WebAPI’s.

Nuevos elementos e interacciones: drag&drop, browser history, placeholder.

Review: CSS Hat

Mon, 06 May 2013 19:23:09 +0000

Codear HTML/CSS es una tarea cada vez más requerida, y más exigente debido a lo rápido que avanza la tecnología web (gracias al aporte de muchos contribuidores anónimos, y al silent upgrade de los browsers entre otros factores). Por esto se agradece cuando llega una herramienta que nos facilite la vida y mantenga nuestro trabajo pulcro y por ende, valioso.

Generadores de código fuente automáticos, pócimas mágicas que hacen el trabajo por nosotros existen por miles. Desde esas primeras versiones de Microsoft Frontpage y Macromedia Dreamweaver, nos han inundado de basura y han ayudado a destruir un oficio que, actualmente, ha sido reconocido como esencial y hay cada vez más personas y empresas que valoran el clean & lightweight hand code.

En esta ocasión mostraré mis impresiones sobre un plugin de Photoshop que realmente me impresionó tanto por su facilidad de uso como por el preciso código que genera. Llegué a CSS Hat por una promoción de Cyber Monday a fines del 2012. Estaba tan barato que lo compré para probarlo, y afortunadamente obtuvo la mejor de mis impresiones. Desde su facilidad de instalación (como cualquier plugin de Photoshop: ó le haces doble click ó lo abres con tu Extensions Manager) hasta su modo de uso.

CSS Hat te entrega, en su panel dentro de Photoshop, el código CSS generado a partir de una capa con estilos definidos en ella.

Veamos el siguiente ejemplo: tenemos un bello y estiloso botón diseñado en Photoshop. Es importante que este botón tenga todos los estilos y efectos definidos como estilo de capa, por lo que el diseñador debe tener este tipo de consideración al definir su diseño. Con CSS Hat, al ir seleccionado cada capa mostrará el código CSS para ese estilo, instantáneamente.

Como notarás, tiene soporte para los pre-procesadores CSS más utilizados, y tiene soporte para sus propias librerías de mixins para hacerte el trabajo más fácil (los invito a mirar el de LESS, tiene unos de los mixins más enfermos que he visto en mi vida).

Creo que con eso he dicho suficiente, CSS Hat es una herramienta tan pequeña y útil que el precio es más que justo. Puede acelerar tu productividad considerablemente, y con el soporte para LESS, SCSS, SASS y Stylus lo hace increíble.

CSS Hat[][1]

[1]: CSS Hat

Reemplazar el texto pero mantener el elemento hermano con jQuery

Wed, 17 Apr 2013 15:03:30 +0000

Problema: WordPress imprime un código HTML con el siguiente formato y necesito modificar sólo el texto, manteniendo el checkbox:

 <label> <input name="rememberme" type="checkbox" id="rememberme">  Recuérdame  </label> 

Primera solución: modificar el core del CMS, lo que no me interesa. ✖

Segunda solución: modificar el texto con jQuery, manteniendo el checkbox. ✔

Test 1: lo obvio, reemplazar el texto con text() ✖

$('.login-remember label').text('Recordámelo');

Ver ejemplo 1

En este caso, apesar de sólo querer reemplazar el texto también reemplaza el checkbox.

Test 2: clonar el checkbox, reemplazar el texto con html() y volver a agregar el checkbox clonado ✔

var elemento = $('.login-remember label') var checkbox = elemento.find('input').clone(); elemento.html(' Recordámelo').prepend(checkbox);

Ver ejemplo 2

Efectivo, no importa dónde o cómo está el texto. Limpiamos todo y volvemos a construir lo que está dentro del label.

Test 3: buscar dentro del contenido del label donde está el texto y reemplazarlo ✔

$('label').contents().last()[0].textContent=' Recordámelo';

Ver ejemplo 3

Dependemos un poco del orden de los elementos dentro del label, pero es una sencilla solución.

¿Cuál es la mejor?

Lo dejo a criterio de cada uno, seguro hay una más rápida que otra. Finalmente no utilicé ninguna de las soluciones anteriores; edité el languages.po y volví a traducir el texto por el que quería. Pero el desafío fue interesante, y el aprendizaje quedó.

Movimiento del browser al arrastrar en móviles

Mon, 11 Mar 2013 17:00:23 +0000

Este es un comportamiento por defecto de los browsers para [móviles][1], el cual al hacer algún tipo de arrastre extremo dentro del (me refiero del extremo superior al inferior principalmente, ó si está en landscape de derecha a izquierda y viceversa) éste se mueve levemente con un efecto resorte, lo que eventualmente puede llegar a ser molesto si queremos concentrar nuestras interacciones en [eventos gestuales][2].

Para mejor entendimiento, play al siguiente video:

Tu browser es viejo, no soporta .

Abre ejemplo1.html en tu móvil, te sugiero usar el browser y no el lector de QR: http://www.csslab.cl/ejemplos/touchmove/ejemplo1.html

Para deshabilitar este comportamiento se necesita de una pizca de CSS y algo de JS:

html, body { height: 100%; overflow: hidden; }

document.body.addEventListener('touchmove', function (event) { event.preventDefault(); });

Con esto bloqueamos por completo el evento touch move a todo el body, permitiendo todo lo que sea tap (click en desktop). Queda en tí si quieres volver a habilitarlo en algún sector para, por ejemplo, hacer funcionar un carrusel de imágenes através de un swipe (deslizar de un lado al otro).

Tu browser es viejo, no soporta .

Abre ejemplo2.html en tu móvil, te sugiero usar el browser y no el lector de QR: http://www.csslab.cl/ejemplos/touchmove/ejemplo2.html

[1]: http://www.csslab.cl/categoria/mobile/ “Enlace en CSSLab.cl a “Categoría : Mobile”” [2]: http://www.csslab.cl/2010/07/28/haptica-en-ios/ “Enlace en CSSLab.cl a “Háptica en iOS””

Review: REWORK

Thu, 07 Feb 2013 15:07:01 +0000

REWORK
Jason Fried & David Henemeier Hansson (fundadores de 37Signals)

(No recuerdo cómo me decidí a encargar este libro, pero me impresionó que me llegara a mis manos dentro de 5 días, en plena época pre-navideña, punto para Amazon).

REWORK muestra de los orígenes de 37Signals de palabras de sus mismos fundadores. Esta empresa-notstartup estadounidense se hizo famosa mundialmente por su producto Basecamp utilizada por el 90% de las agencias y empresas orientadas a la web alrededor del mundo y por Rails, el framework favorito de quienes adoran Ruby. Pero no esperen que expliquen su modelo de negocios o cómo nació la idea; lo que entregan es mucho mejor: cómo hacer bien las cosas en una empresa web y minimizar los riesgos y las decisiones estúpidas. Tratan cómo han tomado buenos caminos, cómo han ido por malos y cómo dieron vuelta estas situaciones. Lecciones como en qué fijarse, qué ignorar, cómo no quedarse y cómo avanzar, filtrando tales o cuáles elementos y circunstancias… enseñanzas valiosas que se obtienen después de mucho prueba-error.

Con un lenguaje fácil de llevar y muy informal, se hace muy rápida la lectura de este libro de más de 260 páginas. Parece mucho pero no me tomó más de 3 horas terminarlo, es ideal para un viaje corto en bus/avión ó una tarde en la playa.

Si tienes ideas de algún producto ó servicio orientado a la web y nunca te has atrevido a ponerlas en práctica, este es tu libro. Si estás decidido a aventurarte con tu propio emprendimiento, este libro es para tí. Si ya estás en rueda de financiamiento con tu startup, no perderás nada en leerlo. Si llevas años emprendiendo, no leerás nada que ya no sepas.

Si a alguien aún le gusta los libros de papel, ~~cambio~~ regalo este libro a quien me invite una cerveza y aprovechamos de conversar sobre web un rato en algún bar en Santiago. Si hay interés lo coordinamos en por los comentarios de este _post_.

Layout Responsive / Adaptativo / Flexible

Mon, 04 Feb 2013 14:28:01 +0000

Nuevos conceptos pero no tan nuevas técnicas. La moda del diseño/desarrollo responsive hace necesaria una aclaración de algunas definiciones. Y qué mejor que hacerlo con un ejemplo utilizando las mismas técnicas descritas, para que puedan bucear por el código fuente.

Responsive

Acuñado en 2010 por Ethan Marcotte, corresponde a una grilla fluida que responde al cambio del ancho de un browser mediante mediaqueries, el cual incluye imágenes y videos.

Adaptativo

Rama del responsiveness, responde a múltiples versiones del mismo diseño que se adapta según el tamaño de la pantalla bajo diferentes anchos ya definidos.

Flexible

El más antiguo y soportado por todos los browsers, también denominado líquido. Usa unidades de medidas como porcentajes y no requiere mediaqueries.

[Ejemplo][1]{.verejemplo}

[1]: http://www.csslab.cl/ejemplos/responsive-adaptativo-flexible/ “Enlace en CSSLab a “Ejemplo Layout Responsive / Adaptativo / Flexible””

El evento onPaste

Wed, 30 Jan 2013 15:49:35 +0000

Eventualmente podrías tener un donde permitas al usuario pegar lo que tiene guardado en su clipboard. Quizás deseas impedir al usuario pegar contenido en un campo de formulario, por ejemplo, en uno de password. Para ambos casos existe un evento denominado onPaste. <h4 id="impedir-pegar">Impedir pegar:</h4> <pre class="language-markup"><code>onPaste="return false;"</code></pre> <h4 id="manipular-el-valor-de-lo-pegado">Manipular el valor de lo pegado:</h4> <pre class="language-markup"><code>onPaste="var e=this; setTimeout(function(){alert(e.value);}, 0);</code></pre> <blockquote> Debes usar un setTimeout debido a que el evento onPaste responde antes de que el contenido es pegado en el elemento, por lo que no tiene tiempo suficiente para manejarlo. setTimeout 0 es automáticamente recalculado a 4ms ya que es el valor mínimo en HTML5. </blockquote> [Ver ejemplo][1]{.verejemplo} [1]: <a href="http://www.csslab.cl/ejemplos/onpaste.html">http://www.csslab.cl/ejemplos/onpaste.html</a> “Enlace en CSSLab a “Ejemplo El evento onPaste”” </article> <article> <h1>Deshabilitar el autocomplete</h1> Mon, 14 Jan 2013 19:32:44 +0000 Los browsers crearon mejoras para que nosotros mortales podamos hacer tareas comunes de manera más fácil y fluída; es así como se creó el autocomplete de los campos de formularios, donde si ya has ingresado cierto dato en un <input> con un name respectivo y después en otro formulario con el mismo name el browser recordará lo que ingresaste y te lo sugerirá a medida que hagas focus o comiences a escribir en el campo (la única excepción es cuando el <input> es de tipo password). Bueno, supongamos que por seguridad no quiero que el browser recuerde esa información. Quizás estemos creando nuestro propio suggest ó autocomplete y no queremos que el del browser nos estorbe. Bueno, para eso de inventó el atributo autocomplete="" el que se declara de la siguiente manera: <pre class="language-markup"><code><form name="formejemplo" id="formejemplo" method="post" autocomplete="off" action="#"></form></code></pre> Además, puedes utilizar el atributo sólo en el <input> que prefieras no tenga autocomplete: <pre class="language-markup"><code><input name="username" autocomplete="off"></code></pre> [Ver ejemplo][1]{.verejemplo} Su soporte es amplio, utilícenlo tranquilamente. <h4 id="links">Links:</h4> <ul> <li><a href="http://msdn.microsoft.com/en-us/library/ms533486(VS.85).aspx" title="Enlace externo a "MSDN: autocomplete attri"" target="_blank">MSDN: autocomplete attribute</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/How_to_Turn_Off_Form_Autocompletion" title="Enlace externo a "How to Turn Off Form Autocompletion"" target="_blank">How to Turn Off Form Autocompletion</a></li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/autocomplete.html">http://www.csslab.cl/ejemplos/autocomplete.html</a> “Enlace interno a “Ejemplo Autocomplete”” </article> <article> <h1>jQuery dayTimr</h1> Wed, 09 Jan 2013 17:53:06 +0000 Toma y utiliza la hora del día actual del usuario para hacer cualquier cosa a la página actual usando un simple callback. Sólo eso. ¡Funciona hasta en IE! Get and uses the user’s current time of the day to do anything to the current page using a simple callback. Just that. Even works in IE! <h5 id="selecciona-tu-idioma--select-your-language">Selecciona tu idioma / Select your language:</h5> <ul id="horizons_tab" class="idTabs"> <li> <a href="#english" title="Read in English">English</a> </li> <li> <a href="#espanol" title="Leer en Español">Español</a> </li> </ul> <div id="english"> <h3> EN </h3> <h4> Use: </h4> <pre><code class="language-javascript">$(function(){ $('body').dayTimr(); // use any HTML element });</code></pre> <h4> Settings: </h4> <pre><code class="language-javascript">$('body').dayTimr({ 'nightClass' : 'night', // name of the class used if it is night time 'nightStart' : '21:00', // time when night starts, must be HH:MM (if it is >= 9 don't use the 0) 'dawnClass' : 'dawn', // name of the class used if it is dawn time 'dawnStart' : '0:00', // time when dawn starts, must be HH:MM (if it is >= 9 don't use the 0) 'morningClass' : 'morning', // name of the class used if it is morning time 'morningStart' : '7:00', // time when morning starts, must be HH:MM (if it is >= 9 don't use the 0) 'afternoonClass': 'afternoon', // name of the class used if it is afternoon time 'afternoonStart': '12:00', // time when afternoon starts, must be HH:MM (if it is >= 9 don't use the 0) 'debug' : false, // if true show what's going on in the browser's console onNight : function(){}, // callback if it is night; default it adds the nightClass to the body onDawn : function(){}, // callback if it is dawn; default it adds the dawnClass to the body onMorning : function(){}, // callback if it is morning; default it adds the morningClass to the body onAfternoon : function(){} // callback if it is afternoon; default it adds the afternoonClass to the body });</code></pre> <h5> Changelog: </h5> <ul> <li> 1.0: now you can choose your behavior through the callback. </li> <li> 0.4.1: BUG: onMorning.call fixed. </li> <li> 0.4: First public release. </li> </ul> </div> <div id="espanol"> <h3> ES </h3> Toma y utiliza la hora del día actual del usuario para hacer cualquier cosa a la página actual a través de un callaback. Sólo eso. <h4> Uso: </h4> <pre><code class="language-javascript">$(function(){ $('body').dayTimr(); // puedes utilizar cualquier elemento HTML });</code></pre> <h4> Configuración: </h4> <pre><code class="language-javascript">$('body').dayTimr({ 'nightClass' : 'night', // nombre de la clase si es de noche 'nightStart' : '21:00', // hora cuando comienza la noche, debe ser en el formato HH:MM (si es >= 9 no antepongas el 0) 'dawnClass' : 'dawn', // nombre de la clase si es de madrugada 'dawnStart' : '0:00', // hora cuando comienza la madrugada, debe ser en el formato HH:MM (si es >= 9 no antepongas el 0) 'morningClass' : 'morning', // nombre de la clase si es de mañana 'morningStart' : '7:00', // hora cuando comienza la mañana, debe ser en el formato HH:MM (si es >= 9 no antepongas el 0) 'afternoonClass': 'afternoon', // nombre de la clase si es de tarde 'afternoonStart': '12:00', // hora cuando comienza la tarde, debe ser en el formato HH:MM (si es >= 9 no antepongas el 0) 'debug' : false, // si es true muestra lo que hace el plugin por la consola onNight : function(){}, // callback si es de noche; por defecto inyecta al body la clase definida en nightClass onDawn : function(){}, // callback si es de madrugada; por defecto inyecta al body la clase definida en dawnClass onMorning : function(){}, // callback si es de mañana; por defecto inyecta al body la clase definida en morningClass onAfternoon : function(){} // callback si es de tarde; por defecto inyecta al body la clase definida en afternoonClass });</code></pre> <h5> Cambios: </h5> <ul> <li> 1.0: ahora puedes definir el comportamiento a través del callback. </li> <li> 0.4.1: BUG: onMorning.call solucionado. </li> <li> 0.4: Primera publicación. </li> </ul> </div> <a href="http://www.csslab.cl/ejemplos/dayTimr/latest/">Demo/Ejemplo</a>{.verejemplo} <a href="http://www.csslab.cl/downloads/jQuery+dayTimr">Download/Bajar Plugin</a>{.bajar} Copyright 2013, CSSLab.cl – Free under the <a href="http://www.opensource.org/licenses/mit-license.php" title="Enlace externo a "Licensing The MIT License"" target="_blank">MIT license</a>. Blackhole Icon from Turbomilk </article> <article> <h1>Diseñando con CSS3: micro-curso y slides</h1> Wed, 26 Dec 2012 18:39:07 +0000 Hace meses que tengo la idea de generar varios micro-cursos, donde en no más de 30 minutos expongo varias ideas puntuales sobre temas orientados al desarrollo web. En esta ocasión les traigo el primero de ellos: Diseñando con CSS3, donde muestro y demuestro mis argumentos para el diseño web orientado al CSS3. Nuevamente estos slides vienen acompañados de mi radiofónica locución sincronizada por lo que sólo tienen que activar el audio de su computador, enchufar sus audífonos, poner play al audio y escuchar/leer. Además, mucho del código fuente que se muestra puede editarse en cada slide y verás como se modifican los estilos de ejemplo. Si no les interesa escucharme, ignoren el player y denle con las flechas del teclado. En todo caso el audio pueden pararlo y adelantarlo si quieren, el slide correspondiente se reubicará donde debería estar. Advertencia: La grabación hecha fue en una misma sesión y al estilo de conversación, no de charla. Imagínense que estamos en un bar conversando y me preguntan sobre CSS3 y y les voy contando todo lo que sé y deberían saben. Eso. <h4 id="diseñando-con-css3-temario">Diseñando con CSS3: temario</h4> <ul> <li>del Código al PSD</li> <li>Propiedades CSS3 <ul> <li>de formas</li> <li>de textos</li> <li>de interacción</li> <li>de animación</li> </ul> </li> <li>Herramientas <ul> <li>Editores de código fuente</li> <li>Elixires</li> <li>Generadores</li> <li>Software</li> <li>Editores / IDEs</li> </ul> </li> </ul> [Ver Micro-Curso][1]{.bajar} <a href="https://speakerdeck.com/csslab/disenando-con-css3" target="_blank">Enlace a la presentación en SpeakerDeck</a> <h4 id="recomendaciones">Recomendaciones:</h4> <ol> <li>El uso de un browser moderno (duh!) como Chrome/Safari ó Firefox 14+</li> <li>Si vas a escuchar el audio, súbele el volumen y ponte audífonos para no molestar al resto.</li> <li>Comentarios sobre el contenido son bienvenidos.</li> </ol> <div style="text-align:center;"> ❦ Después del último slide hay un easter-egg, para los amantes de la buena mesa <a href="http://www.csslab.cl/ejemplos/curso/disenando-con-css3/#slide48">mi receta personal de cebiche</a> el cual preparé antes de dictar este micro-curso. ❦ </div> [1]: <a href="http://www.csslab.cl/ejemplos/curso/disenando-con-css3/">http://www.csslab.cl/ejemplos/curso/disenando-con-css3/</a> “Enlace en CSSLab a “Diseñando con CSS3"” </article> <article> <h1>Alcanzar el primer hijo de un selector pero no su descendencia</h1> Tue, 18 Dec 2012 15:14:41 +0000 Problema: a través de CSS, necesitaba entregar estilos al primer hijo de un elemento sin afectar la herencia (nietos y más allá); sólo necesito darle estilo al hijo directo de un selector. Además: debiera ser genérico, sin restringirse al tipo de selector hijo que exista. Pueden ser <li>, , , etc. Y por último: que utilizara sólo CSS, nada de JavaScript. Solución: después de mucho pensar y debatir en Twitter, dí con una una elegante solución que me satisfizo completamente. Para el HTML: <pre><code class="language-markup"><div> Hijo Hijo nieto <pre>Hijo <code>nieto bisnieto</code></pre> </div></code></pre> El CSS: <pre><code class="language-css">div * { color: blue; background: gray; } div > :nth-child(n+1) { color: red; background: darkgrey; }</code></pre> <a href="http://www.csslab.cl/ejemplos/solohijo.html">Ver ejemplo</a>{.verejemplo} </article> <article> <h1>Reflejo horizontal y vertical con CSS3</h1> Wed, 12 Dec 2012 19:34:01 +0000 Me entretengo mucho <a href="http://www.andalaosa.cl/labs/chilegram/" title="Enlace externo a "Chilegram | Andalaosa.cl"" target="_blank">inventando proyectos</a> donde <a href="http://www.teconfiesoque.com/" title="Enlace externo a "Te Confieso Que | Andalaosa.cl"" target="_blank">pueda aplicar CSS3</a> a destajo sin importarme un carajo las limitaciones de los browsers. Buscando una solución elegante para aplicar el mismo efecto reflejo que tan fácil es hacer en Photoshop, pero con CSS3, lo que quería realizar era el reflejo de un elemento HTML; no un transform: rotate(180deg); sino un reflejo espejo del mismo. <h4 id="flip-horizontal">Flip horizontal:</h4> <pre class="language-css"><code>-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: "FlipH"; filter: FlipH;</code></pre> <h4 id="flip-vertical">Flip vertical:</h4> <pre class="language-css"><code>-moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); -ms-filter: "FlipV"; filter: FlipV;</code></pre><blockquote> </blockquote> </article> <article> <h1>Acceso a la cámara con móviles</h1> Fri, 26 Oct 2012 14:19:01 +0000 Con iOS6 se agregaron en Safari Mobile varias novedades que ya existían desde Android Browser 3.0, pero las que me gustaría destacar en este articulo: File upload (<input type="file">) con el que ahora puedes agregar submit de imágenes que tengas en dispositivo y acceso a la cámara del mismo: <h4 id="capturar-video-de-la-cámara">Capturar video de la cámara</h4> <pre><code class="language-markup"><input type="file" accept="video/*" capture="camcorder"></code></pre> <h4 id="capturar-foto-de-la-cámara">Capturar foto de la cámara</h4> <pre><code class="language-markup"><input type="file" accept="image/*" capture="camera"></code></pre> <h4 id="capturar-audio-del-microacutefono">Capturar audio del micrófono</h4> <pre><code class="language-markup"><input type="file" accept="audio/*" capture="microphone"></code></pre> [Ver ejemplo][1]{.verejemplo} <div style="text-align:center;"> </div> Soporte: Safari Mobile 6. Android Browser 3.0, Android Chrome 0.16, Firefox Mobile 10.0. [1]: <a href="http://www.csslab.cl/ejemplos/cam.html">http://www.csslab.cl/ejemplos/cam.html</a> “Enlace en CSSLab a “Ejemplo Acceso a la cámara con móviles”” </article> <article> <h1>Consecuencia</h1> Thu, 11 Oct 2012 13:45:56 +0000 <link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css' /> </link> <div id="consecuencia"> «Buscamos al mejor programador: PHP (MVC), RoR, AS3 (OOP), JS y librerías, HTML5, CSS3, API rest, MySQL, SQLServer. Nociones de Photoshop un plus.» Hola, yo sé PHP y he trabajado con CodeIgniter y Yii. Sé Ruby, he trabajado con Node.js, Backbone y Angular JS, también domino jQuery, puedo hacer juegos en <canvas> y Impact JS como motor, incluso hice mi Hola Mundo en three.js; conozco la API de Facebook y Twitter aunque las odio. He trabajado con SQLServer y MySQL, obvio, pero me estoy sumergiendo en bases de datos NoSQL. ¡Ah! Mi inglés es bien técnico y he aportado a varios proyectos OpenSource, los puedes revisar en mi GitHub. ¡Genial, eres quien buscamos! ¿Cuánto pides? Con todo lo que he invertido en mi aprendizaje y con lo que puedo entregarle a tu empresa en nuevos proyectos, pido $$$$$. Ah, pero estábamos pensando en un presupuesto de $$$ para tu puesto. Entiendo. Entonces cambien el llamado que publicaron. No buscan al mejor. 01001101 01100101 01100100 01101001 01101111 01100011 01110010 01100101 01110011 </div>  </article> <article> <h1>FadeIn/Out en menú con CSS</h1> Mon, 08 Oct 2012 13:05:11 +0000 Situación: tenemos un menú con N elementos, los cuales se van activando (opacity: 1) a medida que el mouse pasa sobre cada uno, mientras el resto de los elementos permanecen inactivos (opacity: 0.5). Un efecto simple que se puede realizar tranquilamente con CSS y la caída estrepitosa de IE6. Primero, el ejemplo del nunca mal ponderado menú horizontal con listas: [Ver ejemplo 1][1]{.verejemplo} Ahora, el efecto aplicado. Básicamente se agregan 2 instancias diferentes el cambio de opacidad, primero en el :hover de #menu, los links tendrán opacidad 0.5 y al :hover al elemento mismo opacidad 1, todo graciosamente animado mediante transition de CSS3: <pre><code class="language-css">#menu a { transition: 0.3s opacity ease-in-out; } #menu:hover a { opacity: 0.5; } #menu a:hover { opacity: 1; }</code></pre> [Ver ejemplo 2][2]{.verejemplo} <ul> <li>El diseño del menú en sí y de cada botón es parte de su propio talento.</li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/menufadeinout/menu.html">http://www.csslab.cl/ejemplos/menufadeinout/menu.html</a> “Enlace en CSSLab a “Ejemplo1: Fade in/out en menú con CSS”” [2]: <a href="http://www.csslab.cl/ejemplos/menufadeinout/menu2.html">http://www.csslab.cl/ejemplos/menufadeinout/menu2.html</a> “Enlace en CSSLab a “Ejemplo2: Fade in/out en menú con CSS”” </article> <article> <h1>@font-face y renderizado de texto en Chrome Windows</h1> Fri, 21 Sep 2012 14:05:04 +0000 Este es un bug molesto, donde a partir de algunas tipografías (generalmente de palo seco y delgadas) tienen un pobre renderizado en Chrome en Windows. Buscando una solución me deparo con 4 diferentes; finalmente solo la solución 2 me resulta efectiva pero las dejo todas ya que puede variar con el tipo de tipografía y las propiedades que tenga el texto con problemas: <h4 id="en-chrome-windows">En Chrome Windows</h4> <h4 id="en-chrome-macos-x">En Chrome MacOS X</h4> <h3 id="solucioacuten-1-_smalltext-shadowsmall_">Solución 1: text-shadow</h3> <pre><code class="language-css">text-shadow: rgba(0, 0, 0, .01) 0 0 1px;</code></pre> [Ver ejemplo 1][1]{.verejemplo} <h3 id="solucioacuten-2-_small-webkit-text-stroke-widthsmall_">Solución 2: -webkit-text-stroke-width</h3> <pre><code class="language-css">-webkit-text-stroke-width: 0.6px;</code></pre> [Ver ejemplo 2][2]{.verejemplo} <h3 id="solucioacuten-3-_small-webkit-font-smoothingsmall_">Solución 3: -webkit-font-smoothing</h3> <pre><code class="language-css">-webkit-font-smoothing: antialiased;</code></pre> [Ver ejemplo 3][3]{.verejemplo} <h3 id="solucioacuten-4-_smallorden-en-el-llamado-de-los-formatossmall_">Solución 4: Orden en el llamado de los formatos</h3> Si utilizas una herramienta para conversión de fuentes para web como <a href="http://www.fontsquirrel.com/fontface/generator" title="Enlace externo a "Create Your Own @font-face Kits"" target="_blank">FontSquirrel</a> probablemente te entregue la solución final ya lista para su uso, pero algunos aconsejan comenzar con definir SVG (que es un formato vectorial de tipografías, por lo tanto no debiera deformarse) y seguido el resto de los otros formatos (.eot, .woff, .ttf). [Ver ejemplo 4][4]{.verejemplo} <h4 id="links">Links</h4> <ul> <li><a href="http://eligrey.com/blog/post/better-font-smoothing-in-google-chrome-on-windows" target="_blank">Better font smoothing in Google Chrome on Windows</a></li> <li><a href="http://taitems.tumblr.com/post/7107609467/font-face-smoothing-in-windows-chrome" target="_blank">@font-face Smoothing in Windows Chrome</a></li> <li><a href="http://files.christophzillgens.com/webkit-font-smoothing.html" target="_blank">-webkit-font-smoothing</a></li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/font-face_chrome_win/ejemplo1.html">http://www.csslab.cl/ejemplos/font-face_chrome_win/ejemplo1.html</a> “Enlace en CSSLab.cl a “Solución 1"” [2]: <a href="http://www.csslab.cl/ejemplos/font-face_chrome_win/ejemplo2.html">http://www.csslab.cl/ejemplos/font-face_chrome_win/ejemplo2.html</a> “Enlace en CSSLab.cl a “Solución 2"” [3]: <a href="http://www.csslab.cl/ejemplos/font-face_chrome_win/ejemplo3.html">http://www.csslab.cl/ejemplos/font-face_chrome_win/ejemplo3.html</a> “Enlace en CSSLab.cl a “Solución 3"” [4]: <a href="http://www.csslab.cl/ejemplos/font-face_chrome_win/ejemplo4.html">http://www.csslab.cl/ejemplos/font-face_chrome_win/ejemplo4.html</a> “Enlace en CSSLab.cl a “Solución 4"” </article> <article> <h1>Mis Feeds</h1> Thu, 30 Aug 2012 21:04:47 +0000 Leo todo el día, y es así que trato de estar al tanto de lo que sucede en el mundo web. Tengo muchos feeds que me alimentan de información, principalmente relacionados con diseño, desarrollo, interacción y usabilidad. Por la mañana tengo los RSS llenos de información, con lo que ha salido de nuevo mientras en mi zona horaria se duerme. La actividad no para, hay nuevos recursos desde Asia y Europa, y cuando comienza mi actividad en otros lugares ya están terminando y no puedo perderme esa información. Todo esto sumado a las cuentas de Twitter que constantemente reviso con ejemplos y prototipos que diseñadores y desarrolladores están siempre creando y generosamente compartiendo. En este artículo quiero compartir algunos de esos feeds RSS y algunas cuentas de Twitter que me mantienen al día en varios de los temas de mi interés. <div id="grid"> <div class="medium_box misfeeds"> <h4> Web </h4> <pre><code><ul> <li> <a href="http://www.smashingmagazine.com/" title="Enlace externo a "Smashing Magazine"" target="_blank">Smashing Magazine</a> </li> <li> <a href="http://www.designfloat.com/" title="Enlace externo a "Design Float"" target="_blank">Design Float</a> </li> <li> <a href="http://designmodo.com/" title="Enlace externo a "Designmodo"" target="_blank">Designmodo</a> </li> <li> <a href="http://net.tutsplus.com/" title="Enlace externo a "NetTuts"" target="_blank">NetTuts</a> </li> <li> <a href="http://www.webresourcesdepot.com/" title="Enlace externo a "Web Resources Depot"" target="_blank">Web Resources Depot</a> </li> <li> <a href="http://www.webappers.com/" title="Enlace externo a "WebAppers"" target="_blank">WebAppers</a> </li> <li> <a href="http://sixrevisions.com/" title="Enlace externo a "Six Revisions"" target="_blank">Six Revisions</a> </li> <li> <a href="http://www.splashnology.com/" title="Enlace externo a "Splashnology"" target="_blank">Splashnology</a> </li> <li> <a href="http://css-tricks.com/" title="Enlace externo a "CSS Tricks"" target="_blank">CSS Tricks</a> </li> <li> <a href="http://html5bookmarks.com/" title="Enlace externo a "HTML5 Bookmarks"" target="_blank">HTML5 Bookmarks</a> </li> <li> <a href="http://www.queness.com/" title="Enlace externo a "Queness"" target="_blank">Queness</a> </li> <li> <a href="http://www.smashingapps.com/" title="Enlace externo a "Smashing Apps"" target="_blank">Smashing Apps</a> </li> <li> <a href="http://www.twitter.com/smashingmag" title="Enlace externo a "@smashingmag"" target="_blank">@smashingmag</a> </li> <li> <a href="http://www.twitter.com/codepo8" title="Enlace externo a "@codepo8"" target="_blank">@codepo8</a> </li> <li> <a href="http://www.twitter.com/htmlcut" title="Enlace externo a "@htmlcut"" target="_blank">@htmlcut</a> </li> <li> <a href="http://www.twitter.com/CreativeBloq" title="Enlace externo a "@CreativeBloq"" target="_blank">@CreativeBloq</a> </li> <li> <a href="http://www.twitter.com/mezzoblue" title="Enlace externo a "@mezzoblue"" target="_blank">@mezzoblue</a> </li> <li> <a href="http://www.twitter.com/codylindley" title="Enlace externo a "@codylindley"" target="_blank">@codylindley</a> </li> <li> <a href="http://www.twitter.com/rem" title="Enlace externo a "@rem"" target="_blank">@rem</a> </li> <li> <a href="http://www.twitter.com/reybango" title="Enlace externo a "@reybango"" target="_blank">@reybango</a> </li> <li> <a href="http://www.twitter.com/Oja_la" title="Enlace externo a "@Oja_la"" target="_blank">@Oja_la</a> </li> <li> <a href="http://www.twitter.com/coderwall" title="Enlace externo a "@coderwall"" target="_blank">@coderwall</a> </li> <li> <a href="http://www.twitter.com/ImpressiveWebs" title="Enlace externo a "@ImpressiveWebs"" target="_blank">@ImpressiveWebs</a> </li> <li> <a href="http://www.twitter.com/unconed" title="Enlace externo a "@unconed"" target="_blank">@unconed</a> </li> <li> <a href="http://www.twitter.com/verekia" title="Enlace externo a "@verekia"" target="_blank">@verekia</a> </li> <li> <a href="http://www.twitter.com/Tojiro" title="Enlace externo a "@Tojiro"" target="_blank">@Tojiro</a> </li> <li> <a href="http://www.twitter.com/romancortes" title="Enlace externo a "@romancortes"" target="_blank">@romancortes</a> </li> <li> <a href="http://www.twitter.com/_victa " title="Enlace externo a "@_victa"" target="_blank">@_victa</a> </li> <li> <a href="http://www.twitter.com/jQueryChile" title="Enlace externo a "@jQueryChile"" target="_blank">@jQueryChile</a> </li> <li> <a href="http://www.twitter.com/philogb" title="Enlace externo a "@philogb"" target="_blank">@philogb</a> </li> <li> <a href="http://www.twitter.com/simurai" title="Enlace externo a "@simurai"" target="_blank">@simurai</a> </li> <li> <a href="http://www.twitter.com/bartaz" title="Enlace externo a "@bartaz"" target="_blank">@bartaz</a> </li> <li> <a href="http://www.twitter.com/AlexDenning" title="Enlace externo a "@AlexDenning"" target="_blank">@AlexDenning</a> </li> <li> <a href="http://www.twitter.com/mathias" title="Enlace externo a "@mathias"" target="_blank">@mathias</a> </li> <li> <a href="http://www.twitter.com/desandro" title="Enlace externo a "@desandro"" target="_blank">@desandro</a> </li> <li> <a href="http://www.twitter.com/ChromeExp" title="Enlace externo a "@ChromeExp"" target="_blank">@ChromeExp</a> </li> <li> <a href="http://www.twitter.com/mrdoob" title="Enlace externo a "@mrdoob"" target="_blank">@mrdoob</a> </li> <li> <a href="http://www.twitter.com/Vanesak" title="Enlace externo a "@Vanesak"" target="_blank">@Vanesak</a> </li> <li> <a href="http://www.twitter.com/wpbeginner" title="Enlace externo a "@wpbeginner"" target="_blank">@wpbeginner</a> </li> <li> <a href="http://www.twitter.com/johnpolacek" title="Enlace externo a "@johnpolacek"" target="_blank">@johnpolacek</a> </li> <li> <a href="http://www.twitter.com/pointedCo" title="Enlace externo a "@pointedCo"" target="_blank">@pointedCo</a> </li> <li> <a href="http://www.twitter.com/crnacura" title="Enlace externo a "@crnacura"" target="_blank">@crnacura</a> </li> <li> <a href="http://www.twitter.com/GCotumaccio" title="Enlace externo a "@GCotumaccio"" target="_blank">@GCotumaccio</a> </li> <li> <a href="http://www.twitter.com/mike_more" title="Enlace externo a "@mike_more"" target="_blank">@mike_more</a> </li> <li> <a href="http://www.twitter.com/jscraftnet" title="Enlace externo a """ target="_blank">@jscraftnet</a> </li> <li> <a href="http://www.twitter.com/attasi" title="Enlace externo a "@jscraftnet"" target="_blank">@attasi</a> </li> <li> <a href="http://www.twitter.com/robertnyman" title="Enlace externo a "@robertnyman"" target="_blank">@robertnyman</a> </li> <li> <a href="http://www.twitter.com/RWD" title="Enlace externo a "@RWD"" target="_blank">@RWD</a> </li> <li> <a href="http://www.twitter.com/LeaVerou" title="Enlace externo a "@LeaVerou"" target="_blank">@LeaVerou</a> </li> <li> <a href="http://www.twitter.com/stefsull" title="Enlace externo a "@stefsull"" target="_blank">@stefsull</a> </li> <li> <a href="http://www.twitter.com/codrops" title="Enlace externo a "@codrops"" target="_blank">@codrops</a> </li> <li> <a href="http://www.twitter.com/TomLambie" title="Enlace externo a "@TomLambie"" target="_blank">@TomLambie</a> </li> <li> <a href="http://www.twitter.com/textmator" title="Enlace externo a "@textmator"" target="_blank">@textmator</a> </li> <li> <a href="http://www.twitter.com/hakimel" title="Enlace externo a "@hakimel"" target="_blank">@hakimel</a> </li> <li> <a href="http://www.twitter.com/thomasfuchs" title="Enlace externo a "@thomasfuchs"" target="_blank">@thomasfuchs</a> </li> <li> <a href="http://www.twitter.com/pinceladasdaweb" title="Enlace externo a "@pinceladasdaweb"" target="_blank">@pinceladasdaweb</a> </li> <li> <a href="http://www.twitter.com/pelfusion" title="Enlace externo a "@pelfusion"" target="_blank">@pelfusion</a> </li> <li> <a href="http://www.twitter.com/wireframes" title="Enlace externo a "@wireframes"" target="_blank">@wireframes</a> </li> <li> <a href="http://www.twitter.com/addyosmani" title="Enlace externo a "@addyosmani"" target="_blank">@addyosmani</a> </li> <li> <a href="http://www.twitter.com/usejquery" title="Enlace externo a &quot@usejquery;"" target="_blank">@usejquery</a> </li> <li> <a href="http://www.twitter.com/iA" title="Enlace externo a "@iA"" target="_blank">@iA</a> </li> <li> <a href="http://www.twitter.com/Inspirationf" title="Enlace externo a "@Inspirationf"" target="_blank">@Inspirationf</a> </li> <li> <a href="http://www.twitter.com/chrisspooner" title="Enlace externo a "@chrisspooner"" target="_blank">@chrisspooner</a> </li> <li> <a href="http://www.twitter.com/marcofolio" title="Enlace externo a "@marcofolio"" target="_blank">@marcofolio</a> </li> <li> <a href="http://www.twitter.com/BinaryMoon" title="Enlace externo a "@BinaryMoon"" target="_blank">@BinaryMoon</a> </li> <li> <a href="http://www.twitter.com/sorccu" title="Enlace externo a "@sorccu"" target="_blank">@sorccu</a> </li> <li> <a href="http://www.twitter.com/iamFinch" title="Enlace externo a "@iamFinch"" target="_blank">@iamFinch</a> </li> <li> <a href="http://www.twitter.com/ywarnier" title="Enlace externo a "@ywarnie"" target="_blank">@ywarnier</a> </li> <li> <a href="http://www.twitter.com/abduzeedo" title="Enlace externo a "@abduzeedo"" target="_blank">@abduzeedo</a> </li> <li> <a href="http://www.twitter.com/html5doctor" title="Enlace externo a "@html5doctor"" target="_blank">@html5doctor</a> </li> <li> <a href="http://www.twitter.com/dimensionmedia" title="Enlace externo a "@dimensionmedia"" target="_blank">@dimensionmedia</a> </li> <li> <a href="http://www.twitter.com/eseyo" title="Enlace externo a "@eseyo"" target="_blank">@eseyo</a> </li> <li> <a href="http://www.twitter.com/bassistance" title="Enlace externo a "@bassistance"" target="_blank">@bassistance</a> </li> <li> <a href="http://www.twitter.com/jeresig" title="Enlace externo a "@jeresig"" target="_blank">@jeresig</a> </li> <li> <a href="http://www.twitter.com/wpengineer" title="Enlace externo a "@wpengineer"" target="_blank">@wpengineer</a> </li> <li> <a href="http://www.twitter.com/Webstandard" title="Enlace externo a "@Webstandard"" target="_blank">@Webstandard</a> </li> <li> <a href="http://www.twitter.com/KISSmetrics" title="Enlace externo a "@KISSmetrics"" target="_blank">@KISSmetrics</a> </li> <li> <a href="http://www.twitter.com/timholl" title="Enlace externo a "@timholl"" target="_blank">@timholl</a> </li> <li> <a href="http://www.twitter.com/nrauni" title="Enlace externo a "@nrauni"" target="_blank">@nrauni</a> </li> <li> <a href="http://www.twitter.com/madebyivor" title="Enlace externo a "@madebyivor"" target="_blank">@madebyivor</a> </li> </ul> </code></pre> </div> <div class="medium_box misfeeds"> <h4> Tecnología </h4> <pre><code><ul> <li> <a href="http://www.microsiervos.com/" title="Enlace externo a "Microsiervos"" target="_blank">Microsiervos</a> </li> <li> <a href="http://www.twitter.com/mashable" title="Enlace externo a "@mashable"" target="_blank">@mashable</a> </li> </ul> </code></pre> </div> <div class="medium_box misfeeds"> <h4> Infografía e Información </h4> <pre><code><ul> <li> <a href="http://infosthetics.com/" title="Enlace externo a "Information Aesthetics"" target="_blank">Information Aesthetics</a> </li> <li> <a href="http://www.twitter.com/infographicsfyi" title="Enlace externo a "@infographicsfyi"" target="_blank">@infographicsfyi</a> </li> <li> <a href="http://www.twitter.com/blprnt" title="Enlace externo a "@blprnt"" target="_blank">@blprnt</a> </li> <li> <a href="http://www.twitter.com/mslima" title="Enlace externo a "@mslima"" target="_blank">@mslima</a> </li> </ul> </code></pre> </div> <div class="medium_box misfeeds"> <h4> Mi Repositorio </h4> <pre><code><ul> <li> <a href="http://zootool.com/user/csslab/" title="Enlace externo a "Zootool - CSSLab"" target="_blank">CSSLab on Zootool</a> </li> </ul> </code></pre> </div> <div class="medium_box misfeeds"> <h4> Tipografía </h4> <pre><code><ul> <li> <a href="http://beautifultype.net/" title="Enlace externo a "Beautiful Type"" target="_blank">Beautiful Type</a> </li> <li> <a href="http://www.typographyserved.com/" title="Enlace externo a "Typography Serve"" target="_blank">Typography Serve </a> </li> <li> <a href="http://upscaletypography.com/" title="Enlace externo a "Upscale Typography"" target="_blank">Upscale Typography</a> </li> <li> <a href="http://www.twitter.com/ilovetypography" title="Enlace externo a "@ilovetypography"" target="_blank">@ilovetypography </a> </li> </ul> </code></pre> </div> <div class="medium_box misfeeds"> <h4> Arte </h4> <pre><code><ul> <li> <a href="http://fuckyeahmath.tumblr.com/" title="Enlace externo a "Fuck Yeah Math"" target="_blank">Fuck Yeah Math</a> </li> <li> <a href="http://www.thisiscolossal.com/" title="Enlace externo a "This is Colossal"" target="_blank">This is Colossal</a> </li> <li> <a href="http://www.ohbeautifulbeer.com/" title="Enlace externo a "Oh Beautiful Beer"" target="_blank">Oh Beautiful Beer</a> </li> </ul> </code></pre> </div> <div class="medium_box misfeeds"> <h4> Misceláneos </h4> <pre><code><ul> <li> <a href="http://www.meneame.net/" title="Enlace externo a "Menéame"" target="_blank">Menéame</a> </li> <li> <a href="http://www.fogonazos.es/" title="Enlace externo a "Fogonazos"" target="_blank">Fogonazos</a> </li> <li> <a href="http://englishrussia.com/" title="Enlace externo a "English Russia"" target="_blank">English Russia</a> </li> <li> <a href="http://matiascallone.blogspot.com/" title="Enlace externo a "Visión Beta"" target="_blank">Visión Beta</a> </li> <li> <a href="http://www.boston.com/bigpicture/" title="Enlace externo a "The Big Picture"" target="_blank">The Big Picture</a> </li> <li> <a href="http://fronterasblog.wordpress.com/" title="Enlace externo a "Fronteras"" target="_blank">Fronteras</a> </li> <li> <a href="http://www.cookingideas.es/" title="Enlace externo a "Cooking Ideas"" target="_blank">Cooking Ideas</a> </li> <li> <a href="http://blogdebanderas.wordpress.com/" title="Enlace externo a "Banderas del Mundo"" target="_blank">Banderas del Mundo</a> </li> <li> <a href="http://www.theworldgeography.com/" title="Enlace externo a "The World Geography"" target="_blank">The World Geography</a> </li> <li> <a href="http://www.twitter.com/neiltyson" title="Enlace externo a "@neiltyson"" target="_blank">@neiltyson</a> </li> <li> <a href="http://www.twitter.com/musichackday" title="Enlace externo a "@musichackday"" target="_blank">@musichackday</a> </li> <li> <a href="http://www.twitter.com/NietzscheQuotes" title="Enlace externo a "@NietzscheQuotes"" target="_blank">@NietzscheQuotes</a> </li> <li> <a href="http://www.twitter.com/johnmaeda" title="Enlace externo a "@johnmaeda"" target="_blank">@johnmaeda</a> </li> </ul> </code></pre> </div> </div> </article> <article> <h1>Mejor renderizado para textos</h1> Thu, 16 Aug 2012 21:04:35 +0000 Érase una vez una tímida propiedad CSS que pocos conocen y nadie usa, pero que es muy beneficiosa cuando tratamos con textos. Es conocido que cada plataforma -y cada browser– trata a las tipografías a su modo; es así como un font-size de una Arial no es similar no sólo dependiendo de la resolución ó la [densidad de pixeles del dispositivo][1] del usuario, sino que además dependiendo del OS y del navegador que se está utilizando. Pero esos son factores que no podemos manejar del todo, y sólo resta ofrecer una buena experiencia y <s>rezar</s> esforzarnos en que lo sea para la gran mayoría de los usuarios de nuestro proyecto web. text-rendering es una propiedad (aún en <a href="http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty" title="Enlace externo a "The ‘text-rendering’ property"" target="_blank">working draft</a>) que mejora la legibilidad de los textos, habilitando por ejemplo el kerning y las ligaduras en las tipografías que lo permitan. Los valores son: <ul> <li>auto: indica que el browser debe decidir si optimizar o no el texto.</li> <li>optimizeSpeed: el browser le dará prioridad a la rapidez del renderizado del texto, causando que se cancele el suavizado (anti-aliasing) de la tipografía.</li> <li>optimizeLegibility: mejora la legibilidad habilitando el kerning, suavizado y/o las ligaduras de la tipografía, por sobre la rapidez del renderizado ó su geometría.</li> <li>geometricPrecision – le da prioridad a la geometría del texto por sobre la rapidez ó legibilidad del texto.</li> </ul> <h3 id="ejemplos">Ejemplos:</h3> <div id="textrendering_ejemplos"> A Esta Hora A Esta Hora mi avatar mi avatar efficaz & floral efficaz & floral </div> Soporte: Firefox 3+, Safari 5+, Chrome 4+. <h4 id="enlaces">Enlaces:</h4> <ul> <li><a href="http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty" title="Enlace externo a "The ‘text-rendering’ property"" target="_blank">W3C – The ‘text-rendering’ property</a></li> <li><a href="https://developer.mozilla.org/es/docs/CSS/text-rendering" title="Enlace externo a "text-rendering"" target="_blank">MDN – text-rendering</a></li> </ul> [1]: <a href="http://csslab.cl/curso/mobilewebdev/clase2.html#diseno-densidad">http://csslab.cl/curso/mobilewebdev/clase2.html#diseno-densidad</a> “Enlace en CSSLab a “Desarrollo Móvil - Clase 2: densidad de pixeles”” </article> <article> <h1>Pointer-Events en CSS3</h1> Fri, 27 Jul 2012 19:59:08 +0000 Tonteando con una idea que tuve de un <a href="http://www.andalaosa.cl/labs/smogify/" title="Enlace externo a "Smogify"" target="_blank">bookmarklet</a> (una analogía gráfica que contamina visualmente un sitio web de la misma manera en que estamos contaminados quienes vivimos en grandes ciudades), tuve una epifanía y pude resolverla. La idea es crear una capa sobre todo el contenido del sitio: un <div> posicionado fijo, ancho y alto 100% y con un gradiente de color smog a transparente. <pre><code class="language-css">#smog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: -moz-linear-gradient(top, rgba(140,127,86,0.85) 0%, rgba(140,127,86,0.4) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(140,127,86,0.85)), color-stop(100%,rgba(140,127,86,0.4))); background: -webkit-linear-gradient(top, rgba(140,127,86,0.85) 0%,rgba(140,127,86,0.4) 100%); background: -o-linear-gradient(top, rgba(140,127,86,0.85) 0%,rgba(140,127,86,0.4) 100%); background: -ms-linear-gradient(top, rgba(140,127,86,0.85) 0%,rgba(140,127,86,0.4) 100%); background: linear-gradient(top, rgba(140,127,86,0.85) 0%,rgba(140,127,86,0.4) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d98c7f56",endcolorstr="#668c7f56",gradienttype="0"); }</code></pre> Todo normal, es como si fuera un overlay de una [ventana modal común y corriente][1], la que tapa todo lo que esté detrás y no deja que interactúes con nada más que el nuevo contenido levantado. Pero mi idea es que esta capa, aunque estuviera sobre, pudieras seguir utilizando el sitio y los enlaces normalmente. Ante esta duda, investigué y CSS3 trae una nueva propiedad que hace precisamente esto que necesitaba: <pre><code class="language-css">#smog { pointer-events: none; }</code></pre> Con esta propiedad todos los elementos que estén bajo el nuevo creado, y que estén de alguna manera tapados por el mismo (sea un elementos con background de color sólido, gradiente ó imagen) podrán ser accedidos (como enlace ó selección). [Ver ejemplo][2]{.verejemplo} Su soporte en browsers modernos es extenso: Firefox 3.6+, Chrome 4.0+, Safari 3.2+ y Android 2.1+ <h4 id="links">Links:</h4> <ul> <li><a href="http://caniuse.com/#feat=pointer-events" title="Enlace externo a "When can I use... Pointer Events"" target="_blank">When can I use… Pointer Events</a></li> <li><a href="http://www.webkit.org/specs/PointerEventsProperty.html" title="Enlace externo a "The 'pointer-events' property"" target="_blank">The ‘pointer-events’ property</a></li> <li><a href="http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements" title="Enlace externo a "Click through a DIV to underlying elements"" target="_blank">Click through a DIV to underlying elements</a></li> </ul> [1]: <a href="http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/">http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/</a> “Enlace en CSSLab.cl a “Ventana modal sólo con CSS”” [2]: <a href="http://www.csslab.cl/ejemplos/pointerevents.html">http://www.csslab.cl/ejemplos/pointerevents.html</a> “Enlace en CSSLab.cl a “Pointer-Events en CSS3 - Ejemplo”” </article> <article> <h1>Backgrounds múltiples en CSS3 y un truco gradual</h1> Wed, 27 Jun 2012 19:14:00 +0000 Con CSS3 el soporte a múltiple background nos permite ser mucho más creativos al momento de solucionar problemas de estilos, cuando antes sólo dependíamos de crear y anidar etiquetas y cortar esos gif’s y png’s que tanto nos han atormentado. La sintaxis para fondos múltiples es bastante intuitiva: <pre><code class="language-css">background: url(…) top left no-repeat, url(…) right bottom no-repeat;</code></pre> Su soporte -a la fecha según <a href="http://caniuse.com/#feat=multibackgrounds" title="can I use: multiple background support" target="_blank">caniuse.com</a>– es favorable para los browsers modernos. Para los que no lo soporten esta declaración será totalmente ignorada, por lo que mi recomendación es que primero definas un background como fallback y luego escribas los múltiples que necesites. [Ver ejemplo 1][1]{.verejemplo} <h3 id="fondos-con-gradientes">Fondos con gradientes</h3> Como algunos ya podrán haber probado, con CSS3 podemos crear gradientes (lineales o radiales) y tratarlos directamente como imágenes. Su soporte también ya está ampliado y la sintaxis es familiar: <pre><code class="language-css">background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#f00), to(#f60));</code></pre> Aunque no se han puesto de acuerdo con normalizarla, así es para Firefox: <pre><code class="language-css">background-image: -moz-linear-gradient(90deg, #f00, #f60);</code></pre> [Ver ejemplo 2][2]{.verejemplo} <h3 id="el-truco">El truco</h3> Necesitaba unir en el fondo del <body> un patrón como imagen en png, con un fondo gradiente radial. Lo que se haría antes sería el fondo gigantesco ya con el gradiente y el patrón, el cual pesaría muchos kilos y lo pondría como fondo del <body> (quizás con [el fondo al 100%][3]), pero ahora la cosa cambió. Como el gradiente para CSS es una imagen, podemos utilizarlo como un background-image más. El código quedó de la siguiente manera: <pre><code class="language-css">background-color: #141414; background-image: url('pattern.png'); background-image: url('pattern.png'), -webkit-gradient(linear, 50% 50%, 0, 50% 50%, 500, from(#f00), to(#300)); background-image: url('pattern.png'), -webkit-linear-gradient(#f00, #300); background-image: url('pattern.png'), -moz-linear-gradient(#f00, #300); background-image: url('pattern.png'), -ms-linear-gradient(r#f00, #300); background-image: url('pattern.png'), -o-linear-gradient(#f00, #300); background-image: url('pattern.png'), linear-gradient(#f00, #300);</code></pre> [Ver ejemplo 3][4]{.verejemplo} <h4 id="links">Links:</h4> <ul> <li><a href="http://caniuse.com/#feat=multibackground" title="Enlace externo a "can I use: CSS Multiple Backgrounds"" target="_blank">can I use: CSS Multiple Backgrounds</a></li> <li><a href="http://caniuse.com/#feat=css-gradients" title="Enlace externo a "can I use: CSS Gradients"" target="_blank">can I use: CSS Gradients</a></li> <li><a href="http://snook.ca/archives/html_and_css/multiple-bg-css-gradients" title="Enlace externo a "Multiple backgrounds and CSS gradient"" target="_blank">Multiple backgrounds and CSS gradient</a></li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/multiplebackground/ejemplo1.html">http://www.csslab.cl/ejemplos/multiplebackground/ejemplo1.html</a> “Enlace en CSSLab a “Ejemplo 1"” [2]: <a href="http://www.csslab.cl/ejemplos/multiplebackground/ejemplo2.html">http://www.csslab.cl/ejemplos/multiplebackground/ejemplo2.html</a> “Enlace en CSSLab a “Ejemplo 2"” [3]: <a href="http://www.csslab.cl/2012/03/29/tip-precoz-fondo-al-100-con-css3/">http://www.csslab.cl/2012/03/29/tip-precoz-fondo-al-100-con-css3/</a> “Enlace en CSSLab.cl a “Tip Precoz: Fondo al 100% con CSS3"” [4]: <a href="http://www.csslab.cl/ejemplos/multiplebackground/ejemplo3.html">http://www.csslab.cl/ejemplos/multiplebackground/ejemplo3.html</a> “Enlace en CSSLab a “Ejemplo 3"” </article> <article> <h1>Impresión portarretrato con CSS3</h1> Tue, 29 May 2012 14:54:25 +0000 Contexto: día de semana laboral, cliente envía sus observaciones: Después de leer un poco, dí con la solución la que presento a continuación. Básicamente con CSS2 existió una propiedad que permitía que se definiera el modo de impresión a través de estilos: <pre><code class="language-css">@Page { size: landscape; }</code></pre> [Ver ejemplo 1][1]{.verejemplo} Como podrán notar este a definición es de comportamiento y no de estilos, por lo que fue desestimada desde CSS2.1 y de ahí que sigue en el purgatorio de las propiedades olvidadas (aunque en la actualidad sólo Chrome lo sigue soportando). Me quedaban 2 soluciones: <ul> <li>con algún modo através de JavaScript, ó</li> <li>modificar el driver de cada marca y modelo de impresora y de alguna manera comunicar el HTML con ellas.</li> </ul> Continué indagando y finalmente dí con un truco que involucra CSS3. Primero, debes definir el (los) elemento(s) que necesitas imprimir en este modo (en mi caso era sólo una imagen), y darle estilos dentro de un [media=“print”][2] rotando este(os) elemento(s) aprovechando la impresión vertical pero con el elemento girado: <pre><code class="language-markup"><style type="text/css" media="print"> img { transform: scale(1.2) rotate(-90deg) translate(-200px, 0); } </style></code></pre> Básicamente, lo que hacemos es con la propiedad CSS3 [transform][3] rotar el elemento -90º, lo escalo un poco para que se vea mayor (1.2, opcional) y lo muevo -200px en el eje X para que quede centrado en una hoja tamaño A4. [Ver ejemplo 2][4]{.verejemplo} Funciona perfecto en IE9+, Chrome, Safari (enfin, browsers modernos). Ya para IE8-, deberás aplicar <a href=“<a href="http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx%22">http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx"</a> title=“Enlace externo a “Matrix Filter”” target="_blank”>filtros de matrices</a>, los cuales fueron un horrible invento de Microsoft. ** Omití intencionalmente todos las definiciones propietarias CSS3 pero en el ejemplo puedes inspeccionar y verás el código completo. <h4 id="links">Links:</h4> <ul> <li><a href="http://css-discuss.incutio.com/wiki/Print_Stylesheets#The_.40page_rule_and_forcing_Landscape_orientation" title="Enlace externo a "Printing Web documents and CSS"" target="_blank">Printing Web documents and CSS</a></li> <li><a href=“<a href="http://www.useragentman.com/IETransformsTranslator/%22">http://www.useragentman.com/IETransformsTranslator/"</a> title=“Enlace externo a “IE’s CSS3 Transforms Translator”” target="_blank”>IE’s CSS3 Transforms Translator</a></li> </ul> [1]: <a href="http://csslab.cl/ejemplos/landscape/ejemplo1.html">http://csslab.cl/ejemplos/landscape/ejemplo1.html</a> “Enlace en CSSLab.cl a “Ejemplo 1 - Impresión portarretrato con CSS3"” [2]: <a href="http://www.csslab.cl/2008/06/24/tip-precoz-2-combinando-media/">http://www.csslab.cl/2008/06/24/tip-precoz-2-combinando-media/</a> “Enlace en CSSLab.cl a “combinando @media”” [3]: <a href="http://www.csslab.cl/2011/01/31/animaciones-y-transformaciones-con-css3/">http://www.csslab.cl/2011/01/31/animaciones-y-transformaciones-con-css3/</a> “Enlace en CSSLab.cl a “Animaciones y Transformaciones con CSS3"” [4]: <a href="http://csslab.cl/ejemplos/landscape/ejemplo2.html">http://csslab.cl/ejemplos/landscape/ejemplo2.html</a> “Enlace en CSSLab.cl a “Ejemplo 2 - Impresión portarretrato con CSS3"” </article> <article> <h1>Aceleración por hardware con CSS3</h1> Thu, 17 May 2012 21:25:25 +0000 La mayoría de los browsers modernos (Chome 10+, Firefox 4+) usan la tarjeta gráfica para ayudar a las animaciones que son más difíciles de renderizar (WebGL hace uso por defecto de esta memoria, por eso corre tan bien en computadores capaces). Si estás haciendo [animaciones y transformaciones varias utilizando CSS3][1], existe un truco para engañar al browser y forzar a que utilice el GPU para realizar las animaciones. Basta con que declares la siguiente propiedad y valor (si no la estás utilizando): <pre><code class="language-css">-webkit-transform: translateZ(0);</code></pre> Si ya la estabas utilizando sigue con lo que tenías, que la GPU se encargará de hacer el mejor trabajo posible con tu animación. ❦ Nota: no creas que hace milagros; no hay garantía de que mejore notablemente la performance. Con esto simplemente activarás la memoria gráfica, por ende utilizarás más batería si estás en un móvil/tablet/laptop. ❦ [1]: <a href="http://www.csslab.cl/2011/01/31/animaciones-y-transformaciones-con-css3/">http://www.csslab.cl/2011/01/31/animaciones-y-transformaciones-con-css3/</a> “Enlace en CSSLab a “Animaciones y Transformaciones con CSS3"” </article> <article> <h1>Desarrollo Móvil: mini-curso y slides</h1> Thu, 19 Apr 2012 18:41:30 +0000 Hace unas semanas impartí un mini-curso teórico sobre diseño y desarrollo web para dispositivos móviles. El resultado fueron 3 días de slides, charla y demostraciones, las que comparto en esta ocasión para que pueda ser escuchada, analizada y criticada abiertamente. Como valor agregado, posterior al curso volví a grabar (tratando de recordar lo dicho en esos momentos) y disponibilizo los slides con audio y auto-navegación, es decir, en la parte superior de cada slide encontrarán un player de con el cual pueden hacer play y escuchar mi monótona voz mientras se cruzan de brazos, conectan audífonos y ven como pasan los slides uno a uno, sincronizados con lo que se va mencionando. Con audio cada clase no son más de 20 minutos. Advertencia: La grabación hecha en cada uno de los 3 slides fueron en una misma sesión y al estilo de conversación, no de charla. Imagínense que estamos en un bar conversando y me preguntan sobre mobile y y les voy contando todo lo que sé y deberían saben. Eso. Si no les interesa escucharme, ignoren el player y denle con las flechas. En todo caso el audio pueden pararlo y adelantarlo si quieren, el slide correspondiente se reubicará donde debería estar. <h4 id="clase-1-introducción-al-desarrollo-móvil">Clase 1: Introducción al desarrollo móvil</h4> <ul> <li>Roadmap</li> <li>Herramientas</li> <li>Dispositivos / Browsers</li> <li>Códigos base</li> </ul> [Ver Clase 1][1]{.bajar} <h4 id="clase-2-diseño-orientado-al-móvil">Clase 2: Diseño orientado al móvil</h4> <ul> <li>Resoluciones y Tamaños</li> <li>Densidad de pixeles</li> <li>Qué evitar</li> </ul> [Ver Clase 2][2]{.bajar} <h4 id="clase-3-desarrollo-orientado-al-móvil">Clase 3: Desarrollo orientado al móvil</h4> <ul> <li>Detección</li> <li>Was ist Modernizr</li> <li>Sitio dedicado v/s sitio responsivo</li> <li>Media queries</li> <li>HTML/CSS</li> <li>Javascript</li> <li>Herramientas</li> </ul> [Ver Clase 3][3]{.bajar} <h4 id="recomendaciones">Recomendaciones:</h4> <ol> <li>El uso de un browser moderno (duh!) como Chrome/Safari ó Firefox 9+</li> <li>Si vas a escuchar el audio, súbele el volumen y ponte audífonos.</li> <li>Comentarios sobre el contenido son bienvenidos.</li> </ol> <a href="https://speakerdeck.com/csslab/clase-1-introduccion-al-desarrollo-movil" target="_blank">Clase 1</a>, <a href="https://speakerdeck.com/csslab/clase-2-diseno-orientado-al-movil" target="_blank">clase 2</a> y <a href="https://speakerdeck.com/csslab/clase-3-desarrollo-orientado-al-movil" target="_blank">clase 3</a> en Speakerdeck. [1]: <a href="http://www.csslab.cl/ejemplos/curso/mobilewebdev/clase1.html">http://www.csslab.cl/ejemplos/curso/mobilewebdev/clase1.html</a> “Enlace en CSSLab a “1. Introducción al desarrollo móvil”” [2]: <a href="http://www.csslab.cl/ejemplos/curso/mobilewebdev/clase2.html">http://www.csslab.cl/ejemplos/curso/mobilewebdev/clase2.html</a> “Enlace en CSSLab a “2. Diseño orientado al móvil”” [3]: <a href="http://www.csslab.cl/ejemplos/curso/mobilewebdev/clase3.html">http://www.csslab.cl/ejemplos/curso/mobilewebdev/clase3.html</a> “Enlace en CSSLab a “3. Desarrollo orientado al móvil”” </article> <article> <h1>Experimento: rotación oblícua con CSS3</h1> Tue, 17 Apr 2012 15:29:11 +0000 Sólo quería probar cómo a partir de un elemento-caja, lograba girarlo 45º y rotarlo al mismo tiempo. No sé qué uso práctico pueda tener, pero dejo el código resumido para que lo estudien ya que no fue fácil (todo lo que sean sombras, gradientes lo pueden ver en el source del ejemplo final). El HTML es una imagen común y corriente: <pre><code class="language-markup"><img src="http://www.be-studios.com/tests/foto_diegol.jpg" /></code></pre> Pero la magia está en la [animación con CSS3][1]: <pre><code class="language-css">@-webkit-keyframes girando { 0% { transform: rotate(45deg) rotate3d(1,1,0,0deg); } 25% { transform: rotate(45deg) rotate3d(1,1,0,90deg); } 50% { transform: rotate(45deg) rotate3d(1,1,0,180deg); } 75% { transform: rotate(45deg) rotate3d(1,1,0,270deg); } 100% { transform: rotate(45deg) rotate3d(1,1,0,360deg); } } img { position: absolute; top: 20%; left: 30%; animation: girando linear infinite 2s; transform-style: preserve-3d; }</code></pre> [Ver ejemplo][2]{.verejemplo} <a href="http://dabblet.com/gist/2406119" class="dabblet" title="Enlace externo a "Dabblet"" target="_blank">Ver Gist en Dabblet</a> Adelante, puedes ver cómo funciona en tu celular ⬇ <div id="qrcode"> </div> <h4 id="links">Links:</h4> <ul> <li><a href="http://www.w3schools.com/css3/css3_3dtransforms.asp" target="_blank" title="Enlace externo a "CSS3 3D Transforms"">CSS3 3D Transforms</a></li> <li><a href="http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/" target="_blank" title="Enlace externo a "Understanding CSS 3D Transforms"">Understanding CSS 3D Transforms</a></li> <li><a href="http://www.webkit.org/blog/386/3d-transforms/" target="_blank" title="Enlace externo a "3D Transforms"">3D Transforms</a></li> </ul> [1]: <a href="http://www.csslab.cl/2011/06/21/animaciones-css3-avanzadas/">http://www.csslab.cl/2011/06/21/animaciones-css3-avanzadas/</a> “Enlace en CSSLab a “Animaciones CSS3 avanzadas”” [2]: <a href="http://www.csslab.cl/ejemplos/css3rotacionoblicua/">http://www.csslab.cl/ejemplos/css3rotacionoblicua/</a> “Enlace en CSSLab a “Ejemplo rotación oblícua con CSS3"” </article> <article> <h1>Tip Precoz: obtener valor numérico con JavaScript</h1> Wed, 11 Apr 2012 15:56:57 +0000 Con [jQuery][1] constantemente necesitamos crear variables para tomar valores CSS de elementos, para luego construir nuevos elementos o interacciones; constantemente lo hago en plugins cono [Timelinr][2] o [Blox][3]!, pero JavaScript nos ofrece un método más rápido que el andar haciendo slices. Desde el siguiente ejemplo, tomaremos la el valor CSS de margin-top del buscador de este mismo sitio; normalmente lo haríamos de esta manera: <pre><code class="language-javascript">var marginT = $('#search_container').css('margin-top');</code></pre> <a href="#" class="verejemplo" onclick="ejemplo1(); return false;">Click para ver ejemplo 1</a> El valor entregado efectivamente es el correcto: 10px pero lo necesitamos numérico. Para ello utilizamos <a href="http://w3schools.com/jsref/jsref_replace.asp" title="Enlace externo a "JavaScript replace()"" target="_blank">replace()</a>: <pre><code class="language-javascript">var marginT = $('#search_container').css('margin-top').replace('px','');</code></pre> <a href="javascript:void(0)" class="verejemplo" onclick="ejemplo2();">Click para ver ejemplo 2</a> [1]: <a href="http://www.csslab.cl/tag/jquery/">http://www.csslab.cl/tag/jquery/</a> “Enlace en CSSLab a “jQuery”” [2]: <a href="http://www.csslab.cl/2011/08/18/jquery-timelinr/">http://www.csslab.cl/2011/08/18/jquery-timelinr/</a> “Enlace en CSSLab a “jQuery Timelinr”” [3]: <a href="http://www.csslab.cl/2009/05/25/jquery-blox/">http://www.csslab.cl/2009/05/25/jquery-blox/</a> “Enlace en CSSLab a “Blox!”” </article> <article> <h1>Tip Precoz: Background al 100% con CSS3</h1> Thu, 29 Mar 2012 17:58:31 +0000 Entramos en una era donde cada vez más podemos aprovechar las bondades de CSS3 sin tener que parchar funcionalidad con scripts y plugins de JavaScript. En esta ocasión, utilizaremos una propiedad CSS3 para hacer que una imagen de fondo cubra el 100% de la ventana, escalándose hasta adaptarse. Afortunadamente los browsers están aplicando suavizado a los elementos por defecto, y en general la imagen no debería de verse (muy) pixelada (si está en una resolución decente y bien optimizada, claro). <pre><code class="language-css">background-size: cover;</code></pre> Esta propiedad (anexa) de background permite hacer lo que necesitamos. Lamentablemente estamos en una etapa en que los estándares y quienes los implementan no se ponen del todo de acuerdo y debemos utilizar esos molestosos prefijos, pero fuera de eso funciona de maravilla. <pre><code class="language-css">body { background: url('../img/thai.jpg') center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; }</code></pre> [Ver ejemplo][1]{.verejemplo} Soporte: Safari, Chrome, Firefox 3.6+, IE9+, Opera10+ [1]: <a href="http://www.csslab.cl/ejemplos/poster/">http://www.csslab.cl/ejemplos/poster/</a> “Enlace en CSSLab a “Ejemplo fondo al 100% con CSS3"” </article> <article> <h1>Review 7: 100 Things Every Designer Needs to Know About People</h1> Wed, 21 Mar 2012 15:35:28 +0000 <a href="http://www.csslab.cl/wp-content/uploads/2012/03/libro1.jpg" target="_blank"></a> 100 Things Every Designer Needs to Know About People Susan M Weinschenk, Ph.D. Edición 1, ISBN-10: 0321767535 | ISBN-13: 978-0321767530 Antes que todo y primero que nada, este libro fue un préstamo de un amigo quien gentilmente me recomendó leerlo. Sus palabras fueron (creo): “lo compré en Amazon y es interesante”. Suficiente en ese entonces para darle una oportunidad. Segundo: un libro que tiene en su cubierta el nombre del autor con su grado académico no me impresiona para nada, más aún si el tema involucra diseño gráfico o desarrollo web. “100 Things…” terminó siendo un libro interesante de leer, pero si estuviera aún en la Universidad. Trata sobre el estudio de Susan (psicóloga, se nota) sobre el comportamiento del usuario frente a diferentes estímulos que existen cuando se encuentra con un sitio web. Para ser exactos, son 100 hechos que se consideran y que son avalados por estudios sobre el comportamiento del usuario. Lo bueno es que está bastante resumido. Lo malo, es que es muy superficial y fácil de leer. Personalmente me gustan lecturas algo más complejas y que me permitan trabajar más el cerebro, pero en este libro Susan no deja mucho a la imaginación y entrega todo lo que tiene, muy simple y resumido. Cuando menciona estudios hechos por investigadores, no agrega las fuentes utilizadas (no hay ningún pié de página) pero al final del libro están todas las referencias utilizadas, por si alguien se asoma a consultarlos. Aún más, trabaja tan bien cada una de las 100 ideas (y las separa por temas: Como ven, leen, recuerdan, piensa, decide, etc.) que deja un resumen de lo que el lector debe recordar (Takeaways), algo así como ‘si no quieres seguir leyendo quédate con el resumen’. Finalizando, “100 Things…” es un libro muy bueno para ser leído por un universitario o quien esté en una etapa de aprendizaje, es fundamental para que se conozcan los estudios y conclusiones hechas en base al comportamiento del usuario. Pero para un profesional que ya tiene bagage, si no conoce 90 de las 100 es que está mal enfocado (he conocido a muchos que le hacen falta un repaso por este libro en todo caso). <ul> <li>La guinda de la torta: ¡Publicidad! ¡En un Libro! Primera vez que lo veo, no me dejo de impresionar.</li> </ul> </article> <article> <h1>Lo ví y me gustó 42</h1> Thu, 08 Mar 2012 21:12:47 +0000 #42 – 8 marzo 2012 <a href="http://metiendoruido.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://coleure.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://bookwriteronline.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.dd3web.com.ar/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Estilos alternados con CSS3, jQuery y Mootools</h1> Mon, 13 Feb 2012 15:44:16 +0000 Este será un artículo corto y preciso: cómo alternar estilos dentro de un mismo elemento utilizando 3 técnicas diferentes. Con el siguiente HTML de ejemplo: <pre><code class="language-markup"><ul> <li>Elemento Uno</li> <li>Elemento Dos</li> <li>Elemento Tres</li> <li>Elemento Cuatro</li> <li>Elemento Cinco</li> </ul></code></pre> <h4 id="css3">CSS3</h4> Comencemos con la más vanguardista: con CSS3, a cada elemento impar (odd) agrégale el estilo definido: <pre><code class="language-css">ul li:nth-child(odd) { background-color: #999; }</code></pre> [Ver ejemplo][1]{.verejemplo} Si quieres los elementos pares, basta cambiar odd por even. <h4 id="jquery">jQuery</h4> Sigamos con el popular jQuery: cómo lograr estilos intercalados para elementos dependientes de uno padre: <pre><code class="language-javascript">$("ul li:odd").addClass("impar");</code></pre> Teniendo en el CSS: <pre><code class="language-css">.impar { background-color: #999; }</code></pre> [Ver ejemplo][2]{.verejemplo} <h4 id="mootools">Mootools</h4> Terminemos con el poderoso Mootools, mismo CSS anterior: <pre><code class="language-javascript">$$("ul li").each(function(el, count) { el.addClass(count % 2 == 0 ? '' : 'impar'); });</code></pre> [Ver ejemplo][3]{.verejemplo} * Si te fijaste, tanto jQuery como Mootools no coinciden en el zebra con el método con CSS3 porque manipula los elementos con Javascript y los interpreta como un array, el que tiene un índice de 0 y a partir de ahí comienza a contar hacia adelante. En el fondo no es realmente ‘impar’ o ‘par’, ten en cuenta que lo importante es la alternancia en los elementos. [1]: <a href="http://www.csslab.cl/ejemplos/zebra/ejemplo_css3.html">http://www.csslab.cl/ejemplos/zebra/ejemplo_css3.html</a> “Enlace en CSSLab.cl a “Ejemplo CSS3 estilos alternados”” [2]: <a href="http://www.csslab.cl/ejemplos/zebra/ejemplo_jquery.html">http://www.csslab.cl/ejemplos/zebra/ejemplo_jquery.html</a> “Enlace en CSSLab.cl a “Ejemplo jQuery estilos alternados”” [3]: <a href="http://www.csslab.cl/ejemplos/zebra/ejemplo_mootools.html">http://www.csslab.cl/ejemplos/zebra/ejemplo_mootools.html</a> “Enlace en CSSLab.cl a “Ejemplo Mootools estilos alternados”” </article> <article> <h1>Nuevos cursores con CSS3</h1> Wed, 11 Jan 2012 14:46:45 +0000 El cursor del mouse es un elemento muy poco considerado en el momento del diseño ó al aplicar estilos CSS. Pero la verdad es que es un complemento importantísimo de la accesibilidad y usabilidad, y por esa razón fue considerado en el momento de crearse tantos valores para esta propiedad. Su uso es muy fácil y es aplicable no sólo a la pseudo-class :hover, sino que a cualquier etiqueta HTML: <pre><code class="language-markup" style="cursor: help; font-weight: bold;">¡Ayuda!</code></pre> Lamentablemente la visualización de cada tipo de cursor depende del sistema operativo del usuario, y la capacidad de visualizarlo depende del browser que esté utilizando. A continuación nombro todas las variedades y al final una página de ejemplo con todos ellos aplicados para que tengan al cursor considerado en su próximo proyecto: <h3 id="css2">CSS2:</h3> <pre><code class="language-css">cursor: auto; cursor: inherit; cursor: crosshair; cursor: default; cursor: help; cursor: move; cursor: pointer; cursor: progress; cursor: text; cursor: wait; cursor: e-resize; cursor: ne-resize; cursor: nw-resize; cursor: n-resize; cursor: se-resize; cursor: sw-resize; cursor: s-resize; cursor: w-resize;</code></pre> <h3 id="css3-smallfuncionan-en-los-browsers-modernos-ie9-ff-35-chrome-safari-opera-9small">CSS3 (funcionan en los browsers modernos (IE9+, FF 3.5+, Chrome, Safari, Opera 9+):</h3> <pre><code class="language-css">cursor: none; cursor: context-menu; cursor: cell; cursor: vertical-text; cursor: alias; cursor: copy; cursor: no-drop; cursor: not-allowed; cursor: ew-resize; cursor: ns-resize; cursor: nesw-resize; cursor: nwse-resize; cursor: col-resize; cursor: row-resize; cursor: all-scroll;</code></pre> <h3 id="propietarios-smallfirefox-y-chromesafarismall">Propietarios (Firefox y Chrome/Safari):</h3> <pre><code class="language-css">cursor: -webkit-grab; cursor: -moz-grab; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: -webkit-zoom-out; cursor: -moz-zoom-out;</code></pre> <h3 id="tu-propio-cursor">Tu propio cursor:</h3> <pre><code class="language-css">cursor: url(images/cursor.cur); cursor: url(images/cursor.png), default;</code></pre> * para mejor fallback después del url() utiliza algunos de los cursores CSS2 * Para Firefox y Chrome/Safari utiliza un PNG transparente. * IE require que sea un archive .cur * Opera no lo soporta [Ver cursores][1]{.verejemplo} <h4 id="link">Link:</h4> <ul> <li><a href="http://www.sitepoint.com/css3-cursor-styles/" title="Enlace externo a "Introducing the New Cursor Styles in CSS3 - SitePoint"" target="_blank">Introducing the New Cursor Styles in CSS3</a></li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/cursor/">http://www.csslab.cl/ejemplos/cursor/</a> “Enlace en CSSLab a “Nuevos cursores con CSS3"” </article> <article> <h1>Construir para Retina Display</h1> Thu, 15 Dec 2011 18:45:01 +0000 Desde la salida del <a href="http://www.apple.com/iphone/features/retina-display.html" title="Enlace externo a "iPhone Retina Display"" target="_blank">Retina Display</a>, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para [iPhone][1]. Aunque si seguías utilizando los acostumbrados [480x320px][2] de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los modelos anteriores? Suele ser común el pensamiento que 1 pixel en CSS es 1 pixel en la pantalla del dispositivo. Cuando entramos al nuevo mundo de la alta definición un pixel en CSS termina siendo múltiples en la pantalla. Un ejemplo es si defino un zoom de 2x, entonces 1 pixel de CSS termina siendo 2×2 cuadrados de pixel en el dispositivo. Y eso es lo que está sucediendo desde el iPhone 4. Entonces, la pregunta es sencilla: ¿Cómo trabajamos con Retina sin dejar de lado las resoluciones anteriores? La respuesta viene de la mano del potente Mobile Safari y su capacidad de responder mediante <a href="http://www.w3.org/TR/css3-mediaqueries/" title="Enlace externo a "Media Queries"" target="_blank">CSS3 media queries</a>. Podemos detectar si el dispositivo duplica la densidad del pixel, y si es así modificar el estilo reemplazando las imágenes por una de doble resolución: <pre><code class="language-markup"><link rel="stylesheet" type="text/css" href="css/normal.css"> <link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" ></code></pre> El secreto está en que definas las imágenes que querrás se vean de mejor calidad en un iPhone 4+ mediante background-image de CSS, por ejemplo: <h4 id="normalcss">normal.css</h4> <pre><code class="language-css">#logo { background-image: url('images/logo.png'); background-size: 100px 100px; background-repeat: no-repeat; }</code></pre> <h4 id="retinacss">retina.css</h4> <pre><code class="language-css">#logo { background-image: url('images/logo_hi.png'); }</code></pre> [Ver ejemplo][3]{.verejemplo} Te recomiendo apreciar el ejemplo desde tu teléfono móvil, para que realmente veas los resultados: <div id="qrcode"> </div> Como el navegador va a leer sí o sí normal.css, y por gracia del media=“only screen and (-webkit-min-device-pixel-ratio: 2) sólo los dispositivos que tengan duplicados su resolución leerán retina.css y sobreescribirán los estilos definidos en esta hoja de estilos por sobre la anterior. La idea es que sólo definas las propiedades que cambien, no es necesario que reescribas todo el código. <h3 id="mediante-js">Mediante JS</h3> Otra manera es hacerlo mediante JavaScript, la cual encuentro innecesaria pero de todas maneras dejo la opción: <pre><code class="language-javascript">if (window.devicePixelRatio >= 2) { document.write("<link href='css/retina.css' rel='stylesheet' type='text/css' media='screen' />"); } else { document.write("<link href='normal.css' rel='stylesheet' type='text/css' media='screen' />");</code></pre> <h4 id="links">Links:</h4> <ul> <li><a href="http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/" title="Enlace externo a "CSS Image Replacement for iPhone 4 High-DPI Retina Display"" target="_blank">CSS Image Replacement for iPhone 4 High-DPI Retina Display</a></li> <li><a href="http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html" title="Enlace externo a "Targeting the iPhone 4 Retina Display with CSS3 Media Queries"" target="_blank">Targeting the iPhone 4 Retina Display with CSS3 Media Queries</a></li> <li><a href="http://www.w3.org/TR/css3-mediaqueries/" title="Enlace externo a "Media Queries by W3C"" target="_blank">Media Queries by W3C</a></li> </ul> [1]: <a href="http://www.csslab.cl/category/iphone/">http://www.csslab.cl/category/iphone/</a> “Enlace en CSSLab a “Artículos con categoría iPhone”” [2]: <a href="http://www.csslab.cl/2008/07/10/desarrollos-web-para-iphone/">http://www.csslab.cl/2008/07/10/desarrollos-web-para-iphone/</a> “Enlace en CSSLab a “Desarrollos Web para iPhone”” [3]: <a href="http://www.csslab.cl/ejemplos/retina/">http://www.csslab.cl/ejemplos/retina/</a> “Enlace en CSSLab a “Ejemplo 1 - Construir para Retina Display”” </article> <article> <h1>Outlinr: a bookmarklet</h1> Tue, 06 Dec 2011 15:43:21 +0000 Outlinr: simple y rápido web inspector, ni menos ni más / simple and fast web inspector, neither more nor less <h5 id="selecciona-tu-idioma--select-your-language">Selecciona tu idioma / Select your language:</h5> <ul id="horizons_tab" class="idTabs"> <li> <a href="#english" title="Read in English">English</a> </li> <li> <a href="#espanol" title="Leer en Español">Español</a> </li> </ul> <div id="english"> <h3> EN </h3> Frequently on my debugging stage (when I need to solve something within the HTML/CSS markup that is causing some conflict) I use the CSS outline property to contour the HTML elements so as I can visually locate where the elements are positioned, if they’re collapsing, which elements are involving, etc. I use outline because it’s a property that does not modify the <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/" title="Link in CSSLab.cl to "Como caja: el modelo"">box model</a> and won’t going to break more elements that are already working fine. If I use border instead, it will add 1 or 2 px to the box and can add more unnecessary problems. In addition, I use the red color not only because it’s strongly visible, but it’s fastest writing on the keyboard (lazy huh?). Anyway, that was the introduction. I made this <a href="http://www.csslab.cl/2009/02/20/mis-bookmarklets/" title="Link in CSSLab.cl to "Mis Bookmarklets"">bookmarklet</a> that does the job for me directly on the browser, so I don’t add dirt to my stylesheet or to the HTML file. I could use the web inspector from the browser (or Firebug) but this method is quicker. The bookmarklet asks you for which selector to draw (div is by default but it could be any selector from <a href="http://www.csslab.cl/tag/jquery/" title="Link in CSSLab to "jQuery"">jQuery</a> sentences) and the color (red is the default but it can be blue, green, #f60, etc). I hope it can be useful for somebody else than me. Requirement: you have to be connected to the Internet, it calls jQuery from Google API’s. </div> <div id="espanol"> <h3> ES </h3> Frecuentemente en mi etapa de debugging (cuando necesito solucionar algo dentro del marcado HTML/CSS que estuviera provocando algún conflicto) utilizo la propiedad CSS outline para contornar los elementos HTML y ver dónde están ubicados, si están colapsando, qué elementos envuelve, etc. Utilizo outline porque es una propiedad que no influye en el <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/" title="Enlace en CSSLab.cl a "Como caja: el modelo"">modelo de caja</a> y no va a hacer que se quiebren los elementos que ya sé que están correctamente posicionados. Si utilizara border le agregaría mínimo 1 ó 2 pixeles a la caja y seguro provocaría un problema más del que estoy tratando de resolver. Además, utilizo el color rojo no porque es uno de los colores más fuertes y menos comunes dentro de un layout, sino que es el más rápido de escribir (en inglés) dentro del CSS. Me acostumbré. Enfin, esa fue la introducción. Hice un <a href="http://www.csslab.cl/2009/02/20/mis-bookmarklets/" title="Link in CSSLab.cl to "Mis Bookmarklets"">bookmarklet</a> que hace ese trabajo por mí directo en el browser, sin tener que ensuciar mi hoja de estilos y menos el HTML. Podría utilizar el web inspector del browser (ó Firebug) pero este método es más rápido. El bookmarklet te pregunta qué selectores dibujar (por defecto es div pero puedes utilizar cualquier selector mediante las sentencias de <a href="http://www.csslab.cl/tag/jquery/" title="Enlace en CSSLab a "jQuery"">jQuery</a>) y además del color (por defecto es red pero puedes utilizar blue, green, #f60, etc). Espero pueda ser útil a alguien más que a mí. Requisito: tienes que estar conectado a Internet ya que llama a jQuery desde Google API’s. </div> <h3 class="bookmarklet" id="outlinr1-smalllarr-clickdragsmall">[Outlinr][1] ← click&drag</h3> <h4 id="how-to-install-a-bookmarklet--cómo-instalar-un-bookmarklet">How to install a bookmarklet / Cómo instalar un bookmarklet</h4> #### [1]: javascript:(function(e,a,g,h,f,c,b,d)%7Bif(!(f=e.jQuery)%7C%7Cg%3Ef.fn.jquery%7C%7Ch(f))%7Bc=a.createElement(%22script%22);c.type=%22text/javascript%22;c.src=%22http://ajax.googleapis.com/ajax/libs/jquery/%22+g+%22/jquery.min.js%22;c.onload=c.onreadystatechange=function()%7Bif(!b&&(!(d=this.readyState)%7C%7Cd==%22loaded%22%7C%7Cd==%22complete%22))%7Bh((f=e.jQuery).noConflict(1),b=1);f(c).remove()%7D%7D;a.documentElement.childNodes%5B0%5D.appendChild(c)%7D%7D)(window,document,%221.3.2%22,function($,L)%7B$(prompt(‘HTML Element? Use jQuery Selectors’,‘div’)).css(‘outline’,‘1px%20solid%20’+prompt(‘Color? Use HEX or ColorNames’,‘red’));%7D); </article> <article> <h1>Columnas Múltiples con CSS3</h1> Wed, 16 Nov 2011 14:06:21 +0000 La idea de diagramar contenido con columnas múltiples es un método heredado del diseño editorial, donde se utilizan retículas para diagramar tanto texto como imágenes (y publicidad, claro). Su uso se justifica en la capacidad del lector de seguir la misma línea de texto sin perderse en su continuidad. El texto de divide en varias columnas de menos ancho facilitando la comprensión del tema que se está tratando. La implementación de columnas múltiples en CSS no es algo nuevo, <a href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118/" title="Enlace externo a "CSS3 module: Multi-column layout"" target="_blank">fue propuesto a la W3C en el 2001</a> y ya estaba implementado en Webkit desde sus inicios, en Firefox desde la versión 1.5 y se podía utilizar fácilmente desde 2006. Pero con el advenimiento de [CSS3][1] como un estándar cada vez más fuerte, y con una presión bastante notoria por parte de los desarrolladores para implementar sus beneficios en sus proyectos web se ha hecho cada vez más viable su uso. Además, existen fallbacks que permiten que se pueda utilizar en navegadores más antiguos o que no tengan esta capacidad sin mayores problemas. Por suerte su implementación es bastante simple. Dado el siguiente HTML con un bloque de texto: <pre><code class="language-markup"><div id="columna"> International Bitterness Units (IBU), Caramel malt, Pitching Bottom-fermenting Yeast. Double bock/dopplebock; Reboboam Mash Tart Lagering Grist Caramel malt Bittering Hops... </div></code></pre> Para separarlo en 2 columnas basta con utilizar la propiedad column-count: 2; <pre><code class="language-css">#columna { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }</code></pre> [Ver Ejemplo 1][2]{.verejemplo} La lista completa de propiedades: <dl> <dt>column-count:</dt> <dd>la cantidad de columnas.</dd> <dt>column-width:</dt> <dd>define el ancho de las columnas, caso no quieras que el browser calcule de acuerdo al modelo de caja.</dd> <dt>column-gap:</dt> <dd>el espacio entre cada columna, en la unidad de medida que estimes.</dd> <dt>column-rule:</dt> <dd>borde (separación) entre cada colina, por ejemplo una línea recta.</dd> </dl> [Ver Ejemplo 2][3]{.verejemplo} Ahora, qué hacemos con los browsers que no tienen la capacidad de interpretar esta úil propiedad? <a href="http://caniuse.com/#search=column" title="Enlace externo a "Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers"" target="_blank">Según caniuse.com, ningún IE lo soporta en la actualidad, quizás IE10 lo haga</a>. Afortunadamente <a href="http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column" title="Enlace externo a "JavaScript implementation for CSS3 Multi Column"" target="_blank">JavaScript viene al rescate con un pequeño script</a> que incluiremos luego del estilo, el que agregará el soporte de column-count y demases. [Ver Ejemplo 3][4]{.verejemplo} Como ven, no hay razón para no comenzar a utilizar las columnas múltiples. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column" title="Enlace externo a "JavaScript implementation for CSS3 Multi Column"" target="_blank">JavaScript implementation for CSS3 Multi Column</a></li> <li><a href="http://caniuse.com/#search=column" title="Enlace externo a "Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers"" target="_blank">Caniuse.com: Multi Column browser support</a></li> <li><a href="http://www.w3.org/TR/css3-multicol/" title="Enlace externo a "CSS Multi-column Layout Module"" target="_blank">CSS Multi-column Layout Module W3C Candidate Recommendation 12 April 2011</a></li> </ul> [1]: <a href="http://csslab.cl/?s=css3">http://csslab.cl/?s=css3</a> “Enlace en CSSlab.cl a “Resultados de búsqueda para css3"” [2]: <a href="http://www.csslab.cl/ejemplos/multicolumnas/ejemplo1.html">http://www.csslab.cl/ejemplos/multicolumnas/ejemplo1.html</a> “Enlace en CSSLab.cl a “Columnas Múltiples con CSS3 - Ejemplo 1"” [3]: <a href="http://www.csslab.cl/ejemplos/multicolumnas/ejemplo2.html">http://www.csslab.cl/ejemplos/multicolumnas/ejemplo2.html</a> “Enlace en CSSLab.cl a “Columnas Múltiples con CSS3 - Ejemplo 2"” [4]: <a href="http://www.csslab.cl/ejemplos/multicolumnas/ejemplo3.html">http://www.csslab.cl/ejemplos/multicolumnas/ejemplo3.html</a> “Enlace en CSSLab.cl a “Columnas Múltiples con CSS3 - Ejemplo 3"” </article> <article> <h1>Lo ví y me gustó 41</h1> Thu, 13 Oct 2011 15:07:43 +0000 #41 – 13 Octubre 2011 <a href="http://www.acuariomazatlan.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.ilovebt.com.br/" target="_blank" title="Abrir Sitio"></a> <a href="http://catalinaamenabar.cl/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.coronel.cl/#" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>jQuery Timelinr</h1> Thu, 18 Aug 2011 20:23:49 +0000 Dando vida al tiempo / Giving life to time <h5 id="selecciona-tu-idioma--select-your-language">Selecciona tu idioma / Select your language:</h5> <ul id="horizons_tab" class="idTabs"> <li> <a href="#english" title="Read in English">English</a> </li> <li> <a href="#espanol" title="Leer en Español">Español</a> </li> </ul> <div id="english"> <h3> EN </h3> This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc. Last stable version: 0.9.6 <h4> Configuration: </h4> <ul> <li> Include the jQuery library and this plugin: </li> </ul> <pre><code class="language-markup"><script src="js/jquery-1.x.x.min.js"></script> <script src="js/jquery.timelinr-0.9.x.js"></script></code></pre> <li> Inicialize-it with the default parameters: </li> <pre><code class="language-javascript">$(function(){ $().timelinr(); });</code></pre> <li> Or configure it as preferred: </li> <pre><code class="language-javascript">$(function(){ $().timelinr({ orientation: 'horizontal', // value: horizontal | vertical, default to horizontal containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline datesDiv: '#dates', // value: any HTML tag or #id, default to #dates datesSelectedClass: 'selected', // value: any class, default to selected datesSpeed: 'normal', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal issuesDiv : '#issues', // value: any HTML tag or #id, default to #issues issuesSelectedClass: 'selected', // value: any class, default to selected issuesSpeed: 'fast', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast issuesTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2 issuesTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) prevButton: '#prev', // value: any HTML tag or #id, default to #prev nextButton: '#next', // value: any HTML tag or #id, default to #next arrowKeys: 'false', // value: true/false, default to false startAt: 1, // value: integer, default to 1 (first) autoPlay: 'false', // value: true | false, default to false autoPlayDirection: 'forward', // value: forward | backward, default to forward autoPlayPause: 2000 // value: integer (1000 = 1 seg), default to 2000 (2segs)< }); });</code></code></pre> HTML markup must be as follows: <pre><code class="language-markup"><div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="issues"> <li id="date1"> Lorem ipsum. </li> <li id="date2"> Lorem ipsum. </li> </ul> <a href="#" id="next">+</a>  <a href="#" id="prev">-</a>  </div></code></pre> <a href="http://www.sebastiancortes.info/" target="_blank">Icon designed by Sebastián Cortés</a> <h5> Changelog: </h5> <ul> <li> 0.9.6: check if required elements exist on page before initializing timelinr </li> <li> 0.9.54: Bugfix: large timelines now gets centered. </li> <li> 0.9.53: Bugfix: arrows hidden when jumping from first and last dates resolved. </li> <li> 0.9.52: Problem with arrows nav and 2 or less issues now fixed. </li> <li> 0.9.51: As requested, now prev/next buttons are hidden if the issue is in the first/last position. Also, jQuery updated to 1.7.2 version (latest) and HTML markup now is HTML5 doctype. </li> <li> 0.9.5: IE8 bug smashed while dates are animated (vertical); CSS updated: filter added due to IE8 bad-support of PNG transparency (#issues img). </li> <li> 0.9.4: Added autoPlay, autoPlayPause and autoPlayDirection (disabled by default). </li> <li> 0.9.3: Added startAt: select where do you want the timeline to start. </li> <li> 0.9.3: Fixed bug with animation while pressing the navigation buttons. </li> <li> 0.9.2: Fixed Firefox bug with event.preventDefault(); </li> <li> 0.9.1: Added keyboard navigation, see vertical demo. </li> <li> 0.9.1: preventDefault(); added to arrows. </li> <li> 0.9.1: Documentation improved. </li> </ul> </div> <div id="espanol"> <h3> ES </h3> Este sencillo plugin ayuda a que le des más vida y estilo a las aburridas líneas de tiempo. Soporta diagramaciones horizontales y verticales, y puedes parametrizar la mayoría de los atributos: velocidades, transparencias, etc. Última versión estable: 0.9.6 <h4> Configuración: </h4> <ul> <li> Incluye la librería jQuery y luego este plugin: </li> </ul> <pre><code class="language-markup"><script src="js/jquery-1.x.x.min.js"></script> <script src="js/jquery.timelinr-0.9.x.js"></script></code></pre> <li> Inicialízalo con los parámetros por defecto: </li> <pre><code class="language-javascript">$(function(){ $().timelinr(); });</code></pre> <li> O customízalos: </li> <pre><code class="language-javascript">$(function(){ $().timelinr({ orientation: 'horizontal', // valores: horizontal | vertical, por defecto horizontal containerDiv: '#timeline', // valores: cualquier etiqueta HTML ó #id, por defecto #timeline datesDiv: '#dates', // valores: cualquier etiqueta HTML ó #id, por defecto #dates datesSelectedClass: 'selected', // valores: cualquier clase, por defecto selected datesSpeed: 'normal', // valores: número entre 100 y 1000 (recomendado) ó 'slow', 'normal', 'fast', por defecto normal issuesDiv : '#issues', // valores: cualquier etiqueta HTML ó #id, por defecto #issues issuesSelectedClass: 'selected', // valores: cualquier clase, por defecto selected issuesSpeed: 'fast', // valores: número entre 100 y 1000 (recomendado)ó 'slow', 'normal', 'fast', por defecto fast issuesTransparency: 0.2, // valores: número entre 0 y 1 (recomendado), por defecto 0.2 issuesTransparencySpeed: 500, // valores: número entre 100 y 1000 (recomendado), por defecto 500 (normal) prevButton: '#prev', // valores: cualquier etiqueta HTML ó #id, por defecto #prev nextButton: '#next', // valores: cualquier etiqueta HTML ó #id, por defecto #next arrowKeys: 'false', // valores: true/false, por defecto false startAt: 1, // valor: número entre 1 y el máximo de elementos, por defecto 1 (primero) autoPlay: 'false', // valor: true | false, por defecto false autoPlayDirection: 'forward', // valor: forward | backward, por defecto forward autoPlayPause: 2000 // valor: número (1000 = 1 seg), por defecto 2000 (2segs) }) });</code></pre> El marcado HTML debe ser de la siguiente forma: <pre><code class="language-markup"><div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="issues"> <li id="date1"> Lorem ipsum. </li> <li id="date2"> Lorem ipsum. </li> </ul> <a href="#" id="next">+</a>  <a href="#" id="prev">-</a>  </div></code></pre> <a href="http://www.sebastiancortes.info/" target="_blank">Ícono diseñado por Sebastián Cortés</a> <h5> Cambios: </h5> <ul> <li> 0.9.6: verifica si elemento existe antes de inicializar timelinr </li> <li> 0.9.54: Ahora se centran lineas de tiempo con muchas fechas </li> <li> 0.9.53: Problema con salto entre primer y última fecha y desaparición de flechas de navegación solucionado. </li> <li> 0.9.52: Problema con la navegación con flechas y 2 ó menos issues ahora solucionado. </li> <li> 0.9.51: como solicitado, los botones prev/next se esconden si el issue está en la posición inicial/final. Además, jQuery fue actualizado a 1.7.2 (última) y el doctype del documento ahora es HTML5. </li> <li> 0.9.5: bug de IE8 aplastado cuando las fechas eran animadas (vertical); CSS mejorado: filter agregado por el mal soporte de IE8 con los PNG transparentes (#issues img) </li> <li> 0.9.4: Agregados autoPlay, autoPlayPause y autoPlayDirection (deshabilitados por defecto). </li> <li> 0.9.3: Agregado startAt: selecciona en qué punto quieres que comience la línea de tiempo. </li> <li> 0.9.3: Solucionado bug con animación mientras presionas los botones de navegación. </li> <li> 0.9.2: Solucionado bug Firefox con event.preventDefault(); </li> <li> 0.9.1: Agregado navegación por teclado, ver ejemplo vertical. </li> <li> 0.9.1: preventDefault(); agregado a las flechas. </li> <li> 0.9.1: Documentación mejorada. </li> </ul> </div> <a href="http://www.csslab.cl/ejemplos/timelinr/latest/horizontal.html">Demo Horizontal</a>{.verejemplo} <a href="http://www.csslab.cl/ejemplos/timelinr/latest/vertical.html">Demo Vertical</a>{.verejemplo} <a href="http://www.csslab.cl/ejemplos/timelinr/latest/autoplay.html">Demo Autoplay</a>{.verejemplo} <a href="https://github.com/juanbrujo/jQuery-Timelinr/archive/v0.9.7.zip">Download/Bajar Plugin + Demos</a>{.bajar} Copyright 2011, CSSLab.cl – Free under the <a href="http://www.opensource.org/licenses/mit-license.php" title="Enlace externo a "Licensing The MIT License"" target="_blank">MIT license</a>. </article> <article> <h1>Ordenando la cabeza</h1> Tue, 19 Jul 2011 17:33:27 +0000 Muchas veces nos esforzamos en tener el código más limpio y pulcro posible, pero no nos fijamos en lo que sucede dentro del <head></head>. Es una parte vital, donde se define el comportamiento de toda la página web. Pero primero, debemos entender cómo el browser lee una página web. Cuando un navegador comienza a parsear una página, comienza a leer desde el encabezado, claro. Si la respuesta del encabezado del content-type especifica un atributo charset, esos bytes pueden ser interpretados inmediatamente como texto utilizando el encoding determinado. Sin embargo, si una declaración charset no está presente, el browser comienza a escanear los bytes de de respuesta del cuerpo, buscando por algún marcador unicode ó algún elemento dentro del meta http-equiv que especifique el charset. Cuando lo encuentra el parser vuelve a leer el documento para asegurarse que lo anterior sea leído correctamente. Ahora, si una declaración de charset no está definido, el browser está obligado a autodetectar el encoding dependiendo del contenido, lo que puede provocar errores de caracteres o en la página misma. Luego, son leídos el título, favicon y los estilos (<link>) los que deben estar en concordancia con el charset definido anteriormente. Finalmente, el orden ideal propuesto por la mayoría de los navegadores modernos es el siguiente: <pre><code class="language-markup"><doctype> <html> <head> <meta http-equiv content-type charset> <title> <link rel="alternate" /> <link rel="shortcut icon" /> <link rel="stylesheet" type="text/css" /></code></pre> Parece obvio, pero no muchas veces se cumple. No incluí <script></script> intencionalmente ya que existen escuelas que dicen que es mejor incluirlos abajo del código de tu página, antes del </body>, lo que no valida en el código HTML pero acelera la carga de los elementos del DOM y deja para el final la carga de los scripts. Mejor lo dejo a criterio de cada desarrollador. <h4 id="links">Links:</h4> <ul> <li><a href="http://blogs.msdn.com/b/ieinternals/archive/2011/07/18/optimal-html-head-ordering-to-avoid-parser-restarts-redownloads-and-improve-performance.aspx" title="Enlace externo a "Best Practice: Get your HEAD in order"" target="_blank">Best Practice: Get your HEAD in order</a></li> </ul> </article> <article> <h1>Animaciones CSS3 avanzadas</h1> Tue, 21 Jun 2011 20:13:07 +0000 He estado impaciente para darme la libertad de investigar y escribir algo más avanzado utilizando CSS3 y animaciones, ya que el soporte de ciertas propiedades están más extendidas y si las comenzamos a utilizar en nuestros proyectos podemos forzar un poco la adaptación de estos nuevos estándares. Mi idea no es utilizarlas aún al 100%, sino que entregando una alternativa para navegadores menos avanzados en estas propiedades (existen algunos frameworks que lo están permitiendo, ver enlaces al final). En este artículo les mostraré un par de propiedades que pueden marcar la diferencia ente lo que pensabas conocer sobre CSS y lo que se pretende sea la capacidad nativa de los browsers de permitirnos interacciones mucho más ricas y lo mejor, y más rápidas. * He intentado sin buenos frutos hacer andar por lo menos un par de ejemplos en IE9 y no hay caso, seguiré investigando <h3 id="transiciones1-span4--mobilespan2span11span3span11span4span5span">Transiciones 4+ & Mobile11+11+5+</h3> La propiedad transition-duration define el tiempo de duración total de una transición de un estado A a uno B, sea el que sea el estilo que estamos dando. Ya la propiedad transition-timing-function define el rango el cual la transición ocurre, lo que puede incluir aceleraciones o desaceleraciones. Básicamente, describe cómo la animación ocurre durante el tiempo definido en transition-duration. En el siguiente ejemplo las 3 cajas tienen la misma transformación, pero usan diferentes valores para transition-timing-function: <a href="http://www.csslab.cl/ejemplos/css3-avanzado/ejemplo1.html" title="Enlace en CSSLab.cl a "Ejemplo 1"" target="_blank" class="verejemplo">Ver ejemplo 1</a> En el siguiente ejemplo, haremos intervalos de medio segundo (0.5s) en la ejecución de un estilo através de la propiedad transition-duration: <a href="http://www.csslab.cl/ejemplos/css3-avanzado/ejemplo2.html" title="Enlace en CSSLab.cl a "Ejemplo 2"" target="_blank" class="verejemplo">Ver ejemplo 2</a> <h3 id="transformaciones-3d1-span4--mobilespan2span11span">Transformaciones 3D 4+ & Mobile11+</h3> Este tipo de propiedades aún tienen un soporte limitado (browsers Webkit principalmente, incluyendo móviles) pero se espera que pronto se amplíe (por eso me doy el tiempo de considerarlo en este artículo). El principio básico es el keyframe, y si has usado Flash u otra herramienta de animación (Live Motion, After Effects) comprenderás este concepto: <blockquote> Un _keyframe_ define el estilo que será aplicado en ese momento dentro de un lapso de animación. El motor de animación del _browser_ interpolará los estilos definidos entre esos _keyframes_. </blockquote> Veamos un ejemplo: comenzamos por definir una rotación, dándole un nombre y un comportamiento: <pre><code class="language-css">@-webkit-keyframes girando { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); } }</code></pre> Acabamos de crear un comportamiento para un keyframe y lo llamamos girando. La animación se moverá y rotará en relacion al contenedor que determinemos ahora: <pre><code class="language-css">#contenedor { margin: 30px auto; -webkit-perspective: 600px; }</code></pre> Con -webkit-perspective definimos el movimiento del elemento en 3D en el eje Z (creando el efecto de profundidad), el que no puede ser definido antes con el simple CSS2 (ya que es sólo 2D). Ahora integramos el keyframe con el contenedor, además de agregar el tiempo de duración de la animación: <pre><code class="language-css">#girando { -webkit-animation-name: girando; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 3s; -webkit-transform-style: preserve-3d; }</code></pre> <a href="http://www.csslab.cl/ejemplos/css3-avanzado/ejemplo3.html" title="Enlace en CSSLab.cl a "Ejemplo 3"" target="_blank" class="verejemplo">Ver ejemplo 3</a> Para girar un grupo de elementos que se posicionan dentro de otro, debemos posicionar estos elementos de manera absoluta y girar cada uno en grados según la cantidad de elementos que sean. La magia no sólo está en estas nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como [box-shadow][5], [rgba][6] y [text-shadow][5]: <a href="http://www.csslab.cl/ejemplos/css3-avanzado/ejemplo4.html" title="Enlace en CSSLab.cl a "Ejemplo 4"" target="_blank" class="verejemplo">Ver ejemplo 4</a> Interesante es lo que puedes lograr agregando la propiedad: <pre><code class="language-css">-webkit-backface-visibility: hidden;</code></pre> Donde se oculta la cara del elemento que está al contrario dado el efecto 3D; con esto podemos disminuir la carga del procesador del computador al renderizar esta parte del elemento HTML: <a href="http://www.csslab.cl/ejemplos/css3-avanzado/ejemplo4-1.html" title="Enlace en CSSLab.cl a "Ejemplo 4.1"" target="_blank" class="verejemplo">Ver ejemplo 4.1</a> Cambiamos un poco el código para poder hacer rotar un cubo; verás que los únicos cambios han sido meramente estéticos y de rotación del elemento con translateZ(90px). Además, agregamos la animación por lapsus de tiempo, con la cual podremos hacer pausas y definir cuánto y qué cosas se moverán en tales instantes: <pre><code class="language-css">@-webkit-keyframes girando { from,20% { -webkit-transform: rotateY(0deg); } 30%,40% { -webkit-transform: rotateY(90deg); } 50%,60% { -webkit-transform: rotateY(180deg); } 70%,80% { -webkit-transform: rotateY(270deg); } 90%,to { -webkit-transform: rotateY(360deg); } }</code></pre> <a href="http://www.csslab.cl/ejemplos/css3-avanzado/ejemplo5.html" title="Enlace en CSSLab.cl a "Ejemplo 5"" target="_blank" class="verejemplo">Ver ejemplo 5</a> Y para el final, una integración del cubo rotundo anterior con vídeos através de HTML5, en los que puedes ver tienen una gran performance ya que son propiedades nativas (Chrome / Safari): <a href="http://www.csslab.cl/ejemplos/css3-avanzado/ejemplo6.html" title="Enlace en CSSLab.cl a "Ejemplo 6"" target="_blank" class="verejemplo">Ver ejemplo 6</a> Siento que estamos presenciando un cambio en el paradigma donde la capa de presentación se está uniendo con la de interacción o lo que es mejor, una redefinición de desarrollo front-end. Si no te has aventurado en el código fuente, es mejor apurarte ya que la máquina está a toda velocidad. <h4 id="links">Links:</h4> <ul> <li><a href="http://52framework.com/" title="Enlace externo a "52framework"" target="_blank">52framework</a></li> <li><a href="http://www.sproutcore.com/" title="Enlace externo a "SproutCore"" target="_blank">SproutCore</a></li> <li><a href="http://joapp.com/" title="Enlace externo a "Jo"" target="_blank">Jo</a></li> <li><a href="http://popcornjs.org/" title="Enlace externo a "Popcorn.js"" target="_blank">Popcorn.js</a></li> <li><a href="http://gravityframework.com/" title="Enlace externo a "Gravity"" target="_blank">Gravity</a></li> <li><a href="http://www.limejs.com/" title="Enlace externo a "LimeJS"" target="_blank">LimeJS</a></li> </ul> [5]: <a href="http://www.csslab.cl/2010/03/09/usando-css3-ahora/">http://www.csslab.cl/2010/03/09/usando-css3-ahora/</a> “Enlace en CSSLab.cl a “Usando CSS3 ahora”” [6]: <a href="http://www.csslab.cl/2009/02/26/tip-precoz-3-rgba/">http://www.csslab.cl/2009/02/26/tip-precoz-3-rgba/</a> “Enlace en CSSLab.cl a “Tip Precoz 3: RGBa”” </article> <article> <h1>Lo ví y me gustó 40</h1> Thu, 09 Jun 2011 14:16:07 +0000 #40 – 09 Junio 2011 <a href="http://somethingdesign.es/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.buinzoo.cl/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>bottom que no se va al bottom</h1> Tue, 24 May 2011 23:07:58 +0000 Este es un fix corto y preciso. En browsers modernos (¡sí, tal como leíste esto no afecta IE6 ni IE7!) la propiedad background-position no funciona como uno espera. La condición dice: Si quieres poner una imagen como fondo del <body> y posicionarla abajo de la ventana del browser (background-position: bottom) y el contenido de tu sitio no llega hasta el fondo de la ventana, la imagen de fondo llegará sólo hasta donde llegue el contenido. [Ver ejemplo 1][1]{.verejemplo} Para solucionarlo, basta con definir: <pre><code class="language-css">html { height: 100%; }</code></pre> [Ver ejemplo 2][2]{.verejemplo} Ahora, esta solución es útil cuando sabes que el contenido es y será menor al alto de la ventana; si tu contenido es dinámico es mejor que utilices min-height: <pre><code class="language-css">html { min-height: 100%; }</code></pre> [Ver ejemplo 3][3]{.verejemplo} Gracias a [inyaka][4] por hacerlo notar. [1]: <a href="http://www.csslab.cl/ejemplos/background-position/ejemplo1.html">http://www.csslab.cl/ejemplos/background-position/ejemplo1.html</a> “Enlace en CSSLab a “Ejemplo 1"” [2]: <a href="http://www.csslab.cl/ejemplos/background-position/ejemplo2.html">http://www.csslab.cl/ejemplos/background-position/ejemplo2.html</a> “Enlace en CSSLab a “Ejemplo 2"” [3]: <a href="http://www.csslab.cl/ejemplos/background-position/ejemplo3.html">http://www.csslab.cl/ejemplos/background-position/ejemplo3.html</a> “Enlace en CSSLab a “Ejemplo 3"” [4]: <a href="http://www.csslab.cl/2011/05/24/bottom-que-no-se-va-al-bottom/comment-page-1/#comment-40128">http://www.csslab.cl/2011/05/24/bottom-que-no-se-va-al-bottom/comment-page-1/#comment-40128</a> </article> <article> <h1>Manifesto al diseñador</h1> Wed, 04 May 2011 16:11:59 +0000 El diseño está en todos lados, y como diseñador suelo ser muy crítico cuando lo veo aplicado en web. Aunque ya no ejerzco mi profesión hace muchos años, sí puedo opinar y hacer valer mi experiencia cuando trabajo con un diseñador y cuando tengo que trabajar con un diseño ajeno. Por ello, me gustaría compartir lo que le exijo en su trabajo: <h3 id="interfaz">Interfaz:</h3> Diseñen pensando en el sustrato: dispositivo y sus capacidades/limitaciones, resolución de pantalla, tamaño del browser (incluyan las barritas esas que se agregan como add-on de Yahoo, Google, Facebook, Hotmail, Favoritos, etc.) e incluso orientación (si es [mobile][1], involucra rotación de la pantalla). Hoy en día ya no consideramos la cantidad de colores, pero sí en el formato de la pantalla. <h3 id="accesibilidad">Accesibilidad:</h3> La [accesibilidad][2] no sólo se refiere a la discapacidad del usuario (ceguera, dislexia, daltonismo) sino que se incluye a su incapacidad tecnológica (computador antiguo/lento, browser anticuado e incapaz de ser actualizado, etc). Para esto, el diseñador debe considerar el fallback (o [graceful degradation][3]) para que este usuario pueda realizar la tarea que está destinado en tu sitio web, pero claro no con la misma experiencia por la cual fue diseñada. <h3 id="funcionalidad">Funcionalidad:</h3> ¿Va a ser en Flash o en HTML? ¿Utilizaremos Javascript (no es necesario que sepas programar, pero sí cómo funciona y bajo qué límites)? ¿Estará bajo algún CMS (para sacarle más provecho a sus funcionalidades)? Es bueno tener esto claro desde antes mismo de poner manos a la obra. Una buena conversa con el desarrollador ayuda mucho, y seguro aprenderás algo nuevo. <h3 id="experiencia">Experiencia:</h3> Al contrario del diseño impreso, en web el diseño no es plano sino que tiene profundidad. No me refiero al burdo 3D, sino que a la [interacción que existe de tu interfaz con el usuario][4]. Es vital considerar [la experiencia con la cual el usuario interactuará][4], y esto va muy ligado con la interfaz y funcionalidad. Es imperativo -y veo a diario una gran falta- tener claro el diseño de los elementos clickeables: enlaces, botones, mouseovers y si aparecen con fadeInOut o con slideInOut, etc. <h3 id="flujo">Flujo:</h3> Si trabajas con un arquitecto de información éste te deberá proveer de todo el flujo a ser diseñado y construído, pero sino debes tomarte un tiempo más de lo habitual para planificar antes el flujo completo que existirá en tu sitio y diseñarlo. Aquí incluyo el diseño de los preloaders, de las validaciones de los campos de formularios, de los mensajes de error, de éxito, si hay envío de correos de confirmación se deben diseñar también etc; se deben considerar todas las pantallas existentes en la navegación. <h3 id="orden">Orden:</h3> Trabajar en equipo es trabajar en sincronía: así como en el atletismo, en web trabajamos en posta y ésta debe pasarse [de la manera más ordenada posible][5] para que todos podamos llegar a la meta a tiempo. Si vas a entregar un PSD/PNG en capas, que éstas estén ordenadas con su nombre descriptivo y ojalá en carpetas. Si entregas 1 archivo con todo el proyecto, que esté en un peso considerable (acoplando/combinando capas que sepas que no se van a utilizar separadas), entregando la tipografía si ésta no es web-safe, y ordenando las diferentes pantallas del proyecto en sus respectivas carpetas. Se agradece mucho, pero mucho esta consideración. Palabras finales: profesionalícense. Vayan más allá de lo que hacen actualmente, y que creen que deben hacer. Siento que el mercado ve a los diseñadores como burdos ‘dibujantes‘, pero en actitudes veo que son los mismos diseñadores quienes hacen esa imagen, no toman en serio y no son serios con su trabajo; por supuesto no generalizo pero hay una gran masa que actúa como lo lleva la corriente, y no son los generadores de esa energía. Puedes incluso llegar a pensar “pero si no me pagan para eso”, pero lograrás un punto donde puedes negociar mejor tu valor en la empresa o por el trabajo realizado. Espero haya aportado mi grano de arena, para una mejor profesión. <link href="http://fonts.googleapis.com/css?family=UnifrakturMaguntia:regular" rel="stylesheet" type="text/css" /> [1]: <a href="http://www.csslab.cl/category/mobile/">http://www.csslab.cl/category/mobile/</a> “Enlace en CSSLab a “Artículos con categoría Mobile”” [2]: <a href="http://www.csslab.cl/2009/06/10/mejor-accesibilidad/">http://www.csslab.cl/2009/06/10/mejor-accesibilidad/</a> “Enlace en CSSLab a “Mejor accesibilidad”” [3]: <a href="http://www.csslab.cl/2009/09/10/como-superar-ie6-ie7-ie8-y-no-morir-en-el-intento/">http://www.csslab.cl/2009/09/10/como-superar-ie6-ie7-ie8-y-no-morir-en-el-intento/</a> “Enlace en CSSLab a “Cómo superar IE6-IE7-IE8 (y no morir en el intento)”” [4]: <a href="http://www.csslab.cl/2010/01/16/disenando-experiencias/">http://www.csslab.cl/2010/01/16/disenando-experiencias/</a> “Enlace en CSSLab a “Diseñando experiencias”” [5]: <a href="http://www.csslab.cl/2007/11/08/el-orden-ante-todo/">http://www.csslab.cl/2007/11/08/el-orden-ante-todo/</a> “Enlace en CSSLab a “El orden ante todo”” </article> <article> <h1>Lo ví y me gustó 39</h1> Wed, 30 Mar 2011 20:44:03 +0000 #39 – 30 Marzo 2011 <a href="http://www.sebastianferrer.cl/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.patagoniaventura.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.lagotamango.com/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Displayfix: lo último en clearfix</h1> Thu, 17 Mar 2011 15:11:53 +0000 Han pasado 5 años desde <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/" target="_blank" title="Enlace en CSSLab a "Flotando en la incertidumbre"">el primer artículo donde describí exhaustivamente la causa y solución más común de clearfix</a>. Y me asombra que sigan apareciendo soluciones diferentes e innovadoras a este problema que es transversal a todos los browsers. En este artículo, muestro y demuestro el más simple (pero no versátil) de los que existen en el mercado. Dado un contenedor que contiene uno o más elementos flotando en su interior, siempre y cuando puedas definir un ancho fijo: <pre><code class="language-css">#container { width: 600px; display: inline-block; } .floto { float: left; }</code></pre> [Ver ejemplo][1]{.verejemplo} Este método se comporta bien cuando el ancho de los elementos interiores que están flotando es menor que el del padre; las cosas comienzan a complicarse cuando aumentan: [Ver ejemplo 2][2]{.verejemplo} Para contrarrestarlo, define también ancho fijo en los elementos flotantes: <pre><code class="language-css">#container { width: 600px; display: inline-block; } .floto { width: 280px; float: left; }</code></pre> [Ver ejemplo 3][3]{.verejemplo} Nada es perfecto… es un método más. [1]: <a href="http://www.csslab.cl/ejemplos/displayfix/displayfix1.html">http://www.csslab.cl/ejemplos/displayfix/displayfix1.html</a> “Enlace en CSSLab a “Ejemplo 1: Displayfix”” [2]: <a href="http://www.csslab.cl/ejemplos/displayfix/displayfix2.html">http://www.csslab.cl/ejemplos/displayfix/displayfix2.html</a> “Enlace en CSSLab a “Ejemplo 2: Displayfix”” [3]: <a href="http://www.csslab.cl/ejemplos/displayfix/displayfix3.html">http://www.csslab.cl/ejemplos/displayfix/displayfix3.html</a> “Enlace en CSSLab a “Ejemplo 3: Displayfix”” </article> <article> <h1>Animaciones y Transformaciones con CSS3</h1> Mon, 31 Jan 2011 21:53:44 +0000 Se puede ver un aumento en el uso de CSS3 en sitios web de amplio uso, y actualmente es un diferencial a la hora de atraer y enganchar al usuario. Aunque sé que es pronto para sumergirse totalmente en estas aguas, no perdemos nada con jugar un poco con transiciones y animaciones en CSS3. NOTA: Aún es necesario el uso de browsers muy modernos, como Safari 5 y Chrome 10. Firefox 3.6 anda pero no ofrece todo el soporte que quisiéramos (aún). <h3 id="transiciones">Transiciones</h3> Su característica es cambiar una propiedad (o un grupo de ellas) en un período de tiempo determinado. Una ventaja por sobre Javascript es su degradación, ya que si esta propiedad no es soportada por el browser, la animación simplemente no es mostrada. El siguiente código muestra el aumento del ancho de un <div> en un segundo cuando el mouse se posiciona sobre él. Luego, cuando el mouse sale del <div> su ancho vuelve a la posición inicial en 2 segundos: <pre><code class="language-css">.prueba1 { margin: 10px; width: 200px; height: 200px; background: #f00; border: 1px solid #666; transition: all 1s ease; } .prueba1:hover{ width: 400px; transition: all 2s ease; }</code></pre> [Ver ejemplo 1][1]{.verejemplo} A continuación, una animación compuesta: dado un estado inicial se define nuevo width, height y background-color: <pre><code class="language-css">.prueba2 { margin: 10px; width: 200px; height: 200px; background-color: #f00; border: 1px solid #666; transition-property: width, height, background-color; transition-duration: 0.5s, 1s, 1s; transition-timing-function: ease, ease-out; transition-delay: 0s ,0.5s, 1.5s; } .prueba2:hover { width: 400px; height: 300px; background-color: #fc0; transition-property: width, height, background-color; transition-duration: 0.5s, 0.5s, 0.5s; transition-timing-function: linear, linear; transition-delay: 0s ,0.5s, 0.5s; }</code></pre> [Ver ejemplo 2][2]{.verejemplo} <h4 id="propiedades">Propiedades:</h4> <dl> <dt>transition-property:</dt> <dd>Determina la(s) propiedad(es) a ser animadas; puede ser cualquier propiedad CSS.</dd> <dt>transition-duration:</dt> <dd>Indica la duración de la animació del inicio al fin en segundos. Por defecto el valor es 0.</dd> <dt>transition-timing-function:</dt> <dd>Definen física de animación: ease (por defecto), linear, ease-in, ease-out y ease-in-out.</dd> <dt>transition-delay:</dt> <dd>Tiempo en que la animación debe pausarse antes de comenzar.</dd> </dl> <h3 id="transformaciones">Transformaciones:</h3> Existen 4 tipos de valores para transformar elementos HTML mediante CSS3: <dl> <dt>Skew:</dt> <dd>desplazamiento de los ejes horizontales.</dd> <dt>Scale:</dt> <dd>modificación de la escala del elemento.</dd> <dt>Rotate:</dt> <dd>cambio de rotación del mismo definido en grados.</dd> <dt>Translate:</dt> <dd>desplazamiento del elemento desde su posición original.</dd> </dl> [Ver ejemplo 3][3]{.verejemplo} Estas propiedades pueden ser utilizadas en la gran mayoría de los browsers modernos, con sus debidos prefijos como pueden notar en el código fuente del ejemplo. Además, puedes comenzar a mezclar transformaciones con animaciones para lograr efectos como el siguiente (con Safari/Chrome): <div id="divloco"> <div class="hover"> Mouse over para que esto se vuelva loco. </div> </div> <pre><code class="language-css">#divloco div { height: 100px; width: 100px; border: 1px solid #f00; margin: 10px auto; background: #ccc; text-align: center; transition: all 2s ease-in-out; } #divloco div:hover, #divloco div.hover_effect { transform: rotate(720deg) scale(2,2); }</code></pre> <h4 id="links">Links:</h4> <ul> <li><a href="http://www.w3.org/TR/css3-animations/" title="Enlace externo a "CSS Animations Module Level 3"" target="_blank">CSS Animations Module Level 3</a></li> <li><a href="http://webkit.org/blog/130/css-transforms/" title="Enlace externo a "Surfin’ Safari: CSS Transforms"" target="_blank">Surfin’ Safari: CSS Transforms</a></li> <li><a href="http://webkit.org/blog/138/css-animation/" title="Enlace externo a "Surfin’ Safari: CSS Animation"" target="_blank">Surfin’ Safari: CSS Animation</a></li> <li><a href="http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation" title="Enlace externo a "10 Amazing Examples of Innovative CSS3 Animation"" target="_blank">10 Amazing Examples of Innovative CSS3 Animation</a></li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/css3/prueba1.html">http://www.csslab.cl/ejemplos/css3/prueba1.html</a> “Enlace en CSSLab a “Ejemplo 1 transición CSS3"” [2]: <a href="http://www.csslab.cl/ejemplos/css3/prueba2.html">http://www.csslab.cl/ejemplos/css3/prueba2.html</a> “Enlace en CSSLab a “Ejemplo 2 transformación CSS3"” [3]: <a href="http://www.csslab.cl/ejemplos/css3/prueba3.html">http://www.csslab.cl/ejemplos/css3/prueba3.html</a> “Enlace en CSSLab a “Ejemplo 3 transición-transformación CSS3"” </article> <article> <h1>Tip precoz 8: Deshabilitar click derecho con jQuery</h1> Mon, 10 Jan 2011 16:33:23 +0000 Puede que sea necesario, puede que algún cliente te lo pida y aunque argumentes de diferentes maneras no entienda que no es recomendable deshabilitarle opciones innatas al usuario limitándole la accesibilidad. Pero al final de cuentas, tenemos que vivir y accedemos a realizarle lo que necesita, con tal de terminar luego y entregar el proyecto y obtener finalmente el pago por el trabajo realizado. Para deshabilitar el click derecho del mouse del usuario basta la siguiente simple instrucción jQuery: <pre><code class="language-javascript">$(function(){ $(document).bind("contextmenu",function(e){ return false; }); });</code></pre> [Ver ejemplo][1]{.verejemplo} [1]: <a href="http://www.csslab.cl/ejemplos/deshabilitar_btnderecho.html">http://www.csslab.cl/ejemplos/deshabilitar_btnderecho.html</a> “Enlace en CSSLab a “Ver Ejemplo”” </article> <article> <h1>Lo ví y me gustó 38</h1> Tue, 28 Dec 2010 17:02:41 +0000 #38 – 28 Diciembre 2010<a href="http://www.catalizado.com/?utm_source=CSSlab&utm_medium=categoria&utm_campaign=Csslab" target="_blank"></a> <a href="http://www.cappen.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.dazmoob.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.gt2p.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.tekane.com/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Más y mejores tipografías con @font-face</h1> Tue, 30 Nov 2010 19:04:51 +0000 Está bien, se están utilizando mucho hoy en día pero @font-face no es una de las nuevas propiedades CSS3; de hecho fue propuesta en CSS2 y ha sido implementada en IE desde su versión 5, aunque lo hicieron en el formato de fuentes propietario (como no, si siempre Microsoft lo hace) Embedded OpenType. Como fueron los únicos en utilizarlo de esa manera, y desde Safari 3.1 los fabricantes de browsers han utilizado TrueType (.ttf) y OpenType (.otf), IE ha tenido que adaptarse desde su versión 7. La especificación de los formatos son: <ul> <li>TTF – Funciona en todos los browsers excepto IE y Mobile Safari (iPhone/iPad). <ul> <li>EOT – Sólo IE.</li> <li>WOFF – Comprimido y candidato a estándar.</li> <li>SVG – Mobile Safari (iPhone/iPad).</li> </ul> </li> </ul> <div class="pullquote"> </div> Esto es simple: primero debes disponer de las fuentes que quieres utilizar, luego las puedes utilizar tal cual o transformarlas a los formatos necesarios. Esas fuentes las importas mediante CSS y las utilizas como una propiedad font-family donde quieras incluirlas. Quizás ya conocías [Cufón][1] o [SIFr][2], pero desde que uso @font-face he notado que es bastante más rápido en la carga y es más versátil en su uso (ya que utiliza simple CSS y no depende de llamados JS). Entonces, primero debes declarar la regla @font-face en tu hoja de estilos para importar las tipografías (nótese la ruta donde las tienes en el servidor, si no estas seguro mejor utiliza algún path absoluto). <pre><code class="language-css">@font-face { font-family: 'Delicious'; src: url('Delicious-Roman.otf'); } @font-face { font-family: 'Delicious'; font-weight: bold; src: url('Delicious-Bold.otf'); }</code></pre> Si quieres estar seguro de que se verá en la gran mayoría de los browsers, mejor impórtalas todas: <pre><code class="language-css">@font-face { font-family: 'Delicious'; src: url('Delicious-Roman.eot'); src: local('?'), url('Delicious-Roman.woff') format('woff'), url('Delicious-Roman.ttf') format('truetype'), url('Delicious-Roman.svg#webfont57ztNrX6') format('svg'); }</code></pre> Y luego las declaras por simple CSS: <pre><code class="language-css">h3 { font-family: Delicious, sans-serif; }</code></pre> [Ver demo][3]{.verejemplo} Google actualmente está apoyando muchos desarrollos para Chrome y dispone de un <a href="https://fonts.google.com/" title="Enlace externo a "The Google Font Directory"" target="_blank">importante catálogo de fuentes</a> para su fácil e inmediato uso (y directo desde sus servidores). <h4 id="links">Links:</h4> <ul> <li>[Typography Basics – Some Fundamentals for Body Copy][4]</li> <li><a href="https://fonts.google.com/" title="Enlace externo a "The Google Font Directory"" target="_blank">Google Font Directory</a></li> <li><a href="http://www.fontsquirrel.com/fontface/generator" title="Enlace externo a "@font-face Generator"" target="_blank">@font-face Generator</a></li> <li><a href="http://webfonts.info/wiki/index.php?title=Fonts_available_for_@font-face_embedding" title="Enlace externo a "Fonts available for @font-face embedding"" target="_blank">Fonts available for @font-face embedding</a></li> </ul> [1]: <a href="http://www.csslab.cl/2006/02/24/usa-cualquier-con-css/">http://www.csslab.cl/2006/02/24/usa-cualquier-con-css/</a> “Enlace en CSSLab a “Usa cualquier Fuente con CSS”” [2]: <a href="http://www.csslab.cl/2008/05/08/ms-tipografas-con-sifr/">http://www.csslab.cl/2008/05/08/ms-tipografas-con-sifr/</a> “Enlace en CSSLab a “Más tipografías con sIFR”” [3]: <a href="http://www.csslab.cl/ejemplos/fontface/index.html">http://www.csslab.cl/ejemplos/fontface/index.html</a> “Enlace en CSSLab a “Demo 01 Font Face”” [4]: <a href="https://blogging.com/typography-basics/">https://blogging.com/typography-basics/</a> </article> <article> <h1>Gradientes con CSS 3</h1> Mon, 22 Nov 2010 21:07:24 +0000 Muchas de las propiedades CSS3 han estado presentes en browsers Webkit como Safari y Chrome desde sus inicios; a medida que avancen han mejorado el soporte y no es diferente con el uso gradientes sólo con CSS. Desde la versión 3.6 se pueden utilizar con Firefox, y últimamente han tomado mucha fuerza en aplicativos web modernos. ¿Porqué utilizar gradientes en CSS en vez de imágenes? <ol> <li>Es más flexible y mantenible</li> <li>Menos dependendias de programas y editores gráficos</li> <li>Menos consultas al servidor</li> <li>Es escalable</li> </ol> En este artículo abordaremos las maneras de escribir gradientes (lineales y radiales) para los principales navegadores modernos. Según los estándares W3C, crear gradientes se compone de: <pre><code class="language-css">linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* ) radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )</code></pre> Para browsers Mozilla, se mantiene pero se agrega el prefijo -moz: <pre><code class="language-css">-moz-linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* ) -moz-radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )</code></pre> Y para Webkit, es bastante diferente: <pre><code class="language-css">-webkit-gradient(<tipo>, <punto> [, <radio>]?, <punto> [, <radio>]? [, <stop>]*)</code></pre> Una lástima que tengamos que reescribir para cada uno diferentes propiedades para lograr el mismo efecto. Mejor veamos los ejemplos: <h3 id="gradiente-lineal">Gradiente Lineal</h3> <pre><code class="language-css">body{ background-color:#ccc; background-image: -moz-linear-gradient(top, #333, #ccc); background-image: -webkit-gradient(linear, left top,left bottom, from(#333), to(#ccc)); background-image: linear-gradient(top, #333, #ccc); }</code></pre> [Ver Ejemplo][1]{.verejemplo} <h3 id="gradiente-radial">Gradiente Radial</h3> <pre><code class="language-css">body{ background-color:#ccc; background-image: -moz-radial-gradient(center 45deg,circle cover, #ccc, #333); background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#ccc), to(#333)); background-image: radial-gradient(center 45deg,circle cover, #ccc, #333); }</code></pre> [Ver Ejemplo][2]{.verejemplo} <h4 id="iquesty-con-internet-explorer">¿Y con Internet Explorer?</h4> Ni lo pienses, siquiera en IE9 están soportados. Podrías lograrlo en esta última versión através de SVG, el cual es basado en vectores. SVG es un lenguaje de marcado basado en XML que descibre vectores, y el motor de HTML5 permite que SVG sea incrustado directamente en HTML. Definiendo el alto del documento SVG al 100%, tendremos una imagen que se escala cualquiera sea el alto del elemento, tal como lo haría una caja con gradientes en CSS3. ¿Muy complicado? También lo creo. Mejor prueba algún script como <del datetime="2010-11-23T15:22:40+00:00"><a href="http://www.modernizr.com/" target="_blank" title="Enlace externo a "Modernizr"">Modernizr</a> ó</del> <a href="http://css3pie.com/" target="_blank" title="Enlace externo a "CSS3 Pie"">CSS3 Pie,</a> los que hacen que IE soporte CSS3 como deberían haberlo hecho con los estándares hace mucho tiempo ya. [1]: <a href="http://www.csslab.cl/ejemplos/gradients/lineal.html">http://www.csslab.cl/ejemplos/gradients/lineal.html</a> “Enlace en CSSLab a “Ejemplo CSS3 Gradientes - Lineal”” [2]: <a href="http://www.csslab.cl/ejemplos/gradients/radial.html">http://www.csslab.cl/ejemplos/gradients/radial.html</a> “Enlace en CSSLab a “Ejemplo CSS3 Gradientes - Radial”” </article> <article> <h1>Otro más para matar IE6</h1> Thu, 14 Oct 2010 20:38:11 +0000 No bastan los [hacks][1], los [comentarios condicionales][2], [reseters][3], [advertencias][4]… Internet Explorer 6 sigue dándonos muchos problemas. Pero les traigo una excelente solución ya que es tan invasiva, tan pero taaaaan invasiva que toma por completo control de IE6 y hace q se comporte como se debe. <a href="http://code.google.com/chrome/chromeframe/" title="Enlace externo a "Google Chrome Frame"" target="_blank">Google Chrome Frame</a> es un plugin open source que trae la rapidez y versatilidad de Webkit (el motor por detrás de Chrome y Safari) directo a IE6. Con esto, podrás fácilmente utilizar todo lo que siempre quisiste sin preocuparte de este malogrado browser, incluyendo CSS3, HTML5 y Javascript. Lo bueno es que utilizarlo es pan comido: basta con agregar una etiqueta dentro del <head></head> en todas tus páginas que detecta si el usuario -que utiliza IE6– tiene o no ya instalado Google Frame: si no lo tiene, lo redirecciona a una página para su instalación; si el usuario ya lo tiene instalado, comienza automáticamente a instalarse: <pre><code class="language-markup"><meta http-equiv="X-UA-Compatible" content="chrome=1"></code></pre> Alternativamente, tambien puedes utilizar un script que realiza la misma detección: <pre><code class="language-markup"></code></pre> Esto incluye un en el sitio donde le indica al usuario las instrucciones para instalar Google Frame. Una vez instalado, el usuario es redireccionado a lo que hayas declarado en destination. <h3 id="iquesty-coacutemo-funciona">¿Y cómo funciona?</h3> La primera vez que lo instalé en un PC con WinXP e IE6, realmente me sorprendió. Lo que hace es colocar un marco por sobre el browser mismo, sin que se note que es algo ajeno al navegador. Este marco funciona con todos los botones que por defecto el usuario típico de IE6 está ya acostumbrado (y los que son algunas de las razones por las que no se actualizan nunca). Se ve como IE6, pero su motor es Webkit, lo que más nos interesa. Atrévanse a utilizarlo en sus proyectos, y ojalá puedan tener más tiempo y libertad para crear y menos para arreglar defectos. <h4 id="links">Links:</h4> <ul> <li><a href="http://code.google.com/chrome/chromeframe/" title="Enlace externo a "Google Chrome Frame"" target="_blank">Enable open web technologies in Internet Explorer</a></li> </ul> [1]: <a href="http://www.csslab.cl/category/hacks/">http://www.csslab.cl/category/hacks/</a> “Enlace en CSSLab “Categoria: Hacks”” [2]: <a href="http://www.csslab.cl/2006/07/28/se-viene-ie7-¡huid/">http://www.csslab.cl/2006/07/28/se-viene-ie7-¡huid/</a> “Enlace en CSSLab “Se viene IE7, huid!”” [3]: <a href="http://www.csslab.cl/2010/06/01/css-reseter-v2/">http://www.csslab.cl/2010/06/01/css-reseter-v2/</a> “Enlace en CSSLab “CSS Reseter v2"” [4]: <a href="http://www.csslab.cl/2008/09/24/muerte-a-ie-nuevo-plugin/">http://www.csslab.cl/2008/09/24/muerte-a-ie-nuevo-plugin/</a> “Enlace en CSSLab “KillIE jQuery plugin”” </article> <article> <h1>Lo ví y me gustó 37</h1> Tue, 12 Oct 2010 13:19:53 +0000 #37 – 12 Octubre 2010 <a href="http://jrbenavente.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.yammy.cl/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.nbdesign.cl/" target="_blank" title="Abrir Sitio"></a> <a href="http://pielypincel.com//" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>El olvidado rel</h1> Thu, 02 Sep 2010 18:19:54 +0000 ¿Por qué gastarme el tiempo de escribir un artículo sobre un atributo HTML tan antiguo, y por qué ustedes gastarían el suyo en leerlo? Que buenas preguntas para comenzar a redactar un tema donde es necesario aclarar sus usos y recalcar sus funciones, principalmente cuando las escuelas actuales aún son incipientes en enseñar la teoría por detrás de los fundamentos de los web standards. Comencemos con la parte aburrida: El atributo rel describe la relación del presente documento al link (href) o ancla (name) especificado en el atributo href="". El valor de este atributo puede ser más de uno y al igual que las clases, separados por espacio. Tiempo de una pausa para un pequeño detalle. Este atributo dentro de un link <a></a> no es utilizado ni reconocido por ningún browser actualmente (por eso seguramente ha sido menospreciado y olvidado por tanto tiempo). Entonces, ¿para qué seguir gastando nuestro tiempo? Pues rel="" sí es considerado por los buscadores para obtener más información sobre los enlaces, y es muy difundido mediante [microformatos][1]. Los valores de este atributo para HTML 4.01 son (o eran, como quieras verlo): <dl> <dt>alternate</dt> <dd>una versión alternativa del documento (por ej. una traducción, página para impresión, etc).</dd> <dt>stylesheet</dt> <dd>este es familiar; es una hoja de estilos linkeada externamente.</dd> <dt>start</dt> <dd>el primer documento de un conjunto de documentos. Este valor le indica a los buscadores que la página es considerada el punto de inicio de la colección.</dd> <dt>prev, next</dt> <dd>documento anterior y siguiente de una misma colección de documentos; podría utilizarse para pre-cargar los documentos siguientes.</dd> <dt>contents</dt> <dd>una tabla de contenidos para el conjunto de documentos.</dd> <dt>index</dt> <dd>una página que ofrece un índice para los documentos.</dd> <dt>glossary</dt> <dd>una página con un glosario de términos para el conjunto de documentos.</dd> <dt>copyright</dt> <dd>textos legales para todo el documento.</dd> <dt>chapter</dt> <dd>pagina que abre un capítulo.</dd> <dt>section</dt> <dd>pagina que abre una sección.</dd> <dt>subsection</dt> <dd>pagina que abre una sub-sección.</dd> <dt>appendix</dt> <dd>el apéndice.</dd> <dt>help</dt> <dd>una página de ayuda (más información, otras fuentes de información, instrucciones, etc).</dd> <dt>bookmark</dt> <dd>pagina con enlaces a contenido dentro del mismo conjunto de documentos.</dd> </dl> Para HTML 5 y a través de los [microformatos][2] (prácticamente XFN), se ha privilegiado la relación de enlaces a personas más que a documentos o partes de él. Los siguientes son los -hasta ahora- aprobados para HTML 5: <dl> <dt>acquaintance</dt> <dd>la persona linkeada ofrece conocimiento anexo al documento actual.</dd> <dt>child</dt> <dd>la persona referenciada es hija de la persona autora del documento.</dd> <dt>co-resident</dt> <dd>la persona referenciada vive en la misma casa del autor.</dd> <dt>co-worker</dt> <dd>la persona referenciada trabaja con el autor.</dd> <dt>colleague</dt> <dd>la persona referenciada es colega del autor.</dd> <dt>contact</dt> <dd>el autor considera a la persona referenciada como un contacto.</dd> <dt>crush</dt> <dd>la persona referenciada atrae al autor.</dd> <dt>date</dt> <dd>el autor está saliendo con la persona referenciada.</dd> <dt>kin</dt> <dd>la persona referenciada es parte de la gran familia del autor.</dd> <dt>me</dt> <dd>la persona referenciada y el autor son la misma persona.</dd> <dt>met</dt> <dd>el autor conoce a la persona referenciada.</dd> <dt>muse</dt> <dd>la persona referenciada inspira al autor.</dd> <dt>neighbor</dt> <dd>la persona referenciada vive cerca o es vecino del autor.</dd> <dt>parent</dt> <dd>la persona referenciada es padre del autor.</dd> <dt>sibling</dt> <dd>la persona referenciada es hermano(a) del autor.</dd> <dt>spouse</dt> <dd>la persona referenciada es cónyugue del autor.</dd> <dt>sweetheart</dt> <dd>el autor considera al(a) referenciado(a) como su cariño.</dd> </dl> A partir de necesidades específicas de fabricantes de browsers y de tecnologías, se han creado algunos valores que son específicos, como: <dl> <dt>nofollow</dt> <dd>es utilizado por Google para especificar que el spider de indexación no debe seguir ese link.</dd> <dt>shortcut icon</dt> <dd>reconocido por los browsers modernos para enlazar un archivo favicon.ico.</dd> <dt>apple-touch-icon</dt> <dd>utilizado por Apple para especificar un archivo ícono para un sitio web.</dd> </dl> Pues como leen, este malhogrado atributo está resucitando y nos permite vincular objetos y documentos con una [semántica][3] nunca antes vista. Queda en nosotros utilizarla correctamente y sacarle provecho en nuestros proyectos. <h4 id="linksp">Links:</h4> <ul> <li><a href="http://www.w3.org/TR/html401/types.html#type-links" title="Enlace externo a "W3C Recommentation"" target="_blank">W3C Recommendation: Link Type</a></li> <li><a href="http://rdfa.info/wiki/@rel_attribute_discussion" title="Enlace externo a "@rel attribute discussion"" target="_blank">rdfa.info: @rel attribute discussion</a></li> <li><a href="http://gmpg.org/xfn/11" title="Enlace externo a "XFN 1.1 relationships meta data profile"" target="_blank">XFN 1.1 relationships meta data profile</a></li> </ul> [1]: <a href="http://www.csslab.cl/2008/03/28/microformatos-2-contra-ataca/">http://www.csslab.cl/2008/03/28/microformatos-2-contra-ataca/</a> “Enlace en CSSLab a “Microformatos 2 contra-ataca”” [2]: <a href="http://www.csslab.cl/2008/01/03/un-poco-sobre-microformatos/">http://www.csslab.cl/2008/01/03/un-poco-sobre-microformatos/</a> “Enlace en CSSLab a “Un poco sobre Microformatos”” [3]: <a href="http://www.csslab.cl/category/semantica/">http://www.csslab.cl/category/semantica/</a> “Enlace en CSSLab a “Categoría: Semántica”” </article> <article> <h1>Lo ví y me gustó 36</h1> Thu, 05 Aug 2010 13:53:42 +0000 #36 – 5 Agosto 2010 <a href="http://www.agrega2.cl/" target="_blank" title="Abrir Sitio"></a> <a href="http://colapso.cl/" target="_blank" title="Abrir Sitio"></a> <a href="http://gravityonmars.com/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Háptica en iOS</h1> Wed, 28 Jul 2010 21:27:46 +0000 <div class="haptica"> iPad, iPad, iPad… otro nuevo dispositivo para cautivar a los ávidos consumidores, pero que por lo menos trae interesantes nuevas tecnologías. Aparte de que crean que es un iPhone gigante, tiene varias innovaciones que permiten darle mucha rienda a la imaginación de los creadores de contenido específico para esta plataforma. Una de las que más me han interesados, corresponde a los eventos gestuales. Este artículo abordará todos los eventos disponibles para iPad y que ocurren cuando el usuario interactúa con una página web en iOS. Aunque puedes visualizar los ejemplos con Safari 5 para escritorio o el mismo iPhone, la mejor interacción la puedes lograr desde un iPad mismo por la dimensión y calidad de su superficie táctil (o en su defecto con su simulador). <h3> Eventos Multitouch </h3> Puedes usar classes de eventos touch de tipo DOM en Javascript que ya están disponibles en iOS. Si quieres registrar estos eventos, el sistema envía objetos TouchEvent a aquellos elementos DOM mientras los dedos se mueven por sobre la superficie. Una secuencia multitouch comienza cuando un dedo toca por primera vez la superficie. La secuencia termina cuando el último de esos dedos se levanta de la misma superficie. Éstos eventos son similares a los usuales eventos de mouse, excepto que puedes tener toques simultáneos en la superficie en diferentes lugares de la misma. Un objeto de evento touch es utilizado para encapsular todos los toques que existen en un mismo momento en la pantalla. Cada dedo es representado por un objeto touch y las típicas propiedades que encuentras en un evento de mouse están en un evento touch, pero no el objeto mismo. Cuatro son los principales eventos touch: <dl> <dt> ontouchstart </dt> <pre><code><dd> ocurre cada vez que un dedo se posa sobre la pantalla. </dd> <dt> ontouchmove </dt> <dd> ocurre cuando un dedo que ya está en la pantalla se mueve sobre ella. </dd> <dt> ontouchend </dt> <dd> ocurre cada vez que un dedo sale de la pantalla. </dd> <dt> ontouchcancel </dt> <dd> el sistema puede cancelar los eventos en ciertas ocasiones, como por ej. cuando recibes un SMS mientras estás arrastrando un elemento. </dd> </code></pre> </dl> Para registrarlos con Javascript: <pre><code class="language-javascript">element.addEventListener("touchstart", touchStart, false); element.addEventListener("touchmove", touchMove, false); element.addEventListener("touchend", touchEnd, false); element.addEventListener("touchcancel", touchCancel, false);</code></pre> Y si lo quieres implementar como una función: <pre><code class="language-javascript">function touchStart(event) { // tomemos las coordenadas del dedo cuando toca la pantalla var x = event.touches[0].pageX; var y = event.touches[0].pageY; alert('X = '+x+',Y = '+y); }</code></pre> <a href="http://www.csslab.cl/ejemplos/haptica/ejemplo1.html" title="Enlace en CSSLab a "Ejemplo 1"" class="verejemplo">Ver ejemplo 1</a> Un simple evento: arrastra un elemento cuando mueves el dedo: <pre><code class="language-javascript">function touchMove(event) { event.preventDefault(); var touch = event.touches[0]; var node = touch.target; node.style.position = "absolute"; node.style.left = touch.pageX + "px"; node.style.top = touch.pageY + "px"; }</code></pre> <a href="http://www.csslab.cl/ejemplos/haptica/ejemplo2.html" title="Enlace en CSSLab a "Ejemplo 2"" class="verejemplo">Ver ejemplo 2</a> Detalle: por defecto, si arrastras un dedo sobre la pantalla es probable que la página comience a moverse (peor si ésta tiene scroll). Por suerte agregaron la función preventDefault() que hace que la página se quede quieta si lo necesitamos. Las listas de eventos agrupan estos objetos, y contiene información para cada dedo que está tocando la pantalla. Además, contiene 2 otras listas: una que tiene información para los dedos que se originan del mismo elemento y otro que contiene sólo información para los dedos asociados al mismo evento. Estas listas están disponibles para cada evento touch, y son: <dl> <dt> touches </dt> <pre><code><dd> una lista para cada dedo que está posado actualmente sobre la pantalla. </dd> <dt> targetTouches </dt> <dd> tal como touches, pero filtra sólo la información para los dedos que comienzan del mismo elemento. </dd> <dt> changedTouches </dt> <dd> lista la información para cada dedo involucrado en el mismo evento. </dd> </code></pre> </dl> Las propiedades que contienen estas listas son: <dl> <dt> clientX </dt> <pre><code><dd> coordenada X del toque relativa al viewport (pantalla visible). </dd> <dt> clientY </dt> <dd> coordenada Y del toque relativa al viewport. </dd> <dt> screenX </dt> <dd> coordenada X relativa a la pantalla. </dd> <dt> screenY </dt> <dd> coordenada Y relativa a la pantalla. </dd> <dt> pageX </dt> <dd> coordenada X relativa a la página completa (incluye offset del scroll). </dd> <dt> pageY </dt> <dd> coordenada Y relativa a la página completa. </dd> <dt> target </dt> <dd> elemento donde el evento touch fue originado. </dd> <dt> indentifier </dt> <dd> número identificados, único para cada evento touch. </dd> </code></pre> </dl> Para entender mejor, veamos el siguiente caso: <ol> <li> Cuando pongo un dedo en la pantalla, las 3 listas tendrán la misma información en sus propiedades, pero changedTouches fue el que originó el evento. </li> <pre><code><li> Cuando pongo el segundo dedo, touches tendrá 2 items (uno para cada dedo); targetTouches tendrá 2 items sólo si el segundo dedo es posado en el mismo elemento del primero; changedTouches tendrá información relacionada al segundo dedo, porque fue lo que causó el evento. </li> <li> Si pongo 2 dedos exactamente al mismo tiempo, tendré 2 items en changedTouches: uno para cada dedo. </li> <li> Si muevo mis dedos, la única lista que cambiará es changedTouches y va a tener información relacionada a cada dedo que se vaya moviendo (al menos uno). </li> <li> Cuando levanto un dedo, será eliminado de touches y targetTouches y aparecerá en changedTouches ya que fue el que originó el evento. </li> <li> Si quito el último dedo se vaciarán touches y targetTouches, y changedTouches tendrá la información para ese ultimo dedo. </li> </code></pre> </ol> <div class="gesture"> <h3> Eventos Gestuales </h3> <pre><code> Eventos multitouch pueden ser combinados para crear eventos de gestos. Los objetos GestureEvent son enviados durante una secuencia multitouch y contienen información de dimensiones y rotaciones. Para registrarlos en HTML: </code></pre> </div> <pre><code class="language-markup"><div ongesturestart="gestureStart(event);" ongesturechange="gestureChange(event);" ongestureend="gestureEnd(event);" ></code></pre> Y mediante Javascript: <pre><code class="language-javascript">element.addEventListener("gesturestart", gestureStart, false); element.addEventListener("gesturechange", gestureChange, false); element.addEventListener("gestureend", gestureEnd, false);</code></pre> Comencemos con un ejemplo simple: <pre><code class="language-javascript">function gestureStart(event) { // tomamos el angulo y tamaño del elemento var angle = event.rotation; var scale = event.scale; alert('angulo: '+angle+', dimension: '+scale); }</code></pre> <a href="http://www.csslab.cl/ejemplos/haptica/ejemplo3.html" title="Enlace en CSSLab a "Ejemplo 3"" class="verejemplo">Ver Ejemplo 3</a> Ahora escalamos y rotamos un elemento: <pre><code class="language-javascript">function gestureChange(event) { event.preventDefault(); event.target.style.width = (200 * event.scale) + "px"; event.target.style.height = (200 * event.scale) + "px"; event.target.style.webkitTransform = 'rotate(' + event.rotation + 'deg)'; }</code></pre> <a href="http://www.csslab.cl/ejemplos/haptica/ejemplo4.html" title="Enlace en CSSLab a "Ejemplo 4"" class="verejemplo">Ver Ejemplo 4</a> Creo que esto es un buen comienzo para que te interese esta plataforma, la que implementa un tipo de interacción háptica poco usual y con un gran potencial comercial. <h4> Links: </h4> <ul> <li> <a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1" target="_blank">Safari Reference Library: Handling Events</a> </li> <li> <a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariJSRef/index.html#//apple_ref/doc/uid/TP40001482" target="_blank">Safari Reference Library: Safari DOM Additions Reference</a> </li> <li> <a href="http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/">Sitepen: Touching and Gesturing on the iPhone</a> </li> </ul> </div> </article> <article> <h1>Tip Precoz 7: resize textarea</h1> Mon, 19 Jul 2010 17:24:08 +0000 Si usas seguido Safari ó Chrome, habrás notado que estos browsers permiten -por defecto- que el <textarea> sea redimensionado por el usuario a través del arrastre en el rincón inferior-derecho. Esta es una propiedad de WebKit de accesibilidad que puede perjudicar el layout de nuestro lindo formulario. Para quitarlo, basta declarar en CSS: <pre><code class="language-css">textarea { resize: none; }</code></pre> [Ver ejemplo (En Safari-Chrome)][1]{.verejemplo} [1]: <a href="http://www.csslab.cl/ejemplos/textarea.html">http://www.csslab.cl/ejemplos/textarea.html</a> “Enlace en CSSLab a “Ejemplo Tip Precoz 7: resize textarea”” </article> <article> <h1>¿Con o sin comillas?</h1> Wed, 07 Jul 2010 16:04:47 +0000 Al declarar algunos valores en propiedades CSS como background-image, usualmente se permite poner o no el valor entre comillas dobles "" ó simples ». Si escribes el código a mano, no las utilizas. Si usas algún editor, quizas las agrega. Pero ¿se debe o no poner comillas? Esta pregunta que ha intrigado al hombre por años no tiene una respuesta definitiva. Por lo menos no la he encontrado de manos de la <a href="http://www.w3.org/TR/CSS2/syndata.html" target="_blank" title="Enlace externo a "W3C"">W3C</a>, pero sí el uso de comillas en ciertas declaraciones tiene sentido: <blockquote> … single quotes (‘), and double quotes (") must come in matching pairs … </blockquote> Primero, no dice que deben ser utilizadas. Segundo, dice que si las utilizas, deben estar en par (si abres con comilla simple cierra con simple, etc.). Pero: <blockquote> Inside the quotes, characters are parsed as a string. </blockquote> Esto es lo importante. Si utilizas las comillas simples o dobles, el valor se pasa como string. Un ejemplo práctico y descuidado: si tienes una imagen con espacios en su nombre: <pre><code class="language-css">background: url('back ground.png');</code></pre> Si utilizas comillas en su declaración la imagen se mostrará: [Ver ejemplo con comillas][1]{.verejemplo} Si no la utilizas, el browser no encontrará la imagen: [Ver ejemplo sin comillas][2]{.verejemplo} Este comportamiento es independiente del [doctype][3] que estés utilizando. Yo las uso. <h4 id="link">Link:</h4> <ul> <li>[W3C: Syntax and basic data types][4]</li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/comillas/concomillas.html">http://www.csslab.cl/ejemplos/comillas/concomillas.html</a> “Enlace en CSSLab a “Ejemplo con comillas”” [2]: <a href="http://www.csslab.cl/ejemplos/comillas/sincomillas.html">http://www.csslab.cl/ejemplos/comillas/sincomillas.html</a> “Enlace en CSSLab a “Ejemplo sin comillas”” [3]: <a href="http://www.csslab.cl/2005/11/30/¿strict-o-no-strict/">http://www.csslab.cl/2005/11/30/¿strict-o-no-strict/</a> “Enlace en CSSLab a “¿Strict o no Strict?”” [4]: <a href="http://www.w3.org/TR/CSS2/syndata.html">http://www.w3.org/TR/CSS2/syndata.html</a> “Enlace externo a “W3C: Syntax and basic data types”” </article> <article> <h1>Podcast 04</h1> Tue, 15 Jun 2010 15:24:04 +0000 Muchos temas me son más fáciles de expresar verbalmente que a través del teclado, principalmente cuando son de opinión. Y compartir la opinión, tanto mía como la de ustedes ha sido uno de los principales motivos por los cuales mantengo este sitio. Aparte de compartir conocimientos, crear un lugar -aunque sea virtual- para concentrar y comparar puntos de vista es un gran objetivo que se sigue manteniendo en CSSLab.cl. En esta ocasión, el podcast es bastante preciso y corto, y los temas que convergen son: <ol> <li>Yo no valido.</li> <li>HTML5, CSS3 y rediseño de este sitio.</li> </ol> [Bajar Podcast 04 (12.6mb, .zip)][1]{.bajar} [1]: <a href="http://www.csslab.cl/ejemplos/podcast/csslab_podcast4.zip">http://www.csslab.cl/ejemplos/podcast/csslab_podcast4.zip</a> “Enlace en CSSLab a “Bajar Podcast 04"” </article> <article> <h1>Tip Precoz 6: Limpiar valores de input</h1> Tue, 08 Jun 2010 22:20:36 +0000 Esta pequeña función de jQuery me es muy útil cuando tengo un campo de texto (<input>, <textarea>, etc) y éste tiene un valor por defecto (por ejemplo, el Buscar que se ve en el header de este humilde sitio). Cuando hago foco en él para escribir, quiero que ese value desaparezca y el usuario pueda ingresar lo que quiera; caso contrario, si el usuario lo deja vacío o si es el mismo que el original (en este caso, Buscar) vuelve a restablecerse al definido por defecto. <pre><code class="language-javascript">$('input').each(function(){ // tomamos el valor actual del input var currentValue = $(this).val(); // en el focus() comparamos si es el mismo por defecto, y si es asi lo vaciamos $(this).focus(function(){ if( $(this).val() == currentValue ) { $(this).val(''); }; }); // en el blur, si el usuario dejo el value vacio, lo volvemos a restablecer $(this).blur(function(){ if( $(this).val() == '' ) { $(this).val(currentValue); }; }); });</code></pre> [Ver ejemplo][1]{.verejemplo} [1]: <a href="http://www.csslab.cl/ejemplos/jquery_vacia_value/index.html">http://www.csslab.cl/ejemplos/jquery_vacia_value/index.html</a> “Enlace en CSSLab a “Ver ejemplo Tip Precoz 6: Limpiar valores de input”” </article> <article> <h1>Lo ví y me gustó 35</h1> Fri, 04 Jun 2010 16:09:37 +0000 #35 – 4 Junio 2010 <a href="http://www.conocono.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.lucasnikitczuk.com.ar/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.urbanchip.com/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>CSS Reseter v2</h1> Tue, 01 Jun 2010 21:45:53 +0000 Inaugurando el rediseño de este sitio, orientado completamente hacia los nuevos estándares que espero algún día pronto sea aprobado y (bien) aplicado por los fabricantes de browsers, he mejorado la versión de mi ya fiel [CSS Reseter][1] que tanto me ha ayudado en innumerables proyectos. Para esta nueva versión, he agregado las nuevas etiquetas que conforman HTML 5 para elementos de tipo bloque (las que son inline no las necesitan) y aproveché de realizar las siguientes mejoras en lo existente: <ul> <li>Soporte para nuevas etiquetas HTML 5</li> <li>Mejor reset para campos de formularios</li> <li>Mejoras para listas ordenadas (<ol>) y tablas (<table>)</li> </ul> Ya está activo en este nuevo sitio, y espero sea aprovechado y de mucha ayuda en sus proyectos. La idea, como saben, es simplificar el codificado mediante el reset de estilos que traen por defecto los navegadores web. <a href="https://github.com/juanbrujo/CSSLabs--CSS-Reseter-v2/archive/master.zip" title="Enlace en CSSLab a "CSS Reseter V2"" class="verejemplo" target="_blank">Bajar hoja de estilo (.zip)</a> [1]: <a href="http://www.csslab.cl/2007/10/18/css-reseter/">http://www.csslab.cl/2007/10/18/css-reseter/</a> “Enlace en CSSLab a “CSS Reseter”” </article> <article> <h1>jQuery Tabs y registro en el historial</h1> Mon, 10 May 2010 16:14:53 +0000 Es muy común el uso de navegación de tipo tabs para contenidos dentro de una misma página y funcionan bastante bien; el usuario ya está acostumbrado a este tipo de elementos y los utiliza sin problemas, además que resulta liviano y relativamente fácil implementarlos. Pero recientemente un cliente pidió que los tabs se pudieran navegar con el historial del browser, o sea que si vas seleccionado diferentes tabs e incluso saliendo a otras páginas, puedas volver a ellas con el botón ‘Back’ o ‘Volver’ del navegador, y volver a pasar por ellos. Esto me resultó en un problema no menor que me costó solucionar, ya que los tabs suelen reaccionar ante eventos del click del mouse (como por ejemplo para mostrar tal <div> al clickear tal enlace <a> y que a éste se le agregue una class=“selected” que indique su estado de seleccionado). Y esto suelo no quedar registrado en el caché del browser para que pueda ser navegado como se pidió. Pero bueno, pude solucionarlo y aquí lo comparto por si lo necesitan; implica 2 pasos diferentes los cuales deben funcionar en conjunto: Primero, crearemos una simple función en jQuery para que funcionen los tabs. Esta es una de las maneras más simples de crear este tipo de menúes. Para el HTML: <pre><code class="language-markup"><div class="tabs"> <ul id="menu_tabs"> <li><a href="#item1">Item 1</a></li> ... </ul> <div id="item1" class="caja"> <h2>Item 1</h2> Donec gravida posuere arcu. </div> ... </div></code></pre> Le aplicamos la siguiente instrucción en jQuery: <pre><code class="language-javascript">$(function(){ // definimos variables para el contenedor y los<div>'s de los tabs var tabContainers = $('.tabs > div'); // creamos el evento click para cada uno de los items del menu de tabs $('div.tabs ul a').each(function() { $(this).click(function(){ // guardamos el ancla (#item1 por ej.) en una variable del link clickeado var hash = $(this).attr('href'); // escondemos todos los tabs tabContainers.hide(); // mostramos el <div> que sea igual al ancla guardado $(hash).show(); // jugamos agregando y quitando classes del menu $('div.tabs ul a').removeClass('selected'); $('a[href='+hash+']').addClass('selected'); }); }); // para comenzar, hacemos que el primer elemento sea el clickeado $('div.tabs ul a:first').click(); });</code></pre> <a href="http://www.csslab.cl/ejemplos/tabs_history/tabs.html" class="verejemplo" title="Enlace en CSSLab "Demo 01: jQuery Tabs"" target="_blank">Ver demo tabs</a> Bien, con esto tienes tu menú de tabs funcionando de manera básica pero práctica. Ahora como notarás, al ir por los tabs y volver con el botón del navegador éstos no seguirán el mismo recorrido devuelta, aunque en la URL sí se vea que van cambiando. Para que esto ocurra, debemos comparar no el hash del enlace (<a href="#item1"> por ej.), sino comparar con la URL que va cambiando. Además se debe incluir el plugin <a href="http://benalman.com/projects/jquery-bbq-plugin/" title="Enlace externo a "jQuery BBQ"" target="_blank">jQuery BBQ</a>, el que realiza el ingreso de la URL con tabs al caché del browser. Con el mismo HTML, miren la nueva función: <pre><code class="language-javascript">$(function(){ var tabContainers = $('.tabs > div'); // creamos un nuevo evento y lo incluimos al browser $(window).bind('hashchange', function () { // nuestra variable no la sacamos del <a> sino de la URL y dejamos el primero seleccionado var hash = window.location.hash || '#item1'; // el resto es prácticamente lo mismo tabContainers.hide(); $(hash).show(); $('div.tabs ul a').removeClass('selected'); $('a[href='+hash+']').addClass('selected'); }); // ejecutamos este nuevo evento 'hashchange' mediante un trigger $(window).trigger('hashchange'); });</code></pre> <a href="http://www.csslab.cl/ejemplos/tabs_history/tabs_history.html" class="verejemplo" title="Enlace en CSSLab "Demo 02: jQuery Tabs + History"" target="_blank">Ver demo Tabs + History</a> En este ejemplo, incluso podemos abrir mediante la URL en el tab que queramos, por ejemplo con el siguiente link abriremos el demo en el tab 3: <a href="http://www.csslab.cl/ejemplos/tabs_history/tabs_history.html#item3" class="verejemplo" title="Enlace en CSSLab "Demo 03: jQuery Tabs + History en tab 3"" target="_blank">Ver demo Tabs + History en el tercer tab</a> </article> <article> <h1>Tip Precoz 5: teclados de iPhone/iPad</h1> Tue, 20 Apr 2010 19:49:08 +0000 Como muchos ya saben, Webkit siempre ha sido pionero en implementar nuevas tecnologías y las últimas versiones de los lenguajes web existentes. Muchas etiquetas y atributos de HTML 5 por ejemplo, ya se pueden utilizar desde hace mucho tiempo en browsers como Safari, Konqueror y Chrome. Este pequeño tip mostrará un atributo de HTML 5 que implementado, ayudará a que la experiencia de usuario de Safari para iPhone y iPad sea mejor. En un campo de formulario, cuando lo seleccionas en iPhone/iPad para completarlo, automáticamente te muestra el teclado touch del aparato. Aparte del teclado QUERTY por defecto, existen 3 valores para type="" de <input /> que muestran diferentes tipos de teclados: numéricos, url y de e-mail: <pre><code class="language-markup"><input type="text" /> (por defecto)</code></pre> <pre><code class="language-markup"><input type="url" /></code></pre> <pre><code class="language-markup"><input type="number" /></code></pre> <pre><code class="language-markup"><input type="email" /></code></pre> Los browsers que no soporten HTML5 lo obviarán y degradarán como si fuera un campo de tipo texto (type=“text”). Se nota como un detalle menor pero seguro tus usuarios lo notarán y te diferenciarás con este tipo de detalles. </article> <article> <h1>Videocast 4: formulario</h1> Thu, 08 Apr 2010 15:09:23 +0000 Tenía hace unos meses preparado un nuevo videocast para ayudar a quienes están aprendiendo a maquetar en HTML+CSS a realizarlo con campos de formularios. Lejos es lo más complicado que me ha tocado perfeccionar, pero se trata principalmente de practicar y de realizar la mayor cantidad de variaciones posibles para lograr un buen manejo de las etiquetas y conocer cómo se comportan en los diferentes browsers. A modo de ejemplo, la siguiente imagen grafica un mismo archivo HTML con diferentes tipos de <input /> con diferentes estilos en diferentes browsers: En esta ocasión el layout es bastante simple, uno típico que encontrarás en cualquier sistema de comentarios para blogs. Pero es un buen puntapié para que veas de qué se trata esto. Además, contiene las etiquetas fundamentales y más utilizadas para capturar datos de usuarios. <div class="video-container"> </div> <a href="http://www.csslab.cl/ejemplos/videocast/5/form_videocast5.zip">Descargar el material utilizado</a>{.verejemplo} </article> <article> <h1>Usando CSS3 ahora</h1> Tue, 09 Mar 2010 16:40:50 +0000 No hay duda de que CSS3 llegó para quedarse: es moderno, elegante y finalmente entrega control total a los estilos. Cada vez lo utilizo más, y me encanta tener que pensar menos en solucionar problemas y esforzarme más en dar el formato que realmente quiero. Paralelamente, se siente cada vez más fuerte el fervor por dejar de lado ese infame IE6, el último remanente de la [guerra de los browsers][1]. Ese que nos mantiene en la edad media, y no nos deja pasar finalmente a la ilustración… y disfrutar a plenitud de CSS3 (Sí, lo sé. Además están IE7 e IE8, pero algo es algo). Actualmente existen algunas propiedades que puedes ya utilizar en los browsers modernos, lo que hará que tu diseño se distinga del resto. A continuación, las más atractivas: <h3 id="bordes-redondos">Bordes redondos</h3> Ya no más cortar en Photoshop esos bordes y tratar de hacerlos calzar; ahora puedes crearlos directamente con CSS3: <pre><code class="language-css">border-radius: 10px;</code></pre> Ahora, para que Firefox y Safari/Chrome lo reconozcan, debes ayudarlos agregando lo siguiente: <pre><code class="language-css">-moz-border-radius: 10px; /* para Firefox */ -webkit-border-radius: 10px; /* Para Safari/Chrome */</code></pre> Caja aplicada con border-radius Soportado por Safari/Chrome y Firefox 3.1+. <h3 id="textos-con-sombra">Textos con sombra</h3> Con text-shadow puedes darle sombras a tus tipografías, haciendo tus títulos más atractivos: <pre><code class="language-css">text-shadow: 2px 2px 5px #000;</code></pre> Caja aplicada con text-shadow Soportado por Firefox 3.5+, Safari/Chrome y Opera 9.5+. <h3 id="cajas-con-sombras">Cajas con sombras</h3> ¡Genial! Además, puedes darle sombras a cualquier elemento HTML en bloque… ¡incluso si ya lo definiste con bordes redondos! <pre><code class="language-css">box-shadow: #666 0 0 10px; -webkit-box-shadow: #666 0 0 10px; /* para Firefox */ -moz-box-shadow: #666 0 0 10px; /* Para Safari/Chrome */</code></pre> <p style="margin: 10px; background: #c00; color: #fff; padding: 10px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: #666 0 0 10px; -webkit-box-shadow: #666 0 0 10px; -moz-box-shadow: #666 0 0 10px;"> Caja aplicada con border-radius y box-shadow Soportado por Safari/Chrome y Firefox 3.5+. <h3 id="transparencias">Transparencias</h3> Las puedes definir de 2 maneras: como color utilizando [RGBa][2] o como opacidad del elemento completo, mediante opacity: <pre><code class="language-css">background: rgba(0,0,0,0.5);</code></pre> Caja aplicada con background RGBa al 0.5 <pre><code class="language-css">opacity: 0.5; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* para IE8 */ filter: alpha(opacity=50); /* para IE6-7 *</code></pre> Caja aplicada con opacity al 0.5 Soportado por Safari/Chrome, Firefox 3.5+, Opera e IE7+ (parcialmente). <h4 id="links">Links</h4> <ul> <li><a href="http://tools.css3.info/" target="_blank" title="Enlace externo a "CSS3.info"">CSS3.info</a></li> <li><a href="http://tools.css3.info/selectors-test/test.html" target="_blank" title="Enlace externo a "CSS 3 Selectors Test"">CSS 3 Selectors Test</a></li> <li><a href="http://www.westciv.com/iphonetests/" target="_blank" title="Enlace externo a "CSS 3 Property Tests"">CSS 3 Property Tests</a></li> </ul> [1]: <a href="http://www.csslab.cl/2008/05/05/un-poco-de-historia-browser-wars/">http://www.csslab.cl/2008/05/05/un-poco-de-historia-browser-wars/</a> “Enlace en CSSLab a “Un poco de historia: Browser Wars”” [2]: <a href="http://www.csslab.cl/2009/02/26/tip-precoz-3-rgba/">http://www.csslab.cl/2009/02/26/tip-precoz-3-rgba/</a> “Enlace en CSSLab a “Tip Precoz 3: RGBa”” </article> <article> <h1>Lo ví y me gustó 34</h1> Tue, 02 Mar 2010 14:52:08 +0000 #34 – 2 Marzo 2010 <a href="http://www.veterinariarivas.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.markercss.com/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Tips para desarrollos móviles</h1> Wed, 03 Feb 2010 16:20:37 +0000 A pasos agigantados avanza el mercado de telefonía móvil, y cada vez son más las empresas que piden proyectos web específicos para que se usen desde teléfonos celulares, o que sus sitios se vean correctamente en ellos. El problema es que, si para escritorio peleamos con una sopa de 6 browsers más comunes –Firefox, Opera, IE6, IE7, IE8 y Safari-Chrome– para móviles es exponencialmente mayor: tenemos browsers diferentes por marca de teléfono y por modelo de las mismas marcas… ¡una locura! Poner en práctica este tema me ha costado mucho tiempo de documentarme, de pruebas y errores. Si te vas a aventurar en este medio, creo importante que tengas claro algunos puntos y otros que se los transparentes al cliente, todo para evitar posteriores decepciones: <h3 id="estudia-cada-dispositivo-sus-fortalezas-y-limitaciones">Estudia cada dispositivo, sus fortalezas y limitaciones</h3> Desde que salió el iPhone, se abrió una nueva manera de tratar sitios web para móviles. Se pensaba que con el marcado WML y estilos básicos bastaban, pero Apple demostró que se puede hacer mucho más y mejor en tan poco espacio. Google ofrece mucho con su navegador basado en Webkit, Opera soporta XHTML en su Opera Mini. Es importante que sepas cómo y qué te ofrece cada dispositivo, y eso se lo traspasas a tu cliente. <h3 id="trata-de-hacer-versiones-para-iphone-smartphones-y-los-que-sobran">Trata de hacer versiones para iPhone, smartphones y los que sobran</h3> Básicamente iPhone es el que tiene mayores diferencias en la manera de tratar el código fuente, así que es mejor hacer una versión del sitio sólo para este dispositivo. Agrupa los smartphones (Blackberry, Nokia) y crea una versión con buen HTML y estilos sobrios; cuida que el HTML sea sencillo para el resto de los browsers más limitados (Palm, Windows Mobile). <a href="http://detectmobilebrowsers.mobi/" target="_blank" title="Enlace externo a "Detect Mobile Browsers"">Para detectarlos, te recomiendo un sencillo pero útil script en PHP que hace el trabajo por tí</a>. <h3 id="ten-cuidado-con-blackberry-y-nokia">Ten cuidado con Blackberry (y Nokia)</h3> He tenido grandes decepciones con las versiones del browser de Blackberry y Nokia: suelen comportarse diferente entre modelos inmediatos, y esas diferencias son sustanciales. Lamentablemente, te recomiendo que uses HTML 4 y CSS1 para asegurarte con todos los modelos de estas marcas. <h3 id="deja-el-comportamiento-para-el-servidor">Deja el comportamiento para el servidor</h3> Si debes validar campos de formularios, déjaselo al servidor y no al browser. Al contrario de iPhone, muchos teléfonos traen Javascript deshabilitados por defecto. No esperes que el usuario los haya habilitado manualmente; si puedes, evítalo. <h3 id="no-confies-en-los-simuladores">No confies en los simuladores</h3> Una lástima, pero te recomiendo que le agregues a tu lista de amigos, el modelo y versión de teléfono celular que tiene cada uno para que te ayuden a probar tus desarrollos. Sólo así tendrás certeza del correcto funcionamiento que esperan tú y tu cliente. <h3 id="ten-mucha-pero-mucha-paciencia">Ten mucha, pero mucha paciencia</h3> Si crees que por ser sitios menores te será fácil, te decepcionarás: son muchas más las variables que debes tener presente, y probablemente el esfuerzo será mayor. Planifica muy bien con tu cliente lo que él espera ver e interactuar mediante un móvil, aterrízalo con las limitaciones que encuentres y lleguen a un acuerdo razonable para ambos. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.opera.com/mini/developer/" target="_blank" title="Enlace externo a "Opera Mini - Developer"">Opera Mini – Developer</a></li> <li><a href="http://developer.android.com/sdk/index.html" target="_blank" title="Enlace externo a "Android SDK"">Android SDK</a></li> <li><a href="http://developer.apple.com/safari/library/referencelibrary/GettingStarted/GS_iPhoneWebApp/index.html#//apple_ref/doc/uid/TP40008134" target="_blank" title="Enlace externo a &quotiPhone Web Apps Reference Library;"">iPhone Web Apps Reference Library</a></li> <li><a href="http://docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry%20Browser" target="_blank" title="Enlace externo a "Blackberry Browser Manuals and Guides"">Blackberry Browser Manuals and Guides</a></li> <li>[Nokia Mobile Simulator (requiere registro)][1]</li> </ul> * fotografía meramente ilustrativa. [1]: <a href="http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4-caac8872a7c5/NMB40_install.zip.html">http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4-caac8872a7c5/NMB40_install.zip.html</a> “Enlace externo a “Nokia Mobile Simulator”” </article> <article> <h1>Diseñando experiencias</h1> Sun, 17 Jan 2010 00:24:34 +0000 Hace mucho que dejé de trabajar como diseñador gráfico para primero dedicarme al desarrollo front-end, y más recientemente a la arquitectura de información y principalmente al manejo de proyectos digitales. Pero aún así, me encanta diseñar y siempre lo hago para mis proyectos personales, los cuales soy mi propio crítico y jefe. Ante ello, soy muy crítico y tengo mi propia opinión sobre el diseño orientado a la web, lo cual creo que es un factor muy importante en un proyecto y que se merece un gran protagonismo pero que lamentablemente ha sido muy mermado. El diseño web no debe ser tratado como el diseño gráfico; es una disciplina tan específica que debe ser separada definitivamente como una rama independiente. Implica conocimientos de áreas propias que son disciplinas en sí. Por nombrar algunas: <ul> <li>Diseño gráfico</li> <li>Psicología</li> <li>Sociología</li> <li>Marketing</li> <li>Historia</li> <li>Comunicación Social</li> <li>Arquitectura de información</li> <li>Usabilidad</li> <li>Programación</li> </ul> He visto muchos diseños que merecen más ser impresos que aplicados en una pantalla; comenzando por que van a pesar bastante y pasando por formas imposibles de ser realizadas mediante codigo HTML y CSS. En mi humilde opinión, un diseñador web para ser efectivo en su trabajo debe considerar por lo menos alguno de los siguiente puntos: <h4 id="tareas">Tareas</h4> Siempre recuerda: el ser humano basa su comportamiento en tareas y objetivos, y por lo tanto el lograr realizarlas. Un sitio web no es sólo una vitrina, también es una vía para lograr un potencial cliente. Nadie llega a un sitio por azar; el usuario eligió llegar a él a través de un click en un enlace, una búsqueda orgánica o por vía directa. Por lo tanto, se debe tratar de encantarlo y extender su estadía en él, y el diseño es el medio más directo para ello. <h4 id="usuario">Usuario</h4> Estudiar al usuario no es fácil y se necesita tiempo y estudio para lograr algo fidedigno. Lamentablemente, sabemos que para un proyecto web se trabaja muy rápido y con deadlines muy ajustados. Ante ello, estudios y conocimientos previos son imprecindibles. <h4 id="soporte">Soporte</h4> Siento que es muy importante conocer (pero no necesariamente dominar) cuál será el soporte final del sitio, antes de siquiera comenzar el diseño. ¿Estará alimentado por un CMS? ¿Qué posibilidades me ofrece? ¿Podré usar Flash parcialmente? ¿Qué versión? Con algunas pocas respuestas se podrá exigir más a la herramienta y no esperar tanto al aprendizaje del usuario. <h4 id="performance">Performance</h4> No existen usuarios expertos, y todos estamos constantemente aprendiendo a través de constantes innovaciones de gente muy creativa. Pero es importante considerar que el tiempo que el usuario gasta en un sitio web es tan valioso como nuestro tiempo como profesionales creándolo, por lo tanto se debe diseñar estructuras que sean además de fácil de entender, rápido de recorrer, de cargar y de encontrar lo que se busca. <h3 id="disentildeo-centrado-en-el-usuario">Diseño Centrado en el Usuario</h3> En el mundo para el cual trabajamos existe un concepto muy conocido pero poco aplicado, por lo que he observado navegando. El Diseño Centrado en el Usuario es una filosofía y un proceso con el cual se busca mediante el diseño necesidades, deseos y limitaciones de una interfaz que satisfacen al usuario final del sitio web. Esto puede ser considerado como un proceso múltiple, donde no sólo se requiere que el diseñador resuelva la estética (como comúnmente sucede), sino cómo los usuarios interpretan una interfaz y su comportamiento utilizándola. Con esto, se hace imperativo una etapa de pruebas con usuarios reales (sin miedo a redefiniciones) y una etapa inicial de análisis tanto de target como de arquitectura de información. Pienso que debemos diseñar experiencias, no productos. Si haces un producto bonito, puede que quien lo utiliza le agrade la estética y lo tenga en un lugar destacado. Pero si el usuario tiene una experiencia diferente, satisfactoria navegando, es muy probable que vuelva y que lo recomiende a otros usuarios, todos potenciales clientes. Y ¿qué implica este diseño de experiencias? <ul> <li>Pensar global: desde que el usuario carga el sitio, hasta que lo deja. Cada paso, cada elemento debe ser cuidadosamente pensado y aplicado.</li> <li>Considerar tanto la presentación del contenido para todos (accesibilidad), como la facilidad del uso de cada elemento del sitio (usabilidad).</li> <li>Desarrollar hacia el usuario, desde lo complejo del proceso a la simplicidad de la tarea.</li> <li>Diseñar mensajes, ayudas, errores y guías de navegación que apoyen y orienten al usuario, y que lo haga sentirse bien y no fracasado por no haber logrado algo.</li> <li>El contenido es el rey, por lo tanto debe ser tratado como tal y el diseño es el soporte para el mensaje que se quiera entregar al usuario a través del sitio web. Pero el diseñador debe ser hábil: puedes persuadir al usuario tanto con buenos textos como con buen diseño.</li> </ul> Como ven, esto es sólo un esbozo de lo que pienso debería ser un diseñador web integral, que cumpla con efectividad su tarea comunicadora y persuasiva y que finalmente pueda ser valorado como tal. Este tema queda abierto a sus comentarios, los que pueden nutrir y complementar este tema. </article> <article> <h1>Lo ví y me gustó 33</h1> Thu, 17 Dec 2009 20:01:56 +0000 #33 – 17 Diciembre 2009 <a href="http://www.expresaweb.com.ar/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.eneaa.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.centroharmonia.com/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Decisiones</h1> Mon, 23 Nov 2009 15:53:54 +0000 En el transcurso de la vida profesional debes tomar muchas decisiones; algunas son tan mecánicas que ni las notas, mientras que otras pueden hacer que redefinas tu propia vida. Quiero compartir un pequeño caso que me tocó ver junto a otro colega, los argumentos que tuvimos y la decisión que enfrentamos. Lo encuentro interesante, ya que involucra accesibilidad, usabilidad, diseño, experiencia de usuario y desarrollo web, cada una disciplinas en sí pero que creo importante que tengan presencia y dominio en un profesional. Este es uno de tantos artículos de este sitio que son inspirados a partir de vivencias, experiencias y conversaciones con otras personas que comparten el mismo oficio. <h3 id="el-comienzo">El comienzo</h3> Típico proyecto web, se hizo la etapa de AI, wireframming, diseño de propuestas, se aprobó un estilo gráfico, se hicieron mejoras en el diseño y se comenzó a maquetar las páginas. Lo siguiente es una variación (más simple) del wireframe de la home (por motivos de privacidad, omito el nombre del proyecto/cliente y detalles): Hasta aquí todo medianamente normal, pero al hacer funcionar la parte de Noticias, nos topamos con un pequeño gran detalle: en el wireframe y en el boceto se muestra que hay tabs por tipo de noticias, y además hay resumen de 3 noticias (según tipo) con fotografias a desplegarse, según pases el mouse sobre cada texto: <h3 id="el-anaacutelisis">El análisis</h3> ¿Dónde veo un problema? Veámoslo según cada disciplina <ul> <li>Usabilidad: técnicamente, intervienen 2 tabs: por noticias, que al desplazar el cursor sobre cada resumen se reemplaza por su imagen respectiva; y por tipo de noticia, que son 3 tabs. Este doble tab puede crear confusión al usuario.</li> <li>Experiencia de usuario: En total, son 9 imágenes cargadas: 3 tipos de noticias, 3 noticias por tipo; cada imagen, por el tamaño, es probable que pese cada una 20kb, lo que en total se debe cargar 180kb. Quizás no es mucho peso, pero hay que tomar en cuenta que además se cargan los banners, que son bastante grandes y pueden llegar a ser pesados…</li> <li>Accesibilidad: Para conexiones lentas, no debemos pedirle tanto al usuario si es poco probable que vaya a necesitar de esas 9 imágenes. Para conexiones desde celulares, sería un abuso.</li> <li>Desarrollo: para aminorar esa carga, podríamos cargar las noticias en los tabs según el usuario vaya haciendo click en ellas mediante AJAX; pero esto involucra un desarrollo extra que no estaba estimado.</li> </ul> Sinceramente, podríamos haber continuado con la construcción del sitio y ya. Pero es importante tomar en cuenta estos detalles, que al fin y al cabo hacen que un proyecto marque la diferencia. <h3 id="la-solucioacuten">La solución</h3> Aún se está trabajando en ello, pero se intervendrá el diseño y probablemente se quitarán las imágenes asociadas por cada noticia, y se dejará sólo 1 imagen principal por tipo de noticia, lo que reduce la carga a sólo 3 imágenes: Como ven, no impacta mayormente en el diseño final, pero sí será necesario cambiarlo y transparentarle esta modificación al cliente, siempre argumentando que es para mejor. Esto es todo, como aún el proyecto está en proceso no hay desenlace (favorable o no), aún así me encantaría leer sus opiniones. </article> <article> <h1>Lo ví y me gustó 32</h1> Mon, 02 Nov 2009 13:31:21 +0000 #32 – 02 Noviembre 2009 <a href="http://www.asesoriagrafica.cl" target="_blank" title="Abrir Sitio"></a> <a href="http://www.ril.es/" target="_blank" title="Abrir Sitio"></a> <a href="http://marianaonate.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.ontherocks.cl/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Por una metodología</h1> Wed, 21 Oct 2009 13:59:25 +0000 Suele ser bastante complicado trabajar para la web, tomando en cuenta el ritmo en que están evolucionando las tecnologías y lo exigente que se pone el mercado ante la vorágine de Internet. Es en momentos como éstos que se necesita poner orden en el gallinero, pausar un momento y sentarse a reflexionar en cuáles serán los pasos a tomar para enfrentar un proyecto web. Estimar tiempos, quizás transparentárselo al cliente a través de una Gantt y apoyarte con una metodología clara, robusta y que te apoye al momento de esa tan ansiada entrega final sería el ideal en estas instancias. Scrum es una metodología ágil de manejo de proyectos digitales (generalmente software). Puede ser tomado como un proceso, lo que hace más interesante aún esta metodología. Algunos incluso se atreven a mencionarlo como capaz de ser utilizado en el desarrollo de cualquier producto; pero lo que más interesa es la capacidad de entregar un producto con un conjunto de funcionalidades específicas a cada iteración. Algunas de sus características son: <ul> <li>Es ágil ya que funciona con cortas iteraciones de tareas pre-definidas. <ul> <li>Scrum no controla tiempos, sino que tareas de desarrollo.</li> <li>Envuelve prácticas ya existentes, por lo que su implementación no confiere un cambio radical en la manera de trabajar.</li> <li>Es basado en el trabajo en equipo.</li> <li>Al ser ágil, se incrementan en cada iteración funcionalidades y se adapta rapidamente a los cambios que éstos pueden sufrir.</li> <li>Aumenta la cooperación entre los integrantes del equipo y su comunicación.</li> <li>Scrum es una manera de detectar causas de conflictos y errores en la entrega de productos.</li> <li>Maximiza la productividad.</li> <li>Es escalable desde simples proyectos hasta organizaciones enteras.</li> <li>Puede ser implementado al inicio del proyecto, a la mitad o cuando esté con problemas y retrasos en su entrega.</li> </ul> </li> </ul> Scrum es un set de prácticas y reglas interrelacionadas que optimizan el desarrollo, reduce la sobrecarga organizacional y sincroniza los requerimientos con prototipos iterativos. Basado en teorías de control de procesos modernas, Scrum permite que un desarrollo sea mejor abordado teniendo en cuenta los recursos disponibles y tiempos predefinidos. Parece milagroso, pero no es la solución a nuestros problemas. Por mi experiencia, necesitas que se junten algunos factores para que puedas implementar Scrum en un proyecto con éxito: <ul> <li>Un pequeño tiempo (hasta 2 dias) de implementación y/o adaptación.</li> <li>Un equipo ordenado y acostumbrado a cambios a mitad de un proceso.</li> <li>Un jefe de proyecto que sepa lo que está haciendo.</li> <li>Un cliente que acepte la propuesta de que es un cambio que será para mejor.</li> </ul> <h3 id="bueno-y-iquestcoacutemo-se-utiliza">Bueno, y ¿cómo se utiliza?</h3> La clave del éxito de Scrum está en el uso de medidas que maximizen la flexibilidad y riesgo mientras mantienes el control. La mayoría de los proyectos tratan de evitar riesgos, aunque ésta sea una parte inherente del desarrollo web y de software. <blockquote> Manten tus amigos cerca, y tus enemigos más cerca aún </blockquote> Las variables de un desarrollo son: riesgo, funcionalidad, costo, tiempo y calidad, las que pueden ser estimadas al inicio mismo del proyecto. Cada variable comenzará a cambiar en el momento en que el proyecto comience, y pueden ser aumentadas o disminuidas de acuerdo al avance del desarrollo (aumenta funcionalidad por mayor tiempo y costo, por ejemplo). El uso de controles es la espina dorsal de Scrum, y sirve para establecer, mantener y monitorear parámetros claves. Estos controles se tornan críticos cuando te encuentras con incertidumbres, comportamiento impredecible y el amargo caos (sabemos que siempre existen…). Los controles utilizados en Scrum son: <dl> <dt>Backlog (cartera)</dt> <dd>Una identificación de todos los requerimientos que deben cumplirse al final del desarrollo.</dd> <dt>Objetos / Componentes</dt> <dd>Contenedor de reutilizables</dd> <dt>Paquetes</dt> <dd>Grupo de objetos dentro del cual se desarrollará un ítem del backlog.</dd> <dt>Problemas</dt> <dd>Que deben ser resueltos por un miembro del equipo al implementar un ítem del backlog.</dd> <dt>Temas</dt> <dd>Que deben ser resueltos antes que un ítem del backlog sea asignado a un paquete.</dd> <dt>Soluciones</dt> <dd>A un tema ó problema.</dd> <dt>Cambios</dt> <dd>De actividades que son realizadas para solucionar un problema.</dd> <dt>Riesgos</dt> <dd>Asociados a un problema, tema ó ítem del backlog.</dd> </dl> Estos controles son medidos y contínuamente mantenidos. Los mayores controles son backlog y riesgos; mientras backlog comenzará siendo grande, aumentará más aún cuando culmine la etapa de planificación pero disminuirá considerablemente mientras el proyecto avance y se vayan quemando cada uno de sus requerimientos. Riesgos por su parte irá en aumento a medida que se sumen temas y problemas, pero debe disminuir cuando se acerque la entrega del proyecto. <h3 id="la-clave-los-sprint">La clave: los Sprint</h3> Un sprint es un conjunto de actividades de desarrollo en un tiempo pre-definido que conducen en un ejecutable demostrable. El intervalo entre cada sprint está basado en la complejidad del producto, evaluación de los riesgos y el grado de control deseado. Dentro del desarrollo del proyecto existirán varios sprint; inicialmente sus duraciones serán largas (hasta 6 semanas) pero deben acortarse a medida que avanzan (1 semana). Al final de cada sprint, el Scrum Master (quien maneja y aplica la metodología) puede cambiar backlog y riesgo en respuesta a eventos externos al proyecto (nuevas tecnologías, competitividades, fallos en herramientas, etc.) lo que se traduce en productos cada vez más acabados y cuya funcionalidad se va incrementando en cada sprint. En un equipo de trabajo pueden haber muchos sprints trabajando en diferentes funcionalidades de un mismo producto; se recomiendan equipos de sprint que incluyan: desarrolladores, especialista en QA y un encargado de la documentación. Cada equipo debe trabajar en sus paquetes asignados para resolver los problemas al implementar backlogs. La idea es que al final de cada sprint el equipo entregue un código ejecutable y demostrable. Se recomienda crear una reunión diaria (Scrum Meeting) donde se discuten los avances, problemas y posibles soluciones por parte de cada miembro del equipo; así todos estarán al tanto de lo que cada uno está haciendo y pueden aportar con soluciones. Esta reunión no debe durar más de 15 minutos y ojalá se haga al inicio de la jornada laboral. <h3 id="finalmente-el-cierre">Finalmente, el cierre</h3> Cuando todos los factores determinados en el backlog están terminados y los problemas fueron completados, el encargado puede determinar que el proyecto está cerrado. Lo interesante en Scrum es que se asume que un producto nunca está completo y que constantemente se puede mejorar en cuanto a funcionalidades. A partir que aquí, se permite generar un nuevo ciclo y recomenzar Scrum. <h3 id="y-iquestcoacutemo-lo-aplico">Y ¿Cómo lo aplico?</h3> Primero, debes documentarte bastante y entender bien lo que involucra implementar una nueva metodología de trabajo dentro de un equipo ya consolidado. Recuerda que manejar personas suele ser complicado y debes tener un proyecto algo liviano para hacer un primer intento. En una empresa de desarrollo de software o de TI no debería ser complicado, pero implementarlo en una agencia multimedia puede llegar a ser doloroso y con una alta tasa de fracaso, debido al ritmo vertiginoso con que se trabaja y la poca posibilidad de manejar proyectos individuales por vez (si entra un nuevo cliente, se debe tomarlo con la misma gente que ya está trabajando en otros proyectos con sprints ya definidos). En ese caso, el Scrum Master debe saber manejar muy bien multiples proyectos simultaneamente y tratar en lo posible de mantener el orden con el cliente. No deja de ser un buen desafío, es cosa de atreverse. </article> <article> <h1>¿Ansioso por HTML 5?</h1> Tue, 29 Sep 2009 21:32:46 +0000 Con la aparente decisión de que el nuevo estándar a ser adoptado por la comunidad desarrolladora web será HTML 5, existen ansias de disfrutar luego todas su bondades, aunque siento aún lejano su total uso dado lo lento que suele ser por parte de los usuarios la actualización de sus navegadores a uno más moderno y que soporte estas nuevas especificaciones, que ya han ido apareciendo. Pero eso no quita que desde ya comencemos a jugar un poco con él. Ya he comentado sobre las [características de este nuevo estándar][1], y en este momento nos concentraremos en una maqueta funcional utilizando las nuevas etiquetas y sus nuevas posibilidades. Es interesante saber que podemos utilizar elementos de HTML 5 en estos momentos aunque la mayoría de los browsers aún no lo soporten; esto se debe a que CSS puede dar estilo a cualquier etiqueta, aunque ésta prácticamente no exista (aún). Por ejemplo, si me da la gana puedo inventar una etiqueta propia y darle estilos: <pre><code class="language-markup"><jorge></jorge></code></pre> <pre><code class="language-css">jorge { display: block; width: 300px; height: 100px; border: 1px solid #666 }</code></pre> Aunque semánticamente no va a tener valor alguno para los buscadores (y menos para los usuarios). Pero en este artículo comencemos a armar una estructura completamente en HTML 5: <pre><code class="language-markup"><header> Header </header> <nav> Menu </nav> <section> Section <article>Article</article> <article>Article</article> </section> <footer> Footer </footer></code></pre> Por defecto CSS asume que un elemento es inline. Para elementos definidos en HTML 4 como <div> ó <fieldset>, los estilos predeterminados por el browser para estas etiquetas los sobreponen y los hacen bloques, pero por esta vez lo haremos manualmente para las nuevas etiquetas HTML 5 que vayamos a utilizar: <pre><code class="language-css">header, nav, section, article, footer { display: block; }</code></pre> Luego podremos definir los estilos para crear la estructura que nos convenga: <pre><code class="language-css">header { width: 90%; overflow: hidden; } nav { width:20%; float: left; margin-right: 1%; } section { width:67%; float: left; } article { background: #999; } footer { width:90%; overflow: hidden; clear:both; } </code></pre> [Ver ejemplo 1][2]{.verejemplo} Los browsers modernos no tendrán problemas hasta ahora; sin embargo los hechos en Redmond se rehusarán a mostrar los estilos CSS hasta que tengamos que enseñarles a comportarse como se debe. Por suerte con una pequeña ayuda de Javascript crearemos estos elementos para que IE sepa qué hacer con ellos y los estilos ya definidos: <pre><code class="language-javascript">document.createElement("header"); document.createElement("nav"); document.createElement("section"); document.createElement("article"); document.createElement("footer"); </code></pre> [Ver ejemplo 2 (En IE)][3]{.verejemplo} Ahora un ejemplo utilizando la nueva etiqueta , la que (por estos momentos) utiliza el codec Ogg Theora para comprimir los videos (necesitarás Quicktime ó similar para poder exportarla en este formato). Con un poco de JS podremos manejar los botones de comando y la línea de tiempo de las películas sin mayores complicaciones, como en el siguiente ejemplo: <pre><code class="language-javascript">function Play(str) { var video = document.getElementById(str) video.play(); }</code></pre> [Ver ejemplo 3 (en Safari 4, Opera 10+, Firefox 3.5+, Chrome 2+)][4]{.verejemplo} <h4 id="links">Links:</h4> <ul> <li><a href="http://articles.sitepoint.com/article/html-5-snapshot-2009/1" title="Enlace externo a "articles.sitepoint.com"" target="_blank">Yes, You Can Use HTML 5 Today!</a></li> <li><a href="http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/" title="Enlace externo a "Opera Developer Comunity"" target="_blank">A call for video on the web</a></li> </ul> [1]: <a href="http://www.csslab.cl/2007/08/21/lo-que-se-viene-html-5/">http://www.csslab.cl/2007/08/21/lo-que-se-viene-html-5/</a> “Enlace en CSSLab a “Lo que se viene: HTML 5"” [2]: <a href="http://www.csslab.cl/ejemplos/html5/html5_1.html">http://www.csslab.cl/ejemplos/html5/html5_1.html</a> “Enlace en CSSLab a “Ejemplo 1 - HTML 5"” [3]: <a href="http://www.csslab.cl/ejemplos/html5/html5_2.html">http://www.csslab.cl/ejemplos/html5/html5_2.html</a> “Enlace en CSSLab a “Ejemplo 2 - HTML 5"” [4]: <a href="http://www.csslab.cl/ejemplos/html5/html5_3.html">http://www.csslab.cl/ejemplos/html5/html5_3.html</a> “Enlace en CSSLab a “Ejemplo 3 - HTML 5"” </article> <article> <h1>Cómo superar IE6-IE7-IE8 (y no morir en el intento)</h1> Thu, 10 Sep 2009 21:39:04 +0000 Este 2009 ha sido un año lleno de transiciones: llega IE8 pero aún persiste el fantasma de IE6; finalmente se ve un futuro más nítido con HTML5 y CSS3, pero persisten las limitaciones del soporte por parte de los fabricantes de browsers. Precisamente en ese purgatorio en que nos encontramos actualmente es cuando debemos ser más hábiles sobre qué, cómo y cuando utilizamos las herramientas que más nos acomoden. Personalmente y <a href="http://www.csslab.cl/2009/06/24/mi-lucha-contra-ie6/" title="Enlace en CSSLab a ">como he comentado anteriormente</a>, he comenzado a utilizar propiedades CSS3 que me hacen utilizar menos tiempo y recursos en lograr los mismos efectos que antes me limitaba; me refiero a text-shadow, border-radius, [opacity][2] y [rgba()][3] entre otros. Si utilizas un browser moderno, los podrás apreciar sin problemas; caso contrario, de igual manera se desplegará la información pero la experiencia no será la misma – lo que se denomina como graceful degradation ó, a falta de una traducción literal, degradación elegante-. Tengo la fortuna de trabajar con clientes y colegas que comparten esta forma de trabajar, siempre mirando hacia adelante y no frenándose debido a limitaciones ajenas a nuestro poder. Desarrollar pensando en 3 versiones de browser de una misma empresa, cada uno menos peor que el otro, es un problema grave. En este artículo, quiero compartir mi experiencia sobre cómo lograr los menos problemas posibles, creando un layout que se vea de manera similar en la mayoría de los navegadores disponibles en el mercado. Básicamente enunciaré algunos consejos prácticos que por mi experiencia ayudan en esta ardua tarea: <h3 id="usar-un-buen-reseter-css">Usar un buen reseter CSS.</h3> No pretendo [difundir el mío][4], pero sinceramente no me ha dado problemas de ningún tipo y me acompaña siempre en mis grandes proyectos. Con él, me permito reescribir los estilos que defina como prioritarios, sin perder tiempo en arreglar los defectos de IE6. Un impresindible en grandes proyectos. <h3 id="entender-coacutemo-funciona-ie6">Entender cómo funciona IE6.</h3> No basta con cabecearse cuando encuentras un descalce en tu layout que piensas funciona perfecto en todos los navegadores, hasta que lo pruebas en IE6. Deberías conocer -y prevenir- que IE6 tiene problemas [posicionando relative/absolute/fixed][5], con el [modelo de caja][6], [doble margen a elementos flotados][7], utilizando z-index, soportando [canal alpha para archivos PNG][8], con porcentaje como unidad de medida, con [overflow][9], con pseudo-classes, con [min-height][10], max-height, min-width, max-width… etc, etc, etc. Con eso en mente, puedes evitar muchos problemas desde el comienzo. <h3 id="tener-mucho-cuidado-con-ie7">Tener mucho cuidado con IE7.</h3> Microsoft lo presentó como una necesaria actualización a IE6, pero fue un gran FAIL. Arregló algunos bugs, pero sacó a luz otros nuevos; realmente me intriga qué sucede con el departamento de informática de esa compañía, cómo logran caer en los mismos errores una y otra vez. El principal problema de IE7 es el uso de position: relative/absolute aunque me he deparado con [algunos errores menores][11] por ahí. <h3 id="usar-meta-tag-para-ie8">Usar meta-tag para IE8.</h3> Siento que Microsoft se apresuró mucho en lanzar IE8, probablemente presionada por las contínuas mejoras de sus compeditores Opera, Safari y Mozilla. A raíz de esto, he visto como de una actualización a la siguiente el comportamiento de este browser respecto al renderizado de HTML y CSS es muy diferente, muy pero my diferente; a tal nivel de que un cliente reclame que su nuevo y flamante sitio no se vea bien en este navegador, y antes que yo pudiera investigar qué estaba sucediendo el cliente me comenta: <blockquote> Bah, ahora se ve bien… actualice IE8 anoche y se arregló. </blockquote> Mi solución hasta ahora es una alternativa que viene de la misma casa de Redmont: una etiqueta <meta> que hace que IE8 se comporte como si fuera IE7; así de simple. Hace lo mismo que el Compatibility Button, pero lo ejecuta desde el comienzo de la carga del documento: <pre class="codehtml"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/></pre> <h3 id="probar-probar-probar8230">Probar, probar, probar…</h3> Aunque seas un master de las hojas de estilo y del HTML, no deberías dejar para el final probar en los principales browser, y menos aún confiarte del preview de Dreameaver (grave error); debes probar casi que a cada nueva definición de propiedad. El costo de volver atrás es muy alto como para arriesgarte, no pierdas tu tiempo por confiarte demasiado. Probando en Safari y Firefox primero, luego en IE7 e IE6 para los detalles menores… pero nunca, nunca maquetar para IE: lo más seguro es que tendrás que deshacer más de lo que ya hayas hecho. <h4 id="links">Links</h4> <ul> <li><a href="http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx" title="Enlace externo a "Introducing Compatibility View"" target="_blank">Introducing Compatibility View</a></li> <li><a href="http://www.positioniseverything.net/explorer.html" title="Enlace externo a "Explorer Exposed!"" target="_blank">Explorer Exposed!</a></li> </ul> Mi lucha (contra IE6)"" [2]: <a href="http://www.csslab.cl/2007/01/24/transparencias-a-prueba-de-browsers-2/">http://www.csslab.cl/2007/01/24/transparencias-a-prueba-de-browsers-2/</a> “Enlace en CSSLab a “Transparencias a prueba de browsers”” [3]: <a href="http://www.csslab.cl/2009/02/26/tip-precoz-3-rgba/">http://www.csslab.cl/2009/02/26/tip-precoz-3-rgba/</a> “Enlace en CSSLab a “Tip Precoz 3: RGBa”” [4]: <a href="http://www.csslab.cl/2007/10/18/css-reseter/">http://www.csslab.cl/2007/10/18/css-reseter/</a> “Enlace en CSSLab a “CSS Reseter”” [5]: <a href="http://www.csslab.cl/2007/05/11/absolutamente-si/">http://www.csslab.cl/2007/05/11/absolutamente-si/</a> “Enlace en CSSLab a “Absolutamente sí”” [6]: <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/">http://www.csslab.cl/2006/12/14/como-caja-el-modelo/</a> “Enlace en CSSLab a “Como Caja: el Modelo”” [7]: <a href="http://www.csslab.cl/2007/12/17/margen-duplicado-para-ie6/">http://www.csslab.cl/2007/12/17/margen-duplicado-para-ie6/</a> “Enlace en CSSLab a “Margen duplicado para IE6"” [8]: <a href="http://www.csslab.cl/2006/08/14/pngs-transparentes-en-ie6/">http://www.csslab.cl/2006/08/14/pngs-transparentes-en-ie6/</a> “Enlace en CSSLab a “PNG’s transparentes en IE6"” [9]: <a href="http://www.csslab.cl/2008/07/07/overflow-en-ie6/">http://www.csslab.cl/2008/07/07/overflow-en-ie6/</a> [10]: <a href="http://www.csslab.cl/2007/10/05/alto-minimos-para-ie6-y-el-resto-claro/">http://www.csslab.cl/2007/10/05/alto-minimos-para-ie6-y-el-resto-claro/</a> “Enlace en CSSLab a “Alto mínimos para IE6 (y el resto, claro)”” [11]: <a href="http://www.csslab.cl/2006/07/28/se-viene-ie7-¡huid/">http://www.csslab.cl/2006/07/28/se-viene-ie7-¡huid/</a> “Enlace en CSSLab a “Se viene IE7…”” </article> <article> <h1>Lo ví y me gustó 31</h1> Fri, 28 Aug 2009 13:51:06 +0000 #31 – 28 Agosto 2009 Todos revisados y publicados a través de [tus propias recomendaciones][1]. <a href="http://youwebland.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.abrandlincoln.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.dgfrancisco.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.bang83.com/" target="_blank" title="Abrir Sitio"></a> [1]: <a href="http://www.csslab.cl/envia-tu-sitio/">http://www.csslab.cl/envia-tu-sitio/</a> ““Envía tu Sitio” en CSSLab” </article> <article> <h1>K.I.S.S.</h1> Mon, 17 Aug 2009 21:29:40 +0000 Se puede definir a la simplicidad como ‘la ausencia de elementos innecesarios‘, ó ‘la esencia misma del elemento‘ lo que es complicado de leer y más difícil aún de lograr. Simplicidad no es aburrimiento, no es vacío, no es tener mucho espacio blanco; siquiera es un estilo de arte (no confundir con minimalismo, que también es un término mal manipulado). Simplicidad es una perspectiva de diseño y de información, un acercamiento que a menudo crea productos más usables y atractivos. Es casi imposible crear una interfaz que encaje con todos los usuarios; pero aún así, es importante entregarles una variedad de opciones que les permita ejecutarlas mismas tareas de diferentes maneras, y de la que más le acomode. Después de todo, nuestra misión es no hacerle perder su tiempo con nuestros errores. Y ¿cómo se comporta un usuario? No tengo una respuesta a esto; son muchas las variantes. Cada usuario es particular e impredecible en su comportamiento frente a un monitor, pero sí existen similitudes en lo que esperan cuando se les presenta una interfaz web: <ul> <li>Quiere estar entretenido: el usuario navega por internet buscando algo interesante para sí mismo: información, juegos, pornografía, etc. Para entretenerlo, necesitas captar la atención y dirigirla hacia el objetivo de tu proyecto web. Cuando se dicta una charla, se considera que el mensaje está compuesto por un 60% de lenguaje corporal, 10% el contenido y 30% el tono de la voz. Extrapolando esto a un proyecto web, podríamos llegar a consolidarlo en un 60% de diseño, 10% de contenido y 30% del estilo en que ese contenido está redactado. ¿Conclusión? Puedes entretener al usuario con sólo presentarle lo que busca con un lenguaje acorde, mínimo. <ul> <li>Quiere descubrir cosas: no necesariamente debes pensar que tus usuarios son estúpidos y que debes darle todo fácil; a ellos les gusta sentirse inteligentes y curiosear entre enlaces y conocer sus consecuencias; por algo las ventanas modales y los [efectos que nos ofrecen las librerías Javascript][1] se han hecho tan populares.</li> <li>No tiene tiempo de aprender cosas muy complicadas: bueno, tienes que hacer un balance entre no entregarles todo muy fácil, pero tampoco demasiado complicadas; siempre deberías guiar al usuario si le presentas nuevas interfaces o si tratas de innovar en alguna existente. Evita formularios complejos y con muchos pasos ya que la paciencia del usuario tiene límite.</li> </ul> </li> </ul> ![CSSLab.cl: simplicidad][2] Finalmentes ¿cómo obtener simplicidad? Claramente, no es un trabajo fácil. Sin embargo, existen ejercicios para llegar a ello: <ul> <li>Enfócate en conocer tus usuarios, la audiencia que esperas lograr con tu sitio web, construir para ellos y reducir elementos innecesarios teniéndolos en cuenta.</li> <li>Creando diseños, interfaces e interacciones que logren seducir a tus usuarios en un nivel sensorial (estimulando sus emociones de alguna manera), obtendrás visitantes satisfechos y seguro volverán por más.</li> <li>Consistencia, consistencia, consistencia. ¿Mencioné consistencia? ¡Consistencia! Agrupa elementos visualmente, haz que el comportamiento sea similar a lo que el usuario espera. Por ejemplo, si defines que el estilo de tus enlaces serán subrrayados (text-decoration: underline), haz que todos los enlaces sean iguales, y no hagas que algunos no tengan subrrayados o en itálica; sólo lograrás confundir a tus usuarios.</li> </ul> Existe una paradoja que define muy bien lo dificil de dominar esta disciplina: <blockquote> Es más simple crear una interfaz compleja porque es más complejo simplificarla. </blockquote> La simplicidad toma tiempo, pero tiene su valor en los resultados. K.I.S.S. es el acrónimo para Keep It Simple, Stupid, una manera cortés de decir Manténlo Simple, Estúpido. [1]: <a href="http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/">http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/</a> “Enlace en CSSLab a “JavaScript, Toolkit y demases”” [2]: <a href="http://www.csslab.cl/wp-content/uploads/2009/08/simplicidad1.png">http://www.csslab.cl/wp-content/uploads/2009/08/simplicidad1.png</a> “CSSLab.cl: simplicidad” </article> <article> <h1>jQuery browserSizr</h1> Wed, 22 Jul 2009 15:16:50 +0000 Your flexible fixed layout / Tu estructura fija, flexible <h5 id="selecciona-tu-idioma--select-your-language">Selecciona tu idioma / Select your language:</h5> <ul id="horizons_tab" class="idTabs"> <li> <a href="#english" title="Read in English">English</a> </li> <li> <a href="#espanol" title="Leer en Español">Español</a> </li> </ul> <div id="english">  <h3> EN </h3> Coding liquid layouts for your website can become a major problem due to many factors to be taken into when the user resizes the browser: images that doesn’t fit the width, <a href="http://www.csslab.cl/2007/09/10/textos_muy_largos_que_quiebran_nuestro_layout/" title="Link in CSSLab to "textos_muy_largos_que_quiebran_nuestro_layout"">texts wrapping as not expected</a>, columns breaking… not to mention that working with percentages in CSS is problematic among different browsers. With a fixed layout this should not happen, because you have more control over the structure itself and the <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/" title="Link in CSSLab to "Como Caja: el modelo"">box model</a> behaves as you expect if you use <a href="http://www.csslab.cl/2007/10/18/css-reseter/" title="Link in CSSLab to "CSS Reseter"">a good CSS reseter</a>. With jQuery browserSizr you’ll have more control over CSS styles when there is a significant change in browser size. It has 4 of the most common screens width: <ul> <li> smartphones (310px or less) </li> <li> less than 1024px (from 311px to 1023px) </li> <li> greater than 1024px (from 1024px to 1279px – including 1024px) </li> <li> greater than 1280px (from 1280px and higher – including 1280px) </li> </ul> Specifically, browserSizr detects the current width of your browser or it’s resize and injects a specific class when it is in the range you’ve activated. Through CSS and a bit of <a href="http://www.csslab.cl/2008/01/09/siendo-especfico/" title="Link in CSSlab to "Siendo Específico"">specificity</a>, you can define what happens when the browser is in each resolution: <pre><code class="language-css">#container { width: 960px; /* normal width */ font-size: 14px; } #container.lower1024 { width: 740px; /* width for less than 1024px */ font-size: 12px; /* smaller font-size */ } #container.over1280 { width: 1200px; /* width for over 1280px */ font-size: 16px; /* bigger font-size */ }</code></pre> <a href="http://www.csslab.cl/ejemplos/browserSizr/" class="verejemplo">See example</a> <h4> Configuration: </h4> <ul> <li> Include the jQuery library and this humble plugin: </li> </ul> <pre><code class="language-markup"><script src="jquery.js" type="text/javascript"></script> <script src="jquery.browserSizr.js" type="text/javascript"></script></code></pre> <ul> <li> Inicialize-it with the default parameters: </li> </ul> <pre><code class="language-javascript">$(function(){ $().browserSizr(); });</code></pre> <ul> <li> Or configure it as preferred </li> </ul> <pre><code class="language-javascript">$().browserSizr({ containerDiv: '#container', //containerDiv - value: any HTML tag or #id, default to #container debug: 'off', //debug- value: on | off, default to 'off' smartphones: 'off', //smartphones - value: on | off, default to 'off' lower1024: 'on', //lower1024 - value: on | off, default to 'on' over1024: 'on', //over1024 - value: on | off, default to 'on' over1280: 'off' //over1280 - value: on | off, default to 'off' });</code></pre> </div> <div id="espanol">  <h3> ES </h3> Crear estructuras líquidas para tu sitio web puede llegar a ser un gran problema debido a los muchos factores que se deben tomar en cuenta cuando el usuario escala el browser: imágenes que se pueden pasar del ancho, <a href="http://www.csslab.cl/2007/09/10/textos_muy_largos_que_quiebran_nuestro_layout/" title="Enlace en CSSLab a "textos_muy_largos_que_quiebran_nuestro_layout"">textos que no se cortarán como esperabas</a>, columnas que pueden llegar a quebrarse… sin hablar de que trabajar con porcentajes es problemático entre los diferentes navegadores. Con un layout fijo esto no debería ocurrir ya que tienes más control sobra la estructura misma y <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/" title="Enlace en CSSLab a "Como Caja: el modelo"">el modelo de caja</a> se comporta como esperas si haces uso de un <a href="http://www.csslab.cl/2007/10/18/css-reseter/" title="Enlace en CSSLab a "CSS Reseter"">buen reseter de estilos CSS</a>. Con jQuery browserSizr podrás tener más control sobre los estilos CSS cuando existe una variación significativa la dimensión del browser: en cuántos pixeles quedaría el tamaño de la tipografía del menú a 1280x1024px, o que las imágenes queden a 80% de su tamaño en resoluciones de 800x600px por ejemplo. Tienes los 4 anchos de pantallas más comunes: <ul> <li> smartphones (310px o menos) </li> <li> menor que 1024px (de 311px a 1023px) </li> <li> mayor que 1024px (de 1024px a 1279px – incluye 1024px) </li> <li> mayor que 1280px (de 1280px o más – incluye 1280px) </li> </ul> En específico, browserSizr detecta el actual ancho del navegador ó su redimensionado e inyecta una class específica cuando se encuentra en el rango que hayas activado. A través de CSS y un poco de <a href="http://www.csslab.cl/2008/01/09/siendo-especfico/" title="Enlace en CSSLab a "Siendo Específico"">especificidad</a>, puedes definir qué quieres que ocurra cuando el browser se encuentre en cada resolución: <pre><code class="language-css">#container { width: 960px; /* ancho normal del sitio web */ font-size: 14px; } #container.lower1024 { width: 740px; /* ancho para resoluciones menores que 1024px */ font-size: 12px; /* menor tamaño de fuente */ } #container.over1280 { width: 1200px; /* ancho para resoluciones mayores que 1280px */ font-size: 16px; /* mayor tamaño de fuente */ }</code></pre> <a href="http://www.csslab.cl/ejemplos/browserSizr/" class="verejemplo">Ver ejemplo</a> <h4> Configuración: </h4> <ul> <li> Incluye la librería jQuery y luego, este humilde plugin: </li> </ul> <pre><code class="language-markup"><script src="jquery.js" type="text/javascript"></script> <script src="jquery.browserSizr.js" type="text/javascript"></script></code></pre> <ul> <li> Inicialízalo con los parámetros por defecto: </li> </ul> <pre><code class="language-javascript">$(function(){ $().browserSizr(); });</code></pre> <ul> <li> O configúralo como más prefieras: </li> </ul> <pre><code class="language-javascript">$().browserSizr({ containerDiv: '#container', //containerDiv - id o etiqueta donde se inyectará la class debug: 'off', //debug - ventana debug on | off, por defecto off smartphones: 'off', //smartphones - valores: on | off, por defecto 'off' lower1024: 'on', // valores: on | off, por defecto 'on' over1024: 'on', //over1024 - valores: on | off, por defecto 'on' over1280: 'off' //over1280 - valores: on | off, por defecto 'off' });</code></pre> </div> [Bajar/Download plugin (.zip 1kb)][1]{.bajar} [Bajar/Download plugin+demos (.zip 22kb)][2]{.bajar} browserSizr logo by <a href="http://www.toledopasarin.cl" title="External link to "Juan Toledo Portfolio"" target="_blank">toledopasarin</a> Little extension as Jorge Sousa required, now it detects just the height of the browser window within 2 values: less than 600px and over 600px. Pequeña extensión como solicitada por Jorge Sousa, donde ahora detecta sólo el alto de la ventana dentro de 2 rangos: menor que 600px y mayor a 600px. [Ver Ejemplo Alto Ventana][3]{.verejemplo} [Bajar/Download plugin + demo (.zip 24kb)][4]{.bajar} [1]: <a href="http://www.csslab.cl/downloads/jQuery+browserSizr">http://www.csslab.cl/downloads/jQuery+browserSizr</a> “Enlace en CSSLab a “Bajar/Download browserSizr Plugin”” [2]: <a href="http://www.csslab.cl/wp-content/uploads/2009/07/browsersizr-08.zip">http://www.csslab.cl/wp-content/uploads/2009/07/browsersizr-08.zip</a> “Enlace en CSSLab a “Bajar/Download browserSizr Plugin+demos”” [3]: <a href="http://www.csslab.cl/ejemplos/browserSizr/browsersizr-081/">http://www.csslab.cl/ejemplos/browserSizr/browsersizr-081/</a> “Enlace en CSSLab a “Ver ejemplo browserSizr Height”” [4]: <a href="http://www.csslab.cl/downloads/jQuery+BrowserSizr+Extended">http://www.csslab.cl/downloads/jQuery+BrowserSizr+Extended</a> “Enlace en CSSLab a “Bajar/Download browserSizr Extended Height”” </article> <article> <h1>Mi lucha (contra IE6)</h1> Wed, 24 Jun 2009 20:44:57 +0000 Me he asombrado como, en los últimos 2 años, ha avanzado la conciencia colectiva en que es necesario progresar hacia una mejor web, y no quedarse estancados por culpa de un browser. Internet Explorer 6 ha sido realmente una limitación en todos los ámbitos: limita la creatividad tanto del diseñador, como del desarrollador de sitios web. ha sido frustrante escuchar (y decir) frases como: <blockquote style="text-align: center;"> ¡Ah, pero no es soportado por IE6! Mmm súper bueno, pero IE6 no lo permite… Mejor eso no, no se va a ver en IE6… </blockquote> Paralelo a esa conciencia de la que les mencionaba, han surgido corrientes más duras que mantienen proyectos que pretenden enterrar IE6 de la faz del mundo, y hasta le han dado fechas a su obituario. Mediante banners ó scripts (me incluyo con [killIE][1]), se pretende hacer notar al usuario de IE6 que hay mejores opciones; porque precisamente esa es la principal razón de porqué IE6 aún es un browser a considerar: la gran mayoría de sus usuarios no saben que existen otros, ya que fue el navegador por defecto que venía instalado en sus PC’s. Esa ignorancia nos ha afectado, y es nuestro deber hacerles ver que existen otras opciones mucho mejores, que pueden afectar su experiencia de navegación. ![Mi lucha contra IE6 - CSSLab.cl][2] Personalmente he tomado una desición y postura hace un poco más de 1 año respecto a este tema: Les explico a los clientes las razones, les doy los argumentos necesarios, pruebas, estudios, estadísticas a la fecha para justificar que <big>ya no ofrezco soporte para Internet Explorer 6</big>. ¿Locura, no? Pues me explico. <ul> <li>Ya no me limito para crear nuevas experiencias a través del diseño. Por ejemplo, utilizo PNG’s transparentes, aunque agrego un [PNGfix][3] por deferencia sólo para usuarios de ese browser.</li> <li>No me limito con las pseudo-class y [selectores avanzados][4]. los estilos degradarán bien, pero no como se verá en mejores browsers.</li> <li>Como he adquirido a través del tiempo la experiencia y la virtud de maquetar sitios cross-browser casi sin diferencias, no utilizo [hacks][5] ni [comentarios condicionales][6].</li> <li>Utilizo [librerías JS][7] para efectos varios, pero no puedo hacer que se comporte igual como se ve en Firefox ó Safari; IE6 simplemente no puede con algunos efectos y animaciones.</li> </ul> Como pueden haber entendido, el sitio se verá bien tanto en IE6 como en los browsers modernos (no hay esfuerzo extra en eso), pero no tan bien y no como quisiera; ése es el soporte que ya no ofrezco y esa es mi lucha por educar al cliente y al usuario de ello. Espero cada uno pueda dar lo suyo para que podamos evolucionar a mejores tecnologías, donde con menos esfuerzos en solucionar problemas podamos poner más energía en entregar satisfacciones. ¡[HTML5][8] se viene, le tengo fe! <h4 id="links">Links:</h4> <ul> <li><a href="http://www.stopie6.org/" title="Enlace externo a "Stop IE6 Campaign"" target="_blank">Stop IE6 Campaign</a></li> <li><a href="http://www.die6.co.uk/" title="Enlace externo a "DiE6"" target="_blank">DiE6</a></li> <li><a href="http://www.bringdownie6.com/" title="Enlace externo a "Bring Down IE 6"" target="_blank">Bring Down IE 6</a></li> <li><a href="http://www.end6.org/" title="Enlace externo a "End 6!"" target="_blank">End 6!</a></li> </ul> [1]: <a href="http://www.csslab.cl/2008/09/24/muerte-a-ie-nuevo-plugin/">http://www.csslab.cl/2008/09/24/muerte-a-ie-nuevo-plugin/</a> “Enlace en CSSLab a “Muerte a IE: nuevo plugin”” [2]: <a href="http://www.csslab.cl/wp-content/uploads/2009/06/downie.png">http://www.csslab.cl/wp-content/uploads/2009/06/downie.png</a> [3]: <a href="http://www.csslab.cl/2008/08/18/definitivo-pngs-transparentes-en-ie6/">http://www.csslab.cl/2008/08/18/definitivo-pngs-transparentes-en-ie6/</a> “Enlace en CSSLab a “Definitivo: PNG’s transparentes en IE6"” [4]: <a href="http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/">http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/</a> “Enlace en CSSLab a “Selectores avanzados de atributos”” [5]: <a href="http://www.csslab.cl/category/hacks/">http://www.csslab.cl/category/hacks/</a> “Enlace en CSSLab a “Categoría: Hacks”” [6]: <a href="http://www.csslab.cl/2007/08/10/conditional-comments-el-widget/">http://www.csslab.cl/2007/08/10/conditional-comments-el-widget/</a> “Enlace en CSSLab a “Conditional Comments: el widget”” [7]: <a href="http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/">http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/</a> “Enlace en CSSLab a “JavaScript, Toolkit y demases”” [8]: <a href="http://www.csslab.cl/2007/08/21/lo-que-se-viene-html-5/">http://www.csslab.cl/2007/08/21/lo-que-se-viene-html-5/</a> “Enlace en CSSLab a “Lo que se viene: HTML 5"” </article> <article> <h1>Mejor accesibilidad</h1> Wed, 10 Jun 2009 14:14:33 +0000 Ponerse en el lugar del usuario; es un principio básico que deberíamos adquirir si queremos que nuestro proyecto web tenga éxito no sólo para nuestros bolsillos, sino que perdure y tenga pregnancia en la [experiencia del usuario][1]. ¿Qué marcaría una diferencia? El diseño, obviamente es lo primero que encanta; contenido bien estructurado y ordenado, pensado hacia una mejor buscabilidad y encontrabilidad; funcionalidades útiles y no sólo efectistas, también. Pero insisto, ¿cómo lo llevamos aún más allá? <blockquote> La accesibilidad es la capacidad de acceso a la web y sus contenidos por todos los usuarios, independiente de la discapacidad física, intelectual o técnica que tengan. </blockquote> Si escribimos nuestro HTML con una semántica correcta y con el diseño separado en su propia hoja de estilos, ya estamos aportando a una mejor acccesibilidad permitiendo a los ciegos leer el contenido a través de un lector de pantalla, además de independizar el dispositivo sobre el cual será vista la web (teléfonos celulares, laptops, computadores de escritorio, etc.). Si tenemos el tamaño de los textos de una dimensión considerable y ojalá en una unidad relativa que sea independiente de la resolución del usuario, estaremos garantizando mejor accesibilidad a usuarios con problemas visuales. Ahora, si le damos la posibilidad al usuario de escojer el tamaño te fuente que más le acomode, mejor aún. Estas normas mínimas de accesibilidad pueden aumentarse con muy poco esfuerzo, y ahora me gustaría presentar uno que no es muy utilizado pero no por eso menos importante: el atributo accesskey. Con él, permitimos que el usuario navegue por enlaces sólo con el uso de teclas especificadas en el desarrollo del sitio. Su implementación es bastante rápida: <pre><code class="language-markup"><a href="index.html" accesskey="i">Inicio</a></code></pre> Así, permitimos que se pueda ir a la página de inicio no sólo haciendo click en el enlace, sino que utilizando la combinación <kbd>control+i</kbd> del teclado. Lamentablemente esta combinación es arbitraria por plataforma: <ul> <li>Chrome: Alt+Accesskey</li> <li>Firefox: Alt+Shift+Accesskey (Win) Ctrl+Accesskey (Mac)</li> <li>IE: Alt+Accesskey</li> <li>Opera: Shift+Esc+Accesskey</li> <li>Safari: Ctrl+Accesskey</li> </ul> Además, deberías indicarle a tus usuarios la tecla correspondiente al accesskey, y los [selectores avanzados de atributo][2] son una gran ayuda: <pre><code class="language-css">a:after { content: " [" attr(accesskey) "] "; }</code></pre> [Ver ejemplo][3]{.verejemplo} [1]: <a href="http://www.csslab.cl/2008/11/20/nuestro-verdadero-cliente/">http://www.csslab.cl/2008/11/20/nuestro-verdadero-cliente/</a> “Enlace en CSSLab a “Nuestro verdadero cliente”” [2]: <a href="http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/">http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/</a> “Enlace en CSSLab a “Selectores avanzados de atributos”” [3]: <a href="http://www.csslab.cl/ejemplos/accesskey">http://www.csslab.cl/ejemplos/accesskey</a> “Enlace en CSSLab a “Ejemplo Accesskey”” </article> <article> <h1>Lo ví y me gustó 30</h1> Mon, 01 Jun 2009 14:53:31 +0000 #30 – 01 Junio 2009 <a href="http://estebanmunoz.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://socialsnack.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.turamera.cl/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>jQuery Blox</h1> Mon, 25 May 2009 22:14:15 +0000 Una nueva manera de mostrar más información / A new way to show more info <h5 id="selecciona-tu-idioma--select-your-language">Selecciona tu idioma / Select your language:</h5> <ul id="horizons_tab" class="idTabs"> <li> <a href="#espanol" title="Leer en Español" class="">Español</a> </li> <li> <a href="#english" title="Read in English" class=""> English </a> </li> </ul> <div id="espanol">  <h3> ES </h3> Con jQuery Blox puedes desplegar información de una manera diferente, y con una fácil y rápida configuración. Basta con que armes tu HTML siguiendo un simple patrón de bloques, y definirle al plugin los nombres de los elementos que estás construyendo (o mantener los pre-configurados); Blox se encarga de crear una mayor interacción de tu información hacia el usuario. <a href="http://www.csslab.cl/ejemplos/blox/blox_demo1.html" class="verejemplo" title="Enlace en CSSLab a "Demo 1"">Ver Demo 1</a> Blox ofrece 3 estados: <ol> <li> Normal: cuando el usuario no interviene con la caja HTML que contiene los bloques. </li> <li> Hover: cuando el mouse está sobre alguna de las cajas, por defecto Blox hace las otras semi-transparentes. </li> <li> Click: cuando se hace click a alguna caja, ésta se amplía animándose hasta cubrir el total de la caja contenedora por sobre las demás y muestra la información anexa a esa caja. </li> </ol> El uso de Blox no debería limitar la creatividad de quien la vaya a usar, pero es necesario conocer y mantener ciertas reglas para su correcto y total funcionamiento, principalmente de estructura HTML y de estilos CSS: <h4> Estructura HTML </h4> Primero necesitas una caja que contenga las demás cajas; por defecto Blox la define con el id blox. Esta caja contenedora #blox es la que soportará a las demás cajas, las que Blox denomina por defecto con una class blox_content. Esta caja .blox_content es la que tiene 2 importantes funciones: soporta al contenido que estará oculto en el primer estado, y a una tercera caja llamada .blox_box que es la gatillante de toda la interacción de Blox. El HTML básicamente debe ser como la siguiente estructura: <pre class="language-markup"><code><div id="blox"> /* un contenedor */ <div class="blox_content" id="box_1"> /* varias cajas de contenido */ <div class="blox_box"> /* caja que soporta el click */ Box 1 </div> Contenido desplegado cuando Box 1 es clickeado.<a href="#" class="blox_close">Cerrar Bloque</a> /* contenido oculto pero que se muestra al click en la caja anterior */ </div> /* otras cajas con el mismo patron */ </div></code></pre> <h4> Estilo CSS </h4> La magia está en el uso de posición absoluta para que las cajas se muevan con libertad y fluidez. Para que las cajas se comporten así, deben tener un estilo específico. La que contiene a todas las cajas, #blox, debe tener un alto fijo, un ancho fijo y posición relativa ya que será quien soporte a las cajas menores .blox_content, las que tienen posición absoluta, alto fijo y ancho fijo. Cada una de las cajas .blox_content, deberían tener ubicaciones diferentes mediante id único, respecto a #blox utilizando las propiedades left y top. La tercera caja .blox_box también debería tener un ancho y alto fijo, seguramente el mismo que su caja padre .blox_content, y para el resto de los elementos tienes libertad total de hacer lo que quieras con su estilo. Finalmente, el CSS básico es el siguiente: <pre class="language-css"><code>#blox { width: 400px; height: 400px; position: relative; } .blox_content { width: 200px; height: 400px; position: absolute; } #box_1 { top: 0; left: 0; } #box_2 { top: 0; left: 200px; } /* asi con cada una de las otras cajas */ .blox_box { width: 200px; height: 400px; }</code></pre> <h4> Configuración </h4> Por defecto Blox viene pre-configurado de fábrica, y su programación permite que alteres los siguientes parámetros: <ul> <li> container: id de la caja contenedora, por defecto #blox </li> <li> content: class de las cajas con contenido, por defecto .blox_content </li> <li> box: class de la caja que inicia la secuencia para mostrar el contenido, por defecto .blox_box </li> <li> close: class del link o botón que cierra caja caja desplegada, por defecto .blox_close </li> <li> transparency: [yes/no]¿requieres transparencia? por defecto yes </li> <li> fadein: nivel de transparencia (de 0 a1) de las cajas al mouseover, por defecto 0.2 </li> <li> fadeout: nivel de transparencia (de 0 a1) de las cajas al mouseout, por defecto 1 </li> <li> animation: [yes/no]¿requieres animación? por defecto yes </li> <li> timein: tiempo en ms en que cada caja se demora en abrir, por defecto 100 </li> <li> timeout: tiempo en ms en que cada caja se demora en cerrar, por defecto 200 </li> <li> direction: [lefty/righty] hacia donde se abrirá cada caja, por defecto a la izquierda lefty </li> </ul> Para utilizarlo con estos valores por defecto, sólo debes seguir 2 pasos básicos: <ol> <li> Agregar tu librería de jQuery favorita y este humilde plugin: <pre class="language-markup"><code><script src="jquery-1.3.1.min.js" type="text/javascript"></script> <script src="jqueryblox-v0.9.js" type="text/javascript"></script></code></pre> </li> <pre><code><li> Activarlo: <pre class="language-markup"><code><script type="text/javascript"> $(function(){ $().blox(); }); </code></pre> </script></code></pre> </li> </ol> Si quieres configurarlo según tus necesidades, basta ir modificando los parámetros como te sean necesarios: <pre class="language-markup"><code><script type="text/javascript"> $(function(){ $().blox({ container: '#contenedor_blox', close: '.boton_cierra', direction: 'righty', fadein: 0.6 }); }); </script></code></pre> <a href="http://www.csslab.cl/ejemplos/blox/blox_demo2.html" class="verejemplo" title="Enlace en CSSLab a "Demo 2"">Ver Demo 2</a> <a href="http://www.csslab.cl/ejemplos/blox/blox_demo3.html" class="verejemplo" title="Enlace en CSSLab a "Demo 3"">Ver Demo 3</a> </div>  <div id="english">  <h3> EN </h3> With jQuery Blox you can display information on a whole new way with a quick and easy setup. Just write yout HTML in a simple block pattern, and tell the plugin your element names (or maintain the pre-configured ones); Blox will display your information with a new interaction for your user. <a href="http://www.csslab.cl/ejemplos/blox/blox_demo1.html" class="verejemplo" title="Link in CSSLab to "Demo 1"">See Demo 1</a> Blox offers 3 states: <ol> <li> Normal: when the user does not interfere with the box containing the HTML blocks. </li> <li> Hover: when the mouse is over one of the boxes, by default Blox makes the others semi-transparent. </li> <li> Click: when you click on any box, it will animate its expansion to cover the total of the container above all other blocks, to show the information attached to that block. </li> </ol> Using Blox should not limit the creativity of who will use it, but it needs to maintain certain rules for their correct and full operation, mainly HTML strucuture and CSS styles: <h4> HTML Structure </h4> First you’ll need a box containing all other boxes, by default Blox calls it with the id blox. This container #blox will support all the blocks which Blox names with the class box_content. This block .box_content have 2 major functions: support the content hidden in the first state, and contains a third block called with the class .blox_box which is the one that fires the Blox interaction, expanding and moving the boxes to display the hidden information. The HTML should be basically as follows: <pre class="language-markup"><code><div id="blox"> /* a container */ <div class="blox_content" id="box_1"> /* many content blocks */ <div class="blox_box"> /* box that fires the interaction */ Box 1 </div> Content displayed when Box 1 is clicked, above Box 2.<a href="#" class="blox_close">Close Box</a> /* hidden content displayed at .blox_box click */ </div> /* other boxes with the same pattern */ </div></code></pre> <h4> CSS Style </h4> The magic is in the use of absolutely positioned blocks to move them freely and smoothly For the blocks to behave like we want, they must have a specific style. The box that contains all other blocks #blox must have fixed height and width and relative position to support the smaller boxes named .blox_content which must have fixed height and width as well but absolute positioned. Each one of this boxes .blox_content should have different placements, givven through an unique #id using the properties left and top. The third box .blox_box should also have a fixed width and height, probably the same as its parent .blox_content. For the rest of the elements you have total freedom to do whatever you want with their style. Finally, the basic CSS is as follows: <pre class="language-css"><code>#blox { width: 400px; height: 400px; position: relative; } .blox_content { width: 200px; height: 400px; position: absolute; } #box_1 { top: 0; left: 0; } #box_2 { top: 0; left: 200px; } /* like this for each of other boxes */ .blox_box { width: 200px; height: 400px; }</code></pre> <h4> Configuration </h4> By default, Blox comes preconfigured from the factory, and its programming allows you to alter the following parameters: <ul> <li> container: container box id, default to #blox </li> <li> content: class of each content box, default to .blox_content </li> <li> box: class of the box that fires the content display, default to .blox_box </li> <li> close: class for the link (button) that closes the content box, default to .blox_close </li> <li> transparency: [yes/no] do you want transparency on hover? default to yes </li> <li> fadein: transparency level (from 0 to 1) when you mouseover a box, default to 0.2 </li> <li> fadeout: transparency level (from 0 to 1) when you mouseout a box, default to 1 </li> <li> animation: [yes/no] do you want the boxes to animate? default to yes </li> <li> timein: time in ms that each box takes to display the content, default to 100 </li> <li> timeout: time in ms that each box takes to hide the content, default to 200 </li> <li> direction: [lefty/righty] which direction each box is opened, default to left lefty </li> </ul> To use it with the default values, just follow this 2 simple steps: <ol> <li> Add your favorite jQuery library and this humble plugin: <pre class="language-markup"><code><script src="jquery-1.3.1.min.js" type="text/javascript"></script> <script src="jqueryblox-v0.9.js" type="text/javascript"></script></code></pre> </li> <pre><code><li> Activate it: <pre class="language-markup"><code><script type="text/javascript"> $(function(){ $().blox(); }); </code></pre> </script></code></pre> </li> </ol> If you want to customize it to suit your needs, just change the necessary parameters: <pre class="language-markup"><code> <script type="text/javascript"> $(function(){ $().blox({ container: '#my_boxes, close: '.closeboxes, direction: 'righty', fadein: 0.6 }); }); </script></code></pre> <a href="http://www.csslab.cl/ejemplos/blox/blox_demo2.html" class="verejemplo" title="Link in CSSLab to "Demo 2"">See Demo 2</a> <a href="http://www.csslab.cl/ejemplos/blox/blox_demo3.html" class="verejemplo" title="Link in CSSLab to "Demo 3"">See Demo 3</a> </div>  <h4 id="baja-el-plugin--get-the-plugin">Baja el plugin / Get the plugin</h4> [Bajar/Download plugin (.zip 1kb)][1]{.bajar} [Bajar/Download plugin+demos (.zip 220kb)][2]{.bajar} Blox logo by <a href="http://www.youfeelme.biz/" title="External link to "Sebastian Cortes Portfolio"" target="_blank">youfeelme.biz</a> [1]: <a href="http://www.csslab.cl/downloads/jQuery+Blox">http://www.csslab.cl/downloads/jQuery+Blox</a> “Enlace en CSSLab a “Bajar/Download plugin”” [2]: <a href="http://www.csslab.cl/ejemplos/blox/jQueryBlox.0.9+demos.zip">http://www.csslab.cl/ejemplos/blox/jQueryBlox.0.9+demos.zip</a> “Enlace en CSSLab a “Bajar/Download plugin+demos”” </article> <article> <h1>Entendiendo vertical-align</h1> Mon, 18 May 2009 16:09:45 +0000 Como muchos deben ya saber, es un tremendo lío alinear verticalmente un elemento HTML mediante CSS estándar; de hecho una de las razones de que aún personas siguen utilizando tablas para estructurar sitios: precisamente porque las celdas hacen este alineado horizontal y vertical tan fácil, mediante los atributos align="" y valign="". Pero utilizando web standards es otra cosa, una dimensión aún perturbante y siendo franco, algo complicada de entender y llevar a la práctica. CSS tiene una ‘obscura’ propiedad llamada vertical-align. Lo obscuro se debe a que es confuso su entendimiento, y por ende su uso. Para ayudar a aclarar eso, este artículo lo atacará por dos ámbitos más que necesarios: alineado de elementos de formulario y de imágenes. Vertical-align tiene uso principalmente en etiquetas que son por esencia de tipo inline. Si tratas de utilizar esta propiedad en un <div> por ejemplo, o en un quizás es por eso que te hayas frustrado ya que estos elementos son de tipo block. Cuando vertical-align es definido para elementos inline, se comporta como el antiguo y obsoleto atributo valign="". Tomando este principio, su uso en imágenes junto a texto se ven resultados concretos: [Ver ejemplo 1][1]{.verejemplo} Los valores de vertical-align son: <ul> <li>baseline: valor por defecto, el elemento es ubicado en la base del elemento padre. </li> <li>sub: alinea el elemento como si fuera subescrito (). </li> <li>super: alinea el elemento como si fuera sobrescrito (). </li> <li>top: la parte superior del elemento es alineado con la parte superior del elemento en la misma línea.</li> <li>text-top: la parte superior del elemento es alineada con la parte superior del padre de los elementos de texto. </li> <li>middle: el más interesante; el elemento es ubicado en la mitad del elemento padre. </li> <li>bottom: también interesante; la parte inferior del elemento es alineado con la parte más baja de la línea.</li> <li>text-bottom: la parte inferior del elemento es alineada con la parte inferior del padre de los elementos de texto. </li> <li>%: alínea el elemento en valores porcentuales de la propiedad line-height (se permiten valores negativos).</li> </ul> Otro importante uso de esta propiedad es con etiquetas de formulario, principalmente cuando queremos alinear los nombres de los campos (generalmente envueltos en <label></label>) a los campos de formulario. En el siguiente ejemplo muestro sus usos con campo de tipo texto: [Ver ejemplo 2][2]{.verejemplo} Como décadas pasadas, esta propiedad también puede ser utilizada en reemplazo del atributo para celdas de tablas, bajo los mismos valores. Como las celdas por defecto tienen vertical-align: middle definidos, puedes utilizar los otros valores para lograr lo que necesites. ¿Milagrosa? Bueno, suena bien hasta ahora pero está lejos de ser la solución definitiva, ya que IE6 e IE7 soporta esta propiedad a su manera, como siempre. ![vertical-align entre browsers][3] <h4 id="links">Links</h4> <ul> <li><a href="http://www.ibloomstudios.com/articles/vertical-align_misuse/" title="Enlace externo a "Vertical-Align Misuse @ iBloomStudios"" target="_blank">Vertical-Align Misuse @ iBloomStudios</a></li> <li><a href="http://www.w3schools.com/Css/pr_pos_vertical-align.asp" title="Enlace externo a "CSS vertical-align Property @ W3Schools"" target="_blank">CSS vertical-align Property @ W3Schools</a></li> <li><a href="http://www.webdevout.net/browser-support-css" title="Enlace externo a "Web Browser CSS Support Table @ WebDevout"" target="_blank">Web Browser CSS Support Table @ WebDevout</a></li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/verticalalign/img.html">http://www.csslab.cl/ejemplos/verticalalign/img.html</a> “Enlace en CSSLab a “Ver ejemplo 1"” [2]: <a href="http://www.csslab.cl/ejemplos/verticalalign/form.html">http://www.csslab.cl/ejemplos/verticalalign/form.html</a> “Enlace en CSSLab a “Ver ejemplo 2"” [3]: <a href="http://www.csslab.cl/wp-content/uploads/2009/05/verticalalign-browsers.png">http://www.csslab.cl/wp-content/uploads/2009/05/verticalalign-browsers.png</a> </article> <article> <h1>Psicología Cognitiva</h1> Wed, 22 Apr 2009 19:49:58 +0000 Entender nuestros actuales usuarios -y los potenciales que pretendemos tener- es básico para una buena planificación de un proyecto web. Ir más alla, conocer cómo se comporta la mente de una persona ante el diseño y funcionamiento del sitio web es importante para el éxito de ese proyecto. La psicología cognitiva hace precisamente eso: estudia los diversos procesos cognitivos como la resolución de problemas, el razonamiento, la percepción y toma de desiciones, entre otras cosas. Su aplicación al mundo digital data de los inicios del desarrollo informático moderno (1970 hacia adelante), donde se aplicaba en el <a href="http://www.parc.com/" title="Enlace externo a "Xerox Palo Alto Research Center"" target="_blank">PARC de Xerox</a> en tratar de entender el impacto de las personas el uso de una interfaz nueva, como lo era en la época el desarrollo de la primera GUI (Interfaz Gráfica de Usuario). OK, es importante, pero: ¿Porqué es tan importante?- se preguntarán. Porque nuestro oficio está estrechamente relacionado con la interacción humano-computador (HCI), y de esa interacción surgen varios dilemas con los cuales no estamos acostumbrados por naturaleza. Piensen que estamos interactuando con una máquina, y esa máquina responde a nuestros estímulos (mover un mouse por ejemplo gatilla que el cursor se mueve por la pantalla). Pero esa máquina nos entrega una respuesta ‘inteligente’ a nuestro estímulo, lo que puede interpretarse como una reacción natural, pero no lo es ya que fue programada por alguien similar a nosotros para ello. Esa reacción fue adquirida por nosotros a través del tiempo, y la actual generación joven tiene a Internet y a estas interfaces ya propias, y no conocen otro mundo sin ellas. Actualmente la psicología cognitiva es utilizada para entender y predecir el comportamiento de los usuarios ante un rediseño o una innovación. En un sitio web donde su rediseño puede afectar a miles de usuarios, esta rama de la psicología es fundamental. Aunque las desiciones y conclusiones que se tomen de aquí no son absolutas -nunca lo son cuando se estudia al ser humano; somo seres impredecibles- sí es posible amortiguar errores y que éste no sea catastrófico o hacer perder millones en inversión. Recuerdo el caso de Yahoo! cuando rediseñó su actual web, algo que aún le repercute y del cual Google está muy agradecido, y el más reciente rediseño de Facebook queriendo acercarse más al modelo de Twitter, causando un rechazo importante de sus usuarios expresado en su misma plataforma. Pero no basta con saber cómo piensa el usuario que se enfrenta a una interfaz; también debes conocer a fondo las herramientas disponibles para sacar el máximo provecho a la información y a la interacción del usuario con ella. No es lo mismo una galería de fotos normal que una que utiliza alguna caja modal para mostrar la imagen en mayor calidad, pero ¿realmente la necesitas? ¿y la accesibilidad? ¿qué sucede si el usuario tiene javascript deshabilitado? Estas son preguntas mínimas que deberías hacerte si quieres poner al usuario frente a tu cliente. … continuará </article> <article> <h1>Horror #4</h1> Mon, 06 Apr 2009 22:58:27 +0000 <title>Título del Sitio – <DIV>Subsección</DIV></title> Esta es una joya… nunca, pero NUNCA había visto un <div> dentro de la etiqueta <title>… ¡Al parecer pretendían implementar los estándares desde el comienzo del código HTML! Quedé anonadado… </article> <article> <h1>Enlaces vacíos y semánticos</h1> Mon, 06 Apr 2009 14:40:54 +0000 Si desayunas [jQuery][1], almuerzas [Mootools][2] y cenas Spry entonces seguro te gusta manipular eventos utilizando elementos del [DOM][3] ya generados. Deben saber que la etiqueta correcta para click (y doubleclick) es <a> y solamente <a>; todas las demás tienen otros muchos usos pero la única que semánticamente está habilitada para desencadenar una acción mediante un click es… ¡<a>! Bien eso era lo primero que quería dejar claro; he visto demasiados <li>, <h1>, incluso clickeables. Ahora, a lo que va este artículo es cómo la semántica se está dejando atrás por la comodidad de escribir eventos mediante JS. <a href="http://twitter.com/csslab/status/1397191676" title="Enlace externo a "Twit de CSSLab"" target="_blank">Me culpo también por caer en lo mismo</a>, pero me interesa ahora mostrarles la mejor solución que he encontrado al respecto. Pongámonos en un caso de ejemplo. Supongamos que se agrega una función para ejecutar un [slideToggle][4] a un enlace; por lo que he visto generalmente esto se hace de 2 maneras: <pre><code class="language-markup"><a href="#" id="ejecuta_toggle">Ejecutar slideToggle</a></code></pre> Cumples con tener un href funcional (no vacío) pero puede hacer que al hacer click la página haga scroll hasta el inicio dado que tienes un ancla vacío en el href y quizás tengas que dar un return false al final de la función del slideToggle, ó <pre><code class="language-markup"><a href="javascript:void(0)" id="ejecuta_toggle">Ejecutar slideToggle</a></code></pre> Que hace que el browser no ejecute el enlace y no se salga de la misma página. Enfin, son 2 métodos similares y que cumplen con el objetivo primario de ejecutar algun comportamiento mediante Javascript a través de un hyperlink. Pero nuevamente mi pregunta: ¿Qué sucede con la semántica? ¿Cómo le digo al buscador, indexador, robot que ese <a> no es un enlace realmente? ¿Que lo estoy disfrazando para cumplir con mis objetivos? Complicada pregunta y simple respuesta. Con esta inquitud espero que puedan ir más allá en sus desarrollos; recuerden que un simple click puede desencadenar muchos más eventos que los que tienen planificado para él, eventos que benefician a sus usuarios mediante indexaciones más precisas. <h4 id="la-solucioacuten">La solución</h4> Entreguen una ancla semántica al hyperlink, pero una ancla sobre sí mismo. Ejemplifico con lo mismo que he estado utilizando: <pre><code class="language-markup"><a href="#ejecuta_toggle" name="ejecuta_toggle" id="ejecuta_toggle">Ejecutar slideToggle</a></code></pre> Con este método conservan la semántica indicando a través del atributo name qué hará ese mismo enlace y al mismo tiempo evitan el movimiento de scroll de la página. [1]: <a href="http://www.csslab.cl/tag/jquery/">http://www.csslab.cl/tag/jquery/</a> “Enlace en CSSLab a “tags: jQuery”” [2]: <a href="http://www.csslab.cl/tag/mootools/">http://www.csslab.cl/tag/mootools/</a> “Enlace en CSSLab a “tags: Mootools”” [3]: <a href="http://www.csslab.cl/2008/04/07/iniciandose-en-el-dom/">http://www.csslab.cl/2008/04/07/iniciandose-en-el-dom/</a> “Enlace en CSSLab a “Iniciándose en el DOM”” [4]: <a href="http://www.csslab.cl/2007/09/25/convirtiendo-listas-en-arboles/">http://www.csslab.cl/2007/09/25/convirtiendo-listas-en-arboles/</a> “Enlace en CSSLab a “Convirtiendo Listas en Árboles”” </article> <article> <h1>Esa maldita Web 2.0</h1> Mon, 16 Mar 2009 23:26:59 +0000 Está en todas partes. Se lee hasta en el diario y se escucha en las noticias. Pero nadie sabe realmente de que se trata, sólo saben que se vende bien. Sí, hablo de la Web 2.0 que en el hemisferio norte va en decaída, pero como siempre aquí lejos en el sur la está reventando. Hace mucho que debería haber escrito algo sobre este tema, pero esta espera ha sido mejor ya que he podido profundizar mi opinión al respecto. La última vez que recuerdo que un término inventado se haya tergiversado tanto y aún así puesto tan de moda fue comenzando el milenio, con [AJAX][1] que aún vende como pan caliente. Pero ahora me he llegado a asustar del mal entendido que abunda en el sector, y cómo gente relacionada con el marketing venden productos y aplicaciones como 2.0 y que no tienen nada que ver con el concepto original del mismo. Mucha de la culpa la tenemos nosotros quienes nunca definimos bien su significado ó los alcances del concepto. Primero, me gustaría listar algunas ideas de lo que NO es la Web 2.0: <ul> <li>Web 2.0 NO es AJAX, jQuery, Mootools, script.aculo.us ó Dojo; estos elementos soportan una nueva manera de mostrar el contenido de la Web, no la hacen</li> <li>Web 2.0 NO es RSS, pero sí cómo ésta ayuda a la llegada de la información más rápida y limpia al usuario que la pide</li> <li>Web 2.0 NO se trata de tecnología</li> <li>Web 2.0 NO se trata de programación</li> <li>Web 2.0 NO son elementos gradientes, que parezcan plástico o con reflejos; por lo tanto NO se trata de diseño</li> <li>Web 2.0 NO es Orkut, Facebook, MySpace, MSN y demases. Medios sociales han existido desde las BBS donde se compartían archivos; ICQ, IRC…</li> </ul> Este término fue acuñado por Tim O’Reilly y su equipo sólo para denonimar al conjunto de charlas (<a href="http://www.web2con.com/" title="Enlace externo a "Web 2.0 Summit"" target="_blank">Web 2.0 Conference</a>) que estaban dando a inicios del 2004; por lo tanto se ha concluído que es un término meramente comercial para fundar la web, para ayudar a que la internet fuera nuevamente rentable luego del burbujazo de las .com del 2001. Pero quiero ir más allá de eso. Me gustaría mostrar y explicar el fundamento real de la era anterior, la denominada Web 1.0 y la en superación, Web 2.0 para una pronta Web 3.0. <h3 id="es-todo-sobre-informacioacuten">Es todo sobre información</h3> <blockquote> Compartir información, aumentar el conocimiento a través del colectivismo, agregar valor singular mediante acciones comunitarias. Eso resume lo que significa realmente Web 2.0. Se trata de aumentar el conocimiento, el valor real de la información a través de lo que cada uno de nosotros, usuarios, podemos aportar. </blockquote> Es el trabajo que se ha hecho con Wikipedia, la controvertida enciclopedia más completa y actualizada en la historia de la humanidad. Es lo que cada uno de los usuarios aportan para aumentar esta información, mediante la experticia de cada uno de ellos. Es lo que se hace con del.icio.us, donde cada uno aporta lo que le interesa mediante links y se comparte a través de las etiquetas (tags)que se agregan a cada una de ellas. Ya no tienes tus bookmarks para tí sólo en tu browser; ahora los compartes para aumentar el conocimiento colectivo a través de tus intereses. Son los comentarios de los weblogs, donde se construyen contenidos mucho más interesantes a partir de las opiniones de los lectores (muchas veces me entretengo más leyendo los comentarios que los propios artículos). Es dejar que la web la construya el usuario, y no el editor frívolo detrás de una pantalla y que mediante el teclado ingresa texto que es inequívoco e irrestricto, lo que sería una definición simplificada de Web 1.0. Ya por el otro lado, tenemos la hipotética Web 3.0, ó Web Semántica, donde la información es procesada mediante metadatos por máquinas (webservices) que entienden y satisfacen los requerimientos de los usuarios y de otras máquinas que usan contenido web; deriva de la visión romántica de Tim Berners-Lee de una web universal de intercambio de información, datos y conocimiento. Pero nuevamente, son ideales que poco a poco van tomando forma. Por supuesto que el tema da para mucho más, pero con esto dejo zanjado las ideas que se están malinterpretando en el medio. Finalmente cada uno es quien los maneja como quiere, pero cada uno también es responsable de lo que crea. Y todos sabemos lo que sucede cuándo se especula mucho sin argumentos que lo fundamenten… los cimientos terminan por ceder. <h4 id="links">Links:</h4> <ul> <li><a href="http://radar.oreilly.com/archives/2005/08/not-20.html" title="Enlace externo a "Not 2.0?"" target="_blank">Not 2.0?</a></li> <li><a href="http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html" title="Enlace externo a "What Is Web 2.0"" target="_blank">What Is Web 2.0</a></li> <li><a href="http://en.wikipedia.org/wiki/Semantic_Web" title="Enlace externo a "Semantic Web"" target="_blank">Semantic Web</a></li> </ul> [1]: <a href="http://www.csslab.cl/category/ajax/">http://www.csslab.cl/category/ajax/</a> “Enlace en CSSLab a “Articulos para categoria AJAX”” </article> <article> <h1>Tip Precoz 4: input type=»search»</h1> Fri, 06 Mar 2009 22:59:46 +0000 Este tip es bastante específico para usuarios del browser Safari; desde su versión 2, Apple incorporó un ‘envoltorio’ que reemplaza los <input /> que tengan como atributo type=“search”, cambiando el campo de <input /> normal que conocemos, cuadrado con una sombra interior, por el elegante que tiene Apple dentro de su interfaz Mac OSX. Funciona en Safari tanto para Mac como para Windows; en otros browsers degrada graciosamente con el input normal que esperamos: <pre class="language-markup"><code><input type="search" /></code></pre> [Ver ejemplo][1]{.verejemplo} Como este nuevo valor es arbitrario no valida por la W3C, pero no deja de ser interesante. [1]: <a href="http://www.csslab.cl/ejemplos/input_search.html">http://www.csslab.cl/ejemplos/input_search.html</a> “Enlace en CSSLab a “input type=search”” </article> <article> <h1>Tip Precoz 3: RGBa</h1> Thu, 26 Feb 2009 18:34:07 +0000 Como debes saber, existe más de una manera de declarar colores en CSS: <ul> <li>Nombres (websafe): por 17 colores en inglés : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white y yellow (actualmente los browsers modernos soportan muchos más).</li> <li>Sistema (no lo recomiendo): por colores del sistema operativo que esté utilizando el usuario del sitio: ActiveBorder, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, HighlightText, InactiveBorder, InfoBackground, InfoText, Menu, MenuText, Scrollbar, Window, WindowFrame y WindowText.</li> <li>RGB Hexadecimal: quizás el más utilizado, en el cual cada color se mezcla según 16 símbolos (de 0 a 9 y de la A a la F); por ejemplo el rojo es: #FF0000.</li> <li>RGB Decimal: se indica qué cantidad de Rojo, Verde y Azul se debe mezclar en una escala de 0 a 256 tonos cada uno; en este caso el rojo seria rgb(255,0,0).</li> <li>RGB Porcentual (poco preciso): otra forma de expresar colores en RGB pero en forma porcentual; rojo es rgb(100%,0%,0%).</li> </ul> Pero con CSS3 existe una nueva e interesante manera: <ul> <li>RGBa: al igual que en la forma RGB Decimal anterior, se agrega un valor al final: el canal alpha de opacidad, en escala de 0 a 1. Lo interesante de este método es que al contrario de opacity{}, la transparencia la verás sólo al color y no a todo el elemento, por lo tanto esta propiedad no se hereda. Su modo de uso es de la siguiente manera:</li> </ul> <pre><code class="language-css">selector { background: rgba(255,0,0,0.3); color: rgba(200,120,60,0.6); border: 3px solid rgba(10,250,70,0.5); }</code></pre> En el siguiente ejemplo verás la diferencia con una opacidad aplicada mediante RGBa y mediante opacity{}. [Ver ejemplo][1]{.verejemplo} Por supuesto al ser una propiedad CSS3, en estos momentos sólo es soportada por Safari 3+ y Firefox 3, pero ya comencé a agregar funcionalidades a los sitios en que sólo son vistos si navegas con estos browsers; si usas IE no tienes tan buena experiencia visitándolos y es mi manera de convencer al usuario de que se actualice. [1]: <a href="http://www.csslab.cl/ejemplos/rgba/rgba.html">http://www.csslab.cl/ejemplos/rgba/rgba.html</a> “Enlace a ejemplo “Tip Precoz 3: RBGa”” </article> <article> <h1>Lo ví y me gustó 29</h1> Wed, 25 Feb 2009 14:48:51 +0000 #29 – 25 Febrero 2009 <a href="http://www.little-catwalk.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.xiiivii.com/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Mis bookmarklets</h1> Fri, 20 Feb 2009 16:12:40 +0000 Los bookmarklets son pequeñas aplicaciones Javascript contenidas dentro de una URL en una página web, de la siguiente forma: <pre class="codehtml"><a href="javascript:function(laQueSea){};">Bookmarklet La Que Sea</a></pre> La idea es que sean ejecutada mediante el click del enlace, y lo que usualmente se usa es guardarlos mediante bookmarks en tu browser; así puedes tenerlos a mano siempre que los necesites. Como están escritas en Javascript, puedes hacer modificaciones a cualquier elemento de DOM dentro de la página: cambiar tamaño de fuentes, colores, extraer datos de la página (links, imágenes, texto), enviar datos para validación o traducción entre muchas otras cosas. Personalmente me son bastante útiles al momento de desarrollas mis proyectos web; tengo algunos de frecuente uso y quisiera compartirlos por si ayudan a más de alguno en los excelentes trabajos que seguro hacen. Para utilizarlos, lo mejor es hacer click en el enlace y arrastrarlo a tu barra de Bookmarks como se ejemplifica en la siguiente imagen: <h4 class="bookmarklet" id="xray1-smallclick-y-arrastrasmall">[XRay][1] click y arrastra</h4> Permite visualizar las propiedades DOM del elemento al seleccionarlos: selector, ID, CLASS, herencia y estilos CSS asociados. <h4 class="bookmarklet" id="design2-smallclick-y-arrastrasmall">[Design][2] click y arrastra</h4> Permite visualizar la grilla utilizada en la construcción de la página, medidas y alineamiento entre otras cualidades. <h4 class="bookmarklet" id="8002156003-10242157684-128021510245-160021512006-smallclick-y-arrastra-cada-unosmall">[800×600][3] [1024×768][4] [1280×1024][5] [1600×1200][6] click y arrastra cada uno</h4> Modifica el tamaño de la ventana de tu browser a alguna de esas medidas estándar. <h4 class="bookmarklet" id="mri7-smallclick-y-arrastrasmall">[MRI][7] click y arrastra</h4> Muestra y enmarca cualquier selector que queramos ver de una página web. <h4 class="bookmarklet" id="wtframework8-smallclick-y-arrastrasmall">[WTFramework][8] click y arrastra</h4> Muestra qué framework de Javascript se está utilizando en el sitio. <h4 class="bookmarklet" id="microformats9-smallclick-y-arrastrasmall">[Microformats][9] click y arrastra</h4> Muestra cuáles microformatos están siendo utilizados en determinada página. Y por último, mi favorito: <h4 class="bookmarklet" id="recss10-smallclick-y-arrastrasmall">[ReCSS][10] click y arrastra</h4> Recarga sólo las hojas de estilos llamadas desde la página, sin tener que volver a cargar todo el HTML para visualizar cambios. [1]: javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement(‘SCRIPT’);%20scriptElem.setAttribute(’language’,%20’JavaScript’);%20scriptElem.setAttribute(‘src’,%20scriptURL);%20document.body.appendChild(scriptElem);}loadScript(‘<a href="http://westciv.com/xray/thexray.js');">http://westciv.com/xray/thexray.js');</a> “Enlace a “XRay bookmarklet”” [2]: javascript:function%20fnStartDesign(sUrl)%20{var%20nScript%20=%20document.createElement(‘script’);nScript.setAttribute(’language’,‘JavaScript’);nScript.setAttribute(‘src’,sUrl);document.body.appendChild(nScript);}fnStartDesign(‘<a href="http://www.sprymedia.co.uk/design/design/media/js/design-loader.js');">http://www.sprymedia.co.uk/design/design/media/js/design-loader.js');</a> “Enlace a “Design bookmarklet”” [3]: javascript:void(window.resizeTo(800,600)) [4]: javascript:void(window.resizeTo(1024,768)) [5]: javascript:void(window.resizeTo(1280,1024)) [6]: javascript:void(window.resizeTo(1600,1200)) [7]: javascript:function%20loadScript(scriptURL)%20%7B%20var%20scriptElem%20=%20document.createElement(‘SCRIPT’);%20scriptElem.setAttribute(’language’,%20’JavaScript’);%20scriptElem.setAttribute(‘src’,%20scriptURL);%20document.body.appendChild(scriptElem);%7DloadScript(‘<a href="http://westciv.com/mri/theMRI.js');">http://westciv.com/mri/theMRI.js');</a> “Enlace a “MRI bookmarklet”” [8]: javascript:(function(){el=document.getElementById(%22__wtframework%22);if(el){document.body.removeChild(el);return%20}var%20c=document.createElement(%22a%22);c.id=%22__wtframework%22;c.style.opacity=%220.7%22;c.style.filter=%22alpha(opacity=70)%22;c.style.position=%22fixed%22;c.style.zIndex=%229000%22;c.style.top=%2215px%22;c.style.right=%2220px%22;c.style.background=%22#000%22;c.style.styleFloat=%22right%22;c.style.padding=%227px%2010px%22;c.style.color=%22%23fff%22;c.style.border=%22solid%202px%20%23fff%22;c.style.textDecoration=%22none%22;c.style.textAlign=%22left%22;c.style.font=%2212px%20Lucida%20Grande,Helvetica,Tahoma%22;c.style.MozBorderRadius=%225px%22;c.style.WebkitBorderRadius=%225px%22;c.style.WebkitBoxShadow=%220px%200px%2020px%20%23000%22;c.style.MozBoxShadow=%220px%200px%2020px%20%23000%22;c.href=%22javascript:void(0)%22;document.body.appendChild(c);c.onclick=function(){document.body.removeChild(c)};var%20fm=%22Bummer…%20Try%20checking%20the%20source%20code%22;try{fm=(MooTools?%22MooTools%20(%22+MooTools.version+%22)%22:false)}catch(d){}try{fm=(YAHOO?%22YUI%20(%22+YAHOO.util.Dom.VERSION+%22)%22:false)}catch(d){}try{fm=%22Prototype%20(%22+Prototype.Version+%22)%22}catch(d){}try{fm+=%22%3Cbr/%3E%20Script.aculo.us%20(%22+Scriptaculous.Version+%22)%22}catch(d){}try{fm=(jQuery?%22jQuery%20(%22+jQuery.fn.jquery+%22)%22:false)}catch(d){}try{fm=(dojo?%22Dojo%20Toolkit%20(%22+dojo.version+%22)%22:false)}catch(d){}try{fm=(MochiKit?%22MochiKit%20(%22+MochiKit.MochiKit.VERSION+%22)%22:false)}catch(d){}try{fm=(base2?%22Base2%20(%22+base2.version+%22)%22:false)}catch(d){}c.innerHTML=unescape(fm.toString())})(); “Enlace a “WTFramework bookmarklet”” [9]: javascript:(function(){function%20l(u,i,t,b){var%20d=document;if(!d.getElementById(i)){var%20s=d.createElement(‘script’);s.src=u;s.id=i;d.body.appendChild(s)}s=setInterval(function(){u=0;try{u=t.call()}catch(i){}if(u){clearInterval(s);b.call()}},200)}l(‘<a href="http://leftlogic.com/js/microformats.js','MF_loader',function()%7Breturn!!(typeof%20MicroformatsBookmarklet=='function')%7D,%20function()%7BMicroformatsBookmarklet()%7D)%7D)();">http://leftlogic.com/js/microformats.js','MF_loader',function(){return!!(typeof%20MicroformatsBookmarklet=='function')},%20function(){MicroformatsBookmarklet()})})();</a> “Enlace a “Microformats bookmarklet”” [10]: javascript:void(function(){var%20i,a,s;a=document.getElementsByTagName(’link’);for(i=0;i%3Ca.length;i++){s=a[i];if(s.rel.toLowerCase().indexOf(‘stylesheet’)%3E=0&&s.href)%20{var%20h=s.href.replace(/(&|%5C?)forceReload=\d+/,’’);s.href=h+(h.indexOf(’?’)%3E=0?’&’:’?’)+‘forceReload=’+(new%20Date().valueOf())}}})(); “Enlace a “ReCSS bookmarklet”” </article> <article> <h1>Las 10 leyes de Jorge para el diseño y desarrollo web</h1> Thu, 12 Feb 2009 21:54:25 +0000 <ol id="las10leyes"> <li> <h5> No desarrolles para la mayoría; no siempre tienen la razón y usualmente no saben lo que quieren. </h5> <pre><code> Aunque 60% de los usuarios utilicen Internet Explorer 6, eso no indica que debemos desarrollar aplicaciones que funcionen sólo en IE6; si todos saltan a un pozo ¿tú te lanzarías también? </code></pre> </li> <li> <h5> Usa siempre un reseter CSS. </h5> <pre><code> Si tienes de 1 a 5 páginas simples y con formularios simples, basta con el reseter universal: <pre><code class="language-css">* { margin: 0; padding: 0; </code></pre> }</code></pre> <pre><code> Pero si tu proyecto es mayor, utiliza uno <a href="http://www.csslab.cl/2007/10/18/css-reseter/" title="Enlace en CSSLab a "CSS Reseter"">más completo</a>. </code></pre> </li> <li> <h5> Mantén siempre la simplicidad en todo ámbito; tanto del diseño como del código fuente. </h5> <pre><code> Tatúatelo: Menos es más y aprovecha de medicarte contra la divitis y la classitis, y toda clase de abuso reiterativo innecesario en el codigo fuente. Estudia bien las <a href="http://www.csslab.cl/2007/12/06/la-descendencia-del-css/" title="Enlace en CSSLab a "La descendencia del CSS"">herencias de estilos</a>, la <a href="http://www.csslab.cl/2008/01/09/siendo-especfico/" title="Enlace en CSSLab a "Siendo específico"">especificidad</a> y <a href="http://www.csslab.cl/2008/09/10/maniatico-del-codigo/" title="Enlace en CSSLab a "Maniático del código"">cómo ordenar tu código fuente</a>. </code></pre> </li> <li> <h5> Diseña siempre pensando en el usuario y que éste tenga la mejor experiencia posible dentro de tu proyecto web. </h5> <pre><code> <cite>"Me gusta diseñar experiencias, provocar emociones y quizás cambiar comportamientos al momento de utilizar la web; que ésta no sea una herramienta, sino una verdadera experiencia (como surfear para un surfista, esquiar para un esquiador, cocinar para un chef…)"</cite>– <a href="http://www.csslab.cl/2008/11/20/nuestro-verdadero-cliente/" title="Enlace en CSSLab a "Nuestro verdadero cliente"">yo mismo</a>. </code></pre> </li> <li> <h5> Siempre separa el contenido y estructura (HTML) del estilo gráfico (CSS) y el funcionamiento (Javascript); cada uno en su propio documento. </h5> <pre><code> Trata de linkear los estilos desde una hoja externa: <pre><code class="language-markup"><link rel="stylesheet" href="style.css" type="text/css" media="screen" /></code></pre> y los JS: <pre><code class="language-markup"><script type="text/javascript" src="utils.js"></script></code></pre> </code></pre> </li> <li> <h5> Nunca, pero nunca uses una etiqueta vacía sólo porque no puedes resolverlo de otra manera. </h5> <pre><code> Si te encuentras entrampado y no hay caso de solucionar tal o cual problema, tómate unos minutos de descanso, sal al aire libre por un momento y luego vuelve con la cabeza más fría. También es buen recurso compartirlo con otras personas aver qué otros puntos de vista tienen sobre la misma situación pero ¡no más <div></div>! </code></pre> </li> <li> <h5> No te asustes en hacer un sitio pesado, con imágenes PNG en alta calidad y con un elegante preloader que indique cuánto falta para la precarga, pero ¡HAZ QUE VALGA LA PENA! </h5> <pre><code> Actualmente la velocidad promedio de las conexiones permiten bastantes más lujos que antes. No te reprimas de usar PNG’s transparentes de más de 100kb, pero con tal de que tengan un <a href="http://www.csslab.cl/2008/05/29/parallax-en-uso-real/" title="Enlace en CSSLab a "Parallax en uso real"">real uso práctico y estético</a>. </code></pre> </li> <li> <h5> Esfuérzate para que tu diseño y desarrollo cumpla por lo menos con niveles básicos de usabilidad, accesibilidad y degradabilidad. </h5> <pre><code><blockquote> Accesibilidad: Facilidad con la que algo puede ser usado, visitado o accedido por todos los usuarios. La accesibilidad web indica la capacidad de acceso a la web y sus contenidos por todas las personas, independiente de las limitaciones propias del usuario (discapacidad). </blockquote> <blockquote> Usabilidad: en palabras de Jakob Nielsen: "atributo de calidad que mide lo fácil de usar una interfaz web". </blockquote> <blockquote> Degradabilidad: principio en el cual un desarrollo realizado en determinado tiempo y para determinado medio se comporte de manera similar en ambientes paralelos o menos actualizados, vale decir: tu sitio hermoso y bien construido debiera comportarse similar si un browser no soporta estilos CSS ni Javascript o en un celular, por ejemplo. No se verá igual, pero debiera comportarse similar. </blockquote> </code></pre> </li> <li> <h5> Fíjate y cuida de los detalles; lo que unos ven como pequeñeces, para otros son sutilezas que te diferenciarán del resto. </h5> <pre><code> – quedó bastante claro creo- </code></pre> </li> <li> <h5> Todas las reglas están para ser rotas, menos las 9 anteriores. </h5> <pre><code> El análisis heurístico de Nielsen, la regla de primera lectura en pantalla, la lectura en ‘Z‘, que el logo debe ir SIEMPRE en el rincón superior derecho del diseño… ¡Patrañas! Debes tener la capacidad de innovar y poder mantener la cautividad y atención del usuario principalmente mediante el diseño. Si crees que el menú principal debiera ir a la derecha de la pantalla, diséñalo para que la atención del usuario se dirija a ese lado y justifícalo. Si siguiéramos esas reglas siempre, nunca habrían innovaciones tales como <a href="http://www.csslab.cl/category/ajax/" title="Enlace en CSSLab a "Categoría: AJAX"">AJAX</a>, <a href="http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/" title="Enlace en CSSLab a "Ventana modal sólo con CSS"">ventanas modales</a>, validaciones de formularios por blur entre otros. ¡Atrévanse! </code></pre> </li> </ol> </article> <article> <h1>Videocast 3: creando un plugin para jQuery</h1> Wed, 28 Jan 2009 19:30:05 +0000 Ayer se me acerca un colega de trabajo con algunas preguntas relativas a un proyecto de cómo encontrar una solución a una funcionalidad utilizando jQuery. Papel y lápiz en mano, me puse a explicarle cómo imaginaba que sería, pero después pensé en cómo hacerlo mejor aún, con menos líneas de código y en los posible extensible, vale decir, que su mantención o posterior actualización implique poca o nula modificación. Luego del trabajo salí a trotar y ¡ZAZ! La solución viene a mi cabeza. De vuelta la puse en práctica y decidí grabarla en un videocast, pero además de esa sencilla solución creí pertinente mostrar cómo a partir de una simple funcionalidad (o compleja, dependiendo de lo que hagan) pueden transformarla en un plugin configurable a partir de opciones, para jQuery. Cuando creé [mi primer plugin][1] tuve bastante dificultad al no encontrar una documentación detallada, y espero con este aporte visual poner al alcance de quienes necesiten material didáctico para sus proyectos web. Hago el llamado también a que puedan compartir sus desarrollos libremente; sólo así podremos mejorar la calidad de los sitios web que vemos día a día. Como lo he hecho [en otras][2] [ocasiones][3], pongo a disposición este mismo sitio para hacer un review y difundirlos. <div class="video-container"> </div> <ul> <li>[CSSLab.cl: plugin para jQuery 1 – básico][4]</li> <li>[CSSLab.cl: plugin para jQuery 2 – plugin][5]</li> </ul> <a href="http://www.youfeelme.biz" title="Enlace externo a "youfeelme.biz"" target="_blank">Sebastián</a>, espero haber solucionado tu problema, y feliz cumpleaños. [1]: <a href="http://www.csslab.cl/2007/12/03/conos-para-mejor-usabilidad/">http://www.csslab.cl/2007/12/03/conos-para-mejor-usabilidad/</a> “Enlace en CSSLab a “Iconos para mejor usabilidad”” [2]: <a href="http://www.csslab.cl/2008/01/28/review-1-origo-css/">http://www.csslab.cl/2008/01/28/review-1-origo-css/</a> “Enlace en CSSLab a “Review 1: Origo CSS”” [3]: <a href="http://www.csslab.cl/2008/08/28/review-5-divit/">http://www.csslab.cl/2008/08/28/review-5-divit/</a> “Enlace en CSSLab a “Review 5: DIVIT”” [4]: <a href="http://csslab.cl/ejemplos/plugin_jquery/paises_basico.html">http://csslab.cl/ejemplos/plugin_jquery/paises_basico.html</a> “Enlace para “Ejemplo 1"” [5]: <a href="http://csslab.cl/ejemplos/plugin_jquery/paises_plugin.html">http://csslab.cl/ejemplos/plugin_jquery/paises_plugin.html</a> “Enlace para “Ejemplo 1"” </article> <article> <h1>jQuery sin conflictos</h1> Mon, 26 Jan 2009 21:02:47 +0000 Existen muchos beneficios al usar alguna de las librerías de javascript disponibles hoy en día (cómo han proliferado.. increíble). Facilitan escribir código y uno se concentra en mejores funcionalidades que en tratar de reinterpretar código. Y qúe decir de los efectos que cada vez vienen mejores… una delicia de utilizarlos. Cuando uno comienza un proyecto, se suele elegir el mejor lenguaje para su desarrollo y una de las desiciones es elegir el framework JS con que se trabajará, y casarse con éste. Ahora vengo a conocer que ésta desición no tiene que ser tan drástica, ya que jQuery incluye una funcionalidad que permite que se utilice junto con otras librerías, evitando el conflicto de interpretación entre diferentes formas de escribir javascript que conforma cada framework; en esta ocasión mostraré los diferentes usos de noConflict(); Supongamos que tenemos un simple efecto de mostrar/esconder el contenido al activar un link, lo que se llama SlideToggle. El HTML sería el siguiente: <pre><code class="language-markup"><a href="#" class="boton">Muestra/Esconde</a> <div class="caja"> Vivamus auctor leo vel dui... </div></code></pre> En Mootools el código para hacerlo funcionar se compone de la siguiente manera: <pre><code class="language-javascript">window.addEvent('domready', function() { new Fx.Slide('mooMuestra').hide() $('mooEsconde').addEvent('click', function(e){ e.stop(); new Fx.Slide('mooMuestra').toggle(); }); });</code></pre> [Ver ejemplo con Mootools][1]{.verejemplo} Ya con jQuery, lo mismo se realiza de la siguiente manera: <pre><code class="language-javascript">$().ready(function(){ $('#jMuestra').hide(); $('#jEsconde').click(function(){ $('#jMuestra').slideToggle(); }); });</code></pre> [Ver ejemplo con jQuery][2]{.verejemplo} Ahora combinaremos ambos métodos en un mismo archivo, el cual estará linkeando las librerías de Mootools 1.2.0 y jQuery 1.3.1, y se realizará SlideToggle cada una con su método. Para eso, se cambiará la manera con el cual jQuery llama a sus selectores (que es una de las principales razones de conflicto; el uso resumido con $). Primero, se linkea el framework de jQuery y luego el de Mootools. Se escriben los eventos con los cuales se realizan los SlideToggle, pero con un leve cambio en jQuery. En vez de utilizar: <pre><code class="language-javascript">$('selector').slideToggle();</code></pre> se cambiará a: <pre><code class="language-javascript">jQuery.noConflict(); jQuery('selector').slideToggle();</code></pre> Esto se repetirá con cada selector en que antes utilizábamos $. Finalmente reciclando el mismo código mostrado anteriormente, quedaría: <pre><code class="language-javascript">jQuery.noConflict(); jQuery().ready(function(){ jQuery('#jMuestra').hide(); jQuery('#jEsconde').click(function(){ jQuery('#jMuestra').slideToggle(); }); });</code></pre> [Ver ejemplo integrando jQuery+Mootools][3]{.verejemplo} Otra manera es creando una variable con una nueva manera de escribir $, por ejemplo, $jQ: <pre><code class="language-javascript">var $jQ = jQuery.noConflict(); $jQ().ready(function(){ $jQ('#jMuestra').hide(); $jQ('#jEsconde').click(function(){ $jQ('#jMuestra').slideToggle(); }); });</code></pre> [Ver ejemplo 2 integrando jQuery+Mootools][4]{.verejemplo} [1]: <a href="http://www.csslab.cl/ejemplos/noConflict/mootools.html">http://www.csslab.cl/ejemplos/noConflict/mootools.html</a> “Enlace en CSSLab a “Ver ejemplo con Mootools”” [2]: <a href="http://www.csslab.cl/ejemplos/noConflict/jquery.html">http://www.csslab.cl/ejemplos/noConflict/jquery.html</a> “Enlace en CSSLab a “Ver ejemplo con jQuery”” [3]: <a href="http://www.csslab.cl/ejemplos/noConflict/ambos.html">http://www.csslab.cl/ejemplos/noConflict/ambos.html</a> “Enlace en CSSLab a “Ver ejemplo integrando jQuery+Mootools”” [4]: <a href="http://www.csslab.cl/ejemplos/noConflict/ambos2.html">http://www.csslab.cl/ejemplos/noConflict/ambos2.html</a> “Enlace en CSSLab a “Ver ejemplo 2 integrando jQuery+Mootools”” </article> <article> <h1>Review 6: En la cabeza de Steve Jobs</h1> Fri, 16 Jan 2009 19:15:39 +0000 Durante mis vacaciones me propuse leer este libro que me trajo Papá Noel para Navidad. Al comienzo me entusiasmó el tema ya que como pueden haber notado soy un usuario de Macintosh desde hace muchos años ya, y no me cambiaría de plataforma ni que me pagaran. He leído algo sobre la forma de pensar y de trabajar del actual CEO de Apple, pero en esta ocasión el autor Leander Kahney (blogger de Cult of Mac de Wired) describe muchas anécdotas que envuelven la creación de Apple (y por consiguiente de los computadores personales a finales de los ’70), la contínua búsqueda de la innovación y de la simplicidad de todos sus productos, la cuasi-quiebra de la compañía y de cómo Steve Jobs volvió a Apple tímidamente y con su mentalidad arrolladora logró posicionarla como una de las más importantes en el área tecnológica y de consumo. La lectura se pone entretenida luego de comienzo cuando uno trata de entender cómo una persona que ha sido tildada de ególatra, sociópata, genio de los negocios, amante del video, budista zen, pescadariano (vegetariano que come pescados), perfeccionista y visionario ha logrado transformar cuatro grandes indústrias: la de los PC (con el Macintosh), de la música (con el iPod y luego con la iTunes Store), la de los dispositivos móviles (con la Newton y luego con el iPhone) y la de la animación digital (con Pixar). El autor constantemente cuestiona la personalidad de Jobs, su carácter y sus manías más íntimas, muchas de las cuales rozan la obsesión. Exigente y narcisista, está siempre buscando detalles que pueden ser mejorados en todos sus productos, sean éstos de hardware o de software. Interesante es leer cómo Apple logra tanto hermetismo en torno a sus productos, hasta segundos antes de su lanzamiento; cómo se ha propiciado en la empresa un ambiente tal que impulsa a sus empleados a entregar más de lo que se les requiere, todo por mantenerla como una de las más innovadoras del mundo. Muchas son las lecciones que uno puede tomar de este libro; algunos extractos: <blockquote> Una de las partes más importantes del proceso de diseño de Apple es la simplificación. La simplicidad de los productos de la compañía viene de remover opciones al consumidor. Para Jobs, menos es siempre más. </blockquote> <blockquote> Jobs es el grupo de foco de Apple. Una de sus mayores ventajas es que él no es ingeniero. Jobs no tiene entrenamiento formal en ingeniería ó programación. No tiene un MBA. En verdad, no está titulado en nada, ya que dejó la universidad. Jobs no piensa como ingeniero, sino como un consumidor lo que lo hace el usuario perfecto para pruebas de los productos de Apple. </blockquote> <blockquote> Cuando comienzas a mirar a un problema y crees que es simple, no comprendes cuán complejo realmente es. </blockquote> <blockquote> Siempre que Steve veía algo nuevo que le daba curiosidad, él la compraba, la desmontaba y trataba de entender cómo funciona. </blockquote> Con entrevistas a personas cercanas a Steve, Leander Kahney no logra sostener muchas de sus fuentes sin antecedentes bibliográficos; aún así es importante entender el proceso por el cual se ha cimentado los fundamentos por los cuales estamos trabajando actualmente. Conocer cómo funciona la mente creativa e innovadora de uno de los hombres más influyentes de nuestra era es un buen argumento para leer En la cabeza de Steve Jobs. PD: Mi copia está en portugués pero lo encontré además en inglés y en castellano. </article> <article> <h1>option disabled en IE6+</h1> Wed, 31 Dec 2008 14:09:05 +0000 Nuevamente vengo con un error de nuestro querido amigo IE6 que también es compartido por IE7 y el beta1 de IE8 (estos de Micro$oft no aprenden nunca…). Gracias a <a href="http://www.csslab.cl/2008/12/22/aportando-a-la-inspiracion/#comment-24003">Rodrigo</a>, me hizo notar que estos browsers no interpretan correctamente a <option> de un <select> que contenga el atributo disabled=“disabled”. Todos los otros navegadores buenos lo hacen perfectamente, pero lamentablemente la gran mayoría de usuarios no saben que lo que usan para navegar apesta (y no tienen culpa tampoco) y lamentablemente tenemos que encontrar soluciones a este y muchos otros problemas del desarrollo web. Me puse a indagar por la web y encontré varias discusiones sobre qué solución es mejor que otra, y ninguna fue conclusiva. No hay solución aparente que funcione de igual manera para todos los browsers y que sea utilizada, por ejemplo, con comentarios condicionales. Básicamente me encontré con 2: una que involucra HTML pero la mejor manera de implementarlo es mediante Javascript y la segunda sencillamente con Javascript. Explicaré ambas a continuación, pero antes el HTML común que sería del tipo: <pre class="language-markup"><code><select> <option>Primero</option> <option disabled="disabled">Segundo</option> <option>Tercero</option> </select></code></pre> [Ver ejemplo (en IE notarán)][2]{.verejemplo} entre browsers" width="620" height="207" /> <h3 id="solucioacuten-1">Solución 1</h3> Para que IE interprete la opción <option disabled="disabled">Segundo</option> como deshabilitado, debes cambiar la etiqueta <option> por <optgroup>; el problema es que <optgroup> se compone ligeramente diferente de <option> por lo que el HTML quedaría así: <pre class="language-markup"><code><select> <option>Primero</option> <optgroup label="Segundo">Segundo</optgroup> <option>Tercero</option> </select></code></pre> Esta solución funciona perfecto en todos los browsers, por lo que puede ser hecho automáticamente mediante jQuery: <pre class="language-javascript"><code>$('option:disabled').each(function(){ var texto = $(this).text(); $(this).replaceWith("<optgroup label='"+texto+"'>"+texto+"</optgroup>") });</code></pre> Como el problema es sólo de IE, prefiero encerraro en un if() que detecte el browser como podrán apreciar en el ejemplo. Además, notarán que <optgroup> tiene una leve diferencia de estilo que <option disabled="disabled"> pero que se puede subsanar fácilmente mediante CSS. [Ver solución 1 (en IE notarán)][3]{.verejemplo} <h3 id="solucioacuten-2">Solución 2</h3> Esta solución no es una solución en sí sino un parche para el problema: ya que IE no considera el atributo disabled, entonces cada vez que el <option disabled="disabled"> sea seleccionado por el usuario (tomando en cuenta que todos los otros browsers no dejarán que sea seleccionado) la selección será automáticamente trasladada al primer <option> del <select>, vale decir del ejemplo HTML si hago click a <optgroup label="Segundo">Segundo</optgroup>, automáticamente seré redireccionado a <option>Primero</option>. El JS: <pre class="language-javascript"><code>$('option:disabled').css('color','gray'); $('select').change(function(){ checkDisabledOptions(this); }); function checkDisabledOptions(el){ if(el.options[el.options.selectedIndex].disabled){ el.selectedIndex = 0; } }</code></pre> Esta solución es una mezcla entre jQuery y Javascript puro, <a href="http://web.archive.org/web/20060311014852/http://blogs.katapultmedia.com/jb2/2006/02/ie_bites_option_disabled_doesnt_work.html" title="Enlace externo a "IE Bites: option disabled doesn't work"" target="_blank">tomada de la mejor implementación</a> encontrada de entre 20 otras vistas; es la más simple y con menos líneas de código. Además, para esta solución es bueno siempre en el primero item del <select> la opción <option>Seleccione</option> o cualquiera que sea que no tenga un value válido (value=""), así aportamos a la accesibilidad y podremos validar ese ítem de formulario. [Ver solución 2 (en IE notarán)][4]{.verejemplo} Espero Rodrigo te haya servido, y gracias por hacer me ver este tema; me entretuve bastante resolviéndolo. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html" title="Enlace externo a "Support for <option disabled> is inexistent in Internet Explorer 6, 7 and 8 beta 1"" target="_blank">Support for <option disabled> is inexistent in Internet Explorer 6, 7 and 8 beta 1</a></li> <li><a href="http://web.archive.org/web/20060311014852/http://blogs.katapultmedia.com/jb2/2006/02/ie_bites_option_disabled_doesnt_work.html" title="Enlace externo a "IE Bites: option disabled doesn't work"" target="_blank">IE Bites: option disabled doesn’t work</a></li> </ul> [2]: <a href="http://www.csslab.cl/ejemplos/option_disabled/drama.html">http://www.csslab.cl/ejemplos/option_disabled/drama.html</a> “Enlace en CSSLab a “HTML ejemplo con <option disabed="disabled">”” [3]: <a href="http://www.csslab.cl/ejemplos/option_disabled/option-jQuery_1.html">http://www.csslab.cl/ejemplos/option_disabled/option-jQuery_1.html</a> “Enlace en CSSLab a “Solución 1 a <option disabled="disabled">”” [4]: <a href="http://www.csslab.cl/ejemplos/option_disabled/option-jQuery_2.html">http://www.csslab.cl/ejemplos/option_disabled/option-jQuery_2.html</a> “Enlace en CSSLab a “Solución 2 a <option disabled="disabled">”” </article> <article> <h1>Floatfix: un nuevo clearfix</h1> Mon, 01 Dec 2008 21:05:26 +0000 Ya es lunes, llego a revisar mis 600 RSS‘s que me esperan acumulados por el fin de semana y me quedo con un artículo que me llama la atención. Lo leo, lo analizo, lo pongo en práctica y ¡Zaz! Un nuevo paradigma se forma. Por todos es conocido y utilizado [Clearfix][1]; luego les comenté sobre [Clearfix Ultimate][2] (bautizado por mí) y que me ha sido de gran utilidad desde entonces. Esta vez, les traigo uno nuevo: Floatfix (nuevamente bautizado así por mí). Con este método, superas el colapso del contenedor a causa de elementos bloque flotantes dentro de él utilizando la propiedad CSS… ¡float! <blockquote> ¿Float para arreglar otros floats? </blockquote> Así es, si tu elemento caja que contiene otros elementos que están flotando colapsa, pues simplemente flótalo y todo volverá a la normalidad. Volveré a explicar el asunto. Miren en el siguiente ejemplo como #container contiene (valga la redundancia) a 2 elementos que están flotando. Bueno, basta con que sea 1 y ya #container estaría colapsando (no los envuelve). [Ver ejemplo 1][3]{.verejemplo} <div class="pullquote"> </div> <pre><code class="language-css">#container { margin: 40px; } .flout { float: left; }</code></pre> Bueno, si utilizan .clearfix todo volvería a la normalidad; si tienen ancho fijo en el #container y agregan overflow: hidden también todo estaría normal, pero en vez de eso, sólo floten el #container a cualquier lado: left o right: [Ver ejemplo 2][4]{.verejemplo} <pre><code class="language-css">#container { margin: 40px; float: left; } .flout { float: left; }</code></pre> Así de simple y de contradictorio. Funciona en todos mis browsers de pruebas y claro tiene sus pros y contras. Pero depende de cada uno manejar la mejor solución a sus problemas. Este es sólo uno más. <h4 id="link">Link:</h4> <ul> <li><a href="http://orderedlist.com/articles/clearing-floats-the-fne-method" target="_blank" title="Enlace externo a "Clearing Floats: The FnE Method"">Clearing Floats: The FnE Method</a></li> </ul> [1]: <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/</a> “Enlace en CSSLab a “Flotando en la incertidumbre”” [2]: <a href="http://www.csslab.cl/2008/06/09/clearfix-ultimate/">http://www.csslab.cl/2008/06/09/clearfix-ultimate/</a> “Enlace en CSSLab a “Clearfix Ultimate”” [3]: <a href="http://www.csslab.cl/ejemplos/floatfix/float1.html">http://www.csslab.cl/ejemplos/floatfix/float1.html</a> “CSSLab.cl: ejemplo 1 de “Floatfix”” [4]: <a href="http://www.csslab.cl/ejemplos/floatfix/float2.html">http://www.csslab.cl/ejemplos/floatfix/float2.html</a> “CSSLab.cl: ejemplo final de “Floatfix”” </article> <article> <h1>Nuestro verdadero cliente</h1> Thu, 20 Nov 2008 21:01:18 +0000 Tengo la certeza de que si le pregunto a profesionales que trabajan con y para la web ¿Quién es tu cliente?, el 99.9% de ellos me responderia: “La Empresa XXX, Fulano de tal dueño de XYZ” y cosas por el estilo. Pero espero que exista ese 0.1% que responda lo mismo que yo respondería: “el usuario”. Piensen esto un poco: Ese sitio web que están haciendo: ¿Es para que su cliente lo vea? ¿O para que los usuarios entren y puedan disfrutar de lo que ahí se ofrece y ojalá aumentar sus ventas o lista de potenciales clientes? Mi principal preocupación al momento de gestar y planificar un proyecto web, es cómo éste afectará al usuario. Así logro definir qué elementos tendrá, qué tecnología y lenguajes aplicaré, etc. No me refiero a hacer un estudio de qué tipo de usuarios navegarán, o una estadística de qué plataformas y resoluciones de pantalla utilizan; me refiero a sentarme como usuario e imaginarme cómo sería su experiencia a través de esa web. Ponerme en su lugar y darme cuenta si realmente vale la pena utilizar alguna [ventana modal][1], o validación de formularios con :focus, [menú con tabs][2], [2 ó 3 columnas][3], etc. Todo eso influye en cómo se ordenará y finalmente entregará la información a quien la desee. <blockquote> Se define como experiencia de usuario (UX) a la experiencia que ha tenido una persona como resultado de su interacción con un producto ó servicio en particular, su entrega y relacionados de acuerdo a su diseño. En este campo convergen oficios como el diseño, los negocios y la psicología. </blockquote> Muchas veces me han preguntado: “Jorge, ¿Qué haces? ¿En qué trabajas?”. Bueno, mi respuesta -y la de más de algunos que recorren CSSLab, creo- es “Soy diseñador gráfico pero frustrado; ya no diseño, sino que desarrollo”. Pensando, tampoco desarrollo mucho; más que nada defino y construyo elementos de interacción directa con el usuario, lo que se suele denominar en la era digital “Desarrollo Front-End”. Así, me denomino un “Diseñador de Interacción, lo que en muchos países es un oficio muy común pero aún no es conocido y reconocido por estas latitudes que buscamos innovar. Me gusta diseñar experiencias, provocar emociones y quizás cambiar comportamientos al momento de utilizar la web; que ésta no sea una herramienta, sino una verdadera experiencia (como surfear para un surfista, esquiar para un esquiador, cocinar para un chef… entienden a lo que voy). Así, con todo ese tema primero definido, pongo manos al Photoshop y a diseñar, pero siempre teniendo claro los objetivos finales de cada elemento con los que el usuario interactuará. El Diseño UX (de Experiencia de Usuario) incluye sub-oficios, los que se desprenden del sistema particular de interacción que se proveerá. Algunos de estos son: <ul> <li>Mapas de Navegación y Mapas de Flujo (AI, Arquitectura de la Información)</li> <li>Comportamiento de Usuario</li> <li>Wireframes</li> <li>Prototipado (para simulación de interacción)</li> <li>Especificaciones (descripción del comportamiento)</li> <li>Bocetos visuales</li> <li>Usabilidad</li> <li>Accesibilidad</li> <li>SEO (Search Engine Optimization)</li> </ul> Este Diseño UX frecuentemente define una secuencia de interacciones entre un usuario y un sistema desarrollado para, en una primera instancia, dar soporte a necesidades u objetivos, y luego satisfacer los requerimientos del sistema y los objetivos para los cuales fue creado. ¿Y para qué tanto?- se preguntarán. Bueno, tiene sus beneficios, claro (caso contrario no perdería tanto tiempo especializándome en el tema): <ul> <li>Se reducen los elementos que excesivamente distraen al usuario de sus necesidades en el sitio web.</li> <li>Aumenta considerablemente la usabilidad del sistema.</li> <li>Se definen mejores estándares de diseño y desarrollo, y se automatizan tareas.</li> <li>Incorpora elementos de negocios y marketing que atraen y fidelizan a más usuarios.</li> </ul> Los invito a estudiar y profundizar más sus conocimientos; sólo así entregaremos mayor calidad y podremos aumentar el valor de nuestro trabajo, y aumentar nuestra lista de clientes, claro. [1]: <a href="http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/">http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/</a> “Enlace en CSSLab a “Ventana modal sólo con CSS”” [2]: <a href="http://www.csslab.cl/2008/10/23/menu-con-tabs-con-css-jquery-y-mootools/">http://www.csslab.cl/2008/10/23/menu-con-tabs-con-css-jquery-y-mootools/</a> “Enlace en CSSLab a “Menú con tabs con CSS, jQuery y Mootools”” [3]: <a href="http://www.csslab.cl/2005/11/04/layout-basico-3-columnas/">http://www.csslab.cl/2005/11/04/layout-basico-3-columnas/</a> “Enlace en CSSLab a “Layout básico - 3 columnas”” </article> <article> <h1>Podcast 03</h1> Mon, 17 Nov 2008 11:56:28 +0000 Luego de ajetreadas semanas, vuelvo con un nuevo aporte pero de audio. No he tenido tiempo ni cabeza para escribir algún artículo, pero sí desde hace un tiempo tenía algunos pensamientos rodeando mi mente y quería mucho compartirlos con quienes quieran bajar este nuevo podcast, y ojalá aportar sobre el tema. En esta ocasión, el tema es amplio pero único: <ul> <li>Webapps de todo y para todos.</li> </ul> [Bajar Podcast 03 (10.28 min, 9.2mb, .zip)][1]{.bajar} Espero sea interesante y que pueda crear opinión y ojalá conciencia colectiva. Pronto seguiré con mis actualizaciones de costumbre. Traté de variar en la música, y esta vez la intro es aporte de la gran banda española <a href="http://es.wikipedia.org/wiki/Sôber" title="Enlace externo a "Sôbe en Wikipedia.org"" target="_blank">Sôber</a> y las de fondo de <a href="http://balmorheamusic.com/" title="Enlace externo a "Balmorhea official site"" target="_blank">Balmorhea</a>. [1]: <a href="http://www.csslab.cl/ejemplos/podcast/podcast03.zip">http://www.csslab.cl/ejemplos/podcast/podcast03.zip</a> “Enlace en CSSLab a “Bajar Podcast 03"” </article> <article> <h1>4 años ya…</h1> Wed, 05 Nov 2008 02:47:15 +0000 Faltando 40 minutos para que se termine el día (GMT-3), he cumplido y nuevamente publico un rediseño del sitio y nos felicitamos junto a CSSLab por cumplir 4 años de vida ya. Han sido muchas las batallas pero siempre semblante, trato de entregar lo mejor de mis conocimientos para siempre ver una mejor web. Algunos datos sin importancia: han sido 196 artículos (contando este mismo) y 1.869 comentarios (humanos, ya que siempre borro los SPAM). Mi regularidad es variable; aunque trato de escribir por lo menos 1 artículo por semana, a veces el tiempo no me lo permite y otras pocas veces la inspiracion me hace escribir hasta de más. Sobre el rediseño, bueno, es muy subjetivo y como siempre soy yo mismo mi crítico, así que leeré sus aportes sobre éste y otros temas relacionados con la funcionalidad; pero creo que he avanzado prevaleciendo el contenido y la navegación por los diferentes temas dentro del sitio, además de los recursos que he ido adquiriendo, principalmente potenciando [Worx][1] y los [Foros][2]. Gracias por visitar esta humilde web, que desde un rincon del hiperespacio siempre pretende aportar un grano de arena por el bien del usuario. <h5 id="jorge-epuñan-8211-titiritero-de-csslabcl">Jorge Epuñan – titiritero de CSSLab.cl</h5> [1]: <a href="http://www.csslab.cl/worx/">http://www.csslab.cl/worx/</a> “Enlace en CSSLab a “CSSLab Worx”” [2]: <a href="http://www.csslab.cl/foros/">http://www.csslab.cl/foros/</a> “Enlace en CSSLab a “CSSLab Foros”” </article> <article> <h1>Horror #3</h1> Wed, 29 Oct 2008 19:40:56 +0000 <pre class="language-markup"><code><meta name="GENERATOR" content="Namo WebEditor v5.0(Trial)"></code></pre> Comienzo a leer el HTML y ya me doy cuenta que tendré problemas con el código… <pre class="language-markup"><code><li style="line-height:100%; margin-top:0; margin-bottom:0;">Lorem ipsum...</li> <li style="line-height:100%; margin-top:0; margin-bottom:0;">Dolor sit...</li> </code></pre> Imagínense… cada elemento de lista tenía los mismos estilos… ¡Y era una tremenda lista! <pre class="language-markup"><code><Table border cellspacing="0" width="346" bordercolordark="white" bordercolorlight="black"> <TR VALIGN="bottom"> <TD BGCOLOR="#6699CC" ALIGN="left" width="83"> LOREM</TD></code></pre> Y como si no bastara: <pre class="language-markup"><code> </code></pre> Malas prácticas que infelizmente abundan… sin más comentarios. </article> <article> <h1>Menú con tabs con CSS, jQuery y Mootools</h1> Thu, 23 Oct 2008 20:27:16 +0000 Esos menúes tipo tabs ó con subniveles tanto [horizontales][1] como verticales, son muy útiles al momento de desplegar grandes cantidades de navegación sin ser invasivos con el espacio. Puedes arquitecturar toda la estructura de tu sitio de manera tal que el usuario pueda encontrar fácilmente la información que desee, sólo con ir descubriendo con el mouse las subsecciones que están contenidas dentro del árbol general de navegación. <div class="pullquote"> </div> Por suerte hacer estos tipos de menúes es bastante fácil: basta con tener claro cómo funcionan los [menúes con listas][2] e ir anidando unas dentro de otras; incluso sólo con CSS es suficiente para hacerla funcionar, pero lamentablemente el peor browser de la historia universal (IE6) no soporta pseudo-classes en selectores que no sean links (<a>). Así que lo mejor y que más soporte cross-browser nos entrega es utilizar Javascript en este proceso. Y qué mejor que utilizar [jQuery][3] ó [Mootools][4], 2 de los frameworks con los que me gusta jugar. En este artículo veremos el proceso para crear un menú con tabs y cómo hacerlo funcionar mediante CSS y con la ayuda de Javascript. Como mencionaba, un menú con tabs se compone básicamente de listas anidadas sobre otras listas. El HTML sería el siguiente: <pre><code class="language-markup"><ul id="menu"> <li><a href="#">Uno</a></li> <li class="cabeza"><a href="#">Dos</a> <ul> <li><a href="#">Dos.Uno</a></li> <li><a href="#">Dos.Dos</a></li> <li><a href="#">Dos.Tres</a></li> </ul> </li> <li><a href="#">Tres</a></li> <li class="cabeza"><a href="#">Cuatro</a> <ul> <li><a href="#">Cuatro.Uno</a></li> <li><a href="#">Cuatro.Dos</a></li> </ul> </li> </ul></code></pre> [Ver ejemplo del HTML][5]{.verejemplo} Si el mundo fuera hermoso y no existiera IE6, nos bastaría con un poco de CSS y [selectores avanzados de atributos][6] para hacerlo funcionar: <pre><code class="language-css">ul { list-style: none; } ul li { float: left; width: 100px; text-align: center; } li.cabeza>ul { display: none; } li.cabeza:hover>ul { display: block; }</code></pre> [Ver ejemplo con CSS][7]{.verejemplo} Para mejorar el manejo del despliegue de los subniveles, le coloqué una class=“cabeza” a cada elemento de lista (<li>) que contenga cada nuevo subnivel. Ahora es más fácil diferenciarlas con CSS ó Javascript, como mostraré a continuación. Primero, con jQuery: <pre><code class="language-javascript">$(document).ready(function(){ // primero escondemos todos los subniveles $('li.cabeza > ul').hide(); // luego le agregamos el evento de mouseover y mouseout mediante hover de jQuery $('li.cabeza').hover( function() { $('ul', this).show(); }, function() { $('ul', this).hide(); }); });</code></pre> [Ver ejemplo jQuery][8]{.verejemplo} Muy simple. Ahora, con Mootools (1.11): <pre><code class="language-javascript">window.addEvent('domready', function() { // creamos una variable 'list' que será el selector <li> con class="cabeza", ya que la usaremos más de una vez. var list = $$('li.cabeza'); // luego escondemos cada <ul> que esté contenido dentro de li.cabeza mediante display: none list.getElement('ul').setStyle('display', 'none'); // ahora agregamos los eventos de mouseenter y mouseout respectivos list.each(function(el) { el.addEvent('mouseenter', function(){ $(this).getElement('ul').setStyle('display', 'block'); }); el.addEvent('mouseleave', function(){ $(this).getElement('ul').setStyle('display', 'none'); }); }); });</code></pre> [Ver ejemplo Mootools][9]{.verejemplo} Finalmente si usas un browser bueno, cualquier de los 3 métodos funcionará igual; viene de ti implementarlo de la mejor forma para que tus usuarios que aún usen IE6 para visitar tu sitio puedan disfrutar de una buena navegación y del contenido que ofrece. [1]: <a href="http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/">http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/</a> “Enlace en CSSLab a “Menú horizontal y algo +”” [2]: <a href="http://www.csslab.cl/2007/12/28/videocast-2-menu-con-listas/">http://www.csslab.cl/2007/12/28/videocast-2-menu-con-listas/</a> “Enlace en CSSLab a “Videocast 2: menú con listas”” [3]: <a href="http://www.csslab.cl/tag/jquery/">http://www.csslab.cl/tag/jquery/</a> “Enlace en CSSLab a “Tags: jQuery”” [4]: <a href="http://www.csslab.cl/tag/mootools/">http://www.csslab.cl/tag/mootools/</a> “Enlace en CSSLab a “Tags: Mootools”” [5]: <a href="http://www.csslab.cl/ejemplos/tabs/tabs_html.html">http://www.csslab.cl/ejemplos/tabs/tabs_html.html</a> “Enlace en CSSLab a “Menú con Tabs - HTML”” [6]: <a href="http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/">http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/</a> “Enlace en CSSLab a “Selectores avanzados de atributos”” [7]: <a href="http://www.csslab.cl/ejemplos/tabs/tabs_css.html">http://www.csslab.cl/ejemplos/tabs/tabs_css.html</a> “Enlace en CSSLab a “Menú con Tabs - CSS”” [8]: <a href="http://www.csslab.cl/ejemplos/tabs/tabs_jquery.html">http://www.csslab.cl/ejemplos/tabs/tabs_jquery.html</a> “Enlace en CSSLab a “Menú con Tabs - jQuery”” [9]: <a href="http://www.csslab.cl/ejemplos/tabs/tabs_mootools.html">http://www.csslab.cl/ejemplos/tabs/tabs_mootools.html</a> “Enlace en CSSLab a “Menú con Tabs - Mootoools”” </article> <article> <h1>Útiles herramientas</h1> Mon, 20 Oct 2008 22:46:32 +0000 El diseño y desarrollo web no se trata sólo de conocimientos, técnicas y muchas cartas bajo la manga. También influye el ambiente, la plataforma y las herramientas de desarrollo. Sobre este último punto me gustaría compartir en este artículo, en el cual comparto sobre mi experiencia en el uso de herramientas que mejor se han adaptado a mis necesidades y que me han ayudado a acelerar mi trabajo y principalmente a dejar libre mi creatividad: <h3 id="a-hrefhttpmacromatescom-target_blank-titleenlace-externo-a-038quot-textmatequottextmatea"><a href="http://macromates.com/" target="_blank" title="Enlace externo a &quot Textmate;"">Textmate</a></h3> Tras años de ser esclavo de Dreamweaver desde su versión 1.0 (y confieso haber pasado hasta por Microsoft Frontpage), me rendí ante su potencia en demasía. Era mucho software y poco el provecho que le sacaba: no necesito templates, behaviors y menos aún componentes. Me gusta hacer las cosas a mano y que ningún editor me ensucie el código; sólo así logré sacarme de la cabeza el ‘facilismo’ y aprender realmente a escribir código fuente como la gente. Lo bueno de Textmate es que es liviano de utilizar, versátil y aún así te ayuda a escribir código, entregándote ‘tips’ si se te olvida alguna sentencia en el lenguaje que quieras. <h3 id="a-hrefhttpwwwadobecomproductsphotoshopphotoshopgraphicdesign-target_blank-titleenlace-externo-a-038quot-photoshopquotphotoshopa"><a href="http://www.adobe.com/products/photoshop/photoshop/graphicdesign/" target="_blank" title="Enlace externo a &quot Photoshop;"">Photoshop</a></h3> Oh sí, un editor de imágenes que de seguro Chuck Norris usa. Consume más memoria RAM que el mismo Sistema Operativo (fue una de las causas directas por las que dupliqué la memoria de mi laptop), pero tiene de todo lo que se me ocurra y no tengo que recurrir a otros softwares para nada; lo que se me antoje en el diseño lo aplico con Photoshop. No hay caso con Fireworks ni Illustrator; los PSD’s de mis diseños pesan 50mb como mínimo pero no me importa. <h3 style="clear: both"> <a href="http://www.charcoaldesign.co.uk/pipette" target="_blank" title="Enlace externo a &quot Pipette;"">Pipette</a> </h3> Lejos uno de los freeware más útiles que he encontrado. Pippette logra de manera rápida y fácil el color en hexacromía RGB de lo que tengas en tu monitor. <h3 style="clear: both"> <a href="http://www.panic.com/transmit/" target="_blank" title="Enlace externo a &quot Transmit;"">Transmit</a> </h3> Llega la hora de subir tu sitio y probarlo en ese FTP que es más lento que una tortuga; con Transmit he logrado una simbiosis de años y no me falla. Si hay error es del servidor o de la conexión, pero nunca de Transmit. He probado incluso Coda pero no me gustan las llaves suizas: cada producto que sea el mejor para cada función. <h3 style="clear: both"> <a href="http://www.apple.com/safari/" target="_blank" title="Enlace externo a &quot Safari;"">Safari</a>, <a href="http://www.mozilla.com/firefox/" target="_blank" title="Enlace externo a &quot Firefox;"">Firefox</a>, <a href="http://www.opera.com/" target="_blank" title="Enlace externo a &quot Opera;"">Opera</a>, <a href="http://www.kronenberg.org/ies4osx/" target="_blank" title="Enlace externo a &quot IE4OSX;"">IE4OSX</a> </h3> Safari por lo rápido de Webkit; Firefox por lo masivo; Opera por lo estricto y IE4OSX porque no puedo sacarme a IE6 e IE7 de encima… <h3 id="a-hrefhttpwwwadiumxcom-target_blank-titleenlace-externo-a-038quot-adiumquotadiuma"><a href="http://www.adiumx.com/" target="_blank" title="Enlace externo a &quot Adium;"">Adium</a></h3> Para mantener contacto con personas reales de carne y hueso, nada mejor que un multi-mensajero que soporta GTalk, Jabber, MSN, AIM, Yahoo! Messenger, .Mac, Bonjour y ICQ entre muchos otros. Te ahorras RAM y espacio en tu escritorio, y es freeware. <h3 style="clear: both"> <a href="http://www.apple.com/itunes/" target="_blank" title="Enlace externo a &quot iTunes;"">iTunes</a> </h3> No puedo vivir y menos trabajar sin música, sino no tengo estímulo para hacer bien las cosas. iTunes me ordena bastante bien mis músicas y mis playlists, además de sincronizarla con mi iPod. Todo lo que necesito. pd. Por si no se han fijado, utilizo desde hace años plataforma Mac… </article> <article> <h1>Muerte a IE: nuevo plugin</h1> Wed, 24 Sep 2008 23:49:57 +0000 Al parecer ando inspirado y con ganas de aportar más y más a la comunidad de desarrollo web del universo. Y con el afán de aumentar a los usuarios disidentes de Internet Explorer 6 y 7 (browser que también apesta), he creado un nuevo y simpático plugin que espero ayude a que más usuarios se conviertan a cualquier de los otros browsers que son bastante mejores. En esta ocasión les presento killIE, un plugin para jQuery que al activarse despliega un glamoroso y atento mensaje que advierte al usuario que está navegando con un pésimo browser y que gentilmente invita a probar uno nuevo. Como todo buen plugin, tiene ciertos parámetros que son configurables y su peso es ínfimo, lo que invita a ser utilizado global y masivamente. <h3 id="instrucciones">Instrucciones:</h3> <ol> <li> Incluye tu librería jQuery favorita (recomiendo 1.2+) </li> <li> Incluye el plugin jquery.killIE.js </li> <li> Inícialo: <pre class="language-javascript"><code>$(document).ready(function(){ $().killIE(); });</code></pre> </li> <li> Algunos parámetros: <pre class="language-javascript"><code>text: “un texto diferente al propuesto”, style: “estilos CSS diferentes al propuesto”, browser: firefox (por defecto) / opera / safari / chrome, version: ie6 (por defecto) / ie7</code></pre> </li> </ol> [Ver demo][1]{.verejemplo} (con IE6, claro). [Ver demo][2]{.verejemplo} (ahora con IE7 y algunos parámetros). <h4 id="bajar-jquery-killie-plugin3-12kb-zip">[Bajar jQuery killIE plugin][3] (1.2kb .zip)</h4> [1]: <a href="http://www.csslab.cl/ejemplos/killIE_plugin/demo.html">http://www.csslab.cl/ejemplos/killIE_plugin/demo.html</a> “Enlace en CSSLab a “Ver demo jQuery killIE6 plugin”” [2]: <a href="http://www.csslab.cl/ejemplos/killIE_plugin/demo_ie7.html">http://www.csslab.cl/ejemplos/killIE_plugin/demo_ie7.html</a> “Enlace en CSSLab a “Ver demo jQuery killIE7 plugin”” [3]: <a href="http://www.csslab.cl/ejemplos/killIE_plugin/jquery.killIE.zip">http://www.csslab.cl/ejemplos/killIE_plugin/jquery.killIE.zip</a> “Enlace en CSSLab para “bajar jQuery killIE plugin”” </article> <article> <h1>jQuery Plugin: simpleAccordion</h1> Wed, 17 Sep 2008 13:52:00 +0000 Un nuevo plugin para jQuery sale a la luz. Nuevamente, iluminado por una necesidad en un proyecto web, qué mejor que hacer las cosas a mi manera y al mismo tiempo aportar al mundo con algo que quizás le será útil a alguien más. Un colega necesitaba hacer una sección de Preguntas Frecuentes (FAQ) y que las respuestas a las preguntas se desplegaran mediante el efecto de acordeón. Bastante simple, ¿no? Bueno, como sabrán le recomendé que lo más semántico era utilizar listas de definición (<dl>). Pero los plugins que encontraba eran muy grandes para lo poco que necesitaba (10kb+), y necesitaban además de otros plugins de jQuery para funcionar, como el Dimensions, lo que hacía que pesara aún más el total. Así que construí uno simple, customizado y parametrizable, y que finalmente pesa apenas 1kb. <h3 id="modo-de-uso">Modo de Uso:</h3> <ol> <li>Incluye tu librería de <a href="http://docs.jquery.com/Downloading_jQuery" title="Enlace externo a "Download jQuery Javascript Framework"" target="_blank">jQuery</a> favorita</li> <li>Incluye el plugin jquery.simpleAccordion.js</li> <li>Inicialízalo cuando el [DOM][1] esté cargado: <pre class="language-javascript"><code>$(document).ready(function(){ $(’#id_elemento’).simpleAccordion(); });</code></pre></li> </ol> <pre><code>Algunos parámetros: * **header**: "_selector_" (cualquier **etiqueta**, **class** o id que activará el evento; **<dt>** es por defecto) * **collapsable**: "_selector_" (igual que el anterior; **<dd>** es por defecto) * **speed**: _integral_ (un número en _milisegundos_ ó las velocidades "**slow**", "**normal**" ó "**fast**"; **fast** es por defecto) </code></pre> <ol start="4"> <li>Tu código debe ser algo como esto: <pre class="language-markup"><code><dl id=“id_elemento”> <dt>Elemento activo</dl> <dd>Elemento colapsable</dd> </dl></code></pre></li> </ol> <pre><code>ó para esto: <pre class="language-markup"><code><ul id="id_elemento_2">      <li class="cabeza">Elemento activo</li>      <li class="colapsable">Element collapsable</li> </ul></code></pre> <pre class="language-javascript"><code>$(document).ready(function(){      $('#id_elemento_2').simpleAccordion({           header: ".cabeza",           collapsable: ".colapsable",           speed: 200      }); });</code></pre> </code></pre> <ol start="5"> <li>Tómate una cerveza helada, ya estás listo.</li> </ol> [Ver ejemplo][2]{.verejemplo} <h3 id="bajar-jquery-simpleaccordion-plugin-v093bajar-zip-24kb-total-con-ejemplo">[Bajar jQuery simpleAccordion plugin v0.9][3]{.bajar} (.zip 24kb total con ejemplo)</h3> <h4 id="requerimiento">Requerimiento:</h4> <ul> <li>jQuery 1.2+</li> </ul> [1]: <a href="http://www.csslab.cl/2008/04/07/iniciandose-en-el-dom/">http://www.csslab.cl/2008/04/07/iniciandose-en-el-dom/</a> “Enlace en CSSLab a “Iniciándose en el DOM”” [2]: <a href="http://www.csslab.cl/ejemplos/JQuery_Accordion/accordion.html">http://www.csslab.cl/ejemplos/JQuery_Accordion/accordion.html</a> “Enlace en CSSLab.cl a “Ver Ejemplo”” [3]: <a href="http://www.csslab.cl/ejemplos/JQuery_Accordion/JQuery_Accordion_v0.9.zip">http://www.csslab.cl/ejemplos/JQuery_Accordion/JQuery_Accordion_v0.9.zip</a> “Enlace en CSSLab.cl a “Bajar jQuery simpleAccordion Plugin”” </article> <article> <h1>Maniático del código</h1> Wed, 10 Sep 2008 19:49:59 +0000 Al escribir tu código fuente, seguro tienes ya la manera en que acostumbras a hacerlo. Si utilizas uno de los tantos editores de código, seguro confías en lo que te escribe, lo que usualmente es desordenado y lleno de basura. Pero no hay como un código, tanto HTML como CSS y JS limpio, pulcro, ordenado y comentado. Como diría WordPress: <blockquote> Code Is Poetry </blockquote> Y realmente lo creo. Un código, además de sostener a tu sitio web, le entrega a los buscadores información muy relevante sobre qué contenidos son más importantes que otros y cómo interpretarlos. Y que se presente de manera ordenada y clara, obviamente facilita la vida a estos queridos spiders que nos interesan mucho que recorran nuestros sitios. A continuación presentaré algunas formas de escribir y comentar código fuente que he recopilado a lo largo de los días, meses y años en que trabajo en el medio web. Aunque me enfocaré al CSS, son aplicables a cualquier lenguaje de marcado web. <h3 id="comentarios">Comentarios</h3> Uso 2 tipos de comentarios según sea la relevancia del elemento dentro de mi estructura. Si es un id importante (#container, #header, #side, #menu, #footer, etc.) lo marco con el símbolo igual (=) sin indentación, o sea alineado al margen izquierdo: <pre><code class="language-css">/* ============= #container ============= */ #container {}</code></pre> Ahora, si es una class pero de las importantes (.submenu, .nav, etc.) la marco con guión (–) e indentado según donde pertenezca la indentación de esa class: <pre><code class="language-css">#menu {} /* ------------ .subnav ----------- */ #menu .subnav {}</code></pre> Así queda más fácil recorrer el codigo visualmente en busca de algún elemento que necesitemos modificar y/o agregar. Otro punto es comentar los [hacks][1], o técnicas para los diferentes browsers (IE6) que no quepan dentro de los comentarios condicionales y que no influyan en el normal comportamiento del estilo con otros browsers: <pre><code class="language-css">#side .banners { float: left; margin-left: 200px; display: inline; /* arregla doble margen en IE6 */ }</code></pre> <h3 id="organizando-regiones-de-coacutedigo">Organizando regiones de código</h3> Una buena técnica es agrupar regiones de código CSS que tengan funciones similares, como por ejemplo: <ul> <li>seteos globales (reseter, body)</li> <li>class‘es generales (.izquierda, .derecha, .clear, .centrado, etc.)</li> </ul> Por ejemplo: <pre><code class="language-css">/*** SETEOS GENERALES ***/ * { margin: 0; padding: 0; } body { font-family: Georgia, serif; }</code></pre> <h3 id="indentado">Indentado</h3> Es lo que menos veo utilizado dentro de códigos, pero es lo que más ayuda al orden y entendimiento de éste. Lo que recomiendo es un indentado básico con la tecla tab: <pre><code class="language-css">#container { width: 960px; margin: 0 auto; }</code></pre> Y cuando tenemos selectores que heredan de otros electores, también los indento con tab a medida que se vayan anidando: <pre><code class="language-css">#menu { float: left; border-left: 2px solid gray; } #menu li { margin-bottom: 5px; font-size: 1.2em; } #menu a { display: block; color: red; text-decoration: none; } #menu a:hover { background: red; color: white; }</code></pre> Así sabremos con más facilidad cuáles estilos pertenecen o heredan class‘es de otros. Ahora, si eres obsesivo-compulsivo del orden, puedes optar por el siguiente método: <pre><code class="language-css">body { font-family: Tahoma, Arial, sans-serif; font-style: inherit; padding: 0; margin: 0; color: #333; }</code></pre> Visualmetne es bastante ordenado, pero te puedes volver loco escribiendo código así. <h3 id="ahorrando-espacio">Ahorrando espacio</h3> Si eres de los que les gusta ahorrar cada kb, puedes escribir el código horizontalmente: <pre><code class="language-css">#header { border-bottom: 2px solid gray; margin-bottom: 10px; } #header .subnav { float: right; width: 300px; margin: 10px; } #header .subnav li { float: left; margin-left: 5px; }</code></pre> Ó: <pre><code class="language-css">#header { border-bottom: 2px solid gray; margin-bottom: 10px; } #header .subnav { float: right; width: 300px; margin: 10px; } #header .subnav li { float: left; margin-left: 5px; }</code></pre> <h4 id="links">Links:</h4> <ul> <li><a href="http://perishablepress.com/press/2008/09/10/series-summary-obsessive-css-code-formatting/" title="Enlace externo a "Series Summary: Obsessive CSS Code Formatting • Perishable Press"" target="_blank">Series Summary: Obsessive CSS Code Formatting</a></li> </ul> [1]: <a href="http://www.csslab.cl/category/hacks/">http://www.csslab.cl/category/hacks/</a> “Enlace en CSSLab a “Categoría: Hacks”” </article> <article> <h1>Review 5: DivIt</h1> Thu, 28 Aug 2008 15:09:29 +0000 A través de este mismo sitio, Rolando Murillo me contacta para mostrarme su última joya: <a href="http://acualicio.us/divit-to-the-limit" title="Enlace externo a "DivIt to the limit en Acualicio.us"" target="_blank">DivIt</a>, un sistema de grillas para que trabajes el layout de tu sitio ordenadamente mediante porcentajes. Confieso que trabajar con porcentajes es mi karma; lo encuentro muy difícl, especialmente al momento de lograr una armonía entre browsers, y para IE6 no puedes usar cifras absolutas, sino que en vez de 50% deberías tantear entre 48% y 49.9%… probando aver cuál funciona mejor sin quebrar el layout; un lío… Así que me casé con layout fijo y lo domino bastante bien. La idea detrás de DivIt es simple: mediante class‘es pre-establecidad, divides los elementos siempre y cuando el ancho total sume 100%. Por ejemplo, para una fila puedes usar: <ul> <li>100%</li> <li>50%+50%</li> <li>33%+33%+33%</li> <li>25%+25%+25%+25%</li> <li>50%+25%+25%</li> <li>etc etc etc</li> </ul> La combitatoria va con tu imaginación y tu necesidades. Puedes establecer un contenedor con ancho fijo, o con ancho también con porcentaje. En este caso DivIt (y el uso de porcentajes en general) es bastante flexible y hace bastante fácil su implementación, principalmente para quienes se dificultan con calcular anchos de cajas para layouts complejos. ¿Qué pasa si entre las cajas tiene padding y/o margin? Rolando recomienda utilizar una class que contenga estas propiedades, entre la caja de layout y el contenido mismo de la caja, tal como [recomendé hace un tiempo atrás][1]. ¿Pero si entre cajas hay un border-right, y luego un margin-right? Eses son casos de diseño que se deben de solucionar con bastante ingenio, ya que sabemos que son elementos que hacen parte del [modelo de caja][2] e influyen en el ancho de la caja, inclusive si son con porcentajes.. y personalmente esos son impedimentos que me hacen preferir definir y construir el layout a mano; pierdo más tiempo pero tengo más control. En mis pruebas DivIt anduvo bastante bien, logrando armonía entre mis browsers de pruebas, así que logró mi satisfacción y que me tomara mi tiempo en escribir este review. Para funcionar, Rolando entrega un .zip con varios archivos necesarios: <ul> <li>reset.css</li> <li>divit.css</li> <li>ie.css</li> <li>minmax.js</li> </ul> El reseter.css es necesario para cualquier layout, pero aquí está incluído como archivo aparte; divit.css contiene las class‘es de porcentajes necesarias; ie.css las arregla para IE6 y minmax.js según las palabras de Rolando “para soportar min/max-width en IE”. Estos dos últimos archivos asumo que deben ser incluídos mediante [comentarios condicionales][3], y según entiendo este último .js no es necesario si no usas min/max-width… tampoco me quedó claro eso. <h4 id="pros">Pros:</h4> <ul> <li>fácil de entender.</li> <li>fácil de usar.</li> <li>resultados reales.</li> </ul> <h4 id="contras">Contras:</h4> <ul> <li>falta documentación más detallada (instrucciones).</li> <li>falta comentarios detallados en los source entregados.</li> <li>la implementación con IE podría ser más integrada (sin necesidad de una hoja de estilos externa o comentarios condicionales).</li> </ul> <h3 id="link-a-hrefhttpacualiciousdivit-titleenlace-externo-a-quotbajar-divit-en-acualiciousquot-target_blankdivit--un-grid-system-que-divide-el-trabajoa">Link: <a href="http://acualicio.us/divit/" title="Enlace externo a "Bajar DivIt en Acualicio.us"" target="_blank">DivIt // Un grid-system que divide el trabajo</a></h3> [1]: <a href="http://www.csslab.cl/2007/07/19/como-caja-2-superando-el-modelo/">http://www.csslab.cl/2007/07/19/como-caja-2-superando-el-modelo/</a> “Enlace en CSSLab a “Como Caja 2: Superando el Modelo”” [2]: <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/">http://www.csslab.cl/2006/12/14/como-caja-el-modelo/</a> “Enlace en CSSLab a “Como Caja: el modelo”” [3]: <a href="http://www.csslab.cl/2006/07/28/se-viene-ie7-¡huid/">http://www.csslab.cl/2006/07/28/se-viene-ie7-¡huid/</a> “Enlace en CSSLab a “Modelo de Caja”” </article> <article> <h1>Redimensionado Proporcional</h1> Mon, 25 Aug 2008 20:05:00 +0000 Con redimensionado proporcional, me refiero a que una imagen cualquiera, se redimensione dependiendo de la proporción de la resolución del monitor, sin que se deforme o pierda calidad en el proceso. La idea es que se haga al mismo tiempo en que la ventana del browser se mueva, sin tener que esperar que se adapte a la resolución del computador. Este es otro de esos trucos CSS donde uno se hace esa dolorosa pregunta: "¿Por qué no se me había ocurrido antes?". Pero bueno, para qué lamentarse si se puede disfrutar de la solución. <div class="pullquote"> </div> Al grano entonces. Si se tiene una imagen bastante grande como para que actúe como una atractiva imagen que vaya a aportar al diseño y contenido del sitio, y no mermar la usabilidad y accesibilidad de la web con su gran peso y colores distractores, podemos aplicarla de fondo. Ahora, el problema surge que queremos ponerla para que a medida que se vaya redimensionando la ventana del browser, la imagen también se escale para adaptarse al soporte. Así no perdemos ningún pixel de ella y logramos ese objetivo con el diseño, lo que grafico a continuación: Esto se lograba con Flash con un poco de habilidad en Actionscript y Stage.scaleMode. Pero con un poco de simple CSS podemos lograr lo mismo. A continuación, la explicación. El HTML será una imagen que será insertada como etiqueta y no con background-image como se podrían imaginas. Luego, el contenido que mediante CSS será correctamente posicionado: <pre><code class="language-markup"> <img src="fondo.jpg" class="imagen_fondo" alt="DigitalArt: Fractal Meeting" /> <h1>Fractal Meeting</h1></code></pre> Luego, la versatilidad del CSS. Posicionaremos la imagen absolutamente, indicando que el ancho sea al 100%. ¡Y eso es todo! Basta con un overflow: hidden al <body> u otro elemento contenedor que tengan para que no les forme scroll, y ya. No hay más: <pre><code class="language-css">body { overflow: hidden; } .imagen_fondo { width: 100%; position: absolute; top: 0; left: 0; } .titulo { position: absolute; top: 50%; left: 0; width: 100%; }</code></pre> [Ver ejemplo final][2]{.verejemplo} Muevan la ventana del browser para ver esta técnica en acción. Y para el código completo, basta con ver el código fuente del ejemplo anterior. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.cssplay.co.uk/layouts/background.html" title="Enlace externo a "CSSPlay - 100% wide/high 'background' image emulation"" target="_blank">CSSPlay – 100% wide/high ‘background’ image emulation</a></li> <li><a href="http://css-tricks.com/how-to-resizeable-background-image/" title="Enlace externo a "CSSTricks - How To: Resizeable Background Image"" target="_blank">CSSTricks – How To: Resizeable Background Image</a></li> </ul> [2]: <a href="http://www.csslab.cl/ejemplos/redimensionado/">http://www.csslab.cl/ejemplos/redimensionado/</a> “Enlace a “Ver Ejemplo de "” </article> <article> <h1>Lo ví y me gustó 28</h1> Fri, 22 Aug 2008 19:17:15 +0000 #28 – 22 Agosto 2008 <a href="http://viaweb.com.mx/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.gruasurdile.cl/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Definitivo: PNG’s transparentes en IE6</h1> Mon, 18 Aug 2008 23:50:25 +0000 Finalmente dí con la solución final a mis problemas de soporte de transparencias de PNG para IE6. Este tema es otro en los que más usuarios entran a CSSLab buscando por soluciones reales. En mi [anterior artículo][1] sobre este mismo tema, la solución es real pero su implementación se torna complicada de adaptar en cualquier ámbito de sus proyectos. Últimamente he logrado probar e implementar 2 soluciones diferentes para solucionar este drama que nos reúne. Ambas se implementan mediante Javascript y necesitan de leves retoques para funcionar (no se frustren si no se ve a la primera, basta con pensar denuevo cómo están las estructuras de tus archivos y colocar adecuadamente las rutas). <h3 id="a-hrefhttpwwwtwinhelixcomcssiepngfix-titleenlace-externo-a-quotie-png-fix-v10--20-alpha-2quot-target_blanktwinhelix-png-fix-v2a"><a href="http://www.twinhelix.com/css/iepngfix/" title="Enlace externo a "IE PNG Fix v1.0 / 2.0 Alpha 2"" target="_blank">Twinhelix PNG Fix v2</a></h3> Esta segunda versión está de lujo y me hizo volver a creer en el trabajo de Twinhelix. Lo que hace esto es a través de un behavior agrega soporte casi-nativo del canal alpha de PNG para IE5.5+ sin tener que hacer cambios en el documento HTML. Otras ventajas: <ul> <li>Conversión configurable de elementos PNG.</li> <li>Soporta para imágenes llamadas a través de la etiqueta HTML y mediante la propiedad CSS background-image.</li> <li>Soporta la repetición del background mediante background-repeat.</li> <li>Las imágenes pueden ser llamadas dentro del mismo documento o mediante hojas de estilos externas.</li> <li>Soporta cambios de estado de la imagen mediante CSS o Javascript.</li> <li>Soporta links que sean llamados en capas superiores a la del PNG transparente.</li> <li>Muy pequeño y liviano.</li> <li>Gratis.</li> </ul> <h4 id="modo-de-uso">Modo de uso:</h4> <ol> <li> Copiar iepngfix.htc y blank.gif a la estructura de tu sitio. </li> <li> Copiar esta sencilla línea de código CSS que define en cuáles elementos el .htc hará que las imágenes soporten transparencia. Ten cuidado de llamar a la ruta del .htc correctamente: <pre><code class="language-css">img, div { behavior: url(iepngfix.htc) }</code></pre> </li> <li> Ten el cuidado de además entregar la ruta correcta en iepngfix.htc en que tienes el blank.gif. Te recomiendo en esta hacerlo de forma absoluta: <pre><code class="language-javascript">var blankImg = ‘/imagenes/blank.gif’;</code></pre> </li> <li> Eso es. Cuando termines todo eso deberías de ver algo similar al ejemplo 1. </li> </ol> [Ver ejemplo 1 (con IE6, claro).][2]{.verejemplo} <a href="http://www.twinhelix.com/test/iepngfix.zip" title="Enlace externo a "Download Twinhelix IE6PNGFix v"" target="_blank" class="bajar">Bajar Twinhelix IEPNGFix v2</a> <h3 id="a-hrefhttplabsunitinteractivecomunitpngfixphp-titleenlace-externo-a-quotunit-png-fixquot-target_blankunit-png-fixa"><a href="http://labs.unitinteractive.com/unitpngfix.php" title="Enlace externo a "Unit PNG Fix"" target="_blank">Unit PNG Fix</a></h3> Irrumpió en la web hace muy poco y la está rompiendo. Este método se aplica mediante el llamado de un Javascript, el que al igual que el anterior lee un archivo clear.gif y lo aplica a los PNG’s haciéndolos transparentes para IE6. Su plus es que pesa sólo 1kb y para su implementación sólo se requiere llamar el .js. Claro que se debe tener el cuidado de aplicar las rutas, tanto del .js como del .gif correctamente. Puedes llamar el unitpngfix.js mediante comentarios condicionales, de la siguiente manera: <pre><code class="language-markup"></code></pre> En la primera línea de código del unitpngfix.js, debes configurar la ruta desde dónde llamar clear.gif, y nuevamente recomiendo que sea absolutamente: <pre><code class="language-javascript">var clear="/imagenes/clear.gif"</code></pre> Y ya. Si seteaste bien las rutas, deberías de ver algo similar al ejemplo 2. [Ver ejemplo 2 (con IE6, insisto).][3]{.verejemplo} <a href="http://labs.unitinteractive.com/downloads/unitpngfix.zip" title="Enlace externo a "Download Unit PNG Fix"" target="_blank" class="bajar">Bajar Unit PNG Fix</a> Y: ¿Cuál es mejor? Hasta ahora, ambas me han funcionado perfecto, por lo que les dejo a uds. definir su favorito. [1]: <a href="http://www.csslab.cl/2006/08/14/pngs-transparentes-en-ie6/">http://www.csslab.cl/2006/08/14/pngs-transparentes-en-ie6/</a> “Enlace en CSSLab a “PNG’s transparentes en IE6"” [2]: <a href="http://www.csslab.cl/ejemplos/png_2/twinhelix.html">http://www.csslab.cl/ejemplos/png_2/twinhelix.html</a> “Enlace en CSSLab a “PNG’s transparentes para IE6: Ejemplo Twinhelix”” [3]: <a href="http://www.csslab.cl/ejemplos/png_2/unitpng.html">http://www.csslab.cl/ejemplos/png_2/unitpng.html</a> “Enlace en CSSLab a “PNG’s transparentes para IE6: Ejemplo Unit PNG Fix”” </article> <article> <h1>jQuery plugin: fontSizer</h1> Thu, 07 Aug 2008 20:41:38 +0000 Un nuevo plugin para el grandioso <a href="http://www.jquery.com/" target="_blank" title="Enlace externo a "jQuery Javascript Framework"">jQuery</a> ha nacido. Por un proyecto en el cual estoy involucrado, era necesario un método parametrizable para manejar aumento/disminución del tamaño de fuentes. Busqué mucho un plugin para esto, y me frustré bastante dado la carencia del ideal, así que gracias a la habilidad del web developer <a href="http://www.protoboard.cl/" target="_blank" title="Enlace externo a "Protoboard.cl"">Rodrigo Augosto</a>, surge este nuevo aporte a la accesibilidad web. [Ver ejemplo][1]{.verejemplo} <h3 id="modo-de-uso">Modo de Uso</h3> <ol> <li>Adjuntar jquery.js y jquery.fontSizer.js entre las etiquetas <head></head></li> <li>Definir id’s para ambos links, por ejemplo #aumentar (+) y #disminuir (-)</li> <li>Inicializar el plugin, como en el ejemplo:</li> </ol> <pre><code class="language-javascript">$(document).ready(function(){ $("#aumentar").fontSizer({ action: "up" }); $("#disminuir").fontSizer({ action: "down", }); });</code></pre> Eso es. El único parámetro obligatorio es indicar la acción de cada link mediante action. Los parámetros son: <ul> <li>action: “up/down” (requerido).</li> <li>elements: “elemento” (un id, class o etiqueta donde actuará el cambio de tamaño de fuente).</li> <li>increment: número (en cuántos pasos serán el cambio de tamaño; por defecto es de 1 en 1).</li> <li>max: número (tamaño máximo del tamaño de fuente; por defecto es 30px).</li> <li>min: número (tamaño mínimo del tamaño de fuente; por defecto es 8px).</li> </ul> Por ahora solo ha sido probado con jQuery 1.2.6, pero no debería de tener problemas con versiones desde 1.2+ [Descargar (.zip)][2]{.bajar} [1]: <a href="http://www.csslab.cl/ejemplos/fontsizer/index.html">http://www.csslab.cl/ejemplos/fontsizer/index.html</a> “Enlace en CSSLab a “Ejemplo jQuery fontSizer”” [2]: <a href="http://www.csslab.cl/ejemplos/fontsizer/jquery.fontSizer.zip">http://www.csslab.cl/ejemplos/fontsizer/jquery.fontSizer.zip</a> </article> <article> <h1>Review 4: Las Leyes de la Simplicidad</h1> Sun, 27 Jul 2008 23:32:43 +0000 Este es uno de esos libros que debes leer independiente del oficio que ejerces. El catedrático del MIT <a href="http://www.lawsofsimplicity.com/" target="_blank" title="Enlace externo a "lawsofsimplicity.com"">John Maeda</a> se desliza en un breve pero preciso libro (creo que son los mejores libros: no más de 100 páginas pero con el contenido que no sobra) en todos los ámbitos donde la simplicidad puede hacer más bello al producto: sea éste un producto de innovación tecnológica como el iPod, una aplicación Web como el indexador de contenidos Google, una tarea, una nueva empresa, escribir un libro, salir a comer… enfin, cualquier cosa puede hacerse más simple y por ello más útil, bello y trascedental. Finalmente son 10 las leyes con que John nos explica con un vocabulario muy simple (sí, seguro también lo pensó) el camino para lograr productos simples: <ol> <li>Reducir</li> <li>Organizar</li> <li>Tiempo</li> <li>Aprendizaje</li> <li>Diferencias</li> <li>Contexto</li> <li>Emoción</li> <li>Confianza</li> <li>Fracaso</li> <li>La Única</li> </ol> Una lectura muy amena, simple y directa que nos ayudará no sólo a simplificar nuestro trabajo, sino que seguro nuestras vidas. Podremos darle más sentido a nuestras acciones, dándoles más valor y aprovechando más el tiempo. Búsquenlo en su libreria favorita, espero lo puedan encontrar y tener su copia. </article> <article> <h1>Desarrollos Web para iPhone</h1> Thu, 10 Jul 2008 18:52:40 +0000 Desde hace unos meses CSSLab tiene un theme especial si entras a través de un iPhone. Y ante la inminente llegada de este codiciado aparato al resto del mundo, he entrado de lleno estudiando desarrollos para esta plataforma. Los aplicativos me la están ganando, ya que se hacen con <a href="http://developer.apple.com/documentation/Cocoa/Conceptual/ObjectiveC/" target="_blank" title="Enlace externo a "The Objective-C 2.0 Programming Language"">Objective-C</a> el que no es mi fuerte (me costó un montón un simple Hello World). Pero hoy he dedicado mis investigaciones para desarrollos web propios para iPhone, a través de aplicaciones ricas en cuanto a interacción (<a href="http://en.wikipedia.org/wiki/Rich_Internet_application" target="_blank" title="Enlace externo a "Rich Internet application from Wikipedia.org"">RIA</a>). Lo bueno es que iPhone usa Safari como browser (hasta ahora, único). Estoy muy acostumbrado con su uso y manejo, así que conozco bien sus potenciales. Para ser específico, el motor de iPhone es el WebKit 419.3, (el que correspondería al de Safari 2 para plataformas Mac OS X). Es posible crear sitios que sólo sean vistos por este Safari, tal como una hoja de estilos media=“handheld” es leída sólo por [dispositivos móviles][1]; ya iPhone no lo interpreta, utiliza por defecto la hoja de estilos principales (sea media=“all” ó media=“screen”). Entonces ¿cómo lo hace? Para crear estilos sólo para iPhone, podemos linkear una hoja de estilos externa pero <a href="http://www.w3.org/TR/css3-mediaqueries/" title="Enlace externo a "Media Queries at W3C.org"" target="_blank">con un cambio en el atributo media</a>: <pre><code class="language-markup"><link href="estilos_iphone.css" rel="stylesheet" media="only screen and (max-device-width: 480px)" /></code></pre> Este cambio en media es propio de CSS3, una de las ventajas de Safari. Dice precisamente que para anchos de pantalla de hasta 480px (que es el ancho máximo del iPhone en apaisado) utilice tal hoja de estilos. Ahora, para los otros anchos (computadores personales): <pre><code class="language-markup"><link href="estilos_iphone.css" rel="stylesheet" media="only screen and (min-device-width: 481px)" /></code></pre> Nuevamente, esto sólo funcionará en Safari 2+ para Mac OS X ó Windows; para que se comporte debidamente en todos los browsers, recomiento primero linkear la hoja de estilos general como siempre lo han hecho (media=“screen”), y a continuación la del iPhone con el media=“only screen and (max-device-width: 480px)” que ya mostré. La otra manera (que utilizaré en los ejemplos, los que podrás notar diferencia si los ves con un iPhone, claro) [ya la había mencionado en un artículo anterior][2], y se usan juntos del mismo estilo: <pre><code class="language-css">@media screen { // estilos para todos los browsers } @media screen and (max-device-width: 480px) { // estilos sólo para iPhone }</code></pre> [Ver ejemplo 1][3]{.verejemplo} También puedes detectar si el sitio se está leyendo desde el iPhone y redireccionarlo a otra página mediante PHP (que fue lo q usé para CSSLab), como por ejemplo: <pre><code class="language-javascript">if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) { // redirecciona }</code></pre> ![Dimensiones de pantalla para iPhone en CSSLab.cl][4] Otro punto a tener en cuenta es la etiqueta <meta> y el valor viewport. Con él podemos manejar varias propiedades al momento de cargar la página en sus iPhone. Sus valores son: <ul> <li>width: controla el ancho el cual la página se mostrará en primera instancia. Cuando cargas una página, Safari la adapta para el el 100% del alto y del ancho para que quepa dentro de la primera vista. Si el ancho de tu sitio es de 800px, pero quieres que al momento de cargar la página se desplieguen los primeros 400px, lo defines mediante este valor.</li> <li>height: similar al anterior, la página se cargará mostrando el alto que determinemos en primera instancia, aunque éste sea mayor.</li> <li>user-scalable: determina si el usuario puede o no hacer zoom (in-out) a la página. El valor por defecto es ‘yes’.</li> </ul> <pre><code class="language-markup"><meta name="viewport" content="width=300, user-scalable=no" /></code></pre> [Ver ejemplo 2][5]{.verejemplo} Otro punto es la capacidad de esconder la barra de URL que tiene Safari, y desplegar la página sin ella. A través de Javascript podemos hacer ese desplazamiento apenas la página cargue, de la siguiente manera: <pre><code class="language-javascript">setTimeout(function(){ window.scrollTo(0, 1); });</code></pre> [Ver ejemplo 3][6]{.verejemplo} Esto funciona sólo si el alto de la página es mayor al de la ventana al momento de cargarse. Otro punto a considerar es la capacidad de interactuar con elementos propios de iPhone a través de simple HTML y enlaces, por ejemplo: <ul> <li>Para hacer una llamada telefónica a través de un link:</li> </ul> <pre><code class="language-markup"><a href="tel:6666666">Hacer llamado</a></code></pre> <ul> <li>Para enviar un e-mail:</li> </ul> <pre><code class="language-markup"><a href="mailto:usuario@dominio.com">Envia un e-mail</a></code></pre> <ul> <li>Para buscar un lugar en Google Maps:</li> </ul> <pre><code class="language-markup"><a href="http://maps.google.com/maps?q=santiago+chile">Santiago, Chile</a></code></pre> [Ver ejemplo 4][7]{.verejemplo} El ultimo punto que mencionaré en este artículo, es el poder de Safari cuando hablamos de estilos. Principalmente, cuando queremos aplicar estilos para elementos de formulario. WebKit tiene propiedades propias que podemos finalmente utilizar sin vergüenza: radio, opacidad y sombras, entre otros: [Ver ejemplo 5][8]{.verejemplo} Finalmente, algunos aspectos técnicos sobre Safari y la plataforma misma iPhone. <h3 id="aspectos-teacutecnicos">Aspectos técnicos:</h3> <ul> <li>HTML 4.01</li> <li>XHTML 1.0</li> <li>CSS 2.1 y algo de CSS 3</li> <li>Javascript 1.4</li> <li>Manipulación del DOM</li> <li>Ajax</li> </ul> <h3 id="sobre-dimensiones">Sobre dimensiones:</h3> <ul> <li>el ancho de la pantalla es de 320px.</li> </ul> <h3 id="sobre-imaacutegenes">Sobre imágenes:</h3> <ul> <li>Soporte para GIF animados (aunque no deben pasar de 2mb), JPG, PNG y TIFF (hasta 8mb).</li> </ul> <h3 id="sobre-medios">Sobre medios:</h3> <ul> <li>Soporte para PDF y Quicktime.</li> <li>No soporta Java ó películas Flash.</li> </ul> <h3 id="sobre-javascript">Sobre Javascript:</h3> <ul> <li>Limitado a 5 segundos, 10mb y máximo 8 documentos al mismo tiempo.</li> <li>Algunos eventos no son soportados: mouseover, mouseout, onmouseenter, onmouseleave, onmousemove, onSelect, onresize y onScroll.</li> <li>No permite cortar/copiar/pegar, drag&drop y selecccionar texto/elementos.</li> </ul> <h3 id="sobre-estilos">Sobre estilos:</h3> <ul> <li>Safari para iPhone no reconoce los media types print y handheld.</li> <li>Soporta estilos propios de WebKit.</li> <li>No soporta pseudoclass :hover.</li> <li>Las tipografías soportadas son American Typewriter, Arial, Arial Rounded MT Bold, Courier, Courier New, Georgia, Helvetica, Helvetica Neue, Marker Felt, Times New Roman, Trebuchet MS, Verdana y Zapfino.</li> </ul> ![Tipografías soportadas por iPhone en CSSLab.cl][9] <h3 id="sobre-html">Sobre HTML:</h3> <ul> <li>No soporta subida de archivos <input type="file" /> (se deshabilita).</li> <li>Enlaces pueden ser directos para números telefónicos, emails y mapas de Google.</li> <li>No soporta tooltips, aunque muestra el contenido del atributo title="" si mantienes presionado el enlace.</li> </ul> <h3 id="algunas-buenas-praacutecticas-a-considerar">Algunas buenas prácticas a considerar:</h3> <ul> <li>Siempre separar HTML y CSS</li> <li>Usar HTML bien estructurado y válido</li> <li>Escalar y optimizar imágenes apropiadamente, no a través de estilos o atributos HTML.</li> <li>Evitar uso de <frameset>.</li> <li>Utilizar columnas para mejor manejo de zoom (evitar ancho completo).</li> </ul> <h4 id="links">Links:</h4> <ul> <li><a href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank" title="Enlace externo a "Media Queries at W3C.org"">Media Queries at W3C.org</a></li> <li><a href="http://qooxdoo.org/documentation/general/webkit_css_styles" target="_blank" title="Enlace externo a "Webkit CSS Styles"">Webkit CSS Styles</a></li> <li><a href="http://www.iphonewebdev.com/examples/" target="_blank" title="Enlace externo a "iPhoneWebDev"">iPhoneWebDev</a></li> <li><a href="http://ajaxian.com/archives/iphone-web-development-tips-and-official-documentation-released" target="_blank" title="Enlace externo a "iPhone Web Development Tips and Official Documentation Released at Ajaxian.com"">iPhone Web Development Tips and Official Documentation Released at Ajaxian.com</a></li> </ul> [1]: <a href="http://www.csslab.cl/2006/03/07/css-para-moviles/">http://www.csslab.cl/2006/03/07/css-para-moviles/</a> “Enlace en CSSLab a “CSS para móviles”” [2]: <a href="http://www.csslab.cl/2008/06/24/tip-precoz-2-combinando-media/">http://www.csslab.cl/2008/06/24/tip-precoz-2-combinando-media/</a> “Enlace en CSSLab a “Tip Precoz 2: combinando @media”” [3]: <a href="http://www.csslab.cl/ejemplos/webiphone/ejemplo1.html">http://www.csslab.cl/ejemplos/webiphone/ejemplo1.html</a> “Enlace en CSSLab a “Ejemplo 1 iPhone”” [4]: <a href="http://www.csslab.cl/wp-content/uploads/2008/07/dimensiones.jpg">http://www.csslab.cl/wp-content/uploads/2008/07/dimensiones.jpg</a> [5]: <a href="http://www.csslab.cl/ejemplos/webiphone/ejemplo2.html">http://www.csslab.cl/ejemplos/webiphone/ejemplo2.html</a> “Enlace en CSSLab a “Ejemplo 2 iPhone”” [6]: <a href="http://www.csslab.cl/ejemplos/webiphone/ejemplo3.html">http://www.csslab.cl/ejemplos/webiphone/ejemplo3.html</a> “Enlace en CSSLab a “Ejemplo 3 iPhone”” [7]: <a href="http://www.csslab.cl/ejemplos/webiphone/ejemplo4.html">http://www.csslab.cl/ejemplos/webiphone/ejemplo4.html</a> “Enlace en CSSLab a “Ejemplo 4 iPhone”” [8]: <a href="http://www.csslab.cl/ejemplos/webiphone/ejemplo5.html">http://www.csslab.cl/ejemplos/webiphone/ejemplo5.html</a> “Enlace en CSSLab a “Ejemplo 5 iPhone”” [9]: <a href="http://www.csslab.cl/wp-content/uploads/2008/07/fonts.gif">http://www.csslab.cl/wp-content/uploads/2008/07/fonts.gif</a> </article> <article> <h1>Overflow en IE6</h1> Mon, 07 Jul 2008 17:43:22 +0000 Ayayay cuántos dolores de cabeza he tenido a causa de Internet Explorer 6. Son bugs, fallas y mañas múltiples que se necesitan dotes de malabarista para conocerlos (ni siquiera trato de entenderlos; sólo sé que existen) y buscar una solución. He abarcado un montón de ellos aquí en CSSLab, y al parecer este es uno más de ellos ya que la lista parece ser interminable. Desde que cambié el diseño de este sitio al actual donde la home tiene un scroll horizontal, no pude solucionarlo para IE6. Como ese es mi browser más odioado, lo dejé para ‘luego lo veo‘. Pero ya era hora de darle una solución final, y comencé a buscar sobre overflow: hidden en IE6. Precisamente, ese browser tiene un bug muy específico, que se da cuando tienes una caja contenedora que envuelve otra caja, y esta última tiene un position (relative o absolute) definido. Lo que sucede es que la caja que contiene no aplica el overflow: hidden; como debería, sin razón aparente. [Ver ejemplo 1][1]{.verejemplo} Maldito browser. No me canso de maldecirlo. 80% del mercado por puro monopolio. Bueno, la solución es demasiado simple, pero había que investigar un poco antes. Basta con aplicar position (relative o absolute) a la caja contenedora también y overflow funcionará para IE6. [Ver ejemplo final][2]{.verejemplo} ![Imagen en CSSLab de ejemplo de Overflow en IE6][3] Así que ya saben, si se dan esas condiciones y su caja no esconde el contenido como debería, probablemente esta es la solución. Pero cuidado, si tienen elementos flotando, quizás [algún][4] [método][5] de clearfix a la misma caja contenedora será necesario. [1]: <a href="http://www.csslab.cl/ejemplos/overflow_ie6/1.html">http://www.csslab.cl/ejemplos/overflow_ie6/1.html</a> “Enlace en CSSLab a “Ejemplo 1"” [2]: <a href="http://www.csslab.cl/ejemplos/overflow_ie6/final.html">http://www.csslab.cl/ejemplos/overflow_ie6/final.html</a> “Enlace en CSSLab a “Ejemplo Final”” [3]: <a href="http://www.csslab.cl/wp-content/uploads/2008/07/overflow_ie6.gif">http://www.csslab.cl/wp-content/uploads/2008/07/overflow_ie6.gif</a> [4]: <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/</a> “Enlace en CSSLab a “Flotando en la incertidumbre”” [5]: <a href="http://www.csslab.cl/2008/06/09/clearfix-ultimate/">http://www.csslab.cl/2008/06/09/clearfix-ultimate/</a> “Enlace en CSSLab a “clearfix ultimate”” </article> <article> <h1>Podcast 02</h1> Fri, 27 Jun 2008 02:22:10 +0000 Ya era hora, casi 2 años y les presento el segundo Podcast. ¿Porqué tanto tiempo pasó? se podrían preguntar… bueno, uno porque no le veía tanta utilidad un podcast en un sitio donde el código fuente es el protagonista. Pero este tema es de opinión, y espero sea mejor escucharlo que leerlo. En esta ocasión, el monólogo es: <ul> <li>Nueva Guerra de Browsers.</li> <li>Recomendaciones para un layout cross-browser.</li> </ul> Nuevamente, espero sus comentarios, sugerencias y/u opiniones. <a href="http://www.csslab.cl/ejemplos/podcast/podcast02.zip" title="Bajar Podcast 02">Bajar Podcast 02 (19.6mb .zip)</a>{.bajar} </article> <article> <h1>Tip Precoz 2: combinando @media</h1> Tue, 24 Jun 2008 16:45:57 +0000 Los <a href="http://www.w3.org/TR/REC-CSS2/media.html" title="Enlace externo a "Introduction to media types"" target="_blank">media type</a> especifican el soporte al cual apunta la hoja de estilos definida: pantalla (screen), [papel (print)][1], [móviles (handheld)][2], etc. Algunas propiedades CSS están diseñadas para medios específicos (page-break-after y page-break-before se usan para media=“print” por ejemplo), y en otros casos propiedades son compartidos por diferentes medios, pero usan diferentes unidades (pixel para pantalla, centímetros para papel). Usualmente se especifican los medios al cual apuntan las hojas de estilos como atributo de la etiqueta <link />, de la siguiente forma: <pre class="language-markup"><code><link href="estilos/layout.css" rel="stylesheet" type="text/css" media="screen" /> <link href="estilos/print.css" rel="stylesheet" type="text/css" media="print" /></code></pre> Sin embargo existen otros 2 métodos, los cuales pueden ser utilizados dentros mismo de las hojas de estilos. El segundo mediante @import: <pre class="language-css"><code>@import url("sintetizado.css") aural;</code></pre> Y el tercero, a través de la regla @media: <pre class="language-css"><code>@media print { body { font-size: 14pt } }</code></pre> Con esta regla, podemos definir dentro de nuestras hojas de estilos las propiedades y valores para cada medio, sin necesidad de linkear otras hojas de estilo externas: <pre class="language-css"><code>@media screen { body { color: #666; font-size: 12px; padding: 15px 0; } } @media print { body { background-color: #fff color: #000; padding: 1cm; } }</code></pre> Para entregar información más completa, todos los medios disponibles en CSS 2 son: <dl> <dt>all</dt> <dd>todos los medios</dd> <dt>aural</dt> <dd>para sintetizadores de voz</dd> <dt>braille</dt> <dd>para dispositivos táctiles que usan braille</dd> <dt>embossed</dt> <dd>utilizada para impresoras para braille</dd> <dt>handheld</dt> <dd>dispositivvos móviles</dd> <dt>print</dt> <dd>material impreso</dd> <dt>projection</dt> <dd>proyectores o impresores de transparencias</dd> <dt>screen</dt> <dd>pantallas en color en general</dd> <dt>tty</dt> <dd>medios con caracter en grilla, como teletipos, terminales o dispositivos móviles con capacidad limitada. Al tener nula resoución, no se debe usar la unidad de pixeles.</dd> <dt>tv</dt> <dd>dispositivos de televisión (baja resolución)</dd> </dl> <h4 id="link">Link:</h4> <ul> <li><a href="http://www.w3.org/TR/REC-CSS2/media.html" title="Enlace externo a "Introduction to media types"" target="_blank">Media types</a></li> </ul> [1]: <a href="http://www.csslab.cl/2005/11/15/mediaprint/">http://www.csslab.cl/2005/11/15/mediaprint/</a> “Enlace en CSSLab a “media=‘print’ (actualizado)”” [2]: <a href="http://www.csslab.cl/2006/03/07/css-para-moviles/">http://www.csslab.cl/2006/03/07/css-para-moviles/</a> “Enlace en CSSLab a “CSS para móviles”” </article> <article> <h1>Tip Precoz 1: atributos contextuales</h1> Fri, 20 Jun 2008 17:02:07 +0000 Un tip precoz es un método tan corto y rápido, que casi que no es un artículo en sí. Los artículos son más bien extensos, donde explico paso-por-paso alguna técnica propuesta. En esta ocasión es casi como un twitter-artículo. La presente técnica la conozco pero no sé de dónde la saqué, ya que por más que busco en la web no encuentro documentación alguna al respecto. No sé ni cómo se llama, así que la incluí dentro de los selectores contextuales, ya que se comporta respetando los atributos adyacentes. Veamos la siguiente situación: tengo una etiqueta con una class=“destacado” donde lo que hace es poner rojo el color del texto: <pre><code class="language-css">.destacado { color: red; }</code></pre> <pre><code class="language-markup"><blockquote class="destacado"> Lorem ipsum dolor sit amet. </blockquote></code></pre> Esa class la uso en varias otras etiquetas, pero hay una que por X motivo tiene un id=“unico”, y necesito que esa etiqueta tenga un tamaño de fuente mayor. Lo normal sería pensar en crear otra class que tenga color rojo y font-size deseado. Otra solución es crear una class con sólo el nuevo font-size y aplicarlo junto a la class=“destacado” ya existente. Pero otra solución es utilizar el id=“unico” junto a la class=“destacado” ya declarados para ello, de la siguiente manera: <pre><code class="language-css">#unico.destacado { font-size: 3em; }</code></pre> <pre><code class="language-markup"><blockquote id="unico" class="destacado"> Amet sit dolor ipsum lorem. </blockquote></code></pre> Como .destacado ya está declarado para poner color rojo al texto, sólo basta agregar el nuevo tamaño de texto. Ahora, hay otra situación. Qué pasa si, por esas cosas de la vida, tengo dos classes en una misma etiqueta: <pre><code class="language-markup"><blockquote class="destacado menor"> Bla ble bli blo blu. </blockquote></code></pre> Y quiero que el texto sea rojo (ya declarado en .destacado) pero con un font-size menor. De la misma forma anterior: <pre><code class="language-css">.destacado.menor { font-size: 0.5em; }</code></pre> Y… si por esos accidentes raros de la vida profesional te tocara un elemento con 1 id y 2 classes: <pre><code class="language-markup"><blockquote id="unico" class="destacado mayor"> Cla cle cli clo clu. </blockquote></code></pre> Y quieres también darle estilo pero sólo cuando esté dado esa situación… supones bien, de la siguiente manera: <pre><code class="language-css">#unico.destacado.mayor { font-size: 6em; }</code></pre> [Ver todos los ejemplos juntos][1]{.verejemplo} Me da gusto esta vez de anunciar que esto funciona en IE6… por lo tanto, los otros browsers buenos también lo aceptan. [1]: <a href="http://www.csslab.cl/ejemplos/tip_precoz/selector.html">http://www.csslab.cl/ejemplos/tip_precoz/selector.html</a> “Enlace a ejemplo en CSSLab de “Tip Precoz 1: atributos contextuales”” </article> <article> <h1>clearfix ultimate</h1> Mon, 09 Jun 2008 22:39:29 +0000 Muchas han sido las veces que [he nombrado][1] y [recontra-aplicado][2] el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una class=“clearfix” y nuestra caja vuelve a comportarse como debería. Pero es código extra que quizás ensucie nuestra hoja de estilos, y andar agregando class‘es que no tienen sentido semántico puede que no agrade a los más puristas. Pero existe desde hace mucho tiempo otra solución al mismo problema. Ya [lo mencioné de rebote en un artículo][3]. Este método no tiene nombre conocido (por lo menos en los sitios que he leído no lo nombran de alguna manera especial). Es tan simple que dan ganas de tirarse por la ventana por no conocerlo antes. Se trata de utilizar la propiedad CSS overflow en la caja que está colapsando. Eso es todo. Basta con incluirla en algún de los siguientes valores: <ul> <li>overflow: auto;</li> <li>overflow: hidden;</li> <li>overflow: scroll;</li> </ul> Y la caja volverá a comportarse como debiera: envolviendo a los elementos flotantes dentro de ella. La teoría es simple: como el valor por defecto es overflow: visible, esto hace que la caja crezca para adaptarse al tamaño que tienen sus elementos (etiquetas) hijo. Con visible se asume que se han dado los valores de ancho (width) y alto (height) y por eso nada sucede; ya con los demás valores ya nombrados, obliga a la caja contenedora a re-calcular sus dimensiones, tomando en cuenta ahora a los elementos hijos que están con float. Con alguno de estos valores de overflow, le recordamos a la caja contenedora que tienen elementos hijo (flotando) y que debe conocer sus tamaños para envolverlos. El ejemplo más clásico a continuación. El HTML: <pre><code class="language-markup"><div id="contenedor"> <div class="flotando_izquierda"> Floto hacia la izquierda </div> <div class="flotando_derecha"> Floto hacia la derecha </div> </div></code></pre> Y el CSS: <pre><code class="language-css">#contenedor { overflow: auto; height: 1%; } .flotando_izquierda { float: left; } .flotando_derecha { float: right; }</code></pre> [Ver ejemplo][4]{.verejemplo} <div class="pullquote"> </div> Para que IE6 reconociera este método, hubo que aplicar a la caja contenedora (en este caso #contenedor) height: 1%, haciendo que todos los browsers modernos desplieguen de igual manera este método. El único detalle que le encontré fue al momento de utilizar dentro de #contenedor un elemento [posicionado absolutamente][5], relativo a él, lo que hace que se muestre la barra de scroll (dado el overlow: auto;). En ese caso, lo mejor es utilizar overflow: hidden, lo que hace a la caja esconder al elemento absoluto, en el caso de éste ser más grande que la caja misma. [Ver ejemplo con absolute][6]{.verejemplo} Este caso es bastante específico, y creo que no hace que este método deje de ser una muy buena alternativa de despeje. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/" title="Enlace externo a "Simple Clearing of Floats"" target="_blank">Simple Clearing of Floats</a></li> <li><a href="http://www.quirksmode.org/css/clearing.html" title="Enlace externo a "Clearing floats"" target="_blank">Clearing floats</a></li> <li><a href="http://www.planseldon.com/blog/hasta-siempre-clearboth/" title="Enlace externo a "Hasta siempre, clear:both"" target="_blank">Hasta siempre, clear:both</a></li> </ul> [1]: <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/</a> “Enlace en CSSLab a “Flotando en la incertidumbre”” [2]: <a href="http://www.csslab.cl/2007/03/09/clearfix-el-widget/">http://www.csslab.cl/2007/03/09/clearfix-el-widget/</a> “Enlace en CSSLab a “.clearfix: el widget”” [3]: <a href="http://www.csslab.cl/2008/01/28/review-1-origo-css/">http://www.csslab.cl/2008/01/28/review-1-origo-css/</a> “Enlace en CSSLab a “Review 1: Origo CSS”” [4]: <a href="http://www.csslab.cl/ejemplos/clearfix_ultimate/overflow.html">http://www.csslab.cl/ejemplos/clearfix_ultimate/overflow.html</a> “Ver enlace a ejemplo “Clearfix Ultimate”” [5]: <a href="http://www.csslab.cl/2007/05/11/absolutamente-si/">http://www.csslab.cl/2007/05/11/absolutamente-si/</a> “Enlace en CSSLab a " Absolutamente sí”" [6]: <a href="http://www.csslab.cl/ejemplos/clearfix_ultimate/overflow_absolute.html">http://www.csslab.cl/ejemplos/clearfix_ultimate/overflow_absolute.html</a> “Ver enlace a ejemplo “Clearfix Ultimate con Absolute”” </article> <article> <h1>Parallax en uso real</h1> Thu, 29 May 2008 20:43:39 +0000 Luego del anterior artículo develando [cómo se realiza el efecto Parallax con CSS][1], surgieron dudas de su real aplicación en proyectos web. Así como se presentó no tiene mucho sentido, y como mencioné, es difícil verlo aplicado sin que se note el efecto que produce (ya que el usuario no suele modificar el tamaño de la ventana de su browser). Así que para paliar [esa frustración que surgió en los comentarios][2], me propuse inventar un método para verlo funcionando de acuerdo a la interacción del usuario con el sitio. Primero intenté con el movimiento del mouse sobre la superficie de la ventana (con lo que hice para el sitio de <a href="http://www.2monos.net/" target="_blank" title="Enlace externo a "2monos.net"">2monos</a>), pero no funcionó por problemas de posicionamiento relativo de los elementos. Luego, pensé en <a href="http://demos.mootools.net/Fx.Scroll" target="_blank" title="Enlace externo a a "Mootools.net - FX.Scroll"">movimiento horizontal mediante anclas</a>; algo que ya había utilizado en otras ocasiones anteriores. Felizmente logré integrarlo a través del grandioso Mootools. [Ver ejemplo][3]{.verejemplo} En esta ocasión utilicé bastantes más capas que en el ejemplo original (6 en total… un poco exagerado ya que los PNG‘s pesan bastante), pero el HTML fue construído de igual manera: <pre><code class="language-markup"><div id="nube"> <div id="montanas"> <div id="ciudad"> <div id="personas"> <div id="persona1"> <img src="imgs/persona1.png" width="280" height="280"> Nulla facilisi. In vel sem... </div> <div id="persona2"> <img src="imgs/persona2.png" width="280" height="280"> Aliquam et nisl vel ligula... </div> <div id="persona3"> <img src="imgs/persona3.png" width="280" height="280"> Nunc auctor bibendum eros.... </div> </div> <div id="enredadera"> <div id="hojas"> </div> </div> </div> </div> </div></code></pre> Y el CSS: <pre><code class="language-css">#nube, #montanas, #ciudad, #enredadera, #hojas, #personas { position: absolute; height: 100%; width: 200%; left: -150px; }</code></pre> Un detalle importante fue ampliar bastante el ancho de todas las cajas para que puedan soportar un desplazamiento horizontal contínuo (cuidando siempre que sea en porcentaje; así se conserva el efecto Parallax). Cada imagen es aplicada como background y posicionada horizontalmente en porcentaje y verticalmente de acuerdo a su ubicación (top ó bottom). <pre><code class="language-css">#nube { background: url(../imgs/nube.png) 20% top repeat-x; } #montanas { background: url(../imgs/montanas.png) 10% bottom repeat-x; } #ciudad { background: url(../imgs/ciudad.png) 30% bottom repeat-x; } #enredadera { background: url(../imgs/enredadera.png) 40% top repeat-x; } #hojas { background: url(../imgs/hojas.png) 50% bottom repeat-x; }</code></pre> Si modifican el ancho de la ventana verán que se conserva el efecto Parallax, salvo la capa de personas la que pretendo que sea contenido (dado el caso que se requiera así). Ahora, la magia se aplica a través de Mootools. El efecto de desplazamiento está dentro del .js que incluí al bajar el archivo y se llama [FX.Style][4]. Con él haremos que mediante un evento de click en cada botón, cada <div> se desplace en diferentes medidas de su margin-left. O sea, la primera capa #nubes se moverá -100px a la izquierda, luego #montanas lo harán -200px y así sucesivamente, logrando un efecto de profundidad en cada capa ya que se moverán en diferentes medidas: <pre><code class="language-javascript">$('btn_uno').addEvent('click', function(){ nube.start({ 'margin-left': 0 }); montanas.start({ 'margin-left': 0 }); ciudad.start({ 'margin-left': 0 }); enredadera.start({ 'margin-left': 0 }); hojas.start({ 'margin-left': 0 }); personas.start({ 'margin-left': 0 }); }); $('btn_dos').addEvent('click', function(){ nube.start({ 'margin-left': -100 }); montanas.start({ 'margin-left': -200 }); ciudad.start({ 'margin-left': -300 }); enredadera.start({ 'margin-left': -400 }); hojas.start({ 'margin-left': -1000 }); personas.start({ 'margin-left': -500 }); }); $('btn_tres').addEvent('click', function(){ nube.start({ 'margin-left': -500 }); montanas.start({ 'margin-left': -600 }); ciudad.start({ 'margin-left': -700 }); enredadera.start({ 'margin-left': -800 }); hojas.start({ 'margin-left': -1500 }); personas.start({ 'margin-left': -900 }); });</code></pre> <div class="pullquote"> </div> Pueden ver el código completo de cada elemento: <ul> <li>[Código CSS][5]</li> <li>[Código JS][6]</li> </ul> [Ver ejemplo final][3]{.verejemplo} PD: El movimiento en Safari 3 anda perfecto, muy suave; ya en Firefox 2 y 3 se pega algunos saltos, y en Opera 9.2 anda mas cortado aún… Quizás sea mi computador, espero sus impresiones sobre esto. [1]: <a href="http://www.csslab.cl/2008/05/26/reproduciendo-parallax/">http://www.csslab.cl/2008/05/26/reproduciendo-parallax/</a> “Enlace en CSSLab a “Reproduciendo Parallax”” [2]: <a href="http://www.csslab.cl/2008/05/26/reproduciendo-parallax/#comment-19952">http://www.csslab.cl/2008/05/26/reproduciendo-parallax/#comment-19952</a> “Comentario en CSSLab en “Reproduciendo Parallax”” [3]: <a href="http://www.csslab.cl/ejemplos/parallax_mootools/">http://www.csslab.cl/ejemplos/parallax_mootools/</a> “Ejemplo en CSSLab de “Parallax con Mootools”” [4]: <a href="http://docs.mootools.net/Effects/Fx-Style.js">http://docs.mootools.net/Effects/Fx-Style.js</a> “Enlace externo a “Mootools.net - FX.Style”” [5]: <a href="http://www.csslab.cl/ejemplos/parallax_mootools/css/layout.css">http://www.csslab.cl/ejemplos/parallax_mootools/css/layout.css</a> “Archivo CSS en CSSLab de “Parallax con Mootools”” [6]: <a href="http://www.csslab.cl/ejemplos/parallax_mootools/js/lib.js">http://www.csslab.cl/ejemplos/parallax_mootools/js/lib.js</a> “Archivo JS en CSSLab de “Parallax con Mootools”” </article> <article> <h1>Reproduciendo Parallax</h1> Mon, 26 May 2008 21:20:42 +0000 El efecto Parallax es una técnica que consiste en aplicar el efecto de profundidad a través de capas, utlizando principalmente CSS. Con esto podemos simular un pseudo-3D dentro de un escenario. Esta técnica es prácticamente la misma <a href="http://en.wikipedia.org/wiki/Parallax_scrolling" title="Enlace externo a "Parallax Effect in Wikipedia.org"" target="_blank">utilizada en los juegos 2D</a> donde el personaje se mueve por su mundo (Sonic, Mario, etc) y el fondo se mueve en diferentes velocidades, simulando profundidad. Esta es una técnica muy limitante, ya que se necesita mucha creatividad para encontrar un uso práctico que impacte al usuario y que principalmente no sea un estorbo en la navegación del sitio. Otro punto importante es que lo más probable necesiten hacerlo con PNG transparente, lo que hace que IE6 sea excluído (salvo utilicen algun buen filtro de PNG para él). Un par de gradiosos ejemplos lo encontramos en el sitio de <a href="http://www.silverbackapp.com/" title="Enlace externo a "Efecto paralllax en silverbackapp.com"" target="_blank">Silverback</a> y de <a href="http://weallhatequickbooks.com/" title="Enlace externo a "Efecto parallax en weallhatequickbooks.com"" target="_blank">We all hate quick books</a>. En este artículo les mostraré cómo se realiza, y lo más probable es que se hagan la misma pregunta que yo me hice: ¿porqué #&œ¥Ω no se me ocurrió a mí antes? Parallax no es muy amigable, ya que a primera vista no se nota. Se necesita mover la ventana del browser para recién notar el efecto. Primero les presento el ejemplo final, para que puedan apreciar lo que haremos. Si modifican el tamaño de su ventana podrán notar de qué les estoy hablando [Ver ejemplo final][1]{.verejemplo} Primero necesitamos de las imágenes que formarán nuestras capas. Cuiden de prepararlas cosa que el final y el principio calcen perfectamente; en mi caso con 3 capas necesité montañas, árboles y unas ramas desenfocadas como se muestran en el siguiente diagrama: Luego, el HTML. Básicamente se compone de (en mi caso) 3 div‘s, uno para cada capa (cada capa anidado en otra): <pre><code class="language-markup"><div id="montanas"> <div id="arboles"> <div id="hojas"> </div> </div> </div></code></pre> El <div> #montanas será el que se despliegue más atrás; así #hojas será el que esté más adelante y el que se moverá más rápido que las otras. El CSS es muy simple. El efecto se logra con un juego de porcentajes: mientras agregamos las imágenes de fondo de los div‘s mediante background-image, posicionamos cada capa (con background-position) con porcentajes horizontales: mientras las montañas se ubican a 30% de la izquierda, las hojas estarán a 70% lo que hará que se muevan en diferentes velocidades si la ventana se mueve. Este juego de porcentajes es toda la técnica, el resto será vil [posicionamiento absoluto][2] (para que los elementos estén a 100% alto y ancho, y se ubiquen en el extremo inferior del browser): <pre><code class="language-css">#montanas { background: url(images/montanas.png) 30% bottom repeat-x; position: absolute; height: 100%; width: 100% } #arboles { background: url(images/arboles.png) 50% bottom repeat-x; position: absolute; height: 100%; width: 100% } #hojas { background: url(images/hojas.png) 70% bottom repeat-x; position: absolute; height: 100%; width: 100% }</code></pre> [Ver nuevamente ejemplo final][1]{.verejemplo} [1]: <a href="http://www.csslab.cl/ejemplos/parallax/">http://www.csslab.cl/ejemplos/parallax/</a> “Enlace en CSSLab a “Ejemplo Final Parallax”” [2]: <a href="http://www.csslab.cl/2007/05/11/absolutamente-si/">http://www.csslab.cl/2007/05/11/absolutamente-si/</a> “Enlace en CSSLab a “Absolutamente sí”” </article> <article> <h1>Review 3: No me hagas pensar</h1> Tue, 20 May 2008 15:18:04 +0000 Siempre que viaje me traigo libros, ya que en Chile son muy caros y no incentiva siquiera pensar en comprar uno. En un viaje a Brasil me traje uno que hace mucho tenía ganas de leer: Don’t make me think, de Steve Krug. A primera vista es un libro bastante delgado, lo que me incentivó a leerlo durante ese mismo viaje. Su temática es muy precisa: aborda el concepto detrás de la usabilidad web, y el sentido común para lograr una exitosa experiencia por parte del usuario. Steve entrega muchos tips, técnicas y ejemplos de su experiencia personal, lo que valoro mucho de este libro. Su lectura es muy amena y precisa; él mismo lo deja claro desde el comienzo -"este es un libro para que sea leído en un viaje corto de avión"- lo que hace la lectura muy fácil. Entre los temas que toca, están: <ul> <li>Patrones de usuario</li> <li>Diseño de navegación</li> <li>Layout de una página de inicio</li> <li>Tests de usabilidad</li> </ul> Ya van en la segunda edición (2006), y como el mercado web va tan rápido, creo que ya es hora de una tercera actualización de sus contenidos y ejemplos principalmente (muestra sitios web del 2000… totalmente obsoletos). Muy recomendable, lamentablemente no se encuentra en librerías locales. Mi copia está en portugués y la traducción no es la mejor (mucho tecnicismo que no puede ser traducido); me imagino que en español debiese pasar lo mismo. Si tienen buen inglés, no duden en <a href="http://www.amazon.com/s/ref=nb_ss_gw/002-6136587-2041654?url=search-alias%3Daps&field-keywords=no+me+hagas+pensar&x=0&y=0" title="Enlace externo a "No me hagas pensar en Amazon.com"" target="_blank">encargar su copia</a>. </article> <article> <h1>Lo ví y me gustó 27</h1> Wed, 14 May 2008 16:14:52 +0000 #27 – 14 Mayo 2008 <a href="http://faviconstore.com/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.asesoriagrafica.cl/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Más tipografías con sIFR</h1> Thu, 08 May 2008 19:46:58 +0000 Una de las grandes limitaciones de diseño web está en el manejo tipográfico, ya que tenemos una escasa gama de tipografías disponibles a la que podames aspirar que posean todos los usuarios. Hablamos de Arial, Helvetica, Verdana y Tahoma para las sans-serif (palo seco); Georgia, Times/Times New Roman para las serif y Courier/Courier New para monospace. Y sería, tenemos limitada la creatividad con eso. Si pensamos en utilizar una font especial, lo único que tenemos es recortarla como un GIF y ponerlas con alguna [técnica de text-replacement][1]. Pero ya existe sIFR. Acrónimo de Scalable Inman Flash Replacement, es una técnica que permite que reemplaces elementos de texto con equivalentes en Flash. sIFR es una solución cross-browser y_cross-platform_ para asuntos de tipografía en la web. Su funcionamiento es bastante práctico. Está compuesto de una película SWF, un archivo Javascript y dos archivos CSS. Con el .swf lo que hará es incluir la tipografía que quieras utilizar en uno o varios estilos (normal, bold, italic). Con el .js se realizará la magia de reemplazar el texto que definas con la película .swf pero sin inyectar el objeto, o sea, tu código fuente generado no tendrá ningún u , sino que estará el texto que tengas escrito tal y como sería un HTML. Ya los .css ayudan al .js a emplazar las películas (a través de un juego con visibility). La idea no es reemplazar todos tus textos con tipografías en Flash, sino ser prudentes y sólo enfocarnos en títulos, bloques (blockquote) u otros elementos destacables. Lo bueno es que no pierdes la [semántica][2] y los indexadores leerán tu sitio tal y como sería un HTML, ya que realmente ES un HTML. Otra ventaja es que si utilizas la película Flash más de una vez, ésta quedará en el cache del usuario y será cargada sólo una vez, lo que no hará taaaaaaan grave el peso que ganas con esto. Ahora, veámoslo en la práctica: [Ver Ejemplo 1][3]{.verejemplo} No es muy complicado de implementar, pero me costó la primera vez así que lo haré didáctico para todos, detallando paso por paso. <h3 id="paso-1">Paso 1</h3> Bajar el sIFR de <a href="http://dev.novemberborn.net/sifr3/nightlies/" title="Enlace externo a sIFR Nightlies" target="_blank">su sitio web</a>. <h3 id="paso-2">Paso 2</h3> Crear tu película .swf con la font que desees. Para eso, debes abrir el .fla que está dentro del directorio flash y abrir el MovieClip ‘holder’, allí seleccionas el área de texto dinámico y cambias la tipografía que trae por defecto (Verdana) por la que quieras (en mi caso será Frutiger Condensed… bella). ![Paso 2: seleccionar tipografía en sIFR][4] Un detalle importante para textos no-anglos son los acentos. Por defecto se incluyen caracteres básicos, números y algunos símbolos. Debes agregar a mano los acentos para nuestro idioma que creas necesarios: á é í ó ú ñ ä ë ï ö ü. ![Paso 2: seleccionar caracteres especiales para sIFR][5] Luego publica tu película como siempre lo haces en Flash (command+enter o control+enter en Win) dentro de esta carpeta que estás trabajando (flash). Esto es importante ya que contiene algunos .as que hacen que la magia ocurra. Ponle un nombre característico a tu .swf, quizás el nombre de la familia tipográfica que estás usando sería apropiado. ![Paso 2: exportar película para sIFR][6] <h3 id="paso-3">Paso 3</h3> Ordena tus archivos. Recomiendo que los juntes dentro de un único directorio llamado /sifr. Los únicos que necesitarás de todo eso son: <ul> <li>tu_tipografia.swf</li> <li>sIFR-print.css</li> <li>sIFR-screen.css</li> <li>sifr.js</li> </ul> <h3 id="paso-4">Paso 4</h3> Ahora toca configurar nuestro HTML. Lo primero es incluir el .js y los .css correspondientes: <pre><code class="language-markup"><link rel="stylesheet" href="sifr/sIFR-screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="sifr/sIFR-print.css" type="text/css" media="print" /> <script type="text/javascript" src="sifr/sifr.js"></script></code></pre> Lo segundo, agregar algunos comandos en Javascript para hacer que nuestra película funcione con los selectores que deseemos: <pre><code class="language-javascript"> var tu_tipografia = { src: 'sifr/tu_tipografia.swf' }; sIFR.activate(tu_tipografia); sIFR.replace(tu_tipografia, { selector: 'h1' ,css: { '.sIFR-root': { 'color': '#FF0000', 'font-size': 56, 'text-align': 'center' } } ,wmode: 'transparent' });</code></pre> Claramente la variable tu_tipografia y todo lo que tenga este nombre deberá coincidir con el nombre que le has puesto a tu película SWF con la fuente que agregaste en el Paso 2. El resto son comandos donde dicen cuál es el selector que quieres reemplazar (un H1, una class, un id… enfin) e incluso <a href="http://wiki.novemberborn.net/sifr3/Styling" title="Enlace externo a "CSS styles in sIFR"" target="_blank">comandos CSS</a> (no todos, principalmente para estilos de texto como color y tamaño por ejemplo). <h3 id="paso-5">Paso 5</h3> Subir todo a un servidor, ya que localmente no podrás ver nada. Desde ahí la verás los resultados. [Ver Ejemplo Final][7]{.verejemplo} Miren el código fuente, verán lo simple que es y que funciona de maravilla. <h4 id="link">Link</h4> <ul> <li><a href="http://wiki.novemberborn.net/sifr3" title="Enlace externo a "sIFR 3 Documentation & FAQ"" target="_blank">sIFR 3</a></li> </ul> [1]: <a href="http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/">http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/</a> “Enlace en CSSLab a “Image Replacement o cómo reemplazar contenido por imagen”” [2]: <a href="http://www.csslab.cl/2006/04/12/un-paseo-por-la-semantica/">http://www.csslab.cl/2006/04/12/un-paseo-por-la-semantica/</a> “Enlace en CSSLab a “Un paseo por la Semántica”” [3]: <a href="http://www.csslab.cl/ejemplos/sifr/ejemplo1.html">http://www.csslab.cl/ejemplos/sifr/ejemplo1.html</a> “Ver Ejemplo 1 sobre sIFR en CSSLab” [4]: <a href="http://www.csslab.cl/wp-content/uploads/2008/05/fig1.jpg">http://www.csslab.cl/wp-content/uploads/2008/05/fig1.jpg</a> [5]: <a href="http://www.csslab.cl/wp-content/uploads/2008/05/fig2.jpg">http://www.csslab.cl/wp-content/uploads/2008/05/fig2.jpg</a> [6]: <a href="http://www.csslab.cl/wp-content/uploads/2008/05/fig3.jpg">http://www.csslab.cl/wp-content/uploads/2008/05/fig3.jpg</a> [7]: <a href="http://www.csslab.cl/ejemplos/sifr/sifr.html">http://www.csslab.cl/ejemplos/sifr/sifr.html</a> “Ver Ejemplo Final sobre sIFR en CSSLab” </article> <article> <h1>Un poco de historia: Browser Wars</h1> Mon, 05 May 2008 21:53:49 +0000 Eran mediados de los ’90, y nadie vaticinaba los acontecimientos que desencadenarían la actual crisis de los estándares, efectos que aún persisten. Browser Wars fue la competencia entre web browsers o navegadores web por la dominación del mercado. Para ser más precisos, fue la lucha entre 2 compañías, Netscape y Microsoft por imponer sus navegadores por sobre el otro y así obtener más usuarios. Decorría 1995 y la web ya tenía la atención del público online. Netscape Navigator fue el primer gran browser para navegar en la web en esos tiempos, y Microsoft divisó el potencial económico de la web, por lo que compró licencias del pequeño browser Mosaic para crear su primera versión de Internet Explorer 1.0, la cual fue incluída en el paquete de su sistema operativo Windows 95. Meses más tarde salía Internet Explorer 2.0, y la guerra era ya evidente. El objetivo de Microsoft era dirigir la atención de los usuarios de la web hacia sus productos, apuntando la página de inicio de su navegador hacia su propio sitio web. Dado a esto, Microsoft pudo distribuir Explorer sin cobrar por ello. La carrera por nuevas versiones, tanto de Netscape Communicator como de Internet Explorer no se hizo esperar, donde se daba prioridad a nuevas funcionalidades más que la corrección de errores de sus versiones anteriores, dando como fruto productos inestables, muchos fallas de seguridad y lenguajes cada vez más propios que estandarizados. Con esto fue común verse imágenes del tipo “Mejor visto en Netscape” u “Optimizado para Internet Explorer”. Esto indicaba los bandos contrarios que estaban ya marcados. En 1995 Netscape contaba con un 90% del mercado de navegadores, y Microsoft comenzó a declinar la balanza hacia su lado con la ventaja de tener el monopolio de sistemas operativos y la inclusión de Explorer en ellos, a pesar de de ser inferior en prestaciones. Mientras Netscape era una empresa pequeña y vulnerable financieramente al depender del desarrollo de sólo 1 software, Microsoft inyectaba fondos de las ventas de su Windows y sacaba mejoras cada vez más rápidas. La derrota de Netscape de vío finalmente en 1998, y desde entonces Internet Explorer tiene alrededor del 90% del mercado de navegadores. Esta guerra terminó cuando Microsoft dejó de tener competencia seria en el mercado de navegadores. Con esto no hubo grandes innovaciones por años, hasta que el mercado ha vuelto a la actividad con el crecimiento de Mozilla Firefox en 2002. Esta guerra ha provocado varias consecuencias: <ul> <li>Los estándares web fueron debilitados a raíz del monopolio de sólo 1 navegador. Carencias en las hojas de estilos (CSS), el formato de imágenes PNG y la interpretación del XHTML son algunas de ellas.</li> <li>La inclusión de extensiones propietarias y poco universales, como VBScript, DHTML o ActiveX, lo que provoca más incompatibilidad entre plataformas.</li> <li>Mayor vulnerabilidad a ataques informáticos, dado a la predominancia de un navegador con muchas fallas de seguridad.</li> </ul> Actualmente, el mercado es abarcado por 4 empresas: Microsoft (Internet Explorer), Mozilla (Firefox), Apple (Safari) y Opera (Opera Browser), aunque los 2 primeros son los con mayor uso por usuarios en la actualidad. *extracto del ramo eLearning de <a href="http://elearning2.uniacc.cl/index.php?option=com_content&task=view&id=155&Itemid=552" title="Enlace externo a "INGENIERÍA INFORMÁTICA MULTIMEDIA"" target="_blank">Programación Web</a> que imparto en la <a href="http://www.uniacc.cl/" title="Enlace externo a "Universidad UNIACC"" target="_blank">Universidad UNIACC</a>. *Imágenes encontradas en Google Images. </article> <article> <h1>Rayos-X contra no-estándares</h1> Fri, 25 Apr 2008 17:50:30 +0000 La idea de una hoja de estilos que muestre evidentemente un marcado HTML deficiente o anticuado no es de nada nueva. Ya <a href="http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/" title="Enlace externo a "Diagnostic Styling"" target="_blank">Eric Meyer hizo referencia</a> a esfuerzos para desarrollar estilos que diagnosticaran etiquetas o atributos mal utilizados o llanamente obsoletos dentro de una página web. El objetivo es tener un grupo de estilos que puedan ser aplicados durante la fase de desarrollo (o armado) de un sitio web, o durante el análisis para un rediseño. Elementos tan simples como links vacíos, o que no llevan a ningún lado (<a href="#">), imágenes sin definición de atributo alt () o el mismo uso del atributo style="" dentro de cualquier etiqueta son detectados y mostrados con un estilo que traté de que fuera bastante notorio: bordes gruesos o colores poco comunes de fondo, por ejemplo. [Ver ejemplo 1][1]{.verejemplo} En el ejemplo 1, podrán ver (si ven el código fuente) que la estructura de esa página está bastante mal hecha, seguramente por algún software que hace el trabajo fácil. Al aplicar la hoja de estilos rayos-x.css, podrán notar todo lo que hace evidente: [Ver ejemplo 2][2]{.verejemplo} La hoja de estilos que hace la detección, contiene lo siguiente: <pre><code class="language-css">/* -- atributos del <body> obsoletos -- */ body[bgcolor], body[background], body[link], body[alink], body[vlink] { border: 3px dashed red; } /* -- etiquetas obsoletas desde HTML 4.01 -- */ font, center, marquee, b, i, u, strike, menu, basefont, applet { background: fuchsia; font-weight: bold; } /* -- atributos de estilo dentro de etiquetas, obsoletos todos -- */ *[align], *[color] { border: 2px double blue; } /* -- atributos de estilo para etiquetas comunes -- */ div[bgcolor], div[background], table[bgcolor], table[background], td[bgcolor], td[background], th[bgcolor], th[background] { background: lime; } /* -- detectando etiquetas vacias -- */ div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { background: yellow; } /* -- detectando atributo style dentro de cualquier etiqueta -- */ *[style] { border: 1px solid cyan; } /* -- busca por algun spacer que se haya escapado -- */ img[src$="spacer.gif"] { border: 4px solid fuchsia; } /* -- busca por atributos alt y title vacios en <img /> -- */ img[alt=""], img[title=""] { border-width: 3px; } /* -- busca atributo title vacio en <a> -- */ a[title=""] { background: chocolate; } /* -- busca links de ancla vacio -- */ a[href="#"] { background: lime; } /* -- busca por links vacios -- */ a[href=""] { background: fuchsia; }</code></pre> Y para utilizarla, sólo deben linkearla a la página que deseen de la siguiente manera: <pre><code class="language-markup"><link rel="stylesheet" href="rayos-x.css" type="text/css" media="screen" /></code></pre> <h3 class="bajar" id="descargar-rayos-xzip-1kb3">[Descargar rayos-x.zip [1kb]][3]</h3> [1]: <a href="http://www.csslab.cl/ejemplos/rayos-x/ejemplo1.html">http://www.csslab.cl/ejemplos/rayos-x/ejemplo1.html</a> “Enlace en CSSLab para “Ver ejemplo 1"” [2]: <a href="http://www.csslab.cl/ejemplos/rayos-x/ejemplo2.html">http://www.csslab.cl/ejemplos/rayos-x/ejemplo2.html</a> “Enlace en CSSLab para “Ver ejemplo 2"” [3]: <a href="http://www.csslab.cl/ejemplos/rayos-x/rayos-x.zip">http://www.csslab.cl/ejemplos/rayos-x/rayos-x.zip</a> “Enlace en CSSLab para “descargar estilo rayos-x.css”” </article> <article> <h1>Review 2: Shadowbox</h1> Thu, 17 Apr 2008 20:56:04 +0000 [Ventanas modales][1] actualmente hay por montones, cada una ofrece mejores prestaciones y se comportan relativamente bien dentro del entorno de desarrollo al cual fueron creadas. [Lightbox][2] fue uno de los primeros, [Thickbox][3] uno de los más completos, <a href="http://www.orangoo.com/labs/GreyBox/" title="Enlace externo a "Greybox - A pop-up window that doesn't suck."" target="_blank">Greybox</a>, <a href="http://www.stickmanlabs.com/lightwindow/" title="Enlace externo a "LightWindow v2.0"" target="_blank">Lightwindow</a>… enfin. Hace poco descubrí el que creo es el que va más allá de todos, y que merece una especial atención: <a href="http://mjijackson.com/shadowbox/index.html" title="Enlace a ""Shadowbox 1.0" target="_blank">Shadowbox</a>. <blockquote> Shadowbox es una ventana modal escrita enteramente en Javascript. Puede desplegar una amplia gama de archivos gráficos (imágenes, películas, etc.). Es crossbrowser, multiplataforma, de código limpio, relativamente bien documentado (aunque es nuevo). </blockquote> Más prestaciones: <ul> <li>Su marcado se apega a los estándares web (valida).</li> <li>Puede adaptarse fácilmente a cualquier aplicación.</li> <li>Fácilmente customizable mediantye skins (CSS).</li> <li>Soporta formatos de imágenes, Quicktime, Windows Media Player, Flash, Flash Video, HTML y páginas externas.</li> <li>Maneja errores de plugin elegantemente, desplegando una sugerencia de link para bajarlo si hay necesidad.</li> <li>Ofrece opciones configurables sin tocar código fuente.</li> <li>Soporta enlaces vía mapeo de imágenes (mediante la etiqueta <area>).</li> <li>Compatible con Firefox 1.5+, Camino, Safari 2+, Opera 9+, Internet Explorer 6+.</li> </ul> Impresionante, ¿no? Pero lo que más me llamó la atención fue otro detalle: <ul> <li>Mediante adaptadores, puedes usarla sin importar el framework que hayas implementado en tu sitio, o que estés acostumbrado a trabajar. O sea, puedes usar Shadowbox con Prototype, jQuery, Yahoo! UI, Mootools, Ext o Dojo; el que más te acomode. ¡Genial! Sólo debes incluir el adapter necesario de acuerdo al framework a gusto del consumidor.</li> </ul> Lo implementé en un nuevo proyecto personal llamado <a href="http://www.rulz.cl/" title="Enlace externo a "Rulz.cl"" target="_blank">Rulz</a>, y realmente muy potente. Lo mejor es que actúa mediante la asignación del atributo rel=“shadowbox” dentro de <a>, lo que a contrario de Thickbox (que fue el que estaba usando), no me interfiere en el enlace ya que estaba ya pasando algunos parámetros de geo-ubicación (para Google Maps, pueden probarlo si entran a alguna reseña y presionan “Ver mapa de ubicación”). <h4 id="pros">Pros:</h4> <ul> <li>fácil implementación.</li> <li>ultra-mega-customizable.</li> <li>multi-framework (!!!).</li> </ul> <h4 id="contras">Contras:</h4> <ul> <li>no es tan liviano como quisiera.</li> </ul> <h3 id="link">Link</h3> <a href="http://mjijackson.com/shadowbox/index.html" title="Enlace externo a "Shadowbox 1.0"" target="_blank">Shadowbox 1.0</a> [1]: <a href="http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/">http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/</a> “Enlace en CSSLab a “Ventana modal sólo con CSS”” [2]: <a href="http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/">http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/</a> “Enlace en CSSLab a “JavaScript, Toolkit y demases”” [3]: <a href="http://www.csslab.cl/2007/07/09/140/">http://www.csslab.cl/2007/07/09/140/</a> “Enlace en CSSLab a “Validando el CSS de Thickbox”” </article> <article> <h1>El espacio blanco</h1> Thu, 10 Apr 2008 21:07:38 +0000 La propiedad CSS para white-space no es muy conocida ni muy utilizada, pero sí tiene una importante utilidad al momento de diagramar textos. Son esos detalles finos que marcan la diferencia entre un escritor de código web, y un power master pro en estilos. <blockquote> White-space define cómo se comportan los espacios en blanco dentro de un elemento, o sea, en un párrafo son los espacios entre 2 palabras. Sus valores son: </blockquote> <ul> <li>normal: por defecto, el espacio en blanco es ignorado por el browser.</li> <li>pre: el espacio en blanco es preservado por el navegador.</li> <li>nowrap: el texto no se quiebra, continúa en la misma línea hasta que no haya un quiebre mediante la etiqueta .</li> </ul> Ahora, su real uso. Según veo, da igual si lo declaras o no para todos los por ejemplo. Pero sí me da un real uso cuando trabajo con links. Si tengo uno o varios links de 2 o más palabras, y justo uno te ellos me pilla en el margen del contenedor y se le ocurre quebrarme en 2 el enlace… se ve bastante feo y dificulta la lectura de ese link: <a href="http://www.csslab.cl/ejemplos/white-space.html">Ver ejemplo</a>{.verejemplo} Bueno, con white-space: nowrap; se soluciona, ya que si el contenido dentro de <a></a> no cabe en la línea, no me lo corta en 2 (como ocurre con Miguel Benigno del ejemplo anterior… pobrecito), sino que entero baja al siguiente renglón. Pequeños detalles que marcan la diferencia. </article> <article> <h1>Iniciándose en el DOM (actualizado)</h1> Mon, 07 Apr 2008 16:26:33 +0000 Este artículo fue <a href="#actualizado">actualizado</a>. Document Object Model, o DOM, o Modelo en Objetos para representar Documentos es una modelo en que los scripts pueden acceder y modificar dinámicamente el contenido, la estructura o los estilos de documentos HTML. A través del manejo del DOM se permiten las actualizaciones en tiempo real de contenidos, envío de formularios asincrónicamente, etc. O sea, es la base del funcionamiento de los rollovers, del onclick, de AJAX.. Se utilizó por primera vez en Netscape Navigator 2.0. El entendimiento del DOM es la base para entender la programación web. Aunque el desarrollo del DOM es responsabilidad de la W3C, como todo lo que sale de ahí, ha habido discrepancias en su implementación. Aunque todos los navegadores usan Javascript como lenguaje de programación, los objetos no se comportan de la misma manera, lo que se traducía en diferentes maneras en que había que programar para IE, Netscape, Firefox… (ya no nos bastaba tener que hacer que los estilos funcionaran parecidos entre navegadores… ¡ahora con el DOM tambiém!). Eso lo puedes notar en sitios donde el onclick sólo funciona en IE6 y no en Safari, por ejemplo. Gran ayuda son los frameworks de Javascript, que ponen todos sus esfuerzos en lograr que sus fantásticas funcionalidades sean crossbrowser. <h3 id="manipulando-objetos">Manipulando Objetos</h3> Objetos en un sitio web tienen propiedades, así como en la vida real una piedra tiene peso, color y textura: Para el siguiente modelo: <pre class="language-markup"><code><div id="texto">lorem Ipsum</div></code></pre> El objeto puede ser <div> o su identificador, el id=“texto”. La propiedad puede ser el color del texto, o su tamaño. Juguemos con su color. El valor, será el valor del color en hexacromía: <pre class="language-javascript"><code>Objeto.propiedad = valor Texto.color = #f00;</code></pre> <h4 id="usando-jquery">Usando jQuery:</h4> <pre class="language-javascript"><code>$("#texto").css(color: "#f00");</code></pre> <h4 id="usando-mootools">Usando Mootools:</h4> <pre class="language-javascript"><code>&("#texto").setStyle('color', '#f00');</code></pre> <h3 id="manipulando-eventos">Manipulando Eventos</h3> Un evento se define cuando alguna situación cambia en el comportamiento del sitio web: cuando se presiona alguna tecla, el click del mouse, la posición del cursor; o sea, la interacción del usuario con el sitio web. Estos eventos también son objetos (que responden a eventos) y se pueden manejar mediante Javascript. Para el mismo modelo anterior, mediante un MouseOver: <h4 id="usando-jquery-1">Usando jQuery:</h4> <pre class="language-javascript"><code>$("#texto").mouseover(function() { alert("Mouse sobre el div#texto"); });</code></pre> <h4 id="usando-mootools-1">Usando Mootools:</h4> <pre class="language-javascript"><code>$("#texto").addEvent('mouseover', function() { alert("Mouse sobre el div#texto"); });</code></pre> <a name="actualizado"></a> <h3 id="onload-vs-ondomready">onLoad v/s onDomReady</h3> Siento que me faltó un importante tópico que tratar en este breve paso por el DOM. Se trata del evento que gatilla las acciones de la página, más precisamente el anticuado onLoad, v/s el moderno onDomReady. El problema de onLoad es que espera que toooda la página, y toooooodos sus elementos estén cargados para ejecutarse. Su nombre lo dice, cuandoCargue (onLoad). Imagínate: primero cargas el HTML y sus elementos, luego los scripts, las imágenes… puede demorarse un montón. Cuando recién termina todo eso ejecuta algún evento determinado por onLoad. Aquí es cuando viene al rescate onDomReady. Este evento creado por los frameworks (<a href="http://docs.mootools.net/Window/Window-DomReady.js" title="Enlace externo a "Mootools: Window. DomReady.js"" target="_blank">Mootools</a> y <a href="http://developer.yahoo.com/yui/event/#ondomready" title="Enlace externo a "Yahoo! UI Library: Using the onDOMReady Method"" target="_blank">YUI</a> lo tienen implementado) ejecuta sus comandos justo cuando los elementos HTML de la página están renderizados, o sea, justo lo necesario para comenzar a manipularlos como objetos. Genial, mientras aún siguen cargando el resto de las imágenes, swf’s, etc. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.w3.org/DOM/" title="DOM in W3C website" target="_blank">Document Object Model (DOM)</a></li> </ul> </article> <article> <h1>Lo ví y me gustó 26</h1> Wed, 02 Apr 2008 21:35:56 +0000 #26 – 02 Abril 2008 <a href="http://www.hclogistica.cl/" target="_blank" title="Abrir Sitio"></a> <a href="http://www.benvidatour.net/" target="_blank" title="Abrir Sitio"></a> </article> <article> <h1>Microformatos 2 contra-ataca</h1> Fri, 28 Mar 2008 19:38:35 +0000 Tenía pendiente una segunda entrega más completa sobre Microformatos. Espero el [primer artículo][1] haya quedado con gusto a poco, ya que ahora la idea es profundizar en el tema. Veremos los distintos tipos de microformatos disponibles, y cómo podemos utilizarlos en la práctica. Recapitulando, los microformatos nacieron bajo el alero de ampliar estándares semánticos aplicados a la www. La idea es que los indexadores y buscadores sean más inteligentes y entreguen datos más precisos en cuanto nosotros desarrolladores y profesionales dedicados a la web entreguemos mejor esos datos. ¿Y eso en concreto? Ya estaremos viendo resultados, con el <a href="http://www.ysearchblog.com/archives/000527.html" title="Enlace externo a "The Yahoo! Search Open Ecosystem"" target="_blank">anuncio de Yahoo! de incluir soporte a estándares web semánticos</a>, incluyendo los microformatos en sus búsquedas. Excelente iniciativa. Comencemos la diversión. Estos son los principales formatos disponibles: <h3 id="a-hrefhttpmicroformatsorgwikihcard-titleenlace-externo-a-quothcard-in-microformatsorgquot-target_blankhcarda"><a href="http://microformats.org/wiki/hcard" title="Enlace externo a "hCard in microformats.org"" target="_blank">hCard</a></h3> Se usa para representar personas, compañías, organizaciones y lugares, utilizando propiedades <a href="http://es.wikipedia.org/wiki/VCard" title="Enlace externo a "vCard in wikipedia.org"" target="_blank">vCard</a> y valores en semántico HTML ó XHTML. Ha sido ya implementado en software, por ejemplo, AddressBook de Apple. Es muy común incluir sus vCards en los emails enviados, para tener constante actualización de los datos del destinatario. En el siguiente ejemplo, verán cómo se construye un hCard, básicamente a base de id‘s y class‘es ya definidas por el estándar: <pre><code class="language-markup"><div id="hcard-Jorge-Luis-Epuñan-Hernández" class="vcard"> <a class="url fn n" href="http://www.be-studios.com"> Jorge Luis Epuñan Hernández </a> <div class="org">Be Studios</div> <div class="adr"> Santiago Chile </div> </div></code></pre> <h3 id="a-hrefhttpmicroformatsorgwikihcalendar-titleenlace-externo-a-quothcalendar-in-microformatsorgquot-target_blankhcalendara"><a href="http://microformats.org/wiki/hcalendar" title="Enlace externo a "hCalendar in microformats.org"" target="_blank">hCalendar</a></h3> Definido para formatos de eventos calendarizados, basado en el estándar iCalendar y adaptado para su uso en HTML o XHTML, RSS y cualquier XML. Muy útil para tu blog, si quieres publicar algún evento, como un cumpleaños. Así, los spiders de búsqueda u otros agregadores pueden leer ese evento marcado como microformato, convertirlos automáticamente a formato iCalendar y utilizarlo en iCal, software de Apple que ya utiliza este estándar, para dar un ejemplo. Ejemplo: <pre><code class="language-markup"><div class="vevent" id="hcalendar-Mi-Cumpleaños"> <a class="url" href="http://www.csslab.cl"> <abbr class="dtstart" title="20080218">February 18th</abbr>, <abbr class="dtend" title="20080219"> 2008</abbr> Mi Cumpleaños </a> <div class="description"> Mi cumpleaños número 27. Oh sí, aunque tengo muchas canas no soy anciano. </div> </div></code></pre> <h3 id="a-hrefhttpmicroformatsorgwikihreview-titleenlace-externo-a-quothreview-in-microformatsorgquot-target_blankhreviewa"><a href="http://microformats.org/wiki/hreview" title="Enlace externo a "hReview in microformats.org"" target="_blank">hReview</a></h3> Se usa para reseñas de productos, servicios, empresas, eventos, lugares, etc. Ejemplo en que un ficticio CCazorla hace un review sobre mi persona: <pre><code class="language-markup"><div class="hreview"> CCazorla, <abbr class="dtreviewed" title="20080325">25 de Marzo de 2008</abbr> <a class="person url" href="http://www.csslab.cl">Jorge Epuñan</a> <div>Rating: 2 de 5</div> <blockquote class="description"> Perfeccionista por naturaleza, siempre busca superarse profesionalmente. Por dentro muy buena persona. Por fuera de personalidad extraña, un tanto psicópata. </blockquote> </div></code></pre> <h3 id="a-hrefhttpmicroformatsorgwikigeo-titleenlace-externo-a-quotgeo-in-microformatsorgquot-target_blankgeoa"><a href="http://microformats.org/wiki/geo" title="Enlace externo a "geo in microformats.org"" target="_blank">Geo</a></h3> Se basa en la propiedad ‘geo’ del estándar vCard, y agrega nuevas sub-propiedades para completar. Se tratan de id‘s específicos para coordenadas de latitud y longitud, las que se pueden agregar directamente en la página o XML mediante RSS o Atom, y ser indexadas para luego, por ejemplo, mostrar la ubicación directamente en GMaps. Ejemplo: <pre><code class="language-markup"><div class="geo">Araxá: 37.0625, -95.677068 </div></code></pre> Existen algunos más, como <a href="http://en.wikipedia.org/wiki/Dublin_Core" title="Enlace externo a "Dublin Core in wikipedia.org"" target="_blank">Dublin Core</a>, <a href="http://microformats.org/wiki/xfn" title="Enlace externo a "XFN - Xhtml Friends Network in microformats.org"" target="_blank">XFN</a>, <a href="http://www.foaf-project.org/" title="Enlace externo a "The Friend of a Friend (FOAF) project."" target="_blank">FOAF</a>, pero están aún en etapas de definiciones y aprobaciones, lo que hace ver lejana su estandarización. Pero no dejan de ser buenas intenciones para necesidades reales, en contínuo desarrollo. ¿Mi opinión? Son un gran aporte a la web semántica y la catalogación de la información que componen las páginas porque, sobre todo, Internet se compone prioritariamente de información. Sólo faltan ser lanzados definitivamente y dados a conocer, además de ser integrados en los software de desarrollo y gestores de contenido web (CMS). Finalmente ahí podremos ver su real potencial, con la llamada [Web 3.0.][2] <h4 id="links">Links:</h4> <ul> <li><a href="http://microformats.org/code/hcard/creator" title="Enlace externo a "hCard Creator"" target="_blank">hCard Creator</a></li> <li><a href="http://microformats.org/code/hcalendar/creator" title="Enlace externo a "hCalendar Creator"" target="_blank">hCalendar Creator</a></li> </ul> [1]: <a href="http://www.csslab.cl/2008/01/03/un-poco-sobre-microformatos/">http://www.csslab.cl/2008/01/03/un-poco-sobre-microformatos/</a> “Enlace en CSSLab a “Un poco sobre Microformatos”” [2]: <a href="http://www.csslab.cl/2007/08/30/la-semantica-en-la-web-30/">http://www.csslab.cl/2007/08/30/la-semantica-en-la-web-30/</a> “Enlace en CSSLab a “La semántica en la Web 3.0"” </article> <article> <h1>Simulando un efecto negativo</h1> Mon, 24 Mar 2008 14:26:09 +0000 Vi este efecto bastante interesante <a href="http://www.westciv.com/style_master/index.html" title="Enlace externo a "web standards software and learning"" target="_blank">en un sitio web</a>, y me atreví a intentar replicarlo a mí manera. Luego de fracasar en mi primer intento, decidí hacer trampa y revisé su código fuente. Me dí cuenta de que utilizaban una propiedad que no conocía, lo que me explicó mi anterior fracaso. Primero, un video de una captura tomada desde el mismo sitio web, para que vean a lo que me refiero. Luego, la explicación bastante simple. <div style="width: 320px; margin: 20px auto; border: 4px solid #999;"> </div> Bueno pueden verlo por sus propios ojos <a href="http://www.westciv.com/style_master/index.html" title="Enlace externo a "web standards software and learning"" target="_blank">desde el sitio original</a>, sólo tomé el video porque creí que para muchos no sería tan obvio el efecto. La idea es que mediante el scroll, se intercambien 2 imágenes, en este caso una positiva de una negativa. Ahora, vamos con la magia. A través de CSS y la propiedad background-attachment: fixed; repetiremos el efecto. Los ingredientes son: <ul> <li>1 HTML</li> <li>2 imágenes similares, pero diferentes (positivo y negativo para ser originales).</li> <li>1 pizca de CSS</li> </ul> El HTML: <pre><code class="language-markup"><div id="container"> <div id="header"> <h1>CSSLab: efecto negativo</h1> </div> <div id="content"> Pellentesque vel dui sed.......... </div> </div></code></pre> Nada de qué extrañarse. Un contenedor que tiene un encabezado y el contenido. La idea es que el #container tenga la imagen en negativo, escondida detrás del #header que tendrá la imagen en positivo. Ambos con la propiedad background-attachment: fixed; para que no se muevan con el scroll de la ventana, similar a lo que hace position: fixed; La pizca de CSS: <pre><code class="language-css">#container { background: #333 url(tecla_neg.jpg) no-repeat fixed top; width: 600px; margin: 0 auto; } #header { background: #fff url(tecla_pos.jpg) no-repeat fixed top; height: 200px; } #content { width: 200px; }</code></pre> La propiedad background está resumida en una línea, pero desglosada sería de la siguiente manera: <pre><code class="language-css">background-color: #333; background-image: url(tecla_neg.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top;</code></pre> [Ver ejemplo][1]{.verejemplo} <div class="pullquote"> </div> Un detalle. No, mejor dos. No hubo caso de utilizar algún tributo de posicionamiento horizontal junto con background-attachment, o sea, sólo pude utilizar top o bottom, nada left ni right, y menos aún juntos. No me explico el porqué. Si quieren ponerlo hacia un lado, tendrían que hacer un background bien ancho cosa que lo cubra por completo en la horizontal. Segundo detalle… sí, oh sí. No funciona en IE6. ¡Qué maravilla! [1]: <a href="http://www.csslab.cl/ejemplos/fx_negativo/index.html">http://www.csslab.cl/ejemplos/fx_negativo/index.html</a> “Enlace en CSSLab para ver ejemplo “Efecto Negativo”” </article> <article> <h1>Centrando texto verticalmente</h1> Wed, 19 Mar 2008 14:02:16 +0000 Una vez más vengo con una técnica que de tan simple dan ganas de llorar por no habérsenos ocurrido antes. Lo que mostraré ahora, es cómo lograr centrar verticalmente un texto a través de su contenedor. Esta es la clave, ya que se suele pensar que el texto mismo es el que debe tener la propiedad de alineado vertical pero la idea, al igual que el [artículo anterior de centrado horizontal][1], es que el contenedor permita hacerlo, así cualquier elemento que esté dentro pueda tener esta cualidad. La clave: la propiedad line-height. Definiento un alto de línea fijo para el contenedor, podremos lograr que todos sus elementos queden centrados relativos a él, ya que al contrario de height, siempre sus elementos hijos quedarán centrados verticalmente. Esto funciona para cualquier etiqueta bloque: <td>, , <li>, etc. El CSS es el siguiente: <pre><code class="language-css">li, td, p { line-height: 100px; }</code></pre> O sea, si el contenedor es un <li>, un <td> o un (pueden ser muchos otros), defino el alto de éste mediante line-height (en vez de hacerlo mediante height) y todos sus elementos de texto y botones quedarán automáticamente centrados verticalmente. [Ver ejemplo][2]{.verejemplo} El único problema… si… ese mismo… IE6 y las etiquetas de botones <button> e <input />. Como se darán cuenta, no lo hace del todo bien. Lo siguen IE7 y Opera. Pero hay una manera de solucionarlo mediante CSS pero sólo para IE7 y Opera: definir el alto fijo de los botones mediante height. Pero con IE6 no hay caso, no lo soluciona.. Otro detalle es que no funciona con imágenes . Siento mucho si se decepcionaron leyendo estas últimas palabras… tiene sus limitaciones, pero puede salvar en algunas situaciones. [1]: <a href="http://www.csslab.cl/2008/03/11/esas-botoneras-centrandolas/">http://www.csslab.cl/2008/03/11/esas-botoneras-centrandolas/</a> “Enlade en CSSLab a “Esas botoneras: centrándolas”” [2]: <a href="http://www.csslab.cl/ejemplos/centrado_vertical.html">http://www.csslab.cl/ejemplos/centrado_vertical.html</a> “Enlade en CSSLab a “Ejemplo Centrando Verticalmente”” </article> <article> <h1>Esas botoneras: centrándolas</h1> Tue, 11 Mar 2008 15:17:49 +0000 Uno de los temas más complicados a la hora de estructurar y diagramar un sitio, es cuando existen formularios. Creo que es el más difícil, ya que a pesar de tener [un buen CSS reseter][1] a mano que te ayude a setear esas propiedades en todos los browsers, aún así hay elementos que no obedecen como querríamos que lo hicieran. Algunos trucos se deben usar, y finalmente no queda totalmente exacto en todas las plataformas y navegadores. Imagínate esos formularios gigantescos, donde sobran campos y la usabilidad es nula… un lío. Lo que se va a ver aquí, será específicamente cómo abordar la estructuración de una botonera de formularios (o de cualquier otro en realidad), y cómo lograr que se estén siempre centradas a pesar de cuántos botones tengan. El ejemplo gráfico a continuación: ![Ejemplo Botonera Centrado en CSSLab][2] He visto muchas soluciones a esto, la mayoría de ellas complicadas (mi slogan siempre es facilitar la vida en su máxima expresión). Por ejemplo, se hacen class’es para cada botón (.boton_aceptar_1, .boton_aceptar_2 etc etc etc) y se posicionan absolutamente. También se hacen class’es a cada botón y se marginan, incluso negativamente (lo que IE6 no ve con buenos ojos). Imagínense si son varias páginas de formularios y los botones se repiten (por ejemplo, el ‘Aceptar’ o el ‘Enviar’ son los más comunes) pero no siempre van de a 2, sino que a veces van solos o de a 3, 4…. enfin. Hacer class’es para cada situación no es la mejor solución, ya que llenaremos la hoja de estilos de propiedades de posicionamiento en vez de aplicar una solución global, independiente de la cantidad de botones que estén involucrados. Bueno, esa es la idea de este artículo. <div class="pullquote"> </div> Es frecuente que los temas que escribo para CSSLab se den mientras estoy en algún proyecto, y me topo con dificultades que logro solucionar, y luego las muestro y explico aquí cómo se resolvió finalmente. Este es otro de esos casos, sólo que este tema lo había resuelto hacía mucho pero se dió nuevamente a manos de otro profesional web con quien trabajo. Lo ayudé con esto y finalmente me tomo el tiempo de explicarlo aquí para todos quienes tengan la misma situación. Vamos a lo que nos reúne. [Construído el lindo formulario][3], con <fieldset>, <legend>, varios <label>, <input /> y <textarea> quizás, llega la hora de poner los botones de Enviar y No Enviar como en el ejemplo gráfico anterior. Mi método implica utilizar listas, ya que me gustan para [contener botones como menúes][4] (aunque puede ser un <div> si quienes, incluso un . Cada uno con su gusto). El HTML de la botonera: <pre><code class="language-markup"><ul id="botonera"> <li><input type="submit" value="Enviar" /><input type="reset" value="No Enviar" /></li> </ul></code></pre> Como habrán notado, en vez de poner cada botón dentro de un <li></li> y flotarlos a la izquierda (como usualmente se usa para los [menúes horizontales][5]), puse todos los botones dentro de un mismo <li>, caso contrario no podrían ser centrados. Entonces, si es sólo un botón, o todos los que sean necesarios, deberán ir consecutivamente uno al lado del otro dentro de un único <li></li>. Ahora, el CSS que hará la magia: <pre><code class="language-css">#botonera { width: 400px; margin: 20px auto; } #botonera li { list-style: none; text-align: center; } #botonera input { margin-left: 10px; }</code></pre> Bastante simple. Si se han fijado, lo que hace que se centren los elementos dentro del <li> es el text-align: center; ya que como <input /> es una etiqueta lineal, se alineará tal como lo haría un texto cualquiera. Ese es todo el truco. Lo otro es darle al <input /> un margin-left de unos 10px para que se separen un poco si son 2 o más botones (he visto usar para ello… no es correcto). Saco 3 conclusiones de esta solución: <ol> <li>No se usa float alguno, lo que no hace el contenedor colapsar así que nos ahorramos un [clearfix][6]. Además que no puedes centrar un float.</li> <li>Se puede usar para cualquier botón, no sólo <input />: <a> y <button> también son soportados. Así que puedes también hacer un menú horizontal centrado con esta misma técnica.</li> <li>Es soportado por todos los browsers.</li> </ol> [Ver Ejemplo][7]{.verejemplo} [1]: <a href="http://www.csslab.cl/2007/10/18/css-reseter/">http://www.csslab.cl/2007/10/18/css-reseter/</a> “Enlace en CSSLab a “CSS Reseter”” [2]: <a href="http://www.csslab.cl/wp-content/uploads/2008/03/ejemplo_1.gif">http://www.csslab.cl/wp-content/uploads/2008/03/ejemplo_1.gif</a> [3]: <a href="http://www.csslab.cl/2006/10/13/formularios-semanticos-ii/">http://www.csslab.cl/2006/10/13/formularios-semanticos-ii/</a> “Enlace en CSSLab a “Formularios Semánticos: el regreso”” [4]: <a href="http://www.csslab.cl/2007/12/28/videocast-2-menu-con-listas/">http://www.csslab.cl/2007/12/28/videocast-2-menu-con-listas/</a> “Enlace en CSSLab a " Videocast 2: menú con listas”" [5]: <a href="http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/">http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/</a> “Enlace en CSSLab a “Menú horizontal y algo +”” [6]: <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/</a> “Enlace en CSSlab a “Flotando en la incertidumbre”” [7]: <a href="http://www.csslab.cl/ejemplos/botonera/index.html">http://www.csslab.cl/ejemplos/botonera/index.html</a> “Enlace en CSSLab a “Ejemplo Centrando Botonera”” </article> <article> <h1>Horror #2</h1> Fri, 07 Mar 2008 19:04:23 +0000 <pre class="language-markup"><code><table width="539" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="https://csslab.cl/imgs/spacer.gif" width="539" height="12"/></td> </tr> </table></code></pre> ¿Un spacer? No, habían muuuuchos más de donde salió ese. Y lo peor es una tabla entera solo para contener un spacer… Sin comentarios. </article> <article> <h1>Ajax con Mootools</h1> Mon, 25 Feb 2008 21:11:51 +0000 Mootools nos permite integrar fácilmente Ajax según nuestras necesidades, ya sea mediante el envio de formularios o, como lo veremos ahora, el rescate de información desde una fuente externa a nuestra página, sin tener que volver a cargar la página. Primero, construiremos un HTML donde estará un lugar delimitado en que se cargará la info desde otro HTML creado también por nosotros (un lorem ipsum cualquiera). Y claro, un botón que gatillará la acción mediante Ajax. <pre class="language-markup"><code><a href="" id="comienza">Rescata la info</a> <div id="traelo_aqui"> Trae aquí la info </div></code></pre> Básicamente es un botón que al ser presionado cargará la info [desde una página determinada por nosotros][1] mediante JS hasta el div que definimos. Ahora, mediante Mootools crearemos el evento: <pre class="language-javascript"><code>$('boton').addEvent('click', function(e) { e = new Event(e).stop(); var url = "http://www.csslab.cl/ejemplos/ajax_mootools/lipsum.html"; $('traelo_aqui').empty().addClass('cargando'); new Ajax(url, { method: 'get', update: $('traelo_aqui'), onComplete: function() { $('traelo_aqui').removeClass('cargando') } }).request(); });</code></pre> Al elemento con id=“boton” (o sea, <a id="boton">) le agregamos un evento de ‘click’ (addEvent). De ahí, comenzamos una función que a través del método ‘get’, trae lo que esté en la variable url (var url) y refresca lo que esté adentro del id=“traelo_aqui” (o sea <div id="traelo_aqui">). Además, agregaremos una class=“cargando” al contenedor mientras se está rescatando la información por si se demora mucho (addClass(‘cargando’);) y cuando termine todo, sacaremos esa class (removeClass). Básicamente esa es la explicación. [Ver ejemplo][2]{.verejemplo} [1]: <a href="http://www.csslab.cl/ejemplos/ajax_mootools/lipsum.html">http://www.csslab.cl/ejemplos/ajax_mootools/lipsum.html</a> “Enlace en CSSLab a “lorem ipsum”” [2]: <a href="http://www.csslab.cl/ejemplos/ajax_mootools/ajax.html">http://www.csslab.cl/ejemplos/ajax_mootools/ajax.html</a> “Enlace en CSSLab a “Ver Ejemplo”” </article> <article> <h1>Pronto…</h1> Fri, 22 Feb 2008 20:06:13 +0000 Luego de unas merecidas 2 semanas de vacaciones, vuelvo a la actividad. O por lo menos trato de no caer en la rutina tan pronto. He estado dedicando esfuerzos en arreglar este template para que se vea por lo menos decente en IE6 [como prometí][1]. Mientras, recopilo algunos artículos antiguos y que siguen vigentes por su contenido. <ul> <li>[Posicionando un objeto en el centro][2] <ul> <li>[Formulario sin tablas][3]</li> <li>[media=“print”][4]</li> <li>[Rápidos rollovers con CSS][5]</li> <li>[¿Strict o no Strict?][6]</li> <li>[Menú horizontal y algo +][7]</li> <li>[CSS para móviles][8]</li> <li>[Diseño a oscuras][9]</li> <li>[Flotando en la incertidumbre][10]</li> <li>[El porqué de no utilizar tablas][11]</li> <li>[Image Replacement o cómo reemplazar contenido por imagen][12]</li> <li>[Lightbox + SWF][13]</li> <li>[Como Caja: el modelo][14]</li> <li>[Estilos de botones crossbrowser][15]</li> <li>[Absolutamente sí][16]</li> <li>[Selectores avanzados de atributos][17]</li> <li>[textos_muy_largos_que_quiebran_nuestro_layout][18]</li> <li>[100% alto, finalmente para todos][19]</li> <li>[Sobre la accesibilidad y sus implicancias][20]</li> </ul> </li> </ul> Uff… hay muchos más… pero con esto pueden tener una idea de alguno de los artículos fundamentales de CSSLab. Pronto, leve rediseño del sitio. [1]: <a href="http://www.csslab.cl/2008/02/06/entrevistas-de-trabajo-google/#comment-18324">http://www.csslab.cl/2008/02/06/entrevistas-de-trabajo-google/#comment-18324</a> “Enlace en CSSLab a “Comentario personal en Entrevistas de trabajo: Google”” [2]: <a href="http://www.csslab.cl/2005/11/07/posicionando-un-objeto-en-el-centro/">http://www.csslab.cl/2005/11/07/posicionando-un-objeto-en-el-centro/</a> “Enlace en CSSLab a “Posicionando un objeto en el centro”” [3]: <a href="http://www.csslab.cl/2005/11/08/formulario-sin-tablas/">http://www.csslab.cl/2005/11/08/formulario-sin-tablas/</a> “Enlace en CSSLab a “Formulario sin tablas”” [4]: <a href="http://www.csslab.cl/2005/11/15/mediaprint/">http://www.csslab.cl/2005/11/15/mediaprint/</a> “Enlace en CSSLab a “media=“print””” [5]: <a href="http://www.csslab.cl/2005/11/22/rapidos-rollovers-con-css/">http://www.csslab.cl/2005/11/22/rapidos-rollovers-con-css/</a> “Enlace en CSSLab a “Rápidos rollovers con CSS”” [6]: <a href="http://www.csslab.cl/2005/11/30/¿strict-o-no-strict/">http://www.csslab.cl/2005/11/30/¿strict-o-no-strict/</a> “Enlace en CSSLab a “¿Strict o no Strict?”” [7]: <a href="http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/">http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/</a> “Enlace en CSSLab a “Menú horizontal y algo "” [8]: <a href="http://www.csslab.cl/2006/03/07/css-para-moviles/">http://www.csslab.cl/2006/03/07/css-para-moviles/</a> “Enlace en CSSLab a “CSS para móviles”” [9]: <a href="http://www.csslab.cl/2006/05/23/diseno-a-oscuras/">http://www.csslab.cl/2006/05/23/diseno-a-oscuras/</a> “Enlace en CSSLab a “Diseño a oscuras”” [10]: <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/</a> “Enlace en CSSLab a “Flotando en la incertidumbre”” [11]: <a href="http://www.csslab.cl/2006/08/25/el-porque-de-no-utilizar-tablas/">http://www.csslab.cl/2006/08/25/el-porque-de-no-utilizar-tablas/</a> “Enlace en CSSLab a “El porqué de no utilizar tablas”” [12]: <a href="http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/">http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/</a> “Enlace en CSSLab a "”” [13]: <a href="http://www.csslab.cl/2006/09/01/lightbox-swf/">http://www.csslab.cl/2006/09/01/lightbox-swf/</a> “Enlace en CSSLab a “Lightbox + SWF”” [14]: <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/">http://www.csslab.cl/2006/12/14/como-caja-el-modelo/</a> “Enlace en CSSLab a “Como Caja: el modelo”” [15]: <a href="http://www.csslab.cl/2007/04/23/estilos-de-botones-crossbrowser/">http://www.csslab.cl/2007/04/23/estilos-de-botones-crossbrowser/</a> “Enlace en CSSLab a “Estilos de botones crossbrowser”” [16]: <a href="http://www.csslab.cl/2007/05/11/absolutamente-si/">http://www.csslab.cl/2007/05/11/absolutamente-si/</a> “Enlace en CSSLab a “Absolutamente sí”” [17]: <a href="http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/">http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/</a> “Enlace en CSSLab a “Selectores avanzados de atributos”” [18]: <a href="http://www.csslab.cl/2007/09/10/textos_muy_largos_que_quiebran_nuestro_layout/">http://www.csslab.cl/2007/09/10/textos_muy_largos_que_quiebran_nuestro_layout/</a> “Enlace en CSSLab a “textos_muy_largos_que_quiebran_nuestro_layout”” [19]: <a href="http://www.csslab.cl/2007/10/11/100-alto-finalmente-para-todos/">http://www.csslab.cl/2007/10/11/100-alto-finalmente-para-todos/</a> “Enlace en CSSLab a “100% alto, finalmente para todos”” [20]: <a href="http://www.csslab.cl/2007/11/27/sobre-la-accesibilidad-y-sus-implicancias/">http://www.csslab.cl/2007/11/27/sobre-la-accesibilidad-y-sus-implicancias/</a> “Enlace en CSSLab a “Sobre la accesibilidad y sus implicancias”” </article> <article> <h1>Lo ví y me gustó 25</h1> Mon, 18 Feb 2008 12:41:51 +0000 #25 – 30 Enero 2008 <a href="http://www.arsnovadesign.com.ar/" target="_blank"></a> <a href="http://www.sygnusdigital.com/" target="_blank"></a> </article> <article> <h1>Mootools: reconociendo el browser</h1> Thu, 14 Feb 2008 01:20:34 +0000 La idea de un framework es reordenar un lenguaje y entregarnos herramientas para que sea bastante más fácil nuestro desarrollo. Una de ellas, es el reconocimiento del browser del usuario. En <a href="http://www.2monos.net/" title="Enlace externo a "2monos"" target="_blank">2monos</a> quise hacer lo mejor de lo mejor, pero lamentablemente IE6 no me acompañó en este camino. En vez de desgastarme tratando de que por lo menos se viera algo decente, o funcione a medias…. preferí abolirlo de una vez por todas. Si entras a <a href="http://www.2monos.net/" title="Enlace externo a "2monos"" target="_blank">2monos.net</a> utilizando IE6, una ventana te indicará que mejor bajes Firefox. Lamentablemente esta es una acción que por más que lo deseemos no se puede ejecutar en todos los sitios web en que trabajamos, pero en este caso como este sitio es mío, hago lo que quiero y decidí por discriminar un browser que nunca debería haber sido una mayoría. Para esto, con Mootools es extremadamente fácil. Primero, creamos el evento inicial que gatillará la acción cuando los elementos del HTML (DOM) estén cargados. Luego, una codicional (if/else) que me dirá si el browser es IE6, ejecuta tal acción: <pre class="language-javascript"><code>window.addEvent('domready', function(){ if(window.ie6){ // haz algo aquí } });</code></pre> [Ver ejemplo][1]{.verejemplo} A seguir, una lista de las posibilidades de browsers a ser detectables: <ul> <li>window: cualquier browser.</li> <li>window.ie: cualquier Internet Explorer.</li> <li>window.ie6: sólo IE6.</li> <li>window.ie7: sólo IE7.</li> <li>window.gecko: Mozilla Firefox u otro browser que use gecko (Netscape 6+, Flock, Camino, Galeon, Epiphany).</li> <li>window.webkit: Apple Safari u otro que use Webkit (iCab, Konqueror, Omniweb, Shiira, Sunrise).</li> <li>window.webkit419: Apple Safari 2.</li> <li>window.webkit420: Apple Safari 3.</li> <li>window.opera: sólo Opera.</li> </ul> <h4 id="link">Link</h4> <ul> <li><a href="http://docs.mootools.net/Core/Core.js#window" title="Enlace externo a "Mootools Docs: Core"" target="_blank">Mootools Docs: Core</a></li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/detect/ie6.html">http://www.csslab.cl/ejemplos/detect/ie6.html</a> “Enlace en CSSLab para “ver ejemplo”” </article> <article> <h1>Entrevistas de trabajo: Google</h1> Wed, 06 Feb 2008 21:00:01 +0000 Cada día me asombro con lo pequeño que se ve este mundo, cada vez son menores las fronteras digitales. Y cada día es más fácil poder pensar en mejores espectativas laborales, quizás fuera de nuestro país de residencia. El mercado y otros factores nos hacen pensar emigrar, y un mundo globalizado lo permite con mucha facilidad. Depende de cada uno tener el coraje de tomar la iniciativa. Hace unos meses tuve la oportunidad de tener una entrevista de trabajo para Google, para un puesto en Brasil. Con gigantes tecnológicos instalándose en latinoamérica, ya no es imposible pensar en que uno puede tener la oportunidad, o cumplir el sueño de pertenecer a sus filas. Con oficinas en Argentina, Brasil, México, España y todo el mundo, no es insano pensar en que uno puede tener una oportunidad allí. Yahoo! está en Argentina, Brasil y Chile. Y para qué decir de Apple, que está en México, o incluso trabajar en Cupertino, USA. Estas empresas no escatiman recursos, están siempre buscando a los mejores, donde sea que éstos se encuentren. Con un correo desde Human Resources me confirman que necesitan hacerme una entrevista telefónica, que mi entrevistador sería John Fulano de Tal Smith (diseñador) desde Mountain View (sus oficinas centrales), y que necesitaban una fecha, hora GMT y número de teléfono desde donde me llamarían. Además, que en promedio esa entrevista duraría 45 mins. Para tan magno evento, decidí prepararme, y qué mejor que su propio buscador para encontrar algunos consejos. Encontré muchos sitios que daban tips de quienes también habían pasado por este tipo de entrevistas, la mayoría de ellos informáticos o matemáticos donde suelen hacerles preguntas capciosas. Recopilo algunos consejos que leí, y completo algunos según mi experiencia: <ul> <li>Debes tener un buen inglés (intermedio-avanzado) y manejar un buen lenguaje técnico (según lo que haces, sea diseño, desarrollo o programación en duro). Practícalo si puedes, para no tartamudear o pensar mucho las respuestas.</li> <li>Asegúrate que el teléfono que entregues está bueno, y que el aparato tiene buen sonido. Ojalá que no sea inalámbrico para que no se te acabe la batería en medio de la entrevista.</li> <li>Siéntate frente a un computador y ponte cómodo. Deberás mostrar algo de tu trabajo (gráfico) y en mi caso tuve que explicar algunos criterios de usabilidad e interacción. Una buena conexión a internet es altamente recomendable (cable).</li> <li>Un vaso con agua nunca está de más, hablarás mucho.</li> <li>Estudia bien la descripción del puesto al cual postulaste. Los alcances y cuál sería tu aporte a éste. En todo caso el entrevistador te lo volverá a describir al inicio.</li> <li>Serás probado con algún test en sitios de Google, por ejemplo, mejorías o sugerencias (dependiendo de puesto al que postulaste). Aquí sólo vale tu buen criterio.</li> <li>Trata de estar tranquilo y ser seguro con tus respuestas. Esto vale para cualquier entrevista de trabajo.</li> <li>Ten preguntas o dudas preparadas, respecto al puesto o a la empresa misma.</li> <li>Finalmente, inventa un buen argumento de porqué querrías trabajar en Google, o en la empresa que sea.</li> </ul> La entrevista telefónica es el primer paso. Si te fue bien y le agradaste al entrevistador, la segunda etapa es la entrevista en persona, donde se te hará llegar los medios para poder asistir si estás lejos. Como mencioné, no escatiman recursos en traerte si les vales la pena. Desde aquí no serán más de 10 candidatos con que competir. Infelizmente no llegué a este punto, pero quizás en una otra oportunidad. ¿Cuál era mi idea? Primero, entregar consejos, en español, por si alguien tiene la necesidad u oportunidad. Segundo, entregarles confianza en que se crean capaces de trabajar en empresas grandes, globales, mundiales, donde sus trabajos se verán reflejados en millones, pero millones de usuarios. No se pongan límites en su trabajo, dejen que su esfuerzo les muestre hasta dónde pueden llegar. <h4 id="links">Links</h4> <ul> <li><a href="http://www.google.com/support/jobs/bin/static.py?page=about.html&about=locations" title="Enlace externo a "Google Jobs"" target="_blank">Google Jobs</a></li> <li><a href="http://careers.yahoo.com/" title="Enlace externo a "Yahoo! Careers"" target="_blank">Yahoo! Careers</a></li> <li><a href="http://www.apple.com/jobs/us/index.html" title="Enlace externo a "Apple - Job Opportunities"" target="_blank">Apple – Job Opportunities</a></li> </ul> </article> <article> <h1>Ventana modal sólo con CSS</h1> Wed, 30 Jan 2008 13:05:01 +0000 A raíz de mi <a href="http://www.2monos.net/" title="Enlace externo a "2monos"" target="_blank">proyecto musical</a> más reciente lanzado, incluyendo el sitio web donde me divertí mucho utilizando Mootools para sus diferentes funcionalidades, iré ampliando los artículos relacionados con este framework de JS explicando los puntos más importantes de su desarrollo. Pero para comenzar, mostraré un modo de crear ventanas modales (lightbox, thickbox, greybox, modalbox… son todas ventanas modales) sólo con CSS. Mientras puedo, ahorro en plugins para no recargar los sitios, y en el caso de las ventanas emergentes no-obstructivas utilicé un elegante método donde a través de simple CSS se abren ventanas con mensajes varios. Para gatillarla, utilicé, claro, Mootools. Pero donde <a href="http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/" title="Enlace externo a "Create a Lightbox effect only with CSS - no javascript needed"" target="_blank">tomé prestado la idea</a>, utilizaban Javascript puro para ello. Mostraré ambos métodos, a gusto y necesidad del usuario cuál decidir ocupar. Comenzamos con el marcado HTML. Primero, un <div class="overlay"></div> el que será el fondo semi-transparente que cubrirá la página entera, y albergará la ventana del mensaje. Luego, un <div class="modal"> que contendrá el mensaje o contenido de nuestra ventana modal. Estas 2 classes, .overlay y .modal, estarán escondidas desde un principio (display: none;) y serán gatilladas desde algún link (display: block;). Después de ellas, el contenido del resto del sitio web. <pre><code class="language-markup"><div id="fade" class="overlay"></div>> <div id="light" class="modal"> Lorem ipsum dolor sit..... </div> Texto del sitio web. Con un <a href="">link</a> abriremos la ventana.</code></pre> Nada de eso nos sirve sin un correcto uso de CSS. Para la base semi-transparente le damos opacidad a través del [método cross-browser][1]: <pre><code class="language-css">.overlay{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index:1001; opacity:.75; -moz-opacity: 0.75; filter: alpha(opacity=75); }</code></pre> Y la ventana modal del contenido mismo: <pre><code class="language-css">.modal { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; background: #fff; color: #333; z-index:1002; overflow: auto; }</code></pre> [Ver ejemplo sólo con CSS][2]{.verejemplo} Ahora, lo echamos a andar. A ambos div‘s debemos darle id‘s únicos, los que nos ayudarán a identificar los elementos que serán mostrados vía Javascript. La orden para ejecutarlos es en Javascript puro: <pre><code class="language-javascript">document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'</code></pre> Y a través de Mootools: <pre><code class="language-javascript">$('light').setStyle('display', 'block'); $('fade').setStyle('display', 'block');</code></pre> Lo que dice ahí, en castellano universal es: toma los elementos con el id light y fade, y agrégales estilo display: block; a cada uno. O sea, los hará aparecer desde display: none (oculto) a display: block; (visible). [Ver ejemplo funcionando con JS][3]{.verejemplo} <h4 id="links">Links</h4> <ul> <li><a href="http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/" title="Enlace externo a "Create a Lightbox effect only with CSS - no javascript needed"" target="_blank">Create a Lightbox effect only with CSS – no javascript needed</a></li> </ul> [1]: <a href="http://www.csslab.cl/2007/01/24/transparencias-a-prueba-de-browsers-2/">http://www.csslab.cl/2007/01/24/transparencias-a-prueba-de-browsers-2/</a> “Enlace en CSSLab a “Transparencias a prueba de browsers”” [2]: <a href="http://www.csslab.cl/ejemplos/modal/solo_css.html">http://www.csslab.cl/ejemplos/modal/solo_css.html</a> “Enlace en CSSLab a “Ejemplo Modal sólo con CSS”” [3]: <a href="http://www.csslab.cl/ejemplos/modal/modal.html">http://www.csslab.cl/ejemplos/modal/modal.html</a> “Enlace en CSSLab a “Ejemplo Modal con JS”” </article> <article> <h1>Review 1: Origo CSS</h1> Mon, 28 Jan 2008 15:02:56 +0000 Siempre me ha gustado tener el control sobre el código que genero; por lo mismo me gusta escribirlo a mano y no dependo de editores parafernálicos, u otros distractores. Durante el año pasado, ha surgido el concepto de CSS Framework, lo cual considero imposible cuando se trata de un lenguaje que no es programable (CSS es sólo marcado de estilos así como HTML es marcado de estructura). Quizás han visto a <a href="http://code.google.com/p/blueprintcss/" title="Enlace externo a "blueprintcss"" target="_blank">Blueprint</a> o <a href="http://developer.yahoo.com/yui/grids/" title="Enlace externo a "YUI Grids CSS"" target="_blank">Yahoo! UI</a>. Para mí, sólo han servido para poder compactar mi propio [CSS Reseter][1], nada más, ya que prefiero mantener mis columnas y estructuras lo más personalizadas posibles. Hasta que me topé con <a href="http://quiltro.cl/2007/11/11/origo-css/" title="Enlace externo a "Origo CSS"" target="_blank">Origo CSS</a>. Según su propio autor: “<cite>Origo CSS es una base estructural para el diseño de interfaces de usuario web desarrollada en CSS y HTML, que permite definir los cimientos de la organización y distribución de unidades de información.</cite>” En palabras simples: Origo CSS son varias hojas de estilos con propiedades definidas, las que te permiten usarlas para diagramar estructuras de manera fácil para tu sitio web, a través de filas y columnas ya declaradas. Con un poco de tiempo y entrenamiento se puede llegar a acostumbrar a su uso. Su aporte es un <a href="http://www.planseldon.com/blog/hasta-siempre-clearboth/" title="Enlace externo a "Hasta siempre, clear:both"" target="_blank">nuevo método de clearfix</a>, donde creativamente utiliza un overflow: hidden; para que el contenedor soporte sus elementos flotantes. Un interesante mecanismo que valió la pena el estudio de este proyecto. <h4 id="pros">Pros:</h4> <ul> <li>fácil uso.</li> <li>relativamente liviano para proyectos grandes.</li> <li>bien documentado y en castellano.</li> </ul> <h4 id="contras">Contras:</h4> <ul> <li>el nuevo método de clearfix no me convenció del todo.</li> </ul> <h3 id="link">Link</h3> <a href="http://quiltro.cl/2007/11/11/origo-css/" title="Enlace externo a "Origo CSS"" target="_blank">Origo CSS</a> [1]: <a href="http://www.csslab.cl/2007/10/18/css-reseter/">http://www.csslab.cl/2007/10/18/css-reseter/</a> “Enlace en CSSLab a “CSS Reseter”” </article> <article> <h1>Mootools: introducción</h1> Mon, 21 Jan 2008 03:52:17 +0000 A pedido popular, comenzaré a iniciar a quienes visitan este sitio en algunos de los frameworks Javascript más populares, o por lo menos, que utilizo con más frecuencia. El primero de ellos sería <a href="http://mootools.net/" title="Enlace externo a "Mootools Javascript Framework"" target="_blank">Mootools</a>, con el que más he estado jugando últimamente (y prometo mostrar resultados). Pero antes, me interesa comenzar con definir framework. Según mi instinto (y ayuda de <a href="http://es.wikipedia.org/wiki/Framework" title="Enlace externo a "Framework, Wikipedia"" target="_blank">Wikipedia</a>), los frameworks Javascript (pueden ser de otros tipos) son una arquitectura que modela las relaciones del lenguaje Javascript. Provee una estructura y principalmente una metodología de trabajo que ayuda a ordenar una sintaxis de trabajo. Son diseñados principalmente para facilitar el desarrollo de sitios y aplicaciones web. Cada framework tiene su orden y estructuras definidos, y no pueden ser mezclados, ya que las reglas son diferentes entre ellos (imagínense sino jugar rugby con reglas de básquetbol… ¡un lío!). En este artículo, crearemos unos simples Eventos donde manipularemos Elementos vía Javascript. <h3 id="cargando">Cargando</h3> Para comenzar a trabajar con Mootools debemos primero llamar la librería, la que <a href="http://mootools.net/download" title="Enlace externo a "Download en Mootools.net"" target="_blank">puede ser descargada desde su sitio web</a> ofreciéndonos mucha flexibilidad para bajar una versión optimizada a nuestros requerimientos. Por este detalle, Mootools puede intimidar, ya que quizás algunos Eventos o Efectos no funcionen a la primera (y frustren a quienes esperan prontos resultados), debido a que no han bajado el material necesario para ello. Así, Mootools puede ser considerado como un framework avanzado, pero prefiero verlo como versátil y liviano. Basta algo de estudio para entender bien y utilizar lo justo y necesario para nuestras necesidades. Resumiendo, para cagarlo se utiliza: <pre class="language-markup"><code><script type="text/javascript" src="ruta_a/mootools.js"></script></code></pre> Luego, comenzaremos a escribir lo que queremos realizar vía Javascript. Para comenzar, debemos crear un Evento que nos diga cuando comenzar a realizar lo que queremos. <pre class="language-javascript"><code>window.addEvent('domready', function() { // nuestro código });</code></pre> Mootools nos ofrece más de una opción para comenzar a escribir código: <ul> <li>domready: se ejecuta cuando todos los elementos de la página están listos, pero no espera por las imágenes. Gran aporte de Mootools.</li> <li>load: se ejecuta cuando toda la página (inclusive imágenes) se carga, lo que se hacía usualmente con Javascript puro. En algunos casos se demora bastante más.</li> </ul> <h3 id="escribiendo">Escribiendo</h3> Bien, estamos listos para programar algo con ayuda de Mootools. Como mencioné, crearemos un Evento donde manipularemos aspectos de alguna etiqueta (Elemento). Primero, lo que queremos realizar: <pre class="language-javascript"><code>$('enlace').addClass('grandote');</code></pre> Ahora diseccionaremos esto: al elemento que tenga un id=“enlace”, agrega una class que se llame .grandote (que aumentará el tamaño de la tipografía del enlace). $ todos los elementos (‘enlace’) que tengan el id=“enlace” .addClass agrega la class (‘grandote’) .grandote Así de simple. Claro que tienen que tener definida la class .grandote en su hoja de estilos para que vean el resultado. [Ver ejemplo 1][1]{.verejemplo} Ojalá puedan ver el source desde <a href="http://www.getfirefox.com/" title="Enlace externo a "Download Firefox"" target="_blank">Firefox</a> con el plugin <a href="https://addons.mozilla.org/en-US/firefox/addon/60" title="Enlace externo a &quotDownload Web Developer Expension;"" target="_blank">Web Developer</a> o <a href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="Enlace externo a "Download Firebug Expension"" target="_blank">Firebug</a>, y podrán apreciar la diferencia entre el código fuente y el código generado. Ahora, si queremos alcanzar más de un id: <pre class="language-javascript"><code>$$(['nombre:id', 'otro_id']).addClass('grandote');</code></pre> [Ver ejemplo 2][2]{.verejemplo} Notaron como cambió la invocación al Elemento? Cuando es más de uno, se usa $$ y se agrupan entre corchetes []. Pequeños detalles que diferencian los Frameworks. Se pueden hacer muchas cosas más manipulando Elementos o Selectores con Mootools, como por ejemplo: <ul> <li>$(‘elemento’).remove(); remueve el elemento, literalmente.</li> <li>$(‘elemento’).removeClass(); remieve la class que tenga ese elemento.</li> <li>$(‘elemento’).setStyle(); agrega estilos CSS que definamos.</li> <li>$(‘elemento’).setOpacity(0.4); le da opacidad de 40%;</li> <li>$(‘elemento’).setText(‘Lorem Ipsum’); le inyecta Lorem Ipsum dentro de un elemento, por ejemplo </li> <li>$(‘elemento’).empty(); vacía un elemento.</li> </ul> Siendo fiel con el título de este artículo, esta fue una introducción. La documentación de Mootools es completa pero lamentablemente pobre de aplicaciones reales. En el <a href="http://dev.mootools.net/" title="Enlace externo a &quotMootools Code;"" target="_blank">foro</a> pueden encontrar más variedad, pero aún no es bastante satisfactorio. Próximamente, artículo dedicado a JQuery. [1]: <a href="http://www.csslab.cl/ejemplos/mootools/ejemplo1.html">http://www.csslab.cl/ejemplos/mootools/ejemplo1.html</a> “Enlace en CSSLab a “Mootools Ejemplo 1"” [2]: <a href="http://www.csslab.cl/ejemplos/mootools/ejemplo2.html">http://www.csslab.cl/ejemplos/mootools/ejemplo2.html</a> “Enlace para ver “Ejemplo 1” en CSSLab” </article> <article> <h1>Medidas en CSS</h1> Wed, 16 Jan 2008 13:40:33 +0000 Varias son las unidades de medidas que se pueden utilizar en CSS para definir tamaños a elementos y texto. Durante años para tipografías utilizo pixeles, ya que me parecía tener más control en cuanto a cómo lo despliegan los browsers (salvo IE6 que siempre es diferente del resto). Pero últimamente le he tomado el gusto a em, y he podido controlarlo. A nuestra disposición, la W3C puso las siguientes unidades de medidas: <h3 id="absolutas">Absolutas</h3> <ul> <li>in (pulgadas)</li> <li>cm (centímetros)</li> <li>mm (milímetros)</li> <li>pt (puntos)</li> <li>pc (picas)</li> <li>px (pixeles)</li> </ul> Las unidades absolutas permiten un contro exacto de la apariencia de la página, siempre y cuando se visualice en el entorno para la cual fue diseñada. A modo de ejemplo, al utilizar px se visualizará diferente en cada resolución de pantalla y la plataforma del usuario que está desplegando ese contenido. Peor si utilizamos pt, ya que depende del tamaño del punto de la resolución de la pantalla. <h3 id="relativas">Relativas</h3> <ul> <li>em</li> <li>ex</li> </ul> Las unidades relativas dependen de la altura del elemento en el que se usa, aunque en la práctica, es el tamaño de texto definido en las preferencias del browser. Con esto, quien está definiendo estilos mantiene un control relativo ya que depende directamente del tamaño de fuente por defecto del usuario (1em), y a partir de eso, cuanto más grande (1.2em por ej) o menor (0.7em) se visualizará esa letra. Además, permiten su uso en cualquier propiedad de medida (margin, padding) lo que finalmente muestra un diseño proporcionado a la configuración del usuario (por ejemplo, proporcionado entre una pantalla widescreen de 17" y un iPhone). <h3 id="porcentaje">Porcentaje</h3> <ul> <li>%</li> </ul> No recomendado para tipografías, ya que su control no es fácilmente determinado por quien construye los estilos ya que necesita de un elemento de referencia (100%). Sólo recomiendo su uso en cajas de layout, determinados por el ancho de la resolución del usuario. <h4 id="tabla-de-equivalencias">Tabla de equivalencias</h4> <table summary="Equivalencias en tamaños tipográficos con CSS" style="width: 50%; margin: 10px auto;"> <tr> <th scope="col" style="width: 25%"> Puntos </th> <pre><code><th scope="col" style="width: 25%"> Pixeles </th> <th scope="col" style="width: 25%"> Em </th> <th scope="col" style="width: 25%"> % </th> </code></pre> </tr> <tr> <td> 6pt </td> <pre><code><td> 8px </td> <td> 0.5em </td> <td> 50% </td> </code></pre> </tr> <tr> <td> 7pt </td> <pre><code><td> 9px </td> <td> 0.55em </td> <td> 55% </td> </code></pre> </tr> <tr> <td> 7.5pt </td> <pre><code><td> 10px </td> <td> 0.625em </td> <td> 62.5% </td> </code></pre> </tr> <tr> <td> 8pt </td> <pre><code><td> 11px </td> <td> 0.7em </td> <td> 70% </td> </code></pre> </tr> <tr> <td> 9pt </td> <pre><code><td> 12px </td> <td> 0.75em </td> <td> 75% </td> </code></pre> </tr> <tr> <td> 10pt </td> <pre><code><td> 13px </td> <td> 0.8em </td> <td> 80% </td> </code></pre> </tr> <tr> <td> 10.5pt </td> <pre><code><td> 14px </td> <td> 0.875em </td> <td> 87.5% </td> </code></pre> </tr> <tr> <td> 11pt </td> <pre><code><td> 15px </td> <td> 0.95em </td> <td> 95% </td> </code></pre> </tr> <tr> <td> 12pt </td> <pre><code><td> 16px </td> <td> 1em </td> <td> 100% </td> </code></pre> </tr> <tr> <td> 13pt </td> <pre><code><td> 17px </td> <td> 1.05em </td> <td> 105% </td> </code></pre> </tr> <tr> <td> 13.5pt </td> <pre><code><td> 18px </td> <td> 1.125em </td> <td> 112.5% </td> </code></pre> </tr> <tr> <td> 14pt </td> <pre><code><td> 19px </td> <td> 1.2em </td> <td> 120% </td> </code></pre> </tr> <tr> <td> 14.5pt </td> <pre><code><td> 20px </td> <td> 1.25em </td> <td> 125% </td> </code></pre> </tr> <tr> <td> 15pt </td> <pre><code><td> 21px </td> <td> 1.3em </td> <td> 130% </td> </code></pre> </tr> <tr> <td> 16pt </td> <pre><code><td> 22px </td> <td> 1.4em </td> <td> 140% </td> </code></pre> </tr> <tr> <td> 17pt </td> <pre><code><td> 23px </td> <td> 1.45em </td> <td> 145% </td> </code></pre> </tr> <tr> <td> 18pt </td> <pre><code><td> 24px </td> <td> 1.5em </td> <td> 150% </td> </code></pre> </tr> <tr> <td> 20pt </td> <pre><code><td> 26px </td> <td> 1.6em </td> <td> 160% </td> </code></pre> </tr> <tr> <td> 22pt </td> <pre><code><td> 29px </td> <td> 1.8em </td> <td> 180% </td> </code></pre> </tr> <tr> <td> 24pt </td> <pre><code><td> 32px </td> <td> 2em </td> <td> 200% </td> </code></pre> </tr> </table> </article> <article> <h1>Siendo específico</h1> Wed, 09 Jan 2008 18:13:02 +0000 Este tema debe ser uno de los artículos griales de CSSLab, y podría aportar en la solución de más de algún problema con el maqueteado CSS. La especificidad es una técnica que debe ser entendida muy a fondo, para que pueda ser abordada sin problemas posteriores, donde lo más común es cuando se escriben estilos para un mismo elemento y el browser no lo despliega como lo estipulamos. En esos momentos, lo más probable (aparte del error de que pueda estar mal escrito) es que haya conflictos de especificidad. Y mientras más grandes los archivos CSS (grandes me refiero a más de 1000 líneas), más difícil es controlar estos conflictos. Son varias las reglas que implican la especificidad. Comencemos. <h3 id="1">1.</h3> Si los selectores son iguales, entonces el último escrito (el de más abajo en el código, ya que el browser lee los archivos de arriba hacia abajo) es el que toma importancia: <pre><code class="language-css"> p { font-size: 1em; } p { font-size: 1.5em; } </code></pre> Entonces tendrá el tamaño de texto de 1.5em. Esto es cuando los selectores son declarados de la misma forma, como en el ejemplo anterior. Vamos con otro: <h3 id="2">2.</h3> Para: <ul><li><a href="">Link</a></li></ul> <pre><code class="language-css"> ul li a { color: #f00 } a { color: #333 } </code></pre> Si siguiéramos la misma filosofía, el link de una lista tendría color gris oscuro porque fue declarado después. Pero como hemos sido más específico diciendo que el link en un elemento de una lista (ul li a) es rojo, éste gana predominancia y finalmente se muestra rojo, no gris porque hemos sido más específicos con ello. Básicamente, esta regla dice: mientras más específico el selector, más preferencia tendrá por sobre otros estilos. Existen cálculos creados para ayudar a evitar errores en esto: <h4 id="selectores-html-tienen-valor-1">Selectores HTML tienen valor 1</h4> p tendrá especificidad 1 <pre><code class="language-css">(p = 1)</code></pre> ul li a tendrá especificidad 3 <pre><code class="language-css">(ul+li+a = 1+1+1 = 3)</code></pre> <h4 id="selectores-de-class-tienen-valor-10">Selectores de Class tienen valor 10</h4> .nombreclass tendrá especificidad 10 <pre><code class="language-css">(.nombreclass = 10)</code></pre> div p.nombreclass tendrá especificidad 12 <pre><code class="language-css">(div+p+.nombreclass = 1+1+10)</code></pre> <h4 id="selectores-de-id-tienen-valor-100">Selectores de ID tienen valor 100</h4> #nombreid tendrá especificidad 100 <pre><code class="language-css">(#nombreid = 100)</code></pre> body #nombreid .nombreclass p tendrá especificidad 112 <pre><code class="language-css">body+#nombreid+.nombreclass+p = 1+100+10+1 = 112</code></pre> <h3 id="3">3.</h3> Selectores universales tienen especificidad 0, tales como ***** y body <h3 id="4">4.</h3> Estilos inline (esos que son dados dentro del mismo HTML mediante el atributo style="") tienen la mayor especificidad de todas. <pre><code class="language-markup">Texto en azul</code></pre> Finalmente, un par de consejos: <ul> <li>Trata de evitar [!important][1]. De eso se trata todo esto, entender cómo funciona para que no tengas que parchar utilizando métodos que causan más problemas de los que soluciona.</li> <li>– No te vuelvas loco especificando. Sería insano toparse con:</li> </ul> <pre><code class="language-css">body div#container div#menu ul li ul.submenu li a</code></pre> <ul> <li>– Ahorra especificidad no yendo atrás más que 2 o 3 niveles para evitar conflictos, como por ejemplo:</li> </ul> <pre><code class="language-css">#menu li a</code></pre> <h4 id="links">Links:</h4> <ul> <li><a href="http://www.htmldog.com/guides/cssadvanced/specificity/" title="Enlace externo a "HTML Dog"" target="_blank">Specificity | HTML Dog</a></li> <li><a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" title="Enlace externo a "Smashing Magazine"" target="_blank">CSS Specificity: Things You Should Know</a></li> </ul> [1]: <a href="http://www.csslab.cl/2007/06/05/la-verdadera-importancia/">http://www.csslab.cl/2007/06/05/la-verdadera-importancia/</a> “Enlace en CSSLab a “La verdadera !importancia”” </article> <article> <h1>Un par de preguntas</h1> Mon, 07 Jan 2008 14:31:42 +0000 Hace un tiempo ya se me contactó a través de este mismo sitio para una breve entrevista para el <a href="http://luisalarcon.com/blog/" title="Enlace externo a "Luis Alarcón, Blog"" target="_blank">blog de Luis Alarcón</a>, diseñador web de Perú. El motivo fue “un estudio acerca del perfil del Diseñador Web actual y quisiera que compartieras tu experiencia al respecto, respondiendo 2 breves preguntas”-según sus propias palabras, y agrega- “forma parte de un pequeño estudio que realizo al respecto entre profesionales, estudiantes e instituciones dedicadas diseño web en distintos países”. Pues, un honor haber sido considerado y aportar con mi experiencia. Los enlaces a continuación: <ol> <li><a href="http://luisalarcon.com/blog/?p=560" title="Enlace externo a "El perfil del nuevo diseñador web (Parte I)"" target="_blank">El perfil del nuevo diseñador web (Parte I)</a></li> <li><a href="http://luisalarcon.com/blog/?p=564" title="Enlace externo a "¿Qué debieran aprender los estudiantes de diseño web? (Parte II)"" target="_blank">¿Qué debieran aprender los estudiantes de diseño web? (Parte II)</a></li> </ol> </article> <article> <h1>Un poco sobre Microformatos</h1> Thu, 03 Jan 2008 15:01:43 +0000 Un Microformato es una forma de agregar significado semántico a un contenido web que use HTML o XHTML, lo que hace que la información quede indexada. Más específicamente, son porciones de código estándar con el objetivo de insertar contenido semántico aprovechando atributos existentes (como id, class o rel). Para ello se asignan valores a estos atributos que, aparte de darles estilos mediante CSS, puede generar procesos por parte de agentes de usuario (por ejemplo los buscadores). Los Microformatos son abiertos para que cualquiera pueda utilizarlos, y permiten información de contacto, relaciones sociales, direcciones, coordenadas, etc. Un ejemplo práctico. Imagínese que tienes un blog y escribes un artículo sobre un restaurant que visitaste recientemente y te encantó el lugar y la comida. Lo quieres recomendar y escribes tu reseña, para finalmente entregar el nombre del lugar, la dirección y si tiene sitio web probablemente la enlaces. Súper, pero: ¿Qué pasa si además, entregas las coordenadas? Así, a través de <a href="http://microformats.org/wiki/geo" title="Enlace externo a "Geo Microformat"" target="_blank">geo</a> puede ser integrado con <a href="http://maps.google.com/?ie=UTF8&ll=-33.42,-70.61&spn=0.004603,0.007349&t=h&z=17&om=1" title="Enlace externo a "Google Maps"" target="_blank">Google Maps</a> y poder mostrar gráficamente el camino de cómo llegar al lugar. Así, un lector de tu blog puede leer tu artículo desde su dispositivo móvil favorito, y llegar al restaurant cómodamente siguiendo el mapa directo desde Google, o guardándolo como favorito para consultarlo después. Su uso sería de la siguiente forma: <pre class="language-markup"><code>-33.42, -70.61</code></pre> Se utilizan class que son leídos y entendidos por otras aplicaciones, ya que son estándares por medio de las especificaciones de <a href="http://microformats.org/wiki/hcard" title="Enlace externo a "hCard Microformat"" target="_blank">hCard</a> de <a href="http://microformats.org/wiki/Main_Page" title="Enlace externo a "Microformats Wiki"" target="_blank">Microformats</a>. <h3 id="iquesty-queacute-ganamos-con-todo-esto">¿Y qué ganamos con todo esto?</h3> Microformatos permiten que las personas tengan control sobre sus propios datos e informaciones, a través de la estandarización en el marcado HTML. Esto ayuda a que los buscadores indexen y entreguen información cada vez más precisa y correcta, siempre y cuando ésta haya sido bien formatada . Si creías que ya hacías un buen trabajo aplicando semánticamente las etiquetas HTML a tu contenido, con Microformatos te estarías elevando a lo que se especula será la [Web 3.0][1]. Es una iniciativa que aún está en desarrollo, pero que ha dado mucho que hablar y que tiene un futuro promisorio. <h4 id="links">Links:</h4> <ul> <li><a href="http://microformats.org/wiki/Main_Page-es" title="Enlace externo a "Microformats Wiki"" target="_blank">Microformats Wiki</a></li> <li><a href="http://es.wikipedia.org/wiki/Microformatos" title="Enlace externo a "Microformatos en Wikipedia"" target="_blank">Microformatos</a></li> <li><a href="http://www.webstandards.org/action/dwtf/microformats/" title="Enlace externo a "Microformats Extensions for Dreamweaver"" target="_blank">Microformats Extensions for Dreamweaver</a></li> </ul> [1]: <a href="http://www.csslab.cl/2007/08/30/la-semantica-en-la-web-30/">http://www.csslab.cl/2007/08/30/la-semantica-en-la-web-30/</a> “Enlace en CSSLab a “La semántica en la Web 3.0"” </article> <article> <h1>Videocast 2: menú con listas</h1> Fri, 28 Dec 2007 19:26:12 +0000 Fijándome en las estadísticas de CSSLab, me dí cuenta de que un gran número de visitas a este sitio desde buscadores viene desde la consulta css menú horizontal. Este tema es algo que [se ha tocado hace bastante tiempo][1]. Pero nunca está de mas reforzarlo, y ofrecer mejor material a quienes necesitan de este recurso. Además es bueno de que los usuarios hagan esta búsqueda, hace pensar de que tienen interés de aprender la manera correcta de crear menúes. Bueno, estoy para ayudar, así que hice un videocast bastante básico y rápido de cómo lograr menúes con listas, verticales u horizontales. Como he aprendido del [videocast anterior][2], esta vez subí 3 versiones para deleite del consumidor. Espero sea de bastante ayuda a quienes necesitan de este método. <div class="video-container"> </div> Como siempre, el [material con el que hice el ejemplo][3] está disponible. [1]: <a href="http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/">http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/</a> “Enlace en CSSLab a “Menú horizontal y algo +”” [2]: <a href="http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/">http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/</a> “Enlace en CSSLab a “Videocast 1: layout compuesto”” [3]: <a href="http://www.csslab.cl/ejemplos/videocast/3/menu.html">http://www.csslab.cl/ejemplos/videocast/3/menu.html</a> “Material ejemplo “Videocast 2” en CSSLab” </article> <article> <h1>Borde interno con CSS</h1> Wed, 26 Dec 2007 14:10:22 +0000 Para todos es conocido el [modelo de caja][1] y cómo la propiedad border juega un papel importante en ello. Para los que no, un brevísimo resumen: cualquier borde que definas a través de CSS, te es sumado al ancho y alto de la caja que lo contenga (entre otras propiedades). Si no ha quedado claro aún, insisto que te tomes un tiempo para [leer el artículo sobre ello][1]. La idea es mostrar una técnica donde a través de una imagen contenida dentro de un link, podamos hacer que el border al momento del :hover no interfiera con la caja contenedora de la imagen. O sea, en vez de ser externo, que se despliegue hacia dentro de la imagen. Primero, un ejemplo de lo que ocurre comúnmente: [Ver Ejemplo 1][2]{.verejemplo} Qué sucede. Primero, al tener una imagen linkeada de la manera <a></a> debemos darle border al <a> para que, a través de la pseudo-class :hover me funcione sin problemas. Como verán, la imagen al principio no tenía ese border (el cual exageré para que se notara el problema). ¿Qué solución tendríamos? Bueno, si son acertivos lo solucionarían agregando un border al a:link del mismo color de fondo y del mismo grosor. Así, no se notaría el cambio de instancia (en cuanto a ese movimiento que se produce), y funciona bastante bien. Pero, ¿y si no podemos hacer calzar el color de fondo, ya que tenemos una imagen, un pattern o un gradiente por ejemplo? [Ver Ejemplo 2][3]{.verejemplo} Bueno, aqui les tengo una solución más elegante al tema. Simplemente, en vez de que el border me sume pixeles a la caja que contiene la imagen, es mejor que las haga parte, integrando el border dentro de la imagen. La única contra que veo es que puede que tape algo importante que tenga la imagen, pero bueno depende de su criterio como diseñador/desarrollador aplicarlo. El HTML del ejemplo es demasiado simple: <pre class="language-markup"><code><a href="#"><img src="foto.jpg" /></a></code></pre> y con el CSS haremos magia: <pre class="language-css"><code>a { display: block; overflow: hidden; position: relative; width: 300px; height: 200px; } a img { display: block; } a:hover { border: 5px solid red; width: 290px; height: 190px; } a:hover img { margin: -5px 0 0 -5px; }</code></pre> <div class="pullquote"> </div> Al link le decimos que sea un elemento bloque (display: block;) y que tenga alto y anchos de la imagen (si no fuera block no lo aplicaría). Luego, al a:hover le definimos el borde que queremos, así como el nuevo ancho y alto restados el borde multiplicado por 2. Me explico. Si tenemos un border: 10px; tenemos que restar 20px al alto y ancho ya que lo cubre por completo, según el [modelo de caja][1]. Finalmente, el truco final. Al a:hover img le decimos que la imagen el momento de poner el mouse sobre el link se va a mover 5px negativos arriba y 5px negativos hacia la izquierda. Con esto logramos que la imagen no se note el movimiento con el :hover y vuelva a su posición inicial. Si su borde es de 10px, sería margin: -10px 0 0 -10px; [Ver Ejemplo Final][4]{.verejemplo} [1]: <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/">http://www.csslab.cl/2006/12/14/como-caja-el-modelo/</a> “Enlace en CSSLab a “Como caja: el modelo”” [2]: <a href="http://www.csslab.cl/ejemplos/border/ej1.html">http://www.csslab.cl/ejemplos/border/ej1.html</a> “Enlace en CSSLab a “Ejemplo 1"” [3]: <a href="http://www.csslab.cl/ejemplos/border/ej2.html">http://www.csslab.cl/ejemplos/border/ej2.html</a> “Enlace en CSSLab a “Ejemplo 2"” [4]: <a href="http://www.csslab.cl/ejemplos/border/ej3.html">http://www.csslab.cl/ejemplos/border/ej3.html</a> “Enlace en CSSLab a “Ejemplo Final”” </article> <article> <h1>Una nueva dicotomía</h1> Wed, 19 Dec 2007 15:35:14 +0000 El tema del nuevo diseñador/desarrollador se viene arrastrando desde hace mucho tiempo y es constantemente nombrado en los artículos de este mismo sitio. Pero bien, ¿cuál de ellos soy, o me considero? ¿Con cuál me identifico, o qué rol practico? Actualmente la línea es delgada, y suele sucederle a muchos profesionales dedicados a la web. Soy diseñador gráfico de papel, pero actualmente lo que menos hago es diseñar. Aunque no programo (salvo algunas líneas de JS) me dedico a hacer marcado XHTML estricto. Y creo que para esto, los profesionales idóneos son los diseñadores, porque suelen tener otra sensibilidad al momento de considerar colores, formas, optimizar imágenes y aspectos de navegabilidad. Y <a href="http://www.nclud.com/sketchbook/should-web-designers-know-how-to-code" target="_blank" title="Enlace externo a "Should web designers know how to code?"">leyendo un artículo</a>, me sumerjo en una nueva pregunta: ¿Deben los diseñadores escribir código? Pues la respuesta para la mayoría sería que “no, son creativos y tienen otros roles”. Pero es algo que se ha valorado mucho últimamente en las empresas web, y que se puede llevar sin dejar de lado la creatividad, utilizándola para encontrar soluciones diferentes a los problemas que se encuentran a medida que se construye un sitio. Con las hojas de estilos, podemos utilizar lo mejor del buen gusto para realizar buen código. Por lo que creo que mi respuesta debería ser un sí rotundo. Con un diseñador que codifica, estás ganando tiempo e impulsando su habilidad, llevándola a otro campo más allá. En último caso, debería el diseñador conocer y dominar el sustrato al cual su diseño va a tener su función final. Otra cosa es diseñar sabiéndo cómo se va a construir, que recibir un diseño donde uno lo mira y sabe que va a pesar 1mb de tantos efectos que tiene, o que se diseñó un elemento impracticable en la web. Conocer las tipografías que se pueden utilizar y sus implicancias, cómo se puede repetir una imagen para conseguir un menor peso, las resoluciones de los monitores y sus alcances y limitantes. Eso no quiere decir que se deba dedicar a ello (como yo), o que sea el master de los masters escribiendo código que valide. Pero sí creo que debe saber cómo se construye el sitio para saber cómo diseñar para web. Y si quiere profundizarse en ello, bienvenido sea, ya que verán que podrían destacarse rápidamente dentro del medio. </article> <article> <h1>Margen duplicado para IE6</h1> Mon, 17 Dec 2007 16:15:37 +0000 Anoten un error más de despliegue por parte de IE6, por si no se han convencido de que este browser ha sido uno de los peores de la historia de la informática de todos los tiempos. Este es un problema muy específico pero habitual que involucra cajas flotantes (por eso lo habitual) y la definición de su margen. Cuando defines un float para una caja contenedora hacia un lado y luego le das un margin en esa misma dirección, lo que hace IE6 es simplemente duplicarla. Así nomás, sin pedir permiso. [Ver ejemplo (en IE6).][1]{.verejemplo} Bueno el HTML y CSS para este ejemplo será bastante básico: <pre class="language-css"><code>#caja { float: left; margin-left: 100px; }</code></pre> Para esta #caja, lo que se hizo fue darle un float: left; y un margin-left: 100px; Pero IE6 lo que hace es interpretar 200px a esa caja de margin-left. Quién lo entiende… Pero bueno, la idea es darle una solución a esa gracia de browser (y no mediante un hack). Para corregirlo, es sólo agregar un display: inline; a #caja y todo se resuelte. <pre class="language-css"><code>#caja { float: left; margin-left: 100px; display: inline; }</code></pre> [Ver ejemplo final (IE6)][2]{.verejemplo} <h4 id="link">Link:</h4> <ul> <li><a href="http://www.positioniseverything.net/explorer/floatIndent.html" target="_blank" title="Enlace externo a "Position is Everything"">Floats, Margins and IE</a></li> </ul> [1]: <a href="http://www.csslab.cl/ejemplos/float_margin/ej1.html">http://www.csslab.cl/ejemplos/float_margin/ej1.html</a> “Enlace en CSSLab para “Ver ejemplo 1"” [2]: <a href="http://www.csslab.cl/ejemplos/float_margin/ej2.html">http://www.csslab.cl/ejemplos/float_margin/ej2.html</a> “Enlace en CSSLab para “Ver ejemplo Final”” </article> <article> <h1>Horror</h1> Tue, 11 Dec 2007 18:28:36 +0000 Modificando una página, me encontré con esto. Sin comentarios. <pre class="language-markup"><code> <tr align="center" valign="middle"> <td class="cuerpo2"> <div align="center"><a href="entra.asp" target="_top" class="menulink Estilo1">INICIO</a></div></td> </tr> </table></td> </tr> <tr align="left"> </tr> </table> </td> </tr>   </table>  </body> </html> </code></pre><blockquote> </blockquote> </article> <article> <h1>Lo ví y me gustó 24</h1> Mon, 10 Dec 2007 19:21:28 +0000 #24 – 10 Diciembre 2007 Sigue enviando tu sitio construído con estándares. Además, puedes publicarlo en el [nuevo tema de los foros][1], donde pueden opinar todos de tu estilo gráfico, o código generado. <a href="http://www.leandropontes.com/" target="_blank"></a> <a href="http://www.mosaiko.com.br/" target="_blank"></a> <a href="http://rawnet.com/" target="_blank"></a> [1]: <a href="http://www.csslab.cl/foros/viewforum.php?f=5">http://www.csslab.cl/foros/viewforum.php?f=5</a> “Enlace en CSSLab a “Foros - Muestra de Sitios”” </article> <article> <h1>La descendencia del CSS</h1> Thu, 06 Dec 2007 15:57:17 +0000 Como verán, hasta las Hojas de Estilo en Cascada tienen descendencia. A través de CSS podemos reconocer las etiquetas que en la estructura HTML pertenecen o están contenidas dentro de otra etiqueta, y aplicarles estilos determinados. En CSS estos se llaman Selectores Descendentes. Pero me gustaría dejar claro desde el principio que 2 de estos selectores no funcionan en IE6. ¿Y para qué sigo escribiendo sobre esto? -podrían preguntarse. Bueno porque es una manera muy útil de manejar estilos, y porque esto refuerza que IE6 apesta como browser. Espero algún día que este navegador sea borrado completamente de la faz de la tierra y podamos utilizar todos los estándares habidos y por haber, sin preocuparnos por el soporte. Bueno, hecho los descargos. <h3 id="selectores-descendentes">Selectores Descendentes</h3> Se ocupan para afectar a todos los elementos que pertenecen (o descenden) de una determinada etiqueta padre. Esto es muy común y hace falta sólo el ejemplo en CSS para que se den cuenta de lo que me refiero: <div style="width:60%;"> <pre><code class="language-css">ul a { color: red; }</code></pre> En el ejemplo anterior, vemos que el color rojo se aplicará solamente a los enlaces <a> que estén dentro de un <ul>, y no a otros. Si queremos ser más específicos, podemos definir id‘s o class‘es: <pre><code class="language-css">.menu a { color: red; }</code></pre> </div> Aquí el color rojo estará en toda etiqueta que tenga una class=“menu”. Y siendo más específico aún, podemos definir si esa class pertenece a cierta etiqueta: <pre><code class="language-css">ul.menu a { color: red; }</code></pre> Aquí sólo se verá el rojo del link si está dentro de un <ul class="menu"> y no otra etiqueta con esa misma class. [Ver ejemplo 1][1]{.verejemplo} Hay que tener cuidado con ser tan específico declarando estilos, ya que suelen haber problemas posteriores de que no se reconoce cierto estilo, siendo que está declarado por diferencias de peso entre éstas. Esta especificidad pienso abordarlo muy luego, ya que es un problema muy común e importante de conocer. Pero mientras mejor sigo con esto. <h3 id="selectores-hijo-_no-soportado-por-ie6_">Selectores Hijo (no soportado por IE6)</h3> <div style="width:60%;"> Se usa para afectar a uno hijo de determinado elemento. <pre><code class="language-css">ul li > a { color: red; }</code></pre> Hasta aquí suena igual que los selectores descendentes. La diferencia es que con los selectores hijo afectarán solamente los links que estén dentro del <li>, y no dentro de otra sub etiqueta. </div> <pre><code class="language-markup"><ul> <li><a href="">Link 1</a></li> <li><a href="">Link 1</a></li> </ul></code></pre> Usando el ejemplo anterior, veremos que utilizando los selectores hijos el color rojo se aplicará sólo al <a> contenido dentro del <li>, y no al que está dentro de ya que pasó a ser su hijo y no del <li> (imagina que ahora es su nieto). [Ver ejemplo 2][2]{.verejemplo} <h3 id="selectores-hermanos-adyacentes-_no-soportado-por-ie6_">Selectores Hermanos Adyacentes (no soportado por IE6)</h3> <div style="width:60%;"> Son los que comparten la misma etiqueta padre y que se encuentran uno a lado del otro en la estructura HTML. Se identifica con un signo + entre los hermanos, y la etiqueta que tendrá el estilo será la última declarada luego de este +. <pre><code class="language-css">p a+em { color: red; }</code></pre> <a href="http://www.csslab.cl/ejemplos/descendentes/ejemplo3.html" title="Enlace en CSSLab para "Ver Ejemplo 3"" class="verejemplo">Ver ejemplo 3</a> Finalmente, ¿qué uso tienen estos últimos 2 selectores, si no son soportados por IE6? Bien, a través de tu framework de Javascript favorito (que suelen ser crossbrowser) puedes darles un gran uso, por ejemplo manipulando classes para tablas, que suelen tener muchos elementos anidados (para una simple celda tienes que escribir <table><tr><td></td></tr></table>). </div> [1]: <a href="http://www.csslab.cl/ejemplos/descendentes/ejemplo1.html">http://www.csslab.cl/ejemplos/descendentes/ejemplo1.html</a> “Enlace en CSSLab para “Ver Ejemplo 1"” [2]: <a href="http://www.csslab.cl/ejemplos/descendentes/ejemplo2.html">http://www.csslab.cl/ejemplos/descendentes/ejemplo2.html</a> “Enlace en CSSLab para “Ver Ejemplo 2"” </article> <article> <h1>Íconos para mejor usabilidad</h1> Mon, 03 Dec 2007 20:13:11 +0000 Relativo a un proyecto en que estoy y del cual han [salido][1] [otros][2] [interesantes][3] [artículos][4] [anteriores][5], creé un plugin de <a href="http://jquery.com/" target="_blank" title="Enlace externo a "jQuery JavaScript library"">jQuery</a> para agregar íconos a los links que sean relativos a descargas de diferentes tipos de documentos, a links externos (target="_blank"), a direcciones de e-mail (“mailto:”) y a links de impresión (“window.print”). Como surgió la necesidad, y no encontré ninguno que hiciera eso en la página de <a href="http://jquery.com/plugins/" target="_blank" title="Enlace externo a "jQuery plugins index"">plugins de jQuery</a>, me puse a hacer el mio propio. No es nada del otro mundo de complejo; en realidad es bastante simple. Lo que hace es leer las etiquetas <a> buscando por sus atributos href y target por las extensiones anteriormente nombradas y si las encuentra, agrega una class respectiva que tiene ese ícono. Lo bueno es que puedes configurar en qué <div> aplicarlo a través de un id o class. Es la versión 1.0 y se esperan mejoras, dependiendo del feedback. [Página oficial][6]{.verejemplo} [Ver demo][7]{.verejemplo} <h3 id="bajar-jqueryusableicons-plugin-v10-zip8">[Bajar jquery.usableicons plugin v1.0 (.zip)][8]</h3> [1]: <a href="http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/">http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/</a> “Enlace en CSSLab a “Videocast 1: layout compuesto”” [2]: <a href="http://www.csslab.cl/2007/10/05/alto-minimos-para-ie6-y-el-resto-claro/">http://www.csslab.cl/2007/10/05/alto-minimos-para-ie6-y-el-resto-claro/</a> “Enlace en CSSLab a “Altos minimos para IE6"” [3]: <a href="http://www.csslab.cl/2007/10/18/css-reseter/">http://www.csslab.cl/2007/10/18/css-reseter/</a> “Enlace en CSSLab a “CSS Reseter”” [4]: <a href="http://www.csslab.cl/2007/10/11/100-alto-finalmente-para-todos/">http://www.csslab.cl/2007/10/11/100-alto-finalmente-para-todos/</a> “Enlace en CSSLab a “100% alto para todos”” [5]: <a href="http://www.csslab.cl/2007/11/08/el-orden-ante-todo/">http://www.csslab.cl/2007/11/08/el-orden-ante-todo/</a> “Enlace en CSSLab a “El orden ante todo”” [6]: <a href="http://www.csslab.cl/ejemplos/usableicons/">http://www.csslab.cl/ejemplos/usableicons/</a> “Enlace a “Improving Usability through jQuery”” [7]: <a href="http://www.csslab.cl/ejemplos/usableicons/usableicons_v1/usableicons.html">http://www.csslab.cl/ejemplos/usableicons/usableicons_v1/usableicons.html</a> “Enlace a “jQuery usableicons demo”” [8]: <a href="http://www.csslab.cl/ejemplos/usableicons/usableicons_v1.zip">http://www.csslab.cl/ejemplos/usableicons/usableicons_v1.zip</a> “Enlace externo a “Download: Usable Icons for jQuery v1.0"” </article> <article> <h1>Modernizando los drop caps</h1> Thu, 29 Nov 2007 15:24:29 +0000 Para quien no los conoce, los drop caps son recursos gráficos utilizados desde hace siglos, a modo de adornos de letras iniciales de los bloques de texto. Esta letra inicial es la primera de un trabajo, capítulo o parágrafo, la que tiene la característica de ser mayor que las otras. Suele ocupar varias de las líneas de texto de ese parágrafo, y antiguamente era muy ornamentada, destacándose por sobre el contenido del texto. <div class="pullquote"> </div> Bueno, este recurso gráfico puede ser logrado a través de CSS sin trucos, ya que existe una pseudo-class :first-letter que, milagrosamente, es reconocida por todos los browsers importantes, por lo que podemos colgarnos de él para lograr este efecto. Algunos recordarán que utilizamos esta misma pseudo-class para lograr [bloques de texto con estilo][1]. Bueno, esa vez fue una técnica; ahora la utilizaremos para el propósito con que fue creada. El HTML que utilizaremos no será más que un bloque de texto con <a href="http://www.lipsum.net/" target="_blank" title="Enlace externo a "Lipsum generator"">Lorem Ipsum</a>. <pre><code class="language-markup">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo....</code></pre> Con CSS haremos que la primera letra crezca y que ocupe su lugar al rincón izquierdo superior, incluyendo las líneas de texto necesarias para ello a través de float: <pre><code class="language-css">p:first-letter { font-size:100px; margin: -10px 5px -15px 0; float:left; }</code></pre> Tuve que implementar margin negativo para que pudiera ubicarse bien dentro del espacio que le corresponde, lo que no fue muy bien aceptado por IE6. Pero bueno, hay que encontrar un concenso en este aspecto entre browsers. [Ver ejemplo 1][2]{.verejemplo} Ahora, esto no quita que podamos hacerlo más bonito, reemplazando la letra en sí por una imagen que crearemos y aplicando la [técnica de image replacement][3] que más les acomode. Eso sí, en este caso no podemos utilizar :first-letter ya que no soporta text-indent para hacer la primera letra desaparecer, y menos definir un width y height (aunque sólo Safari lo soportó en mis tests). Para esto, tendremos que crear una class y aplicárselo a un que rodee la primera letra. <pre><code class="language-markup">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo....</code></pre> <pre><code class="language-css">.dropcap { background: url(l_cap.gif) no-repeat; width: 106px; height: 100px; margin: 5px 5px 0 0; float:left; display: block; text-indent: -9999px; overflow: hidden; }</code></pre> [Ver ejemplo 2][4]{.verejemplo} [1]: <a href="http://www.csslab.cl/2007/07/31/bloques-de-texto-con-estilo/">http://www.csslab.cl/2007/07/31/bloques-de-texto-con-estilo/</a> “Enlace en CSSLab a “Bloques de texto con estilo”” [2]: <a href="http://www.csslab.cl/ejemplos/dropcap/ejemplo1.html">http://www.csslab.cl/ejemplos/dropcap/ejemplo1.html</a> “Enlace para “Ver Ejemplo 1"” [3]: <a href="http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/">http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/</a> “Enlace en CSSLab a “Image Replacement o cómo reemplazar contenido por imagen”” [4]: <a href="http://www.csslab.cl/ejemplos/dropcap/ejemplo2.html">http://www.csslab.cl/ejemplos/dropcap/ejemplo2.html</a> “Enlace para “Ver Ejemplo 2"” </article> <article> <h1>Sobre la accesibilidad y sus implicancias</h1> Tue, 27 Nov 2007 14:17:46 +0000 Continuando con el tema de la accesibilidad y su implementación en todos los medios web, me gustaría profundizarlo para que no queden dudas sobre sus alcances. Existen muchos argumentos a favor y en contra para su aplicación en un proyecto web. En mi experiencia, es un tema esencial y que no debe siquiera ser discutido su consideración, ya que es tarea nuestra quienes realizamos los sitios de estudiarlo, conocerlo y aplicarlo. Leyendo un artículo de <a href="http://acessodigital.net/quem_somos.html#leda" target="_blank" title="Enlace externo a "Quem Somos: Lêda Lucia Spelta"">Lêda Spelta</a> (psicóloga de Brasil experta en accesibilidad) me tomo la molestia de citarla, traducir y completar parte de su interesante artículo: <a href="http://acessodigital.net/art_acessibilidade-web-7-mitos-e-um-equivoco.html" target="_blank" title="Enlace externo a "Acessibilidade web: 7 mitos e um equívoco"">Accesibilidad web: 7 mitos y un equívoco</a>. <h3 id="mito-1-em-stylefont-size-14px-color-333la-accesibilidad-web-es-soacutelo-para-deficientes-visualesem">Mito 1: “La accesibilidad web es sólo para deficientes visuales”</h3> Ellos son sólo una parte de quienes se ven perjudicados con sitios mal construídos. Accesibilidad es para quienes: <ul> <li>no ven la pantalla</li> <li>no usan mouse</li> <li>no usan teclado</li> <li>no leen el texto o no saben leer</li> <li>no escuchan el sonido</li> <li>usan un browser diferente, o que es minoría</li> <li>usa un computador antiguo</li> <li>usa un computador demasiado moderno</li> <li>tiene una conexión muy lenta</li> <li>etc.</li> </ul> Por supuesto que lo primero que se nos viene a la mente… "¡Cómo cresta lo hago para todos ellos!". Pues si te acostumbraras a escribir código semántico, atendiéndote a los estándares ya estás matando 3 pájaros de un tiro. Además si sabes optimizar bien las imágenes y utilizarlas sólo cuando es estrictamente necesario, otros 4 pájaros caen con esa misma bala. Como ves, no es trabajo doble, sólo el mismo que haces pero bien hecho. <h3 id="mito-2-em-stylefont-size-14px-color-333en-la-praacutectica-el-nuacutemero-de-usuarios-beneficiados-con-la-accesibilidad-es-muy-bajoem">Mito 2: “En la práctica, el número de usuarios beneficiados con la accesibilidad es muy bajo”</h3> Eso es algo lógico de pensar, pero que no puedes mesurar. La mayoría de los usuarios que conoces probablemente no cumpla con ningún tipo de deficiencia nombrado anteriormente, pero es no dice que todos quienes entren a tu sitio no lo sean. Recuerda que si publicaste algo en Internet, se lo publicas al mundo entero; cualquiera puede entrar y verlo, no sólo quienes conoces. Y cualquiera de ellos son posibles clientes. <h3 id="mito-3-em-stylefont-size-14px-color-333hacer-que-un-sitio-sea-accesible-toma-tiempo-y-cuesta-caroem">Mito 3: “Hacer que un sitio sea accesible toma tiempo y cuesta caro”</h3> Aquí se aplican los factores costo/beneficio. Pero, como ya fue mencionado, el diseñador/desarrollador debe estar capacitado para aplicar la accesibilidad en todos sus proyectos, a mediano rango. Este mediano rango sería estructurar un código semántico y utilizando estándares web, siempre cuidando el peso de imágenes y uso de objetos externos. Un rango alto y donde sí se requiere mayor experticia y dominio es un [sitio web totalmente optimizado para ciegos][1], donde se utiliza una hoja de estilos diferente y se aplican otras técnicas. Y es un [deber de grandes empresas][2] (masivas y públicas) proveer este tipo de servicios a sus consumidores. <h3 id="mito-4-em-stylefont-size-14px-color-333es-mejor-hacer-un-sitio-especial-para-deficientes-visualesem">Mito 4: “Es mejor hacer un sitio especial para deficientes visuales”</h3> ¿Mejor para quién? El diseñador tendrá doble trabajo, al igual que el mantenedor de esas páginas. Deficientes estarán perjudicados, ya que lo más común es que este sitio especial esté siempre desactualizado. <h3 id="mito-5-em-stylefont-size-14px-color-333un-sitio-accesible-a-deficientes-visuales-no-es-bonitoem">Mito 5: “Un sitio accesible a deficientes visuales no es bonito”</h3> Bueno, hay que ser consecuentes. Las personas ciegas no pueden siquiera ver el diseño que estás aplicando. Pero aún así puedes utilizar fotos, videos, gráficos, audio, etc. Basta con que utilices sus etiquetas y atributos correctamente y los lectores de pantalla podrán leerle al usuario de qué se trata la foto, por ejemplo. <h3 id="mito-6-em-stylefont-size-14px-color-333mejor-ir-por-partes-primero-construiacutemos-el-sitio-luego-lo-hacemos-accesibleem">Mito 6: “Mejor ir por partes: Primero construímos el sitio, luego lo hacemos accesible”</h3> Es verdad que no podemos hacer todo al mismo tiempo y debemos priorizar. Aún así, si se construye un edificio con escaleras y luego hay que romperlas para poner rampas para sillas de ruedas es un desperdicio de tiempo y recursos. Y no queda del todo bien. En un sitio web es lo mismo, los parches son a la orden del día. <h3 id="mito-7-em-stylefont-size-14px-color-333no-podemos-hacer-un-sitio-accesible-con-el-tiempo-y-recursos-que-tenemosem">Mito 7: “No podemos hacer un sitio accesible con el tiempo y recursos que tenemos”</h3> Como ocurre con cualquier innovación, el primer proyecto demanda tiempo y costo en capacitación, ya que necesitamos enseñar al equipo cómo se hace. Pero luego el aprendizaje queda y se aplica fluidamente en los proyectos venideros, lo que se puede ver como un valor agregado dentro del costo de los mismos. <h3 id="equiacutevoco-em-stylefont-size-14px-color-333mi-sitio-estaacute-enfocado-a-un-puacuteblico-especiacutefico-y-no-me-interesan-otros-gruposem">Equívoco: “Mi sitio está enfocado a un público específico, y no me interesan otros grupos”</h3> Normalmente cuando se afirma que un sitio está direccionado a un público específico, nos referimos que el contenido del sitio sólo tiene interés para un determinado porcentaje de usuarios. Pero esto no quiere decir que podemos alentar el interés de otros usuarios diferentes a los que teníamos en mente. Si restringimos el acceso de nuestro sitio al que juzgamos que son nuestro target, estamos en la práctica utilizando Internet para limitar nuestro público, en vez de ampliarlo. [1]: <a href="http://www.csslab.cl/2006/05/23/diseno-a-oscuras/">http://www.csslab.cl/2006/05/23/diseno-a-oscuras/</a> “Enlace en CSSLab a “Diseño a oscuras”” [2]: <a href="http://www.csslab.cl/2007/11/19/servicios-pblicos-en-la-web/">http://www.csslab.cl/2007/11/19/servicios-pblicos-en-la-web/</a> “Enlace en CSSLab a “Servicios públicos en la web”” </article> <article> <h1>Botones redondos y livianos</h1> Thu, 22 Nov 2007 17:08:48 +0000 Cuando uno toma un diseño, o cuando uno mismo lo está haciendo, llegando la hora de comenzar a armar se deben de tomar varias desiciones que pueden llegar a cambiar partes del mismo. Por ejemplo, cómo estructurarlo, cómo las cajas se van a comportar, cómo la interacción de un menú puede llegar a influenciar el contenido, o proponer dónde aplicar javascript que realice tal o cual acción; enfin. Me ha sucedido que cuando veo un menú con un diseño más que extravagante, el diseñador quien lo realizó no me puede argumentar porqué de ese estilo, por lo que le contraargumento que al construirlo lo que pasará es que quedará más pesado que los estilos del contenido mismo, lo que debiera ser lo principal del sitio (fondos degradados, con texturas o patterns, etc). Como soy diseñador, conozco las causas, motivos, razones y prioridades al momento de diseñar un sitio, y espero que mi opinión sea tomada a cuenta; y de hecho así es. Bueno, finalmente se llega a consenso y se cambia el diseño de esos botones redondo con gradiente para mejor optimización de las imágenes del sitio. Pero hay momentos en que así deben de ser, y lo mejor es estar precavido y conocer cómo se puede llegar a optimizar la construcción de un menú completo de bordes redondos. La principal es el ancho variable de cada botón, donde lo que muchos novatos harían sería recortar cada fondo de diferentes anchos y aplicarlo con classes. Es lógico hasta cierto sentido, pero si el menú es largo, o tiende a crecer, y si está presente en varias páginas, no queremos que los cargue siempre. Por lo tanto, con sólo 2 imágenes recortadas lo replicaremos a todos los ítems del menú, independiente del texto que contenga. La técnica utilizada aquí puede después ser aplicada para muchas otras soluciones, depende de uds. la creatividad de saber dónde y cuándo. Tendremos 2 imágenes: el lado derecho del botón (o comienzo), con el fondo extendido lo bastante para que pueda cubrir todos los anchos de textos, y el izquierdo (o cierre), lo pequeño bastante para cubrir el final del botón. <div class="pullquote"> </div> Lo que haremos es crear un link <a>. En él definiremos el fondo del botón del lado izquierdo, o sea el comienzo del botón. Le damos el alto y ancho del botón. Dentro de este <a> y conteniendo al texto del botón estará un , mediante esta etiqueta le daremos el cierre al botón, el lado derecho, además de otras propiedades como el padding. Traté de ilustrar este método en la siguiente imagen, ojalá sea de ayuda: Explicado la técnica, procedo al HTML: <a href="#" class="btn_grande">Botón</a> Y mediante CSS, como es costumbre, haremos la magia: a, a span { background-repeat: no-repeat; color: #fff; display: block; } a.btn_grande { background-image: url(imgs/btn_izq.gif); background-position: left top; height: 125px; text-decoration: none; text-shadow: #000 1px 1px 3px; letter-spacing: -2px; width: 290px; text-align: center; } a.btn_grande span { background-image: url(imgs/btn_der.gif); background-position: right top; height: 100px; padding-top: 25px; font-size: 65px; font-weight: bold; } Para el efecto del :hover, utilizaré la técnica del [rollover rápido][1] mostrado en un artículo muy anterior. Es importante notar que el :hover se debe hacer tanto al link como al , ya que son 2 imagenes diferentes que deben moverse: a.btn_grande:hover { background-position: left bottom; } a.btn_grande:hover span { background-position: right bottom; } [Ver ejemplo final del botón más grande del mundo.][2]{.verejemplo} [1]: <a href="http://www.csslab.cl/2005/11/22/rapidos-rollovers-con-css/">http://www.csslab.cl/2005/11/22/rapidos-rollovers-con-css/</a> “Enlace en CSSLab a “Rápidos rollovers con CSS”” [2]: <a href="http://www.csslab.cl/ejemplos/btn/index.html">http://www.csslab.cl/ejemplos/btn/index.html</a> “Enlace en CSSLab para “Ver ejemplo final”” </article> <article> <h1>Servicios públicos en la web</h1> Mon, 19 Nov 2007 22:38:12 +0000 Tratando de cumplir con mi deber como ciudadano, ingresé a la <a href="http://www.lascondesonline.cl/" target="_blank">página web de mi comuna</a> para ver el estado de una multa de tránsito con la mejor de las intenciones. Sorpresa mayúscula encontrarme que al tratar de buscar con mi RUT el botón de Buscar no funciona. Como utilizo Safari 3 por defecto, me cambié de browser (ya que es común que un desarrollo antiguo no funcione en este moderno browser, que se apega bastante bien a los estándares). Voy por Firefox 2. Tampoco funcionó la porquería. Bueno, Opera sí que va -pensé ingenuamente… ¡tampoco! Horror, tuve que abrir Crossover y luego IE6 para poder ingresar y ver el estado de mi multa en ese pésimo sitio, que quedó estancado en el milenio pasado. Eso me recordó esos tristes días de Sitio hecho para Internet Explorer 6. Pero cómo estos sitios aún existen, más aún sitios públicos que debieran velar por una accesibilidad universal, o por lo menos tratar de hacerlo. Esto me recuerda otro tema, donde quienes hacen estos sitios, o están a cargo de crearlos y desarrollarlos no tienen una pizca de idea de estándares web, usabilidad, accesibilidad, o un mínimo de buen gusto. En muchas empresas, quienes dirigen o son jefes de áreas o de proyectos suelen no conocer sobre estos temas muy importantes. Demasiado importantes. Me ha tocado ver cómo se sobrepasan reglas básicas de accesibilidad, por ignorancia, o por creer que hacen parte de otro desarrollo y no son relevantes. Suelen creer que hacer un sitio semántico toma más tiempo, por lo tanto es más caro y además no estaba dentro de la cotización, entre otras burradas. Cuidado que no estoy generalizando, sólo que son casos específicos y lamentablemente muy comunes. Realmente una vergüenza que sitios tan masivos y que debieran de prestar una ayuda a la comunidad no sean realizados por personas capacitadas para ello. My 2 cents. </article> <article> <h1>Volando con Moo</h1> Fri, 16 Nov 2007 16:47:58 +0000 Mootools es más que un excelente framework, es tremenda herramienta de desarrollo. Y de efectos. En su <a href="http://docs.mootools.net/" target="_blank" title="Enlace externo a "Documents for Mootools"">sitio web oficial</a>, la documentación deja algo que desear, y la falta de ejemplos desglosados impide que quienes no estén acostumbrados a esta herramienta pueda siquiera comenzar a usarla. Un efecto que me gusta mucho y que he utilizado un par de ocasiones es <a href="http://demos.mootools.net/Fx.Scroll" target="_blank" title="Enlace externo a "Mootools: FX.Scroll"">FX.Scroll</a>, donde puedes a través de id`s linkear a secciones dentro de un div, y el script te llevará volando hacia su objetivo, con una suave transición. Para que sepan de lo que hablo, vean el ejemplo final: <a href="https://csslab.cl/ejemplos/volando/index.html">Ver ejemplo final</a> Bueno, la idea es mostrar cómo se hace para que uds. puedan replicarlo según sus necesidades. Comenzaré por el HTML que se constituye de 3 partes: el menú (#menu, que lo pueden hacer cómo se les dé la gana, lo importante son los id‘s de los links), el div que albergará las secciones (#dentro, que están posicionadas absolutamente) y el contenedor que funciona como una ventana que esconde el resto (#envoltura esconde con overflow: hidden): <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><ul id="menu"> <li><a id="link1" href="#">Contenido 1</a></li> <li><a id="link2" href="#">Contenido 2</a></li> <li><a id="link3" href="#">Contenido 3</a></li> </ul> <div id="envoltura"> <div id="dentro"> <div id="contenido1"> <h1>1</h1> </div> <div id="contenido2"> <h1>2</h1> </div> <div id="contenido3"> <h1>3</h1> </div> </div> </div> </code></pre></div>Ya el CSS es lo que ayuda a la magia (obviaré el estilo del #menu): <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css">#envoltura { clear: both; margin: 5px auto; overflow: hidden; height: 300px; width: 600px; border: 3px solid #666; position: relative; } #dentro { width: 1600px; height: 1600px; background: url(imgs/fondo.jpg) center center no-repeat; position: relative; } h1 { color: #fff; font-size: 200px; text-shadow: #000 1px 1px 10px; } #contenido1 { position: absolute; left: 250px; top: 80px; } #contenido2 { position: absolute; left: 800px; top: 1200px; } #contenido3 { position: absolute; left: 900px; top: 550px; } </code></pre></div>Y finalmente lo que hace la magia, el JS. Antes que todo se linkea mootools.js, y luego el script que podemos configurar a nuestro gusto: <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js">window.addEvent('domready', function(){ var scroll = new Fx.Scroll('envoltura', { wait: false, duration: 1000, offset: {'x': -230, 'y': -20}, transition: Fx.Transitions.Back.easeInOut }); $('link1').addEvent('click', function(event) { event = new Event(event).stop(); scroll.toElement('contenido1'); }); $('link2').addEvent('click', function(event) { event = new Event(event).stop(); scroll.toElement('contenido2'); }); $('link3').addEvent('click', function(event) { event = new Event(event).stop(); scroll.toElement('contenido3'); }); }); </code></pre></div>Bueno, nuevamente les dejo el link al ejemplo final: <a href="https://csslab.cl/ejemplos/volando/index.html">Ver ejemplo final</a> </article> <article> <h1>Cómo no usar más iframe</h1> Mon, 12 Nov 2007 20:14:28 +0000 Estuvieron de moda. Fueron la sensación. Pero como muchas otras etiquetas, perdieron su reinado dado a que no eran accesibles y mal indexado por los buscadores. Pero no totalmente, ya que suelen ser bastante útiles para refrescar datos dinámicos, sin tener que hacer un reload del sitio completo. ¿Te suena esta teoría de algún lugar? ¿Quizás de [AJAX][1]? Esa sigla tan de moda y que vende más que detergente o equipo de fútbol holandés, puede utilizar 2 recursos para realizar sus consultas a servidor asincrónicamente. Una, es el objeto XMLHTTPRequest (propietario de Microsoft); la otra, es IFrame. Esas ventanas modales ([lightbox, greybox, thickbox][2]) suelen utilizar iframe‘s para abrir otros contenidos dentro de la misma página, sin tener que volver a cargarla, evitando también el ya obsoleto popup. Así que no estaba tan muerta del todo esta etiqueta… Bueno, pero la idea es evitar su uso dentro de contenidos, para así impedir la limitada acccesibilidad que nos entrega (no todos los browsers lo interpretan) y que sea indexado separadamente por los buscadores (así como ocurre con los <frame>, que tienen la misma lógica). Mediante CSS lograremos el mismo fin, el de poder diagramar un espacio donde el contenido fluya a través de scroll vertical. Pero todo dentro de la misma página. El HTML no será nada distinto a un bloque de texto cualquiera, soportado por un <div>: <pre><code class="language-markup"><div id="contenido_scroll"> Morbi non erat non ipsum pharetra.... Pellentesque habitant morbi tristique..... </div></code></pre> A través de CSS veremos reales cambios. Primero, al igual que en la etiqueta , definiremos alto y ancho fijo. Todo lo que se salga de ese alto será absorbido por una elegante barra de scroll, la que será mostrada mediante la propiedad overflow: scroll; <pre><code class="language-css">#contenido_scroll { width: 300px; height: 200px; overflow: scroll; }</code></pre> [Ver ejemplo 1][3]{.verejemplo} Eso es todo. Muy simple. Ahora, existe otra propiedad CSS no muy difundida que es overflow-x: hidden; Con ella, lograremos que desaparezca la barra horizontal de scroll, o la vertical con overflow-y: hidden; Pero esta propiedad no valida en CSS2.1, sólo lo hará con CSS3, pero felizmente es soportada por todos los browsers importantes exceptuando Opera (que es un muy importante browser). Una lástima, pero la realidad es que ¡sí es soportado por IE6! ¡¡A celebrar!! [Ver ejemplo final][4]{.verejemplo} [1]: <a href="http://www.csslab.cl/2005/11/15/ajax-live/">http://www.csslab.cl/2005/11/15/ajax-live/</a> “Enlace en CSSLab “AJAX live!”” [2]: <a href="http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/">http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/</a> “Enlace en CSSLab “JavaScript, Toolkit y demases”” [3]: <a href="http://www.csslab.cl/ejemplos/iframe/01.html">http://www.csslab.cl/ejemplos/iframe/01.html</a> “Enlace en CSSLab a “ver ejemplo 1"” [4]: <a href="http://www.csslab.cl/ejemplos/iframe/final.html">http://www.csslab.cl/ejemplos/iframe/final.html</a> “Enlace en CSSLab “ver ejemplo final”” </article> <article> <h1>Lo ví y me gustó 23</h1> Mon, 12 Nov 2007 13:47:49 +0000 #23 – 12 Noviembre 2007 <a href="http://dibusoft.com/" target="_blank"></a> <a href="http://www.espiratecnologias.com/" target="_blank"></a> </article> <article> <h1>El orden ante todo</h1> Thu, 08 Nov 2007 18:12:52 +0000 Me considero una persona bastante ordenada, y eso se refleja tanto en mi vida personal como profesional. Mantengo ordenado (trato) mi escritorio, mi desktop, archivos y por supuesto el código fuente que escribo. Con el tiempo he desarrollado un estándar para los proyectos, tanto para el orden de las carpetas, como para el registro de envío de e-mails entre otros. Es que he perdido tanta información y ha habido tanta desinformación que mejor me hice mi orden propio, y ha funcionado muy bien hasta ahora. Trataré de compartirlo con ustedes, sólo para que tengan una referencia o complementen el suyo. Lo separaré en varios criterios para mejor entendimiento, y ejemplificaré con un proyecto ficticio: Rediseño Be Studios. <h3 id="carpetas">Carpetas</h3> No me gusta mucho trabajar en servidores compartidos, ya que suelen ponerse lentas las conexiones y torna el trabajo lento. Mejor trabajo local (o puedes crear un sitio dentro de tu computador) y si lo necesito compartir con otro profesional o un cliente, lo subo al servidor en su momento. Comienzo con una carpeta en el desktop con el nombre del dominio: Dentro de ellas, la estructura que trabajaré. En bocetos guardaré todo lo que reciba de diseño para ser construído. En rscs, todo lo que utilice como recurso (resource), ya sean scripts de JS, ejemplos que utilice, enfin, todo lo que me sea útil como recurso para quizás después volver a utilizar. Ahora, las carpetas del proyecto mismo son: <h4 id="estilos">Estilos</h4> Dentro de ella guardaré la o las hojas de estilos y las imágenes que utilice para construir el sitio, o sea, que sean utilizadas como gráfica del sitio y que sean llamadas a través del CSS. Dentro de esta carpeta suelo tener más carpetas: En bitmaps guardo las imágenes (generalmente gif‘s) que generan el estilo gráfico del sitio; ya master.css es creado dependiendo del proyecto. Si éste es grande (más de 90 páginas), master.css será la única hoja de estilos llamada por todas las páginas, y dentro de ella estará llamando otras hojas de estilos que cuidarán de la estructura (layout.css) y del diseño (design.css), u hojas de estilo por secciones: header.css, body.css, footer.css por ejemplo. Esto lo detallaré más adelante, en [Hojas de Estilos: múltiples][4]. <h4 id="js">JS</h4> Aquí, claramente, guardaré todos los .js que utilice. Si el proyecto no los necesita, esta carpeta se descarta. <h4 id="medios">Medios</h4> Se guardan los elementos que sean utilizados para el contenido en el HTML, o sea, todas las imágenes que sean utilizadas mediante , los .swf, .flv, .pdf, etc, etc, etc. Dentro de medios el orden sería así: ![Carpetas de Medios][5] Finalmente, la carpeta principal o raíz contiene los .html comenzando por el index.html y se crean las subcarpetas para la estructura formal del sitio. <h3 id="hojas-de-estilos">Hojas de Estilos</h3> Comenzamos a escribir el código con que nuestro sitio se verá por miles de millones de usuarios en todo el mundo que tenga una conexión a mano. <a name="multiples"></a> <h4 id="muacuteltiples">Múltiples</h4> Como mencioné anteriormente, si tenemos un sitio web más o menos grande, la mejor opción sería tener múltiples hojas de estilos. Para esto, cada HTML llama solamente la principal: master.css y dentro de ésta se llaman las siguientes mediante @import: <pre><code class="language-css">@import url("2008/reseter.css"); @import url("2008/layout.css"); @import url("2008/header.css"); @import url("2008/side.css"); @import url("2008/secondside.css"); @import url("2008/footer.css");</code></pre> En esta caso, separé cada parte del sitio con su hoja de estilos propia. Así trabajo con cada una por separado y se tiene mayor control sobre cada parte. Primero, reseter.css que [resetea todas las propiedades CSS conflictivas][6] en todos los browsers. Luego, layout.css controla solamente la estructura de todas las secciones juntas (width, height, float, position, margin, etc.). A continuación, las hojas de estilos para cada sección que controlan la gráfica (font, color, background, padding, etc.). <h4 id="escribiendo-coacutedigo">Escribiendo código</h4> Ya dentro de los estilos, recomiendo comenzar con un encabezado que contiene información relativa al proyecto y quién(es) lo está(n) ejecutando. <pre><code class="language-css">/* -- Be Studios diseño: Jorge Epuñan construcción: Jorge Epuñan fecha: 08/11/07 mod1: - mod2: - -- */</code></pre> Con esto sabemos, si trabajamos en grupos, quién lo hizo y deshizo, así es más fácil encontrar responsables cuando queda la embarrada… o premiar con vacaciones al glorioso que lo terminó antes del plazo. Otro elemento muy importante, es mantener la jerarquía de marcado dentro de los estilos. Con esto me refiero a no tener miedo a utilizar la tecla tab y la tecla enter para separar un poco los estilos: <pre><code class="language-css">#container {} #header {} #header #nav {} #content {} #content #central {} #footer {}</code></pre> Se darán cuenta que será mucho más fácil encontrar después alguna class creada. <h4 id="comentando">Comentando</h4> Algo primordial para mantener un orden dentro del código mismo. Suelo separar las secciones importantes con comentarios que se noten, y los id‘s principales con comentarios menos vistosos: <pre><code class="language-css">/* ==================== #header == */ #header {} /* --------- #nav -- */ #header #nav {} /* ==================== #content == */ #content {} /* --------- #central -- */ #content #central {} /* ==================== #footer == */ #footer {}</code></pre> <h3 id="html">HTML</h3> <h4 id="escribiendo-coacutedigo-1">Escribiendo código</h4> Se repite un poco lo que mencioné con las hojas de estilos. Me interesa bastante mantener y aprecio bastante el orden estructural de marcado a medida con que se escriben las secciones, mediante jerarquías. Y repito, no tenerle miedo al tab y al enter: <pre><code class="language-markup"><div id="container"> <div id="header"> <ul id="nav"> </ul> </div> <div id="content"> </div> <div id="footer"> </div> </div></code></pre> <h4 id="comentando-1">Comentando</h4> Con HTML‘s gigantescos, se hace muy difícil después encontrar dónde cresta se cierra el <div id="subnav">. El orden de jerarquías anterior facilita la cosa, pero una ayudita es comentando cuando abrimos algún id o class principal y cuando lo cerramos: <pre><code class="language-markup"><div id="container"> <div id="header"> <ul id="nav"> </ul> </div> <div id="content"> </div> <div id="footer"> </div> </div></code></pre> Cuando abrimos un id utilizo <!– #nombre_id –> y cuando lo cierro utilizo / para notarlo: <!– /#nombre_id –> y con class es lo mismo <!– .nombre_class –> y <!– /.nombre_class –>. <h3 id="enviando-e-mails">Enviando E-mails</h3> Ya nos están pidiendo avances. Enviaré lo que tengo por mientras. Para esto, duplico la carpeta que estoy trabajando y le cambio el nombre: ![Carpeta para envío de E-mail][7] Le agrego la fecha en que estoy enviando lo que me piden (_añomesdia). Luego, borro todo lo que no necesita: bocetos y rscs principalmente, o si me pidieron solamente el formulario de contacto armado por ejemplo, borro la index y las otras páginas que no vienen al caso. Sólo contacto.html, sus CSS y sus JS y quizás medios no aplican así que los borro. Siempre lo vuelvo a revisar por si borré algo que era necesario. Luego, a comprimir y se envía por e-mail o se sube en algún servidor para descarga. <h3 id="registro">Registro</h3> Luego de esto, el archivo comprimido lo guardo siempre en la carpeta rscs que tenía creada. Esto es para mantener un control de las versiones anteriores, y si me equivoco en algo rescato del último archivo comprimido. Toda precaución es poca cuando tiempo es dinero. Eso fue todo, quedó bastante completa la explicación. Con el tiempo me acostumbré a todo esto y ni noto lo largo que parece ser el procedimiento. Y ha resultado ser muy efectivo. [4]: #multiples “Enlace directo a “Hojas de Estilos: múltiples”” [5]: <a href="http://www.csslab.cl/wp-content/uploads/2007/11/medios.gif">http://www.csslab.cl/wp-content/uploads/2007/11/medios.gif</a> [6]: <a href="http://www.csslab.cl/2007/10/18/css-reseter/">http://www.csslab.cl/2007/10/18/css-reseter/</a> “Enlace en CSSLab “CSS Reseter”” [7]: <a href="http://www.csslab.cl/wp-content/uploads/2007/11/email.gif">http://www.csslab.cl/wp-content/uploads/2007/11/email.gif</a> </article> <article> <h1>Cumpliendo 3 años (actualizado)</h1> Mon, 05 Nov 2007 18:33:47 +0000 Bueno, he activado el nuevo diseño del sitio. Espero sea un aporte, 1 año con el mismo layout me tenía bastante aburrido ya. Estaré en estos días ajustando algunas cosas aún, principalmente los plugins y los tags. Cualquier notificación de error o comentario constructivo, siempre será bienvenido. Seguiré escribiendo artículos desde ya. <hr> Ayer domingo 4 de noviembre de 2007, CSSLab cumplió 3 años de exitosa vida. Como estoy de viaje, no pude notificarlo a tiempo, pero antes 1 dia tarde que nunca. En total, han sido 129 artículos y más de 700 comentarios humanos y 18.700 de spam (gracias, Akismet) , y con un promedio de 1200 visitas diarias. Espero estar haciendo las cosas bien, mi intención siempre fue compartir lo que hago y lo que me gusta hacer, no soy egoísta con mis conocimientos y me interesaba ayudar a la comunidad web de habla hispana, con aún poco material sobre el tema de diseño y desarrollo orientado a la web. Bueno, gracias a todos los lectores habitalues, a los nuevos y a los que siempre visitarán a traves de otros sitios que linkean mis artículos. Sigan comentando siempre, ya que de su aporte sale más motivación para seguir siempre entregando mejor material. Pronto activo el nuevo diseño del sitio (activado). </article> <article> <h1>Clearfix v2.0: el widget</h1> Mon, 29 Oct 2007 18:38:15 +0000 Navegando me topé con una <a href=“<a href="http://www.456bereastreet.com/archive/200603/new">http://www.456bereastreet.com/archive/200603/new</a>_clearing_method_needed_for_ie7/” title=“Enlace externo a “New clearing method needed for IE7?”">reescritura del código de .clearfix</a> para que éste sea interpretado por IE7 correctamente. Y bueno, como no me gustaba la interfaz del <a href=“<a href="http://www.csslab.cl/2007/03/09/clearfix-el-widget/%22">http://www.csslab.cl/2007/03/09/clearfix-el-widget/"</a> title=“Enlace en CSSLab a “.clearfix: el widget”">widget Clearfix</a> que hice anteriormente, aproveché de rediseñarlo y lanzarlo con este nuevo código que se ve mejor. Nuevamente, lo dejo para libre descarga. [Download Clearfix v2.0][1]{.bajar} <a href=“<a href="http://www.apple.com/downloads/dashboard/developer/clearfix.html%22">http://www.apple.com/downloads/dashboard/developer/clearfix.html"</a> title=“Enlace externo a “Mac OSX downloads”">Apple Dashboard Widgets</a> Requerimientos: Mac OSX con 10.4+ y Dashboard habilitado. [1]: <a href="http://www.csslab.cl/ejemplos/clearfix/clearfix_v2.zip">http://www.csslab.cl/ejemplos/clearfix/clearfix_v2.zip</a> “Enlace en CSSLab a “Download Clearfix v2.”” </article> <article> <h1>Tablas porque te quiero</h1> Tue, 23 Oct 2007 19:50:36 +0000 Siendo un poco justo con <table>, se ha diezmado bastante su personalidad en estos años de incesante impulso semántico. Esta fiel etiqueta ha sido degradado a no más poder por mucho tiempo, y vengo a su rescate. Como he escrito muchas veces ya a lo largo de este sitio, las tablas son para contener datos tabulados. Sólo para eso, esa información desagradable que suelen acompañar a los gráficos, esos nombres y números que a nadie le gusta. Para eso está <table>, para ordenar esos datos y nada más. Y bueno, ahora que ya tiene su función, aprendamos a utilizarlo bien. <table> <tr> <td>Nombre</td> <td>Edad</td> </tr> <tr> <td>Tulio</td> <td>36</td> </tr> <tr> <td>Patana</td> <td>15</td> </tr> </table> <a href="http://www.csslab.cl/ejemplos/tablas/ejemplo1.html" title="Enlace en CSSLab para ver el ejemplo 1">Ver ejemplo 1</a>{.verejemplo} Una simple tabla que contiene valores cualesquiera. Ahora, le daremos sentido a sus etiquetas. <h3 id="th"><th></h3> Table Header Cell, una celda de título de una tabla. La utilizamos cuando tenemos el título de una fila o columna, y tiene propiedades por defecto, por ejemplo, su contenido se despliega en bold. Si la aplicamos a nuestra tabla básica de ejemplo, sería de la siguiente manera: <table> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Tulio</td> <td>36</td> </tr> <tr> <td>Patana</td> <td>15</td> </tr> </table> <a href="http://www.csslab.cl/ejemplos/tablas/ejemplo2.html" title="Enlace en CSSLab para ver el ejemplo 2">Ver ejemplo 2</a>{.verejemplo} <h3 id="caption"><caption></h3> Esta etiqueta le da un título a la tabla, como un <legend> lo es para su <fieldset>. <table> <caption>Tabla de edades</caption> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Tulio</td> <td>36</td> </tr> <tr> <td>Patana</td> <td>15</td> </tr> </table> <h3 id="summary">summary</h3> Atributo de la etiqueta <table>, especial para lectores de pantalla (no-videntes). Aquí, nos explayamos un poco más que en <caption>, explicando extensamente de qué se trata nuestra tabla. <table summary="Tabla donde se muestran nombres de personajes de un programa infantil junto con sus edades hipotéticas"> <caption>Tabla de edades</caption> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Tulio</td> <td>36</td> </tr> <tr> <td>Patana</td> <td>15</td> </tr> </table> <a href="http://www.csslab.cl/ejemplos/tablas/ejemplo3.html" title="Enlace en CSSLab para ver el ejemplo 3">Ver ejemplo 3</a>{.verejemplo} <h3 id="thead-tfoot-tbody"><thead> <tfoot> <tbody></h3> Filas se pueden agrupar en un encabezado (<thead>), un cuerpo de contenido (<tbody>) y un pie (<tfoot>), pudiendo cada grupo contener una o más filas. Con esto se hace más fácil darle estilos a las secciones de nuestra tabla, así nos ahorramos classes en cada celda. Otra ventaja es en la impresión, si ésta es muy larga en Firefox por ejemplo se imprimirán el encabezado y el pie en cada hoja (independiente si el cuerpo es muy extenso y no cabe en la impresión). <table summary="Tabla donde se muestras nombres de personajes de un programa infantil junto con sus edades hipotéticas"> <caption>Tabla de edades</caption> <thead> <tr> <th>Nombre</th> <th>Edad</th> </tr> </thead> <tfoot> <tr> <td>Bajada</td> </tr> </tfoot> <tbody> <tr> <td>Tulio</td> <td>36</td> </tr> <tr> <td>Patana</td> <td>15</td> </tr> </tbody> </table> <a href="http://www.csslab.cl/ejemplos/tablas/ejemplo4.html" title="Enlace en CSSLab para ver el ejemplo 4">Ver ejemplo 4</a>{.verejemplo} Un detalle es que si usan <thead> y <tfoot>, deben ir juntas y consecutivas, antes de <tbody>. Aún así, <tfoot> se mostrará debajo del contenido de <tbody>. Si no lo necesitan, ocúltenlo con su método favorito. Está de más escribir que bgcolor, height, width, align y nowrap están obsoletos y no son soportados en HTML 4.01. Además, no se recomienda el uso de background dentro del HTML, para esto se utlizan hojas de estilos CSS. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.w3.org/TR/html401/struct/tables.html" title="Enlace externo a "W3C Tables"" target="_blank">W3C Tables</a></li> <li><a href="http://www.w3schools.com/tags/tag_table.asp" title="Enlace externo a "W3Schools: table tag"" target="_blank">W3Schools: table tag</a></li> </ul> </article> <article> <h1>CSS Reseter</h1> Thu, 18 Oct 2007 20:49:11 +0000 Este reseter ha sido actualizado, <a href="http://www.csslab.cl/2010/06/01/css-reseter-v2/">visita la nueva versión</a>. Tercer artículo influenciado directamente del [videocast][1]. En esta ocasión, les presento una hoja de estilos que utilizo para proyectos de gran envergadura (cuando con más de 40 páginas y no son alimentadas a mano, sino mediante un CMS). Se trata de un CSS Reseter, una serie de propiedades CSS que resetean las propiedades a su estado original. Conocido por todos es que por defecto los browsers tienen algunas diferencias de estilos en ciertas etiquetas HTML, principalmente <body>, , <h1>, <h2>…., , <blockquote>, <fieldset>, <label>, <legend>, etc. Influencia directa de 3 fuentes: [Yahoo UI Reset CSS][2], [Eric Meyer’s Reworked Reset][3] y mi experiencia personal para ir adaptándola a mis necesidades. Esta hoja de estilos no es para nada de corta, por lo que comentar cada estilo sería eterno. Me gustaría sí mencionar elementos importantes a considerar: :focus { outline: 0; } Esto ya lo había mencionado en el artículo [El contorno de la discordia][4]. a img, iframe { border: none; } Las imágenes linkeadas en algunos browsers suelen tener el borde heredado de la propiedad del link. Aquí, lo anulamos definitivamente. input, textarea, select, button { font-size: 100%; font-family: inherit; } Esta hoja se hizo esencial para diagramar formularios, donde la diferencia de estilos entre browsers es crítico. Ahora, se hizo bastante más fácil adaptarlos a todos. En este caso, vemos que obligamos que <input> y <textarea> hereden el font-family. .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Finalmente, algo como [clearfix][5] que se ha hecho esencial, creo que es el lugar perfecto para dejarlo declarado. [Bajar hoja de estilo (.zip)][6]{.verejemplo} [1]: <a href="http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/">http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/</a> “Enlace al artículo en CSSLab “Videocast 1: layout compuesto”” [2]: <a href="http://developer.yahoo.com/yui/reset/#code">http://developer.yahoo.com/yui/reset/#code</a> “Enlace externo a “YUI Reset CSS”” [3]: <a href="http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/">http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/</a> “Enlace externo a “Reworked Reset”” [4]: <a href="http://www.csslab.cl/2007/05/28/el-contorno-de-la-discordia/">http://www.csslab.cl/2007/05/28/el-contorno-de-la-discordia/</a> “Enlace en CSSLab “El contorno de la discordia”” [5]: <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/</a> “Enlace en CSSLab “Flotando en la incertidumbre "” [6]: <a href="http://www.csslab.cl/downloads/CSS+Reseter">http://www.csslab.cl/downloads/CSS+Reseter</a> “Enlace para bajar CSS Reseter” </article> <article> <h1>100% alto, finalmente para todos</h1> Thu, 11 Oct 2007 16:38:28 +0000 Segunda entrega causa directa del [videocast 1][1]. Esta vez, una muy pero muy buena y útil técnica para lograr altos de columnas de 100% respecto del contenedor. Con esto, se puede lograr que el fondo de una o ambas columnas crezcan de acuerdo a la mayor. Este problema de diseño tenía variadas soluciones anteriormente: que el contenedor tuviera el fondo a modo de una imagen, o a través de Javascript también se podían lograr altos de 100%. ![Ejemplo columnas 100% alto][2] Bueno, espero ahora sepan de qué escribo. Esta vez nuevamente es una elegante técnica que involucra overflow del contenedor y padding y margin negativo en las columnas. Me gustaría hacer una pausa en estas dos importantes propiedades, sólo para dejar claro lo que involucra. <ul> <li>Padding: margen interior.</li> <li>Margin: margen exterior.</li> </ul> Para más claridad aún, nuevamente una imagen de ejemplo. ![Ejemplo columnas 100% alto][3] <div class="pullquote"> </div> Como pueden leer en el muy muy útil artículo [sobre el modelo de caja][4] (si no lo han leído, háganlo ya que es muy muy útil), el padding sí modifica el ancho de nuestra caja, no así el margin. Otro detalle my importante, y que ahora nos concierne, es que el margin acepta números negativos (y que suele tener problemas de interpretación en IE6, principalmente cuando son links los involucrados), no así padding que sólo permite cantidades positivas. Bueno, al grano. Primero, a las columnas (2 o más) deben decirles que tengan un padding-bottom de 30.000 (bien exagerado, aunque el máximo que se permite es de 32768px pero con 30000 basta). Con eso, nuestro scroll vertical se va a marear de tan grande que va a quedar. Este padding-bottom empujará nuestras columnas (y sus estilos de fondo, color o imagen) hasta no más poder, pero luego les damos un margin-bottom negativo con la misma cantidad. Con esto, nuestra caja vuelve donde estaba al comienzo, pero nuestros fondos siguen con el scroll vertical eterno. Finalmente, la caja contenedora debe esconder todo el exceso y por ende ese scroll, por lo que le damos un overflow: hidden y ya (o sea, todo lo que sobre, escóndelo). Bastante lógico. <pre><code class="language-css">div#container { overflow: hidden; } div#izq, div#der { float: left; padding-bottom: 30000px; margin-bottom: -30000px; }</code></pre> Un cuidado que deben tener es que si están flotando las cajas, su contenedor colapsará. Para esto, [.clearfix][5] será la solución ideal. [Ver ejemplo final][6]{.verejemplo} [1]: <a href="http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/">http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/</a> “Enlace al artículo en CSSLab “Videocast 1: layout compuesto”” [2]: <a href="http://www.csslab.cl/wp-content/uploads/2007/10/ejemplo_100.gif">http://www.csslab.cl/wp-content/uploads/2007/10/ejemplo_100.gif</a> [3]: <a href="http://www.csslab.cl/wp-content/uploads/2007/10/ejemplo_cajas.gif">http://www.csslab.cl/wp-content/uploads/2007/10/ejemplo_cajas.gif</a> [4]: <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/">http://www.csslab.cl/2006/12/14/como-caja-el-modelo/</a> “Enlace al artículo en CSSLab “como caja: el modelo”” [5]: <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/</a> “Enlace al artículo en CSSLab “Flotando en la incertidumbre”” [6]: <a href="http://www.csslab.cl/ejemplos/altos_100.html">http://www.csslab.cl/ejemplos/altos_100.html</a> “Enlace para ver el ejemplo final” </article> <article> <h1>Alto mínimos para IE6 (y el resto, claro)</h1> Fri, 05 Oct 2007 14:47:02 +0000 <div class="pullquote"> </div> Primer aporte procedente del [videocast][1]. Como prometido, este artículo será un corto pero efectivo método para obtener la propiedad min-height en todos los browsers, especialmente para IE6 que no lo aplica para nada. Esta propiedad lo que hace es aplicar un alto mínimo a un elemento. Por ejemplo, queremos que una caja tenga un alto de 200px. Como sabemos, los elementos que estén dentro de esta caja se mostrarán hasta que alcancen esos 200 pixeles, y pasado eso si se agregan más elementos la caja no va a crecer, sino que permanecerá fija. Con min-height lo que lograremos es que el alto sea de un mínimo de 200px, y que puede crecer lo que sea necesario; al contrario de max-height, que lo que hace es dar un tope al alto de la caja (o sea, nuestro contenido puede crecer hasta un alto máximo donde la caja dejará de crecer). Bueno, al grano. En este sitio, necesitaba una caja estuviera fija en un alto mínimo, (según el diseño), ya que si el contenido superior a éste creciera, esta caja pudiera moverse nuevamente, pero siempre y cuando alcanzara este alto mínimo. Como se puede ver en la imagen 1, se construyó el menu lateral con un min-height de 175 pixeles. Así, la caja del banner se alineaba con un párrafo del texto del contenido (esto es sólo un ejemplo, claro. La idea original era otra.). ![Imagen 1: alto mínimo][2] Ahora, en la imagen 2 se puede ver qué pasa si este menú tiene subitems desplegables (como en [artículo de árbol de navegación][3], por ejemplo). Si se hubiera dado un height fijo de 175 pixeles a ese menú, lo que hubiera pasado es que la caja no hubiera crecido, y los textos se habrían pasado de largo, mientras que la caja quedaría estática. Con min-height, lo que pasa es que la caja menú se queda fija hasta que sus elementos interiores alcancen ese alto mínimo, y de ahí la caja sigue creciendo. ![Imagen 2: alto mínimo][4] ¿Divertido, no? Pues no tanto. Como dije, IE6 no soporta esta propiedad tan útil (como tantas otras). La solución: un simple truco de CSS que involucra [!important][5] y cómo IE6 no lo interpreta como debería. ul#menu { height: auto!important; /* para los browsers buenos */ height: 175px; /* para IE5+ */ min-height: 175px; /* para los browsers buenos */ } La primera declaración (height: auto!important) no lo leerá IE5+ ya que no soporta !important, así que deja de leer esta línea y pasa a la segunda: height: 175px. Los otros browsers pasan en seguida a leer la tercera: min-height: 175px e IE5+ no lo interpretará, lo que hará que todos queden felices y contentos con su alto mínimo funcionando. [Ver ejemplo][6]{.verejemplo} No fue tan corto a fin de cuentas. Pero sí efectivo. [1]: <a href="http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/">http://www.csslab.cl/2007/10/03/videocast-1-layout-compuesto/</a> “Leer artículo en CSSLab “Videocast 1: layout compuesto”” [2]: <a href="http://www.csslab.cl/wp-content/uploads/2007/10/min-height.gif">http://www.csslab.cl/wp-content/uploads/2007/10/min-height.gif</a> [3]: <a href="http://www.csslab.cl/2007/09/25/convirtiendo-listas-en-arboles/">http://www.csslab.cl/2007/09/25/convirtiendo-listas-en-arboles/</a> “Leer artÍculo en CSSLab “Convirtiendo Listas en Árboles”” [4]: <a href="http://www.csslab.cl/wp-content/uploads/2007/10/min-height2.gif">http://www.csslab.cl/wp-content/uploads/2007/10/min-height2.gif</a> [5]: <a href="http://www.csslab.cl/2007/06/05/la-verdadera-importancia/">http://www.csslab.cl/2007/06/05/la-verdadera-importancia/</a> “Leer artÍculo en CSSLab “La verdadera !importancia”” [6]: <a href="http://www.csslab.cl/ejemplos/min-height.html">http://www.csslab.cl/ejemplos/min-height.html</a> “Ver ejemplo en CSSLab de “Alto mínimos para IE6"” </article> <article> <h1>Videocast 1: layout compuesto (actualizado)</h1> Wed, 03 Oct 2007 22:04:18 +0000 En un proyecto en que estoy involucrado actualmente, me tocó participar en la arquitectura y construir el sitio completamente, desde cero. Lo bueno es que lo estoy haciendo solo, por lo que propongo y aplico mis propios métodos, y lo mantengo bastante ordenado (con un código limpio y ordenado), tanto el HTML como las hojas de estilo. A medida en que lo voy desarrollando, aplico algunos métodos bastante simples pero efectivos para determinados problemas que van surgiendo, los que compartiré en este sitio en su momento. Por ahora, me interesa mostrar a través de este primer videocast (a grandes rasgos) cómo construí el layout, ya que felizmente quedó firmemente estructurado en todos los browsers en los que hago las pruebas. La receta: flotando cajas, un buen css reseter y mucha imaginativa a medida en que se va escribiendo código. Hasta ahora no he utilizado una sola gota de <a href=“<a href="http://www.csslab.cl/2006/07/28/se-viene-ie7-">http://www.csslab.cl/2006/07/28/se-viene-ie7-</a>¡huid/” title=“Enlace al artículo “comentario condicional” en CSSLab”>comentario condicional</a>. Espero sea una buena ayuda a más de alguien, por último para que vean diferentes técnicas de diagramación. Un detalle: trabajé mucho con los pesos de los videos v/s calidad de compresión y decidí cortarlo en 2 videos al final, ya que el videocast dura 47 minutos en total y quedó bastante pesado. Siento si esto limita a más de alguno, pero en realidad necesitaba abarcar todo el proceso. Creo que quedó bien completo. <h4 id="videocast-parte-1-arquitectura-y-header-small22-minutossmall">Videocast parte 1: arquitectura y header 22 minutos</h4> <div class="video-container"> </div> <h4 id="videocast-parte-2-contenido-small26-minutossmall">Videocast parte 2: contenido 26 minutos</h4> <div class="video-container"> </div> Además, el material utilizado (html, css, imágenes**) está <a href=“<a href="http://www.csslab.cl/ejemplos/videocast/csslab.cl.zip%22">http://www.csslab.cl/ejemplos/videocast/csslab.cl.zip"</a> title=“Material ZIP del videocast 1 “Layout Compuesto”">disponible para descargar</a>.** Provecho! </article> <article> <h1>Convirtiendo Listas en Árboles</h1> Tue, 25 Sep 2007 21:20:04 +0000 Recontra conocidas ya son los [menúes construídos con listas de ítems][1]. Los hay verticales, y muy fácil es transformarlas a horizontales. Gráficamente, existen necesidades que a través de la habilidad del diseñador/desarrollador se pueden solucionar elegantemente con unos trucos de CSS. En este caso, mostraré una manera de crear menúes tipo árboles, utilizando algunos GIF para lograr esos enlaces y nodos. Bueno, lo primero es el código HTML. Básicamente se compone de una lista con <ul> y algunos <li> tienen sublistas, como verán en el ejemplo a continuación: <pre><code class="language-markup"><ul id="menu_arbol"> <li><a href="#" title="Ver las Cervezas">Cervezas</a> <ul> <li><a href="#" title="Enlace a cerveza Pilsen">Pilsen</a></li> <li><a href="#" title="Enlace a cerveza Bock">Bock</a></li> <li><a href="#" title="Enlace a cerveza Lager">Lager</a></li> <li><a href="#" title="Enlace a cerveza Ale">Ale</a></li> </ul> </li> <li><a href="#" title="Ver los Vinos">Vinos</a> <ul> <li><a href="#" title="Enlace a Vino Merlot">Merlot</a></li> <li><a href="#" title="Enlace a Vino Sirah">Sirah</a></li> </ul> </li> <li><a href="#" title="Ver los Licores">Licores</a> <ul> <li><a href="#" title="Enlace Licor Ron">Ron</a></li> <li><a href="#" title="Enlace a Licor Vodka">Vodka</a></li> </ul> </li> </ul></code></pre> [Ver hasta aquí (1)][2]{.verejemplo} Una simple lista de 3 items donde 2 de ellos tienen subitems. En esta caso será un menú, pero puede ser también sólo una [lista de elementos][3] (ordenados <ol> o desordenados <ul>) sin enlaces. Bueno, a lo nuestro. Primero que todo, a través del CSS esconderemos los bullets, ya que los reemplazaremos por una imagen de una línea vertical. <pre><code class="language-css">ul#menu_arbol, ul#menu_arbol ul { list-style-type: none; background: url(imagenes/linea_vertical.gif) repeat-y; } ul#menu_arbol li { padding: 0 10px; } ul#menu_arbol ul { margin-left: 5px; }</code></pre> [Ver hasta aquí (2)][4]{.verejemplo} Ahora, conectamos los nodos: <pre><code class="language-css"> ul#menu_arbol li { padding: 0 10px; background: url(imagenes/nodo.gif) no-repeat; }</code></pre> [Ver hasta aquí (3)][5]{.verejemplo} Finalmente, nos queda poner otra imagen donde las listas se cierren. Esto lo tendremos que hacer agregando una class manualmente a los últimos ítems de cada lista: <pre><code class="language-css"> ul#menu_arbol li.cierre { background: #FFF url(imagenes/cierre.gif) left top no-repeat; }</code></pre> Importante fijarse que en este punto se agregó un color de background (blanco) lo que se hizo necesario para tapar la línea vertical que pasa por debajo (dado que esta imagen es un GIF transparente). [Ver hasta aquí (4)][6]{.verejemplo} Con eso estaríamos, pero hagamos esto bien de una. Podemos automatizar tarea de agregar las class, a través de Javascript: <pre><code class="language-javascript"> window.onload = function () { var tree = document.getElementById("menu_arbol"); var lists = [ menu_arbol ]; for (var i = 0; i < tree.getElementsByTagName("ul").length; i++) lists[lists.length] = tree.getElementsByTagName("ul")[i]; for (var i = 0; i < lists.length; i++) { var item = lists[i].lastChild; while (!item.tagName || item.tagName.toLowerCase() != "li") item = item.previousSibling; item.className += " cierre"; } };</code></pre> Esto lo que hará será primero buscar en todos los <ul> (getElementsByTagName) su último nodo (lastChild) y le agregará la class=“cierre” que creamos (className +). [Ver hasta aquí (5)][7]{.verejemplo} Podemos también agregarle movimiento, un toggle() por ejemplo. Utilicen el framework que más les acomode, en este caso aprovecharé lo liviano de [Mootools][8]: <pre><code class="language-javascript">window.addEvent(’domready’, function(){ var mySlide = new Fx.Slide(’cervezas’); mySlide.hide() $(’toggle_c’).addEvent(’click’, function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); });</code></pre> Primero, tomamos el #cervezas y lo escondemos (mySlide.hide()); luego, tomamos el #toggle_c (que se lo dí al <ul> del subítem) y le damos la instrucción de mostrarlo o esconderlo cuando le haga un click ($(’toggle_c’).addEvent(’click’) y mySlide.toggle();). Luego, se repite con los otros elementos de la lista. [Ver ejemplo final][9]{.verejemplo} Por supuesto, todo el código a través de un view source de los ejemplos. [1]: <a href="http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/">http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/</a> “Leer “Menú horizontal y algo +”” [2]: /ejemplos/menu_arbol/1.html “Ver ejemplo hasta paso 1” [3]: <a href="http://www.csslab.cl/2007/08/31/listo-para-las-listas/">http://www.csslab.cl/2007/08/31/listo-para-las-listas/</a> “Listo para las listas” [4]: /ejemplos/menu_arbol/2.html “Ver ejemplo hasta paso 2” [5]: /ejemplos/menu_arbol/3.html “Ver ejemplo hasta paso 3” [6]: /ejemplos/menu_arbol/4.html “Ver ejemplo hasta paso 4” [7]: /ejemplos/menu_arbol/5.html “Ver ejemplo hasta paso 5” [8]: <a href="http://www.csslab.cl/2007/05/18/arrastrando-con-moo/">http://www.csslab.cl/2007/05/18/arrastrando-con-moo/</a> “Leer “Arrastrando con Moo”” [9]: /ejemplos/menu_arbol/6.html “Ver ejemplo final” </article> <article> <h1>textos_muy_largos_que_quiebran_nuestro_layout</h1> Mon, 10 Sep 2007 17:24:58 +0000 Son excepciones, pero suceden momentos en que tienes tu layout bien ordenado y estructurado, y por esas cosas de la vida ingresas un texto muy largo (una URL de esas extensas) o en el comentario alguien lo hace, y toda la armonía que tenías en tu diseño se quiebra. No te quita el sueño, pero sí molesta. Las columnas se van a la cresta, enfin. Felizmente para esto existe una solución, y un hack. Pero, atentos pueden adelantarse, en este caso el hack no es para IE… Es para Firefox y Opera (¿?). <h3 id="word-wrap">word-wrap</h3> La propiedad word-wrap especifica que la línea de texto debe quebrarse si su longitud excede el especificado por él mismo, y/o la caja que lo contiene. Sus valores son: normal (por defecto, o sea, el texto seguirá siendo largo) y break-word (lo que nos interesa: la mega-palabra se cortará apenas encuentre el final del ancho definido). <pre><code class="language-css">p { word-wrap: break-word; }</code></pre> [Ver ejemplo][1]{.verejemplo} Ahora, ¿qué demonios pasa con Firefox y Opera? ¿Porqué nos está dando problemas justo ahora? Bueno, nada es perfecto, pero tenemos que darle algún tipo de solución, o ese maldito scroll horizontal seguirá molestando. Lo que se me viene a la cabeza en estos momentos (quedo abierto a sugerencias) es que si está demás, escondámoslo. <pre><code class="language-css">p { word-wrap: break-word; overflow: hidden; }</code></pre> [Ver ejemplo completo][2]{.verejemplo} Notarán que en el primer parágrafo, no tiene estilo alguno y la línea seguirá por siempre en la horizontal. En el parágrafo del medio, tiene la propiedad word-wrap aplicada pero se ve mal en Firefox y Opera. Ya la tercera y última línea de texto agregamos el overflow: hidden para que esconda lo que sobra en estos browsers que no aplican bien esta propiedad CSS 3. Fue la única solución que se me ocurrió para no desarmar el layout (total si es el caso de un link extenso, éste podrá ser clickeado de todas maneras por el área que permanece visible). <h3 id="links">Links</h3> <ul> <li><a href="http://www.w3.org/TR/css3-text/#word-wrap" target="_blank" title="Enlace externo a "the word-wrap property"">Force Wrapping: the ‘word-wrap’ property</a></li> </ul> [1]: /ejemplos/wordwrap/index.html “Enlace a ejemplo de “Word-wrap”” [2]: /ejemplos/wordwrap/index2.html “Enlace a ejemplo 2 de “Word-wrap”” </article> <article> <h1>ImageMap: mapeando imágenes en el siglo XX</h1> Tue, 04 Sep 2007 21:38:43 +0000 Viejos tiempos esos de la etiqueta <map>. Aunque me he deparado más de alguna vez en el presente siglo con sitios donde ponen un GIF y luego lo mapean creando links de navegación. Pésimo. Con <a href="http://www.flickr.com/" target="_blank" title="Enlace externo a Flickr.com">Flickr</a> se le dió un nuevo uso al método de agregar zonas sensibles dentro de imágenes con información anexa, lo cual se vió con muy buenos ojos cuando se necesita <a href="http://www.flickr.com/photos/mortimer/491248655/" target="_blank" title="Enlace externo de ejemplo">mostrar detalles de ciertas zonas dentro de las imágenes</a>. Existen un par de técnicas pululando por la web que hacen este trabajo, pero encontré una que se necesita sólo CSS para realizarlo. Funciona perfecto en todos los browsers con los que hice las pruebas, y además aprovecha la [semántica con la que recién estuve escribiendo][1]; precisamente utilizaremos la etiqueta de definición de listas <dl>, con lo que definiremos 2 instancias: con <dt> determinamos el concepto de la zona sensible y con <dd> la definición de esa zona, la que se mostrará sólo cuando posamos el mouse sobre <dt>. La idea es que a través de [posicionamiento absoluto][2], definimos las diferentes zonas que queremos que contengan la información auxiliar y con <dd> escondido (display: none;) tendrá el texto que queremos mostrar luego. Para IE6 tendremos la ayuda de <a> para que la pseudo-class :hover funcione como queremos. El HTML será simple de entender: <dl id="masaje_img"> <dt>Masajista</dt> <dd id="masajista_def"> <a href="#">Un masajista es…</a> </dd> <dt>Disponibilidad</dt> <dd id="disponible_def"> <a href="#">Un asiento disponible es….</a> </dd> <dt>Concentración</dt> <dd id="concentracion_def"> <a href="#">La concentración es…</a> </dd> <dt>Masajeado</dt> <dd id="masajeado_def"> <a href="#">Masajeado es…</a> </dd> </dl> Tenemos definidas 4 zonas sensibles para una imagen. Cada una tiene su término <dt> y la definición de ese término <dd>. (aunque para este motivo sirven estas etiquetas, quizás para el que piensas hacer no sea así; viene de tí encontrar alguna otra etiqueta que las reemplace). Todo eso está contenido por su <dl> como esperado. Ya el CSS traae la magia. Lo explicaré com más cautela: dl#masaje_img { position: relative; background: url("masaje.jpg") left top no-repeat; width: 500px; height: 353px; } dt { position: absolute; display: none; } dd { position: absolute; } <div class="pullquote"> </div> en dl#masaje_img definimos la imagen de fondo y sus propiedades de alto y ancho. Además, tiene posicionamiento relativo ya que contendrá sus términos y definiciones (dt y dd) absolutamente. dd#masajista_def { top: 5px; left: 14px; } dd#masajista_def a { position: absolute; width: 73px; height: 69px; text-decoration: none; border: 1px dashed red; } dd#masajista_def a span { display: none; } dd#masajista_def a:hover { background: transparent; } dd#masajista_def a:hover span { display: block; text-indent: 0; background: #CCC; font-weight: bolder; position: absolute; border: 1px dashed #666; left: 100%; margin: 0; padding: 5px; width: 250%; } En dd#masajista_def {} definimos su posición absoluta respecto al contenedor <dl>. Luego, dd#masajista_def a {} corresponde al cuadrado sensible, el que tiene su ancho y alto. Ya dd#masajista_def a span {} es lo que tendrá el texto que se mostrará cuando el mouse se pose sobre la zona sensible que definimos anteriormente. Importante es dd#masajista_def a:hover {} para IE6, ya que sin él no funciona la pseudo-class :hover (prueben quitándolo). IE6 necesita que un link tenga algo dentro de él para mostrar su pseudo-class, entonces qué mejor que definir un background pero transparente. Bien engañado. Finalmente, dd#masajista_def a:hover span {} nos dice que se muestre el texto (junto a algunas propiedades de estilo y posicionamiento). Esto se repite para cada una de las zonas que quieras tener dentro de tu imagen, cuidando siempre de crear un ID para cada una. ¿Divertido, no? [Ver ejemplo][3] <h3 id="links">Links</h3> <ul> <li><a href="http://frankmanno.com/ideas/css-imagemap-redux/" target="_blank" title="Enlace externo a "CSS Image Maps, Redux"">CSS Image Maps, Redux</a></li> </ul> [1]: <a href="http://www.csslab.cl/2007/08/31/listo-para-las-listas/">http://www.csslab.cl/2007/08/31/listo-para-las-listas/</a> “Enlace en CSSLab a “Listo para las listas”” [2]: <a href="http://www.csslab.cl/2007/05/11/absolutamente-si/">http://www.csslab.cl/2007/05/11/absolutamente-si/</a> “Enlace en CSSLab a “Absolutamente sí”” [3]: /ejemplos/imagemap/index.html “Enlace a ejemplo de “Mapeando imagenes”” </article> <article> <h1>Listo para las listas</h1> Fri, 31 Aug 2007 15:21:08 +0000 Últimamente me he puesto a escribir más artículos teóricos que prácticos. Siento desilucionar a algunos quienes entran a CSSLab por soluciones a sus problemas diarios en sus proyectos web, pero me interesa bastante difundir conocimiento, para así prevenir futuros problemas. Siempre es mejor prevenir que remediar. Bueno en este caso, volveré a tocar el tema de las queridas listas en HTML. Son bastante útiles, ya que sus propiedades intrínsecas (el que sean elemento bloque y contengan bastante rígido su contenido) las hace muy maleables al momento de estructurar menús, por ejemplo. Pero como ando semántico por estos días, quiero aclarar qué son y cómo utilizar las listas. Comencemos por lo básico. Una lista no es lo mismo que una secuencia. Una regla mental básica puede ayudarte a delucidar cuándo una lista es una lista: <blockquote> Si creamos una lista y le quitamos sus marcadores (bullets o números) con CSS, entonces probablemente no es una lista </blockquote> Esto hace ver que nuestro menú con listas no son semánticos. Los elementos de este menú son secuenciales, pero no necesariamente pertenecen a una lista. <a href="http://www.csslab.cl/2006/11/14/mas-estilos-a-las-listas/" title="Ir a Más estilos a las Listas en CSSLab">Les damos estilos</a>, <a href="http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/" title="Ir a Menú horizontal y algo más en CSSLab">les ponemos fondos</a>, cambiamos su color con :hover, pero si le quitamos los estilos, vuelve a ser una lista (ordenada o no) de elementos. No una secuencia. Entonces sí tiene sentido que sea una lista. En HTML existen 3 tipos de listas: <h3 id="dl-definition-lists"><dl> definition lists</h3> Las listas de definición corresponden a pares de término y su definición. <pre><code class="language-markup"><dl> <dt>Beodo</dt> <dd>Un beodo es un ebrio, borracho.</dd> </dl></code></pre> <dt> corresponde a un definition term, o en castellano un término a definir. Ya <dd> es la descripción de ese término. <h3 id="ul-unordered-lists"><ul> unordered lists</h3> Listas desordenadas son viejas amigas. Se utilizan cuando no importa el orden de los elementos contenidos. Como por ejemplo, en los ingredientes del vital alimento del beodo: <pre><code class="language-markup"><ul> <li>vaso</li> <li>cerveza</li> <li>sed</li> </ul></code></pre> Aquí da lo mismo el orden de los factores, el que no alterará el producto final. <h3 id="ol-ordered-lists"><ol> ordered lists</h3> Ya las listas ordenadas sí importa en qué orden las pongamos. Por eso por defecto, <ol> se renderiza con números secuenciales. <pre><code class="language-markup"><ol> <li>Toma la cerveza y ponla a esfriar.</li> <li>Prepara tu sed, en 1 hora y media aproximadamente ya podrás saciarla.</li> <li>Vierte la cerveza helada en un vaso y empina tu brazo hacia tu boca.</li> </ol></code></pre> Espero haya quedado claro, y con esto ayude a que sus contenidos tengan más sentido a sus usuarios y principalmente a los buscadores, lo que les asegurará mejores posicionamientos en ellos. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.w3.org/TR/html401/struct/lists.html" target="_blank" title="Leer este enlace externo">W3.org: Lists</a></li> <li><a href="http://www.autisticcuckoo.net/archive.php?id=2007/08/07/lists" target="_blank" title="Leer este enlace externo">Lists @ The Autistic Cuckoo</a></li> </ul> </article> <article> <h1>La semántica en la Web 3.0</h1> Thu, 30 Aug 2007 21:43:51 +0000 Aunque ha estado bastante de moda, me ha sido complicado dar una definición o hacerme parte de alguna sobre la Web 2.0. Creo que por lo mismo, porque ha sido tanto lo que le han dado que me hace ser reticente a unirme a ello. Enfin, más que los [estilos gráficos][1] o una manera diferente de construir sitios webs, me gusta el cambio de comportamiento en el usuario que ha conllevado, pasando de una web empresarial, una vitrina de información, a una web social donde el usuario toma el poder y toma la información como propia. Con la Web 3.0 me pasa algo similar, no existe aún un concenso pero sí está la idea: una [web semántica][2] donde se comporta tal como un ecosistema que evoluciona de acuerdo al contenido que alberga. Lo de semántico tiene mucho que ver, ya que lo hace universal, le da un sentido a cada elemento o atributo que contiene y lo potencia en los buscadores, que deberían de procesar todos estos avances y entregárnoslo como resultados más precisos y acertados. A raíz de eso, les tengo un reto. A ver si conocían las siguientes etiquetas HTML, y su significado: <h3 id="kbd"><kbd></h3> Con esta etiqueta estamos indicando que el usuario debe utilizar alguna tecla de su teclado para realizar alguna función. A raíz de esto, debemos presionar <kbd>ESC</kbd> para salir de la aplicación. <h3 id="var"><var></h3> Tal como deben de imaginarse, var indica una variable de algún lenguaje de programación. Tiene un estilo por defecto, el cual transforma la tipografía en monospace. En el siguiente código Javascript, la variable <var>validarCampo</var> se utiliza precisamente….. <h3 id="dfn"><dfn></h3> Introduce un término, o una definición a tu texto. Y cuando digo <dfn>beodo</dfn>, me refiero a cuando un ser…. ¿Habían utilizado alguna vez alguno de esos? <h3 id="links">Links:</h3> <ul> <li><a href="http://www.sitepoint.com/blogs/2007/04/02/are-you-ready-for-web-30/" target="_blank" title="Leer este artículo">Web 3.0 by Jeffrey Zeldman</a></li> <li><a href="http://www.alistapart.com/articles/web3point0" target="_blank" title="Leer este artículo">Are You Ready For Web 3.0?</a></li> </ul> [1]: <a href="http://www.csslab.cl/2006/09/11/diseno-a-lo-20/">http://www.csslab.cl/2006/09/11/diseno-a-lo-20/</a> “Ir a Diseño a lo “2.0” en CSSLab” [2]: <a href="http://www.csslab.cl/2006/04/12/un-paseo-por-la-semantica/">http://www.csslab.cl/2006/04/12/un-paseo-por-la-semantica/</a> “Ir a Un paseo por la Semántica en CSSLab” </article> <article> <h1>Lo que se viene: HTML 5</h1> Tue, 21 Aug 2007 22:52:24 +0000 Por primera vez en este milenio, nuevos elementos son agregados a HTML. Nuevas etiquetas de estructura, nuevos elementos de línea, nuevas maneras de agregar objetos y nuevos elementos interactivos son algunas de sus promisorias bondades. El desarrollo de HTML quedó estancado en 1999 con HTML 4. Desde ahí hasta ahora, la guerra de browsers no ha terminado: IExplorer con una gran parte de la cancha cubierta y Firefox y Opera dando la batalla por ganarse su merecido espacio. Desafortunadamente han dejado de lado una buena parte de los consejos de la W3C sobre los estándares, y se han esforzado en ofrecer tabs, password managers y lectores de RSS integrados, aparte de agregar skins y temas customizables. Era hora de hacer algo por el fondo mismo: el código fuente. Viendo que nada pasaba por parte de la W3C (quienes siguen enfocados con SVG, XForms y MathML), recientemente, 3 de los mayores fabricantes de browsers: Apple, Mozilla y Opera se unieron para desarrollar una versión mejorada del clásico HTML. Más reciente aún, la W3C despertó y escuchó al grupo y la nueva HTML 5 porfin ve una luz. Pero no se preocupen, no han reinventado la rueda. Permanecen nuestros viejos amigos , <div> y pero se incluyen nuevas etiquetas que refuerzan la semántica: <section>, <header>, <footer> y <nav>, entre otros. Nada de otro mundo, pero muy útiles. Seguro que te preocupa si Netscape 4 aún reconocerá esos nuevos elementos. Pues esto fue pensado para ser degradable, o sea, ser reconocido por versiones antiguas de navegadores. Si no, dificilmente se haría la migración. <h3 id="estructura">Estructura</h3> La idea es que a través de nuevas etiquetas, las que no asustan para nada ya que tienen nombres muy obvios, construímos nuestros sitios antes llenos y colapsados de div’s. Ahorraremos bastantes ahora. Con el siguiente ejemplo, recrearemos lo que usualmente hacemos hasta ahora: <pre><code class="language-markup"><html> <head> <title>Ejemplo</title> </head> <body> <div id="contenedor"> <div id="encabezado"> <h1>Titulo de este ejemplo</h1> </div> <div id="contenido"> <div id="menu"> <ul> <li><a href="" title="Ir a Uno">Uno</a></li> <li><a href="" title="Ir a Dos">Dos</a></li> <li><a href="" title="Ir a Tres">Tres</a></li> </ul> </div> <div id="columna"> Proin at eros non eros......... </div> </div> <div id="pie"> copyleft </div> </div> </body> </html></code></pre> Bastantes div’s para una página simple, con un contenedor donde cabe mi encabezado, mi contenido con un menú con listas y un pie de pagina. A través de CSS se le da luego el posicionamiento y los estilos, pero esto no es importante ahora. Me interesa la estructura, el esqueleto. Ahora, cómo sería con HTML 5: <pre><code class="language-markup"><html> <head> <title>Ejemplo</title> </head> <body> <header> <h1>Titulo de este ejemplo</h1> </header> <section> <nav> <ul> <li><a href="" title="Ir a Uno">Uno</a></li> <li><a href="" title="Ir a Dos">Dos</a></li> <li><a href="" title="Ir a Tres">Tres</a></li> </ul> </nav> <article> Proin at eros non eros......... </article> </section> <footer> copyleft </footer> </body> </html></code></pre> Ningún div. En vez de utilizarlos (son etiquetas separadoras, lineal, y no tienen significado semántico) estamos reemplazándolas por nuevas etiquetas que sí le dan significado a nuestra estructura. ¿Un acercamiento a la <a href="http://www.maestrosdelweb.com/editorial/la-web-30-anade-significado/" target="_blank">Web 3.0</a>? Revisemos estas nuevas etiquetas: <ul> <li><header> El encabezado; no confundir con el aún vigente y fiel <head>.</li> <li><nav> Navegación, una colección de links a otras páginas.</li> <li><section> Como un capítulo en un libro, puede albergar uno o varios <article></li> <li><article> Un artículo.</li> <li><footer> El pie de pagina, la firma, el email de contacto… enfin.</li> </ul> <h3 id="media">Media</h3> Video y audio en la web no lo para nadie, pero todo es propietario. Youtube usa Flash, Microsoft usa Windows Media y Apple utiliza Quicktime. Actualmente se utiliza y <param> al mismo tiempo para insertar un swf, lo que hace no validar el HTML. Pero la promesa viene con una etiqueta de video y otra para audio que permite insertarlos independiente del formato: <pre><code class="language-markup"><video src="video.mov" /> <audio src="../musicas/growl.mp3" autoplay="autoplay" /></code></pre> Esto es sólo un resumen, se viene mucho más. Ojalá esto permita que se construya una mejor web, para el bien de todos. <h3 id="links">Links</h3> <ul> <li><a href="http://www.ibm.com/developerworks/library/x-html5/?ca=dgr-lnxw01NewHTML" target="_blank">New elements in HTML 5</a></li> <li><a href="http://dev.w3.org/html5/html4-differences/Overview.html" target="_blank">HTML 5 differences from HTML 4</a></li> <li><a href="http://www.digital-web.com/articles/html5_xhtml2_and_the_future_of_the_web/" target="_blank">HTML5, XHTML2, and the Future of the Web</a></li> </ul> </article> <article> <h1>Lo ví y me gustó 22</h1> Tue, 14 Aug 2007 13:54:31 +0000 #22 – 14 Agosto 2007 <a href="http://ac09.net/" target="_blank"></a> <a href="http://www.be-studios.com/" target="_blank"></a> </article> <article> <h1>Medidor de porcentajes con CSS</h1> Mon, 13 Aug 2007 20:44:44 +0000 <div class="pullquote"> </div> Para muchos, se justifica definitivamente el uso de hojas de estilo para construir sitios web al momento en que se potencia la gráfica con el código generado por el desarrollador. Este es el caso que muestro a continuación, donde con un truco entre imágenes y código CSS, podemos fácilmente generar mostradores gráficos de porcentajes, los que dependiendo de la creatividad se verán muy atractivos. De ninguna manera lograremos medidores dinámicos, donde la barra se mueva indicando alguna actividad. Con esta técnica podremos a través de porcentajes reales y absolutos entregadas mediante CSS crear diferentes classes, cada una con una instancia de porcentaje que queramos mostrar. Para un mejor entendimiento, el ejemplo de lo que se mostrará: <a href="https://csslab.cl/ejemplos/porcentaje/index.html" title="Ver ejemplo en nueva ventana">Ver ejemplo</a>{.verejemplo} Primero que nada, las imágenes involucradas. La primera de ellas es la barra de porcentaje, la que tiene 2 partes: lleno y vacío. La segunda es el envoltorio, la que envuelve y deja ver sólo lo que queremos mostrar como cantidad de porcentaje y que será un GIF transparente (el medio de esta imagen es transparente para dejar ver por debajo la barra). Es importante que la barra de porcentaje sea el doble de ancho que su envoltorio, así se mostrará lleno en su 100% y la mitad de esta imagen (el límite entre vacío y lleno) es lo que se moverá dependiendo del porcentaje que entreguemos. Para esto se necesita el CSS para la imagen, la que contendrá el envoltorio. Esta imagen estará integrada como HTML, con la etiqueta : <pre><code class="language-markup"><img src="imgs/contenedor_barra.gif" width="200" height="20" /></code></pre> Ahora, para agregar la barra y que ésta pase por detrás del envoltorio (en el fonddo será un background de ésta), utilizamos CSS para crear un estilo sólo para la etiqueta : <pre><code class="language-css">img { background-image: url(imgs/barra.gif); background-position: 100% 0; background-repeat: no-repeat; margin-right: 10px; }</code></pre> Con este estilo, le diremos a la imagen que tenga como fondo la barra y que esté vacía. Ahora con diferentes classes (tantas como sean necesarias) mostraremos los niveles de porcentajes. Pero hay un pero. Como en CSS, el background-position se define primero desde lo horizontal (left, right) y luego vertical (top, bottom), y esta propiedad me permite posicionar a través de porcentajes, lo haremos pero a la inversa: si queremos mostrar 10% de nuestra barra, le diremos 90% al position. Es al contrario la cosa, sino el 10% se nos mostrará a la izquierda, y no a la derecha que es la convención occidental a la que estamos acostumbrados. Siguen las classes para varios porcentajes: <pre><code class="language-css">img.sesenta { background-position: 40% 0; } img.diez { background-position: 90% 0; } img.cien { background-position: 0% 0; }</code></pre> <a href="https://csslab.cl/ejemplos/porcentaje/index.html" title="Ver ejemplo en nueva ventana">Ver nuevamente ejemplo.</a>{.verejemplo} </article> <article> <h1>Conditional Comments: el widget</h1> Fri, 10 Aug 2007 16:52:07 +0000 En mi afán por siempre facilitarme la vida y el trabajo, me tomé el tiempo y la molestia y desarrollé mi segundo widget. El tema esta vez: <a href="http://www.csslab.cl/2006/07/28/se-viene-ie7-%C2%A1huid/" title="Se viene IE7…. ¡huid!">Comentarios Condicionales</a>. Lo que sucedió es que nunca me aprendí las diferentes maneras de utilizarlos, y como ocurrió con mi <a href="http://www.csslab.cl/2007/03/09/clearfix-el-widget/" title=".clearfix: el widget">widget anterior</a>, siempre entraba a <a href="http://www.quirksmode.org/css/condcom.html" title="Conditional comments from Quirksmode" target="_blank">Quirksmode.org</a> para copiarlo desde ahí. Finalmente, con este widget tienes todas las maneras de utilizar comentarios condicionales en tu proyecto web, a un click de distancia. Una vez más, gracias a <a href="http://www.apple.com/downloads/dashboard/" title="Dashboard Widgets" target="_blank">Apple</a> por hacerme la vida más fácil. In my effort to always gettting my life and work easyer, once again I took the time and started to develop my second widget. The subject this time: <a href="http://www.csslab.cl/2006/07/28/se-viene-ie7-%C2%A1huid/" title="Se viene IE7…. ¡huid!">Conditional Comments</a>. What happened this time was that I’ve never memorized the different ways to use the Conditional Comments, and I used to get them directly from <a href="http://www.quirksmode.org/css/condcom.html" title="Conditional comments from Quirksmode" target="_blank">Quirksmode.org</a>. Finally, with this widget you have all the ways to use the conditional comments on yout web project, just at a click. One again, thanks to <a href="http://www.apple.com/downloads/dashboard/" title="Dashboard Widgets" target="_blank">Apple</a> for making my life easyer. Requerimientos: MacOSX con 10.4+ y Dashboard habilitado. <a href="https://csslab.cl/ejemplos/conditionalcomment/condicionalcomment.zip" title="Get the Comments Widget now">Download Conditional Comments Widget</a>{.bajar} </article> <article> <h1>¿Inherit? ¿Ah?</h1> Mon, 06 Aug 2007 17:07:46 +0000 Una palabra algo rara esta del inherit. Y de hecho, algo con el que desde hace poco no habia visto su importancia. Por lo mismo me interesa compartirla en este momento en que por fin sale el sol y calienta algo de este horrible frio. <h3 id="inherit--heredar">Inherit = heredar.</h3> Como sabrán, en CSS existe muchas propiedades que heredan sus características a sus hijos (child). Por ejemplo, si definimos en el <body> (como suelo hacer) que la familia tipográfica que utilizaremos será Helvetica, esto será heredado por todos los elementos que estén dentro del <body>: <pre class="language-css"><code>body { font-family: Helvetica, Arial, sans-serif; }</code></pre> <pre class="language-markup"><code><body> <h1>Esto será mostrado con Helvetica</h1> Esto tambien lo hereda </body></code></pre> Esto sucede con mucha frecuencia con propiedades relacionadas con el texto: font-family, font-size, color, text-align, etc. En los casos de las propiedades que no los heredan automáticamente, podemos forzarlo a que lo hagan, precisamente explicitando inherit en esa definición del hijo, como en el siguiente ejemplo: <pre class="language-css"><code>.contenedor { font-size: 14px; color: chocolate; border: 2px solid green; width: 500px; } .contenedor p { border: inherit; }</code></pre> Lo que sucederá en este caso, es que heredará el tamaño de la fuente y su color por defecto ya que estará dentro del .contenedor; pero como también queremos que herede el borde, le decimos border: inherit; para que lo haga. <a href="https://csslab.cl/ejemplos/inherit.html" title="Abrir ejemplo">Ver ejemplo</a>{.verejemplo} </article> <article> <h1>Bloques de texto con estilo</h1> Tue, 31 Jul 2007 22:45:12 +0000 <div class="pullquote"> </div> La etiqueta <blockquote> corresponde a una cita dentro de un bloque de texto. Ese es su significado semántico. Se usa para definir largos parágrafos donde se citan desde otros sitios web externos. Puede ir acompañado de algunos atributos, como title (define el título de esa cita), lang (define en qué idioma está) y cite (muestra el URL desde dónde se tomó esa cita). La idea de esta ocasión, es darle un estilo más gráfico a esas citas a través de un poco de CSS. Como en impresos se suelen utilizar las comillas (") para describir gráficamente este elemento, lo que haremos es poner al inicio y al final del blockquote 2 comillas a través de 2 imagenes diferentes. Ahora, la dificultad está en que como existe sólo 1 blockquote, CSS 2.1 no me permite tener 2 background simultáneas (lo que sí será soportado con CSS 3). Lo que se hará entonces, será aprovechar la pseudo-clase :fist-letter (le agrega estilo a la primera letra de un párrafo) para ubicar la primera imagen. Milagrosamente, esta pseudo-clase es soportado por IE5.5+, todo un privilegio. El HTML, no es gran cosa: <pre><code class="language-markup"><blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida..........</blockquote></code></pre> Pero a través de CSS, sí veremos cambios: <pre><code class="language-css">blockquote { background: url(cierra.gif) no-repeat right bottom; width: 400px; padding-left: 18px; padding-right: 18px; text-indent: -18px; } blockquote:first-letter { background: url(abre.gif) no-repeat left top; padding-left: 18px; }</code></pre> En la etiqueta <blockquote> se dará el background que contiene la esquina inferior derecha (el cierre de la cita). Además, se define el ancho de la misma (si necesario) y un padding a ambos lados horizontales. Fijarse en que se determinó un text-indent negativo, de igual valor que el padding-left. Este es fundamental al determinar el estilo siguiente, de la pseudo-clase :first-letter. Como esta imagen tiene un ancho de 12px, se agrega un padding para que el parágrafo no lo sobrepase, así se hace necesario que este primer caracter retroceda la misma cantidad de pixeles para que esté de acorde con el inicio del párrafo, como se ejemplifica en la siguiente imagen: <a href="https://csslab.cl/ejemplos/blockquote/index.html" title="Ver Ejemplo">Ver Ejemplo</a> Si ven el código fuente del ejemplo, notarán que hubo que utilizar <a href="http://www.csslab.cl/2006/07/28/se-viene-ie7-%C2%A1huid/">comentario condicional</a> para un pequeño detalle en los IE’s. El problema era que no se desplegaba bien la comilla que abre (la del :first-letter), por lo que se posicionó unos 5 pixeles hacia abajo. Sólo eso. <h3 id="links">Links:</h3> <ul> <li><a href="http://www.htmlquick.com/reference/tags/blockquote.html" title="Abrir HTML blockquote tag" target="_blank">HTML blockquote tag</a></li> </ul> </article> <article> <h1>Layout Híbrido</h1> Fri, 27 Jul 2007 17:37:43 +0000 Conocidos son por todos las técnicas de diagramado de sitios con columnas, tanto flotando como posicionando; cada uno tendrá su favorita. Lo más importante es saber las fortalezas de cada una, para poder controlarlas de mejor manera. Me acostumbré a flotar columnas, a lidar con sus defectos (oh <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">clearfix</a> cuánto de adoro), pero <a href="http://www.csslab.cl/2007/05/11/absolutamente-si/">position</a> también tiene un espacio ganado en mi corazón (y en esta ocasión será el elegido). Sitios con columnas de <a href="http://www.csslab.cl/2006/10/05/layout-fijo-a-elastico-en-solo-4-caracteres/">anchos fijos</a> son pan comido ya. Trabajar con porcentajes, tiene cierta dificultad pero se pueden sobrellevar. Imagínense mezclarlos. He visto sitios semi-líquidos, donde una columna crece según el tamaño de la ventana, mientras que la otra al lado se queda fija. Pues recién pude fijarme en cómo fueron construídas, y he podido replicarlas en el mundo real. De eso se trata este artículo, sobre cómo construir un layout híbrido: columnas fijas y columnas líquidas. Muy entretenido, primero que nada el ejemplo gráfico (muevan la ventana y vean de qué hablo). <div class="pullquote"> </div> <a href="https://csslab.cl/ejemplos/hibrido/liquido_izquierda.html">Ver ejemplo 1</a> Para lograr esto, se eligió position para lograr poner las columnas donde necesitamos. Esto facilita que la columna que esté fija, quede relegada a un rincón (derecho o izquierdo, da igual. En el ejemplo anterior quedó pegado a la derecha con un right: 0;) Así, la otra colummna (que necesitamos que se haga más ancha o angosta, según el tamaño que adquiera nuestra ventana de browser) queda pegada al otro extremo (left: 0;) y tiene libertad ya que no le definimos width. Por otro lado, sí tiene definido un marginado opuesto considerando ya el espacio fijo que ocupa la columna que no crece. Básicamente ese es el funcionamiento. Como siempre, el HTML muy simple utilizado: <div id="header"> <h1>Encabezado</h1> </div> <div id="menu"> <h1>Menu Lateral</h1> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> <div id="content"> <h1>Contenido Principal</h1> Lorem ipsum dolor sit amet, consectetuer ………. </div> Y aquí llega la magia del CSS: div#header { position: absolute; top: 0; left: 0; width: 100%; height: 80px; } div#content { position: absolute; top: 100px; left: 20px; right: 240px; } div#menu { position: absolute; top: 100px; right: 20px; width: 200px; } <a href="https://csslab.cl/ejemplos/hibrido/liquido_derecha.html">Ver ejemplo con elasticidad a la derecha</a> <a href="https://csslab.cl/ejemplos/hibrido/liquido_izquierda.html">Ver ejemplo con elasticidad a la izquierda</a> </article> <article> <h1>sobre cómo instalé todos los browsers</h1> Wed, 25 Jul 2007 18:20:04 +0000 Como trabajador dedicado a la web, su diseño y desarrollo, es mi karma diario tener que probar mis proyectos en la gran mayoría de browsers habidos y por haber. Aunque uno tiende a confiarse en que se verá bien en IE6 y FireFox, se hace necesario tener simultáneamente IE7 corrriendo. Bueno, yo trabajo con plataforma Mac OSX hace muchos años ya y he tenido la suerte de que donde trabajo, me tienen uno. Así que mi browser por defecto es Safari 2 (me encanta su velocidad), uso Firefox 2 para pruebas y para un par de extensiones (<a href="http://www.bugzilla.org/" target="_blank">Buzgilla</a> y <a href="http://chrispederick.com/work/web-developer/" target="_blank">Web Developer</a> son muy necesarios) y Opera para pruebas (suele comportarse como IE6). Tenía que pedir prestado algun PC para ver cómo se comportaba en Windows… lo que usualmente mostraba problemas. Así que en casa actualicé mi máquina a un Macbook con Intel y en el trabajo me lo renovaron a un iMac con Intel. Perfecto, ahora podía tener todos los browsers corriendo simultáneos (con 1GB de RAM corre apenas… pero corre). <h3 id="la-receta">La receta:</h3> <ul> <li>IE6 con <a href="http://www.codeweavers.com/products/cxmac/" target="_blank">Crossover</a> (liviano, no instala todo Win)</li> <li>IE7 con <a href="http://www.parallels.com/landingpage/mac/" target="_blank">Parallels</a> <a href="" target="_blank">(ver instrucciones)</a></li> <li>Safari 2 (nativo)</li> <li>Firefox 2</li> <li>Opera</li> </ul> </article> <article> <h1>Como Caja 2: superando el modelo</h1> Thu, 19 Jul 2007 14:49:40 +0000 En el artículo donde explico de qué se trata y <a href="http://www.csslab.cl/2006/12/14/como-caja-el-modelo/">cómo nos afecta el modelo de caja al construir un layout con CSS</a>, se pueden sacar algunas conclusiones, las que en realidad dejo bien claro: utilizar el reseteador universal, tratar de no definir anchos a los div‘s y el más importante, no darle padding al div u otro elemento contenedor (para no deformarlo). Con esas 3 simples reglas podemos superar bastante este inconveniente, pero me interesa entregar una recomendación para que se pueda sintetizar un poco nuestro layout y al mismo tiempo ahorrar un poco de código, logrando además más control sobre nuestra diagramación. Un HTML con 2 columnas: <pre><code class="language-markup"><div id="contenido"> Lorem ipsum dolor sit amet................. </div> <div id="menu"> <ul> <li>Uno</li> <li>Dos</li> </ul> </div></code></pre> Y el CSS muy primitivo pero funcional: <pre><code class="language-css">div#contenido { width: 500px; background: #CCC; } div#menu { width: 180px; background: #F00; margin-left: 20px; } div#menu ul { margin: 10px 20px; } div#contenido, div#menu { float: left; }</code></pre> <a href="https://csslab.cl/ejemplos/comocaja2/index.html">Ver ejemplo funcionando</a>{.verejemplo} Como apreciarán, los contenedores encajan y no se desarma nada. Como se predijo funciona perfecto. Ahora, lo que se hará es darle padding al y al <ul> para que se despegara un poco de los bordes, pero esto puede traer inconvenientes: ¿Qué pasa si tenemos más de un ? ¿Qué pasa con otros elementos que agreguemos, <h1>, <a>, ? ¿Debemos darle el padding a todos siempre? Un lío tras otro… en ese caso, lo que haré será agregar otro div dentro de los contenedores, los que tendrán una class que tendrá solamente el padding que necesitamos. Así, este div rodeará todos los elementos necesarios para dar ese margen interior a nuestras cajas. El HTML modificado: <pre><code class="language-markup"><div id="contenido"> <div class="marginado"> Lorem ipsum dolor sit amet................. </div> </div> <div id="menu"> <div class="marginado"> <ul> <li>Uno</li> <li>Dos</li> </ul> </div> </div></code></pre> Y el estilo para esa modificación: <pre><code class="language-css">div#contenido { width: 500px; background: #CCC; } div#menu { width: 180px; background: #F00; margin-left: 20px; } div#menu ul { margin: 10px 20px; } div#contenido, div#menu { float: left; } div.marginado { padding: 10px; }</code></pre> Y si en el caso que necesitáramos darle diferentes padding a cada caja, lo especificamos en el CSS: <pre><code class="language-css">div#contenido div.marginado { padding: 10px; } div#menu div.marginado { padding: 20px; }</code></pre> <a href="https://csslab.cl/ejemplos/comocaja2/index_2.html">Ver ejemplo final</a>{.verejemplo} </article> <article> <h1>HTML y la enseñanza 2</h1> Wed, 18 Jul 2007 22:04:52 +0000 Ha pasado ya 1 año desde el anterior artículo <a href="http://www.csslab.cl/2006/07/03/html-y-la-ensenanza/">HTML y la enseñanza</a>, donde pregonaba una inquietud sobre cómo se estaba impartiendo la enseñanza del diseño web dentro de las escuelas y universidades existentes, principalmente en Chile (donde conozco de cerca sus realidades). A raíz de ese artículo, comenzó una interesante discusión (leer los comentarios) la que finalmente terminó en mi persona impartiendo clases <a href="http://www.uniacc.cl/" target="_blank">en una universidad</a> precisamente para enseñar HTML, en la asignatura Tecnologías Web. Fue todo un reto, durante medio semestre (éramos 2 profesores, yo tomaba la segunda mitad del curso) traté de sacarme ese estigma de ‘impaciente’ y ‘poco tolerante’ que tengo, para tratar de explicarle a un grupo de alumnos lo que sé hacer: diagramar y construir sitios semánticamente con XHTML+CSS. El ritmo era intenso, ya que tuve que rendir simultáneamente en mi trabajo y en las clases (lo que me hizo admirar a la gente que trabaja y estudia de noche… aplausos). Además, la universidad me dió libertad para crear mi programa de curso, lo que me permitió experimentar y entregarle lo último de lo mejor a los alumnos, que estaban recién entrando al mundo universitario (alumnos de primer año) y desde ya iban a aprender a hacer bien sus sitios. En resumen el temario fue: <ul> <li> <h3 id="introducción-a-html">Introducción a HTML</h3> <ul> <li>Construyendo sitios usables</li> <li>Web Semántica</li> <li>Capas de construcción</li> <li>Etiquetas obsoletas</li> <li>Formularios Semánticos</li> <li>Listas (menu)</li> </ul> </li> <li> <h3 id="introducción-a-hojas-de-estilos">Introducción a Hojas de Estilos</h3> <ul> <li>Ventajas del uso</li> <li>Class, ID</li> <li>Posicionamiento</li> <li>Float</li> <li>Clearfix: cómo y cuándo</li> </ul> </li> <li> <h3 id="introducción-a-javascript">Introducción a Javascript</h3> <ul> <li>Frameworks</li> <li>Librerías de Efectos</li> </ul> </li> </ul> ¿Interesante, no? Fue muy entretenido, y les agradezco profundamente a todos mis alumnos: Rodrigo, Tomás, Maximiliano, Javier Jonathan, Felipe, Alvaro, Andrés, Patricia, Nataly, Alfredo, Arturo, José y Joaquín. Sinceramente creo que aprendí mucho más de ustedes que ustedes de mí. Gracias <a href="http://www.bronx.cl/sergei/" target="_blank">Serge</a> por la invitación, y a la universidad <a href="http://www.uniacc.cl/" target="_blank">UNIACC</a> por creer que podía hacerlo. </article> <article> <h1>Validando el CSS de Thickbox</h1> Mon, 09 Jul 2007 21:25:53 +0000 Durante un proyecto en específico se deció utilizar <a href="http://jquery.com/" target="_blank">jQuery</a> como librería para todo lo que fuera JavaScript. Reticente (ya que en ese entonces me animaba con Prototype y Script.aculo.us), comencé a utilizarlo y me fascinó como tenía grandes prestaciones, al momento de modificar el código HTML antes de ser renderizado. Se podían inyectar classes, ID‘s y otros elementos dentro del código muy facilmente, lo que me hizo encariñarme con él. Para efectos, no se quedaba atrás (aunque en mi opinión, un poco toscos) y determinamos utilizar <a href="http://jquery.com/demo/thickbox/" target="_blank">Thickbox</a> para evitar los ya obsoletos pop-ups para abrir imagenes y nuevas ventanas dentro de la misma pagina (les había comentado hace mucho de <a href="http://www.csslab.cl/2006/09/01/lightbox-swf/">lightbox</a>, pero éste funciona con Prototype). Enfin, Thickbox es muy bueno para lo que hace, pero teníamos un pequeño gran problema: el cliente requería que todo el CSS validara. Y Thickbox tiene 3 propiedades que de por sí no validan y que son muy importantes: dan la trasparencia a la ventana. Ya las comentamos anteriormente en un <a href="http://www.csslab.cl/2007/01/24/transparencias-a-prueba-de-browsers-2/">artículo sobre transparencias</a>: opacity, -moz-opacity y filter: alpha(). Opacity valida sólo en CSS3 (aún en desarrollo), -moz-opacity es propietario de Mozilla y no valida, y filter: alpha() es un invento de Microsoft y menos aún valida. Pequeño gran problema. Bueno a pensar. Googleando, en los <a href="http://codylindley.com/thickboxforum/search.php?PostBackAction=Search&Keywords=css+validation&Type=Topics&btnSubmit=Search" target="_blank">foros de Thickbox ya han posteado</a> sobre el tema y no existe solución. Miré <a href="http://www.huddletogether.com/projects/lightbox2/" target="_blank">Lightbox</a> y mi dí cuenta que no tiene esas propiedades en su CSS, y la transparencia es dada a través de JS pero, nuevamente, es através de Prototype y no soy un JS-Master como para hacerlo yo mismo con Jquery. No se me ocurrió nada mejor que sacar esas propiedades del CSS y meterlas dentro del thickbox.js, lo que hace que valide perfectamente el código. Total, cuando renderice el HTML recién aparecerán. Además, saqué un _hack para IE6 y lo puse en una nueva hoja de estilo, utilizando por supuesto <a href="http://www.csslab.cl/2006/07/28/se-viene-ie7-%C2%A1huid/">comentario condicional</a>. Voilá. Funcionó. #TB_overlay { position: absolute; top: 0; left: 0; z-index:100; width: 100%; height: 100%; background-color: #000; /* ———————————– comentado aquí y copiado al thickbox.js filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; —————————————————————————- */ } .append("<div id=’TB_overlay’ style=’filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6;’></div><div id=’TB_window’></div>"); La versión utilizada en ese entonces de Thickbox fue la 2.1. Actualmente está la 3, la que se hace muy difícil validar su CSS ya que rescata comandos JS dentro de las mismas propiedades CSS (principalmente parael alto y ancho de la ventana del browser). <a href="https://csslab.cl/ejemplos/thickbox/index.html">Ver ejemplo funcionando.</a>{.verejemplo} <a href="https://csslab.cl/ejemplos/thickbox/thickbox.zip">Bajar este ejemplo (.zip).</a>{.bajar} <h3 id="links">Links:</h3> <ul> <li><a href="http://docs.jquery.com/Downloading_jQuery" target="_blank">Jquery</a></li> <li><a href="http://jquery.com/demo/thickbox-2.1/" target="_blank">Thickbox 2.1</a></li> <li><a href="http://jigsaw.w3.org/css-validator/" target="_blank">CSS Validator</a></li> </ul> </article> <article> <h1>Propiedades del olvido 2: clip</h1> Fri, 06 Jul 2007 21:15:48 +0000 La propiedad clip determina el área de un elemento. Tal cual, con esta propiedad muy poco utilizada puedes cortar, por ejemplo, una imagen que sea mayor que su contenedor sin tener que recurrir a cambiar su width o height (deformarla) o abrir tu editor gráfico favorito y aplicar el corte a mano. Si prefieren, pueden imaginarla como una máscara, con la que puedes determinar los límites y cubrir sólo lo que quieres que se vea a través de pixeles. <img src=“<a href="http://www.csslab.cl/wp-content/uploads/2007/07/ejemplo_clip.jpg%22">http://www.csslab.cl/wp-content/uploads/2007/07/ejemplo_clip.jpg"</a> alt=“Modo de uso de la propiedad clip” align=“right” style=““padding: 0 0 10px 10px; /> <h3 id="uso-recttop-right-bottom-left">Uso: rect(top right bottom left);</h3> No funciona precisamente como margin y padding, creo que por eso se complica su uso. En la siguiente imagen, una demostración gráfica de cómo se utiliza sus parámetros de posicionamiento. Puedes ocuparla para, por ejemplo, crear una galería de imágenes donde utilizas la misma imagen grande, pero cortada en un espacio determinado (como un thumbnail). Así, no necesitas cargar 2 imagenes: una imagen principal y otra reducida. <a href="https://csslab.cl/ejemplos/clip/clip.html">Ver ejemplo aplicado</a>{.verejemplo} </article> <article> <h1>Lo ví y me gustó 21</h1> Fri, 06 Jul 2007 14:37:17 +0000 #21 – 6 Julio 2007 <a href="http://www.csslab.cl/?page_id=27">Envía tu sitio</a> construído en HTML+CSS <a href="http://www.masomenosuno.com/" target="_blank"></a> <a href="http://studio.st/" target="_blank"></a> </article> <article> <h1>Propiedades del olvido: visibility</h1> Fri, 22 Jun 2007 20:59:26 +0000 Comezaré una serie de artículos con propiedades CSS que no son muy utilizadas, pero que mantienen una vigencia en cuanto a su utilidad. Es más que nada para que sepan que existen, sus usos y beneficios para sus proyectos web. En esta ocasión, la propiedad visibility. <h3 id="uso-visibility-visible--hidden">Uso: visibility: visible | hidden;</h3> Hace prácticamente lo mismo que display: esconde o muestra un elemento. La diferencia radica en que mientras el display: none; esconde el elemento y elimina el espacio que ocupa, visibility: hidden; mantiene ese espacio, escondiendo sólo su contenido. <a href="https://csslab.cl/ejemplos/visibility.html">Ver ejemplo práctico (view source para los curiosos).</a> </article> <article> <h1>IE7 { css2: auto; }</h1> Fri, 15 Jun 2007 21:09:26 +0000 IE7 es una librería JavaScript que hace que Internet Explorer se comporte como debe ser: interpretar correctamente los estándares web. Algunas de sus bondades: Soporta los siguientes selectores: <ul> <li>parent > child</li> <li>[attr], [attr=»value»], [attr~=»value»]</li> <li>:hover, :active, :focus (for all elements)</li> <li>:first-child, :last-child, only-child, nth-child, nth-last-child</li> <li>:before/:after/content:</li> <li>:lang()</li> <li>does not alter the document structure</li> <li>supports the W3C box model in both standards and quirks mode</li> <li>supports fixed positioning</li> <li>supports overflow:visible</li> <li>supports min/max-width/height</li> <li>standardies forms behavior</li> <li>supports PNG alpha transparency</li> <li>works for Microsoft Internet Explorer 5+ (Windows only)</li> </ul> Aún está en alpha, y personalmente no lo he probado. Si alguien lo hace, ruego comentar sus resultados. <h3 id="a-hrefhttpdeanedwardsnameie7-titlever-más-sobre-ie7--css2-auto--target_blankie7--css2-auto-a"><a href="http://dean.edwards.name/IE7/" title="Ver más sobre IE7 { css2: auto; }" target="_blank">IE7 { css2: auto; }</a></h3> </article> <article> <h1>Lo ví y me gustó 20</h1> Wed, 06 Jun 2007 15:25:54 +0000 #20 – 6 Junio 2007 <a href="http://www.csslab.cl/?page_id=27">Envía tu sitio</a> construído en HTML+CSS <a href="http://www.futhart.cl/" target="_blank"></a> <a href="http://estupendos.net/" target="_blank"></a> </article> <article> <h1>La verdadera !importancia</h1> Tue, 05 Jun 2007 22:01:05 +0000 CSS significa Hojas de Estilo en Cascada. Con cascada, nos referimos que el browser lee esta hoja de estilos en orden descendente (haciendo analogía, una cascada cae de arriba hacia abajo). Así, en el caso de tener dos estilos similares definidos, el que venga en último lugar, o más abajo (orden descendente) tendrá más relevancia. O sea: <pre class="language-css"><code>h1 { font-size: 22px; } h1 { font-size: 48px; }</code></pre> <a href="https://csslab.cl/ejemplos/important/sin_important.html">Ver ejemplo</a>{.verejemplo} En este ejemplo, tenemos definido en nuestra hoja de estilos para h1 dos tamaños diferentes, pero se mostrará finalmente el tamaño de 48px, ya que tiene más peso que el primero (lo sobreescribe si refieren pensar así). Ahora, a través de una simple regla, es posible darle más relevancia a determinadas propiedades sobre todas las otras. Con !important, te aseguras que determinada propiedad sea aplicada sobre todas las otras. Utilizando el ejemplo anterior, tendremos el h1 de tamaño 22px: <pre class="language-css"><code>h1 { font-size: 22px!important; } h1 { font-size: 48px; }</code></pre> <a href="https://csslab.cl/ejemplos/important/important.html">Ver ejemplo</a>{.verejemplo} En hojas de estilos muy grandes, suele pasar que uno no se da cuenta y se provocan conflictos entre estilos. Con esta regla, podremos darle relevancia a la que nos interesa. <h3 id="links">Links:</h3> <ul> <li><a href="http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules">!important rules</a></li> </ul> </article> <article> <h1>Selectores avanzados de atributos</h1> Tue, 05 Jun 2007 14:59:03 +0000 Con este artículo les mostraré una manera de cómo CSS realmente potencia la presentación de un sitio, aportando más hacia la accesibilidad y usabilidad que a los <a href="http://www.csslab.cl/2006/08/25/el-porque-de-no-utilizar-tablas/">muchos argumentos que hemos entregado</a> hasta ahora. CSS2 nos permite aplicar estilos a elementos basándose en los atributos definidos en las etiquetas HTML, incluso a los valores contenidos en esos atributos. Primero que nada, veamos cómo se declara estos selectores avanzados: <pre><code class="language-css">a[href="http://www.csslab.cl/"] { font-weight: bolder; }</code></pre> Como se nota, a diferencia de lo que usualmente se hace, se define el atributo entre corchetes ( [href] ). En este ejemplo, lo que se logrará es que un ejemplo con link a este sitio tenga la fuente en negrita. <a href="https://csslab.cl/ejemplos/selectores/link.html">Ver ejemplo</a>{.verejemplo} Una excelente manera de aportar a la usabilidad, es entregándole al usuario la posibilidad de saber cuándo un link es externo, o cuando quieres q se abra en una ventana nueva (target="_blank"). Esto se logra agregando un ícono descriptivo luego del enlace, de la siguiente manera: <pre><code class="language-css">a[target='_blank'] { background: url(icono_blank.gif) right center no-repeat; padding-left: 20px; }</code></pre> <a href="https://csslab.cl/ejemplos/selectores/blank.html">Ver ejemplo</a>{.verejemplo} O si quieres que un enlace a un .pdf tenga un ícono especial: <pre><code class="language-css">a[href $='.pdf'] { background: url(icono_pdf.gif) right center no-repeat; padding-left: 25px; }</code></pre> En este ejempo, con el símbolo $ indicamos que el atributo termina con un .pdf. Otro más: <pre><code class="language-css">a[href ^= "mailto:"] { text-decoration: overline; }</code></pre> Aquí, si un enlace es a un email a través de mailto (^ quiere decir comienza con) le damos una línea sobre el texto (text-decoration: overline;). <a href="https://csslab.cl/ejemplos/selectores/index.html">Ver todos los ejemplos</a>{.verejemplo} <div class="pullquote"> </div> Finalmente, y como me imagino que esperaban, tanta maravilla no funciona en IE6. Más un argumento para enterrarlo de una vez por todas. <h3 id="links">Links:</h3> <ul> <li><a href="http://webdesign.about.com/cs/css/qt/tipcssattrib.htm" target="_blank">Cascading Style Sheets 2 Attribute Selectors</a></li> </ul> </article> <article> <h1>El contorno de la discordia</h1> Mon, 28 May 2007 19:49:34 +0000 Uno de los pocos detalles que le he visto a <a href="http://www.getfirefox.com" target="_blank">Firefox</a>, responde a un tema con los links. En realidad, aparece siempre que el foco está sobre un elemento (formularios, enlaces) para llamar la atención y destacarlo por sobre otros. Se dibuja una línea punteada alrededor de nuestro elemento, y lo he notado muy claramente en Firefox, ya que Safari (browser que uso por defecto) no lo despliega si no lo explicito. Otro dato sobre este contorno, o outline: a pesar de que despliega un borde alrededor, no responde al modelo de caja, o sea, no ocupa espacio interior o exterior. O sea, que no debemos de considerarlo al diagramar con cajas, ya que no modifica nuestros anchos o altos. Pues con todo esto, a lo que voy es que lo podemos controlar a través de CSS, mediante la propiedad outline. Se declara tal como un borde: a { outline: 1px solid black; } Mi problema es que está declarado por defecto en Firefox en la peudo-clase :hover, lo que me molesta bastante, principalmente cuando el elemento que contiene el link (y por lo tanto el outline) está posicionado con relación al margen. Fíjense en el ejemplo, en el enlace del medio y se darán cuenta a lo que me refiero (hagan click sobre él con Firefox y verán el susodicho borde contorno). <a href="https://csslab.cl/ejemplos/outline.html">Ver ejemplo</a> Bueno, la solución final reside en quitarlo de raíz. Se declara que para todos los links, en todas las instancias (lo que involucra las 4 pseudo-clases a:link, a:visited, a:hover, a:active) este contorno desaparezca: a { outline: 0; } <a href="https://csslab.cl/ejemplos/outline.html">Ver nuevamente ejemplos.</a> </article> <article> <h1>Arrastrando con Moo</h1> Fri, 18 May 2007 17:51:13 +0000 Sigo jugando con este gran framework que ha demostrado ser <a href="http://mootools.net/" target="_blank">mootools</a>. En esta ocasión, y fusionando lo que se vió recientemente para <a href="http://www.csslab.cl/2007/05/11/absolutamente-si/">Absolutamente sí</a>, una vez más reciclaré ese layout para integrarle un efecto de moo, el que me permite crear ventanas arrastrables fácilmente (en el fondo, esa es la idea). Lo único diferente del HTML anterior, será sacar esa imagen con que jugamos el position (no la necesito ahora), cambiar el id=“contenido” por una class=“container” y agregarle una class al <h1> para que a través de éste searrastre nuestra ventana. <div class="container"> <h1 class="arrastra">Arrástrame desde aquí</h1> Lorem ipsum dolor sit amet, consectetuer… Curabitur at sem. Vestibulum vel diam. Proin quis sapien ut leo faucibus eleifend… </div> Además, debemos agregar el llamado a mootools.js y un script que ejecuta el efecto de arrastrado, además de un fade que lo hace más atractivo: var indexLevel = 1; function dragContainerInit(el){ var fadeIn = new fx.Opacity(el.parentNode, {duration:300}); var dragContainerOptions = { handle: el, onStart: function(){ var fadeIn = new fx.Opacity(el.parentNode, {duration:300}); fadeIn.custom(1,.5); indexLevel++; el.parentNode.style.zIndex = indexLevel; }.bind(this), onComplete: function(){ var fadeIn = new fx.Opacity(el.parentNode, {duration:300}); fadeIn.custom(.5,1); }.bind(this) }; el.style.cursor = ‘move’; el.parentNode.makeDraggable(dragContainerOptions); } window.onload=function() { var draggables = document.getElementsBySelector(‘.arrastra’); draggables.each(function(el){dragContainerInit(el);}); } No viene al caso comentar todo este código, pero lo que sí me interesa es mencionarles donde pueden y deberían modificarlo. Si lo leen, pueden darse cuenta que se puede manejar la opacidad (fadeIn.custom(.5,1);), la duración de la transición de esta opacidad ({duration:300}), el tipo de cursor que se despliega (el.style.cursor = ‘move’;), y finalmente la class del elemento que permite el arrastre (.arrastra). <a href="https://csslab.cl/ejemplos/drag/drag.html">Ver ejemplo</a> La sintaxis de moo, y en general de las <a href="http://www.csslab.cl/2007/02/13/agregando-movimiento-via-javascript/">demases librerías javascript</a> existentes, son muy fáciles de entender y poder modificarlo a tu gusto. Jueguen un poco con ella y se darán cuenta de lo mucho que pueden lograr. </article> <article> <h1>Absolutamente sí</h1> Fri, 11 May 2007 20:55:26 +0000 Una propiedad muy importante de CSS es position. Con ella, podemos estructurar nuestro sitio web, aunque según mi perspectiva prefiero utilizar float y display para lograr lo mismo. Enfin, cosa de gustos. Algunas veces eso sí se me ha hecho necesario utilizar position para manejar la posición de un elemento por sobre otro, o respecto a mi ventana. La propiedad position ubica un elemento en varios estados: static, relative, absolute o fixed. Detallemos: <div class="pullquote"> </div> <ul> <li>Static: es por defecto en las etiquetas. Un elemento con position: static; siempre tiene la posición normal con que fluye a diagramación de la página.</li> <li>Relative: un elemento con position: relative; se mueve con respecto a su posición normal. Al definirlo, podemos posicionarlo top: 20px; respecto a su posición actual.</li> <li>Absolute: una etiqueta con position: absolute; es posicionado respectivamente a su contenedor bloque, sea éste el DIV padre, o el BODY. Su posición también es especificada por top, right, bottom, left.</li> <li>Fixed: un elemento con position: fixed; queda fijo respectivo a la ventana del browser, no importanto el movimiento de éste o del scroll que produzca. Obedece también a top, right, bottom y left.</li> </ul> ¿Se fijaron que para position no se ocupa margin-top, o margin-left? Sólo para que lo tengan en cuenta. Ahora, tal como quedó plasmado en el título de este artículo, en este caso mencionaré específicamente la propriedad position: absolute. Esta propiedad es muy útil si quieres ubicar elementos por sobre otros, no importando donde éstos estén ubicados. En esta ocasión, 2 ejemplos gráficos. Comenzaremos con el HTML base que regirá ambos ejemplos: <div id="contenido"> <h1>Título</h1> Lorem ipsum dolor sit amet,……. Curabitur at sem. Vestibulum vel diam. Proin quis sapien ut leo faucibus eleifend. Phasellus eros. Praesent ac diam…. </div> Nada de otro mundo. Un contenedor que tiene un título, y dos párrafos de texto en sus respectivas etiquetas, para finalmente mostrar una imagen. Ahora, a través del CSS, esta página se verá un poco mejor estéticamente. La idea como mencioné es mostrar a través de 2 ejemplos las combinaciones que permiten posicionar en este caso a la imagen respecto a la ventana del browser, y a su etiqueta contenedora. #contenido { width: 450px; float: left; } #contenido h1 { text-align: center; color: #F00; } #contenido p { padding: 10px 10px 10px 15px; font-size: 12px; line-height: 140%; } #contenido img { position: absolute; width: 230px; height: 100px; top: 0; right: 0; } Como se habrá notado, sólo se definió en la etiqueta IMG que ésta estuviera posicionada absolutamente, arriba y a la derecha (top: 0; right: 0;). Con esto, verán que la imagen estará ubicada en la parte superior derecha de nuestra ventana de browser, y se moverá respecto a su resolución. <a href="https://csslab.cl/ejemplos/position/absoluto.html">Ver ejemplo</a> Ahora, agregaremos un position: relative al contenedor. Con esto, verán que la imagen nuevamente estará posicionada sobre nuestros elementos, pero en esta ocasión respecto a su contenedor bloque. Con esta propiedad declarada, definimos que div#contenido es su elemento bloque contenedor, y por lo tanto que sujete a IMG dentro de sí. #contenido { width: 450px; float: left; position: relative; } #contenido h1 { text-align: center; color: #F00; } #contenido p { padding: 10px 10px 10px 15px; font-size: 12px; line-height: 140%; } #contenido img { position: absolute; width: 230px; height: 100px; top: 0; right: 0; } <a href="https://csslab.cl/ejemplos/position/relativo.html">Ver ejemplo relativo</a> Links: <ul> <li><a href="http://www.w3schools.com/css/pr_class_position.asp" target="_blank">CSS position Property</a></li> <li><a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/" target="_blank">Learn CSS Positioning in Ten Steps</a></li> </ul> </article> <article> <h1>Estilos de botones crossbrowser</h1> Mon, 23 Apr 2007 17:26:45 +0000 Una de las cosas más difíciles que me toca al armar un sitio, son los formularios. Hacer que queden alineados correctamente, y en todos los browsers, es algo que a ratos me complica. Al terminarlos, está un pequeño botón que gatilla el envío del mismo. Este simple botón también suele ser un dolor de cabeza, ya que darle un estilo al <input> no es correctamente interpretado por todos los browsers. Me topé con este problema hace un tiempo, y encontré la siguiente solución. Por supuesto, la comparto por si más de alguien tiene el mismo inconveniente. Lo que sucede es que Safari (mi browser favorito) no despliega estilos para <input>; simplemente los ignora. Muestra en vez, su estiloso pero no compatible con mi diseño aqua button. Lo que quiero es tener mi botón, no otro. Así que la solución es reemplazar <input> por <button>, una etiqueta de botón muy antigua, pero no obsoleta, la que sí permite albergar imagen de fondo, color, margen, borde, etc. Como es una etiqueta algo antigua, requiere de cierre, tal como un link: <div class="pullquote" style="margin-top: 20px;"> </div> <pre><code class="language-markup"><button>Presióname</button></code></pre> y el CSS para hacerlo más bonito: <pre><code class="language-css">button { padding: 0; margin: 0; border: 0; background: url(button_fondo.gif) left top no-repeat; width: 110px; height: 40px; color: #FFF; font-size: 14px; font-weight: bolder; font-family: Georgia, "Times New Roman", Times, serif; text-shadow: #333 1px 1px 3px; text-align: center; cursor: pointer; }</code></pre> Como verán, funciona igual que cualquier otro elemento, al que le damos el estilo que queramos. Importante recalcar 2 líneas: <button> tiene por defecto borde con volumen, así que si no lo necesitamos es mejor poner border: 0. Lo segundo, agregarle el cursor de mano al posar el mouse encima del botón con cursor: pointer. Listo… pero surge un pequeño gran inconveniete: Safari y Opera no muestran nuestro texto centrado verticalmente. Firefox, Camino, Flock, IE, según mis pruebas, lo muestran perfecto. Si agregamos un padding-top de 10px se muestra bien, pero en los otros no. ¿Qué ∞¢“÷®? ¿Debería de importarme? Quizás sí, teniendo en cuenta que ambos browsers pasan el test <a href="http://www.webstandards.org/action/acid2/" target="_blank">Acid2</a>. Bueno, no quiero complicarme más. La solución radica en agregar el texto del botón en la misma imagen de fondo, y através del <a href="http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/">método Phark</a>, ocultar el título del botón: <pre><code class="language-css">button { padding: 0; margin: 0; border: 0; /*no quiero borde*/ background: url(button_fondo2.gif) left top no-repeat; width: 110px; height: 40px; cursor: pointer; /*muestrame el cursor de mano*/ text-indent: -999px; /*manda el texto leeeeejos*/ overflow: hidden; /*esconde cualquier trazo del mismo*/ }</code></pre> <a href="https://csslab.cl/ejemplos/button/index.html" title="boton con estilo" target="_blank">Ver resultado final</a> </article> <article> <h1>Texto auxiliar con estilo</h1> Wed, 18 Apr 2007 17:23:51 +0000 Pido disculpas por un título tan simple esta vez. No se me ocurrió nada mejor. Enfin, lo que vale es lo que sigue. Siguiendo con el desarrollo del nuevo <a href="http://www.be-studios.com" target="_blank">Be Studios</a>, creé un método donde al posar el mouse sobre una imagen, se desplegara un texto alternativo (no, no es alt) y que fuera auxiliar a la imagen. Esto lo había visto antes, sólo que no recuerdo ningún link en este momento. Entonces, recreé la situación, y la explico a continuación. Antes sí, <a href="https://csslab.cl/ejemplos/textosobreimagen/index.html">vean el ejemplo</a> para que sepan de qué hablo. Primero el código HTML. En este caso, es sólo una imagen simple y silvestre. Ella está contenida dentro de un <div>, el cual me entrega más control sobre el manejo de profundidades a través de z-index. Mi texto alternativo se posa sobre un luego después del , el cual a través del CSS se verá dentro, y con un fondo y con transparencia. <div id="ejemplo"> Click para abrir </div> <div class="pullquote"> </div> Pues ahora viene la magia: #ejemplo { z-index: 0; width: 300px; height: 100px; position: relative; } #ejemplo img { z-index: 1; } #ejemplo span { display: none; } #ejemplo:hover span { display: block; position: absolute; right: 0; bottom: 0; z-index: 2; padding: 2px 5px; background: #000; color: white; font-weight: bolder; font-size: 24px; text-shadow: #000 1px 1px 3px; opacity: 0.4; -moz-opacity: 0.4; } Primero, definimos nuestro <div>, como dije con un z-index inferior para dejarlo abajo de nuestro y posicionado relativamente. Esto es muy importante, ya que a continuación nuestro estará posicionado absolutamente en relación al <div>, lo que lo colocará sobre la imagen (que según se muestra tiene z-index: 1, superior al <div> pero inferior al z-index: 2 del ) Este texto será desplegado con un :hover en el <div>, lo que no hace que funcione en IE6 (ya que este browser no soporta pseudo-classes que no sean links <a>,lo cual para este caso me importa bien poco). El resto, código para que se vea bonito. Finalmente la <a href="http://www.csslab.cl/2007/01/24/transparencias-a-prueba-de-browsers-2/">transparencia a prueba de browsers</a>. Si ven el código fuente <a href="https://csslab.cl/ejemplos/textosobreimagen/index.html">en el ejemplo</a>, verán que para IE7 está implementado con <a href="http://www.csslab.cl/2006/07/28/se-viene-ie7-%C2%A1huid/">comentario condicional</a>. </article> <article> <h1>Centrando Horizontalmente (a prueba de IE)</h1> Mon, 09 Apr 2007 21:24:38 +0000 Existen 2 maneras para centrar elementos HTML, ambas muy conocidas y difundidas. Con CSS, centrar un elemento depende de sí mismo: <h3 id="elementos-lineales">Elementos lineales</h3> Estos elementos son los que no son en formato bloque, como e imágenes . Para centrarlos, se utiliza la propiedad text-align dentro del contenedor que lo alberga: <div id="container"> Texto centrado </div> #container { text-align: center; } <h3 id="elementos-bloque">Elementos bloque</h3> Estas etiquetas son las que por defecto son considerados block, como <h1>, <div>, , etc. Para centrarlos, basta con definir automático en su margen derecho e izquierdo. Para el mismo ejemplo HTML anterior: #container { margin-left: auto; margin-right: auto; } o lo que es lo mismo: #container { margin: 0 auto; } Un detalle es que estos elementos bloque por defecto tienen un ancho de 100%, por lo que no se centrarían a menos que definamos un ancho menor que éste, sea porcentual o en pixeles. #container { margin: 0 auto; width: 50%; } <div class="pullquote"> </div> Como nada es perfecto y es de suponerse, IE hace lo que quiere. En <a href="http://www.csslab.cl/2005/11/30/%C2%BFstrict-o-no-strict/">doctype</a> no estricto o estándar, considera los elementos en bloque como elemento línea, con lo que centrarlo con margin no es tomado en cuenta. Lo que se debe hacer es mezclar ambas técnicas, dándole al elemento contenedor (puede ser hasta el mismo <body>) un alineado de texto, además de centrarlo horizontalmente con márgenes automáticos. Pero claro, este alineado central de texto será heredado por todos sus elementos interiores (#container, , etc) por lo que debemos volver a decirle al div#container que vuelva a alinear todo en su interior a la izquierda o justificado. Finalmente: body { text-align: center; } #container { margin: 0 auto; width: 50%; text-align: left; } Esto debería de solucionarse desarrollando en XHTML strict, incluso HTML standart (y definiéndolo explícitamente en el <head>), pero con 2 líneas de código podemos anticiparnos a posibles errores. <a href="https://csslab.cl/ejemplos/centrado_horizontal.html">Ver resultado final</a>{.verejemplo} Links: <ul> <li><a href="http://dorward.me.uk/www/centre/" target="_blank">Centring using CSS</a></li> <li><a href="http://www.quirksmode.org/css/quirksmode.html" target="_blank">Quirks mode and strict mode</a></li> </ul> </article> <article> <h1>Nuevo sitio, nuevos métodos</h1> Thu, 05 Apr 2007 20:26:19 +0000 En estos días he estado diseñando y contruyendo el nuevo sitio web para mi proyecto-empresa <a href="http://www.be-studios.com" target="_blank">Be Studios</a>. Es la tercera versión ya, y esta vez no utilizaré ni una pizca de Flash; me aburrió. Así que está siendo construído enteramente sobre XHTML (trataré de que sea estricto y que valide en todo) y he jugado bastante con diferentes efectos javascript. Durante su construcción, me he topado con varios inconvenientes, los que a través de unas técnicas interesantes he podido sobrepasar. Algunas de ellas mostraré aquí en una serie de artículos, porque claro más de alguno puede tener la misma inquietud. Precisamente me gustaría comentar sobre las librerías javascript con que he estado jugando. Pasé por las más importantes, y perdí unas buenas horas tratando de que funcionen como quiero. La que más me impresionó fue <a href="http://mootools.net/" target="_blank">Mootools</a>, nunca había trabajado con él y es bastante interesante (no dejen de visitar su sección de <a href="http://mootools.net/download" target="_blank">downloads</a>, lo que demuestra su potencial). Luego, pasé a <a href="http://jquery.com/" target="_blank">Jquery</a> con el que había tenido unos roces antes, y sabía que tenía algunos efectos que necesitaba (pero por alguna razón que desconozco hacía que se cayera Safari). Conocí a <a href="http://interface.eyecon.ro/" target="_blank">Interface</a>, una librería sólo de efectos similar a <a href="http://script.aculo.us/" target="_blank">Script.aculo.us</a> para <a href="http://prototypejs.org/" target="_blank">Prototype</a>. Precisamente con ésta me quedé al final, la que más de trabajado y la que más me gusta, por la fácil implementación y configuración de efectos que posee. Los invito a probarr un poco de todas y hacerse de su propia opinión. </article> <article> <h1>+ bordes redondos</h1> Mon, 02 Apr 2007 14:43:49 +0000 <div class="pullquote"> </div> Un interesante recurso utilizado por diseñadores es de utilizar bordes redondeados para delimitar secciones en sus sitios web. En CSS no es tan simple lograrlo, a veces implica utilizar más de un DIV contenedor para abrir y cerrar los bordes, además de que nos impide que éstos sean líquidos (o elásticos). navegando, me encuentro con 2 soluciones que se ven bien prometededores, y son realmente crossbrowser (no como en el que <a href="http://www.csslab.cl/2006/08/08/bordes-redondos-crossbrowser/" title="Bordes redondos crossbrowser">publiqué hace un tiempo</a>, donde al parecer tiene problemas con IE6). <h3 id="a-hrefhttpwwwspiffycornerscomindexphp-target_blankspiffycornersa"><a href="http://www.spiffycorners.com/index.php" target="_blank">Spiffycorners</a></h3> <h3 id="a-hrefhttpwwwschillmaniacomprojectsdialog2-target_blankeven-more-rounded-corners-with-cssa"><a href="http://www.schillmania.com/projects/dialog2/" target="_blank">Even More Rounded Corners With CSS</a></h3> </article> <article> <h1>Lo ví y me gustó 19</h1> Fri, 30 Mar 2007 15:46:12 +0000 #19 – 30 Marzo 2007 <a href="http://www.csslab.cl/?page_id=27">Envía tu sitio</a> construído en HTML+CSS <a href="http://csstinderbox.raykonline.com/" target="_blank"></a> <a href="http://www.joshclarkportfolio.com/" target="_blank"></a> <a href="http://www.maxbernardmathieu.fr/" target="_blank"></a> </article> <article> <h1>Diseño para móviles: referencia</h1> Mon, 19 Mar 2007 15:31:34 +0000 Un gran medio aún por ser explotado en latinoamérica (y que creo que lo será durante este año 2007) es el de la internet para dispositivos móviles. Aunque ya hice un acercamiento en el artículo <a href="http://www.csslab.cl/2006/03/07/css-para-moviles/">CSS para móviles</a>, navegando por mis RSS encuentro un link donde <a href="http://www.blueflavor.com/blog/mobile/dotmobi_mobile_web_developers_guide.php" target="_blank">Brian Fling</a> se toma la molestia de escribir un manual para diseño web para móviles. Increíble, aplaudo su iniciativa. <a href="http://pc.dev.mobi/files/dotMobi%20Mobile%20Web%20Developers%20Guide.pdf">Download directo del manual en PDF</a> </article> <article> <h1>menúes y la class .selected</h1> Thu, 15 Mar 2007 16:32:28 +0000 Por usabilidad, siempre es recomendable dejarle claro al usuario dónde está parado dentro del sitio. Existen varias maneras de hacerlo, desde dejar evidente en el <title> en qué sección se está, pasando por mostrar un pequeño mapa de navegación desde y hasta dónde está ubicado (Inicio > Quiénes Somos > Empleados por ejemplo) o dejar seleccionado en el menú de navegación dónde uno está parado, con una clase especial. En este caso, en sitios pequeños a medianos, recomiendo utilizar un pequeño y simple truco que involucra HTML y CSS. Hagamos un layout muy simple. En este caso, un menú con listas y un contenido sólo para que no esté tan vacío (reciclaré el HTML de un <a href="http://www.csslab.cl/2007/03/02/columnas-de-igual-alto/">post anterior</a>): <div id="menulateral"> <ul> <li><a href="#" class="selected1">Item Uno</a></li> <li><a href="#" class="selected2">Item Dos</a></li> <li><a href="#" class="selected3">Item Tres</a></li> </ul> </div> <div id="contenido"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipisc……… </div> Como se dieron cuenta, cada ítem del menú tiene una class=“selected” con diferencias numéricas consecutivas (este es mi criterio, utilicen el que más les convenga) . El truco está en darle al <body> un ID específico, en este caso será uno para cada sección de nuestro menú, en total 3. Con este ID, mediante CSS le daremos un estilo para cada class selected, así si nos encontramos ubicados por ejemplo en el HTML con el id=“item2”, gatillará que la class selected2 de ese ID será desplegada. ¿Se entendió? Mejor sigo con el código CSS para que quede más claro: body#item1 a.selected1, body#item2 a.selected2, body#item3 a.selected3 { text-decoration: none; padding-left: 10px; } Entonces, nuevamente, tenemos 3 páginas HTML cada una con un ID diferente, de acuerdo con la sección en que estamos. Cada <a> del menú tiene una class diferente también, para poder diferenciarlas. La idea es con el CSS poder manejar el estilo para mostrar al usuario que estamos ubicados en esa parte del sitio sin tener que tocar el HTML, basta con dejar las classes siempre puestas, pero con diferentes ID’s en el < body>. <a href="https://csslab.cl/ejemplos/menu_selected/1.html">Ver HTML final</a> (view source para más detalles) <a href="https://csslab.cl/ejemplos/menu_selected/test.css">Ver Hoja de Estilos Final</a> </article> <article> <h1>.clearfix: el widget</h1> Fri, 09 Mar 2007 16:09:35 +0000 <div align="right" style="padding: 0 0 5px 10px; float: right;"> </div> «Estaba ya cansado de, cada vez que necesitaba del código del <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">.clearfix</a> para incluirlo en una nueva hoja de estilos CSS, tenía que googlear y copiar-pegar desde <a href="http://www.positioniseverything.net/easyclearing.html" target="_blank">positioniseverything</a>… Entonces, luego de un día de investigación, ha surgido este widget. Muchas gracias a Apple por hacer la vida de todos más fácil… Sólo presiona el botón copy para hacer el código disponible en tu clipboard. Luego, pégalo en tu hoja de estilos favorita.» «I was sick and tired of, everytime I needed the <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">.clearfix</a> code to include it to a new CSS stylesheet, I had to google it and copy-paste from <a href="http://www.positioniseverything.net/easyclearing.html" target="_blank">positioniseverything</a>… So, after one day of investigation, this widget has emerged. Many thanx to Apple for making everyone’s life easier… Just press the copy button to make the code available in your clipboard. Then, paste it in your favorite stylesheet.» Como creo que mencioné hace algunos artículos, utilizo plataforma Macintosh desde siempre, diseñando y desarrollando web. Con MacOSX y el lanzamiento de <a href="http://www.apple.com/downloads/dashboard/" target="_blank">Dashboard</a>, fue cosa de tiempo para <a href="http://developer.apple.com/macosx/dashboard.html" target="_blank">hacer un widget</a> que me facilitara este pequeño problema que tenía con tener siempre a mano el código CSS para .clearfix. Gracias a <a href="http://www.estadobeta.com/" target="_blank">Ismael Celis</a> por darme una mano sobre el funcionamiento. Requerimientos: MacOSX con 10.4+ y <a href="http://www.apple.com/macosx/features/dashboard/" target="_blank">Dashboard</a> habilitado. <a href="https://csslab.cl/ejemplos/clearfix/clearfixv1.1.zip">Download .clearfix v1.1 Widget</a>{.bajar} Este widget ya está incluído en los <a href="http://www.apple.com/downloads/dashboard/developer/clearfix.html" target="_blank">downloads de Apple</a> Update to v1.1: clearfix con IE7 agregado <a href="http://www.estadobeta.com/2006/12/06/despejando-floats-para-ie7/" target="_blank">(estadobeta.com)</a>. </article> <article> <h1>Columnas de igual alto</h1> Fri, 02 Mar 2007 19:44:05 +0000 Hubo un tiempo en que esto me dió varias horas de preocupación, y muchas más de búsqueda por internet. Necesitaba construir un layout con 2 columnas (pueden ser 3 o más, da igual) pero que todas las columnas tuvieran el mismo alto, o por o menos que simularan tenerlo. Bien, pasado algún tiempo ya me río de la solución, pues ahora la hago en menos de 3 minutos. Con el siguiente ejemplo, aprovecharé de explicar también cómo crear un layout de 2 columnas, y que ambas colunas tengan (aparenten) tener el mismo alto. Primero que nada, comencemos a construir nuestro layout de 2 columnas. El <body> tendrá un <div> con id #menulateral y otro <div> con id #contenido. Dentro de cada <div>, los ítems del menú (en <ul>) y los del contenido (en este caso un texto simulado en ). <div id="menulateral"> <ul> <li><a href="#">Item Uno</a></li> <li><a href="#">Item Dos</a></li> <li><a href="#">Item Tres</a></li> </ul> </div> <div id="contenido"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipisc……… </div> La magia ocurre cuando aplicamos estilos a los <div>. Primero que nada, le doy un ancho a cada columna. Luego, estilo a sus elementos y para que se pongan uno al lado del otro, los flotamos ambos al mismo sentido con float: left. #menulateral { width: 150px; float: left; background: #F00; } #contenido { width: 450px; float: left; } <a href="https://csslab.cl/ejemplos/2columnas/2columnas.html" class="verejemplo" target="_blank">Ver este ejemplo</a> Bueno, ya tenemos el esqueleto. Pero ahora queremos que el fondo del menu lateral crezca junto con su contenido, para que se vea más uniforme. Para ello, utilizaremos la siguiente técnica: pondremos nuestros 2 <div>‘s en otro <div> llamado #contenedor, el que tendrá un ancho determinado, estará centrado en la horizontal y tendrá como background un GIF con el color que elegimos de fondo para #menulateral (este GIF será de 1px de alto por todo el ancho del <div> #contenedor, y se repetirá hacia abajo con background-repeat: repeat-y;). Así, cuando #contenido crezca lo que tenga adentro, hará crecer todo lo que tenga adentro, incluyendo el GIF con el fondo del #menulateral. Sigue el código HTML y luego el CSS: <div id="contenedor" class="clearfix"> <div id="menulateral"> <ul> <li><a href="#">Item Uno</a></li> <li><a href="#">Item Dos</a></li> <li><a href="#">Item Tres</a></li> </ul> </div> <div id="contenido"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipiscing……… </div> </div> #contenedor { width: 600px; background: url(imgs/fondo.gif) left top repeat-y; border: 1px solid red; margin: 10px auto; } #menulateral { width: 150px; float: left; } #contenido { width: 450px; float: left; } Por último, le agregué la class “clearfix” a #contenedor para que los <div>‘s crezcan junto al contenedor, tal como expliqué en el artículo <a href="http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/">Flotando en la Incertidumbre</a>. <a href="https://csslab.cl/ejemplos/2columnas/igualalto.html" class="verejemplo" target="_blank">Ver ejemplo final</a> </article> <article> <h1>SEO y la web semántica</h1> Fri, 23 Feb 2007 20:06:45 +0000 Muy seguido la gente me pregunta sobre cómo hacer que sus sitios aparezcan en los buscadores en los primeros lugares. No existe el santo grial para esto. No existe un botón que lo haga posible. Cada buscador tiene su lógica de indexar sitios, y de agregarle la relevancia que hace que tu información salga en la página 1 o en la oooooooooooooooooooogle. En Chile por lo menos, Google es el que reina entre los buscadores de contenidos Internet. Y el que la gente tiene más interés por salir bien posicionado. SEO (Search Engine Optimization) es una técnica que debieran manejar todos los webmasters, diseñadores y desarrolladores de sitios web. Corresponden a una serie de consejos que mejoran y facilitan que los buscadores indexen nuestros sitios, cataloguen la información y la muestren coorrepondientemente a lo que queremos ser mostrados. ¿Y porqué me tomo el tiempo para escribir sobre esto en CSSLab? Bueno, uno para que me dejen de preguntar. Paso el link y listo. Dos, porque el uso de XHTML y CSS está directamente relacionado, y tiene gran influencia sobre el tema. Entendamos cómo funciona en parte el sistema de indexación de Google. La gran revolución que se creó en el medio de búsqueda de contenidos por y para Internet, fue por cómo Google trataba en cuanto a relevancia la información que desplegaba en sus resultados de búsqueda. Mientras Altavista y Yahoo! se esforzaban en mostrar la mayor cantidad de resultados relacionados posible, a Google le interesaba mostrar el mejor y más preciso de acuerdo a los criterios ingresados por el usuario primero. Para esto, utilizaron la lógica que se usa hasta hoy en los textos bibliográficos. Mientras más referencia tenga un libro en otros libros (citas o referencias bibliográficas), eso se traduce en que es un mejor libro sobre el tema que trata. Aplicado a la web, mientras más links externos digiridos a tal o cual sitio, eso quiere decir que la información que se muestra es importante. Si “Televidores Plasma Sony” está linkeado en (por ejemplo) 1.000.000 de sitios, y “Televisores Plasma Sharp” en 200.000, Sony aparece primero que en los resultados de búsqueda de Google. Parece muy lógico, ¿no?. Pues bien, con los años los ingenieros de Google han variado bastante sus mecanismos de búsquedas y de indexación de sitios y páginas web. <a href="http://es.wikipedia.org/wiki/Pagerank" target="_blank">PageRank</a>, que es el algoritmo que maneja estos factores de criterios, ha sido renovado no pocas veces. Ahora, a lo nuestro. Un criterio importante al momento de ser indexado por los buscadores, se refiere a cómo está construído nuestro sitio web. Un código limpio y semántico, muestra la información ordenada, clara y con los significados que implican cada etiqueta HTML, lo que es leído por los spiders e interpretado correctamente. CSS ayuda a que esta información se presente con un estilo adecuado, atractivo, y aporta algunas técnicas que facilitan la diagramación del sitio web. Otros criterios a tomar en cuenta al construir tu sitio web, responde al uso de un tag HTML: <a href="http://es.wikipedia.org/wiki/Metatag" target="_blank">META</a>. Esta etiqueta que se ubica en el <head> del código HTML, y aporta una descripción sobre el sitio y palabras claves que relacionadas con nuestra información (entre otras propiedades). A continuación los META tags que debería agregar en CSSLab luego: <META NAME="description" CONTENT="Un laboratorio de ideas web"> <META NAME="keywords" CONTENT="CSS, XHTML, HTML, sitios web, websites, semántica, javascript, AJAX, recursos web"> Bien, espero haya quedado claro. Ya saben por dónde comenzar a hacer bien las cosas. Link <ul> <li><a href="http://www.hispamedios.com/articles/id27-pagerank" target="_blank">PageRank</a></li> <li><a href="http://www.submit-it.com/subopt.htm" target="_blank">Search Engine Optimization Tips</a></li> </ul> </article> <article> <h1>Agregando movimiento vía JavaScript</h1> Tue, 13 Feb 2007 21:22:58 +0000 Más de alguna vez me han preguntado cómo funciona el menu superior que comanda este sitio. Ese movimiento de la etiqueta que de tan fluído parece ser Flash. Bueno, para eso se utiliza una librería JavaScript gratuita llamada <a href="http://script.aculo.us/" target="_blank">script.aculo.us</a>, la que a través de un simple comando y fácil configuración permite ese y <a href="http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo" target="_blank">otros muchos interesantes efectos</a>. Existen algunas otras librerías, también gratis que hacen lo mismo. Tal es el caso de <a href="http://mootools.net/" target="_blank">mootools</a>, <a href="http://jquery.com/" target="_blank">jquery</a> o <a href="http://simplejs.bleebot.com/">simpleJs</a>. Es desición de cada uno cuál utilizar. Bien, para el ejemplo específico del efecto del menú de este sitio, se utilizó Effect.toggle(), el que permite con un sólo onclick() (en un <a>, , etc) mostrar y esconder el div con el id que necesitamos. En el fondo se trata de eso, tenemos un div, le damos un id específico y único, el que a través del onclick le decimos que muestre ese div si está escondido, o que lo esconda si está visible. Para que el div esté escondido desde un inicio, le damos un display: none; en el mismo HTML o en una hoja de estilos externa, como prefieras. Como la mayoría de las veces, muestro un ejemplo visual y código utilizado explicado. Primero, el código HTML: <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><a onclick="new Effect.toggle($('#cajatexto').blind())">Mostrar y Esconder Texto</a> <div id="cajatexto" style="display: none;"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris eget ante. Integer sollicitudin urna eget est. Phasellus pharetra rutrum erat. Phasellus non augue et sapien nonummy……………..</p> </div> </code></pre></div>Fijarse que al onclick se le agregó el id cajatexto, al igual que el div que queremos que se vea el efecto aplicado. <a href="https://csslab.cl/ejemplos/scriptaculous/index.html" target="_blank">Ver ejemplo </a> Debemos agregar 2 scripts a la página que queremos que ocurra el efecto: prototype.js y scriptaculous.js (en ese mismo orden). <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><script src="include/prototype.js" type="text/javascript"></script> <script src="include/scriptaculous.js" type="text/javascript"></script> </code></pre></div>Como dije, <a href="http://script.aculo.us/" target="_blank">script.aculo.us</a> ofrece muchas más funcionalidades, además de efectos. Chequeen su sitio para más información. </article> <article> <h1>Lo ví y me gustó 18</h1> Mon, 12 Feb 2007 13:39:00 +0000 #18 – 12 Febrero 2007 <a href="http://www.extendio.ro/" target="_blank"></a> <a href="http://intensify.org/" target="_blank"></a> </article> <article> <h1>Transparencias a prueba de browsers</h1> Wed, 24 Jan 2007 17:12:19 +0000 Hasta no hace poco, para lograr transparencias en imágenes para web, el método era exclusivamente hacerlo con un SWF. Con la masificación del PNG, esto se ha hecho más fácil y el resultado es bastante satisfactorio (no como esos horrendos bordes dentados de los eternos GIF), pero lo complementaremos bastante con el uso de CSS. <h3 id="propiedades-del-browser">Propiedades del browser</h3> Cada browser tiene su propio método de aplicar opacidad a las imágenes. CSS ha implementado 3 diferentes propiedades que afectan la transparencia de un elemento: <ul> <li>opacity: con valores decimales entre 0 (invisible) y 1 (sólido). (CSS3) <ul> <li>moz-opacity: también con valores decimales entre 0 y 1. (Firefox)</li> <li>filter: es una propiedad de IE (5.5+) el cual trae varios efectos (degradaciones, desenfocado, sombras, etc). Para lograr la transparencia se ocupa el filtro alpha, con valores entre 0 y 100.</li> </ul> </li> </ul> Al declarar las 3 propiedades juntas mediante CSS y con el mismo valor de opacidad, podrás tener una transparencia a prueba de browsers: #elementotransparente { opacity: 0.4; -moz-opacity: 0.4; filter: alpha(opacity=40); } Y utilizando comentario condicional para IE (recomendable): <style type=“text/css”> #elementotransparente { opacity: 0.4; -moz-opacity: 0.4; } </style> <!—[if IE]> <style type=“text/css”> #elementotransparente { filter: alpha(opacity=40); } </style> <![endif]—> <a href="https://csslab.cl/ejemplos/transparencia.html" class="verejemplo" target="_blank">Ver ejemplo</a> La transparencia la puedes aplicar en bloques (un div por ejemplo) o a elementos individuales (imágenes, textos). Importante es considerar el nivel de lectura, si quieres darle transparencia a bloques de texto, por ejemplo. Por último, ninguno de estas 3 propiedades validarán por la <a href="(http://jigsaw.w3.org/css-validator/" target="_blank">W3C</a>. Depende de tí si es importante que tu hoja de estilos valide. Probado en: Safari, IE6, IE7, Opera9, FF 1.5.3+ <h3 id="links">Links:</h3> <ul> <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/filter.asp" target="_blank">IE Filter</a></li> <li><a href="http://developer.mozilla.org/en/docs/CSS:-moz-opacity" target="_blank">Opacidad de Mozilla</a></li> <li><a href="http://www.w3.org/TR/css3-color/#transparency" target="_blank">Opacidad de CSS3</a></li> </ul> </article> <article> <h1>Centrado Vertical con CSS (actualizado)</h1> Fri, 12 Jan 2007 20:10:49 +0000 <a href="#actualizado">(Ver actualización)</a> Una buena razón por lo que muchas personas defienden el uso de tablas para la diagramación de contenidos de un sitio web, es porque éstas permiten el correcto centrado horizontal y vertical de los elementos contenidos dentro de sus celdas. La propiedad vertical-align no es soportada por los browsers actuales, y va a ser lanzada con <a href="http://www.w3.org/TR/css3-roadmap/" target="_blank">CSS3.0</a> (junto con muchas otras bien interesantes). Pues, a continuación les presentaré un método donde se utiliza efectivamente vertical-align, junto a un atributo poco utilizado de display y un hack para IE, como siempre necesario. Antes que nada, necesitamos que nuestra superficie esté definida, en este caso al 100% de la pantalla (sin scroll). Esto lo logramos con height: 100% en 2 partes: el html y el contenedor de lo que queremos mostrar: <pre><code class="language-css">html, body { margin: 0; padding: 0; height: 100%; } #container { display: table; height: 100%; width: 100%; margin: 0; }</code></pre> Nuestro poco utilizado display: table; lo que hace es dejar nuestro #container compacto, tal como nuesto viejo amigo ** <table> </table> . Dentro de #content puedes encontrar display: table-cell; que se comporta tal como una celda dentro de una tabla (en este caso, #content sería una celda dentro de la tabla #container). Y es por este comportamiento de tablas que vertical-align entra en acción: <pre><code class="language-css">#content { display: table-cell; vertical-align: middle; position: relative; }</code></pre> Para finalizar el hack para IE, donde se centra #container pero con porcentajes: <pre><code class="language-css">/* \*/ * html #content { top: 50%; left: 0; height: 1px; }</code></pre> <pre><code class="language-css">* html #content #inner { position: relative; top: -50%; } /* */</code></pre> <a href="https://csslab.cl/ejemplos/verticalalign.html">Ver código funcionando</a>{.verejemplo} <a name="actualizado"> <h3> Actualización: </h3> </a> Dado la llegada de IE7, a través de comentarios en este artículo (a los cuales les agradezco mucho su preocupación) me hicieron saber que este método de centrado vertical no funcionaba correctamente en este browser. Por lo tanto, investigando, me topé con un mejor método, que con los que he probado funciona a la perfección. <a href="https://csslab.cl/ejemplos/centradovertical2.html" class="verejemplo">Ver código 2 funcionando</a> Más sobre display: <ul> <li> <a href="http://www.quirksmode.org/css/display.html" target="_blank">Quirksmode: the display declaration</a> </li> <li> <a href="http://www.positioniseverything.net/explorer.html" target="_blank">The weird and wonderful world of Internet Explorer </a> </li> </ul> Gracias a <a href="http://www.456bereastreet.com/lab/" target="_blank">456bereastreet</a>. </article> <article> <h1>Lo ví y me gustó 17</h1> Fri, 29 Dec 2006 15:28:14 +0000 #17 – 29 Diciembre 2006 <a href="http://www.hopkingdesign.com/" target="_blank"></a> <a href="http://www.danielevsilva.com/" target="_blank"></a> <a href="http://www.ddac.com.ar/" target="_blank"></a> </article> <article> <h1>Ahorrando hasta en código</h1> Thu, 21 Dec 2006 19:25:24 +0000 En la sintaxis de definiciones de CSS, es posible resumir algunas propiedades (tags), lo que nos da una gran ventaja ahorrándonos líneas de código, lo que a la larga hace que nuestra hoja de estilos pese bastante menos. Con esto también logramos que nuestro código sea más entendible, ya que juntamos en una sóla línea varios parámetros que pueden estar esparcidos en el mismo o varias classes e ID‘s. El orden y los parámetros de cada propiedad no son obligatorios respetarlos literalmente, pero recomiendo que por lo menos sigan ese mismo orden. Por experiencia propia… <h3 id="font">Font:</h3> font-style || font-variant || font-weight || font-size / line-height || familia de fuente span.destacado {font: italic normal bold 14pt Verdana, Tahoma, Arial;} <h3 id="background">Background:</h3> background-color || background-image || background-repeat || background-attachment || background-position body {background: #F00 url(../fondo.gif) repeat-y right left ;} <h3 id="margin">Margin:</h3> longitud | porcentaje | auto #contenedor {margin: 15px;} /* todos los márgenes con 15px */ p {margin: 12px 8px;} /* márgenes superior e inferior con 12px, márgenes izquierdo y derecho con 8px */ ul {margin: 5px 2px 0 4px;} /* sentiro horario desde arriba: margen superior a 1px, derecha a 2px, abajo con 0px e izquierdo con 4px */ <h3 id="padding">Padding:</h3> longitud | porcentaje | auto div#contenido {padding: 5em 1em;} <h3 id="border">Border:</h3> border-width || border-style || color h1 {border: 2px dotted red;} </article> <article> <h1>Como Caja: el modelo</h1> Thu, 14 Dec 2006 16:46:59 +0000 Un problemón de quien pretende entender esto del diseño con hojas de estilos, llega al momento de construir el layout y que todos los elementos se queden donde deberían estar, posicionándolos, flotándolos, como mejor se prefiera. Margin, padding, border y width dentro de un div suelen causar grandes conflictos, los que se explican en el <a href="http://www.w3.org/TR/REC-CSS2/box.html" target="_blank">Modelo de Caja de CSS</a>, al cual describe las cajas rectangulares que son generadas por los elementos de la estructura del documento. Comencemos con esto. <h3 id="dimensiones-de-la-caja">Dimensiones de la caja:</h3> Cada caja tiene un área de contenido (texto, imagen, ambos, ninguno) y las áreas que la circundan, como padding, margin y border; el tamaño de cada propiedad puede ser especificado al momento de construir y darle estilo a esos elementos. En el siguiente dibujo se muestran esas áreas y cómo se comportan. <div align="center" style="margin: 10px 0;"> </div> Cuando tenemos un div de ancho fijo, digamos como en el ejemplo de 300px, al agregarle un padding de 10px a ese mismo div, ese padding hace que el div gane 10px más en su ancho (claro que en el alto también, pero en este momento estamos centrándonos en el ancho exclusivamente); nuestro div ahora mide 320px (ganamos 10px por lado). Con el margin ocurre lo mismo, al agregarle 20px de margin, ganamos 40px en nuestro div (20px por lado), el que mide ahora 360px. Si además, nuestro div tiene un border de 1px, ese borde también se suma al ancho de nuestro ya deformado div, midiendo finalmente 362px. Finalmente, podemos afirmar que el ancho (y alto) de la caja está determinado por la suma de márgenes, bordes y rellenos (padding). <h3 id="iquesty-queacute-hacer">¿Y qué hacer?</h3> No es nada del otro mundo, Existen varias fórmulas para enfrentar este pequeño detalle (que no es defecto) de las dimensiones del div. Primero que nada, y como regla, es utilizar el reseteador universal en tu hoja de estilos, antes que nada: <pre><code class="language-css">* { margin: 0; padding: 0; }</code></pre> Así, los márgenes y rellenos (así como todos los elementos HTML) tienen por defecto margin y padding 0, anulando la diferencia de esta propiedad entre browsers (IE dista mucho de Firefox, y de Safari, y de Opera), logrando una igualdad. Otra, es nunca darle ancho fijo a los div’s, sólo a sus contenedores externos. En el caso de darle un ancho fijo al div, se recomienda no darle padding al div, sino a los elementos que están contenidos dentro de él, por ejemplo, a un o a un . Así, evitamos que nuestro div se deforme sin que lo podamos controlar. Son pequeñas mañas, de las que te acostumbras y que hacen que nuestro diseño se vea igual entre browsers y plataformas. <a href="https://csslab.cl/ejemplos/modelocaja/index.html" target="_blank" class="verejemplo">Ver ejemplo en HTML</a> </article> <article> <h1>Recursos Gráficos</h1> Tue, 05 Dec 2006 15:50:17 +0000 Llega el momento de diseñar un sitio. Estás todo inspirado. comienzas el layout, Photoshop, Fireworks a mano. Pero luego comienzan las trabas. Necesitas un logo vectorizado, por último un JPG. Y el que tienen en su sitio es un GIF transparente del tamaño de un alfiler. Estás maqueteando, y de repente no tienes una imagen de un edificio, un paisaje, una flor, una familia… Tus CD’s de banco de fotos no dan a basto ya. Para qué hablar de tu catálogo tipográfico. Pero con Internet como co-piloto, tienes muchas chances de encontrar lo que necesites, en poco tiempo y de gran calidad. Entregaré unos links muy útiles para el diseñador al momento de requerir recursos gráficos gratuitos (no queremos infrigir ningún Copyright) y de muy buena calidad. Directo a tus Bookmarks: <h3 id="logos-vectorizados">Logos Vectorizados:</h3> <ul> <li>En <a href="http://www.brandsoftheworld.com/" target="_blank">Brands of the World</a> encontrarás una gran cantidad de logotipos, isotipos vectorizados, en formato EPS y por lo tanto de gran calidad.</li> <li>Si estás en Chile, <a href="http://www.logoteca.cl/">Logoteca</a> puedes encontrar muchas marcas nacionales y extranjeras, subidas por los mismos usuarios (registro necesario).</li> </ul> <h3 id="tipografiacuteas">Tipografías:</h3> <ul> <li><a href="http://www.dafont.com/" target="_blank">Da Font</a> es un referente al momento de buscar fuentes digitales. Muy bien ordenados y catalogados, este sitio te da la posibilidad de previsualizar la tipografía con el texto que ingreses.</li> <li>Si quieres saber qué tipografía corresponde tal o cual isotipo, o con qué tipo escribieron un slogan, <a href="http://www.myfonts.com/WhatTheFont/" target="_blank">What The Font</a> te permite subir un archivo de imagen con el texto de la discordia, y el sistema trata de adivinar a qué tipo de texto corresponde. Muy útil.</li> <li><a href="http://neatfonts.com/" target="_blank">NeatFonts</a> también te ofrece un amplio catálogo de fuentes para lo que estimes conveniente.</li> </ul> <h3 id="iacuteconos">Íconos:</h3> <ul> <li>Para qué gastar tiempo haciendo cada ícono, bullet en ese sitio, si ya existen listos, y gratis. <a href="http://www.famfamfam.com/lab/icons/" target="_blank">FAMFAMFAM</a> ofrece uno de los mejores, junto con el amplio catálogo de <a href="http://www.maxpower.ca/free-icons/2006/03/05/" target="_blank">Max Power</a>.</li> </ul> <h3 id="lorem-ipsum">Lorem Ipsum:</h3> <ul> <li>Texto simulado para llenar esas cajas de texto, la mejor opción: <a href="http://www.lipsum.com/">Lorem Ipsum</a>.</li> </ul> <h3 id="fotos-gratis">Fotos Gratis:</h3> <ul> <li>250.000 imágenes en alta resolución, la gran mayoría gratuitas para que puedan ser utilizadas en lo que se te ocurra, sin pagar derechos. <a href="http://www.sxc.hu/" target="_blank">Stock.xchng</a> es un sitio colaborativo que se construye a través de imágenes subidas por sus mismos usuarios.</li> </ul> <h3 id="pruebas-en-browsers">Pruebas en Browsers:</h3> <ul> <li>Todo sitio XHTML debería ser probado en la mayor cantidad de browsers disponibles. El problema es que en la mayoría de las veces, no los tenemos a disposición. <a href="http://browsershots.org/" target="_blank">Browser Shots</a> hace este trabajo por tí, con sólo enviarles la URL donde se aloja tu sitio.</li> </ul> </article> <article> <h1>Ordenando Listas</h1> Fri, 24 Nov 2006 19:11:13 +0000 Ha resultado ser un extenso tópico el asunto de las listas. Mucho hay de qué hablar, y mucho por complementar. En esta ocasión, desenterraré varias propiedades HTML que se han dejado de utilizar por diferentes razones, pero que aún resultan esenciales para el desarrollo semántico y la presentación de contenidos. En muchas de ellas podremos utilizar CSS para ampliar su configuración. UL es archi-conocido y ampliamente utilizado en este mismo sitio. Por eso, recurriré esta vez a OL: Ordered Lists. Corresponden a listas donde el orden de los elementos se realiza automática y secuencialmente, pero donde tenemos la oportunidad de manejar algunas de ellas a través de un par de atributos. Su forma de construcción es similar a los UL (Unordered Lists): <ol> <li>Item Uno</li> <li>Item Dos</li> <li>Item Tres</li> <li>Item Cuatro</li> <li>Item Cinco</li> </ol> <a href="https://csslab.cl/ejemplos/ol/ol.html" class="verejemplo" target="_blank">Ver este ejemplo</a> Como podrán ver, automáticamente se agregan antes de cada ítem un número, ordenando los elementos desde el 1 y consecutivamente. Algunas cosas que podemos modificar mediante atributos son: type: podemos definir si las listas se ordenan por números, letras alfabéticamentes, incluso números romanos (mayúsculas y minúsculas): <ol type="I"> <li>Item Uno</li> <li>Item Dos</li> <li>Item Tres</li> </ol> <a href="https://csslab.cl/ejemplos/ol/ol_i.html" class="verejemplo" target="_blank">Ver este ejemplo</a> start: este atributo nos permite definir desde qué número se comenzará a contar la lista (lamentablemente, no soportado por Safari 2): <ol start="1354"> <li>Item Uno</li> <li>Item Dos</li> <li>Item Tres</li> </ol> <a href="https://csslab.cl/ejemplos/ol/ol_1354.html" class="verejemplo" target="_blank">Ver este ejemplo</a> Bueno, a través del CSS podemos ampliar el abanico de atributos, donde CSS2.01 nos entrega varias opciones de desplegar el tipo de bullet que más nos acomode, por mera estética, o por necesidad. Veamos un ejemplo de su aplicación: ol { list-style-type: decimal-leading-zero; } Aquí, podremos ver cómo los números anteriores a 10 se muestran antecedidos por un 0. <a href="https://csslab.cl/ejemplos/ol/ol_cero.html" class="verejemplo" target="_blank">Ver este ejemplo </a> Algunas otras no muy utilizadas (quizas sí en otros continentes) las incluyo <a href="https://csslab.cl/ejemplos/ol/ol_otros.html" target="_blank">en la siguiente página</a>, junto con su ejemplo gráfico. Quizás no puedan visualizarse en algunos browsers, y algunas plataformas, ya que no disponen de la tipografía necesaria para el idioma específico. Recuerdo haber visto tantos sitios construídos con tablas utilizando celdas para hacer esto mismo… Para qué complicarse me pregunto yo. </article> <article> <h1>Más estilos a las listas</h1> Tue, 14 Nov 2006 15:17:25 +0000 Listas de elementos suelen ser cansativas, tediosas de leer. Aunque CSS te entrega varios diseños para variar el típico bullet circular, también te entrega la posibilidad de utilizar una imagen (generalmente un GIF muy liviano, no más de un par de KB) para reemplazarla. Pero el ingenio de alguien que tuvo suficiente tiempo también permite que regules, por ejemplo, el padding entre el bullet y el texto soportado por éste. Mostraré 2 técnicas para que reemplaces el bullet por una imagen determinada. Dependerá de tí cuál técnica utilizar: Comenzamos con el HTML de una típica lista con unos 5 elementos: <ul id="listacompras"> <li><a href="#">Arroz</a></li> <li><a href="#">Azúcar</a></li> <li><a href="#">Shampoo</a></li> <li><a href="#">Cerveza</a></li> <li><a href="#">Hongo Alucinógeno</a></li> </ul>  La primera técnica es muy básica y aprovecha la propiedad CSS para listas list-style-image: url(); donde linkeas la imagen que hayas creado para esto: ul#listacompras1 { list-style: none; } ul#listacompras1 li { list-style-image: url(imagenes/bullet_valido.gif); } Ya la segunda, la idea al igual que en la anterior es sacar el bullet con list-style: none; para luego agregar la imagen como fondo del ítem de lista (background-image), posicionarla si se requiere (background-position) y algo muy importante, especificar que ese fondo no debe repetirse (background-repeat: no-repeat;). Creo pertinente dejar claro (no recuerdo si lo mencione antes) que, a diferencia de la definición de margin y padding, los valores de background-position comienzan desde la izquierda-arriba-derecha-abajo. Por ejemplo: background-position: right top; (se alineará a la derecha y arriba) background-position: 5px 0; (estará a 5px de la izquierda pero pegado al margen superior) Segunda técnica, donde tienes más control en el posicionamiento de la imagen: #listacompras2 { padding-left: 10px; list-style: none; } #listacompras2 li { padding-left: 20px; background-image: url(imagenes/bullet_flecha.gif); background-repeat: no-repeat; background-position: 0 0; } <a href="https://csslab.cl/ejemplos/bullet/index.html" target="_blank">Ver ejemplo de ambas listas</a> </article> <article> <h1>¡Aaaaabajo!</h1> Mon, 06 Nov 2006 21:10:13 +0000 Los pies de página, o footers como prefiero llamarlos, han demostrado ser un importante factor gráfico a la hora de armar sitios web, o más comúnmente, blogs. Puedes dejar estampado los derechos reservados de tu sitio, si valida, si no valida, una firma, una forma, algo importante y que debería siempre estar presente, después de todo el contenido. Existen varias formas de construirlo, aquí demuestro una bastante ingeniosa que no deja de ser interesante tener en cuenta. El código completo podrán digerirlo en la página misma de ejemplo, pero quiero hacer hincapié en 2 elementos importantes y que marcan la diferenciación de esta técnica: <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css">/* hacks varios, adivinen para q browser… */ html, body, #contenedor { min-height: 100%; /* alto minimo FF y Safari */ width: 100%; height: 100%; /* alto minimo para IE Windows */ margin: 0; padding: 0; } html > body #contenedor { height: auto; /* con este hack escondemos el min-height de IE*/ } /* fin hacks varios */ </code></pre></div>Estos hacks fueron necesarios a la hora de que IE6 hiciera caso al alto de la ventana total del browser, dado que no soporta la propiedad min-height. Es un pequeño truco que resulta para suplir esta falencia. Se supone que estará solucionado en IE7. <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css">#footer { position: absolute; bottom: 0; width: 80%; margin-left: 10%; font-size: 11px; font-weight: bold; color: #C00; text-align: center; } </code></pre></div>Esta es la otra parte crucial del código. Aquí, se le dice al div footer que se quede pegado al borde inferior del browser (bottom: 0;), posicionado absolutamente. El resto, mera estética. <blockquote> <a href="https://csslab.cl/ejemplos/footer.html" target="_blank" class="verejemplo">Ver ejemplo</a> </blockquote> Pueden escalar la ventana de su browser para comprobar que realmente el footer permanece por debajo de todo el contenido. Probado en IE6, Safari, Firefox, Opera. </article> <article> <h1>Feliz Aniversario CSSLab</h1> Sat, 04 Nov 2006 13:46:15 +0000 Ya va 1 año desde que este proyecto se concretó, y se publicó el <a href="http://www.csslab.cl/2005/11/04/bienvenidos/">primer post</a>. Mucho ha pasado, pero sólo 2 templates han existido (lo que es curioso ya que no suelo quedarme tranquilo con los diseños que hago para mí). Agradezco a todos quienes me han ayudado a que esto salga adelante, a todos quienes leen esto y principalmente quienes comentan ya que lo más importante es su feedback. Últimamente no he tenido mucho tiempo para publicar artículos, lo que pretendo retomar lo antes posible. Lo que sí tengo para contarles es que estoy comenzando a escribir un libro, un libro sobre tendencias web y diseño y construcción de sitios web semánticos. El título aún es tentativo, prefiero no darlo aún ya que tengo varias opciones. Estará por supuesto en español dado el escaso contenido bibliográfico de este tema en nuestro idioma. Creo que será un gran apoyo para muchos, además de lo que ya suelo publicar aquí, lo que se verá complementado. Pienso venderlo aquí en este mismo sitio, por capítulos, en un formato a definir (PDF casi seguro) a un precio módico (unos pocos dólares), por capítulos y vía Paypal (así, compras sólo el capítulo que te interesa, o si quieres compras el libro completo también a un precio amigo). Felicidades CSSLab! </article> <article> <h1>Con más clase</h1> Fri, 03 Nov 2006 19:30:51 +0000 A partir de CSS2, se puede agregar más de una clase a un selector. Basta con separarlos con un espacio dentro del class de esta manera: class=“rojo bold”. Veamos un ejemplo muuuuuy simple. A continuación, dos estilos para un mismo texto: <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"> .rojo {<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #F00;<br /> }<br /> .bold {<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: bolder;<br /> } </code></pre></div><blockquote> <a href="https://csslab.cl/ejemplos/2clases.html" target="_blank">Ver ambas clases en un mismo tag .</a>**** </blockquote> Un detalle muy importante. Si ambas clases coinciden en uno o más atributos, la última clase mencionada en class="" es la que primará. Por ejemplo, digamos que ambas clases de class=“grande chico” tienen font-size: pero .grande es de 24px y .chico 11px; en este caso el selector será de 11 pixeles. Otro detalle a considerar, es que esto no es muy soportado en browsers antiguos. Pero bueno, mejor que se actualicen. </article> <article> <h1>Lo ví y me gustó 16</h1> Mon, 16 Oct 2006 18:07:05 +0000 #16 – 16 Octubre 2006 <a href="http://www.verdurethought.com/" target="_blank"></a> <a href="http://www.aymara.com.br/" target="_blank"></a> </article> <article> <h1>Formularios Semánticos: el regreso</h1> Fri, 13 Oct 2006 18:29:03 +0000 En una oportunidad previa, mostré una técnica para <a href="http://www.csslab.cl/?p=11">construir formularios tableless</a>, o sea, sin las famosas tablas que tanto nos ayudaron hace algún tiempo. Sin div’s, solamente label e input fueron necesarios. Bien, en esta ocasión, seguiré con este apasionante e intrigante tema, pero se motrarán 2 variaciones del mismo formulario, pero con diferentes diseños. Dependiendo de tus necesidades, más de alguno puede servirte. El concepto de hoy: <a href="http://www.csslab.cl/?p=49">construir semánticamente</a> (hacerlo accesible a los browsers y que sean relevantes para los buscadores, <a href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10" target="_blank">tal como lo recomienda la W3C</a>). La clave está en 3 tags: fieldset, legend y label. <ul> <li>La etiqueta fieldset permite agrupar controles y etiquetas que estén relacionados, haciendo que el formulario sea más comprensible para los usuarios desde un punto de vista visual y conceptual, a la vez que incrementa la usabilidad y la accesibilidad, ya que estos campos podrían ser utilizados al realizar saltos entre campos con la tecla tab o interpretados por navegadores que incorporen funciones de generación de voz (recuerden, <a href="http://www.csslab.cl/?p=54">accesibilidad a discapacitados</a>). <ul> <li>La etiqueta legend permite asignar un título a un fieldset, aumentando los valores de usabilidad y accesibilidad.</li> <li>La etiqueta label sirve para representar el texto asociado a controles que no tienen implícitamente un valor de texto. Los controles que no tienen labels implícitos, como los campos de texto, radios o checkboxes por ejemplo, pueden utilizar etiquetas label para indicar el texto que les corresponde.</li> </ul> </li> </ul> La forma de diseñar un formulario correctamente, es la siguiente: <pre><code class="language-markup"><form> <fieldset> <legend>Título del Form</legend> <label>Nombre input: <input name="" type=""/></label> </fieldset> </form></code></pre> Ahora puedes darle el estilo que quieras a las etiquetas, o tags, logrando el diseño que estimes adecuado para tu proyecto web. Nótese que el fieldset, por defecto, agrupa visualmente todo lo que contiene, con un borde gris contínuo. Esto suele utilizarse con fines estéticos, lo que puede quitarse fácilmente con un border: none; Otro detalle es que si no deseas que tu formulario tenga un título en legend, basta con darle la propiedad display:none; en tu hoja de estilos. Pero es importante tenerla siempre en tu HTML con el texto correspondiente, sólo que no se desplegará. Formulario Vertical: es el clásico formulario encontrado en miles de millones de sitios. Nada de otro mundo, pero esta vez estará bien construído. <a href="https://csslab.cl/ejemplos/form/formulariosemantico.html" class="verejemplo" target="_blank">Ver ejemplo formulario vertical.</a> Formulario Horizontal: este tipo de formulario no es muy común de verse, salvo en barras de logueo horizontales. El botón de Enviar puede estar al lado de los elementos, o bajo ellos, según se prefiera (basta quitar el que lo antecede). En este caso, el secreto está en flotar los labels a la izquierda, cosa que cada nuevo campo de texto se vaya poniendo al lado derecho del anterior. Véase el código fuente para hacerse la idea. <a href="https://csslab.cl/ejemplos/form/formulariosemanticohoriz.html" class="verejemplo" target="_blank">Ver ejemplo formulario horizontal.</a> Dudas, consultas y sugerencias, ya saben. Comenten. </article> <article> <h1>Vuelta a la vida</h1> Thu, 12 Oct 2006 22:22:55 +0000 Con nuevo y mejor server, CSSLab vuelve al combate. Aún ajustaré unos plugins y acomodaré unas tablas del DB, pero en general está todo bien, creo. Cualquier problema grave, háganmelo saber en este post. Gracias! pd. Los <a href="https://csslab.cl/foros/">foros</a> no pude volver a instalar Vanilla, pero phpBB está funcionando. lamentablemente se perdieron todo lo que había antes… registros, temas, preguntas y respuestas. Tendrán que volver a <a href="http://www.csslab.cl/foros/profile.php?mode=register&sid=cd64499bbe5303ce3b81133892d7b9cf">registrarse</a> para darle un nuevo uso a los <a href="https://csslab.cl/foros/">foros</a>. Gracias por entender. </article> <article> <h1>Layout fijo a elástico en sólo 4 caracteres</h1> Thu, 05 Oct 2006 16:18:07 +0000 Un layout fijo puede ser más fácil de construir para algunos, ya que todos los elementos están ordenadamente dispuestos, cada uno con su ancho fijo. Reseteando el margin y padding al principio de todos los tags, torna más fácil lograr una hegemonía entre browsers: <pre class="codecss">* { margin: 0; padding: 0; }</pre> Mostraré una técnica bastante simple de diagramar un sitio utilizando CSS, de manera que hacerlo fijo o elástico (líquido le suelen llamar algunos) sea cosa de cambiar 4 caracteres en tu hoja de estilos. De un principio: Comenzaremos a diagramar un sitio de 3 columnas, 2 laterales (menú izquierdo y publicidad derecha) y al medio el contenido; header y footer también van, claro. La manera de hacerlo es siempre comenzar de arriba hacia abajo (header, columnas, contenido, footer) y tener en el HTML primero ambas columnas, antes que el contenido mismo. Así, ambas columnas tendrán un ancho fijo (no queremos que nuestro menú quede flotando si la resolución del computador es mayor, tampoco la publicidad que son usualmente imágenes de ancho fijo, o GoogleAds) y el contenido será el que crezca en el caso de una mayor o menor resolución, al igual que el header y el footer. Para esto hay que tener preparado una imagen de fondo que crezca si es necesario (background-repeat: repeat-x; si este fuera el caso). Todo esto va enmarcado por un DIV contenedor, el que tendrá un width definido en pixeles para el layout fijo (y centrado con margin: 0 auto;), y basta con eliminar este ancho para el sitio verse elástico, o líquido. Recuerda, sólo 4 caracteres para cambiar esta característica. Creo que quedó bien explicada la intención, aquí va el HTML primero (resumido): <div id="contenedor"> <div id="header">Titulo del Sitio</div> <div id="menu">Menu Izquierdo</div> <div id="publicidad">Publicidad</div> <div id="contenido"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque aliquet………. </div> <div id="footer">Copyleft</div> </div> y el CSS que lo mostrará de ancho fijo: <pre class="codecss">div#contenedor { width: 750px; margin: 0 auto; border: 1px solid #333; } div#header, div#footer { height: 100px; clear: both; background-color: #333; color: #F90; font-size: 14px; font-weight: bolder; } div#footer { height: 30px; } div#menu, div#publicidad { width: 160px; border: 1px solid #F90; } div#menu { float: left; } div#publicidad { float: right; } div#contenido { margin: 0 170px; }</pre> <a href="https://csslab.cl/ejemplos/layout/layoutfijo.html" class="verejemplo" target="_blank">Ver ejemplo de Layout Fijo</a> Ahora, la idea es no tocar el HTML. Si el cliente se le ocurrió que el sitio debiera adaptarse a la resolución del monitor del usuario, no debieras tener tiempo siquiera para preocuparte. Basta con comentar el width: 750px; y verás de inmediato la transformación: <pre class="codecss">div#contenedor { /* width: 750px; */ margin: 0 auto; border: 1px solid #333; }</pre> <a href="https://csslab.cl/ejemplos/layout/layoutelastico.html" class="verejemplo" target="_blank">Ver ejemplo de Layout Elástico</a> (view source para ver el HTML y el CSS completo) El secreto está en saber cómo diagramar bien un sitio, cómo comenzar a ver la estructura del mismo para que posibles cambios posteriores sean lo menos doloroso, y que quiten el menos tiempo posible. Adelantarse a lo impredecible. Espero haya quedado claro. </article> <article> <h1>Image Replacement o cómo reemplazar contenido por imagen</h1> Mon, 25 Sep 2006 16:41:13 +0000 Con este artículo atacaremos directamente la semántica para mejorar la gráfica de nuestro sitio. O sea, no la atacaremos, trabajaremos en conjunto con ella. Si, así queda mejor. La idea de esto, es (en este caso) reemplazar el tag H1 (pueden ser otros, tienes hasta el H6) que sería el título de nuestro sitio (eso es un H1, el título más importante. Así lo entiende Google) por una imagen más atractiva, que destaque más nuestro sitio y que no pierda la importancia o significado del H1. Además de eso, no dejaremos de lado el texto que sería la descripción del H1, así los buscadores sabrán: 1. Es un titulo importante. 2. El nombre de este título es el que está escrito ahi. El punto es que el nombre del H1 estará escondido, y será reemplazado por la imagen más bonita que cada uno diseñará para su sitio. Comencemos: El código HTML es muy simple y conocido por todos: <h1>CSSLab – otro laboratorio de ideas, pero en español.</h1> Y la imagen que utilizaremos para reemplazar ese texto es la siguiente: Bien, lo que haremos serán principalmente 2 cosas: primero, le daremos ancho, alto y un background-image (con por supuesto nuestra composición) linkeando adonde esté nuestra imagen. Luego, esconderemos el texto que contiene H1, dándole text-indent de -9999px (text-indent mueve nuestro texto, en este caso negativo llevándolo más allá de nuestros márgenes) y luego escondiéndolo con overflow: hidden; (esto esconde cualquier elemento que no está suscrito dentro de nuestros márgenes, evitando un scrollbar horizontal gigante). Sigue el código CSS: h1 { background-image: url(header_csslab.gif); background-repeat: no-repeat; text-indent: -9999px; width: 500px; height: 130px; overflow: hidden; } <a href="https://csslab.cl/ejemplos/header/header.html" class="verejemplo" target="_blank">Ver ejemplo final</a> Bastante simple, no? Embellecemos nuestro sitio y aún así lo hacemos relevante para los buscadores. </article> <article> <h1>Algunas palabras sobre márgenes y demases</h1> Thu, 14 Sep 2006 15:34:56 +0000 Border, margin y padding tienen ciertas mañas dignas de ser conocidas. Cuando uno llega a manejarlas, el código queda más limpio y es bastante más rápido escribirlo y modificarlo. En este post, que será corto, haré ver 3 detalles importantes: 1. Tienen un orden específico: sentido horario, comenzando de arriba, derecha, abajo e izquierda. margin: 0 10px 5px 2px; 2. Se pueden resumir de dos maneras: padding: 4px 4px 4px 4px; es igual a padding: 4px; padding: 6px 2px 6px 2px; es igual a padding: 6px 2px; (se agrupan arriba-abajo con derecha-izquierda, si éstos son iguales). 3. Se deben especificar sus unidades siempre, menos si éste es 0. 0 es 0, en cualquier unidad, punto. border-width: 2px 0 7em 6px; Listo. Prometí que sería corto. 😀 </article> <article> <h1>Diseño a lo «2.0»</h1> Mon, 11 Sep 2006 17:46:50 +0000 Creo que este es mi primer artículo sobre diseño en sí. ya era hora de entrar de lleno en mi área. Puedes haber notado que han proliferado 2 características principales en cuanto a diseño en los últimos 5 – 6 años. El primero vino con el gran estilo <a href="http://www.apple.com/macosx/overview/aquauserinterface.html" target="_blank" title="Aqua User interface - link externo">Aqua</a> creado por Apple para su línea gráfica desde la llegada del sistema operativo Mac OSX (tanto en su sistema operativo, como en sus manuales y su sitio web). El otro son las gradientes de fondo que se han utilizado bastante también en todos lados, inclusive en este mismo sitio. Bueno, no es difícil hacerlas, pero sí necesitan de cierto control para que no lleguen a ser esos <a href="https://csslab.cl/ejemplos/grad/gradientehorrible.jpg" rel="lightbox" title="Gradientes horrible, por favor evitar!">horribles gradientes</a> que proliferaban en gráficas hechas por defecto a mediados de los ’90. Bueno, en este momento trataré cómo llegar a tener sutiles gradientes, con las que podrán potenciar considerablemente la visual de sus sitios. Con esto ganaremos profundidad, y lograremos destacar ciertas partes de nuestro contenido que estimemos necesario hacerlo. Para esto utilizaremos Adobe Photoshop. <a href="http://www.gimp.org/" target="_blank">GIMP</a> puede actuar de la misma manera. Otros, no lo sé. Primeros crearemos un encabezado para CSSLab, con otra tipografía de la utilizada normalmente aquí (<a href="https://csslab.cl/ejemplos/grad/imagen1.gif" rel="lightbox" title="Imagen 1: CSSLab con bold condensado">ver imagen 1</a>). Bien, en un nuevo archivo de 300x200px a 72 DPI, escribo el título de nuestro sitio (en un nuevo layer de texto) en una tipografía en bold, y condensada a -50 (<a href="https://csslab.cl/ejemplos/grad/imagen2.gif" rel="lightbox" title="Imagen 2: configuraciones de texto">ver imagen 2 </a>). Ahora, comenzaremos con darle estilo a la tipografía. Abrimos Layer Style (para el layer de nuestro texto) y primero, le agregamos algo de color (<a href="https://csslab.cl/ejemplos/grad/imagen3.jpg" rel="lightbox" title="Imagen 3: Layer Style - Gradient Overlay">ver imagen 3</a>). Utilizaremos una degradación de rojos, y he aquí la clave. Se trata de escoger un color y variaciones suaves del mismo (en hexacromía un tono hacia arriba o hacia abajo). En este caso será el rojo <a href="http://es.wikipedia.org/wiki/Colores_HTML" target="_blank" title="Colores HTML - link externo">WebSafe</a> #FF0000, y para el otro color, el mismo rojo pero levemente más oscuro, el #CC0000 (<a href="https://csslab.cl/ejemplos/grad/imagen4.jpg" rel="lightbox" title="Imagen 4: configuracion de gradientes">ver imagen 4</a>). Importante en este caso es tener nuestra gradiente en 90º, así corre desde arriba hacia abajo de nuestra tipografía (<a href="https://csslab.cl/ejemplos/grad/imagen5.jpg" rel="lightbox" title="Imagen 5: gradiente a 90 grados">ver imagen 5</a>). Bien, ya vimos cuál es el detalle que hace ver estas degradaciones tan ampliamente aceptadas. Se trata de encontrar la combinación de tonos, dentro del mismo color, pero levemente superior o inferior. O sea, si utilizo un gris #66666 para la parte de arriba (recuerda que nuestra gradiente estará en 90º), la de abajo sería #333333 o #999999 (<a href="https://csslab.cl/ejemplos/grad/imagen6.gif" rel="lightbox" title="Imagen 6: diferencias de degradaciones">ver imagen 6</a>). Otro detalle importante que suele utilizarse para despegar el texto y separarlo del fondo que lo soporta, es un Drop Shadow pero también muy sutil. El que siempre utilizo es el con las configuraciones que muestro en la <a href="https://csslab.cl/ejemplos/grad/imagen7.gif" rel="lightbox" title="Imagen 7: configuracion de Drop Shadow">imagen 7</a>, color negro, con 5px de radio, 0 de distancia (o sea, la sombra se reflejará a todos lados de la tipografía) y 30% a 40% de transparencia (nuevamente, muy suave como se ve en la <a href="https://csslab.cl/ejemplos/grad/imagen8.gif" rel="lightbox" title="Imagen 8: resultado con Drop Shadow">imagen 8</a>). Bien hemos avanzado bastante. Ahora, el fondo. Utilizaremos otro gradiente, pero de negro a gris, o gris a negro, de gris a gris; esto queda a criterio del diseñador que existe escondido en todos nosotros. Hay que hacer las propuestas y probar. Me quedo con la que muestro en la <a href="https://csslab.cl/ejemplos/grad/imagen9.gif" rel="lightbox" title="Imagen 9: fondo degradado blanco a gris">imagen 9</a> (de blanco #FFFFFF a gris #CCCCCC). Pero esperen, aún falta un pequeño trazo blanco alrededor del texto, para que separe el rojo del gris (ya que tienen a vibrar, y para destacar más nuestro logotipo. <a href="https://csslab.cl/ejemplos/grad/imagen10.gif" rel="lightbox" title="Imagen 10: resultado parcial">Ver el resultado hasta aquí</a>). Por último, podemos agregar un Pattern al fondo, y fusionarlo con nuestra gradiente. Patterns hay muchas, las más utilizadas son las denominadas Scanlines, o las que son representadas mediante líneas horizontales, verticales, oblícuas o puntos de 1px o más. <a href="https://csslab.cl/ejemplos/grad/resultadofinal.gif" rel="lightbox" title="Imagen 1: resultado final">Ver resultado final.</a> Links: <ul> <li><a href="http://www.soslogodesign.com/CriteriosParaUnLogo.html" target="_blank" title="link externo">Criterios para un buen diseño de logos</a></li> <li><a href="http://logopond.com/" target="_blank" title="link externo">LogoPond – identity inspiration</a></li> <li><a href="http://es.wikipedia.org/wiki/Teoría_del_color" target="_blank" title="link externo">Teoría del Color – Wikipedia</a></li> <li><a href="http://www.deviantart.com/deviation/21963688/" target="_blank">Scanlines – Photoshop Pattern</a></li> </ul> </article> <article> <h1>Cargando imágenes con CSS</h1> Thu, 07 Sep 2006 19:23:13 +0000 Actualmente ha proliferado el uso de AJAX para cargar contenido sin necesidad de refrescar el browser. Se ha hecho mas fácil con el amplio abanico de <a href="http://www.csslab.cl/?p=57" title="Lista de Toolkits en JavaScript en CSSLab">toolkits</a> existentes, fáciles de usar e integrar, y gratis. En este momento mostraré un truco para mostrar la carga de una imagen a través de un simple GIF animado; en realidad puede ser cualquier mensaje que estimes conveniente, siempre que sea una imagen liviana (no más de 2KB). Lo que se hará es crear un estilo para el tag IMG, y dentro de este estilo poner de fondo el GIF que tendrá un cargando. Es importante que todas las imágenes que se carguen sean mayores que el mismo GIF; si no estás seguro de esto, mejor crea una clase para el IMG y utilízado en todas las fotos, por ejemplo (diferenciando fotos de imágenes…. fotos digo a por ejemplo, una galería de fotos). A continuación, el código de lo más simple: <pre><code class="language-css">img.foto { border: 1px solid #000; background: url("cargando.gif") no-repeat center center; }</code></pre> El borde es opcional, se lo puse solamente para delimitar la foto. En el tag IMG, utilicé una class=“foto” para que el background de la misma sea un GIF animado que emula la progresión de una carga. Esto es útil para fotos pesadas, galerías por ejemplo. Para que este GIF esté centrado, nada más obvio que center center (centrado horizontal y vertical). <a href="http://www.csslab.cl/ejemplos/cargando/cargando.html" title="Abrir en misma ventana">Ver resultado final.</a>{.verejemplo} Un interesante link, una página donde <a href="http://ajaxload.info/" target="_blank" title="Enlace externo a "Ajax GIF indicador"">puedes crear tus propios indicadores en GIF animado</a>. </article> <article> <h1>Lo ví y me gustó 15</h1> Tue, 05 Sep 2006 16:19:55 +0000 #15 – 5 Septiembre 2006 <a href="http://firmatorium.com/" target="_blank"></a> <a href="http://tz.i2com.de/" target="_blank"></a> <a href="http://www.maganhoto.arq.br/" target="_blank"></a> </article> <article> <h1>Lightbox + SWF</h1> Fri, 01 Sep 2006 22:04:16 +0000 Nadie niega el boom que ha tenido <a href="http://www.huddletogether.com/projects/lightbox2/" target="_blank">Lightbox</a> y todos sus sucedáneos en la manera de desplegar imágenes inline, sin tener que utilizar popup. Ciertamente una de las mejores aplicaciones AJAX existentes. El problema que surge, es cuando lo utilizamos en conjunto con un SWF: esta película suele ponerse adelante del Lightbox, y no deja visualizar bien la imagen o el contenido que estamos desplegando (en el caso del <a href="http://jquery.com/demo/thickbox/" target="_blank">Thickbox</a>). Bueno, para solucionar esto, se deben hacer 2 cambios fundamentales: uno en el OBJECT que llama el SWF y uno en el CSS del contenedor de este SWF; en el caso de no tenerlo, es preferible crear un DIV que sólo contenga nuestra querida película Flash. Vamos por partes: En el OBJECT debemos aplicar un parámetro y un valor para la película Flash: wmode=“opaque”. Es conocida por muchos el parámetro wmode=“transparent”, pues ésta nos permite que las zonas que no tienen fondo en la película Flash se transparente, dejando ver el fondo del HTML que lo contiene (sea éste color plano, o una gradiente, o una foto, etc), similar a una película PNG Transparente (precisamente trabajando con el canal de transparencia, el canal alpha). Con opaque, la película Flash se esconderá detrás de cualquier elemento, sea éste HTML o controlado por Javascript. Por lo tanto, el HTML que llama el SWF sería: <pre><code class="language-markup"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="200"> <param name="movie" value="csslab.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <embed src="csslab.swf" width="300" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="opaque"></embed> </object></code></pre> Como mencioné, se creará un DIV que contiene nuestra película Flash. Este DIV contendrá, en este caso, un z-index=-999; Para quienes no conocen, la propiedad z-index determina el orden, o relevancia en que un elemento designado tendrá sobre otro, por ejemplo, cuando una imagen pasa por debajo de un texto (el tiene un z-index inferior al del texto), o si queremos que la imagen pase por encima del texto (el z-index del será superior al z-index del del texto). ¿Se entiende? Ojalá que sí, aquí pueden <a href="http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/zindex.html" target="_blank">ver un ejemplo gráfico</a> de ello. bueno, lo que haremos entonces es reforzar el wmode=“opaque” que debería pasar ya detrás del Lightbox, con el z-index (exagerado) de -999, y el CSS del Lightbox ya viene con un z-index de 100; El CSS del DIV contenedor del SWF sería: <pre><code class="language-css">#flash { z-index: -999; }</code></pre> <a href="http://www.csslab.cl/ejemplos/lightbox/flash.html" target="_blank" class="verejemplo">Ver ejemplo con Lightbox </a> </article> <article> <h1>Rediseño</h1> Fri, 01 Sep 2006 16:39:49 +0000 Espero les guste este nuevo estilo gráfico que intenté darle a CSSLab. A mi gusto, 100% mejor. Estaba cansado ya de esas 2 columnas todo el rato. Además le saque el montón de herramientas que tenía ese sidebar, dejé sólo los necesarios. Errores, sugerencias, hacks, cambios… háganmelo llegar con confianza. PD. no sé si deba poner el Adsense… creo q ensucia mucho el sitio…. q opinan? Necesito para el server de alguna manera…. PD2. quienes usen <a href="http://www.apple.com/macosx/features/safari/">Safari</a>, podrán disfrutar de la propiedad <a href="http://www.css3.info/preview/text-shadow.html">text-shadow</a> q usé en varios de los títulos del sitio. </article> <article> <h1>Layout Fijo: resucitando los frames</h1> Tue, 29 Aug 2006 17:24:33 +0000 Buenos tiempos eran esos donde reinaban los frames… no había que pensar en semántica, preocuparse por compatibilidad… todo se veía en Netscape y Explorer. Eran, como quien dice, browsers carne de perro. Pero ahora son otros tiempos, hay más conciencia de respetar las reglas para una mejor compatibilidad entre navegadores y plataformas, como se dice: mayor accesibilidad. Bueno, a lo que voy con todo este blablabla es que mostraré ahora una manera de construir un layout similar a los viejos frames, tan mal mirados actualmente. Puede ser verdaderamente útil, dependiendo del uso que el diseñador / desarrollador estime darle. La clave: position y overflow . Comenzaremos por diagramar básicamente el sitio, con un encabezado (header), cuerpo del contenido (container) y un pie de página (footer). <a href="https://csslab.cl/ejemplos/fixed1.html" class="verejemplo" target="_blank">Ver Layout Básico 1</a> <a href="https://csslab.cl/ejemplos/layout1.css" target="_blank">Aquí está la hoja de estilos, nada fuera de lo normal</a> Bien, la clave ahora está en reordenar nuestro layout y aplicar los position de acuerdo a cada parte de nuestro sitio. La lógica es la siguiente: primero en nuestro HTML estará el #container, el DIV que soporta nuestro contenido. Luego, estarán los dos siguientes DIV’s: #header y #footer. Estos dos tienen position: absolute, donde se marcarán sus posiciones a través de top y bottom y no se moverán de ahí. El contenido pasará por detrás de estos dos DIV’s absolutos, y el #container tiene un position: fixed, además de overflow: auto para que su contenido pueda fluir, comportándose como un FRAMESET (incluso con barra de scroll). Entonces, los cambios principales en la hoja de estilos fueron: <pre class="codecss">#header { top: 0;> left: 0; width: 100%; height: 100px; position: absolute; overflow: auto; background-color: #C00; border-bottom: 5px solid #900; } #container { top: 105px; left: 0; bottom: 50px; right: 0; position: fixed; overflow: auto; background-color: #FFF; padding: 20px; } #footer { bottom: 0; left: 0; width: 100%; height: 45px; overflow: auto; position: absolute; background-color: #C00; border-top: 5px solid #900; }</pre> <a href="https://csslab.cl/ejemplos/fixed2.html" class="verejemplo" target="_blank">Ver Resultado Final</a> <a href="https://csslab.cl/ejemplos/layout2.css" target="_blank">Ver Hojas de Estilos</a> </article> <article> <h1>El porqué de no utilizar tablas</h1> Fri, 25 Aug 2006 19:05:51 +0000 Este debería de haber sido el primer post de CSSLab, como antes tarde que nunca, traduzco y transcribo 11 misivas que explican porqué no deberías de utilizar tablas para diagramar un sitio. Comencemos: 1. Porque utilizar tablas es una estupidez: Las tablas existen en HTML por un motivo: mostrar datos tabulados. Pero con la disponibilidad del border=“0”, se hizo posible para los diseñadores tener grillas para contener su diseño. Aún hoy es la forma más común de diagramar y armar sitios. 2. Convenciendo al jefe / cliente: Algunos buenos motivos para trabajar con web standards: <ul> <li>sus sitios se cargarán más rápido</li> <li>los costos de hosting se reducirán con sitios más livianos</li> <li>los rediseños de sitios serán más eficientes y baratos</li> <li>será más fácil mantener una consistencia visual entre todas las páginas del sitio</li> <li>mejores resultados en buscadores</li> <li>su sitio será más accesible para todos los browsers</li> </ul> 3. Asesinos: nested tables y spacers: Al principio fueron meras recomendaciones para trabajar ciertas limitaciones de los browsers existentes, y como trabajaban con las especificaciones de la W3C de la época (1995-1997…. Netxcape 2, 3). El problema es que estas recomendaciones aún persisten, cuando los standards han evolucionado bastante. Muchos diseñadores van por el camino facilista de armar sitios web. El problema del uso de tablas: <ul> <li>mezclan contenido con formato (dejando el peso de los archivos innecesariamente grandes, cargando los mismos datos d diagramación en cada página que visitan).</li> <li>el ancho de banda no es gratis…</li> <li>hacen el rediseño lento y caro.</li> <li>no hacen el sitio accesible para, por ejemplo, <a href="http://www.csslab.cl/?p=40">móviles</a>, PDA’s y menos aún <a href="http://www.csslab.cl/?p=54">discapacitados visuales</a>.</li> </ul> Por suerte esto ya está solucionado, los browsers modernos están mucho mejores para renderizar web standards, y pronto esperamos extinguir estos métodos arcaicos de diseño web. Ya no más meter tablas dentro de tablas, llenar celdas vacías con GIF transparentes de 1 pixel….. 4. CSS y la separación del estilo gráfico: Utilizando hojas de estilos podemos ahora separar el contenido del estilo gráfico, lo que nos permite: <ul> <li>rediseños más baratos y rápidos: basta con modificar una hoja de estilo para todo el sitio ver los cambios inmediatos.</li> <li>se reduce en ancho de banda utilizado para visualizar el sitio. El CSS que controla el layout se queda en el cache del browser.</li> <li>es más fácil mantener la consistencia visual del sitio: todas las páginas utilizan la misma familia tipográfica, tamaño de textos, colores, posición de elementos, lo que a la larga fortalece la marca y deja el sitio más usable.</li> <li>dejas tu sitio accesible, independiente del dispositivo que lo despliega.</li> <li>minimizando el código y utilizando correctamente los tags de texto (H1, H2, P, etc) ayudan a mejorar tu ranking en los buscadores.</li> </ul> 5. Aún puedes seguir utilizando tablas: pero no uses tantas. Puedes <a href="http://www.csslab.cl/?p=45">darles formatos con CSS</a>, y no uses más spacers! 6. Cambiando la forma en que piensas: Esto es probablemente lo que hace más reticentes al cambio a la mayoría de los diseñadores. Algo nuevo, con código, difícil de digerir. Diagramar con CSS requiere una nueva forma de pensar, ahora orientado a la información: títulos con H1, subtítulos con H2, etc. En vez de contener tu texto en una celda, conténla en un DIV. Dale a ese DIV un ID (identificador único) o un CLASS que describirá el contenido en función de la apariencia o posición. 7. Evita y : Lo que quieres decir, claro, tiene significado. Si es importante, (bold). Si quieres hacer énfasis (itálica). aún es soportado de modo transicional, pero ha sigo corregido: . Esto porque según la regla, todos los tags deben de abrir y cerrarse. (). Como hace de punto aparte, se abre en sí misma. Por ese el /; y no es el único tag que funciona de esta manera. Puedes utilizar CSS para hacer lo mismo: <pre><code class="language-css">.aparte {display:block;}</code></pre> 8. Menuliza con UL y LI’s: Menúes son meras <a href="http://www.csslab.cl/?p=42">listas de links</a>. Entonces, utiliza UL para contenerlos, <a href="http://www.csslab.cl/?p=37">horizontal</a> o verticalmente. 9. Más de una manera para hacer lo mismo: con CSS puedes llegar a la misma solución a cierto diseño de diferentes maneras, impulsando la creatividad. Haz la prueba, pregúntale a otra persona cómo posicionaría un elemento respecto a otro, o cómo diagramaría un menú con ancho elástico. 10. Migrando de tables a tableless: No es un camino fácil, pero es gratificante ciertamente. <ul> <li>Primero que nada, debes rediseñar el contenido del sitio. Ya que si vamos a meter mano, hagámoslo bien.</li> <li>A continuación, deberás despedazar el sitio: encabezado, navegación principal, subnavegación, contenido, información adicional, etc.</li> <li>Limpiemos la casa: chao todos esos y spacers. También adiós , <bgcolor, background>, <center>.</li> <li>Elige un <a href="http://www.csslab.cl/?p=25">DOCTYPE</a> de acuerdo con lo que estás construyendo. Transitional es lo recomendado aún, pero no está lejos el día en que todos debamos de utilizar Strict.</li> <li>Divide tu sitio en DIV‘s lógicos; utiliza nombres descriptivos de acuerdo al contenido, no al estilo gráfico (por ejemplo: #menu, #contenido y no #menuderecha o #textorojo).</li> <li>Prueba, prueba, prueba! En los browsers y plataformas más variados. Sólo así lograrás llegar bien a todos tus visitantes, y posibles futuros clientes.</li> </ul> 11. Nunca dejarás de aprender: es un interesante mundo, el que difícilmente dejarás de seguir aprendiendo nuevas técnicas. Aprende, y aprende de los mejores. </article> <article> <h1>CSS en Flash: sólida pareja</h1> Tue, 22 Aug 2006 20:08:00 +0000 Desde Flash MX 2004 que se permite importar información de hojas de estilo CSS para los campos de texto dinámicos de una película Flash. Lo interesante de esto es la capacidad de manejar externamente el estilo del texto que contiene la película, sin tener que publicarla nuevamente con una nueva, por ejemplo tipografía, o color de texto. Otra ventaja es tener en una misma caja de texto diferentes estilos (recordemos que estamos trabajando con textos dinámicos, y éstos deben tener el mismo tipo de texto para cada campo) sin tener que fraccionar ese bloque en diferentes partes. A continuación veremos cómo cargar una hoja de estilos CSS, manipularla ya lo sabemos pero la implementaremos dentro de una película Flash 7+. Necesitas primero un campo de texto dinámico. Esto es lo más fácil, hazla del tamaño que quieras . Luego, un importante ítem a ser seleccionado: en Properties, asegúrate de seleccionar Multiline no wrap y Render text as HTML, como en la imagen siguiente: Ahora, dale un nombre a esa instancia (campo de texto dinámico), en este caso usaré output. Por último, hora de agregar algo de acción. En el primer frame, copia el siguiente código Actionscript: var format = new TextField.StyleSheet(); var path = "http://www.csslab.cl/ejemplos/flash/flash.css"; var quick = " Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet."; format.load(path); format.onLoad = function(loaded) { if (loaded) { output.styleSheet = format; output.text = quick; } else { output.text = "Error cargando archivo CSS"; } }; Lo que hace el anterior código, es primero que nada crear un objeto que controle el flujo del CSS, y decir dónde está el archivo CSS, en este caso desde el mismo servidor en que está alojado CSSLab, mejor si es absoluto. Luego el texto a ser desplegado, en HTML, con sus respectivas clases. Por último, carga el CSS (onLoad) y lo aplica al campo de texto dinámico que creamos, llamado output. Ahora, el archivo CSS: .uno { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bolder; color: #FF0099; } .dos { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bolder; color: #333333; } .tres { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; color: #FF9900; } .cuatro { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; color: #000000; } Aún la implementación de CSS en Flash es limitado. Son soportados gran parte de las propiedades de CSS1, y en Flash 8 aseguran que este número aumentó: text-align, font-size, text-decoration, margin-left, margin-right, font-weight, font-style, letter-spacing, text-indent, font-family, color. <a href="http://www.csslab.cl/ejemplos/flash/cssflash.html" target="_blank">Ver resultado final </a> Links: <ul> <li><a href="http://livedocs.macromedia.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001447.html" target="_blank">Macromedia Adobe LiveDocs</a></li> <li><a href="http://www.kirupa.com/developer/mx2004/css.htm" target="_blank">Kirupa</a></li> </ul> </article> <article> <h1>PNG’s transparentes en IE6</h1> Mon, 14 Aug 2006 14:04:32 +0000 Es indiscutible las bondades que ha traído la inclusión de Unisys del formato <a href="http://es.wikipedia.org/wiki/PNG">PNG</a>{.blank}. Lo mejor de él, es la mayor profundidad de colores (miles, aún comprimido) y la facilidad de uso de su canal alfa. Su uso en web aún es limitado, ya que como no será sorpresa, Microsoft Internet Explorer no lo soporta ni siquiera en su versión 6 (al parecer sí en la v7). Mozilla Firefox, Apple Safari, Opera y otros no tienen problemas con visualizarlo. La idea de este post es crear un PNG transparente con un drop shadow (sombra) negro para que se note su ventaja con respecto al ultrapasado, pero nunca mal ponderado GIF transparente. Existen muchos códigos que permiten utilizarlo, con JavaScript o <a href="http://www.webreference.com/js/column68/">filtros de IE</a>{.blank}, pero ninguno funciona correctamente sobre CSS. Sigue el estilo utilizado: #imagen { width: 400px; height: 219px; background-image: url(«pildora.png») !important; background-image: none; filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/pildora.png’); } Explico: el ancho y alto son para establecer un área y que todos los browsers abran la imagen del mismo tamaño. El problema que se tiene con los filter, radica en que funciona para IE pero no para Firefox, y si agregamos el background, funciona en Firefox pero no en IE. La solución es agregar !important, para que Firefox tome ciertos elementos, y otros no. Además aún así el código XHTML valida según W3C, no el CSS ya que filter es de Microsoft y no de W3C (corregido). La solución es utilizar un background normal para Firefox con un !important y justo debajo un background vacío (none), ya que IE no reconoce !important y tomará como referencia el inmediatamente siguiente. Luego de esto, viene el filter vacío (none nuevamente) y una cláusula !important para Firefox y el consiguiente filter AlphaImageLoader para que IE reconozca el alfa sobre los PNG’s. Un detalle que puede que hayan notado: en el filter de IE se especifica la ruta de la imagen en un nivel diferente que la de IE. Esto porque la imagen se debe de especificar no desde la ruta del CSS (como ocurre con el background), sino con dirección de la raíz de la página web (no del sitio, me refiero a llamarla de forma relativa, no absoluta). <a title="PNG transparente en IE" href="http://www.csslab.cl/ejemplos/png/index.html" target="_blank">Ver resultado</a> Suerte y a disfrutar del buen diseño con los PNG transparentes. PD: gracias por sus comentarios para hacerme ver el error de validación del CSS. </article> <article> <h1>Bordes redondos crossbrowser</h1> Tue, 08 Aug 2006 16:12:47 +0000 Mucho se usa en el diseño web el recurso de los bordes redondeados, principalmente en formas que soportan cajas de texto. Esto se hacía fácilmente utilizando una tabla y varias celdas, y éstas se adaptaban fácilmente al tamaño del contenido. Ahora, son otros tiempos. El mundo cambia, y existen varios métodos para lograrlo sin las desprestigiadas tablas. Estos métodos incluyen imágenes (GIF), JavaScript con CSS o sólo CSS. En esta ocasión, mostrare un método que utiliza sólo CSS para su diseño, lo que nos ahorra unos cuantos bytes de peso y se adapta fácilmente a lo que contiene, sean imágenes o sólo texto. Además, te sacas la lata de andar cortando esos bordecitos en Photoshop y que calcen unos con otros. El Método Explico esto para que se acostumbren a saber cómo funcionan las cosas, y no sólo corten-peguen. Así, si necesitan modificar algo, ya saben por dónde comenzar a buscar. Usaremos un cuadrado de 20 x 20 px con el fondo del sitio. Luego, usaremos un bullet con el color de la caja. Para este ejemplo, usaremos el fondo rojo #C00 y la caja gris #CCC. El HTML: En el ejemplo puedes disfrutar del código, presionando View Source en tu browser favorito. <a href="https://csslab.cl/ejemplos/redondo.html" target="_blank">Ver Ejemplo</a> Link: <a href="http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1" target="_blank">Rounded Corners Without Images</a> PD. Probado en: Mac [Safari, Firefox, Opera, Flock, SunriseBrowser, Camino; Windows [Firefox]. Si alguien ve algun detalle en IE de Win, que trate de ver que es. </article> <article> <h1>Lo ví y me gustó 14</h1> Tue, 01 Aug 2006 18:18:25 +0000 #14 – 1 Agosto 2006 <a href="http://blog.be-studios.com/" target="_blank"></a> <a href="http://www.glasdach.biz/" target="_blank"></a> <a href="http://www.intrigue.ie/" target="_blank"></a> </article> <article> <h1>Se viene IE7…. ¡huid! (actualizado)</h1> Fri, 28 Jul 2006 18:07:13 +0000 Para todos quienes hemos peleado con IE5, 5.5 y 6, nuestras pesadillas están lejos de terminar… Con el inminente lanzamiento de IE7, Microsoft ha llamado a los desarrolladores a <a href="http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx" target="_blank">eliminar los hacks</a> creados durante años, ya que supuestamente estarán arreglados con el advenimiento de este nuevo browser. En ese entonces, todos nos asustamos, ya que un nuevo dolor de cabeza se nos venía en frente. Recientemente, Microsoft hace otro anuncio, donde expresa que obligará a sus usuarios a <a href="http://news.com.com/Microsoft+tags+IE+7+high+priority+update/2100-7350_3-6098500.html?tag=nefd.lede" target="_blank">actualizarse a la última versión</a>. Ahora, qué es lo que sugiere Microsoft: «Utilicen comentarios condicionales (conditional comments)». Este método no se considera como un hack propiamente tal, y se desarrolló con IE5, así que por lo menos hay soporte en cuanto a browsers antiguos (por no decir viejos). Estos comentarios condicionales corresponden a una sintaxis especifica para escribir comentarios en documentos XHTML, los que son interpretados solamente por Internet Explorer, permitiendo que especifiquemos una condición necesaria, por ejemplo, una versión especifica del browser, y establecer la solución para una o más detalles de ese browser. A pesar de ser código propietario de Microsoft, estos comentarios quedan visibles para todos el resto de los browsers, pero no son interpretados, sino que leídos como simples comentarios. <pre class="language-markup"><code></code></pre> Y para Internet Explorer 7 (actualizado): <pre class="language-markup"><code></code></pre> Importante es declarar este comentario condicional luego de haber llamado la hoja de estilos principal, o sea, la buena. Esto porque esta hoja podría sobreponer sus propiedades encima de la hoja de estilos principal, lo que continuaría con los errores. Ventajas: con esto, se agrupan todos los estilos corregidos en una sola hoja, dejando la principal limpia de hacks. Si algún día dejan de existir estos browsers llenos de errores, solamente tendríamos que quitar este comentario condicional. Fácil. De eso se trata, facilitar la vida. Link: <a href="http://webinsider.uol.com.br/index.php/2006/07/27/prepare-seu-site-para-o-internet-explorer-7/" target="_blank">Webinsider</a> </article> <article> <h1>XHTML: un interesante camino</h1> Tue, 25 Jul 2006 20:55:37 +0000 <a href="http://malaciencia.blogspot.com/" target="_blank">En un blog</a> al que estoy suscrito via RSS, y el cual recomiendo por el interesante contenido que siempre entregan, surge este interesante artículo, donde se muestra objetivamente (aunque faltan detallles, no deja de ser buena referencia) la evolución que ha tenido el HTML y el diseño y desarrollo web desde sus comienzos. Destaco las siguientes líneas, para mí un excelente desenlace: <blockquote> Bueno, y ¿todo esto es importante, o se trata sólo de pajas mentales de los informáticos? Pues sí es importante. Los estándares se hacen para ser utilizados y respetados. Uno de los pilares de la Web es poder acceder a la información, independientemente del navegador, del sistema operativo, e incluso de la máquina (y no estoy pensando sólo en ordenadores). La situación de hace varios años, con diferencias abismales entre el Internet Explorer y el Netscape Navigator, degeneraba en ocasiones en tener que hacer dos versiones de cada página, o en condenar a los usuarios de uno de los navegadores a no poder verlas. ¿Os imagináis que existieran canales de televisión que sólo pudieran ser vistos por una determinada marca de aparato? Afortunadamente, esa etapa parece haber sido superada, aunque hay quien se empeña (tal vez por desconocimiento) en hacer páginas pensando únicamente en un sólo navegador (normalmente Explorer). Si al crear nuestra página, nos ceñimos rígidamente a los estándares del W3C, tendremos bastante seguridad de que se verá en la mayoría de los navegadores. Y si no, siempre podemos excusarnos diciendo que si no se ve bien, es problema del navegador, que no cumple el estándar. Por otro lado, separar el contenido de la forma de presentarlo, nos ayudará a modificar posteriormente la apariencia de nuestras páginas, o mejor aún, facilitará su proceso por parte de software especializado para discapacitados, como sitnetizadores de voz o lectores braile. O incluso podemos especificar diferentes hojas de estilo, de forma que el usuario escoja cuál utilizar. </blockquote> Link: <a href="http://malaciencia.blogspot.com/2006/07/xhtml-en-blogger.html" target="_blank">Malaciencia: XHTML en Blogger</a> </article> <article> <h1>Flotando en la incertidumbre</h1> Thu, 20 Jul 2006 21:03:44 +0000 Seguro uno de los temas más complicados al momento de construir un sitio tableless, se refiere a los float. Entenderlo y saber utilizarlo es un lío. Esto se complica más al momento de hacer que el sitio se vea bien en los browsers, un dolor de cabeza (Firefox es muy sensible en problemas con floats). Para ayudar en esto, existen varios hacks, o mejor, tips que facilitan la vida. Lo siguiente es una manera de manejar los floats, principalmente cuando existen varios elementos dentro de un mismo div. Juntos, suelen comportarse de manera extraña. <h3 id="a-la-antigua">A la antigua.</h3> Cuando un float está contenido dentro de otro contenedor (burp, redundancia….. pero se entiende) que tiene borde o fondo visible (para que se note el problema, ver img1), el float no fuerza automáticamente el borde inferior del contenedor principal a medida q este float se agranda. A su vez, el float es ignorado por el contenedor y se verá colgado del borde superior (esto no pasaba con las tablas…. maldición!). Para esto, la W3C sugiere usar un elemento clear al final de la caja contenedora, forzándolo a despejar este elemento incluído. Lo que hará, por ejemplo, un { clear: both; } al final del contenedor, será extender el margen inferior hasta que se ‘despeje’ (clear) hasta el final del float. <div align="center"> </div> <h3 id="a-la-moderna">A la moderna.</h3> Un nuevo método ha irrumpido hace algún tiempo ya en el mundo del desarrollo web: clearfix. Elementos de despeje ‘clear’ no son utilizados. En cambio, se usa una propiedad CSS2 :after. Esta propiedad permite que se agregue nuevo contenido al final de un elemento a través del CSS. Esto significa que no se requiere modificar el HTML. El contenido es especificado dentro de la hoja de estilos, y aparece en la página web como un elemento HTML real que ha sido insertado siguiendo el normal contenido. Contenido generado con :after no puede recibir algunas propiedades CSS, como position o float, pero clear sí es permitido. Imagina que usamos :after para insertar un simple caracter, un punto. A este punto se le despeja con { clear: both; }. Eso es todo. Pero no queremos que ese punto se vea, menos que se note. Por ello. utilizamos { height: 0; } y {visibility: hidden;} para esconderlo. Primitivamente, el código es el siguiente: <pre><code class="language-css">.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }</code></pre> Ahora, como nada es simple en la vida, hay que hacer algunas modificaciones aún para que todos los browsers permitan un uniforme despliegue del float. Un simple hack para IE es necesario, ya que este browser no soporta :after. Pero posee un efecto de autodespeje, y es precisamente de él que nos colgaremos para este caso. Le diremos a IE/Win que vea un alto de 1% del contenedor. <pre><code class="language-css">/* Esconde de IE-mac \*/ * html .clearfix {height: 1%;} /* Fin esconde de IE-mac */</code></pre> Queda un detalle aún. Sí, nuevamente IE, pero para Macintosh. Son los menos, los restantes de un relegado a tercer plano, pero quedan. Existe otro hack que ayuda a este navegador con este mismo problema, pero utilizando { display: inline-table; } a la clase .clearfix, y escondiéndolo de todos los otros browsers. Finalmente, el código completo es el siguiente: <pre><code class="language-css">.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */</code></pre> Sólo debes agregar esta clase .clearfix al contenedor principal (class=“clearfix”). Algunos acostumbran a agregar este clearfix a todas sus hojas de estilo. No debería de causar ningún problema con los otros elementos del sitio web. <div align="center"> </div> Ojalá haya despejado más de una duda y un float. Link: <a href="http://www.positioniseverything.net/easyclearing.html" target="_blank">Position is Everything </a> UPDATE: como comentó acertadamente <a href="#comments">newdisco</a>, se acerca estrepitosamente una gran actualización de los 2 principales browsers actuales: IE7 y Firefox 2. Y no podemos dejarlos al margen, ya que, por lo menos en el caso de IE7, será un gran y temible paso en cuanto al desarrollo web y cómo arreglar todos los hacks habidos y por haber. Leyendo por la web, investigué cómo se comporta clearfix con estos 2 navegadores, y desde ya se pueden encontrar soluciones, ya que ambos programas están en sus fases finales de desarrollo y pruebas y están cerrados sus soportes respecto a CSS. Vamos por parte: IE7: El más problemático por lejos, y como se predice, lo será siendo. Microsoft ha llamado a que se deje de hacer hacks para IE6, ya que <a href="http://blogs.msdn.com/ie/archive/2006/02/02/523679.aspx" target="_blank">en IE7 estarán solucionados estos problemas</a>. Pero, obviamente, no todos los usuarios se cambiarán al instante a este nuevo navegador. Seguro pasarán años, o hasta que saquen IE8 y aún así habrán muchos usuarios con IE5.5 e IE6. Enfin, más líos. Respecto al clearfix, IE7 continuará no soportanto pseudoclases (:after), por lo que el problema continúa. Se ha descubierto un truco que relaciona { display:inline-block; } seguido de un { display:block; } para la regla de despeje original. Luego, claro, para IE6 la clase con su { height: 1%; }. <pre><code class="language-css">.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix { display:block; } * html .clearfix { height:1px; }</code></pre> El problema es que al parecer el HollyHack (*** html**) no será soportado más, o mejor dicho, serán solucionados los bugs q permitían esos hacks. Por ello, se discute esta variación en el clearfix para IE7, donde se aprovecha la propiedad zoom de MS: <pre><code class="language-markup"> </code></pre> Esto por ahora. Como el browser aún está en desarrollo, y es de Microsoft, podemos esperar cualquier cosa. Firefox 2: aún estoy investigando sobre ello… <h4 id="links">Links:</h4> <ul> <li><a href="http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/#comment22" target="_blank">456bereastreet</a></li> <li><a href="http://www.tanfa.co.uk/archives/show.asp?var=300" target="_blank">tanfa</a></li> <li><a href="http://www.satzansatz.de/cssd/onhavinglayout.html" target="_blank">satzansatz</a></li> </ul> </article> <article> <h1>Lo ví y me gustó 13</h1> Tue, 11 Jul 2006 16:45:00 +0000 #13 – 11 Julio 2006 Debido a la gran cantidad de sitios enviados, aumenté la cuota de sitios en esta edición de Lo ví y me gustó. <a href="http://www.ndesign-studio.com/" target="_blank"></a> <a href="http://www.darkamy.net/" target="_blank"></a> <a href="http://myphilosophy.netsons.org/" target="_blank"></a> <a href="http://www.polvo.com.br/" target="_blank"></a> <a href="http://www.intuitivedesigns.net/" target="_blank"></a> <a href="http://www.svplace.com/" target="_blank"></a> </article> <article> <h1>HTML y la enseñanza</h1> Mon, 03 Jul 2006 15:05:08 +0000 Conversando con una diseñadora recientemente, me contaba que aprendió a diseñar web usando Dreamweaver 4, y que aún lo utiliza con esos mismos propósitos. Por mi parte, mi curiosidad me llevó a desmenuzar sitios web enteros para aprender de qué servían esos extraños tags , <body>, <a href> y muchos otros. View Source Code de Netscape era mi mejor amigo en esos años. Destruía más que construía sitios, tratando de entender la lógica por detrás. Y no fue muy difícil, ya que HTML es bastante primitivo en este aspecto y su forma de constituirse es my simple. Claro, después llegó Macromedia Dreamweaver 1 y Microsoft Frontpage 1, los que me irritaron por lo fácil que hacían construir un sitio.Y rápido. rehaciente, luego caí y comencé a utilizar estos editores <a href="http://es.wikipedia.org/wiki/WYSIWYG" target="_blank">WYSIWYG</a>, pero nunca dejé de echarle una mirada al codigo. Algo que muchos no hacen. Enfin, sigamos con la historia. Esta diseñadora me comentaba que les complicada a ella y sus compañeros de clases utilizar tablas. Rowspan, colspan, <td>, <tr>, <th> etc. Está bien, al principio cuesta imaginarse cómo a medida que se escribe una <table> se arma mentalmente esa estructura. Pero es costumbre, después se hacen como avión. Lo que más me preocupó fue que se enseñara a construir sitios en una universidad utilizando tablas. Y no fue hace mucho tiempo atrás. Me pregunto yo: ¿Se sigue enseñando a construir sitios en universidades latinoamericanas, por globalizar el tema y no enmarcarlo sólo en Chile, mediante el uso de tablas? Me intriga conocer la situación actual. Quienes sepan, exprésense en los comentarios. </article> <article> <h1>JavaScript, Toolkit y demases</h1> Fri, 23 Jun 2006 17:03:28 +0000 Desde hace ya un tiempo se vienen desarrollando cada vez con más frecuencia aplicaciones web dejando de lado la hegemonía que por años tenía Flash, como herramienta de diseño web. Claro, a los clientes les gusta que sus sitios tengan harto movimiento, así que no los culpo por preferir sitios construídos enteros en esta plataforma vectorial. Con la importancia del posicionamiento en buscadores, se ha hecho necesario un retroceso en pro del uso de DHTML para un mejor acercamiento y entendimiento con los estándares web. Con ello, se ha vuelto a desarrollar con la ayuda de JavaScript, ahora ya no solamente utilizado como un mero script, sino que orientado a objetos. Y con el movimiento <a href="http://es.wikipedia.org/wiki/Open_source" target="_blank">OpenSouce</a>, <a href="http://es.wikipedia.org/wiki/Copyleft" target="_blank">CopyLeft</a>, <a href="http://es.wikipedia.org/wiki/Creative_commons">Creative Commons</a>, etc su uso es público y lo mejor para nosotros diseñadores/desarrolladores: GRATIS. Bastantes son las ventajas que obtenemos a simple vista: efectos de movimiento, de formas, de colores. Y la mecánica por detrás (lo que no se ve) también gana, con menor uso de recursos y flexible construcción de aplicaciones autónomas. Últimamente he utilizado bastante algunos de estos recursos. Claro, a nivel estético, funcional. A continuación menciono los más importantes: <ul> <li><a href="http://dojotoolkit.org/" target="_blank">Dojo</a>: open-source JavaScript toolkit que facilitan el desarrollo web. Efectos y más.</li> <li><a href="http://moofx.mad4milk.net/" target="_blank">moo.fx</a>: “superliviana, ultrapequeña, megachica librería de efectos JavaScript escrito con <a href="http://prototype.conio.net/" target="_blank">Prototype</a>”.</li> <li><a href="http://www.mochikit.com/" target="_blank">MochiKit</a>: suite de librerías JavaScript altamente <a href="http://www.mochikit.com/demos.html" target="_blank" onMouseOver="toolTip('crossbrowser', 140, 70)" onMouseOut="toolTip()">compatible</a>.</li> <li><a href="http://openrico.org/" target="_blank">OpenRico</a>: librería JavaScript open-source para crear contenidos ricos para la web. Soporte para <a href="http://es.wikipedia.org/wiki/AJAX" target="_blank">AJAX</a>.</li> <li><a href="http://script.aculo.us/" target="_blank">script.aculo.us</a>: la más conocida de todas las librerías JavaScript. Fácil de usar, compatible y con <a href="http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo" target="_blank">atractivos efectos</a>.</li> <li><a href="http://swat.silverorange.com/Swat" target="_blank">Swat</a>: toolkit construído con PHP5.</li> <li><a href="http://www.huddletogether.com/projects/lightbox/" target="_blank">Lightbox</a>: “simple, unobstructivo script utilizado para sobreponer imágenes en el mismo documento”. ¡Adios al popup, al fin!</li> <li><a href="http://www.huddletogether.com/projects/lightbox2/" target="_blank">Lightbox 2</a>: idem, pero con mejoras sustanciales.</li> <li><a href="http://jquery.com/demo/thickbox/" target="_blank">Thickbox</a>: con el mismo proncipio anterior, pero ahora puedes abrir contenidos y hasta formularios además de imágenes.</li> <li><a href="http://www.ryanjlowe.com/?p=9" target="_blank">LITBox</a>: idem pero con mejoras respecto a ThickBox.</li> <li><a href="http://tooltip.crtx.org/index.php?page=Demos" target="_blank">Tooltip.js</a>: tooltip es un útil elemento que aparece siguiendo el mouse cuando una acción es establecida (por ejemplo, encima de un link). Se puede customizar fácilmente con CSS y se ha transformado en una útil herramienta.</li> <li><a href="http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip" target="_blank">jTip</a>: otro Tooltip, pero con mejoras en cuanto a la carga y despliegue de mayor contenido.</li> <li><a href="http://cow.neondragon.net/stuff/reflection/" target="_blank">reflection.js</a>: agrega reflejos a tus imágenes rápido y fácil con este efecto JavaScript. Sólo 5KB!</li> </ul> Seguro hay muchos más. Y espero sigan desarrollándose, para un mejor y más compatible desarrollo web. ¿Cuál les gusta más? </article> <article> <h1>Lo ví y me gustó 12</h1> Tue, 20 Jun 2006 13:33:05 +0000 #12 – 20 Junio 2006 <a href="http://www.jp33.com/" target="_blank"></a> <a href="http://www.allcusco.com/" target="_blank"></a> <a href="http://www.ironmould.com/" target="_blank"></a> </article> <article> <h1>Podcast 01</h1> Tue, 06 Jun 2006 14:53:08 +0000 Presentando el primer podcast para CSSLab, conmigo mismo como locutor. Un entretenido y estimulante monólogo sobre 3 puntos principales: <ul> <li>Semántica</li> <li>Aumento de Visitas</li> <li>Muestra en Galerías</li> </ul> Aunque lo grabé hace un par de semanas, creo q aún no está obsoleto. Espero sus comentarios, sugerencias, opiniones, etc. <a href="http://www.csslab.cl/ejemplos/podcast/podcast01.zip" title="Podcast 01">Descargar Podcast 01 (17mb .zip)</a>{.bajar} </article> <article> <h1>Diseño a oscuras</h1> Tue, 23 May 2006 21:46:25 +0000 La hoja de estilos aural es comúnmente utilizado por comunidades no-videntes o deficientes visuales, la cual combina sintetizadores de voz e íconos ‘audibles’. Esto se realiza convirtiendo el documento a texto plano, el cual alimenta a un lector de pantalllas (hardware o software), el que simplemente lee todos los caracteres de la pantalla. Esto resulta en una presentación menos efectiva del contenido, pero no menos importante, dado la relevancia de proporcionar accesibilidad a todos los usuarios por igual. Este medio ha funcionado muy bien con archivos de texto (Word), pero su uso en la web ha sido bastante accidentado. Además del obvio beneficio a las personas con problemas visuales o de lectura, otros mercados permiten la difusión de este medio: navegadores en automóviles, sistemas de documentación industrial y médica, entretenimento del hogar, o simplemente ayudar a personas con dificultad a aprender a leer. <pre><code class="language-css"><link href="aural.css" rel="stylesheet" type="text/css" media="aural" /></code></pre> Para utilizar las propiedades aural para la web, se necesitan de 3 dimensiones, las 2 usualmente usadas (X, Y) y la inclusión y manejo del sonido. Propiedades CSS permiten variar la calidad de la voz sintetizada, frecuencia, volumen, etc. Una hoja de estilos aural se vería de la siguiente forma: <pre><code class="language-css">H1, H2 { voice-family: male; richness: 80; cue-before: url("beep.aiff"); }</code></pre> Para una completa lista de las propiedades y sus usos, <a href="http://www.knowsystems.com/markup/html/css/aural.html" target="_blank">este enlace</a> es de gran ayuda. <h3 id="iquestpor-queacute-iquesty-para-queacute">¿Por qué? ¿Y para qué?</h3> Son 2 muy buenas preguntas. Y una tercera, mejor aún: ¿Cuánto? Porque desarrollar sitios para ciegos o discapacitados visuales no es fácil, correspondería la creación de una nueva hoja de estilos, simplificar muchos elementos, seleccionar contenido… es un costo que no muchos, de hecho muy pocos están dispuestos a costear. Creo que podemos comenzar por crear una conciencia al respecto, aportar un grano de arena, conociendo y utilizando correctamente los elementos constituitivos del XHTML, como escribí en un <a href="http://www.csslab.cl/?p=49">post anterior</a>, estudiar un poco y saber utilizar la semántica aplicada a la web. Son pequeños pasos que nos ayudarán a construir una web accesible a todos, no sólo a los diferentes browsers, tampoco a las plataformas. A todos quienes tienen el derecho de acceder a la información de Internet. Aún es muy común que diseñadores y desarrolladores incluyan, por ejemplo, imagenes que no sirven más que para soporte (spacer.gif). Esto dificulta la lectura por parte de los lectores de pantalla. Dejar de utilizar para marcar una negrita, ya que este elemento no tiene valor semántico (al igual q ); en su lugar se usa q hace precisamente eso, elevar el tono de la voz (auditivo) y demarcarlo con negrita (visual). Title aporta información extra sobre un elemento. Lectores de pantalla no están obligados a leerlos, pero es ampliamente aceptado y útil, principalmente en links e imágenes. Infelizmente el desarrollo de los lectores de pantalla también es lento y no muy acabados, pero es una gran herramienta para quienes no tienen otro medio de contacto con el mundo visual. Por el momento creo que aportar escribiendo código limpio, simple, de fácil lectura (lo que invariablemente nos ayudará en una fluída renderización en los diferentes browsers, así que no se pierde nada con eso) y correcto con los estándares web, son ya un gran paso. El esfuerzo no es mucho, simplemente hacer las cosas bien. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.w3.org/TR/REC-CSS2/aural.html" target="_blank">CSS2 – Aural</a></li> <li><a href="http://www.w3.org/TR/css3-speech/" target="_blank">CSS3 – Speech</a></li> <li><a href="http://www.knowsystems.com/markup/html/css/aural.html" target="_blank">Aural Media</a></li> <li><a href="http://www.w3schools.com/css/css_ref_aural.asp" target="_blank">CSS2 Aural Reference</a></li> <li><a href="http://www.ilovejackdaniels.com/design/screen-readers-suck/" target="_blank">Screen Readers Sucks</a></li> <li><a href="http://www.cuartoderecha.com/?p=206" target="_blank">Navegar a ciegas</a></li> <li><a href="http://www.tawdis.net/taw3/cms/es" target="_blank">Test de Accesibilidad</a></li> </ul> </article> <article> <h1>Lo ví y me gustó 11</h1> Thu, 11 May 2006 16:50:18 +0000 #11 – 11 Mayo 2006 <a href="http://www.werksentwurf.de/" target="_blank"></a> <a href="http://www.honeyjazz.net/" target="_blank"></a> <a href="http://kimmo.takatalvi.net/" target="_blank"></a> <a href="http://fortress.homelinux.com:81/" target="_blank"></a> </article> <article> <h1>Desactualización</h1> Wed, 10 May 2006 21:12:27 +0000 Quería dejar constancia que estoy bastante consciente de la desactualización que ha tenido este sitio, esto se debe más que nada a la enorme cantidad de proyectos simultáneos en los que estoy en estos momentos, muchos relacionados con la web, otras ideas q estan constantemente en mi cabeza y trato de darles una solución de alguna manera. El más importante es la actualización de mi sitio web ‘corporativo’ Be Studios, donde con 3 otros amigos reunimos nuestros talentos para dar soluciones gráficas a los problemas de los clientes. Luego de 5 diferentes versiones y nunca decidirme a terminarlo. estoy prestes a hacerlo, estén atentos. Luego más artículos. Gracias por su comprensión. Link: <a href="http://www.be-studios.com/" target="_blank">Be Studios</a> </article> <article> <h1>Inspirando</h1> Wed, 26 Apr 2006 22:23:10 +0000 Quisiera tomarme un espacio entre los posts de contenidos, para agradecer a los sitios, quienes se han tomado la molestia de incluirme en sus galerías de muestra de sitios construídos con CSS. Es realmente un halago que un trabajo de diseño mío sea dado como ejemplo de buen gusto en cuanto a las formas utilizadas, los colores y un correcto uso de los códigos. Saludos a todos los webmasters, y gracias nuevamente. <a href="http://www.catalizado.com/?p=14" target="_blank"></a> <a href="http://smoothoperator.strund.jp/archives/03personal/css_lab.php" target="_blank"></a> <a href="http://screenspire.com/view/www.csslab.cl/" target="_blank"></a><a href="http://tom.ma/screenblog/www.csslab.cl" target="_blank"></a> </article> <article> <h1>Un paseo por la Semántica</h1> Wed, 12 Apr 2006 16:34:55 +0000 Es la palabra de moda hoy por hoy en la web. Va de la mano con Web 2.0 y AJAX. Tratemos de entender esto un poco: Semántica = estudio del significado de los signos lingüísticos y de sus combinaciones. ….parecen clases de castellano… Enfin, esto aplicado a la web, se refiere a darle un mayor significado a los elementos constituyentes de la web. Es una web extendida y universal, apoyándose de lenguajes universales y predefinidos. Aclaro: HTML está definido por elementos desde sus inicios. H1, H3, P, DIV, STRONG, UL… todos ellos tienen una razón de ser, y una función específica. Esta función debe ser entendida tanto por el humano (desarrollador) como por la máquina (servidor, softwares). La semántica se trata de saber usar correctamente todos los tags HTML, pasa así evitar sobrecarga de información y hegemoneidad entre ella. <blockquote> “La Web Semántica ayuda a resolver estos dos importantes problemas permitiendo a los usuarios delegar tareas en software. Gracias a la semántica en la Web, el software es capaz de procesar su contenido, razonar con este, combinarlo y realizar deducciones lógicas para resolver problemas cotidianos automáticamente.” </blockquote> El principal resultado que se palpa con este uso difundido de la web semántica, ayudado del diseño sin tablas y evitando Flash en contenidos, es en la incorporación y posicionamiento en buscadores, principalmente Google. Los spiders que recorren la web y catalogan la información, enviándola devuelta a los servidores respectivos, toman primeramente lo contenido de <title>, <h1> , <meta>, etc. Con ello recopila la mayoría de la información primaria contenida en ese sitio, o página, para después entrar de lleno en , , , entre otros criterios. Por ello es importante saber de qué se trata cada elemento constituyente del HTML, cuál es su relevancia para los buscadores y cómo utilizarlos correctamente. De esto se trata todo el alarde semántico. Manos a la obra, a estudiar un poco más (para eso tienen la mayor biblioteca disponible: Internet) y a hacer sitios más usables. Links: <ul> <li><a href="http://es.wikipedia.org/wiki/Web_semántica" target="_blank">Wikipedia</a></li> <li><a href="http://www.w3c.es/Divulgacion/Guiasbreves/WebSemantica" target="_blank">W3C Schools</a></li> <li><a href="http://www.dcc.uchile.cl/~cgutierr/websemantica/" target="_blank">U. de Chile</a></li> </ul> </article> <article> <h1>Lo ví y me gustó 10</h1> Wed, 12 Apr 2006 15:07:24 +0000 #10 – 12 Abril 2006 /* Todos enviados por sus webmasters. Gracias! */ <a href="http://www.criaturacreativa.com/" target="_blank"></a> <a href="http://www.elconventodetorrejon.com/" target="_blank"></a> <a href="http://mbuddha.mundoserver.org/" target="_blank"></a> <a href="http://www40.brinkster.com/textident/" target="_blank"></a> </article> <article> <h1>Posicionando: ejemplos prácticos</h1> Thu, 30 Mar 2006 13:48:04 +0000 Un gran lío en esto de entender el CSS es el tema del posicionamiento: static, absolute, fixed e incluso float son usados para diagramar un sitio y su contenido. En el <a href="http://barelyfitz.com/screencast/html-training/css/positioning/" target="_blank">siguiente link</a> se muestra con ejemplos prácticos cómo se comporta cada uno de estas propiedades, incluso juntas. link: <a href="http://barelyfitz.com/screencast/html-training/css/positioning/" target="_blank">Learn CSS Positioning in Ten Steps</a> </article> <article> <h1>CSS Table Gallery</h1> Mon, 27 Mar 2006 21:57:22 +0000 Envié un estilo para tablas hace no muchos días, y hoy gratamente me doy cuenta que fue bien recibido y publicado en <a href="http://icant.co.uk/csstablegallery/index.php?css=72#r72" target="_blank">CSS Table Gallery</a>. De ahí mismo se puede echar una mirada al código CSS. Muchas gracias, gente de icant.co.uk! link: <a href="http://icant.co.uk/csstablegallery/index.php?css=72#r72" target="_blank">CSS Table Gallery</a> </article> <article> <h1>Lo ví y me gustó 9</h1> Mon, 27 Mar 2006 13:39:31 +0000 #9 – 27 Marzo 2006 <a href="http://www.lignanoweb.com/" target="_blank"></a> <a href="http://www.cynaskyweb.it/" target="_blank"></a> <a href="http://www.openyourweb.com/" target="_blank"></a> </article> <article> <h1>Consejos para un desarrollo web exitoso</h1> Tue, 21 Mar 2006 15:42:11 +0000 Tras años de diseño y desarrollo web para diferentes clientes e incluso para mí mismo, hasta no hace mucho que se ha creado una conciencia global en cuanto a regirse por las normas que impone ciertas organizaciones que como la <a href="http://www.w3c.org/" target="_blank">W3C</a>, hacen precisamente eso: marcar la cancha en cuanto a lo que de semántica se trata. Desde el boom de Google, que la gente, los empresarios, han valorado lo que significa estar bien posicionado en un buscador. Aparecer antes que todos, significa ventas. Y si de dinero se trata, vale la pena pagar un poco más por un sitio mejor hecho y que sea amigable para los <a href="http://es.wikipedia.org/wiki/Motor_de_búsqueda" target="_blank">spiders</a> que lo visitan cada cuanto. Así que <a href="http://www.alvit.de/blog/article/20-rules-of-smart-and-successful-web-development-and-web-design" target="_blank">leyendo un artículo</a>, me propuse a traducir y completar unos cuantos tips para el diseño y desarrollo web exitoso: <ul> <li> Respeta tus visitantes: no trates de obligarlos a leer el contenido de tu sitio web. Déjalos escojer y decidir lo que quieren leer. Si tienes algo que decir, encontrarás a quienes te lean. Es increíble que el tema más absurdo, bizzarro, irracional, tiene llegada en cualquier parte del mundo. Porque hay que pensar global. De aquí viene la siguiente. </li> <li> Piensa global: si estás en Internet, estás para el mundo. En lo posible, trata de poner tu sitio en más de un idioma, dependiendo del target que tienes pesado para tu sitio. No pienses que sólo necesitas contactar a los de tu ciudad, también de tu país, o a todos los hispanohablantes. Un error típico en Contacto, es poner el número de teléfono sin el código de ciudad o de país. De ahí nadie sabe dónde estás localizado. Y más enccima tienes un .com ….. </li> </ul> <ul> <li> Mala publicidad es mala: popups y layers invasivos ya están pasados de moda, si es que algún día lo estuvieron. Dedicarle espacios específicos y claros en el sitio para la publicidad es lo recomendable. Tratar de fusionarlos con el contenido, para así persuadir y lograr algunos centavos más con <a href="https://www.google.com/adsense/?hl=es" target="_blank">AdSense</a> se usa mucho en estos días. <ul> <li> Desarrolla tu propio estilo: inspírate, navega mucho, pero trata de no copiar. Diseños atractivos hay por montones, y copias de los mismos son exponenciales. Te destacarás más si es algo original y propio. Y atraerás más variedad de visitantes. </li> <li> Respeta los standarts: es el tema que está en boga. Y no es para menos: siguiendo las reglas y recomendaciones normadas, lograremos una sociedad web que fluya en sincronía. Tarde o temprano, todos se subirán a este tren. Y si tu código es bien hecho, lograrás buena visualización con los browsers venideros. Títulos con <h1>, párrrafos con , links con title="" entre muchas otras. Sáquense el estigma del ‘programador’ y aprendan del buen XHTML. </li> <li> Odia IE, pero no ignores sus usuarios: todos saben el mal trabajo que han hecho en Microsoft con su browser estrella a la fuerza. Si tienes un código bien estructurado, no tendrás muchos problemas con IE. Trata de evitar los hacks, usándolos sólo si es la última opción. Al parecer van a acertar con IE7, pero nosé que pasará con todos los sitios modificados para verse en IE6 e incluso IE5…. </li> <li> Preocúpate del contenido: trata de hacer tu sitio informativo, que tenga buena <a href="http://es.wikipedia.org/wiki/Accesibilidad" target="_blank">accesibilidad</a>, lectura y <a href="http://es.wikipedia.org/wiki/Usabilidad" target="_blank">usabilidad</a>. Tus visitantes recordarán que algo interesante leyeron ahí, y volverán por ello. Mostrar lo que quieren ver es esencial. </li> <li> No te desesperes por posicionarte: es importante tener un código limpio y ordenado, así los buscadores sabrán cómo y dónde encontrarte. META tag’s son importantes, pero más aún es tener contenido relevante, artículos importantes que destaquen. Esos durarán mientras tu sitio exista, y es el mejor posicionador en buscadores. Si es posible, llama a los lectores que comenten. Crear un diálogo es lo que falta en este mundo, aunque sea cibernético. </li> <li> Contacta, pero no bombardees: deja que quienes están interesados se preocupen por tu contenido. Primero define tu potencial clientela. Luego observa quiénes estarían interesados en tu producto. Luego contáctalos, describiendo las ventajas de tu servicio / producto. Ofrece algo útil y llamativo, no satures la paciencia y el tiempo de tu potencial cliente. Sólo lograrás alejarlo. </li> <li> No tengas miedo a preguntar: no creas que lo sabes todo. Siempre se puede seguir aprendiendo, y hay mucha gente dispuesta a compartir sus conocimientos. Imagínate que no eres el único con la misma duda. Tienes a toda una biblioteca para consultar, busca en Google, visita foros, haz notar tu inquietud. </li> <li> Contesta tus e-mails de inmediato: no te demores en contestar las dudas de tus visitantes, por más burda que sean. Sé amable, es algo que falta en la sociedad web. Trata de evitar las respuestas automáticas. La gente ya no quiere hablar con máquinas, quiere contacto con humanos. Piensa que han gastado tiempo en buscarte, leerte y escribirte. Dedica algo de tu tiempo a lo mismo, causando una impresión positiva. </li> <li> Haz vida social: hay un montón de sitios que manejan bookmarks online, y no puedes perder la oportunidad de mostrarte en ellos. <a href="http://www.digg.com" target="_blank">Digg</a>, <a href="http://www.reddit.com" target="_blank">Reddit</a>, <a href="http://www.furl.net" target="_blank">Furl</a>, <a href="http://del.icio.us/" target="_blank">del.icio.us</a>, <a href="http://ma.gnolia.com/" target="_blank">Ma.gnolia</a> son sólo algunos de ellos. </li> <li> Haz conexiones: diseñadores creativos son siempre mostrados. Si crees que tu trabajo vale la pena exhibirlo, hay varias galerías de webdesign: <a href="http://www.cssimport.com/" target="_blank">CSS Import</a>, <a href="http://www.webcreme.com/" target="_blank">WebCreme</a>, <a href="http://www.catalizado.com" target="_blank">Catalizado</a>, <a href="http://www.pixelmakers.net" target="_blank">Pixelmakers</a> son sólo algunos. </li> <li> No linkees cada palabra en tu artículo: esto es para los blogs. <a href="">Tratan</a> de <a href="">linkear</a> <a href="">cada</a> palabra a una <a href="">referencia</a> <a href="">externa</a>, y al <a href="">final</a> queda <a href="">un arcoiris</a> de <a href="">texto</a>, dependiendo de la hoja de estilos del sitio. Escoge ideas, frases, términos que crees son importantes de dar una segunda vuelta. Busca en Wikipedia, o relaciónalos con artículos que realmente aportan a lo que quieres expresar. </li> <li> Cree en lo que estás haciendo: nada de lo escrito hasta aquí ayudará si no crees en lo que haces, si no te gusta lo que diseñas o desarrollas. Trata de que siempre sea un aporte. Y si hay sitios similares, diferénciate y destácate en algo. </li> </ul> </li> </ul> </article> <article> <h1>Ejemplos de menúes con listas</h1> Thu, 09 Mar 2006 13:05:47 +0000 <a href="http://css.maxdesign.com.au/listamatic/" target="_blank">Listamatic</a>, un excelente link donde se muestran variados ejemplos de menúes construídos con <li>‘s: verticales, horizontales, tabbed, experimentales…. con código incluído. Para aprender, y para sacar de aprietos. </article> <article> <h1>CSS para móviles</h1> Tue, 07 Mar 2006 19:41:58 +0000 Un gran mercado que en Chile está despegando, lentamente dado en parte por el alto costo de la tecnología y los teléfonos móviles que la soportan, es el del webdesign para móviles. En general, del diseño de multimedios orientado para dispositivos móviles: teléfonos, PDA’s, etc. Por ello, es imprescindible que los diseñadores sepan que existe esta posibilidad, que está abierta a ser utilizada y que no es nada del otro mundo implementarla. Si ya tienes tu sitio <a href="http://en.wikipedia.org/wiki/Tableless" target="_blank">tableless</a>, es cosa de ‘esconder’ algunos div‘s para que no sean desplegados, y formatar algunos espacios para el ancho de pantalla del móvil. <h3 id="tamantildeos-de-pantallas">Tamaños de pantallas:</h3> Aquí comienzan los problemas. Claro, nada es perfecto. La mayoría de las pantallas son verticales; las menos apaisadas, y menos aún las que puedes escoger entre ellas. El tamaño más común hoy en dia corresponden a 176 x 208px. Algunos más antigos tienden al cuadrado (128 x 128px y 120 x 144px). PDA’s usualmente usan VGA (480 x 640px). Otros tamaños comunes son de 200 x 640px y 320 x 640px. <h3 id="peso-de-imaacutegenes">Peso de imágenes:</h3> La mayoría de los móviles no soportan millones de colores, como las pantallas. así que usar GIF en 32 colores, bien manejados, será suficiente. Simplificar al máximo los tonos utilizados será importante, ya que la pequeña pantalla y las condiciones en que el sitio será visto (en oscuro, a contraluz, caminando, acostado, etc.) no serán las mismas que en un computador, donde lo que se pretende es tener la mejor orientación posible del monitor. <h3 id="browsers">Browsers:</h3> <a href="http://www.opera.com/products/mobile/products/" target="_blank">Opera</a> lleva la delantera. Sus browsers v7 han destacado por su simplicidad, y se presentan con gran cobertura en sus diferentes soportes: <a href="http://en.wikipedia.org/wiki/Symbian" target="_blank">Symbian</a>, <a href="http://msdn.microsoft.com/embedded/windowsce/default.aspx" target="_blank">Windows CE</a>. Además, tiene buen soporte y renderizado de CSS 2. <h3 id="adaptando-tu-sitio">Adaptando tu sitio:</h3> Tan fácil como crear una nueva hoja de estilos. Aquí, deberás simplificar el contenido, mostrando sólo lo importante y esencial que quieres que el usuario vea. Nada de parafernalia. Importante es darle la propiedad al HTML que pertenezca a esta nueva hoja de estilo. A continuación: Screen: para desktops <pre><code class="language-markup"> <link rel=”stylesheet” type=”text/css” href=”pantalla.css” media=”screen” /></code></pre> HandHelds: para celulares, PDA´s, etc <pre><code class="language-markup"> <link rel=”stylesheet” type=”text/css” href=”moviles.css” media=”handheld” /></code></pre> display: none; es lo que usarás para ocultar div, p o lo que sea necesario. Mejor dicho, no necesario. Por ejemplo: <pre><code class="language-css">#super_imagen { display: none; }</code></pre> No necesitamos que una imagen gigante se van en nuestro celular. No lo queremos tampoco. width: 240px; será necesario formatear el ancho al deseado. max-width: 208px; también es importante, ya que permite que la columna o el contenedor no se pase de ese ancho. <pre><code class="language-css">body { max-width: 208px; }</code></pre> <h3 id="probaacutendolo">Probándolo:</h3> No necesitas utilizar un celular para ello. <a href="http://www.opera.com/products/mobile/dev/multiple/" target="_blank">Opera</a> trae una opción llamada Small Screen, donde te permite visualizar tu sitio con el media=“handheld”. Muy útil. <h4 id="links">Links:</h4> <ul> <li><a href="http://my.opera.com/community/dev/device/writing/" target="_blank"><a href="http://my.opera.com/community/dev/device/writing/">http://my.opera.com/community/dev/device/writing/</a></a></li> <li><a href="http://www.opera.com/products/mobile/dev/multiple/" target="_blank"><a href="http://www.opera.com/products/mobile/dev/multiple/">http://www.opera.com/products/mobile/dev/multiple/</a></a></li> </ul> </article> <article> <h1>Lo ví y me gustó 8</h1> Mon, 06 Mar 2006 19:21:48 +0000 #8 – 06 Marzo 2006 <a href="http://www.carloscabrera.com.ar/" target="_blank"></a> <a href="http://www.tclo.be/" target="_blank"></a> <a href="http://regularworld.com/" target="_blank"></a> </article> <article> <h1>Usa cualquier Fuente con CSS</h1> Fri, 24 Feb 2006 17:19:03 +0000 ¿Cansado de usar las mismas tipografías por defecto? Tuviste que cambiarte a <a href="http://www.macromedia.com/software/flash/flashpro/" target="_blank">Flash</a> por este motivo? Pues hay un antiguo método para que puedas utilizar cualquier fuente <a href="http://en.wikipedia.org/wiki/Truetype" target="_blank">TrueType</a> en un sitio construído en HTML. Es bastante simple, pero necesita de algunos pasos previos y ciertos conocimientos. Démosle: ¿Porqué encrustar una fuente? Una tipografía es un recurso del sistema operativo, no del browser. Si diseñas y construyen un sitio web localmente, en tu computador, utilizando una fuente no típica, por ejemplo, <a href="http://upload.wikimedia.org/wikipedia/en/9/9f/Futura_proper.png" target="_blank">Futura</a>, la podrás visualizar sin problemas. Pero no quien la visita y no la tiene instalada. Aquí comienzan los problemas. <a href="http://www.macromedia.com/software/flash/flashpro/" target="_blank">Flash</a> fue durante mucho tiempo muy utilizado por esto, ya que permite ‘incrustar’ la fuente en al ingresarla como Static Text, y en el caso de la caja de texto ser dinámica, permite incluirla entera, o ciertos caracteres (lo que aliviana el peso del <a href="http://en.wikipedia.org/wiki/Swf" target="_blank">swf</a> final). Pero con el crecimiento del uso de CSS en la web, se puede percibir claramente que se puede construir todo lo que hace <a href="http://www.macromedia.com/software/flash/flashpro/" target="_blank">Flash</a> (bueno, casi todo) con AJAX y otros trucos. Y esto mucho más liviano, quizás algo más difícil. Lo que hace el uso de Javascript aún exclusivo para desarrolladores, y no tan divulgado entre diseñadores. Pero bueno, esto es materia para otro artículo. ¿Porqué no incluir una fuente? <ul> <li>Esto sólo funciona en IE 4+ y Netscape 5+. Si cierto browser no la reconoce, ignoran el código.</li> <li>Aumenta el peso del sitio, ya que al incluir la tipografía, dependiendo de ella pueden ser desde 20kb hasta 500kb cada una. Si no sabes optimizar la cantidad de caracteres necesarios a ser utilizados, mejor olvídate de esto.</li> <li>Es inseguro. Por lo menos eso es lo que creen los browsers, al tener que bajar una fuente para visualizar un sitio el browser lo encontrará inseguro y advertirá de ello. Un usuario común suele tener miedo a estos mensajes de advertencia, más aún por la moda actual de ataques de <a href="http://es.wikipedia.org/wiki/Spam" target="_blank">spamware</a>.</li> <li>Es necesario el uso de un software especial para convertir una fuente <a href="http://en.wikipedia.org/wiki/Truetype" target="_blank">TrueType</a> .ttf en <a href="http://msdn.microsoft.com/workshop/author/fontembed/font_embed.asp#Embedded_Font_Techno" target="_blank">Embeddable Open Type</a> .eot.</li> </ul> Me preocupan más los contras que los pro, así que para mí no es una opción. Sólo si necesito un caracter muy especial y no puedo utilizar un gif. Así que en este artículo mi intención es sólo mostrar que existe esta posibilidad y cómo se hace. No explicaré más allá, o paso a paso. Conversión de la tipografía: El estándart es propio de Microsoft (más un motivo para no utilizarlo). El software <a href="http://www.microsoft.com/typography/web/embedding/weft3/default.htm" target="_blank">WEFT</a> convierte la tipografía en un .eot, lo que permite ser bajado y leído por IE. Código: agregando la fuente: El CSS utilizado quí es bastante simple, por lo que no debería dar mayores problemas: <pre><code class="language-css">@font-face { font-family: "LaMiaOriginal"; src: url(LaMiaOriginal.eot); } H1 { font-family: "LaMiaOriginal", "Verdana", sans-serif; }</code></pre> Siempre es bueno además agragar una tipografía estándart en font-family, ya que en caso de error en la tipografía que estás incrustando, se depliega la que más se parezca, definido por el diseñador. El resto queda por cuenta de cada diseño. Links: <ul> <li><a href="http://msdn.microsoft.com/workshop/author/fontembed/font_embed.asp#Embedded_Font_Techno" target="_blank">Microsoft: About Font Embedding</a></li> <li><a href="http://www.microsoft.com/typography/web/embedding/weft3/default.htm" target="_blank">WEFT 3</a></li> </ul> </article> <article> <h1>Menú horizontal y algo +</h1> Mon, 20 Feb 2006 21:35:03 +0000 Debido al pedido del público fiel lector de CSSLab, me puse las pilas y anoto un artículo más con una vieja pero nunca mal ponderada técnica para construir menús de listas horizontal (usando <ul> y <li>), pero en esta oportunidad le agregaremos un rollover, ya q he recibido la inquietud de parte de <a href="http://www.escritorasyescrituras.com/" target="_blank">Bane</a> de cómo aplicar el artículo anterior ‘<a href="http://www.csslab.cl/?p=19" target="_blank">Rápidos rollovers con CSS</a>‘ en este tipo de despliegue. Vayamos al grano: Lo primero es lo primero: creamos el menú con 1 <div>, 1 <ul> y varios <li>‘s: <pre><code class="language-markup"><div id="menu"> <ul> <li><a href="#">Más Izquierda</a></li> <li><a href="#">Izquierda</a></li> <li><a href="#">Derecha</a></li> <li><a href="#">Más derecha</a></li> </ul> </div></code></pre> Le vamos a dar color y forma a esto. Agregando estilo a #menu: <pre><code class="language-css">#menu ul { padding: 0px; margin: 0px; background-color: #333; list-style: none; font-size: 14px; font-weight: bold; width: 100%; height: 30px; float: left; }</code></pre> y el punto clave: horizontalizando a través de display: inline; <pre><code class="language-css">#menu ul li { display: inline; }</code></pre> Hasta aquí, nada fuera de lo común. Nos falta agregar algo bonito para que se vea bien en un rollover, algo simple. Un cambio de color: <pre><code class="language-css">#menu ul li a:link, #menu ul li a:visited { background-color: #333; color: #FFF; padding: 5px 15px; float: left; text-decoration: none; } #menu ul li a:hover, #menu ul li a:active{ color: #F30; background-color: #CCC; height: 20px; }</code></pre> [Ver resultado parcial.][1]{.verejemplo} Nuestro menú básico horizontal está hecho y funciona de maravilla. Ahora agreguémosle un rollover con imagen de fondo (background-image en vez de background-color) y que las instancias estén en un mismo gif: <h3 id="gif-del-alink-y-ahover">Gif del a:link y a:hover</h3> Solamente reemplazaremos donde antes habíamos seteado los parámetros relacionados con el fondo (background-image): <pre><code class="language-css">#menu ul { padding: 0; margin: 0; background-image: url("fondo_menu.gif"); background-repeat: repeat; background-position: 0 0; background-color: #333; list-style: none; font-size: 14px; font-weight: bold; width: 100%; height: 30px; float: left; } #menu ul li a:link, #menu ul li a:visited { background-image: url("fondo_menu.gif"); background-repeat: repeat; background-position: 0 0; color: #fff; padding: 5px 15px; float: left; text-decoration: none; } #menu ul li a:hover, #menu ul li a:active{ color: #900; background-position: 0 -30px; background-color: #ccc; height: 20px; }</code></pre> [Ver resultado final.][2]{.verejemplo} Una aclaración: en vez de resumir el background colocando aquí todos los parámetros (url, posición, repetición), preferí hacerlo cada uno en su respectivo atributo. Con esto, <a href="http://www.apple.com/macosx/features/safari/" target="_blank">Safari</a> lo puede leer fluído y no deja errores al desplegar el fondo. Además no me gusta resumir mucho. Otra aclaración: a diferencia del <a href="http://www.csslab.cl/?p=19" target="_blank">otro tutorial</a> donde se explica lo mismo pero en un menú vertical, aquí el cambio de posición para mostrar la posición del fondo_menu.gif es de manera vertical, no horizontal: background-position: 0 -30px; donde fije el alto de la botonera en 30 pixeles para un despliegue exacto de las instancias de los botones. Disculpa <a href="http://www.escritorasyescrituras.com/" target="_blank">Bane</a> por el retraso en la respuesta a tu inquietud. Espero ahora te resulte. [1]: <a href="http://www.csslab.cl/ejemplos/menu_list.html">http://www.csslab.cl/ejemplos/menu_list.html</a> “Enlace en CSSLab.cl a “Resultado parcial de Menú Horizontal”” [2]: <a href="http://www.csslab.cl/ejemplos/menu_hover.html">http://www.csslab.cl/ejemplos/menu_hover.html</a> “Enlace en CSSLab.cl a “Resultado final de Menú Horizontal”” </article> <article> <h1>Lo ví y me gustó 7</h1> Thu, 16 Feb 2006 12:34:55 +0000 Lo ví y me gustó #7 – 16 Febrero 2006 <a href="http://www.property-investment-network.com/" target="_blank"></a> <a href="http://www.cabanadigital.com/" target="_blank"></a> <a href="http://www.threepoles.com/" target="_blank"></a> </article> <article> <h1>Lo ví y me gustó 6</h1> Fri, 13 Jan 2006 18:10:39 +0000 Lo ví y me gustó #6 – 13 Enero 2006 <a href="http://www.davyvandenbremt.be/" target="_blank"></a> <a href="http://www.braziltour.com/site/en/home/index.php" target="_blank"></a> <a href="http://www.circodeliaproducciones.com/" target="_blank"></a> </article> <article> <h1>Usando tablas… o no?</h1> Mon, 09 Jan 2006 13:05:42 +0000 La corriente actual nos dice: «no uses tablas al diagramar un sitio web…» Pero si están bien utilizadas, siguen siendo de gran ayuda, ya que su compatibilidad con browsers es por años y por versiones comprobadas. En el <a href="http://www.456bereastreet.com/archive/200410/bring_on_the_tables/" target="_blank">siguiente link</a>, se muestra la forma correcta de utilizarlas. Si quieres seguir utilizando tablas, en <a href="http://icant.co.uk/csstablegallery/index.php" target="_blank">esta galería</a> se muestran buenos estilos que se pueden integrar a un tabla. Atrévete y envía el tuyo. Feliz año atrasado a todos. link: <ul> <li><a href="http://www.456bereastreet.com/archive/200410/bring_on_the_tables/" target="_blank">Bring on the tables</a></li> <li><a href="http://icant.co.uk/csstablegallery/index.php" target="_blank">CSS Table Gallery</a></li> </ul> </article> <article> <h1>Lo ví y me gustó 5</h1> Fri, 16 Dec 2005 20:01:49 +0000 #5 – 16 Diciembre 2005 Gracias a todos los aportes en ‘Envía tu Sitio’. El criterio que ocupo al revisar un sitio, es que primero, sea construído en CSS (aunque no completamente); que gráficamente sea atractivo, y que se vea bien en diferentes browsers y plataformas (no importa q sea o no válido por W3C). <a href="http://www.mayflower-school.co.uk/" target="_blank"></a> <a href="http://www.revolucao.etc.br/css/" target="_blank"></a> <a href="http://www.kutztown.edu/acad/commdes/" target="_blank"></a> </article> <article> <h1>Lo ví y me gustó 4</h1> Fri, 02 Dec 2005 15:15:06 +0000 #4 – 2 Diciembre 2005 <a href="http://web.burza.hr/" target="_blank"></a> <a href="http://www.camiseteria.com/" target="_blank"></a> <a href="http://www.una-terra.com/" target="_blank"></a> </article> <article> <h1>¿Strict o no Strict?</h1> Wed, 30 Nov 2005 19:49:55 +0000 Cuando creamos un nuevo documento HTML en nuestro editor favorito, no nos fijamos que se agregan un par de líneas de código que por ignorancia desconocemos, pero tienen gran importancia a la hora de renderizar la página y validar su estructura. En este momento, nos referiremos al DOCTYPE y los DTD. <blockquote> DOCTYPE: declaración que indica qué versión de HTML o XHTML se está usando en determinado sitio. Esto ayuda a que los browsers y las aplicaciones que se necesitan para visualizar la página sepan de forma correcta cómo abordarlo, además de la sintaxis y la gramática utilizada, logrando compatibilidad y accesibilidad. </blockquote> <blockquote> DTD (Document Type Definition): se definen los elementos necesarios para la correcta elaboración del documento. El DTD indica cómo y dónde realizar la validación, generalmente vía <a href="http://www.w3.org/" target="_blank" title="Enlace externo a "W3 Consortium"">W3C</a>. </blockquote>  En HTML es posible establecer tres tipos diferentes de documento: <h4 id="strict">Strict</h4> El documento debe estar regido por el HTML 4.0 o XHTML 1.0 de forma estricta, sin falla alguna. Se olvidan tags caducados, como <center>, y otros del mismo bando. Aquí la separación de la estructura y del contenido es clave, por lo que el CSS prima. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <h4 id="transitional">Transitional</h4> Es la más común, ya que mezcla la Strict con los antiguos tags que conocemos de HTML y que están ya en desuso por el consorcio que regula esto. Es un doctype transitorio, donde se supone debería caducar y dar paso a un masivo Strict. Con él se entrega apoyo a browsers que soportan mal las hojas de estilos (IE) y disponemos de flexibilidad a la hora de escribir el código de nuestra página, a costa de no entrar de lleno en el estándar y de perder un poco de accesibilidad. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h4 id="frameset">Frameset</h4> Este todos lo hemos utilizado alguna vez, sin saber que se está aplicando aquí. Frameset se utiliza cuando trabajamos con frames, o múltiples páginas contenidas y estructuradas dentro de otra ‘madre’. Esta última contiene el tipo FRAMESET. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <h3 id="iquesthtml-40-o-xhtml-11">¿HTML 4.0 o XHTML 1.1?</h3> <a href="http://www.w3.org/TR/xhtml1/" target="_blank" title="Enlace externo a "XHTML definition by W3C"">XHTML</a> es una reformulación de HTML que normaliza y modulariza este antiguo lenguaje. XHTML está basado en XML y por lo tanto puede funcionar con aplicaciones hechas para XML. Su finalidad es ser usado como lenguaje de contenidos que es a su vez conforme a XML. Algunas mejoras que pueden ser percibidas para quienes migran a XHTML 1.0 son: <ul> <li>Los documentos XHTML son conformes a XML. Como tales son fácilmente visualizados, editados y validados con herramientas XML estándar.</li> <li>Los documentos XHTML pueden escribirse para que funcionen igual o mejor que lo hacían antes, tanto en los agentes de usuarios conformes a HTML 4.0 como en los nuevos agentes conformes a XHTML 1.0.</li> <li>Los documentos XHTML pueden usar aplicaciones (scripts y applets) que se basen ya sea en el Modelo del Objeto de Documento (DOM) de HTML o XML.</li> <li>A medida que la familia XHTML evolucione, los documentos conformes a XHTML 1.0 estarán más preparados para interactuar dentro de y entre los distintos entornos XHTML.</li> </ul> Algunas diferencias entre XHTML y HTML: Se eliminan elementos no semánticos: <ul> <li>Desaparecen las etiquetas de HTML y <center> entre otras</li> <li>Desaparecen varios atributos de formato como valign=»» y bgcolor=»».</li> <li>El aspecto del documento se describe únicamente a través de hojas de estilo.</li> </ul> Al ser XML, se exige: <ul> <li>Incluir siempre la etiqueta “doctype” apropiada.</li> <li>Todas las etiquetas deben cerrarse, aunque sea poniendo una barra “/” ( pasa a ser ).</li> <li>Sólo pueden incluirse datos en formatos admitidos por XML. Esto da problemas para incluir Javascript en los documentos directamente.</li> <li>Los nombres y atributos de todas las etiquetas deben estar en minúsculas.</li> <li>Todos los atributos deben tener un valor, y estar entre comillas ( ahora es )</li> </ul> <h3 id="y-ahora8230-iquestqueacute-elijo">Y ahora… ¿Qué elijo?</h3> Depende de ti y del proyecto en que estás trabajando. Tarde o temprano tendremos que migrar al XHTML 1.1, por las buenas (lentamente, de acuerdo a lo que los que hacen los browsers permitan una correcta visualización del layout) o por las malas (nos enojamos, hacemos boicot y exigimos cambios, dado el exceso de canas y la ingesta de <a href="http://www.farmaciasahumada.cl/stores/fasa/html/MFT/PRODUCTO/P1501.HTM" target="_blank">Armonyl</a> tratando de hacer compatibles los sitios con los browsers). Si tienes habilidad, puedes empezar a escribir código en XHTML y probar suerte (con Mozilla, Opera y Safari). ¿Y qué pasa con los doctypes? Lo mismo, strict es lo que deberíamos anhelar, pero dado lo masivo de IE en los usuarios, es difícil hacer con que un código bien elaborado sea bien renderizado en IE 5+. Lo mejor es esperar un poco, usar transitional por mientras y anhelar que algún día las cosas cambien. En mi humilde opinión, claro. <h4 id="links">Links:</h4> <ul> <li><a href="http://es.wikipedia.org/wiki/XHTML" target="_blank" title="Enlace externo a "XHTML definition by W3C"">Wikipedia: XHTML</a></li> <li><a href="http://www.tejedoresdelweb.com/307/article-10152.html" target="_blank" title="Enlace externo a "Tejedores del Web"">Tejedores del Web</a></li> </ul> </article> <article> <h1>Cambiando la apariencia</h1> Tue, 29 Nov 2005 18:35:21 +0000 Un buen uso al CSS en un sitio web, es teniendo múltiples hojas de estilo con diferentes apariencias; así el usuario puede escoger el que más le plazca, según su ánimo, o como sea. A esto se le puede agregar en un JavaScript que cambie según la hora (día, noche), estación (verano, invierno), etc. Las posibilidades son muchas. Vamos al grano. Primero, se necesita llamar las 2 hojas de estilo: la principal (stylesheet) y la opcional (alternate stylesheet). <pre><code class="language-markup"><link rel="stylesheet" type="text/css" href="normal.css" title="normal"> <link rel="alternate stylesheet" type="text/css" href="oscuro.css" title="oscuro"></code></pre> El secreto está en la denominación de rel="", y en el title="" para luego llamarla. El browser va a cargar ambas al principio, pero solamente habilitará la que se contiene en rel=“stylesheet”. Ahora viene la magia. Con un JavaScript facilitado por A List Apart, que funciona de maravilla, se habilita la posibilidad de hacer el cambio casi instantáneo. El link, para bajarlo: <a href="http://www.alistapart.com/d/alternate/styleswitcher.js" target="_blank">styleswitcher.js</a> Agrégalo entre tus <head></head>: <pre><code class="language-markup"><script type="text/javascript" src="styleswitcher.js"></script></code></pre> Finalmente, resta incluir el llamado en el HTML de la función del cambio de estilos en un botón. Usaremos onclick="" para esto: <pre><code class="language-markup"><a href="#" onclick="setActiveStyleSheet('normal'); return false;">Normal</a> <a href="#" onclick="setActiveStyleSheet('oscuro'); return false;">Oscuro</a></code></pre> Vale mencionar que ese styleswitcher.js hace más que eso: puede identificar cual está activa y guardar la hoja de estilos actual en una cookie para que permanezca posteriormente, entre otras cosas. <a href="http://www.csslab.cl/ejemplos/cambio_estilo.html" target="_blank">Ver ejemplo.</a> Links: <ul> <li><a href="http://www.alistapart.com/articles/alternate/" target="_blank">A List Apart: Alternative Style</a></li> </ul> </article> <article> <h1>CSS & Tipografía… el dilema</h1> Mon, 28 Nov 2005 20:27:01 +0000 Al diseñar para la web, cada uno tiene sus mañas y sus costumbres. Actualmente, el mayor uso que se le da a la hoja de estilos, es para estilizar textos, dado el temor de diseñadores en meterse en este estraño mundo de códigos desconocidos, y que se sabe, que no es simple de implementarse. Un gotoAndPlay(); es el mismo desde Flash Player 5 a 8, Win o Mac; position: relative; puede no funcionar igual en IE, Firefox, Win, Mac… un lío. Un tema recurrente e importante de mencionar, se refiere sobre las medidas usadas para referirse a la tipografía desplegada en un sitio web. Algunos usan px, otros em. Incluso pt….. A continuación, una definición de cada uno, sus pros y contras: Existen 2 tipos de unidades: las fijas o absolutas, que tienen un sistema de medida fijo e invariable (teóricamente, porque igual existen diferencias entre browsers y plataformas) y las relativas, que se basan en las anteriores para fijar su tamaño. Absolutas: <ul> <li>in: inches o pulgadas – 1 pulgada son 2.54 centímetros.</li> <li>cm: centímetros</li> <li>mm: milímetros</li> <li>pt: points o puntos – en CSS2 un punto equivale a 1/72 de una pulgada.</li> <li>pc: picas – 1 pica son 12 points.</li> </ul> Relativas: <ul> <li>em: unidad de distancia igual al tamaño de un punto de una fuente.</li> <li>ex: x-height o altura-x. se basa en la altura de un caracter en minúscula.</li> <li>px: pixeles, relativo a la plataforma, al browser (soporte) y a la resolución de pantalla del usuario.</li> </ul> La unidad em debería ser la ideal, pero es la más problemática. Es la recomendada por la <a href="http://www.w3c.com" target="_blank">W3C</a> por ser equivalente a la propiedad FONT, que ya está obsoleta. Pero los problemas surgen cuando se relaciona con algún otro font-size anterior (parent), ya sea en el body{} o en un #id{}. En este caso, se basará en este de mayor rango para calcular su tamaño. Complicado a veces de entender. Ya los pixeles son familiares, pero depende mucho de la resolución del usuario del sitio, y de la plataforma. Windows suele estar configurado a 96 dpi; Macintosh usa 72 dpi por defecto. Personalmente acostumbro a usar px como unidad, tanto en fuentes como en layout. Estoy acostumbrado a ella, y me manejo bien. Ya las unidades absolutas, se recomienda usarlas exclusivamente para medios impresos, por ej. si haces una hoja de estilos exclusiva para impresión. El más utilizado en programas gráficos es el punto (pt). y para layout, cms. Links: <a href="http://www.thenoodleincident.com/tutorials/box_lesson/font/browser.html" target="_blank">Tabla de tamaños ordenados por browsers.</a> <a href="http://www.elsid.co.za/download/css_fontsizes.htm" target="_blank">Ordenados por tipos (absolutas – relativas).</a> </article> <article> <h1>Lo ví y me gustó 3</h1> Tue, 22 Nov 2005 20:43:05 +0000 #3 – 22 Noviembre 2005 <a href="http://www.infosion.de/" target="_blank"></a> <a href="http://www.juque.cl/" target="_blank"></a> <a href="http://www.massiveblue.net/" target="_blank"></a> </article> <article> <h1>Rápidos rollovers con CSS</h1> Tue, 22 Nov 2005 18:39:55 +0000 Cuando hacemos un rollover, lo usual es tener 2 o más imagenes cortadas iguales, pero con diferentes estilos (otro color, forma, sombra, etc) y cuando construimos el código que la hace funcionar, se usa comunmente: <pre><code class="language-css">#menu a { background: url("boton.gif") top left no-repeat; } #menu a:hover { background-image: url("boton_over.gif"); } #menu a:active { background-image: url("boton_activo.gif"); }</code></pre> A continuación, muestro una manera simple de ahorrar la carga de la imagen (gif o jpg). En realidad no es magia lo que haremos, solamente un truco que en vez de cargar una nueva imagen al hacer el hover, se trabajará por sobre una misma imagen, la que contendrá todas las instancias necesarias. Entonces lo bueno es que esta imagen se cargue completa la primera vez, y al hacer el hover, ésta se desplazará lo necesario para que muestre donde se encuentre la parte correspondiente a esa istancia; lo mismo si tiene un active. Pero le agregaremos algo más. Un sólo GIF, el que contiene las 3 instancias necesarias: link, hover y active OK, entonces usaremos la imagen arriba para que el botón muestre sus 3 instancias. Lo bueno es que se cargará sólo la primera vez (cuando se cargue el sitio completo), y cuando llamemos a otra instancia, esta imagen la desplazaremos los pixeles necesarios (a la derecha o izquierda) para mostrar la gráfica correspondiente. El código, a continuación: <pre><code class="language-css">#menu a { background: url("boton_rollover.gif") 0 0 no-repeat; } #menu a:hover { background-position: -150px 0; } #menu a:active { background-position: -300px 0; }</code></pre> Ahora, un pequeño detalle que se ha encontrado en esto, es que ciertos browsers han mostrado (IE Win) una demora en este desplazamiento del background, por lo que en este lapsus ninguna imagen es desplegada (el tiempo es muy poco, pero igualmente se nota y molesta visualmente). Para solucionar esto, solamente se integrará un div interior, el q contendrá un background con la misma imagen del boton. Así, cuando ocurra este espaciado, no quedará en blanco la instancia y mostrará siempre de fondo el botón: <pre><code class="language-css">#menu { background: url("boton_rollover.gif") 0 0 no-repeat; }</code></pre> <blockquote> <ul> <li>Esto funciona con todos los browsers que soportan CSS2 ( Firefox, Opera, IE, Safari etc).</li> </ul> </blockquote> <a href="https://csslab.cl/ejemplos/boton_rollover.html" title="Enlace para ver ejemplo final">Ver ejemplo final.</a>{.verejemplo} El código completo quedaría así: <pre><code class="language-css">#menu { margin: 0; padding: 0; width: 150px; height: 40px; text-align: center; background: url("boton_rollover.gif") 0 0 no-repeat; } #menu a { padding-top: 6px; width: 100%; height: 100%; display: block; overflow: hidden; font-family: Georgia, "Times New Roman", Times, serif; color: #333333; font-weight: bold; font-size: 24px; text-decoration: none; background: url("boton_rollover.gif") 0 0 no-repeat; } #menu a:hover { background-position: -150px 0; } #menu a:active { background-position: -300px 0; }</code></pre> </article> <article> <h1>media=»print» (actualizado)</h1> Tue, 15 Nov 2005 18:45:59 +0000 Es muy difundido hoy en día el CSS dentro del diseño de sitios web, y existe una gran exigencia por parte del usuario para que se puedan ver bien sus sitios en las más diferentes plataformas y los ya innúmeros browsers. Un importante medio que no es muy utilizado, y que sin embargo es muy fácil de ser aplicado para un resultado óptimo, es el de crear una hoja de estilos exclusivamente para que la página, y los ítems que desees sean impresos de la mejor forma posible, permitiendo al usuario ahorrar tinta y mejorar la visualización del contenido. Para esto, es necesaria una hoja de estilos nueva y el llamado respectivo entre <head> </head>: <pre><code class="language-markup"><link rel="stylesheet" type="text/css" media="print" href="print.css" /></code></pre> Lo primero a realizarse es duplicar la hoja de estilo del sitio, hecha para la distribución del contenido para pantallas (media=“screen”). No queremos trabajar doble, escribiendo todo el código CSS nuevamente. A partir de ahora, muchos valores deben ser reemplazados de px o em a cm y pt. Así que debes tener claro los tamaños y tipos de conversiones a ser realizadas. Un importante paso es tener claro qué es lo que queremos imprimir. Si todo el sitio, o solamente un artículo y el encabezado, o el imagotipo + menues + contenido… enfin, queda en ti saber cuál es el fin que persigues. En este artículo presentaré algo general, para que puedas profundizar y customizar tu mismo código como te dé la gana. Teniendo claro qué mostrar o qué no quiero que se imprima, a desmenuzar el código. El principal atributo será display: none; el que permite esconder lo que lo contiene, pero sin perder el espacio que lo soporta. Comencemos con un menú: <pre><code class="language-css">div#menu { width: 300px; color: #333; font-size: 11px; background: #999; } </code> Si queremos que el menú desaparezca: </pre> <pre><code class="language-css">div#menu { display: none; }</code></pre> Es necesario hacer esto con todo lo que no se requiere que se vea impreso. Se debe cuidar tb la diagramación, mientras mejor fluya el texto (más si el texto es largo) mejor. Para un mejor orden, se puede justificar el texto (text-align: justify;) y las imágenes se pueden posicionar usando float: left; o float: right; También será necesario darle un pequeño margen a los lados, para que el contenido no se vea muy a corte. 10% por cada lado será suficiente. Otro punto importante es el fondo, no queremos que se imprima el color o pattern que corresponda por lo que en body: <pre><code class="language-css">body { background: transparent; }</code></pre> Sobre el tema de los links, a veces es importante que se sepa que existe un enlace en cierto texto, por lo que se le aplica un simple código: <pre><code class="language-css">a:link, a:visited { color: #666; font-weight: bold; text-decoration: underline; background: transparent; }</code></pre> Esto nos da un color más suave que el resto del texto (si el texto es negro #000) y un underline para mayor diferenciación. Un buen truco y sólo en browsers que soportan bien CSS2, es el siguiente código: <pre><code class="language-css">a:after { content: " ( http://www.csslab.cl " attr(href) " ) "; font-size: small; }</code></pre> Nuevamente, esto funciona para Firefox (Mozilla) y Netscape. Lo que hace es desplegar, luego del link, la URL entre paréntesis [en este caso, CSSLab (http://www.csslab.cl) ]. Creo que eso es todo. Suerte y no gasten mucha tinta. <h4 id="links">Links:</h4> <ul> <li><a href="http://www.w3.org/TR/CSS21/generate.html#propdef-content" target="_blank" title="Enlace externo a &quot&content en W3C;quot;">content en W3C</a></li> <li><a href="http://www.alistapart.com/articles/goingtoprint/" target="_blank" title="Enlace externo a &quot&A List Apart: going to print;quot;">A List Apart: going to print</a></li> <li><a href="http://www.alistapart.com/articles/boom" target="_blank" title="Enlace externo a &quot&;A List Apart: printing a book with css: BOOM!quot;">A List Apart: printing a book with css: BOOM!</a></li> </ul> </article> <article> <h1>Lo ví y me gustó 2</h1> Mon, 14 Nov 2005 14:21:57 +0000 #2- 14 Noviembre 2005 <a href="http://www.cafeoperwien.at/" target="_blank"></a> <a href="http://www.soundfell.com/fell/" target="_blank"></a> <a href="http://www.workbench-music.com/" target="_blank"></a> </article> <article> <h1>Formulario sin tablas (actualizado)</h1> Tue, 08 Nov 2005 14:19:32 +0000 Usaremos un HTML lo más simple posible, para sí no tener conflictos de browsers (es bueno evitarlo desde el principio). Nótese que usé en vez de . Para browsers modernos esto es innecesario, pero se incluye precisamente para compatibilidad con browsers antiguos (nuevamente, para evitar conflictos). Además, se verá de todas formas en todos los browsers y no incomodará el CSS. <pre><code class="language-markup"><form> <label for="nombre">Nombre</label> <input id="nombre" name="nombre"/> <label for="direccion">Dirección</label> <input id="direccion" name="direccion"/> <label for="comuna">Comuna</label> <input id="comuna" name="comuna"/> </form></code></pre> Nótese que fueron utilizados ambos «ID» y «NAME» en los input. Esto se hizo porque los formularios que sólo tienen «ID» no envían su contenido al servidor, y los que tienen sólo NAME no linkean bien sus etiquetas. Así que para evitar más problemas se usaron ambos. A continuación, sigue el CSS: <pre><code class="language-css">label, input { display: block; width: 150px; float: left; margin-bottom: 10px; }</code></pre> <pre><code class="language-css">label { text-align: right; width: 75px; padding-right: 20px; }</code></pre> <pre><code class="language-css">br { clear: left; }</code></pre> Primero se les agregó a las etiquetas (label) e inputs el display: block permitiendo que se alineen. Lo demás es para mejorar la estética del layout, depende de cada diseñador. Finalmente, ambos tags reciben un float: left. Al declarar esto en ambos elementos, permite ignorar las diferencias en float entre Explorer y otros browser. Ni idea porqué funciona, pero funciona. <pre><code class="language-css">label,input { display: block; width: 150px; float: left; margin-bottom: 10px; } </code></pre> Algunas cosas más para que se vea mejor: <pre><code class="language-css">label { text-align: right; width: 75px; padding-right: 20px; }</code></pre> Finalmente como última cosa, se le da al tag br un clear:left, donde cualquier float definido anteriormente es cancelado. Debemos insertar un clear en algún lugar, o todas las etiquetas e inputs se alinearian uno al lado del otro, lo que no queremos (en este caso). Entonces se le inserta el clear en el br porque así Opera lo lee bien. Detalles de cada browser. <pre><code class="language-css">br { clear: left; }</code></pre> <a href="https://csslab.cl/ejemplos/formulario_css.html" target="_blank" class="verejemplo">Ver resultado final.</a> <a href="https://csslab.cl/ejemplos/formulario_estilo.html" target="_blank" class="verejemplo">Ver formulario con estilos.</a> </article> <article> <h1>Posicionando un objeto en el centro</h1> Mon, 07 Nov 2005 16:33:32 +0000 Aquí mostraré una manera de centrar un objeto (en este caso un imagen, aunque puede ser un div) en el centro del navegador utilizando CSS. Insertando una imagen : Inserte una imagen y agréguele un ID (en este caso, “centro”) <pre><code class="language-markup"> <img src="imagen_centrar.jpg" id="centro" /> </code></pre> Defina el tamaño del objeto: En el CSS, defina las dimensiones del objeto (img o un div). En este caso, el ancho y alto son de 150px. <pre><code class="language-css">#centro { width: 150px; height: 150px; }</code></pre> Momento de alinear: Llegó el momento de posicionar el objeto dentro de la pantalla. Aquí es donde está la clave. Se debe definir una posición absoluta, con un 50% del alto (top) y 50% de la izquierda (left), quedando en el medio. Un punto importante a saber, es que el CSS no usa el centro del objeto como referencia de posicionamiento, sino sus extremidades, por lo que lo que quedará centrado aquí será el extremo izquierdo superior del objeto (img). <pre><code class="language-css">#centro { width: 150px; height: 150px; position: absolute; top: 50%; left: 50%; } </code></pre> Para finalizar: Para lidar con este pequeño detalle, el que se notará bastante cuando una imagen (o div) es grande y quede corrida, se resta del margen superior e izquierdo (margin-top y margin-left) la mitad del tamaño de la imagen (en este caso, 75 px) para que así quede en el centro de la imagen el punto cero. <pre><code class="language-css"> #centro { width: 150px; height: 150px; position: absolute; top: 50%; left: 50%; margin-top: -75px; margin-left: -75px; } </code></pre> <a href="https://csslab.cl/ejemplos/imagen_centrar.html" target="_blank" class="verejemplo">Ver resultado final </a> </article> <article> <h1>Lo ví y me gustó 1</h1> Fri, 04 Nov 2005 14:07:04 +0000 #1 – 3 Noviembre 2005 <a href="http://www.thefarewellreason.com/index.php" target="_blank"></a> <a href="http://www.forgetfoo.com/" target="_blank"></a> <a href="http://www.morganbrown.com/home/" target="_blank"></a> <a href="http://www.pixeltect.com/" target="_blank"></a> </article> <article> <h1>No más Hacks (actualizado)</h1> Fri, 04 Nov 2005 14:06:29 +0000 En el trabajo de desarrollo en HTML + CSS, surgen varios problemas cuando se pretende que los sitios se desplieguen bien en diversos browsers y plataformas. Más aún cuando se trata de sitios grandes, portales, como los que me ha tocado construir o arreglar últimamente. Pero para paliar esto, nos aprovechamos de los mismos errores de los programadores en el rendereo del CSS en algunos browsers, como Internet Explorer (IE) por ejemplo, para solucionar precisamente esto. Por ejemplo, si una columna por X motivo de ve más ancha en IE que en Firefox y esto afecta a otros floats cercanos, esto se corrige en el CSS: #columna { width: 300px; _width: 290px; } En este caso, achicamos la columna solamente en IE 10 pixeles, usando el ‘_’ antes de la propiedad ‘width’. Con esto, IE solamente hará caso a la propiedad con ‘_’ e ignorará la otrapor alguna extraña razón. Firefox ni se dará cuenta de que existe, ya q realmente no existe, no es válido en CSS. Un dato: cuando construyo un layout entero en CSS, primero lo hago fijándome encómo se ve en Firefox, ya que es el que mejor renderiza el CSS y el que mejores resultados se obtiene. Con esto, me aseguro que Safari, Netscape, Mozilla, Camino, Opera se vean no bien, pero decentes. Luego me preocupo de los hacks para IE y que se vea bien, ya que el cliente y el 80% (y bajando, por suerte) del mundo que navega usa este browser monopólico. Hace poco me tocó la mala suerte de tener que hacer que un sitio no menos importante se vea aceptable en IE5 para Macintosh, fácil el peor browser que ha existido. Fue un suplicio, pero finalmente logré que se viera bien un diminuto menú (explicaré unos tips en otro post), y hablando con la persona encargada, me comentó que ya no hacen soporte para este browser, y si llaman reclamando, les dicen cortesmente ‘mejor usa Firefox’. Buena respuesta. Me puse a pensar.. ¿Qué hacer para aportar a una mejor usabilidad, y un mejor diseño web? Por algo el uso del padrón Web (W3C) y la moda que es el CSS actualmente se demoró tanto en aparecer, pues este ‘lenguaje’ no es nada nuevo, existe desde 1996. Para las personas (me incluyo) es mucho más fácil armar con tablas un sitio, ya que se verá bien a la primera en casi todos los browsers… Pero ahora la situación es diferente. Debemos abogar por una mejor calidad y accesibilidad en la nacegación y despliegue de los contenidos. Así como un médico debe hacer lo mejor posible por un paciente, nosotros no debemos ser flojos y facilistas y tomar el camino menos tortuoso. Actualmente mi batalla va en dirección a los browsers. Especialmente IE. Si la mitad mas 3/4 lo usan, no quiere decir que es porque es bueno. Es porque ya estaba instalado y a la gente no le importa buscar una alternativa, creen que es el indicado. Si 2/5 usan IE5, mal es. Se debe abolir ese browser, muy antiguo y ya descontinuado. Hay 2 simples pasos que como diseñadores / desarrolladores podemos contribuir a que por lo menos hagan un upgrade. <ul> <li> Usar @import para importar (no atachar) la hoja de estilo (CSS), de la siguiente manera <style type="text/css" media="all"> <!– @import url("file:///D|/mein/catalizado/armando/css/layout.css"); –> </style> Esto porque esta manera de importar el CSS no es válido para browsers antiguos. Así de simple. No van a cargar la hoja de estilos, y el sitio no se va a ver bien. <a href="http://imfo.ru/csstest/css_hacks/import.php" target="_blank">Aquí hay un link con una tabla de browsers q lo soportan o no</a>.</li> <ul> <li>Usas uno de los banners entregados por <a href="http://www.w3junkies.com/toocool/join.php" target="_blank">W3 Junkies</a>. Es una buena iniciativa, con 3 bonitas imagenes (si no te gusta ninguna, tb tienen el PSD para q lo modifiques a tu criterio). Están en formato PNG, que como muchos saben, no es soportado por IE (hasta ahora) y ademas el CSS que usa para desplegarlo en el rincón inferior-izquierdo del sitio no lo lee bien IE. Al hacer click sobre la imagen, muestra una lista de buenos browsers e invita a probarlos. Simple y directo.</ul></li> </ul> A todo esto, decidí escribir algo sobre esto al leer un artículo de <a href="http://www.stylegala.com/" target="_blank">Stylegata</a> , <a href="http://www.stylegala.com/articles/no_more_css_hacks.htm" target="_blank">No More Hacks</a>. Y hurgueteando por <a href="http://www.google.com/search?hl=en&q=no+more+css+hacks&btnG=Google+Search" target="_blank">Google</a>, descubrí que no somos pocos los que pretendemos lo mismo: <ul> <li><a href="http://www.456bereastreet.com/archive/200510/stop_using_css_hacks_now/" target="_blank">456 Besea St.</a></li> <li><a href="http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx" target="_blank">IEBlog</a></li> <li><a href="http://jeffcroft.com/blog/links/archives/2005/06/no_more_css_hac.php" target="_blank">Jeff Croft </a></li> </ul> </li> </ul> </article> <article> <h1>Layout básico – 3 columnas</h1> Fri, 04 Nov 2005 14:05:56 +0000 Como primer artículo, mostraré cómo construir un layout con 3 columnas tableless, o sea, sin tablas, sólo con CSS. Se construyen 3 ‘columnas’ con ‘div’ en HTML bruto: <pre><code class="language-markup"><div id="todo"> <h1>Layout con 3 Columnas</h1> <div id="izquierda">Izquierda</div> <div id="derecha">Derecha</div> <div id="contenido"> Contenido </div> </div></code></pre> Luego, comenzaremos a darle estilo con CSS. Aquí se definirán parámetros, primero, para el ancho del div contenedor #todo: <pre><code class="language-css">#todo { width:700px; }</code></pre> Le fijamos el ancho a la columna de la derecha y de la izquierda: <pre><code class="language-css">#izquierda, #derecha { width:150px; }</code></pre> y no nos olvidemos de la columna central: <pre><code class="language-css">#contenido { width:370px; }</code></pre> Queda darle la posición a cada columna, para esto usaremos float: <pre><code class="language-css">#izquierda { float: left; } #derecha { float: right; }</code></pre> Y le fijamos un margen para el div del centro, para que la columna de la izquierda no se vea afectada: <pre><code class="language-css">#contenido { margin-left: 160px; }</code></pre> <a href="https://csslab.cl/ejemplos/basico_3columnas.html" target="_blank" class="verejemplo">Ver resultado final </a> <a href="https://csslab.cl/ejemplos/basico_3columnas_estilo.html" target="_blank" class="verejemplo">El mismo pero con colores</a>: <pre><code class="language-css">#todo { width:700px; background-color: #666; } h1 { font-family: Georgia, Tahoma; color: #FFF; text-align: center; } #izquierda, #derecha { width:150px; background-color: #333; font-family: Georgia, Tahoma; color: #FFF; text-align: center; } #contenido { width:370px; background-color: #FFCC00; font-family: Georgia, Tahoma; color: #333; text-align: center; font-weight: bolder; } #izquierda { float: left; } #derecha { float: right; } #contenido { margin-left: 160px; }</code></pre> Listo, la estructura está terminada. Ahora, a darle más estilos y llenar el contenido del sitio. </article> <article> <h1>Bienvenidos</h1> Fri, 04 Nov 2005 13:58:34 +0000 Bienvenidos a CSS Lab, la intensión de este sitio es hablar un poco sobre la <a href="http://es.wikipedia.org/wiki/XHTML" target="_blank">XHTML</a>, <a href="http://www.w3.org/" target="_blank">web standarts</a>, las ventajas de <a href="http://es.wikipedia.org/wiki/CSS" target="_blank">CSS</a> y cómo migrar hacia un diseño y desarrollo web óptimo y accesible. Nuestra misión es crear sitios que puedan ser vistos por todos. Si llegaste aquí, es porque ya sabes lo que es CSS y tienes una noción a respecto. No enseñaré lo que hace cada comando y parámetro, sólo cómo usarlos. Si no tienes idea de lo que ha leído hasta ahora, sírvase <a href="http://es.selfhtml.org/css/intro.htm" target="_blank">hacer click aquí.</a> Si tienes dudas sobre CSS, nuestros foros están a su disposición. Espero que se crea una comunidad en torno al XHTML chilena, y mejor aún si traspasa fronteras. ¿Sugerencias? Usa la página de contactos. </article> </main></body></html>

Posts on CSSLab

De Design System a Instruction System

¿Siguen siendo necesarios los Design Systems en la era de agentes de IA?

El rol histórico del Design System

El cambio de paradigma: IA + instrucciones (skills)

Lo que la IA puede reemplazar parcialmente

Lo que NO desaparece (todavía)

De Design System a Instruction System

Enfoque tradicional

Enfoque con IA

Hacia un modelo híbrido

Últimas palabras

Para leer más:

CSS View Transitions: guía técnica de @view-transition

¿Qué es @view-transition?

Propiedades

Ejemplo:

Soporte actual en navegadores

Limitaciones técnicas

Referencias

<meter> y <progress> de HTML5

Uso y diferencias de cómo usar meter y progress de HTML5

La etiqueta <progress>:

La etiqueta <meter>:

Demo:

JavaScript:

Compatibilidad con navegadores:

Links:

CSS text-wrap: La nueva forma de controlar saltos de línea

¿Qué es text-wrap?

El problema de los textos solitarios

text-wrap: pretty

text-wrap: balance

Demo

Combinando con otras propiedades de texto

Soporte en navegadores

Links

¿Qué es @container en CSS y cómo se usa?

¿Qué es @container?

Ejemplo básico: Cambiar layout de una tarjeta

HTML:

CSS:

Consultas más específicas: container-name

CSS:

Demo:

Links:

Transparencia a un color declarado como variable en CSS

Definir Variables de Color en CSS

La transparencia en CSS

La función color-mix()

Links:

Vite + Vue + Ant Design System + custom design

El proceso

Instalación original

La configuración

Antdv modificado

Ver demo

Pensamientos del futuro próximo

Evento clear de un input search

Links:

Detectar dark-mode en browsers

Hechos:

CSS:

JS:

Links:

Evitar el spam del mailto (el que he utilizado)

Tip 1:

Tip 2:

Ver resultado final:

Codepen

Reset de todas las propiedades CSS de selectores con una sola propiedad: all

Codepen

Codepen

Codepen

Últimas observaciones

Soporte:

Link:

Autocorrección de input en móviles

autocorrect=“off”

autocapitalize=“off”

La etiqueta `<progress>`:

La etiqueta `<meter>`: