Blog Alconada DISEÑO http://www.alconadadiseno.com.ar/blog páginas web La Plata, diseño de sitios web en La Plata : cursos de páginas web en La Plata Thu, 17 May 2012 17:04:07 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Cómo saber cual es la definición de pantalla optima para mi web. http://www.alconadadiseno.com.ar/blog/2012/05/como-saber-cual-es-la-definicion-de-pantalla-optima-para-mi-web/ http://www.alconadadiseno.com.ar/blog/2012/05/como-saber-cual-es-la-definicion-de-pantalla-optima-para-mi-web/#comments Thu, 17 May 2012 17:04:07 +0000 admin http://www.alconadadiseno.com.ar/blog/?p=173 Sigue leyendo →]]> En esta sección voy a comenzar a hablar del porque elegir una resolución u otra:
Como primero tenemos que saber o imaginarnos a que publico o usuario esta apuntado nuestro sitio, ya que dependeremos un poco de quién va a ingresar en nuestro sitio web para decidir qué resolución de pantalla usar.
Esto significa que si el sitio es para un público acotado tendríamos que saber qué resolución de pantalla tienen es su mayoría, esto es simple, si el público son diseñadores, programadores, usuarios avanzados, o la página web está destinada a usuarios de alto poder adquisitivo seguramente la resolución de pantalla va a ser buena ya que estos grupos seguramente tienen un recambio de equipos constante y con ordenadores de alta gama. Ahora si apuntamos a otros grupos como ser secretarias, agencias, usuarios básicos, utilitarios, usuarios de bajo poder adquisitivo o con mínimas necesidades de uso de ordenadores. En estos casos es donde los equipos que tienen hace mucho tiempo cumplen las funciones necesarias para la empresa y no es necesario cambiarlos, estos usuarios seguramente tendrán resoluciones de 800 x 600.

Si nuestro público puede ser cualquiera y no esta acotado a un sector:
Yo particularmente me inclinaría a diseñar páginas para una resolución de pantalla de 1024 x 768. Les comento él porque de mi decisión sobre la resolución, desde el 2005 o 2006 la resolución de pantalla estándar es de 1024 x 768, con estándar entendemos dos cosas primero que todo aquel que compra una computadora nueva ya va a poseer esta definición de pantalla de fabrica y segundo que en la actualidad se calcula que entre el 50 y 60 % de los ordenadores están configurados con esta definición.
Pero además del porcentaje recién mencionado tenemos un 10 a 20 % de ordenadores con resoluciones más altas ya sea pantallas widescreen o no (1280 x 800, 1650 x 1050, etc.), quienes ven más que aceptable un diseño para 1024 x 768, a diferencia de diseños para resoluciones menores como ser 800 x 600 que se ve muy pequeño.

A continuación les dejo links para que vean como se vería un diseño de 800 x 600 y 1024 x 768 con sus respectivas medidas, además verán que podrán optar por ver un diseño a full screen del explorador y otro con aires para que puedan elegir el que más les agrada.

:: 800 x 600 – A Bordes
:: 1024 x 768 – Con Aire
:: 1024 x 768 – A Bordes

Puede customizar la vista de pantalla para probar la resolución de desea.
Un dato a tener en cuenta es que no todos los exploradores muestran exactamente igual las paginas, como ser Mozilla Firefox, iExplorer, Safari, Opera, etc. Y además de esto cada usuario tiene configuradas las barras que él desea, ya sea la barra de google, yahoo, alexa, PDF, favoritos, estado, etc. Esto provoca una disminución en el área visible.

 

Fuente: http://www.nook.com.ar

]]> http://www.alconadadiseno.com.ar/blog/2012/05/como-saber-cual-es-la-definicion-de-pantalla-optima-para-mi-web/feed/ 0 Aplicar estilos en línea de etiquetas HTML http://www.alconadadiseno.com.ar/blog/2012/05/aplicar-estilos-en-linea-de-etiquetas-html/ http://www.alconadadiseno.com.ar/blog/2012/05/aplicar-estilos-en-linea-de-etiquetas-html/#comments Mon, 07 May 2012 12:51:45 +0000 admin http://www.alconadadiseno.com.ar/blog/?p=170 Sigue leyendo →]]> Imaginemos que deseamos aplicar una sangría de cuatro centímetros a un único encabezado de nivel dos y mostrar el color del encabezado como texto blanco sobre un fondo azul. Para especificar una regla de formato CSS que se aplique solamente a una etiqueta, utilizamos el atributo style para especificar la regla en la etiqueta como <nombreDeEtiqueta style=”Declaraciones de CSS”>. Así, en este ejemplo, podriamos insertar la regla CSS en la etiqueta <h2> de la siguiente manera:

<html>
<head>
<title>Estilos en línea </title>
<head>
<body>
<h2 style=”text-indent:1.5 in; background:blue; color:white;”>
Este texto de encabezado es blanco con un fondo azul, sangrado de
4 centímetros. </h2>
</body>
</html>

]]> http://www.alconadadiseno.com.ar/blog/2012/05/aplicar-estilos-en-linea-de-etiquetas-html/feed/ 0 Estilos en la cabecera del html http://www.alconadadiseno.com.ar/blog/2012/05/estilos-en-la-cabecera-del-html/ http://www.alconadadiseno.com.ar/blog/2012/05/estilos-en-la-cabecera-del-html/#comments Mon, 07 May 2012 12:50:25 +0000 admin http://www.alconadadiseno.com.ar/blog/?p=168 Sigue leyendo →]]> Las reglas de la hoja de estilo se insertan entre las etiquetas de estilo inicial y final (<style> y </style>) de la sección encabezado de la página web:

<head>
<title>Hoja de estilo incustrada (CSS)</title>
<style type=”text/css”>
<!–
h1 {color:blue; font size:40px; font-family:verdana;}
p {color:white; background:green; font-family:helvetica; text-indent:2cm;}
–>
</style>
</head>

El atributo type de la etiqueta <style> indica al explorador el tipo de hoja de estilo que debe esperar.

  • Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
  <head>
    <title>hoja de estilo interna</title>
    <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", serif; color: red; background-color: #d8da3d; } h1 { font-family: Helvetica, Geneva, Arial, sans-serif; } </style>
  </head>
  <body>
    <h1>Aquí se aplicará el estilo de letra para el Título</h1>
  </body>
</html>
  • Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style> dentro de <body>. Pero este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.
]]> http://www.alconadadiseno.com.ar/blog/2012/05/estilos-en-la-cabecera-del-html/feed/ 0 Cómo establecer a Gmail como cliente de correo por defecto http://www.alconadadiseno.com.ar/blog/2012/05/como-establecer-a-gmail-como-cliente-de-correo-por-defecto/ http://www.alconadadiseno.com.ar/blog/2012/05/como-establecer-a-gmail-como-cliente-de-correo-por-defecto/#comments Thu, 03 May 2012 00:46:52 +0000 admin http://www.alconadadiseno.com.ar/blog/?p=165 Sigue leyendo →]]> ¿Cansados de ver cómo se ejecutan directamente Outlook Express, Evolution, o algún otro cliente de correo cada vez que hacen click a un vínculo de e-mail?

A mi personalmente me incomoda un poco, ya que suelen consumir algo más de recursos que un webmail y ralentizan el sistema operativo. Por eso, hoy les contamos un simple hack para elegir a Gmail como el cliente de correo para todos los vínculos mailto: en Google Chrome o Firefox.
Cómo establecer a Gmail como cliente de correo por defecto

 

Seguro conocen alguna extensión u otra forma para solucionar este tema, la solución quePaul Irish nos ofrece es mucho más simple y no requiere de software adicional.

 

Así es como se hace:

    1. Abran una nueva pestaña en su navegador y diríganse a Gmail (si no hacen esto último, la consola les retornara undefined y no habrán configurado nada)
    2. Ejecuten la consola de Javascript con la combinación ALT-OPT-J (Mac) ó CTRL-SHIFT-J (Windows y GNU/Linux)

      Cómo abrir la consola Javascript en Google Chrome

 

    1. Ingresen el código

      navigator.registerProtocolHandler("mailto",
      "https://mail.google.com/mail/?extsrc=mailto&url=%s",
      "Gmail");

 

  1. Acepten la confirmación enviada por el navegador (verán un pop-up como el de la imagen principal)
  2. Prueben que todo anduvo bien haciendo click en este vinculo mailto: que deberá abrir un nuevo e-mail a redactar en Gmail con una invitación al sitio de Paul (HTML5 Rocks)

 

Esto también puede hacerse en Chromium, Opera y Firefox (desde Firefox 3 que es soportado), y con otros webmail, es asi que no necesariamente tienen que casarse con Google.

 

Si quieren hacer lo mismo pero con Firefox, es mucho más sencillo:

  1. Abran el menú de Opciones
  2. Hagan click sobre la pestaña de Aplicaciones
  3. Ingresen la palabra “mail” en el buscador
  4. Verán que para el Tipo de contenido mailto se corresponde un menú desplegable que les permitirá elegir qué Acción realizar en la columna de la derecha
  5. Allí seleccionen “Usar Gmail” (o el webmail que quieran)

 

Fuente: Lifehacker

]]> http://www.alconadadiseno.com.ar/blog/2012/05/como-establecer-a-gmail-como-cliente-de-correo-por-defecto/feed/ 0 Tips para diseñar páginas para dispositivos móviles http://www.alconadadiseno.com.ar/blog/2012/05/tips-para-disenar-paginas-para-dispositivos-moviles/ http://www.alconadadiseno.com.ar/blog/2012/05/tips-para-disenar-paginas-para-dispositivos-moviles/#comments Thu, 03 May 2012 00:39:09 +0000 admin http://www.alconadadiseno.com.ar/blog/?p=162 Sigue leyendo →]]> La navegación móvil viene en ascenso y se estima que dentro de poco tiempo, será tan habitual como la navegación desde equipos de escritorio o laptops. Diseñar una página para ser renderizada en un celular o smartphone no es tarea sencilla, debido a la gran variedad de dispositivos, sistemas operativos, tamaños y resoluciones de pantalla, capacidad de procesamiento y varios factores más. Si estás interesado en el diseño móvil, acá van algunos tips que te pueden llegar a ser de utilidad.

Tips para diseñar páginas para móviles

 

La navegación móvil crece a un ritmo increíble, es por eso que si sos webmaster o tenés tu propio sitio, es recomendable que vayas pensando en tener una versión adaptada a este tipo de dispositivos.

 

Tener presente el consumo de energía

 

Las baterías actuales no están a la altura del poder de procesamiento. Los microprocesadores duplican su capacidad en 18 meses, mientras que las baterías mejoraron su rendimiento en un 10% el año pasado. Al diseñar para dispositivos móviles, hay que cuidar el nivel de procesamiento que se le exije al equipo. Evitar en lo posible la realización de varias tareas en simultáneo (por ejemplo, el iPhone no permite más de una aplicación al mismo tiempo), asi como también abrir vínculos en una nueva pestaña. Si es totalmente necesario que el link se abra en otra pestaña, es recomendable poner un aviso para el navegante.

 

Una buena práctica es programar el sitio usando modelos de 3 capas, dónde el procesamiento de los datos sea realizado directamente en el servidor. De esa manera, la navegación móvil se hace mucho más ágil y con menor consumo de energia.

 

Familiarizarse con el ecosistema de dispositivos y navegadores móviles

 

Para hacer un buen trabajo, es conveniente tener una cierta idea de cuáles son las características principales de los smartphones más utilizados, asi también como losnavegadores móviles más populares.

 

Algunos recursos útiles:

 

Simplificar

Esto es fundamental para mantener la velocidad y la experiencia de navegación del usuario. En lo posible, hay que eliminar imágenes, simplificar los menúes y botones y recortar contenido.

 

Validar el código

 

Ya de por si es díficil hacer un buen diseño para dispositivos móviles, asique tratemos de no agregarle vicios de código e ineficiencias. Los navegadores de escritorio son mucho más permisivos con los estándares, pero los móviles no tanto, asique para tener una cierta garantía de que nuestra página se va a visualizar correctamente, es conveniente validar tanto el HTML como el CSS.

 

Ofrecer la opción de navegación normal

Uno nunca sabe con certeza las características del dispositivo que está usando el navegante o si por razones particulares quiere ver la versión completa del sitio, es por eso que se recomienda colocar un vínculo a la versión “normal” del website, es un buen detalle y le da mayor calidad a tu trabajo.

 

Usar un theme diferente

 

Esta es otra herramienta para simplificar el diseño. El theme móvil debe estar pensado para poder adaptarse a las distintas resoluciones de pantalla y navegadores móviles. Se pueden crear hojas de estilo (CSS) especialmente diseñadas para un modelo de smartphone en particular, por ejemplo, podemos tener una hoja de estilos para la navegación desde escritorio, otra para iPhone y otra para algún Blackberry en particular.

En nuestro caso particular, para hacer la versión móvil de WebAyunate utilizamos un plugin para WordPress muy conocido (100% recomendado), el WordPress Mobile Pack que viene con themes y herramientas que te permiten adaptar tu sitio de manera rápida y sencilla.

 

Optimizar la navegación

 

La mayoría de los smartphones modernos utilizan pantallas táctiles. Para mejorar la experiencia de navegación del usuario, es recomendable que el area de clickeo alrededor de los links sea lo más grande posible, al igual que los botones, que deberían tener una separación razonable. Recuerden que no todos tenemos los dedos como una princesa ;) .

 

Featured Resources:
GPS World
Is the PREMIER global media brand serving the exploding world of positioning and navigation for OEM, commercial and consumer applications…. >>

 

No abuses de Flash ni de JavaScripts

 

El formato Flash no es soportado por varias plataformas móviles, especialmente por los de la familia Apple, asique es recomendable que utilices otros formatos o que directamente te abstengas de poner contenido animado. Con respecto a los JavaScripts, muchos smartphones requieren de la ejecución de una máquina virtual de Java para correrlos, eso consume mucho procesador y batería, asique en lo posible hay que evitarlos o limitar al máximo su uso.
Fuentes:Superforo FI – UNAM | Noupe.com.

]]> http://www.alconadadiseno.com.ar/blog/2012/05/tips-para-disenar-paginas-para-dispositivos-moviles/feed/ 0 Botón Enviar de Facebook y como implementarlo en WP http://www.alconadadiseno.com.ar/blog/2012/05/boton-enviar-de-facebook-y-como-implementarlo-en-wp/ http://www.alconadadiseno.com.ar/blog/2012/05/boton-enviar-de-facebook-y-como-implementarlo-en-wp/#comments Thu, 03 May 2012 00:33:07 +0000 admin http://www.alconadadiseno.com.ar/blog/?p=159 Sigue leyendo →]]>

La semana pasada Facebook celebraba el primer aniversario del botón “Me gusta” algo que a día de hoy se puede ver en la mayoría de webs, blogs y todo lo relacionado con internet. Para no quedarse ni cortos ni perezosos desde la compañía han lanzado un nuevo botón.

Este nuevo botón es el de Send, al castellano Enviar. Tiene un funcionamiento similar al anterior botón pero con la peculiaridad de que ahora podrás elegir a quien enviar la información que deseas compartir. Cuando un usuario pulsa el botón a este se le abrirá una caja donde podrá indicar a los usuarios o grupos a los que desea enviar dicha información que estén dentro de facebook, pero no solo eso también podremos indicar correos electrónicosde un conocido o amigo.

Desde Facebook Developers nos detallan lo siguiente: “Hemos diseñado el botón ‘Enviar’ para que sea utilizado junto con el botón ‘Me gusta’. Al incluir el botón en su página web, la gente tendrá la capacidad para transmitir los contenidos que les gusta y también enviarlo a personas específicas“.

Si eres un usuario de WordPress para implementarlo deberás abrir el archivo en el que desee que aparezca ypegar el siguiente código:

1 <div id="fb-root"></div><scriptsrc="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><fb:send href="<?php the_permalink(); ?>" ></fb:send>

Si por el contrario lo quieres implementar en cualquier web te recomiendo darle una ojeada al blog de desarrolladores de facebook ya que aun no esta disponible en la sección de documentación.

Debido al éxito arrollador que tuvo el botón “Me gusta” quizá de aquí a unos días veamos plagado Internet del nuevo botón, solo queda ver como avanza el mismo.

Fuente: Tecnocratas

 

]]> http://www.alconadadiseno.com.ar/blog/2012/05/boton-enviar-de-facebook-y-como-implementarlo-en-wp/feed/ 0