Posts Tagged ‘Maquetación web’

Bolsa de trabajo especializada para desarrolladores web

Saturday, March 17th, 2007

¿Eres especialista en desarrollo web con estándares y estás buscando trabajo? ¿Necesitas desarrolladores web profesionales? Es posible que la sencilla bolsa de trabajo especializada que han desarrollado en estadobeta te resulte muy útil.

La tarea de encontrar desarrolladores web de calidad, entendiendo por calidad que al menos sepan lo qué son cosas como los estándares, la accesibililidad o la usabilidad, es cada día más difícil. Por suerte nuestra profesión está cercana a cumplir la mayoría de edad y a las empresas no les vale con que el programador o diseñador gráfico de turno hagan la web; necesitan especialistas que sepan integrar los elementos que los perfiles mencionados producen y que lo hagan con una metodología y técnicas adecuadas.

Voy más allá, necesitan profesionales que no solo integren diseño y programación sino que participen (y normalmente dirijan) en el análisis inicial de la web, orientando a los especialistas en diseño y programación en aspectos como la arquitectura de información, la usabilidad y/o el código que permitirá mostrar el futuro sitio en diversos dispositivos.

Mi experiencia me dice que estos profesionales suelen empezar como “maquetadores”; perfil que históricamente ha sido maltratado, y me atrevería a decir que despreciado, por los especialistas en programación y en diseño gráfico.

Los primeros consideraban que eso del HTML era una chorrada que permitía que sus acojonantes códigos de programación tuviesen una salida en pantalla a través de un navegador y como, por alguna extraña razón, el cliente le decía que lo que habían hecho era muy feo, lo mejor era que el chaval ese que dice que es maquetador le diera un barniz para contentar a ese extraño cliente que no les entendía y además era medio tonto dado que no sabía usar su sistema.

Los diseñadores veían en el maquetador a un ser sin capacidades artísticas que se dedicaba a joderles sus impresionantes diseños y que además osaba a decirles que en la web que estaban haciendo no había forma de pasar de la home o que la idea de ese sitio web era que la gente comprase y no que se quedasen embobados con su espectacular intro en Flash.

Esos tiempos han pasado y hoy en día la mayoría de los responsables de proyectos competentes y capaces de orientar y elaborar un sitio web suelen provenir de la maquetación.

He divagado un poco :) pero os recuerdo que en la bolsa de trabajo de estadobeta a lo mejor encontrais lo que estais buscando.

Robert Nyman: en defensa de “el chaval del HTML”

Thursday, February 15th, 2007

El que lea Tripix con cierta asiduidad se habrá percatado de que soy un ferviente seguidor de Robert Nyman; su último post me re-afirma en mi idea de que cuando sea más mayor quiero ser como él.

Robert se defiende de la condescendencia y la minusvaloración con que muchos tratan a los que nos dedicamos a esto del HTML. Cito traduciendo libremente:

Si, yo hago código HTML, pero eso no es más que una pequeña parte de mis tares/habilidades; para ser exacto, una buena parte de mi tiempo posiblemente se va en hacer CSS (y lógicamente, arreglando fallos del IE cada día), y si es un proyecto divertido, un monton de código Javascript bien intencionado para mejorar la interacción y la usabilidad.

Oleeeé

Y lo anterior es solo mencionar la mayor parte de bloques de mi trabajo. Hay también consideraciones de usabilidad, conocer los defectos e incosistencias de los navegadores, un poco de arquitectura de la información, algo sobre diseño y, especialmente, conocimientos de Photoshop, conocer el trasfondo tecnológico para estar al tanto de los posibles problemas y oportunidades que nos puede dar, etc..

A mi es un tema que hace tiempo dejó de molestarme lo más mínimo. Pero es cierto que al principio de dedicarme a esto me sacaba de quicio el menosprecio tanto de los diseñadores gráficos como de los programadores. Ante eso había dos posibilidades: acomplejarse y ponerse a las órdenes o tener claro a lo que estabas haciendo y ver las enormes deficiencias que los especialistas tenían en esto de la web.

El tiempo pone a cada uno en su sitio y desde luego hoy en día lo más normal es que los que realmente saben de web, son capaces de llevar un proyecto web completo, valorarlo, etc.. son aquéllos pobres que no eran informáticos ni habían hecho Bellas Artes.. pero que sabían HTML y además se preocuparon por otras cosas.

Hazte tus layouts CSS + XHTML online

Thursday, February 15th, 2007

[Vía Ajaxian] Chris Constandinou nos ofrece una interesante aplicación web para generar layouts basados en css. A través de esta espectacular sistema puedes configurar la maqueta de tu web muy fácilmente.

El interfaz es sencillo y cómodo. Primero defines la estructura general de la maqueta eligiendo los sigui

  • Alineación del contenedor (Container alignment)
    • Centrada
    • Izquierda
  • Escala del contenedor (Container scale):
    • no scale: pondrá las medidas del body con tamaños absolutos (px)
    • text zoom: pondrá las medidas del body con tamaños remativos (em)
  • Tamaño del contenedor (Container size)
    • Pequeña (640px)
    • Mediana (760px)
    • Grande (900px)
    • Extra grande (1000px)
    • Fluido
    • Personalizado

Una vez definida la estructura general se pueden ir añadiento más elementos dentro del contenedor con los niveles de anidación que deseemos. Para cada uno de estos elementos se puede definir el número de columnas, hasta 4 y con distintas combinaciones de tamaños.
Si no tienes demasiada experiencia y/o conocimientos de maquetación seguro que __layouts te saca de más de un apuro. Al lector experimentado en estas lides es posible que no le resuelva demasiado y posiblemente la escasa semántica del código generado le molestará.

__layouts_1.png

Prueba __Layouts

Rediseño (realineación) de El Pais

Tuesday, November 21st, 2006

El periódico El Pais celebra la muerte del inmundo dictador rediseñando (o como hace notar Daniel Torres, realineando) su sitio. Desde luego esto no es una primicia, pero no puedo perder la oportunidad de comentar lo que me gusta (bastante) y lo que no de este trabajo.

Impresión inicial

Muy buena. El sitio está mucho menos recargado, más limpio y claro, en definitiva, más cómodo de leer. Los artículos destacados de portada utilizan un tamaño de letra algo más grande que facilita la lectura. Mejora sustancial en la organización de la información.

Los artículos

Muy mejorados:

  • Letra más grande
  • utilizan todo el ancho disponible
  • Ampliaciones de las imágenes en la propia página con DHTML
  • Las imágenes se situan generalmente en la columna derecha y hay el pié de foto se lee mejor.
  • Las acciones se agrupan y se situan al final del artículo
  • Me sobra la acción “enviar la noticia” en la parte superior de la misma, casi que me sobra también la de imprimir (¿tan difícil es darle a archivo / imprimir para el usuario? creo que no)

barra acciones articulos el pais

Y además se hacen sociales!! Puedes votar la noticia, añadirla a delicious, enviarla a digg, ver las referencias en Technorati y menearla.

El sistema de utilización del teclado falla tanto para aumentar el tamaño del texto como para moverte de un artículo a otro. Supongo que será algo temporal.

El menú

Ha mejorado sustancialmente respecto a la versión anterior. han quitado las carpetitas con el simbolo más a una estructura situada en cabecera. La organización de la información en el menú no ha cambiado en absoluto.

menu antiguo del pais

menu antiguo del pais

Maquetación

Xhtml estricto con un chorro de errores de validación, aunque reconozcamos que la mayoría se deben a problemas con la codificación de caracteres. La maquetación se hace sin tablas, desde luego y el uso de los encabezados es correcto. Han hecho un esfuerzo importantísimo en este tema.

Navegación con dispositivos móviles

Bueno, ahora si se puede navegar desde mi Blackberry a través de la versión PDA y es muy muy cómoda.

Pero lo que es más importante, se puede usar la página normal sin problema. La versión anterior era muy difícil de usar y la nueva maqueta hace que, sin css, la web pueda ser utilizada. Se echa de menos un detalle: un enlace al principio de la página con el típico “saltar al contenido” que evite tener que tragarse el menú de la web cada vez que cargas una página. Sin embargo, aunque todavía no lo he probado, me da la impresión de que no debe ser fácil navegar con teléfonos móviles.

Lo curioso es que no dan acceso directo a la versión PDA sino a una farragosa explicación sobre la versión PDA y la versión movil (basada en sms). Al final, casi que me quedo con la versión solo texto y paso de la otra.

Actualización: no se os ocurra intentar cargar la versión normal en un movil, he probado con un Nokia N70 y después de cargar casi 300kb le ha resultado imposible procesar la página. La versión PDA funciona muy bien y la solo texto todavía mejor.

Un error grave, en mi opinión, es no redirigir automáticamente a la versión PDA a los dispositivos móviles. Muy grave

Posicionamiento

Como apuntan en google dirson, han utilizado una buena estrategia para que el cambio de dominio no afecte a su pagerank ni a sus backlinks (links que apuntan al dominio). Tal y como recomienda Google, las cabeceras de las páginas dan un “HTTP/1.1 301 Moved Permanently”. No podían fallar en eso.

Me llama la atención que no hagan los títulos de las páginas dinámicos.

Iniciativa por el HTML 5: que alquien me lo explique

Wednesday, November 8th, 2006

Menos mal que no soy el único que está soprendido y confundido con la nueva iniciativa del W3C de resucitar el HTML y con el apoyo que algunos gurus han prestado al asunto.

El escenario es el siguiente

Hace unos días Tim Berners-lee lanza un post donde reconoce el fracaso en el intento de cambiar a la gente al XML y anuncia que un nuevo grupo de trabajo se encargará de mejorar incrementalmente el HTML, la idea es que este grupo trabaje de forma paralela al que desarrolla xHTML.

A los pocos días en un post conjunto de The Web Standards Project, Lachy’s Log, Molly.com y 456 Berea Street piden opinión y ayuda a la comunidad en el proceso de desarrollo de la nueva versión de HTML que ya denominan como “HTML 5″.

En este post se habla del revuelo que se ha montado con la iniciativa de Tim y se dice que en las opiniones aparecidas en blogs, foros y listas de correo hay muchas “ideas falsas” (traducción de google del término “misconceptions”). A partir de ahí explica como la comunidad puede aportar sus ideas y sugerencias.

Mi opinión

Yo sigo sorprendido con ambas iniciativas y no termino de enteder las razones de Tim Berners Lee. Estoy en la línea de lo expresado en este post:

XHTML (1.0 y 1.1) no es sino una reformulación del HTML. Una buena reformulación del HTML que ofrece beneficios reales a desarrolladores y autores….

Lo que más me cabrea es que cuando Berners-lee aduce como principal argumento que aunque hay mucha gente que aprovecha y disfruta los “sistemas bien formados” (”well formed itmes”) esto no afecta que no todo el mundo. Ahora que parece que hay un movimiento masivo para usar y aprovechar el XHTML, ahora que se están desarrollando aplicaciones que se benefician del XHTML ¿Vamos a volver hacia atrás?. Tim nos pilla a medias, deja en bragas a los evangelistas y se carga el trabajo de años de los que han defendido, creo que correctamente, el paso al xHTML.

No lo entiendo, que me lo expliquen

No estoy siendo irónico al decir que estoy seguro que las sesudas mentes que apoyan esta iniciativa tienen sus razones pero todavía no he visto argumentos bien explicados explicaciones bien argumentadas que me convenzan de la necesidad de desarrollar HTML 5 en vez de continuar en la línea del XHTML 2 (que no se discontinúa, se sigue trabajando de forma paralela).

Cierto que la mayoría no estrujamos el xHTML ni aprovechamos todas sus potencialidades. Pero al menos tenemos la tranquilidad de que estamos marcando nuestras webs con un lenguaje basado en XML! Con xHTML podemos hacer al menos lo mismo que con HTML y además mediante un lenguaje bien formado. Si podríamos usar HTML pero ¿para qué?.

Yo pensaba que cosas como la interoperabilidad de nuestros documentos con distintas aplicaciones o la web semántica iban a estar basadas en el xHTML gracias que es XML. ¿HTML 5 mantendrá estos objetivos?.

Todo queda

Argumento aducido por Pemberton, miembre del w3c y líder del grupo de desarrollo del xHTML (un tio genial, por cierto) en favor del xHTML:

HTML es probablemente el lenguaje de etiquetado de documentos más exitoso del mundo. Pero cuando se presentó XML, se organizó un taller de dos días de duración para analizar si era necesaria una nueva versión de HTML basada en XML. La opinión general del taller fue un rotundo “Sí”: con un HTML basado en XML….

Y también dice:

Las aplicaciones de Web Semántica serán capaces de sacar provecho de los documentos XHTML.

Finalmente

Estoy seguro de que hay buenos argumentos y es posible que defensores de esta iniciativa más expetos que yo lean este post. Les ruego comenten y expliquen si es posible.

Por ahora que me quedo con la frase (traducida) de Tim anderson en su blog:

“el W3C no necesita reinventar el HTML. Necesita reinventarse a si mismo”

Repasando html: 37 preguntas contestadas

Wednesday, November 1st, 2006

Es el día de los muertos y el HTML ha resucitado (q ingenioso… plas plas plas plas)… he decidido seguir el consejo de 456bereastreet y leer el artículo de Tommy Olsson’s Bulletproof HTML: 37 Steps to Perfect Markup

Empezando por “Qué es html” hasta el “uso correcto del elemento address” pasando por una explicación sobre si “strong” sustituye a “b” (pués no, no lo reemplaza), el artículo proporciona magníficas explicaciones a las dudas más comunes de todos los niveles sobre el HTML;

Como paso de ir al cementerio … voy a poner la relación de preguntas (traducción libre):

  1. Qué es el HTML
  2. Cuáles son las diferentes versiones del HTML
  3. ¿y sobre el XHTML?
  4. ¿Es el HTML case-sensitive?
  5. ¿Qué hace la declaración DOCTYPE?
  6. ¿Qué es una DTD?
  7. Diferencias entre las DTDs Strict, Transicional y Frameset
  8. ¿Qué DOCTYPE debo usar?
  9. ¿Por qué debo validar mi marcado?
  10. ¿Por qué el HTML permite código “descuidado”?
  11. ¿Por qué el validador protesta por el tag ?
  12. ¿Qué significa character encoding (charset) ?
  13. ¿Que es un BOM?
  14. ¿Qué encoding debo declarar?
  15. ¿Cómo inserto caracteres que no estén en el encoding?
  16. ¿Por qúé debo escribir & en vez de &?
  17. ¿Cómo debo usar los elementos de encabezados?
  18. ¿Que son los elemntos “block” e “inline”?
  19. ¿Puedo convertir un elemento inline en un block-level con css?
  20. ¿Por qué es recomendable usar css y javascript externos?
  21. ¿Uso p o br?
  22. ¿Qué quiere decir “semántico”?
  23. ¿Debo sustituir b e i por strong y em?
  24. ¿Por qué es chungo maquetar con tablas?
  25. ¿Debo susituir las tablas por divs?
  26. ¿Están las tablas “deprecated”?
  27. ¿Cuál es el uso correcto de address?
  28. ¿Cuál es el uso correcto de dfn?
  29. ¿Cuál es el uso correcto de var?
  30. ¿Debo usar “quotation marks” dentro o alrededor del elemento q?
  31. ¿Cuál es la diferencia entre abbr y acronym?
  32. ¿Porqué está “deprecated” ?
  33. ¿Debo poner el atributo alt a todas las imágenes?
  34. ¿Que diferencia hay entre class e id?
  35. ¿Por qué no funciona “id=123″
  36. ¿Por que no me funciona “href=dsfdasfdasfdasf”?
  37. ¿Por qué no puedo incluir una pagina html dentro de otra?

Y yo me pregunto ¿por qué cojones cuando voy por el elemento 37 va el explorer y peta? respuesta porque soy gilipollas y a veces uso el explorer !·”$·”!!$·” y encima no guardo (bueno, había guardado en la 22).

Algunas respuestas os pueden sorprender, otras sirven para llevarlas en algún sitio y contestar a los amiguetes y otras te resolverán dudas. Lectura recomendada