Ventana modal sólo con CSS

A raíz de mi proyecto musical 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 tomé prestado la idea, utilizaban Javascript puro para ello. Mostraré ambos métodos, a gusto y necesidad del usuario cuál decidir ocupar.
Leer más →

Review 1: Origo CSS

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 Blueprint o Yahoo! UI. 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.
Leer más →

Mootools: introducción

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 Mootools, 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 Wikipedia), los frameworks Javascript (pueden ser de otros tipos) son una arquitectura que modela las relaciones del lenguaje Javascript.
Leer más →

Medidas en CSS

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.
Leer más →

Siendo específico

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.
Leer más →

Un par de preguntas

Hace un tiempo ya se me contactó a través de este mismo sitio para una breve entrevista para el blog de Luis Alarcón, 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:
Leer más →

Un poco sobre Microformatos

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.
Leer más →

Videocast 2: menú con listas

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.
Leer más →

Borde interno con CSS

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:
Leer más →

Una nueva dicotomía

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 leyendo un artículo, 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.
Leer más →