Entradas etiquetadas ‘css’
Alineación en el diseño de una página Web
19 de Noviembre de 2009La mayoría de los desarrolladores Web, cuando piensan en la alineación piensan en el atributo o la propiedad CSS. Pero la alineación de los elementos de la página es tan importante como si el texto está justificado o su imagen flota a la izquierda. La alineación proporciona el marco estructural de un diseño. La alineación puede afectar el estado de ánimo de la página, así como su eficacia para conseguir su mensaje.
Pero el diseño de la página puede ser tan estructurado, con un sistema rígido que es evidente, o puede ser más sutil. Si entendemos cómo alinear los elementos de manera efectiva en la página web, seremos capaces de romper las reglas de una manera eficaz también.
Estas imágenes muestran una página Web con tres simples elementos y cómo podemos diseñar dichos elementos de la página para crear diseños diferentes.
La alineación a la izquierda es, probablemente, la alineación más común en cualquier diseño. Es organizada y segura. Proporciona un ambiente conservador para cualquier diseño, ya que es confortable y familiar.
El alineado a la derecha es similar a la alineado a la izquierda en la que todos los elementos están de acuerdo pero alineados en el lado derecho del contenedor. Esta disposición es un poco menos común que la alineación a la izquierda, y proporciona una sensación de diseño menos conservador.
La forma más sencilla de hacerlo es con propiedades CSS, movemos los elementos a la derecha y luego los obligamos a permanecer por debajo de otros en el flujo del documento.
El centrado en las alineaciones es popular en el diseño web, especialmente con los diseñadores noveles. El centrado proporciona un enfoque convencional, pero hay que tener cuidado, ya que si centramos el diseño puede parecer plano y aburrido, a menos que lo hagamos realmente bien. Cuando la alineación está perfectamente equilibrada, no hay nada que el ojo pueda enfocar, de modo que el diseño se ve plano.
El centrado es fácil de hacer. Sólo tenemos que utilizar el CSS para alinear los distintos elementos de la página Web.
Algo que recordar cuando se utilizan las alineaciones de centrado, es que los grandes bloques de texto pueden ser muy difíciles de leer.
“En caso de duda, no centremos”.
El justificado de los diseños es muy similares a los diseños centrados, pero en lugar de tener un borde dentado en el elemento de texto, se centra en ambos lados. Los diseños justificados tienen un aspecto más formal y sencillo que los diseños centrados, y pueden crear un diseño más elegante.
Los diseños justificados utilizan las mismas técnicas de centrado que la alineación centrada, también se añade la propiedad text-align al estilo de cualquier bloque de texto para justificarlo.
Hay una sutil diferencia entre esta imagen y la imagen de página de alineación centrada. En este ejemplo, la imagen y el título están muy centrados en el diseño -, pero el texto está alineado a la izquierda. El texto no coincide con la alineación del resto de la página.
En la página siguiente ofrecemos una sugerencia de cómo solucionar este problema.
Este diseño utiliza un centrado de elementos en un punto. En cambio, hay un borde visible alrededor del texto. Esto resuelve el problema que teníamos en el ejemplo anterior, porque está claro que el cuadro de texto es lo que está centrado.
Este diseño también tiene la ventaja de resolver el problema del textos centrados que son difíciles de leer.
La estructura de este diseño esta creada por la asociación de los diferentes elementos. Por ejemplo, las líneas de cabecera con la parte inferior de la imagen. El bloque de texto se alinea en la misma línea vertical como el titular.
La mayoría de los diseñadores Web prefieren este tipo de diseño porque ofrece más interés en el mismo. No es tan conservador como las alineaciones a la izquierda o a la derecha y tampoco es tan plano como un diseño centrado.
La chuleta de jQuery 1.3 (Visual Cheat Sheet)
25 de Septiembre de 2009
CSS: 3 simples pasos para que sus hojas de estilo sean más eficientes
24 de Julio de 2009En este artículo se pretende cubrir como podemos generar las hojas de estilo en su forma más eficiente.
1. Una hoja de estilo debe ser fácil de leer.
2. Una hoja de estilo debe ser fácil de mantener.
3. Una hoja de estilo debe ser bien comentada
4. El tiempo para alcanzar estos objetivos no debería afectar negativamente el tiempo de desarrollo de un sitio web.
Sugerencia 1: Comentario de su hoja de estilo
Lo primero sería componer la hoja de estilos por secciones. Esto tiene una serie de beneficios. Es decir, cabecera, navegación, el pie de página, etc -, esto hace que sus hojas de estilo sean mucho más manejables. El segundo beneficio es la legibilidad. Le tomará sólo un momento tener en cuenta cuando la sección de encabezado y la sección de navegación comienza.
1. /**** Cabecera ****/
2. /**** Contenido ****/
El segundo es explicar el uso poco ortodoxo de los estilos. Esto le permite recordar rápidamente la razón por la que ha insertado un truco o propiedad. Esto puede ser muy útil a la hora de regresar a una hoja de estilo después de un número de meses, y también ayudará a entender a otros desarrolladores porque se utilizó esa declaración.
1. ! Importante / ** Hack para hacer la navegación del IE correcta ** /
Sugerencia 2: Organice sus estilos alfabéticamente.
Eche un vistazo al siguiente ejemplo.
1 .#header {
2. width:200px;
3. margin:0 auto;
4. height: 80px;
5. background:url(../images/header.png) no-repeat;
6. padding:1px 0;
7. }
Ahora compárelo con la siguiente.
1. #header {
2. background:url(../images/header.png) no-repeat;
3. height: 80px;
4. margin:0 auto;
5. padding:1px 0;
6. width:200px;
7. }
Por orden alfabético la lista de atributos mejora la legibilidad de la hoja de estilos. Es mucho más fácil elegir rápidamente un elemento y modificarlo.
Sugerencia 3: Ficha de elementos anidados
Esto es algo similar a lo de comentar sus hojas de estilo. En un esfuerzo para hacer su hoja de estilo más fácil de leer es una buena idea la ficha de elementos anidados. Veamos el siguente ejemplo.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a { }
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
Ahora compárelo con el siguiente.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a {}
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
La Tabulación de elementos anidados le permite ver rápidamente lo que está anidado y lo que a su vez le permite ver fácilmente cómo se anidan los elementos que afectan a uno u otro.
Énfasis en el Diseño Web
17 de Julio de 2009Cuando estamos trabajando en un nuevo diseño, es necesario determinar cuál es la parte más importante de la página. El desafío es pedir a los clientes cual es la parte mas importante, aún a sabiendas que te contestarán casi siempre que ” todo es importante”. Si intentamos destacar todo el contenido de la página podemos acabar con una página que tendrá muy poco atractivo.
Con el fin de poner un poco de orden al caos que nos puede ocasionar, es necesario asignar una jerarquía de los elementos en el diseño. Una cosa será la más importante, seguido por el segundo elemento más importante (s) y, a continuación, la tercera, y así sucesivamente. Esto tiene dos propósitos:
1. La jerarquía le indica al usuario la forma en que la página está destinada a ser vista. Sus ojos se dirigen al más importante elemento de la página, seguido por el segundo, y así sucesivamente a través de la jerarquía.
2. La jerarquía proporciona atención a los elementos importantes de la página sin mezclar todo en una aburrida confusión.
Técnicas de prestación de atención y una jerarquía visual en las páginas Web
Para eso utilizaremos las hojas de estilo. Si desea que sus páginas Web esten bien diseñadas y tengan una buena jerarquía, deben tener los títulos en orden: H1, H2, H3, H4, H5, H6 y después. Si el H1 no le parece lo bastante atractivo pruebe a darle estilo para que se vea mejor. Mediante el uso de estas etiquetas, se asegurará de que su jerarquía se mantiene incluso cuando la página es vista por los navegadores no visuales.
<h1> el elemento más importante </ h1>
<h2> La 2 ª más importante </ h2>
<h3> La 3 ª </ h3>
<h4> El 4 </ h4>
<h5> La 5 ª </ h5>
<h6> El 6 </ h6>
El tamaño de la fuente es una manera fácil de ofrecer jerarquía visual y énfasis a sus páginas. Cuanto más grande es el tamaño de la fuente de un elemento, más importante parecerá.
Puede cambiar el tamaño de la fuente de cualquier texto en su página web, es la mejor forma de dar estilo a sus titulares y en el párrafo de texto al tamaño que desee. He aquí cómo podemos dar estilos a esos titulares o párrafos en su Web:
p (font-size: 1em;)
h1 (font-size: 2.5em;)
h2 (font-size: 2EM;)
h3 (font-size: 1.5em;)
h4 (font-size: 1em;)
h5 (font-size: .8 em;)
h6 (font-size: .7 em;)
El color es otra gran manera de dar énfasis. Utilizaremos contraste de colores con moderación. La clave para usar el color que nos dará énfasis es usarlo juiciosamente.
Puede adjuntar el color a los titulares o los bloques de texto. Esto solamente cambia la CSS h2 etiquetas que ha dado la categoría “importante” y los párrafos con la clase “calltoaction”:
h2.important (color: red;)
p.calltoaction (background-color: amarillo;)
7 reglas para realizar Javascript de calidad
19 de Junio de 2009- No hagas suposiciones: no pienses que el usuario tendrá el javascript activado o que usará un navegador adecuado.
- Usa IDs y relaciones entre elementos: para no depender de un HTML mal estructurado y que el javascript sea imposible de realizar, utiliza IDs para acceder a los elementos con los que se quiere tratar y busca elementos que faciliten acceder a otros elementos.
- Utiliza estilos: en vez de modificar los estilos de los elementos HTML mediante Javascript, usa clases CSS que modifiquen los estilos, y mediante Javascript se le puede añadir la clase a un elemento superior.
- Comprende el navegador y a los usuarios: debes pensar cómo funciona un navegador, no sobre saturar su comportamiento (abuso de drag&drop, eventos, …). Además debes pensar qué espera el usuario que haga el navegador, y respetarlo.
- Comprende los eventos: los eventos no solo corresponden a un objeto, sino a los elementros hijo que contiene. Así se pueden realizar eventos sobr un único elemento y no tener que modificar los demás.
- Respeta el código de otros: seguro que a parte de tu código existe algún otro que has añadido, por lo que deberás programar teniendo en cuenta que hay que evitar conflicto entre funciones.
- Después de ti vendrá otro: es muy frecuente que alguien acabe modificando tu código, ten un poco de consideración por los demás y escribe código legible y comprensible.
Redondear bordes en Firefox
21 de Abril de 2009Seguramente muchos ya lo sepan, pero la forma más sencilla de redondear un borde vía CSS es usando las propiedades siguientes:
-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px;
Con las propiedades anteriores aplicadas, por ejemplo, a una capa, obtenemos lo siguiente:
Pero recordad, este truco no funciona en Internet Explorer, por lo que los usuarios de este navegador verán las esquinas cuadradas ignorando estas propiedades especificas de Firefox, aún así va bien conocer estas posibilidades.
jQuery Calculator, la calculadora definitiva
28 de Enero de 2009En la mayoría de aplicaciones de gestión es muy últil disponer de una calculadora para introducir nuevos datos en un formulario o para realizar pequeñas comprobaciones. Si además podemos disponer de una calculadora dentro de la interfaz del programa y accesible vía un icono o al hacer click sobre un input, pues mejor que mejor. Hoy os presento jQuery Calculator.
Aspecto por defecto
Uso
1.Incluir jQuery
2.Descargar el plugin jQuery Calculator (v1.0.0) e incluir los archivos necesarios en la página
<style type="text/css">@import "jquery.calculator.css";</style>
<script type="text/javascript" src="jquery.calculator.js"></script>
3.Realizar la invocación (ver más ejemplos)
$('input').calculator();
$('input').calculator({showOn: 'button'});Se puede invocar desde un botón, una imágen, al hacer focus sobre un elemento. Además podemos personalizar la animación: show, slide, slideDown, fade… (gracias a jQuery UI).
Localización
jQuery Calculator además está disponible en varios idiomas, entre ellos, el español. Basta con agregar el archivo de idioma correspondiente y cargar la calculadora indicando el idioma cómo parámetro de la llamada:
<script type="text/javascript" src="jquery.calculator-es.js"></script>$('#l10nCalc').calculator($.calculator.regional['es']);
Estilos CSS
Por defecto, los colores y elementos gráficos de jQuery Calculator, la verdad, són un poco sosos, pero por suerte disponemos de una extensa guía de diseño para darle nuestro toque personal modificando el CSS directamente para conseguir darle algo más de vida.
Mismo plugin + CSS modificado = Nueva calculadora 
Funciones Extra
jQuery Calculator es más potente de lo que parece a simple vista, podemos trabajar con diferentes bases, podemos añadir más botones y funciones a la calculadora para adaptarla 100% a lo que queremos hacer con ella, además de definir los callbacks adecuados para tratar los resultados obtenidos y ya se me olvidaba, también tiene funciones de “memória”.
Select con imágenes de fondo
13 de Enero de 2009Uno de los controles más utilizados a nivel web son los selects o también llamados combos. Se usan constantemente en formularios (para que los usuarios introduzcan sus datos), en listados (para determinar que filtro lequeremos aplicar al listado), etc… De hecho este control nos permite dar opciones a los usuarios de interactuar con la página Web, pero a la vez al ofrecer opciones acotadas al usuario para escoger, es una manera mucho mas segura (en el sentido de evitar errores en la web, o evitar injección de codigo sql) de lo que lo es un campo de texto.
En esta ocasión cito a las combos para comentar como se puede hacer para que estas tengan un estilo más elegante o más visual o más intuitivo con las opciones que ofrece a los usuarios de la aplicación. A parte de ver la apliación de estilos a un select, la idea es la de introducir imágenes a cada uno de los elementos que podremos seleccionar.
En primer lugar vamos a definir una combo con 4 opciones distintas, a cada una de las opciones vamos a asignarle un identificador para poder asociarle estilos distintos a cada una de ellas.
<select name=”prueba” style=”width:150px;” >
<option id=”opcion1″>Opción 1</option>
<option id=”opcion2″>Opción 2</option>
<option id=”opcion3″>Opción 3</option>
<option id=”opcion4″>Opción 4</option>
</select>
Una vez ya tenemos el select definido con las 4 opciones distintas y los identificadores asociados a cada una de ellas, ya podemos pasar a tratar los estilos que darán un toque especial a este habitual control. Vamos a poner una posible hoja de estilos para este select, y a continuación, comentaremos lo que se está tratando.
<style type=”text/css”>
SELECT{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:1px solid #666666;
}
#opcion1 {
background-image: url(/styles/imgs/checked.gif);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;
}
#opcion2 {
background-image: url(/styles/imgs/calendar.png);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;
}
#opcion3 {
background-image: url(/styles/imgs/page_go.png);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;
}
#opcion4 {
background-image: url(/styles/imgs/anterior.gif);
background-repeat:no-repeat;
padding-left:25px;
margin-bottom:2px;
}
</style>
En primer lugar le damos estilo a toda la combo con la etiqueta SELECT que hace referencia al tag en cuestión. Simplemente le asignamos un estilo de fuente, tamaño y un borde de 1píxel de un color concreto, que aunque no lo parezca dará una toque elegante al elemento. A continuación tenemos los estilos asociados a cada una de las opciones. De hecho son todos iguales, lo único que varia son las rutas de las imágenes de fondo que se usarán para cada una. Designamos que esta imagen no se repita para que no se confunda con el texto de la opción (ya que en este caso combinaremos texto e imagen). El padding-left se usa para que el texto de la opción empiece justo después de la imagen evitando solapaciones. Finalmente tenemos un margin bottom de 2 píxels que simplemente lo usamos para que haya una mínima separación vertical entre opciones. Finalmente mostraremos una posible imagen final de lo que podria ser este select.
El IE7.js es una alternativa de compatibilidad con menos esfuerzo
7 de Enero de 2009Ser compatible con el IE6 y el IE7, lo que significa adaptar los estándares de la Web a estos navegadores bastante populares, implica invertir mucho tiempo y esfuerzo. Además, requiere el conocimiento de hacks compatibles con las validaciones de las páginas por la W3C e incluso la separación de hojas de estilo en los peores casos.
El IE7.js es una librería liviana (de 11Kb comprimidos) de Javascript que permite convertir los navegadores Microsoft Internet Explorer desde la versión 5 hasta la 8 en vavegadores compatibles con los estándares de la Web, tanto a nivel de código HTML como de hojas de estilo CSS. También añade soporte de transparencia de imágenes PNG para el IE5 y el IE6.
EL IE7.js es una alternativa de compatibilidad con menos esfuerzo. Ahora con una evolución significativa en la velocidad y estabilidad, se ha convertido en una versión BETA, tras permanecer un largo periodo de tiempo en ALPHA. El motor del sistema opera con base2: Una librería de Javascript que permite trabajar con un Javascript multinavegador con un único DOM, siguiendo los estándates ECMAScript. Esta librería esta teniendo un fuerte impulso de desarrollo, lo que ha permitido mejorar notablemente el rendimiento del IE7.js. Ambas librerías son mantenidas por el mismo equipo de desarrollo de Dean Edwards.
¿Pero por qué significa un menor esfuerzo? Solo imagina implementar una única hoja de estilos compatible para todos los navegadores, válida para la W3C (tanto en HTML como en CSS) y solamente incluyendo los tags:
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]-->
¿Debe ser único el valor de un atributo ID en HTML o XHTML?
5 de Enero de 2009En concepto, se trata de la asociación de un identificador único a un elemento del HTML que soporte dicho atributo. Por lo tanto, sí debe ser único. Y esto parece algo sencillo de entender y fácil de aplicar. Pero resulta a la práctica un problema, ya sea por descuido del maquetador o por desinterés.
Para comprender por qué debe ser único, hay que entender los principales usos de un identificador de elemento de HTML:
- Referenciar elementos de la página para su uso a través del DOM + getElemenByID.
- Referenciar selectores para la aplicación de estilos en las Hojas de estilos CSS.
- Referenciar navegaciones con anclas en la misma páginao para acceder a fragmentos de un documento directamente referenciados a través de un hiperenlace.
- Asociar controles de formularios de HTML con etiquetas (labels).
Si bien es cierto que una página Web en un determinado momento puede no requerir que este atributo esté presente o que cuando esté presente no sea único, no hay que descartar las buenas maneras o hábitos en la maquetación del HTML. Porque en un futuro próximo, con la mera implementación de scripts de validación de formularios más accesibles, se deberá hacer un mayor esfuerzo para conseguir el resultado esperado.
