Google
 

martes, 7 de abril de 2009

Stylizer, un editor de CSS visual

Fué lanzada la nueva versión de Stylizer, un editor de CSS visual, y una de mis herramientas esenciales. He aquí algunas de las características que lo hacen un programa muy completo y util para todos los que trabajamos con CSS.

Hace algunos meses, por casualidad me topé con Stylizer, un editor de CSS. Antes yo utilizaba Topstyle (que como nota aparte, después de años finalmente tendrá una versión 4 ), y estaba bastante contenta con él, pero el ver la deliciosidad que tienen los Maqueros en CSSEdit me hacía buscar algo mejor, más intuitivo. Y Stylizer sobrepasó mis expectativas. Por el momento Stylizer es para PC solamente pero la versión Mac saldrá en unos meses.

Continuar leyendo ...

Algunas características interesantes:
  • Edición directamente en el servidor
  • Autocorrección
  • Identificación de elementos y creación de reglas
  • Selección de colores
Página Oficial: Skybound Stylizer
Plataforma: Windows (proximamente Mac)
Precio: Grátis (Basic) / $79 USD (Ultimate) -(Comparación)
Resumen: la herramienta más completa e intuitiva que he encontrado para editar CSS en Windows.

Fuente: http://www.disenorama.com/articulos/herrramientas-stylizer-mi-editor-de-css-favorito

Tutorial. Centrar una web con CSS

Todos aquellos que se dedican al diseño web, una vez que otra se han encontrado con el problema de tener una web de unas dimensiones absolutas concretas (tanto de altura como de anchura) y no tener una manera fácil de poderla centrar vertical y horizontalmente en la ventana del navegador sea cual sea su tamaño.

Vamos a explicar una solución sencilla y la iremos explicando paso por paso para que quede clara y aparte de poder aplicarla sepamos el porque de cada paso.

1. En primer lugar, por el tipo de operaciones que realizaremos, necesitaremos que el posicionamiento de los objetos sea absoluto (ya iremos viendo el porque), así que lo primero será:

div {
position: absolute;
}

2. En segundo lugar, queremos encontrar el centro de la ventana del navegador, pero como las dimensiones del navegador variarán en cada caso dependiendo de la pantalla del usuario, si dicho navegador esta maximizado o no, las barras de estado que tenga el usuario, etc, tenemos que buscar ese centro con medidas relativas, así que lo que haremos sera más o menos:

div {
position: absolute;
top: 50%;
left: 50%;

}

3. Ya tenemos el centro del navegador definido, ahora nos falta centrar en el, nuestro objeto, en este caso, una capa (div) con unas dimensiones de 600 pixels de ancho por 400 pixels de alto, así que lo primero de todo será definir estas medidas en nuestro css.

div {
position: absolute;
top: 50%;
left: 50%;

width: 600 px;
height: 400px;

}

4. Con todo eso definido ya solo nos queda marcar el punto central de la capa (div), y eso lo conseguiremos con la propiedad de capa margin. Como ya dijimos en su día, los valores para margin pueden ser muchos, entre ellos, negativo, así que lo que necesitamos para centrar nuestra capa en el centro del navegador es decirle al css justamente la mitad del ancho y del alto de la capa para que así el punto central que hemos definido en el segundo punto sea donde se acomode el centro de la capa que tenemos y eso quedaría más o menos así:

div {
position: absolute;
top: 50%;
left: 50%;

width: 600 px;
height: 400px;

margin-top: -200px;

margin-left: -300px;

}

Para concluir el tutorial, aquí todo el código comentado, para que sea aún más fácil.

div {
position: absolute;
top: 50%;
/* Buscamos el centro horizontal (relativo) del navegador */
left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
width: 600 px; /* Definimos el ancho del objeto a centrar */
height: 400px; /* Definimos el alto del objeto a centrar */
margin-top: -200px; /* Restamos la mitad de la altura del objeto con un margin-top */
margin-left: -300px; /* Restamos la mitad de la anchura del objeto con un margin-left */
}


Fuente: http://www.ateneupopular.com/tutoriales/tutorial-centrar-una-web-con-css/


lunes, 23 de febrero de 2009

display:inline-block para todos los navegadores.

La propiedad CSS display dispone de una buena lista de posible valores ( inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit) para indicar que tipo de elemento estamos posicionando. Dos de las más usadas son inline y block .

display:inline
Los elementos inline no generan una nueva línea en el flujo del texto. Los elementos inline son vistos como elementos “internos” subordinados para los hacia arriba elementos de bloque.

Elementos Inline por defecto:
a, abbr, acronym, applet, b, basefont, bdo, big , br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var.

display:block
Los elementos de bloque generan una nueva línea (renglón) en el flujo del texto

Elementos de bloque por defecto:
address, blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

display:inline-block
En la especificación de CSS2.1 se añadió este valor que permite integrar las ventajas de ambas propiedades. Con este valor podemos crear bloques en la misma línea de flujo, haciendo que diseños como rejillas sean posibles.

Actualmente, solo los navegadores modernos lo interpretan, por lo que nos vemos obligados a usar un hack para que todos los navegadores lo “emulen”.

display:inline-block
En la especificación de CSS2.1 se añadió este valor que permite integrar las ventajas de ambas propiedades. Con este valor podemos crear bloques en la misma línea de flujo, haciendo que diseños como rejillas sean posibles.

Actualmente, solo los navegadores modernos lo interpretan, por lo que nos vemos obligados a usar un hack para que todos los navegadores lo “emulen”.
En Mozilla Webdev nos muestran un ejemplo de como conseguir que todos los navegadores nos permite obtener diseños como estos sin necesidades usar float en ellos.

Código
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack; /* FF2*/
display: inline-block;
vertical-align: top; /* BASELINE CORRECCIÓN*/
margin: 5px;
zoom: 1; /* IE7 (hasLayout)*/
*display: inline; /* IE */
_height: 250px; /* IE6 */
}

Fuente: anieto2k.com

Estructuras de páginas web en CSS

CSS Layout es un repositorio de 224 estructuras de páginas web en CSS, listas para personalizar y utilizar. Funcionan en la mayoría de navegadores web y está optimizadas para que el contenido sea accesible y visible por los buscadores. Se puede utilizar directamente y también son fáciles de incorporar en sistemas de publicación.

Fuente: http://i.microsiervos.com/diseno/estructuras-paginas-css.html

jueves, 22 de mayo de 2008

Conceptos básicos para CSS

Vía Vecindad Gráfica he llegado a este impecable trabajo realizado por la gente de Ateneu Popular.

En el se explican de manera concreta las propiedades básicas que se pueden utilizar en una hoja de estilos, se muestran sus valores y se refleja un ejemplo de aplicación. Como bien lo dicen en Ateneu Popular, esta puede ser una herramienta muy útil para tener impresa en el escritorio a la hora de diseñar webs y es por eso que han puesto manos a la obra para ponerla a disposición de todos!

Este es un ejemplo de lo que podemos encontrar en el informe:

Descarga original
Mirror

Gracias y felicitaciones por este excelente trabajo!

Fuente: Ateneu Popular

jueves, 15 de mayo de 2008

8 tipografías que probablemente no utilizas pero que deberías utilizar

El CSS ha traido muchísimas posibilidades en términos de tipografías al diseño web, pero siempre utilizamos las mismas 4 o 5 fuentes que creemos que van a estar en todas las computadoras, ya que sería un problema porque si la fuente especificada no está disponible no se va a mostrar el texto cómo queremos, pero para variar un poco en 3.7 design han hecho una recopilación de 8 fuentes que están disponibles en casi todas las computadoras que podemos utilizar con seguridad en nuestros diseños y son las siguientes:

  1. Palatino Linotype / Palatino

    Disponible en el 97.09 de los Windows y en el 78.86 de las Mac

  2. Tahoma

    Disponible en el 96.09 de los Windows y en el 72.02 de las Mac

  3. Impact

    Disponible en el 95.85 de los Windows y en el 88.07 de las Mac

  4. Century Gothic

    Disponible en el 85.44 de los Windows y en el 42.5 de las Mac

  5. Arial Black

    Disponible en el 97.73 de los Windows y en el 96.18 de las Mac

  6. Arial Narrow

    Disponible en el 87.08 de los Windows y en el 91.01 de las Mac

  7. Copperplate / Copperplate Gothic Light

    Disponible en el 58.13 de los Windows y en el 85.85 de las Mac

  8. Gill Sans / Gill Sans MT

    Disponible en el 43.09 de los Windows y en el 90.82 de las Mac

Fuente: www.carlosleopoldo.com

viernes, 22 de febrero de 2008

Cualquier fuente por css

Se acabaron los tiempos en los que el diseñador no muy versado en los medios de internet le encargaban una página... y luego no sabía como colocar las fuentes.

En teoría, sólo se pueden poner las fuentes que el usuario tenga instalada con su sistema operativo. Por eso, no se suelen utilizar tipografías raras. Pero claro, siempre hay algún diseñador que al final no hace código html sino que cuelga directamente una imagen como aquí

Con este trocito de código que han publicado los chicos de a list apart:


@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }


Podemos hacer lo que queramos...

Sólo falta que sea compatible con todos los navegadores... y que la peña no se pase y comience a poner fuentes muy tochas...

Hay múltitud de fuentes disponibles para descarga... a buscarlas...

1001freefonts.com

todofuentes
....

Fuente: http://avanzaweb.net/2007/11/cualquier-fuente-por-css.html

jueves, 24 de enero de 2008

Resetear CSS: Cómo (Tripoli) y Para qué

Antes que nada, ¿qué es una hoja de estilos en cascada (CSS)? Un concepto, supongo, rápido y acertado sería: un documento de texto, con un formato determinado, que especifica el modo en que se mostrará cada uno de los elementos de una página web. De esto se podría desprender “desde el archivo CSS podríamos modificar el modo en que se ve toda nuestra página”; y de hecho, esto és asi.
Las sorpresas que nos llevamos al utilizar CSS

Seguramente si han trabajado con CSS, o al menos escucharon a alguien que trabajó con esto, saben que es algo complejo y complicado lograr que la página se vea igual en todos los navegadores. Algo que muchos no saben es el motivo de ésto, idea que intentaré explicar a continuación.

Cada navegador trae por defecto una hoja de estilos CSS. Como difieren entre una y otra -son diferentes- “saltan” los problemas. Si no usásemos ninguna hoja de estilos, y por ejemplo, hacemos un documento HTML sin formato, y abrimos este documento en varios navegadores; notaremos que se ven diferentes en cada uno. ¡Imagínense lo dificil que se pone la situación cuando hablamos de algo más complejo!
¿Cómo solucionar ésto?

Se han intentado varias cosas, pero una de las que mas me gusta -y que mejores funciona- es la de resetear los estilos que trae el navegador por defecto. De ese modo dejaríamos de partir de la base del navegador, es como que eliminamos la hoja que trae, y comenzamos “de cero” con nuestra hoja. Claro está, deberemos ser más detallistas en ésta última.

Para dejar de hablar tan abstractamente, veremos algunos ejemplos:
  • Estilo predeterminado: como se dijo, las hojas de estilo predeterminadas de los navegadores son distintas entre uno y otro. Para comprobarlo, invito a abrir ésta URL en diferentes navegadores; que no tiene hoja de estilos aplicada, solo la predeterminada del navegador.
  • Ahora, aplicando una hoja de estilo extra a la misma página, se produce el reseteo CSS, miren como se ve: link.
  • Por último, ya logrando que la página se vea igual en todos los navegadores, aplicamos una segunda hoja de estilos: link.
Como ya deducieron, la última página que les pasé tiene 3+ hojas de estilo en juego:
1. La del navegador.
2. La encargada de “eliminar” la anterior (la que hace el reset).
3. Y por último, las que definen nuestros estilos; que pueden ser 1 o más.

Ahora adentrándonos a la puesta en práctica de esto, existen muchos reseteadores de CSS, pero en este apartado les dejaré los links de Tripoli, una buena solución para este tema. A continuación, las hojas de estilos que nos competen:

Fuente: daniBlog vía Carlos Leopoldo

Cómo resetear el CSS predeterminado del navegador

Cada navegador tiene un CSS distinto por defecto, lo que muchas veces nos causa problemas al crear un CSS que funciona bien en un navegador y en otros es totalmente diferente.

Este CSS creado por Eric A. nos deja todos los CSS iguales en todos los navegadores el código es el siguiente:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: "";

}

blockquote, q {

quotes: "" "";

}
Más información sobre Reset CSS

Fuente: http://www.carlosleopoldo.com/2007/05/21/como-resetear-el-css-predeterminado-del-navegador/

viernes, 18 de enero de 2008

No todos son iguales, pero hay que saber elegir


Puede que este post no este directamente relacionado con la tematica del blog, que es facilitarte códigos y soluciones en css y javascript para hacer que tus desarrollos web sean mas sencillos, pero creo que a cualquiera le puede ser de utilidad lo que les dejo a continuación.
SoloE.




Clientes

En el camino de los negocios conocemos cantidad y diversidad de clientes, personas, proveedores, que como seres humanos y empresas, tienen diferente ideología. Nos encontramos con clientes buenos, y otros no tanto.

De una experiencia desagradable que tuvimos con una empresa, aprendimos varios puntos importantes que debemos tomar en cuenta antes de enredarnos en un contrato para prestar nuestros servicios.

1. Historial de la empresa: Es el punto más importante, hay que investigar el historial de la empresa para ver si es confiable, si ha tenido problemas con clientes pasados y que tal anda su “reputación” dentro de su giro. Si nos enteramos que tienen un historial no muy agradable o malo, pensemos realmente si nos traerá beneficios. En ocasiones es mejor alejarnos porque podremos perder mucho más.

2. El contrato: Es de vital importancia que nuestro contrato sea, concreto, claro y que tenga fechas en las cuales vamos a terminar de prestar los servicios, fechas de pago y por supuesto tener una taza de interés por pago atrasado, esto para “presionar” a la empresa a que pague a tiempo.

3. Las llamadas telefónicas: Es importante estar al tanto de las actividades de la empresa con regularidad, llamar una vez por semana para preguntarles que les ha parecido el servicio y cuando podemos pasar por el pago siguiente. Nunca confiar demasiado y dejar pasar hasta la fecha acordada. Puede ser que la empresa desaparezca de un momento a otro sin avisar.

4. Hacer citas: Para ir a recoger un cheque o el efectivo, es de gran importancia hacer citas, de no ser así podemos perder mucho tiempo y dinero en dar vueltas que no servirán de nada

5. Ser paciente: No desesperarnos si a la segunda llamada no nos han pagado, probablemente tuvieron problemas, pero si se atrasan 2 semanas entonces las cosas cambian, sin embargo es muy importante no perder la cordialidad, suele suceder que ya estamos artos de llamar y no recibir una respuesta válida, pero recordemos que la reputación y la imagen de nuestra empresa está en juego si perdemos la paciencia y les gritamos en la cara lo malos que han sido. Ahora que si pasan 3 meses y no hay respuestas, mejor llamamos a un abogado o un policía para que vayan con nosotros por el pago.(Es broma…pero podría ser)

6. Y la más importante. Retroalimentación: Al término del contrato, debemos evaluar si realmente queremos continuar prestando servicios a la empresa, si nos costó trabajo cobrar los cheques, si fueron amables, etc. Suele pasar que una empresa es muy mala con los pagos, y al término del contrato nos solicitan otros servicios nuevamente, y esta vez de una suma interesante, hay que pensar si realmente nos conviene continuar o mejor despedirnos cordialmente. Por lo general nunca cambian.

Conocimos a una de las empresas más irresponsables del estado, tuvimos la oportunidad de ver como empresas nacionales, les gritaban en la cara lo malos que eran. Con decirles que tardamos casi un mes en cobrar un saldo de $450.00 PESOS. Eso nos pasó por no investigar, pero aprendimos que los puntos ya mencionados son importantes al momento de hacer negocios con cualquier empresa.

No todo lo que brilla es oro.

Fuente: http://www.closip.com/blog/noticias/2008/01/17/no-todos-son-iguales-pero-hay-que-saber-elegir/