Entradas etiquetadas ‘css’

Selectores CSS Parte1

3 de Agosto de 2010

Los fundamentos del CSS Selectores 1

Básico 1 CSS Selectores

El selector es la parte de la definición de estilo CSS que define los elementos exactos para aplicar el estilo. En su forma más básica, este es el nombre del elemento real. Por ejemplo, si se desea un estilo de todos sus títulos de primer nivel en rojo, se utiliza un selector h1:

h1 { color: red; }

CSS Selectores de Clase 1

En el caso de que no quería definir cada título de primer nivel en rojo, pero si un sólo  sub-conjunto, puede utilizar un selector de clase (escrito como una cadena con un punto delante de él). Por ejemplo, si desea que el mismo h1 forme parte de un sub-conjunto de H1S rojo, y el resto permanezca como normal, se utiliza un selector de clase:

h1.red { color: red; }

CSS Selectores de ID 1

Los selectores ID son casi los mismos que los selectores de clase, sólo que son más que un impacto de un elemento en la página (el que tiene identificador específico), y están escritos con el signo (#) en la parte delantera de la palabra. Por ejemplo, si usted tuviera un ID de h1 que quisiera rojo:

#myredh1 { color: red; }

CSS 1 Pseudo-clases

En CSS 1 hay un par de pseudo-clases útiles que ayudan a definir los estilos basados en las características del elemento o una página y no específicamente a los propios elementos. Hay cinco pseudo-clases en CSS 1:

a: link
Define un enlace no visitado.

a: visited
Define un vínculo visitado.

a: active
Define un vínculo activo.

: first-line
Define la primera línea de como es el formato en el lienzo.

: first-letter
Define la primera letra del texto en el elemento. Técnicamente es un pseudo-elemento.

Selectores CSS 1 descendiente o selectores contextuales

Los Selectores CSS 1 también le permiten definir un selector de base en el lugar que está en el árbol HTML. Por ejemplo, aunque es posible que desee hacer todos los h1 rojos en su documento (utilizando los selectores de base anterior), es posible que desee llamar más la atención sobre cualquier subrayado (texto <em> </ em>) dentro de ese h1. Mientras que usted podría establecer otra clase que em, es más fácil establecer sólo un estilo especial en todo el texto que se inscribe en un h1. Use espacios para separar las etiquetas, en lugar de comas, para indicar selectores de descendientes:

h1 { color: red; }
h1 em { text-decoration: underline; }

También puede utilizar comodines para definir cualquier número de niveles en los selectores de su descendiente. Por ejemplo, si quisiera que todas las etiquetas fueran nietos de un div, usted escribiría:

div * q { border: thin solid blue; }

Este estilo no afectará a los que de que son descendientes directos de un div o los que no están dentro de un div en absoluto.

Tipografía Web

29 de Julio de 2010

Si has usado HTML,  probablemente habrás llegado a través de la etiqueta <font>. Esta es una etiqueta que te permite definir el tamaño de fuente, el color y la familia. Pero hay inconvenientes con la etiqueta <font>

1. No te permiten cambiar todos los aspectos de la tipografía.
2. No te da mucha flexibilidad en las opciones que admite.
3. Se mezcla la presentación visual en la estructura del documento, haciendo las cosas difíciles para editar más tarde.

Por suerte las hojas de estilo “Cascading Style Sheets” (CSS) te permiten hacer la tipografía de tu Web más precisas.

Familias de fuentes / Font Families
La determinación de la fuente que vas a utilizar es el primer paso para la tipografía adecuada en la Web. El método más común es la definición de la familia de fuentes ya sea como una fuente genérica o específica, y, a continuación una lista de varias fuentes como las copias de seguridad (separados por comas).

Por ejemplo:

p { font-family: Geneva, Arial, Helvetica, sans-serif;

Tamaño fuente / Font Size
Una vez que hayas definido la familia de la fuente, tendrás que ajustar el tamaño de la fuente. Hay muchas unidades de medida que puedes utilizar con  CSS:

  • inches (in)
  • centimeters (cm)
  • millimeters (mm)
  • points (pt)
  • picas (pc)
  • pixels (px)
  • ems (em)
  • X-height (ex)
  • percentages (%)

Los cinco primeros tipos son absolutos (fijos) y los ajustes no funcionan muy bien en las páginas Web porque las páginas Web son vistas por las personas con muchas configuraciones diferentes. La segunda son cuatro tamaños relativos de fuente y se trabajan mejor en la Web. Yo prefiero usar ems.

p { font-size: 1em; }

Colores de fuente / Font Colors
Curiosamente, la propiedad no es color de fuente font-color, es sólo del color. Elige los colores de fuente de la misma manera que lo harías con cualquier otro color. Luego, lo defines en tu CSS:

p { color: #330000; }

Linea de altura, espacio, y resaltado
Algunas de las cosas que puedes hacer con CSS que no se puede hacer con la etiqueta de fuente son lineas de altura, eapacios, y destacar texto. Las líneas de altura en CSS se llaman line-height. Utiliza las mismas unidades de medida que usas para tus fuentes de tu line-height:

p { line-height: 1.25em; }

Espacio es la cantidad de espacio entre las letras. Aunque a menudo no tiene que cambiar esta en las páginas Web, puede que desees espacio más estricto o más flojo para conseguir un efecto. Esto se hace con la propiedad de espaciado entre letras:

p { letter-spacing: -0.1em; }

Y puedes resaltar el texto con varias propiedades de la fuente:

  • background-color: Para resaltar el texto con un fondo de color.
  • font-weight: Establece la audacia de una fuente.
  • font-style: determina la letra cursiva de la fuente.
  • font-variant: Cambia la fuente a versalitas.

p {
background-color: #ccc;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}

Saca el máximo provecho a tu tipografía Web.

Y para los usuarios la tipografía con CSS ofrece una gran cantidad de opciones y flexibilidad. Hay que aprovecharse de ella.

Alineación en el diseño de una página Web

19 de Noviembre de 2009

La 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.

alineamiento_izquierda

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.

alineamiento_derecha

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.

alineamiento_centrado

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”.

alineamiento_justificado

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.

alineamiento_notanbueno

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.

alineamiento_marco

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.

alineamiento_mixto

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

 jQuery Visual Cheat Sheet

Para tener a mano todo lo que puedas necesitar cuando trabajas con jQuery 1.3, entre otras más cosas, incluye información acerca de:

  • Selectores
  • Efectos
  • CSS
  • Eventos
  • Ajax
  • Utilidades

Muy recomendable.

[Descargar][Ver]

CSS: 3 simples pasos para que sus hojas de estilo sean más eficientes

24 de Julio de 2009

En 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 2009

Cuando 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.

Fuente: The seven rules of unobstrusive JavaScript

Redondear bordes en Firefox

21 de Abril de 2009

Seguramente 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 2009

En 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

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 2009

Uno 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.