Web X.1

Aunque no hay motivos para no utilizar ya HTML5 y CSS3 (muchos serán los que estarán comenzando con ello) la web sigue en movimiento.

Las actualizaciones cada vez más rápidas de la práctica totalidad de navegadores (sin decir ya que exceptuando a nuestro querido IE), permiten que las nuevas especificaciones vayan tomando presencia en la web.

Ya tenemos el primer borrador de CSS4 de www.w3.org, aunque no lo soporten aún ningún navegador es interesante ver hacia dónde va la web.

Recordemos que no es una versión nueva de CSS. En CSS se trabaja por módulos y CSS4 es el estado de trabajo donde se proponen modificaciones o nuevos módulos. Hablamos del nivel 4 de los módulos de CSS.

Además, y prácticamente a la par, se nos presenta la próxima versión de php, php6. Esta versión ya está disponible en php.net para su descargar.  Cabe destacar que Php6 no supone un cambio tan radical como el que sucedió con la versión anterior por lo que es de esperar, si todo va bien, que la adopción de esta versión sea más rápida.

    PHP sigue siendo el lenguaje script para desarrollos web más popular y la lista de nuevas características que vienen con esta nueva versión pueden situarle en posiciones todavía más destacadas.

En resumen, nuevos avances, “nuevas” tecnologías, y sin duda nos pondremos con ellas

Todos los que nos encontramos en este mundillo web, nos hemos encontrado antes o después ante la ardua labor de afinar un CSS, echándolo horas de esfuerzo, paciencia y dedicación. Esta labor comprende pasos como los de modificar los archivos fuentes, y visualizar (actualizando antes claramente) en  cada uno de los navegadores a cada instante.

Pues bien, con CSS Terminal, solucionamos el problema de una manera muy sencilla: inserta una capa semitransparente por encima del sitio web y admite que escribamos el CSS de forma directa. Como dice el  autor, es un bookmarklet que permite insertar reglas de CSS directamente en una página en vivo. Algo que se agradece mucho para depurar CSS y crear prototipos de forma rápida.

Además un aspecto muy importante a tener en cuenta es que CSS Terminal es compatible con una amplia gama de navegadores como: Opera, Mozilla Firefox, Google Chrome, Apple Safari y Microsoft Internet Explorer 9 o superior. 

Una buena combinación de colores es clave en el diseño, y por tanto en el diseño web.

Los colores nos afectan de mil maneras – tanto mental como físicamente, de manera consciente y subconscientemente.

Crear una paleta equilibrada, personal y armoniosa es un talento que no se obtiene fácilmente. Por ello queremos incidir en el presente post en la importancia que tiene, y presentar algunos de los principios más habituales que deben tenerse en cuenta para la combinación de colores.

Tan importante como lograr una buena combinación es mantener la coherencia entre la paleta de colores de la página y el de los elementos que la componen. Texto e imagen son elementos independientes pero conforman un todo a nivel de percepción. Un detalle que no siempre se puede manejar en el diseño web por la actualización que sufren las páginas.

Diversos estudios psicológicos inciden en la importancia que tiene la elección de una combinación correcta de colores. El color incide aproximadamente en el 60% de la posible ACEPTACIÓN o RECHAZO de un producto o servicio, o en nuestro caso, una imagen corporativa o una web. Una combinación de colores errónea puede llegar a tener los mismos efectos negativos que ofrece una mala copia, o unos tiempos de carga excesivos. En esta infografía, vamos a discutir de una manera global, la coordinación del color y la forma en que Usted puede usar esto para su ventaja en el diseño de su proyecto o web.

Puntos importantes a someter a estudio:

Para profundizar un poco más cada uno de los puntos adjuntamos la siguiente infografía con la que se aumentar un poco más la claridad y saber por dónde han de ir los tiros.

La página principal es la carta de presentación de la web, el trampolín hacia sus contenidos internos y tiene la misión de comunicar con eficacia su identidad y objetivos, así como servir de trampolín hacia el resto de páginas que compondrán nuestra web.

Por ello vamos a exponer algunos consejos básicos para construir la portada de una página web:

Llamar la atención: Será importante mantener una identidad visual coherente que esté en consonancia con los objetivos de la web y que responda a las necesidades del usuario.

Definir objetivos: Los usuarios nuevos querrán saber al instante dónde están y para qué sirve la web, teniendo siempre claro el por qué permanecer en la web y no marcharse a otra. Por ello es importante definir la identidad y el objetivo de la web cerca del logo, y usar la etiqueta <title> para así dejar constancia de ello.

Facilitar búsquedas: expertos en la materia distinguen entre usuarios link-dominants (aquellos que exploran la web antes de buscar) y search-dominants (aquellos que acuden al buscador tan pronto como entran en el sitio). Para los segundos es imprescindible un buscador interno que esté situado en una parte visible de la web, funcione de forma eficaz y, a ser posible, permita una búsqueda avanzada con opciones de acotación.

Organizar propuesta: La web debe tener una estructura jerárquica y un menú de navegación representativo, teniendo en cuenta los hábitos de búsqueda de los usuarios en los literales de la web para mejorar su experiencia lectora y el rendimiento en los buscadores.

Actualizar: En función del propósito de la web necesitarás actualizar los contenidos con mayor o menor regularidad. Renovarse o morir.

Muestra tus contenidos: Para cumplir los objetivos de la web necesitas crear incentivos que orienten a los usuarios hacia la conversión. Puedes promocionar contenidos internos a través de recursos como “lo último”, “lo más popular” o “lo más comentado” y apostar por llamadas a la acción (call to action) visibles y con literales originales.

No molestar: Ventanas emergentes y bloques de publicidad invasivos fatigan al usuario.

Conversa: Es muy importante mostrar tu presencia en redes sociales a través de widgets o botones. Tener seguidores significa que hay usuarios que ya han utilizado el mismo producto o servicio antes y de forma satisfactoria.

Lo primero de todo es entender a las viñetas como un instrumento principalmente gráfico. En internet, nos ayudan a elaborar listas con las que resaltamos los detalles principales de un párrafo, a la vez que lo hacemos más atractivo visualmente. Su diseño vertical resulta muy útil en la maquetación de páginas web, eso sí, siempre empleándose con moderación, ya que con su abuso, estas perderán su eficacia. Debemos seleccionar en qué párrafos las aplicaremos y no recurrir a ellas para destacar cosas sin importancia.

Normas generales para elaborar listas con viñetas:

Normas de puntuación:

Para todos aquellos más o menos avezados en el mundillo del diseño web, entenderán lo ‘sencillo’ que puede llegar a resultar el realizar un borde en un texto con imágenes, eso sí, siempre vía la utilización de herramientas, tales como Photoshop, fireworks, etc.

Pero y si os preguntase, ¿Cómo hacerlo vía CSS?. Entendemos que la cosa cambia un poco.

Por ello os presentamos una nueva característica de CSS3, text-stroke, (aunque todavía no es parte de él) es la inclusión de borde en el texto, de una forma muy sencilla, tal y como nos tiene acostumbrados CSS3. Pero hay que destacar que por ahora funciona únicamente en navegadores basados en WebKit (Safari, Chrome, iPhone). Por ejemplo, si aplicamos texto con un color blanco,en Firefox simplemente aparecerá una página en blanco, ya que no existe borde, porque no reconoce esta propiedad. Puedes usar Javascript para que detecte el borde, o asegurarte de que el color del texto no coincide con el del fondo. Un ejemplo sería este:

h1 {  

-webkit-text-stroke: 3px black;  

color: white;  

}  

Aplicar estilos según el navegador

Así podremos detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro:

var h1 = document.createElement('h1');   

if ( !( 'webkitTextStroke' in h1.style ) ) {  

  var heading = document.getElementsByTagName('h1')[0];  

  heading.style.color = 'black';  

}  

Ejemplo de su funcionamiento, con el típico: "Hola Mundo":

Cabe destacar que podemos hacer un efecto similar con la propiedad text-shadow.

E-mails bien maquetados en HTML, con textos e imágenes es un tema básico para gran cantidad de proyectos, como por ejemplo ‘campañas de e-mailing’. Un e-mail incorrectamente maquetado puede convertir la campaña en un desastre.

La maquetación conlleva mucha tarea de prueba y error, pero con este post intentaremos evitaros grandes pérdidas de tiempo y poder conseguir una solución deseada para cada uno de vuestros proyectos de e-mailings.

Una maquetación HTML para una web no tendría porqué ser distinta para un e-mail, pero sí lo es. El problema principal de los e-mails en HTML es que no se ven igual a través del gestor de correo (hotmail, gmail, yahoo, mozilla thunderbird, outlook, ect...) que directamente en un navegador. Tampoco se ven igual en todos los navegadores aun utilizando el mismo gestor. La razón es que los gestores filtran el código y lo reformatean para evitar amenazas de seguridad, spam y mejorar su usabilidad.

Con los e-mails HTML se crea un submundo que no entiende de estándares web ni nada por el estilo. Nuevamente el diseñador debe sacrificar su trabajo para conseguir un resultado aceptable en el mayor número posible de gestores.

Estas son algunas de las normas básicas que aplico a la maquetación de e-mailings:

Esta imagen nos muestra la perspectiva de cómo debe ser una página de inicio de un sitio web. (hacer click en la imagen para ver a tamaño completo).

Es una infografía donde podemos ver la mejor manera de diseñar una web en la que ofreceremos un servicio como puede ser el sitio de alguna empresa o un servicio específico, lanzamiento de alguna apliación, etc …

Según la numeración que vemos en la imagen, tenemos los siguientes puntos a tener en cuenta:

• La cabecera de la página de inicio y la publicidad deben complementarse una con la otra.
• Cabeceras limpias y concisas.
• Gramática impecable.
• Mostrar veracidad y seguridad con certificaciones como pueden ser con VeriSign, Better Business Bureau.
• Destacar lo que quieres que haga el Usuario.
• Utiliza botones destacados con palabras como “Nuevo”, “Gratis”, “Compra” o “Descarga ahora” para captar la atención del usuario y para que encuentre rápidamente lo importante.
• No destaques demasiado los enlaces a otros sitios o páginas, puede ser una distracción para los usuarios.
• Usa Videos y testimonios de otros usuarios en la página principal para tener un mayor impacto en los visitantes. Esto puede incrementar la confianza.
• Intenta que para visualizar la página no se tenga que hacer scroll. Asi el usuario verá de un vistazo todo el contenido importante.
• Testea la página para poder optimizarla y así tener una carga más rápida de la misma.

Estas son algunas de las características para una buena estructura y diseño de una página de inicio de un sitio web

Todo proyecto de desarrollo web requiere de un wireframe o un borrador en el que se pueda ver la estructura de la futura página.

Es probable que os hayáis inspirado en una web existente para realizar la vuestra, y muchas partes de la página en la que os inspiráis os interesaría aplicarla en vuestro proyecto o simplemente os gusta la estructura.

Wirifi es un bookmarket (enlace que se carga en vuestro navegador si lo arrastrais) que al hacer clic en él, nos transforma la web que estemos visualizando en un borrador o wireframe con la misma estructura, con sus bloques de texto, imágenes, etc .. sin mostrar el contenido.

Bastante interesante, probadlo!!!

Para todos los desarrolladores que nos enfrentamos ante el reto de proyectos que poseen flash insertado, queríamos dedicar este post con el que poder solventar la tarea de validación de la web, siempre y cuando contenga animaciones en flash, y es que utilizar embed está bien, a no ser que quieras quedar bien a los ojos del W3C.

Tras dedicarnos a probar más de uno y de dos códigos que cargaran las animaciones y pasasen la validación, y este es el problema, los que validaban no reproducian Flash y viceversa.

Al final, pude dar con la solución, un pequeño código que reproducirá nuestras animaciones sin ningún tipo de problema y que además, nos permitirá pasar la validación del W3C.

Os pego el código a continuación, espero que os sirva y os ahorre tiempo de "prueba y error:

PLAIN TEXT

HTML:

1.  <div><object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”254” height=”320“></div>

2.  <param name=”movie” value=”/nombre_de_mi_flash.swf” />

3.  <!--[if IE]>

4.  <object type=”application/x-shockwave-flash” data=”/nombre_de_mi_flash.swf” width=”254” height=”320“>

5.  <![endif]-->

6.   

7.  <p>Contenido alternativo</p>

8.  <!--[if IE]>

9.  </object>

10. <![endif]-->

11. </object>

12. </div>