Archivo de la categoría ‘Diseño de páginas web’
Diseño de páginas web adaptado a diferentes dispositivos
Cada vez más el acceso a Internet y la visita de páginas web se hace desde dispositivos diversos. Ha pasado el tiempo en que los diseñadores web podían limitarse a cuidar la visión de sus diseños en ordenadores portátiles o de escritorio, con tres o cuatro resoluciones. En poco tiempo, la mayoría de los accesos a su página web personal, o a la web de su empresa, se harán desde dispositivos móviles. Esto significa que habrá mayor número de dispositivos, sistemas de acceso, navegadores y resoluciones. Hasta ahora algunas empresas han resuelto esta diversidad creciente realizando versiones específicas de su sitio web para algunos dispositivos como iPhone. Sin embargo la generalización del uso de tabletas y todo tipo de terminales, está imponiendo en el diseño web una arquitectura que permita adaptarse a los diferentes dispositivos y resoluciones, el denominado Responsive Web Design, que podemos traducir al castellano como: Diseño web adaptable, el diseño web con capacidad de respuesta para ajustarse a los diferentes terminales en los que se muestre.
Afortunadamente el diseño web con html y hojas de estilo CSS nos facilita las herramientas para responder adecuadamente a las nuevas exigencias: Las imágenes flexibles y, sobre todo, las Media Queries del CSS3, basadas en las Medias Type del CSS2, permiten adaptar el diseño al tipo de navegador y dispositivo que esté utilizando el usuario. Sin embargo, el diseño mediante bloques reajustables aún impone algunas limitaciones que, probablemente, la experiencia no tardará en resolver. De momento podemos hacer hojas de estilo a medida para el iPhone, los teléfonos con Android y similares: Ajustes que amplíen el espacio activo de los enlaces cuando se muestren en pantallas de teléfonos móviles, ocultar elementos que no sean imprescindibles para el conjunto y simplifiquen la navegación en este tipo de dispositivos, e incluso aumentar el tamaño del texto.
Además hay que celebrar la aparición de nuevas herramientas online que simplifican la labor del diseñador, como Screenqueries una utilidad gratuita que, aunque todavía está en fase beta, resulta muy práctica para comprobar la respuesta de estos diseños con diferentes resoluciones. Para probar, una vez que tenemos planteado el diseño, basta con introducir la URL y ver como se adapta a cada caso.
Tipografías de cine
Las tipografías es uno de los capítulos fundamentales para conseguir un buen diseño web. Si está cansado de los tipos de letras estándar: Verdana, Arial, Helvetica, etc, y quiere dar un toque especial a su sitio web, aquí tiene una colección de tipografías de cine:
Free Fonts Used in Iconic Movies es una colección gratuita, de tipos diseñados con la estética utilizada en los carteles y la promoción de destacadas películas producidas por Hollywood, como Star Trek, Terminator, Indiana Jones, el Padrino, El señor de los anillos, Blade Runner, el Club de la Lucha, Viernes 13, Scream, Final Fantasy, el Planeta de los Simios, o Batman.
¿Cómo se ve mi página web desde diferentes dispositivos?
Screenfly es un servicio online gratuito que nos permite valorar como se muestra una página web en diferentes dispositivos y con distintas resoluciones, algo cada vez más importante para los diseñadores web y las propias empresas. Seguro que más de una vez se ha preguntado ¿cómo se ve mi página web en un iPad, o en una BlackBerry?
Con la herramienta de QuirkTools puede comprobar como se presenta en un ordenador de sobremesa o portátil, una tableta, un teléfono móvil, e incluso gracias al navegador Opera, en monitores de televisión. Sólo tiene que introducir la dirección de la página web, la URL, y a continuación seleccionar el tipo de dispositivo.
Diseño de páginas web con plantillas
El desarrollo de un sitio web partiendo de una plantilla pre-diseñada, a menudo tiene importantes ventajas. Esta es una consulta que nos plantean con frecuencia y por ello queremos dejar constancia en el blog.
Sin duda, la principal ventaja es la significativa reducción del volumen de trabajo y tiempo necesario para definir las características gráficas del sitio web: esquema y distribución de los contenidos, fondos, menús, colores, tipografías, títulos, destacados, etc. La simplificación del proyecto tiene como consecuencia una importante reducción del coste del desarrollo, que en todo momento, pero especialmente en tiempos de crisis, es un argumento de mucho peso. Porque además la gran calidad, técnica y estética, que tienen muchas de estas plantillas permite desarrollar páginas web de un alto nivel, con costes sumamente ajustados. Especialmente si se respeta el esquema de la plantilla y sus hojas de estilo, limitando los ajustes y el trabajo de personalización a los propios contenidos.
Otra ventajas indudable, es que el cliente puede tener una idea previa, muy precisa, de cual será el resultado y el aspecto que tendrá su sitio web, una vez que se hayan incorporado los contenidos, al margen del tipo de sitio que necesite, puesto que hay excelentes plantillas para páginas web estáticas, gestores de contenidos como WordPress o Joomla, tiendas on-line, páginas en Flash, etc.
La personalización de los contenidos de una plantilla, permite ajustar el resultado a la imagen de cada empresa, o del proyecto concreto de que se trate, asegurando en cada caso un resultado único y bien diferenciado de la plantilla sobre la que se basa el sitio web. En definitiva, siempre que no se necesite una aplicación muy específica, que necesariamente tenga que desarrollarse a medida, por las ventajas mencionadas, recomendamos partir de plantillas: La clave radica en seleccionar la mejor opción.
Nueva aplicación para diseñar páginas web sin conocimientos de programación
Muse es el nuevo programa de Adobe para diseñar y publicar sitios web sin necesidad de escribir código HTML ni tener conocimientos de programación. El programa presenta un sistema de trabajo similar a InDesign o Photoshop, con las opciones de un editor gráfico para diseñar páginas web sujetas a los últimos estándares web: “Crear sitios web tan fácilmente como crear diseños para impresión”.
El flujo de trabajo se organiza en cuatro bloques.
Plan del proyecto – Diseño de la estructura del sitio web: número de páginas, sistema de navegación, etc.
Diseño de las páginas – Diseño de la gráfica con un sencillo sistema de selección y arrastre de elementos.
Previsualización – Previsualización del trabajo o los cambios realizados.
Publicar – Acceso al servidor Adobe Business Catalyst o a nuestro propio proveedor de hosting.
Adobe Muse puede utilizarse con Windows y Mac. La aplicación aún está en fase de pruebas pero la versión definitiva estará disponible a lo largo del primer trimestre de 2012.
La versión beta se puede descargar gratuitamente desde: http://muse.adobe.com/
BALCONES, animación de Juan Berrio y Raúl García
Las empresas españolas necesitan aumentar y mejorar su presencia en Internet
Las empresas españolas tienen menos presencia en Internet, y de menos calidad, que sus homólogas de la Unión Europea. En España, las Pymes se incorporan a la sociedad de la información más lentamente que las empresas de los principales países europeos.
La presencia en Internet permite ampliar cartera de clientes, abrirse a nuevos mercados y, por tanto, añade un importante plus de competitividad a las empresas que apuestan por la calidad en la Red. Según el informe del Instituto de Estudios Económicos, casi el 95% de las empresas de la Unión Europea tiene acceso a Internet y el 85% cuenta con conexión de banda ancha. Sin embargo, sólo el 69% tiene página web propia. La presencia en Internet varía sensiblemente entre los diferentes países europeos, situándose a la cabeza las empresas de los países del norte, que poseen página web casi en el noventa por ciento de los casos.
Ranking de países europeos por el porcentaje de sus empresas que tienen página web propia:
| Suecia: | 89% | Luxemburgo: | 70% | ||
| Dinamarca: | 88% | Malta: | 65% | ||
| Finlandia: | 87% | Lituania: | 65% | ||
| Alemania: | 84% | Polonia: | 65% | ||
| Holanda: | 81% | España: | 62% | ||
| Austria: | 80% | Italia: | 61% | ||
| Belgica: | 78% | Francia: | 58% | ||
| Reino Unido: | 76% | Grecia: | 58% | ||
| República Checa: | 74% | Portugal: | 52% | ||
| Eslovaquia: | 74% | Letonia: | 48% | ||
| Eslovenia: | 74% | Bulgaria: | 37% | ||
| Estonia: | 70% | Rumanía: | 35% |
Además del uso insuficiente que hacen las Pymes españolas de las nuevas tecnologías de comunicación, incluyendo la presencia en Internet, otro de los datos que avanzan estos estudios es la continuidad de la tradicional concentración geográfica de la industria en España, principalmente en cuatro comunidades autónomas: País Vasco, Cataluña, Valencia y Madrid.
Qué se necesita para ser un buen diseñador de páginas web
Con sentido del humor, destacando con ironía las características que debe tener el buen diseñador web, SixRevisions presenta el siguiente cuestionario:
¿Preparado para ser un Diseñador Web?
Diseño web con CSS y HTML
El diseñador Román Cortés muestra las posibilidades del 3D utilizando sólo hojas de estilo.
Para la creación del efecto 3D, en Las Meninas de Velázquez, ha utilizado CSS puro, sin javascript ni flash, sólo código CSS y HTML. El efecto puede visualizarse con las últimas versiones de los navegadores Firefox, Chrome, Safari, Internet Explorer y Opera.
