Supongo que más de uno quisiera saber como usar HTML Y CSS, eso que se usa para diseñar páginas web. Realmente no es difícil, digo, en sí, no son lenguajes de programación, simplemente uno lo usas (HTML) para informar al navegador que es cierta cosa y otro (CSS) para decir como se tiene que ver esa cosa, como por ejemplo, un párrafo (en términos muy prácticos).
Tan no complicado es, en los fundamentos básicos, que lo puedes aprender desde tu computadora si tienes la voluntad y totalmente en español por si fuera poco. Sin embargo, hay muchos tutoriales en la red desactualizados que recomiendan usar prácticas no muy habituales estos días, como usar elementos HTML para cosas que no han sido concebidos o peor aún, usar algunos elementos que ya han sido desaprobados por la misma W3C, eso y entre otras cosas que descubriras. Y si por cualquiera de los casos tuvieras la necesidad de usar uno de esas “malas prácticas” por lo menos entender porqué lo estamos haciendo. Aunque también es cierto que no hay que tomarse todo tan estricto en esto de los estándares web como bien menciona Jeff Croft.
Bueno, para aprender desde el principio:
- Saber de que trata HTML y CSS, que mejor que HTML con clase primero y en seguida el manual CSS de Carlos Benavidez.
- Después nos leemos el Manual de Belén Albeza para repasar y actualizar lo aprendido, además de permitir ver como estas dos especificaciones o recomendaciones trabajan juntas. Igualmente nos ayudara a introducirnos al XHTML que digamos funciona de la misma manera que el HTML y comparte el mismo objetivo: “estructurar contenido”.
- Si tenemos dudas en el camino siempre podemos consultar las especificaciones de la misma W3C traducidas por SIDAR HTML 4.01 y CSS 2. O bien consultar pequeñas guías de referencias, en el caso de estar con CSS bajar la chuleta de Ateneu Popular.
- Aprendido lo básico y por si quieres profundizar en el tema están los libros gratuitos para imprimir o leer en linea de librosweb.es sobre XHTML y CSS. Si lo tuyo son los blogs puedes consultar a Diseñorama o CSSLab para técnicas mas avanzadas.
- También es siempre bueno preguntar y para eso están los Foros del Web (yo tenía el nick de Opeth pero hace unos ayeres que no entro).
Todos esos enlaces son sólo algunas recomendaciones que tenía guardados por ahí, si buscas en San Google seguramente encontraras mucha más información útil ya publicada por gente totalmente desinteresada.
The Pencil Project es un interesante proyecto de código abierto en el cual podemos crear de una forma fácil y rápida wireframes y prototipos de navegación (bocetos en cierto sentido). Estos se usan en el proceso de diseño de una página web y gracias a Pencil, todo desde Firefox, sólo debemos dibujar o arrastrar los elementos (botones, cajas de búsqueda o texto) dentro del lienzo o página.
Para el que no este muy familiarizado con el termino Wireframe o prototipos recomiendo leer el post de Usable y accesible llamado “Wireframe“, cito:
“Prototipos de Baja fidelidad o Wireframe o StoryBoard: son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, de tal manera que implementan aspectos generales del sistema sin entrar en detalle”.
Pencil de momento se ve bastante bien, teniendo en cuenta que un programa de este tipo, como Axure, viene costando casi 600 dólares, Pencil es gratuito.
Entre sus características encontramos:
- Renderizado en PNG
- Construcción de plantillas (prototipos)
- Documentos multi-página
- Herramientas de dibujo básicos: alinear, escalar, etc.
- Multi-plataforma
- Poder trabajar con objetos externos
En su página podemos ver videos de su funcionamiento en formato Ogg o por Web Tech Daily para no tener que descargarlos.
Mis atajos de teclado preferidos en Firefox
Julio 29, 2008
Alguien me preguntaba cuál eran mis atajos de teclado preferidos después de que hice el post “Las extensiones de Firefox ¿prescindibles o imprescindibles?“, así que aquí están. La lista completa de shortcuts para todos los sistemas operativos pueden verla en la propia Mozilla.
- Alt+Flecha izquierda atrás
- Alt+Flecha derecha adelante
- Ctrl+L Colocar el cursor en la barra de direcciones
- Ctrl+K Colocar el cursor en la barra de búsqueda, si presionan “alt+flecha abajo” pueden seleccionar el motor de búsqueda
- Alt+Enter Abrir la direcciones en una nueva pestaña, es un atajo y complemento ideal a los dos anteriores
- F5 Recargar
- Esc Detener
- Ctrl++ Zoom Incrementar
- Ctrl+- Zoom disminuir
- Ctrl+0 Restablecer Zoom
- / Buscar en la pagina
- F3 Buscar nuevamente
- Shift+F3 Búsqueda previa
- Ctrl+Shift+T Abrir pestaña cerrada previamente
- Ctrl+Tab o Ctrl+Shift+Tab Navegar entre las pestañas, aunque preferiria que se comportora como “Alt+Tab”
- Ctrl+J Descargas
- Ctrl+T Abrir una nueva pestaña
- Ctrl+W Cerrar pestaña
Las extensiones de Firefox ¿prescindibles o imprescindibles?
Julio 14, 2008
Desde que publicaron las betas de Firefox 3 deje prácticamente de usar las “útiles” extensiones de este navegador, más por pereza de tratar que funcionar en esas versiones beta que otra cosa debo reconocer.
Pero además, con la versión final del navegador me he dado cuenta que no he extrañado alguna en particular, de hecho a veces son bastantes problemáticas ¿cuantas veces el navegador empieza a fallar por culpa de una extensión que instalaste? y como tienes más de 20 debes revisar una por una y la verdad la mayoría de ellas las usas una vez al mes o inclusive en más tiempo.
Lo que más me gusta y busco en un navegador es su rendimiento, que se vean bien las páginas y que tenga buenos atajos de teclado, así de simple (supongo lo que busca cualquier usuario promedio). Es justamente lo que tiene Firefox 3 y Opera, sirven bastante bien para navegar cómodamente por Internet sin tener que instalar añadidos.
Bueno, admito que tengo instaladas dos:
- Diccionario de Español
- Tab Catalog (que acabo de conocer hace unos días en Yukei, espero que me dure)
Tampoco digo que sean poco útiles, están Web Developer o Firebug por ejemplo, pero creo que de 1 a 3 son más que suficientes y no las 30 que recomiendan instalar.
El robot de Firefox
Junio 12, 2008
He tenido un poco abandonado el blog, pero realmente no ha sido por algo que valga la pena explayarme así que me ahorro las palabras de pretextos y justificaciones.
Desde de que salieron las versiones de prueba (beta) de Firefox 3 apareció un robot bastante curioso, narrando en cada imagen lo que aparentaba ser una batalla. Según la gente creativa de la organización Mozilla la cosa es sencilla:
Meta: crear algo lo suficientemente llamativo para que la gente se detenga y explore las diferentes formas de proporcionar retroalimentación.
Solución: Un robot gigante.
Todas las ilustraciones dedicadas a cada beta la puedes ver en Flickr. Por cierto, el ya famoso robot fue creado por Nobox.
Al finalizar los lanzamientos de betas y establecer una fecha definitiva para poder descargar firefox 3, Mozilla decidió finalizar esta campaña con un espectacular cartel, Firefox Victory, que alude a los afiches de Indiana Jones, específicamente al arte de Drew Struzan.
Por cierto próximamente:
- El cartel podrá ser adquirido en la tienda de Mozilla en una edición especial.
- En www.firefoxvictory.com posiblemente habrá más cosas relacionados al robot.
“Rated O for Open Source” jojojo
Extensiones para Firefox útiles por si escribes en un blog
Abril 12, 2008
Hace un tiempo que no hablo de Firefox y sus extensiones que son tan útiles. En esta ocasión mencionare algunas que pueden ayudar si escribes en un blog.
- Copy Plain Text. Una de las cosas que más odio cuando estoy editando un post es copiar el formato del texto cuando pego un nombre de otra página. Con esta extensión no evitaremos ese problema.
- Copy Link Text . Un excelente complemento a la extensión anterior es Copy Link Text, te permite guardar un enlace con su correspondiente etiqueta html o la que tu le indiques, por ejemplo las etiquetas que se usan el los foros. Extensiones parecidas, pero digamos con diferentes métodos: Copy as HTML Link y Copy URL+.
- Resizeable Textarea. Si quieres agrandar las áreas de textos para escribir más cómodamente.
- Read it Later. Cuando no tienes tiempo de leer o terminar un artículo esta extensión te permitirá guardar el enlace temporalmente para recordarte que lo dejaste pendiente. Yo en lo personal uso Instapaper, pero este añadido de firefox es más completo. Una opción más sencilla es To Read Later
- Google Preview. Sin lugar a dudas cuando empiezas a escribir un post es necesario muchas veces investigar un poco en Google, este añadido te permite previsualizar con pequeñas imágenes las páginas en los resultados de las búsquedas. Otra opción BetterSearch.
- DictionarySearch. Un diccionario por cualquier duda que tengamos, lo malo de esta extensión es que debemos configurarla para poder usarla en español. Una extensión supervitaminada por si te queda corta es hyperwords
- FireShot (capturas). Para enriquecer los post visualmente. Frecuentemente debemos añadir capturas para ilustrar más lo que queremos decir. A diferencia de varias extensiones, Fireshot, cuenta con interesanes opciones para editar las imágenes. Algo más sencillo Screengrab!.
Si quieres conocer más extensiones te recomiendo estas listas:
