Hay muchas veces que entro en alguna web (y como soy bastante malo con css) viendo algún elemento en particular que me parece cool, y me pregunto, ¿como hacen eso?. En la antiguedad debía remitirme al CSS de dicha página y buscar la div, o lo que sea que contenga el estilo.

Pero no, ahora encontré CSSViewer, una extensión de Firefox que te permite ver el CSS de una página de forma muy cómoda: por partes, sin dejar de navegar en el diseño original.
Muestro screenshot por si necesitan una ilustración:

(click para ampliar)

Como verán, con el simple hecho de seleccionar con el mouse el bloque de “Quotes”, me dio una descripción total de la div que lo contiene (#kyo), pudiendo ver como lo hice y además, demostrandome que a la hora de hacer cosas en CSS le pongo cualquier nombre a las divs.

Su uso es simple, uno está tranquilo navegando, y basta con ir a Herramientas > CSSViewer, y la navegación pasará automáticamente al “modo css”. Para desactivarlo, hay que realizar el mismo procedimiento.
Muy bueno el diseño, también, aunque suene un poco random.

Instalar CSS (Extensión Firefox): Click Aquí

Web del autor: Click Aquí

Recomendada totalmente si trabajas con CSS. Y si estás aprendiendo, mucho más! Ver otros trabajos siempre ayuda muchisimo.

Fuente: Tablosign

Últimamente he estado practicando un poco de CSS. Más que nada me centré en perfeccionar lo que sabía (no mucho, pero era lo básico).

Entre las cosas que mejoré fue el uso de “float” y “clear”. Usualmente tenía problemas con eso porque no aplicaba un elemento con la propiedad “clear: both” y, en la mayoría de las veces olvidaba poner ‘float’ a ambos elementos que quería posicionar. Errores que causaban deformaciones masivas en los diseños.
Cree un ‘pseudo-theme’ que originalmente iba a usar para convertir en theme de WordPress y aprender a hacer esto. Sin embargo, fallé. Bueno, en teoría no, porque nunca seguí trabajando. Había logrado que el index se vea bien (salvo algunas deformaciones y demás). Pero no tenía muchas ganas de seguir tocando PHP (quizás cuando aprenda de el más a fondo…) así que lo dejé como plain-html con CSS.

Luego de probar Kingdom Hearts (odio las plataformas o_o) Después de descansar un poco, me decidí a incursionar en crear otro diseño. Esta vez con la idea de crear un menú ‘en pestañas’. Debo decir que no fue dificil (luego de leer un poco de documentación).

Diseño #1: Click Aquí (o el CSS)

Diseño #2: Click Aquí (o el CSS)

O sea, en definitiva aprendí más de maquetación. Ya no me cuesta casi nada que la web tome el formato que quiera. Por eso… Yo + CSS = Level Up!

PD: Ya se que odiarán la organización del HTML que uso. PERO A MI NO ME CONFUNDE >_<.

Kompozer es una herramienta para el desarrollo web (estilo Dreamweaver, pese a que muchos los odien) basada en NVU. De hecho es “el NVU no-oficial con menos bugs”. Como acabo de indicar, NVU es un programa muy parecido a Dreamweaver, con la diferencia de ser OpenSource, gratuito y multiplataforma.

El problema de ese programa era que tenía muchos bugs, los cuales, en esta herramienta están solucionados.

Los cambios y demás, pueden verlos en la web, pero que es mucho más potente y “standar”, lo es.

Es un buen programa, aunque yo ahora haga uso de HTML 4.01 con la ayuda de Gedit o BlueFish, hace un tiempo me habría servido de mucho, y seguramente a mas de uno les servirá ahora mismo.

Descargar KompoZer (Windows - 6.2 mb): Click Aquí

Página oficial de KompoZer: Click Aquí

Página oficial de NVU: Click Aquí

Si quieren más descargas, podrán encontrarlas en la web del proyecto.

Suerte en la vida, gente!

[tags]HTML, Kompozer, NVU, Windows, Linux, Software, Diseño Web[/tags]

A la hora de hacer webs en HTML, si se trata de comunidades o webs con actualizaciones seguidas, es un poco complicado andar editando la página y agregando las noticias. Para eso la gente úsa o desarrolla sistemas de noticias en PHP.

En el primer caso encontraremos ejemplares tales como:

Cutenews:

• No usa bases de datos
• Sistema de plantillas simple
• Posibilita el uso de comentarios
• Avatares, emoticones (smilies)
• Editor WYSIWYG para los posts
• Categorias
• Sistema para multiples usuarios
• Busqueda de noticias
• Baneo de usuarios
• Backup
• Protección antiflood
• RSS
• entre otras cosas…

El problema básico que encontré fué que no se adapta al CSS de tu web; tu debes hacer el trabajo. Es un poco aburrido, pero con paciencia se logran cosas interesantes.

Página oficial CuteNews: Click Aquí

Descargar CuteNews: Click Aquí (Última versión)

(trae instrucciones de instalación consigo - en inglés)

Fusion News:

Éste lo probé hace muy poco, y es un proyecto que por lo visto avanza muy rápido. Es gratuito y fácil de instalar. Sus funciones son un poco más intrigantes que las de CuteNews:

• Categorias
• Noticias al estilo cortas y “Leer más”, bastante útil
• Creación de usuarios para la administración
• Comentarios
• Enviar noticias a un amigo
• BBCode en las noticias
• Emoticones (smilies)
• Archivo de noticias
• Busqueda
• Upload de imagenes
• Validación en XHTML
• y muchas cosas más…

Si tengo que elegir entre alguno de los dos sistemas que mencioné hoy, elegiria FusionNews pues se adaptaba perfectamente al CSS que había hecho y sin problemas. Además me pareció más rápido y fácil de usar.

Página oficial Fusion News: Click Aquí

Descarga Fusion News (Última versión): Click Aquí

Pero bueh, los dos son grandes elecciones a la hora de crear webs dinamicas sin tener que andar modificando archivos para agregarlas nosotros mismos, y que quede de manera pro.
Nota: El Cutenews agrega publicidad al bottom de las noticias, en cambio FusionNews; un punto positivo.
Suerte en la vida, gente!

[tags]webs, diseño web, fusionnews, cutenews, noticias web[/tags]

He estado retomando CSS y entre ayer y hoy me hice un pequeñisimo diseño HTML.
En sí no lo hice con ningún fin más que practicar.

100% escrito a mano por mí, tanto HTML como CSS usando Notepad++. Válido HTML 4.01, CSS y no usa tablas.

Ver Diseño: Click Aquí

Sinceramente lo que más me costo fué ubicar el texto de la hora y día dentro de su correspondiente caja (el texto era un h5 y la caja, bueh, como dije, una div con background).

Había una mockup con la que partí para hacer el diseño (mirala aquí), y si hay algo que no pude hacer es que la caja solo tenga marcos a izquierda y derecha y estos sean una sombra (una imágen, bah). Pero pronto seguiré ingeniandomelas para hacerlo funcionar.

El espacio entre la LIST y el H1 (dónde dice Menú Principal) puede sacarse, y ayer no pude, pero hoy Kenny me ha iluminado dándome una forma para hacerlo.

Seguro hoy o mañana hago las secciones por dentro (quería usar tablas en la sección Descargas, pero no quiero perder mi cool botón de Tableless… *o*). Quizá le agregue bordes redondeados al contenedor principal, pero eso ya pasa mis conocimientos.

A pulirlo un poco más, y si sale bién lo hago un theme para Wordpress (uno de mis intentos fallaron).

En fin…

Criticas, y todo eso a los comentarios.

Suerte en la vida, people!