FACTOR CLAVE

Ayer tuvimos la oportunidad de asistir al Webcast de Responsive Design impartido por Daniel Martínez (@Wakkos) y por Miguel Ángel Alvarez (@alvarezmiguelan), creador de DesarrolloWeb.com, gracias a “livestream” .

Diseño Web Ajustable.

La web hecha en Responsive Design es aquella web que se adapta a la resolución y tamaño de pantalla del dispositivo, donde se está visualizando, sin necesidad de hacer una web distinta para cada dispositivo. Esto lo logramos haciendo una versión reducida más sencilla cambiando el tamaño de los elementos, su posición o incluso ocultando alguno de los elementos que no son tan importantes. A partir de esta versión reducida iremos diseñando el resto.

Uso de Media Queries CSS3 en la creación de páginas webs.

 Gracias a los media queries CSS3, podemos hacer que nuestra web vaya adaptando su contenido en función del tamaño de la pantalla del dispositivo donde la visualicemos sin necesidad de tener que estar usando el zoom continuamente. Para ello usaremos en el css  max-width y min-width para indicar el ancho máximo y mínimo en la que se mostrará la web.

Para ver diseños de webs hechas con media queries, Dani Martínez nos recomendó la web de mediaqueri.es

Pasos a seguir.

El primer paso es crear el HTML5, por ejemplo con una cabecera, que contenga una imagen de fondo y un body con un texto y una imagen. La guardaremos como index.html.

En nuestra hoja de estilos, llamada estilos.css, crearemos reglas “media query” para modificar la forma en la que se visualizará la web con @media screen {}.

Para pantallas muy grandes podemos poner:

Y para pantallas pequeñas como la de móviles podemos usar:

Ambas reglas las incluiremos en el mismo CSS.

Resolución de nuestros dispositivos.
En el Webcast también se habló un poco de las resoluciones que tenian los distintos dispositivos tales como iPad, iPhone, etc. Nosotros os dejamos el enlace de phone-size, donde podeis consultar la resolución de pantalla que usan diferentes modelos de teléfonos móviles.

Boilerplate

Boilerplate es un excelente punto de partida para construir sitios HTML, CSS y JS. En el podemos descargar estructuras HTML con comentarios o sin ellos para iniciarnos en nuestro proyectos.

 

 

FitText
También se hizo mención a FitText, un plugin Jquery para hacer flexible el tamaño de las fuentes que usemos en la web.

 

Para ver todos los tweets del webcast de ayer podeis hacerlo en el hashtag de Twitter #dwresponsive.

Desde Clave Web esperamos que el artículo sea de vuestro agrado para animaros a seguir con vuestra formación de responsive. Para consultas podeis contactar con nosotros a través del blog y de nuestros perfiles en las redes sociales:

@claveweb

http://www.facebook.com/claveweb

Un saludo a todos.

 

 

Nuestro perfil de presentación Online

Desde Clave Web queremos presentaros about.me, un portal donde podemos mostrar todas nuestras direcciones web y redes sociales en forma de presentación online.

Con este perfil, podemos mostrar en una sola pantalla toda nuestra información de una forma directa, permitiendo acceder a ella con un solo clic.

 

1. Pasos a seguir.

Lo primero que haremos es entrar en la página de about.me . Una vez dentro, nos dirigiremos al botón de “Crea tu página”. La web está en inglés, pero podemos  traducirla con Google.

 

 

 

 

 

2. Datos de nuestra página.

En este apartado pondremos nuestro nombre y apellidos, una pequeña biografía y unas etiquetas. También  podemos elegir si queremos reservar nuestra dirección de correo electrónico, que nos proporciona about.me, y si queremos que otras personas nos encuentren por nuestra dirección de correo electrónico.

Desde Clave Web queremos destacar la importancia que tiene elegir bien las imágenes que incluiremos en nuestra web, a la hora de diseñar nuestro sitio.

En muchas ocasiones, podemos encontrar páginas web que incluyen imágenes obtenidas de internet, de baja resolución, dando poca calidad y profesionalidad a nuestro sitio. Con ello también podemos encontrarnos que nuestras imágenes sean las mismas que las de otra web y con problemas de derechos de imagen.

Para no caer en el error de imágenes de poca calidad y que pongan en peligro la vida de nuestra web, podemos acudir a bancos de imágenes, libres de derecho de autor, o a la contratación de un reportaje fotográfico profesional que haga que nuestra web esté llena de vida y sobre todo que la haga única.

Banco de imágenes.

La opción del banco de imágenes sería la opción más económica, ya que por unos pocos euros, podemos obtener imágenes de calidad y con buena resolución,  aportando frescura a nuestra web, aunque podría existir también coincidencia de contenido con otras webs que opten por esta opción.

El precio medio de descarga de una imagen para web oscila entre 1 y 5 € dependiendo del sitio de donde la descarguemos. También existen sitios donde hay banco de imágenes gratuitas, pero limita un poco más todavía la exclusividad.

Algunos bancos de imágenes donde podemos descargarnos imágenes para nuestras webs son Fotolia, iStockphoto o  depositphotos entre otros.

Contratación de un reportaje fotográfico profesional.

La opción de la contratación de un reportaje fotográfico profesional es la opción menos económica pero sin duda es la que va a hacer que nuestra web sea única y que consiga un resultado exclusivo.

Dar precios de un reportaje fotográfico es algo más arriesgado, ya que va a depender del profesional de la fotografía al que contratemos, pero existen sesiones fotográficas por jornadas laborales, en las que los precios pueden ir desde 200 € + IVA, dependiendo del reportaje que queramos hacer.