css

Hace poco se planteaba esta pregunta desde la sección Genbeta Respuestas. Y es que en este caso los propios lectores de Genbeta, con vuestras respuestas, además de ayudar a otro usuario, habéis dejado unos buenos enlaces que paso a recopilar.

La pregunta era curiosa: ¿Algún buen editor de código en la nube para programación? En un principio no me parecía muy clara. ¿Sólo queremos editar un trozo de código? ¿Querrías compilarlo? ¿Lo que realmente quieres es un sitio donde guardar tus proyectos en la nube?
La pregunta era abierta, y seguramente por ello, vuestras respuestas han sido diversas y enriquecedoras:

Leer más

Apple está dispuesta a demostrar que Flash se ha quedado atrás si lo comparamos con las tecnologías web más modernas. Y no escatima esfuerzos en ello, puesto que ha publicado en su web oficial un seguido de ejemplos de contenido dinámico construido enteramente con HTML5.

Son, más concretamente, 14 ejemplos de lo que podemos hacer usando HTML5 y las transiciones CSS: Vídeos que permiten ser manipulados, una galería de imágenes, la posibilidad de mostrar un minireproductor de audio, vistas en 360º usando javascript… básicamente elementos que hasta ahora requerían de complementos como Quicktime o Flash, hechos con los nuevos estándares.

Desgraciadamente Apple requiere que usemos Safari para poder contemplar los ejemplos, algo bastante extraño cuando hay otros navegadores que también soportan estos estándares sin ningún problema. Supongo que como todas las compañías, a Apple le gusta promocionar sus propios productos.

Vía | Applesfera
Sitio oficial | Apple HTML5
En Genbeta | Comparando el rendimiento de HTML5 y Flash

Primero fueron las extensiones, después los scripts de Greasemonkey y ahora Chromium sigue su camino para convertirse en uno de los navegadores más personalizables con el soporte de hojas de estilo CSS personalizadas en las páginas web que queramos modificar a nuestro gusto.

Básicamente, el poder usar nuestras propias hojas de estilo CSS en las páginas web nos permite modificarlas a nuestro gusto. Por ejemplo, shutup.css es un estilo alternativo de youtube que nos permite eliminar los comentarios de sus páginas, como podemos ver en la imagen superior. Del mismo modo podemos cambiar la posición de otros elementos o incluso añadir algunos nuevos.

La funcionalidad no está activada por defecto, pero añadiendo el parámetro —enable-user-stylesheet en la ejecución de las últimas nightlies del navegador podemos activarla y poder usar las hojas CSS que queramos. De momento, lamentablemente, hay que reiniciar el navegador cada vez que hagamos cambios en el CSS personalizado para poder cargarlos.

Vía | DownloadSquad

CSSTXT es una sencilla herramienta para crear visualmente estilos de texto en CSS. Es tan simple como introducir el texto, activar o desactivar opciones, y seleccionar tamaños de letra, o colores de fondo, con el cursor del ratón. Tras hacer los cambios, tan sólo hay que pulsar en “generate” para actualizar el resultado.

Entre las opciones disponibles están las diferentes decoraciones de texto (negrita, cursiva, subrayados, etc), el espaciado, la altura, el tamaño (en pixels, ems o porcentaje), y ancho del borde de línea. También la familia de fuentes, la alineación del texto, el estilo del borde, y los colores de la letra, el fondo y el borde, todo ello mediante un selector de colores.

Leer más

A medida que los navegadores actuales implementan extensiones propuestas a CSS3, nos vamos maravillando con los juguetes que los desarrolladores web están creando. En el vídeo de arriba podemos ver un experimento que calca el efecto pared que podemos ver en Cooliris, con la pecularidad de que solo utiliza HTML, CSS y Javascript.

Se ejecuta suavemente gracias a las transformaciones CSS que ha implementado Webkit, algo que Firefox 3.5 también añadió el invierno pasado. A mí personalmente me fascina la fluidez de las animaciones a pesar del número de imágenes que haya en pantalla. Para verlo en todo su esplendor necesitamos el Safari incluido en Snow Leopard, o la última versión de Webkit disponible para Leopard y Windows. Aunque ya digo que Firefox tiene estas extensiones, al ser experimentales las han denominado de manera distinta (webkit-* y moz-*) y por tanto este ejemplo no se verá correctamente en este navegador.

Vía | Applesfera
Vídeo | Youtube
Enlace | Satine.org
Demo | Snow Stack
Descarga | Webkit Nightly

Como te hemos comentado en Genbeta, la muy próxima versión de Firefox 3.1 vendrá con jugosas novedades inicialmente pensadas para su predecesor que por razones de tiempo no se pudieron incluir. La mayor probablemente sea el nuevo motor de Javascript, que promete velocidades de vértigo. Pero también se mejora el soporte de estándares, y en este apartado me gustaría resaltar unas nuevas propiedades CSS experimentales que son es-pec-ta-cu-la-res.

Se trata de las transformaciones CSS, ni más ni menos. Estas transformaciones se pueden aplicar a cualquier objeto, y pueden ser de traslación, de rotación, de escala, de sesgo y una especial llamada matricial, que permite transformaciones aún más avanzadas. Y cuando digo cualquier objeto, me refiero a cualquiera; por ejemplo en la imagen de arriba se transforman la página de Genbeta y Wikipedia a antojo. ¡Y los elementos HTML, como enlaces y formularios, responden igual que páginas normales!

No es el primer motor que incluye soporte para estas transformaciones experimentales, ya que Webkit también lo implementó, lo que indica que en un futuro próximo puede que se estandarice del todo y se implemente en todos los navegadores. Por ejemplo, para disfrutar de animaciones tipo Coverflow sin necesidad de Flash. Si quieres probarlas, en la última versión de Minefield ya están activadas.

Vía | Mozilla Links > Mozilla Developer Center
Prueba | Solo para Firefox 3.1

A TabCreatr y CSS Type Set ahora le sumamos IzzyMenu, otro servicio web especializado en la creación de todo tipo de hojas de estilos para los menús sin necesidad de conocimiento alguno en CSS.

Simplemente, definiremos la estructura de nuestro menú y a través de las opciones que tenemos a la izquierda configuraremos nuestro estilo dentro en los diferentes comportamientos del menú, indicando si queremos un menú horizontal o vertical, y definiendo cada uno de los valores que conforman nuestro estilo.

Podemos generar y visualizar el resultado, y si nos convence, lo podemos guardar a nivel local con todos los archivos disponibles, con códigos y las imágenes, en un .zip, aunque si estamos registrado, lo podremos guardar online e incluso compartir, de manera que permita a nuestro trabajo estar disponible dentro de la galería de estilos de menús que han desarrollado otros usuarios, y que igualmente se pueden probar y descargar.

Lo cierto es que hay menús bastante logrados y vistosos, dignos de aparecer en sitios web, con lo que nos podemos hacer una idea de lo que podemos hacer sin apenas conocimiento.

Vía | Xyberneticos
Enlace | IzzyMenu

Para aquellos que se dedican al diseño web, aquí va un par de ayudas. Por un lado tenéis a TabCreatr, herramienta web en fase alfa, por la que podéis generar los diseños de los menús mediante css. Para ello os saldrá una completa tabla de opciones que tenéis que configurar para la creación de vuestro estilo css. Ya creado, sólamente tenéis que guardarlo con un nombre, y ya podrá formar parte de la galería de estilos css para los menús, donde cualquier usuario podrá previsualizarlos y valorarlos.

Por otra parte, nos encontramos con CSS Type Set, otra aplicación web, ésta mucho mejor estructura y diseñada, por la que os permitirá formatear un texto a través de la hoja de estilos que crearemos sin tener conocimientos para ello, es decir, a un mismo texto le aplicaremos una serie de atributos como si de un procesador de textos se tratase, generando la hoja de estilos a usar.

Dos aplicaciones orientadas a la creación de estilos css, la primera, que quizás sea más compleja y algo dificil de usar para quienes apenas tengan ideas de la creación de hojas de estilos, para los menús, y la segunda, extremadamente sencilla y visual, para el formato de textos.

Vías | FeedMyApp | Xybernéticos
Enlaces | TabCreatr | CSS Type Set

Los desarrolladores y diseñadores de sitios web ahora podrán encontrar en Xhtml-Css Validator una herramienta sencilla, práctica y eficaz para evaluar sus sitios web referente al código XHTML y a la hoja de estilos CSS.

Es casi como un buscador, donde sólamente hay un campo en el que deberán de introducir la url, y si lo desean, configurar las preferencias sobre HTML y CSS. Luego, en función de la página introducida, mostrará un resumen con los errores y advertencias referentes al HTML y CSS de la página introducida. Lo curioso es que todas dan errores, incluidas las de Google, Yahoo y Live.com.

Leer más