Ceklog

Vivernet, (programa de la Conserjería de Infraestructura y Desarrollo Tecnológico de la Junta de Extremadura, en colaboración con Fundecyt), ha presentado el lanzamiento de la fase nacional de selección de equipos que representarán a España en el Webdesign International Festival 2005/2006 (WIF 2005/2006).

Dicha selección nacional tendrá lugar en Cáceres los días 18 y 19 de noviembre de 2005 y consistirá en el diseño de una página web sobre un tema definido por el jurado por parte de los equipos multidisciplinares de todo el país (profesionales y amateurs), para lo que dispondrán de 24 horas ininterrumpidas.

El ganador o ganadores representarán a España en el Webjam Contest, celebrado en el ámbito del WIF, en la final que se desarrolle en Francia los días 2, 3 y 4 de febrero de 2006, en la que participarán representantes de todos los países socios de este acontecimiento (España, Francia, Inglaterra, Rusia, Bélgica, Polonia, Canadá, Estados Unidos y Brasil).
Previamente, el día 17 de noviembre, tendrá lugar un Encuentro de Diseñadores Web, en el que se contará con la presencia de un miembro de la Asociación Andaluza de Diseñadores como ejemplo de buenas prácticas, y en el que se podrá debatir la situación del sector, problemáticas actuales, formas de asociarse, etc.

Para inscribirse hay que darse de alta en esta web. Se me olvidaba, hay papeo y tapeo gratis en hotel de ****

Vía Blogpocket me encuentro con una herramienta on-line llamada WordPress Index Builder que es capaz de construirte todas las plantillas necesarias para cambiar el aspecto a tu instalación de WordPress. El trabajo realizado por el autor es inconmensurable, te permite seleccionar desde cosas tan complejas como los juegos de colores en una paleta, hasta cosas tan sencillas como incluir un feed Atom. La verdad es que es totalmente configurable. Una vez finalizado el cuestionario de requisitos puedes descargar el nuevo tema y aplicárselo en menos de un minuto a tu bitácora. Entre los DEBE he de decir que se echa en falta poder previsualizar el “template”, aunque sea en una bitácora genérica.

Hoy es el día del trabajo y el día de la Madre, pero lo que no sabía era que también era el día del CSS Reboot, muchas de las páginas habituales de mi feedreader lo han seguido, y curiosamente yo sin quererlo también lo he hecho aunque a mi manera, actualizando WordPress y cambiando el template
¿Os gusta el cambio? A mi de momento me gusta, quizás cambie el fondo y retoque algunas cosillas, pero en general me gusta bastante.
Por cierto, estoy pensándome poner el AdSense porque Guti me puso los dientes largos el otro día.

En el curioso blog de Juglar hay dos categorías de artículos muy interesantes. Una es la de CSS y otra la de RSS.

Si alguien todavía no sabe que son CSS y RSS tiene la oportunidad de saberlo.

Hace un par de días en un post de logicanova había un enlace a esta página en el que se encuentra un listado muy completo de editores de hojas de estilo en casacada (CSS).

En esa lista se encuentra CSSED que es un excelente editor para GNU/Linux o UNIX. Entre sus posibilidades están el resaltado de la sintaxis, autocompletion (lista y pop-up), selector scanner, scratch pad (drag and drop), marcadores, vista del árbol y la validación entre otras características. Es una aplicación GTK2.

Un editor totalmente recomendable.

Hoy seguimos con otro manual/tutorial para aprender a diseñar una Web siguiendo los estándares del W3C. En este caso se trata de un tutorial de iniciación a CSS que ha escrito nuestro amigo Toad y que os recomiendo encarecidamente.

Enhorabuena por el excelente trabajo Toad.

Para el Curso de Programación y Diseño Web, JJ, nuestro atalaya preferido, ha redactado este pequeño manual en el que se explica de forma sencilla cómo se puede publicar una página web, cómo construirla, que contenidos debe tener y hasta cómo “forrarse” con programas de afiliados, anuncios y otras hierbas.

En definitiva, muy ameno de leer y un buen manual para los neófitos a los que les pica el gusanillo del diseño Web.
¡Totalmente Recomendable!

En esta entrada del blog de JJ, Anónima ha realizado las siguientes preguntas:

¿Ques son los CSS, por qué es malo hacerlo con tablas?

¿qué son frames? ¿en qué influye eso en lo que yo veo en la página web?

¿por qué os parece mal que salten ventanas, y se usen javascript, mapas de imágenes para menús? ¿que hay de malo en los pdf?

Yo he intentado contestar a las preguntas y creo que es posible que haya mucha gente a la que le interesen las respuestas, por eso las reproduzco aquí:

* Las CSS son hojas de estilo en cascada que se utilizan para separar el contenido de la presentación, las CSS se encargan de la presentación tanto de letras como de fondos, tamaños y posiciones, y siguen un estándar, por lo que se ven (o al menos deben verse) bien en todos los navegadores del mercado. Es obvio que el contenido está en los ficheros (X)HTML, por lo tanto tendremos separado el contenido (archivo XHTML) y la presentación (archivo CSS).

* Usar tablas es malo porque incluimos dentro del archivo de contenido (el XHTML o HTML) las normas de presentación, por lo que el resultado final es que el contenido no es independiente de la presentación y esto implica que es menos reutilizable y más difícil de mantener.

Es muy importante una correcta separación del contenido de la web y de su presentación porque esto nos permite utilizar una presentación distinta para distintos cometidos, por ejemplo podemos querer una presentación para impresión y otra para verla en el navegador. Con CSS la solución es inmediata, basta hacer un CSS para cada cometido, ¿cómo lo harías con tablas?

* Los frames dividen una web en varios trozos, en cada uno de esos trozos se puede incrustar un archivo (X)HTML, hasta aquí perfecto, el problema llega cuando alguien accede a tu página con un navegador antiguo que no soporta los frames, entonces este visitante no podrá ver tu web. Lo mismo ocurriría con un navegador en modo texto como Lynx (muy utilizado por personas con discapacidades como los invidentes). También el usuario puede tener problemas si accede a una web con frames y la resulución de su pantalla no es la suficiente como para que los 2 o los N frames se visualicen en ella, no es muy raro ver monitores que sólo permiten una resolución de 640×480 en universidades, como tampoco es extraño ver páginas web exclusivamente diseñadas para 800×600 o 1024×768 (y sino que se lo pregunten a PJorge :P).

* Me parece mal que salten ventanas por el mismo motivo anterior, porque no es usable, hay navegadores que no lo soportan y personalmente me molestan, ¿por qué hacer saltar una ventana si ese contenido se puede poner en la web, o si se puede poner un enlace a esa página de forma ortodoxa?.

* El uso de Javascript es distinto, hay cosas que no se pueden hacer con (X)HTML porque es un lenguaje de marcado y NO un lenguaje de programación como mucha gente piensa. De ahí que se necesiten lenguajes de script como Javascript para realizar ciertas operaciones y algoritmos.

* En cuanto a los mapas de imágenes para menús no me parece mal que se usen si hay un menú alternativo de texto, ya que como he dicho antes hay navegadores que no permiten imágenes.

* En los PDFs no hay nada de malo, ¿alguien ha dicho lo contrario?

Espero haberte aclarado las dudas.

Puedes leer más y documentarte con ejemplos en este artículo que publiqué hace tiempo.

Salu2

Tengo que publicar esta reseña para compartir con todos este buenísimo “manual de estilo” para crear páginas web.
Lo he leído en esta entrada de Barrapunto, pero como esta bitácora es una extensión de mi cerebro he de apuntarlo aquí para cuando me haga falta.

Todos los que trabajan normalmente con páginas web saben que es posible, sin ir más lejos esta bitácora sepera el contenido (HTML o XHTML) de la presentación (CSS).

Podéis ver como queda esta web si le quitamos el archivo CSS (el de presentación) en esta dirección.

Es muy importante una correcta separación del contenido de la web y de su presentación porque esto nos permite utilizar una presentación distinta para distintos cometidos. Por ejemplo, podéis ver que si escogemos la opción File->Print Preview en Mozilla/Firefox se nos mostrará el contenido con un formato listo para impresión, en Internet Explorer se hace en Archivo->Vista Preeliminar. Esta presentación para impresión la lleva a cabo la hoja de estilos CSS que podéis encontrar en esta dirección.

Esto lo explicó minid hace unos días en un excelente artículo.

Espero que quede clara la importancia de disponer el contenido y la presentación no como un todo, sino como partes separadas que se complementan según las necesidades.

Otra forma que está ahora en auge pero que se usa menos es la utilización de documentos XML a los que se les aplica una serie de transformaciones mediante el lenguaje XSL. En el documento XML se encuentra el contenido y el documento XSL indica las reglas a aplicar a ese contenido.

He hecho un ejemplo de esto que se puede ver aquí.
Mirad primero el resultado en el navegador y después mirad el código fuente para entender el resultado.

Pulsad con el botón derecho para descargar el fichero XML

Pulsad con el botón derecho para descargar el fichero XSL

Actualización: Hermann nos deleita con un maravilloso artículo sobre la importacia de separar contenido de presentación. Os animo a que lo leais.

Siguiendo los consejos he quitado algunas de las líneas para que el contenido sea más fluido, supongo que todavía está demasiado tabulada para algunos ;), pero creo que si empiezo a quitar color de aquí y de allá la cosa no va a quedar todo lo ordenada que me gustaría.

Para el que le interese, he utilizado el Color Schemer Online para buscar los colores más adecuados y también me ha sido de mucha ayuda la extensión Web Developer para Mozilla/Firefox que recomendaba Hermann ya que he podido cambiar la hoja de estilos CSS on-the-fly viendo los cambios en tiempo real en mi navegador favorito.

Muchas gracias a todos por vuestra opinión y por los consejos.

P.D.: Más consejos son siempre bienvenidos.

¿Quien dice que no hay buenos editores de páginas web para GNU/Linux? Todos sabemos que el programa Dreamweaver de Macromedia o el Frontpage de Hasefroch son los editores de páginas webs más populares y por ende los más utilizados, pero de todos es bien sabido que no hay versión para el SO GNU/Linux.
Pues bien, acaba de salir nueva versión 0.3 de Nvu, es un programa tipo Frontpage/Dreamweaver, WYSIWYG y que nos promete la cómoda creación de contenidos web como si trabajásemos con un procesador de textos. Pero la diferencia es que es un programa libre y está disponible tanto para Windows como para GNU/Linux.

Algunas de sus características son:

* WYSIWYG editing of pages, making web creation as easy as typing a letter with your word processor.

* Integrated file management via FTP. Simply login to your web site and navigate through your files, editing web pages on the fly, directly from your site.

* Reliable HTML code creation that will work with all of today’s most popular browsers.

* Jump between WYSIWYG Editing Mode and HTML using tabs.

* Tabbed editing to make working on multiple pages a snap.

* Powerful support for frames, forms, tables, and templates.

* The easiest-to-use, most powerful Web Authoring System available for Desktop Linux users.

Yo es el que utilizo asiduamente y os puedo decir que no tiene nada que envidiar a ninguna de las alternativas de software privativo (como diría RMS)

Sin más dilación os insto a que lo probéis y me déis vuestras opiniones.

El enlace de descarga directa con distintos sabores:

- Windows
- GNU/Linux (Debian k2.4) gcc/g++ 2.95.4
- Código fuente

Y el Change Log de la versión 0.3:

# based on Mozilla 1.7 RC3
# Tip of the Day widget added (code contribution by Philippe Goetz)
# The site manager can now handle local sites through file:/// URLs (see 0.20 Known Issues)
# Publishing Site Settings dialog has been modified, a lot of people complaining about it
# Table Insertion dialog modified to allow one-click insertion; values in the “Precisely” panel are now persistent
# Writing direction control added to Format menu and to customizable toolbars
# Class assignment dropdown menu to the selection added to customizable toolbars
# ID and class assignment menus added to contextl click in structure toolbar
# Correct handling of DT and DD elements; added corresponding buttons to customizable toolbars
# Format > Font menu and corresponding toolbar’s dropdown menu now query only once the system’s font list
# Spellchecker enabled
# Markup cleaner added under Tools menu
# File extension is handled correctly again in the filepicker (see 0.20 Known Issues)
# The user can now specify a document’s language and writing direction through the document properties; default language and default writing direction can be specify through Preferences.
# MadeWithNvu smart widget
# An online bug report/suggestion page can be reached through the Help menu (warning, this page will be available only June 18th)

Espero que os guste…