Contenido

Diferencia de color entre Safari vs Camino

23 sep

+ 5

Curiosa imagen en la que podemos ver, las diferencias de visualización de imagenes de los diferentes navegadores. Evidentemente el trato a las imagenes, está desarrollado en el núcleo del navegador y como podemos ver, varía de uno a otro. Muchas diseñadores, tienen estas diferencias en cuenta ya que hacen que una aplicación basadas en imagenes se vea de forma incorrecta.

1424292900_96cd7420e5_b.jpg

Yo, como desarrollador sin gusto, nunca me hubiera enterado de esta diferencia ya que mi mente omite toda información relacionada con el color o el diseño en general :D. Pero menos mal que hay otros que si perciben estas diferencias.

Dando estilo a los elementos input type=file

10 sep

+ 11

Eduo, me avisa del nuevo artículo de Shauninman en el que nos enseña como decorar con CSS y Javascript estos elementos tan descuidados.

<input type=”file” />

Los elementos file, son los más descuidados, en cuanto a diseño, de todos los elementos <input />. Estos elementos nos permite interactuar con el sistema operativo enviando ficheros desde nuestro PC al servidor remoto. Pero el tema del diseño era algo delicado ya que no hay nada estandarizado para todos los navegadores que nos permita darle el toque estético que nos gustaría darle.

Gracias al conjunto de CSS y Javascript, podemos hacer posible esta transformación.

HTML

<label class="cabinet">
    <input type="file" class="file" />
</label>

Primero añadimos las clases necesarias para que se apliquen los estilos.

CSS

.SI-FILES-STYLIZED label.cabinet
{
    width: 79px;
    height: 22px;
    background: url(btn-choose-file.gif) 0 0 no-repeat;

    display: block;
    overflow: hidden;
    cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

Definimos los estilos teniendo en cuenta las clases insertadas anteriormente y la clase que nuestro script le insertará a nuestro nuevo elemento file modificado. 

Javascript

<script type="text/javascript" src="/path/to/si.files.js"></script>
	SI.Files.stylizeAll();  
//o 
	SI.Files.stylizeById('input-id');

Aplicamos el javascript para hacer que nuestro puntero siempre haga click en nuestro nuevo botón.

La magia

Desde nuestro CSS, le damos al elemento <label /> con class cabinet, la imagen que irá como background-image. Por otro lado hacemos que la opacidad de nuestro <input type="file" /> sea 0, dejándolo invisible para los seres humanos, pero no para el navegador, que permite hacer click sobre él sin ningún tipo de problema.

Finalmente el javascript hará que nuestro puntero accione siempre nuestro elemento file.

Compatibilidad

Con IE5.5+, Firefox 1.5+, Safari 2+

[Demo][Descargar]

El problema de desarrollar para un solo navegador (sea el que sea)

2 sep

+ 23

Esto es lo que pasa cuando desarrollas para un solo navegador, ya sea Internet Explorer como Firefox….

diggtechnology_opera.jpg

¿Llegaremos a convertir a Firefox en el nuevo Internet Explorer? Desarrollemos para todos y cada uno de los navegadores, no podemos olvidarnos de nadie!!

Zebra tables con MooTools

14 ago

+ 9

La zebra tables, son aquellas que podemos ver en cualquier sitio en el que se diferencian las filas (o columnas) con colores. Generalmente con el típico patrón de uno si, uno no :D

Ahora con MooTools eso es tan simple como insertar 2 líneas 1 línea de código a tu Javascript. Estas líneas se encargarán de encontrar las filas de nuestra tabla definida por una clase y le vamos añadiendo una clase al <tr /> que condicionará el color de nuestra fila.

$$('table.shade-table tr').each(function(el, count) {el.addClass(count % 2 == 0 ? 'odd' : 'even');});

Solo nos quedará el definir las clases que darán color a nuestras filas, para ello lo haremos añadiendo 2 estilos CSS en nuestro fichero de estilos.

.odd       { background:#ccc; padding:3px; }
.even      { background:#eee; padding:3px; }

Gracias Daniel Niquet por el apaño, una sola línea mejor que dos :D

¿Fijo, fluido o elástico? ¿Que estructura elegir para nuestra web?

14 ago

+ 7

Siempre que nos sentamos delante del ordenador para empezar un proyecto, suelen pasarnos por la cabeza unas cuantas premisas que condicionarán nuestra aplicación. Para empezar, deberíamos haber definido las necesidades y los requerimientos, y de ahi obtendríamos los puntos para partir en el viaje de la creación de cualquier aplicación web.

Despues de cosas, como la base de datos, la navegación por el sitio y las funcionalidades que el usuario podrá utilizar, debemos plantearnos el diseño de nuestra aplicación. Y para ello no solamente tendremos que tener en cuenta colores, y/o tipografias, sinó que tambien debemos elegir que tipo de estructura queremos para nuestra criatura.

Podemos optar por un diseño fluido, que se ajuste al navegador, o un diseño fijo para mantener una estética definida, en este punto tan subjetivo debemos tener presente que estructura nos conviene para cada proyecto. Pero para ello debemos conocer los pros y los contras de cada uno estos layouts (estructuras).

Diseño fijo (Fixed Width)

El diseño fijo, es aquel que como su nombre indica nos aporta el tamaño de nuestra estructura en unas medidas inalterables por nuestro navegador.

Pros

  • El areal de lectura está rigurosamente controlada, sin necesidad de controlar tamaños mínimos ni máximos.
  • Al ser un ancho fijo, hace más fácil el diseñar sobre él.
  • 760px (ancho típico para resoluciones 800×600) son los más óptimos para la lectura.

Contras

  • Al amplicar el tamaño de la fuente, el diseño no varía, rompiendo la estética de la línea.
  • Gente con monitores más pequeños que el ancho definido tienen problemas con la página.
  • Gente con monitores más grandes ven los diseños fijos muy pequeños.

Consejos de uso

  • Posiciona el contenido a la izquierda, de esa manera los monitores 640×480 podrán ver el contenido principal sin hacer demasiado scroll.
  • Asegurate de tener una CSS para otros dispositivos (handheld, projection,…)

Diseños Fluidos o Líquidos (Fluid or Liquid Layout)

Estos diseños fueron creados para no tener un tamaño definido, y permitir que los monitores pueden condicionar el tamaño de salida. Usando porcentajes (%) podremos definir el tamaños de los elementos de nuestra aplicación web para definir un diseño fluido que se adapte a cualquier monitor.

Ejemplo

Pros

  • Si lo has hecho bien, tu diseño se podrá adaptar a cualquier monitor y/o dispositivo.
  • El diseño fluido es considerado el más purista.
  • Más contenido puede ser mostrado sin necesidad de scroll.

Contras

  • Demasiado contenido disponible y un fuerte deseo de llenar los espacios en blanco pueden afectar a la usabilidad. Demasiado contenido, puede confundir al usuario y dar una sensación de congestión.
  • Problemas con Internet Explorer (6 o inferiores) para controlar los tamaños máximos (max-width).

Consejos de uso

  • Usa esta estructura intensionadamente. No lo uses para aparentar o por que esté de moda.
  • Si estás creando un diseño fluido con areas de contenido fijo, en esencia estás haciendo un hibrido. Ten cuidado con la mezcla de medidas.
  • Si así y todo piensas en crear un híbrido,asegurate que se vea en monitores 800×600.

Más Info

Diseños Elásticos (Elastic Layouts)

Son aquellos que usan medidas relativas basadas en (em), una medida muy usada para el tamaño proporcional de nuestros textos. Permitiendonos que nuestro textos crezcan condicionados con el tamaño de los elementos padres.

Ejemplos

Pros

  • Si lo haces bien, se trata de una estructura muy estable, ya que todo se redimenciona al mismo ratio.
  • Un diseño elástico es un reto.

Contras

  • Aparte de ser el diseño de moda, no hay muchas más ventajas por usarlo.
  • A menos que esté limitado este diseño puede ser un desastre para la usabilidad.

Consejos de uso

  • Si haces un diseño elástico, asegurate de que funcione en monitores pequeños.
  • Limita la máximo del ancho con medidas fluidas, haciendo un theme híbrido, pero más seguro. {width:60em; max-width:98%;}
  • Recuerda que IE 6 no soporta max-width, intenta que la línea de texto no haga la necesidad de usar el scroll horizontal en monitores a 1024×768.

Sandbox: Clases dinámicas para pulir el CSS

8 ago

+ 9

Hace unos días comentabamos que Sandbox era el theme semántico por excelencia, pero…

¿por que es tan semántico?

Sandbox, usa el atributo class de los elementos para informar una cantidad de datos referentes a una página y/o entrada concreta. Esto nos da lugar a elementos HTML similares a este.

<body class="wordpress y2007 m08 d06 h06 home">

Como podemos ver, todas esta información está cargando una cantidad de información semántica no visible al usuario bastante importante, pero…

¿Como podemos hacer que el usuario la vea?

Evidentemente podemos aprovecharnos de nuestros CSS para hacer que cada elementos concreto se vea de una forma determinada, para ello usaremos definiciones de todas las clases. Que como es obvio, deberemos conocer :D

¿Como se generan las clases?

Dependiendo del lugar que mostramos, las clases se generan mediante una función u otra determinada. Estas funciones definen una serie de nombres de clases basadas en algunas estáticas y otras dinámicas que van cambiando dependiendo de la fecha, el autor, la categoría,…

Actualmente son 3 las que se encargan de esta misión:

sandbox_body_class() | Clases del elemento <body>

Esta clase nos devuelve una serie de clases dependiendo de la página que estamos mostrando, todas las clases están relacionadas con la página y la fecha actual. 

<body class="<?php sandbox_body_class() ?>"> 
wordpress Está clase indica la aplicación
home Indica que estamos en la home
search Indica que estamos en busqueda
four04 Indica que estamos en una página “404 no encontrado”.
loggedin Cuando el usuario está logueado
y[current year] El año actual
m00–12 El mes actual (00-12)
d01–31 El día actual (01-31)
h00–24 La hora actual (00-24)
page Indica que estamos en una página
page-author-[name] Indica que estamos en la página de autor [name]
page-paged-[n] Indica que se trata de una entrada paginada y estamos en la página [n]
archive Indica que estamos en una página de archivo (categorias, archives,…)
date Indica que estamos filtrando por date
date-paged-[n] Indica que se trata de una entrada paginada basada en fechas, estamos en la página [n]
author Indica que estamos en la página autor
author-[name] Indica que estamos en la página del autor [name] determinado
author-paged-[n] Indica que estamos en la página del autor paginada
category Indica que estamos en una categoría
category-[name] Para una categoría determinada
category-paged-[n] Paginación de categorias
single Se trata de una entrada single
s-author-[name] Una entrada simple de un autor determinado
s-category-[name] Una entrada simple de una cateogoría determinada
s-y[current year] Una entrada simple de un año determinad
s-m00–12 Una entrada simple de un mes determinado
s-d01–31 Una entrada simple de un día determinado
s-h00–24 Una entrada simple de una hora determinada
paged Está paginada
paged-[n] Mostramos la página [n]
pageid-[n] Mostramos la página con ID [n]
postid-[n] Mostramos el post con ID[n]

sandbox_post_class() | Clases del elemento <div /> de Posts

Esta función nos carga todas las clases referentes al post en concreto, las fechas hacen referencia las de publicación, al igual que las categorías y autor.

 <div id="post-<?php the_ID() ?>" class="<?php sandbox_post_class() ?>">
hentry Para la especificación hAtom 0.1, se aplica a cada post.
page Clase general, se aplica a cada página
post Clase general, se aplica a cada post
private Para un post en estado privado
protected Para un post en estado protegido
publish Para un post en estado publicado
draft Para un post en estado borrador
y[post year] Para un post publicado en un año concreto
m00–12 Para un post publicado en un mes concreto
d01–31 Para un post publicado en día concreto
h00–24 Para un post publicado en una concreta
author-[name] El nombre del autor
category-[name] La categoría del post
alt Para los posts impares (posibilita hacer efecto zebra)
p[n] Numero de post relativo a la página

sandbox_comment_class() | Clases para los comentarios <li />

Esta función nos mostrará todas las clases referentes al comentario concreto, las fechas estarán condicionadas a la de publicación, al igual que el autor.

<li id="comment-<?php comment_ID() ?>" class="<?php sandbox_comment_class() ?>">
comment Clase general, indica que es un comentario
trackback Clase general, indica que es un track/pingback
byuser Para cada comentario de un usuario registrado
bypostauthor Comentario del autor del post
comment-author-[name] Para un comentario concreto de un usuario registrado
alt Para los comentarios impares (posibilita hacer efecto zebra)
c-y2007 Para un comentario en año concreto
c-m00–12 Para un comentario en un mes concreto
c-d01–31 Para un comentario en  un día concreto
c-h00–24 Para un comentario en una hora concreta
c[n] Numero de comentario relativo a la página
t[n] Numero de track/pingback, relativo a la página

Menú estilo Windows Vista en CSS

6 ago

+ 11

¿Eres de esos bloggers que se muerden la lengua cada vez que ven que salen Docks de Mac en javascript? ¿Te preguntas por que le hacen tanto caso a un sistema operativo minoritario? Pues tus días de sufrimiento han terminado, ahora podrás darle un toque “Vista” a tus páginas web.

menu_windows_vista.png
menu_windows_vista_css.png

Con este manual, podrás conseguir una toolbar con el aspecto del menú de Windows Vista, la verdad es que queda realmente bien, juzgar vosotros mismos. Compatible con Firefox 2, IE6/7, Opera9.2, Safari 3.0.3 Windows.

 

La mente de un desarrollador web (Castellano)

6 ago

+ 3

Hace unos días comentabamos la imagen que mostraba las partes que intervenian en el cerebro de un desarrollador web, ahora desde BoxByte, traigo una traducción para los que nos cuesta el inglés :D

mentedeundesarrolladorweb.jpg

InputDraw, dibuja con SVG

1 ago

+ 2

<inputdraw /> es una herramienta en flash que nos permite salvar nuestras modificaciones en formato SVG para compartilo con los navegadores más modernos.[Demo][Descargar]

La mejor página de error 404 No encontrado

30 jul

+ 4

Si aún no tienes claro como hacer páginas de “404 No encontrado” y esta colección no te ayudó mucho. Quizas la mejor página de 404 Not Found de Internet te servirá de inspiración. Galería con cientos de páginas 404.