LINK DE LA SEMANA: CRISTALAB Y LOS MENUS EN C.S.S.
CRISTALAB Y LOS MENUS DE LISTAS EN C.S.S.
En el sitio web, Cristalab, podemos encontrar una serie de datos y trucos para poder armar y organizar de mejor forma nuestros links. Un modo muy profesional (si se quiere) es hacer menús de navegación, funcionales, coloridos y dinámicos (desplegables) o de listas.
Una de las fallas de las barras de navegación, sobre todo las desplegables, es que muchas de ellas requieren de una gran cantidad de código (html, c.s.s. y java), lo que se torna en una maraña que contamina nuestro código, lo que podría terminar por funcionar mal en vez de lograr un producto eficiente. Además, está el hecho de que muchos de estos menús dinámicos requieren de archivos de imágenes y código java para funcionar y este sólo hecho ya viola las reglas de la accesibilidad de nuestra web, las cuales siempre hay que tener en cuenta. (En lo personal, mientras menos Java use, mejor, y ojalá bien sencillo).
El problema con la organización de los links es que se nos acumulan cientos y cientos de enlaces y generalmente no los tenemos muy bien organizados. Las enormes listas en los side (lados) de nuestras Bitácoras, están obsoletas (si sé que en este blog están así). Un blog debe potenciar el contenido más que nada. Pero esto nos arroja la interrogante de ¿Qué hacer con nuestros enlaces?.
Lo mejor es organizarlos en grupos, por temas, categorías y familias. Luego priorizar y distribuirlos de forma estratégica. Ahí entran en escena los menús y las listas que pueden guardar gran cantidad de código y enlaces y ser bien discretos visualmente.
Los mejores menús, son aquellos, simples, con poco código y ojalá sin java, pero esto es imposible por que Internet Explorer es medio ciego a las ordenes de C.S.S.2 , forma en que los menús más simples están hechos, así que, para que tu menú funcione en I.E. (qué le vamos hacer), habrá que ponerle un poquitin de Java.
Unas simples órdenes de C.S.S. y listo para armar tu menú o tu lista con links, que Cristalab, nos ofrece una gran variedad de alternativas, ejemplos y hasta consejos y códigos para copiar y experimentar.
entrada de TSUNAMI a las 2:05 PM 4 comentarios
martes, mayo 09, 2006
LINK DESTACADO DE LA SEMANA: MAKING COMPLEX CSS
El link destacado de esta semana es "Making Complex CSS Simple ", que en realidad corresponde a una sub categoría del sitio Left Justified. Making Complex CSS Simple, nos enseña mediante simples trucos de C.S.S. a contener nuestras cajas y a construir un blog de tres columnas en 1 hora. perfectamente funcional, además eliminamos la tendencia de los side o lados (izquierdo y derecho) a flotar en cualquier lado, mediante la ubicación de estos en el interior de una caja contenedora.
Making Complex CSS Simple, ofrece un muy didáctico ejercicio que podemos realizar construyendo un template y colocando a prueba la tecnica que allí nos presentan. Recomiendo este link ya que es un aporte que nos permite aprender y luego poner en práctica este truquito que bien vale 1 hora de dedicación.
entrada de TSUNAMI a las 10:37 PM 0 comentarios
martes, mayo 02, 2006
LINK DESTACADO DE LA SEMANA: CSS MANÍA.
Esta semana presentaremos el link destacado, que en esta primera oportunidad será el sitio CSS MANÍA. Cuyo lema es: " no trivial discussions... only screenshots".
Aquí podrán ver unagran cantidad de diseños de templates y para blog y sitios web 100% realizados en CSS.
C.S.S. MANÍA, se nutre de la cooperación de diseñadores y webmaster de distintos lugares del mundo quienes exponen allí sus trabajos. Lo bueno de este sitio es que nos permite revisar cientos de diseños y poder descubrir las tendencias imperantes en este tipo de trabajos.
Claro que como no soy diseñador y solamente esto es por hobbie, me resulta muy ilustrativo poder aprender de un lugar como es C.S.S. manía.
Copiar un template de este link resulta bastante complicado si no estas muy enterado de la sintaxis de C.S.S. y HTML., puesto que la gran mayoría de los trabajos recurren a un vinculo externo para guardar el estilo de su hoja C.S.S. y solamente se muestra al acceder el código fuente el html.
Ej: (abrir corchete) link rel="stylesheet" type="text/css" media="screen" href="http://cssmania.com/css/(cierre corchete)
Guardar de modo externo la hoja de estilo, resulta muy útil para cualquier sitio
puesto que se aliviana el peso de nuestro código fuente y por ende su carga en el
navegador es más rápida.
Para los que están más familiarizados en estas materias, les resultara fácil acceder
a los códigos que forman estas obras de arte del diseño.
entrada de TSUNAMI a las 5:06 PM 0 comentarios
TEMPLATE 07
Este diseño es bien básico y minimalista. Se trata de una plantilla de una sola columna pero dividida en 3 bloques verticales, donde lo que prima es la importancia del post por sobre lo demás. De este modo, el sidebar queda alojado en la posición inferior, donde da cabida a una gran cantidad de links, que pueden ser ordenados devidamente.
La maqueta esta realizada enteramente con C.S.S., incluso el efecto de degradación de color en los bordes superior e inferior. No necesita archivos de imágenes, salvo que se incluyan posteriormente. Además que es fácilmente personalizable con solo cambiar los colores de link, fondo y de c/u de los tres bloques que forman el layouts.
Lo pueden ver en template 07.
entrada de TSUNAMI a las 4:48 PM 0 comentarios
martes, abril 25, 2006
TEMPLATE O6
Lo pueden ver en Template 06
Para los que gustan de los diseños más sencillos, en especial, la escencia misma de un blog que es ser de dos columnas, aquí tengo un diseño que con tres simples ajustes pueden personalizar a su antojo. Un template de 2 columnas y con dos barras para alojar los links más destacados.
Lo probe en Mozilla-Firefox y en I.E. 6.0, en ambos luce bien, uff, (eso ya es un logro).
Modificando atributos del C.S.S. tales como los mostradom más abajo y cuidar el contraste del fondo con el texto y los links se pueden lograr una veintena de diseños a partir de una plantilla básica:
hoja {
width:700px;
background-color:#eee;
border:1px solid #000;
}
/*_
width: el ancho
el color del fondo
y las propiedades del borde del blog completo-*/
_________
#main {
width:440px;
float:right;
background-color:#fff;
}
/*--
tamaño y color del fondo del contenido del
post--*/
________
#cinta1 {
width:700px;
height:20px;
background-color:#222;
color:#fff; }
/*--
tamaño y color de la cinta de links--*/
entrada de TSUNAMI a las 8:43 PM 0 comentarios
martes, abril 18, 2006
TEMPLATE 05
Lo primero, si copian el template, cambien la foto, por que no me acuerdo de donde la saque8 es que solo a noto links en mis listas) y no sea cosa que..... Para ello se van al CSS en la orden
#header { background-image: url(http://nea.ngi.it/templates/img/29-land.jpg);}
y cambian el ulr por otra de ustedes y listo.
Este template está realizado integramente en CSS, incluye un menu en left, que es bien dinámico. La gracia de este menú es que es totalmente realizado en CSS y html, sin necesidad de java y de ningún tipo de artilugio externo que enlazar, salvo los propios links. Con esto ganamos puntitos en el tema de la accesibilidad, sobre todo a los usuarios discapacitados (como se les llama a aquellos que no usan java en sus tarros). Además cuenta con una cinta de fondo negro en la parte superior útil a la hora de colocar los link más personales o el buscador.
Los demás links siguen con nuestra tendencia a jugar con los tamaños de las fuentes, lo que los hace más bonitos y dinámicos. Ahora incorpora un cambio en el tipo de presentación de la fuente en el modo activo del link, pruebenlo, lo pueden ver en TEMPLATE 05.
Consultas, aquí mismo, eso es todo por ahora.
entrada de TSUNAMI a las 6:40 PM 2 comentarios
domingo, abril 16, 2006
TEMPLATE 04
Este template es bien minimalista, que es una de las tendencias que estan pegando fuerte en los diseños de web. La maquetación es entera en CSS y XHTML, que ayuda a ser mas limpio el código. Funciona bien en I.E. y en Mozilla que son los browsers más usados, y si funciona en Mozilla, entonces en Opera y otros que usan tecnología similar a este. Contiene un buen side al lado derecho para tener a mano los archivos y datos personales, y el side izquierdo con puros links que tu debes incluir.
Lo puedes ver en Template04
El codigo lo puedes sacar haciendo click con el botn derecho del mouse e ir a "ver codigo fuente". Cópialo y pegalo en tu plantilla, junto con los codigos php que generan las entradas, comentarios y los archivos anteriores, esos copialo de tu plantilla que usas y las agregas a la nueva.
Su uso es libre y solamente dejen un comentario y no borren al autor.
consultas acá.
entrada de TSUNAMI a las 5:20 PM 0 comentarios
TEMPLATE 03
Este template también es realizado en CSS y XHTML. No usa tablas, aun que estas sean super fáciles de manejar para todos los browsers, preferí regirme por los estandares que están actualmente en uso y que apunta a la eliminación de tabals(salvo para lo que fueron hechas, contención de datos) por lo tanto debería funcionar re bien en I.E. y en Mozilla, que ya lo probé en este último, pero con I.E. nunca se sabe.
Incorpora un pequeño truco de CSS que hace que los links sean más dinámicos.
Para personalizarlo pueden cambiar los valores que definen el color de de Body (no asigne colores a las cajas, esto se puede agregrar y personalizan cada una de estas a su gusto) y luego los colores de los links y de los textos con eso ya tendrían su skin personalizada.
Ruego dejar un comentario si lo ocupan. El código lo pueden sacar haciendo click con el boton derecho del Mouse y van a "ver codigo fuente" , copien y peguen. Antes deben extraer de su template el código php que hace funcinar las entradas y el que hace funcionar los archivos y títulos. Dudas consultas en este sitio.
También resplanden sus link y luego los incorporan en la nueva plantilla.
entrada de TSUNAMI a las 1:15 PM 0 comentarios
sábado, abril 15, 2006
TEMPLATE 02
En template02
Este template esta hecho integramente con CSS y un mímo de html. No use tablas aun que estas son más estables a la hora de navegar en diferentes browsers (navegadores), pero la tendencia apunta al desarrollo de templates y layouts sin tablas. Lo malo de esto es que cuesta ajustarlas para que se vean bien en I.E. y FireFox a la vez. Esto es debido a que I.E. no respetea la totalidad de los estandares. Lo malo de esto, es que el 70% de los navegantes usan I.E. y el resto los otros navegadores que sí respentan los nuevos estandares de CSS que marca 3wc. El desafío es poder hacer un layout que se pueda cargar bien en I.E. y en los demás browser. En este caso, este template lo probe en Firefox e I.E. y no urge más en ajustes por que se vee a mi parecer bien.
Si te gusta, copia el codigo fuente y si quieres, lo puedes personalizar a partir de este. Lo único que pido es citar la obra, mal que mal, me he sacrificado bastante por aprender de forma autodidacta estos menesteres que son actualmente unos de mis hobbies.
entrada de TSUNAMI a las 11:45 PM 2 comentarios
TEMPLATE 01
en template01
Este template esta hecho integramente con CSS y un mímo de html. No use tablas aun que estas son más estables a la hora de navegar en diferentes browsers (navegadores), pero la tendencia apunta al desarrollo de templates y layouts sin tablas. Lo malo de esto es que cuesta ajustarlas para que se vean bien en I.E. y FireFox a la vez. Esto es debido a que I.E. no respetea la totalidad de los estandares. Lo malo de esto, es que el 70% de los navegantes usan I.E. y el resto los otros navegadores que sí respentan los nuevos estandares de CSS que marca 3wc. El desafío es poder hacer un layout que se pueda cargar bien en I.E. y en los demás browser. En este caso, este template lo probe en Firefox e I.E. y no urge más en ajustes por que se vee a mi parecer bien.
Si te gusta, copia el codigo fuente y si quieres, lo puedes personalizar a partir de este. Lo único que pido es citar la obra, mal que mal, me he sacrificado bastante por aprender de forma autodidacta estos menesteres que son actualmente unos de mis hobbies.
entrada de TSUNAMI a las 11:34 PM 0 comentarios
CAMBIO DE RUBRO
DESDE AHORA, TSUNAMI SE CAMBIA DE RUBRO Y SE DEDICA AL DISEÑO Y DIFUSIÓN DE TEMPLATES, TRUCOS Y DATOS PARA LOS BLOGEROS