martes, 26 de febrero de 2013

Crear una versión móvil de tu página web ajustando el CSS



En los últimos años la venta de dispositivos móviles con acceso a internet ha crecido a un ritmo notorio y los usuarios cada vez más se conectan a través de sus dispositivos. Este cambio obliga a los desarrolladores de páginas web a optimizar de igual forma su sitio tanto para ordenadores de sobremesa como para dispositivos móviles. Si todavía no adaptaste tu página web a las diferentes plataformas porque piensas que es una tarea compleja estas totalmente equivocado. En esta guía desarrollaremos los conocimientos necesarios para optimizar tu página web manipulando el CSSen unos simples pasos. De esta manera tu web estará visible tanto para dispositivos móviles como para equipos de sobremesa.

Lo primero que tenemos que hacer es personalizar el código HTML de la página web para validarlo en móviles. Para esta tarea utilizaremos la extensión mobileToolkit que está disponible para navegadores Chrome y Firefox. La herramienta te otorga información precisa que te será de gran utilidad.

    • W3W3
    • mobileToolkitmobileToolkit

    Luego de purgar el HTML de la página web vamos a centrarnos en el CSS. Actualmente las páginas web que desarrollemos tienen que ser páginas inteligentesque puedan verse correctamente desde un iPad, un dispositivo Android, una tablet o un ordenador de sobremesa, aunque cada uno de ellos cuenta con un tamaño de pantalla diferente.
    Ajustar CSS:

    La versión de CSS3 incluye los Media Queries. Los mismos nos permiten seleccionar una hoja de estilo para cada dispositivo móvil y podrás manipular el ancho, el alto, la orientación vertical u horizontal y la resolución de la pantalla. Lo que vamos a manipular son los Media types tanto el “handheld” correspondiente a los dispositivos móviles, como el “screen” correspondiente para los ordenadores de sobremesa.

    El código para dispositivos móviles es el siguiente:

    <link href=”css/movil.css” rel=”stylesheet” type=”text/css” media=”handheld, only screen and (max-device-width: 480px)” />

    El código para equipos de sobremesa es el siguiente:

    <link href=”css/escritorio.css” rel=”stylesheet” type=”text/css” media=”screen and (min-width: 481px)” />

    Para los dispositivos móviles tienes un máximo de “480” y en los ordenadores de sobremesa un mínimo de “481”. Aquí podrás manipular el valor de los “px” a la medida deseada.

    Ahora vamos a ajustar el valor viewport. Este parámetro es tomado por los Smartphone y define el área visible de la página web (escala y Zoom).

    La línea que insertaremos para personalizar el viewport pueden ser dos. Ambas están optimizadas para la gran mayoría de Smartphone disponible en el mercado.

    Opción uno:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    Opción dos:
    <meta name="viewport" content="width=device-width"/>

    El código viewport lo tienes que incluir en el archivo “index.html” o crear un documento HTML en la raíz del sitio, e insertar el código entre las etiquetas “<head>.

    • El código viewport lo tienes que incluir en el archivo “index.html” o crear un documento HTML en la raíz del sitio, e insertar el código entre las etiquetas “<head>”.El código viewport lo tienes que incluir en el archivo “index.html” o crear un documento HTML en la raíz del sitio, e insertar el código entre las etiquetas “”.
    • viewport viewport

    De esta manera adaptaras tu página web a los navegadores más usados por los principales dispositivos móviles y harás que tu web sea visible en diferentes plataformas y se adapte a las necesidades de cada usuario.

    A continuación te dejamos una herramienta de Google con la cual podrás observar el aspecto de tu sitio web desde un Smartphone, generándote la herramienta un informe con recomendaciones que te será muy útil.

    Sitio Oficial: haztuwebmovil
    Extensión Chrome: mobileToolkit
    Extensión Firefox: mobileToolkit
    Fuente: NeoTeo

    lunes, 25 de febrero de 2013

    Decor Tab Creator, servicio web gratuito para diseñar páginas de fans en Facebook





    La presencia de una empresa, negocio o proyecto en las redes sociales se torna prácticamente imprescindible en la sociedad actual. Un ejemplo son las páginas de fans en Facebook, bastante importantes para la imagen de una marca o producto y también para fidelizar a los usuarios y clientes.
    Decor Tab Creator es un servicio que se puede usar de forma gratuita para crear una página de fans, de apariencia completamente profesional, en Facebook. Funciona como un diseñador muy fácil de utilizar, no se necesita ningún tipo de conocimientos en programación.
    Para utilizar esta herramienta basta con hacer login con una cuenta de Facebook, elegir alguna de las plantillas disponibles (música, fotografía, tienda online, restaurante, etc) y configurar el resto de los elementos y apariencia. Cuestión de unos pocos minutos.

    Fuente: Lukor

    viernes, 22 de febrero de 2013

    Cómo identificar fuentes utilizadas en la web



    Una fuente de ordenador es un archivo de datos que contiene los símbolos y caracteres necesarios para representar escritos en determinadas aplicaciones o sitios web. Este texto que estáis leyendo está representado por una fuente que a su vez tiene unas características especiales tales como tamaño, estilo o colores asociados.



    Hay multitud de fuentes, algunas muy populares y otras infames -me viene Comic Sans a la cabeza-, y mientras que algunas tienen derechos reservados y es necesario pagar por utilizarlas, otras las podemos utilizar gratuitamente para nuestro sitio web u otras creaciones. Hay multitud de sitios donde encontrarlas, el problema es que en ocasiones queremos utilizar esa fuente que tanto nos gusta de un sitio y no sabemos cual es.
    Para usuarios avanzados puede ser relativamente fácil averiguarlo, entrando en el código fuente y buscando tal vez en la hoja de estilos CSS, pero tal vez sea más fácil, por simplicidad y por ahorrar tiempo, utilizar algún método de identificación de fuentes como Fount.
    A diferencia de algunas extensiones de navegador de las que os hemos hablado, como WhatFont, Fount utiliza la potencia del lenguaje JavaScript para ofrecernos un bookmarklet que podemos arrastrar a la barra de favoritos de nuestro navegador y utilizar en el momento que queramos identificar fuentes.
    Un bookmarklet es una serie de códigos estándar que podemos consumir en cualquier navegador con soporte Javascript (es decir, Chrome, Firefox, Safari o Internet Explorer, por ejemplo). Para utilizar Fount basta con arrastrar el bookmarklet desde la página oficial para, inmediatamente, disfrutar de sus servicios:
    • Un clic entrará en modo identificación
    • Desde ese momento, podemos pulsar sobre la palabra / fuente que queramos identificar para mostrar su información
    • Se nos mostrarán datos tales como nombre de la fuente, tamaño o estilo utilizados
    • Un nuevo clic en el bookmarklet saldrá del modo identificación
    Como véis, identificar fuentes es muy sencillo gracias a Fount, un fragmento de código que no provoca carga alguna en nuestro navegador al no ser una extensión residente. Podemos utilizar el bookmarklet cuando queramos, incluso aunque no lo tengamos en la barra de favoritos, tal vez renegándolo a una carpeta de favoritos si no vamos a utilizarlo de forma demasiado frecuente.
    Fuente: Bitelia

    lunes, 18 de febrero de 2013

    Web Optimization, una parte clave en el posicionamiento



    Existen factores enormemente trascendentes por las que nuestra web no llega a ser encontrada por los clientes como quisiéramos. La más normal es que no aparecemos en las primeras posiciones de los buscadores. En demasiadas ocasiones no generamos contenido o nuestra información no es lo suficientemente atrayente para los clientes, aunque existen más motivos.
    Hoy en día Internet es el mayor canal de información y el que mayor rentabilidad promete según todos los estudios. Por esto es trascendente ser perceptible y sencillamente accesible para el conjunto de los clientes. El posicionamiento web, posicionamiento natural en buscadores u optimización de motores de búsqueda, es el procedimiento para optimizar la visibilidad de un sitio web en los resultados orgánicos de los desiguales buscadores.
    La mayoría de los propietarios de sitios buscan posicionar una página en pocos días, y es obvio que lo trascendente es estar al tanto de las técnicas SEO que permitan agigantar la visibilidad y accesibilidad de un sitio en Internet.
    La optimización web es un trabajo que ha de ser diario, y que necesita de estudios previos o de analítica web. Con objeto de lograr resultados perceptibles y efectivos. El procedimiento inicia con el estudio y elección de una serie de “palabras clave” denominadas keywords, relacionadas con la actividad de la empresa o sitio web, y que han de constituir el patrón de palabras-clave con las que debe posicionarse la web en Internet.
    Otros pasos a continuar en el posicionamiento SEO son: análisis de los competidores, optimización de la web, construcción de backlinks. Las técnicas de construcción de enlaces son fundamentales sí se ambiciona escalar posiciones en el ranking, y tener actualizada la web diariamente, aspectos que estiman demasiado los buscadores.
    Es clave que el sitio web que deseamos posicionar tenga excelencia tanto en los contenidos como en el tipo y estructura de la web, ya que la “usabilidad” es primordial para que los clientes se detengan en la web y para que los buscadores indexen nuestras páginas ajustadamente. Estas técnicas y mejoras reseñadas, son imprescindibles para alcanzar el posicionamiento web deseado.
    También, despejar que existen dos clases de posicionamiento web, SEO o natural y el SEM o publicidad pagada en buscadores. El SEO debe perfeccionarse con visión a medio/largo termino, es un trabajo arduo y costumbre, que ha de ejecutarse por especialistas en la materia, aunque necesita de menos inversión que el SEM. El SEM por su parte es un procedimiento con resultados más rápidos  que igualmente deben hacerse por especialistas y que conlleva una inversión más elevada.
    En el caso de usar el método SEM, la irrupción de la web estará condicionada al costo mensual destinado, ya que en cuanto renuncies a seguir anunciándote  tu sitio quedará en el olvido al no aparecer en los resultados de búsquedas. Por tal motivo, lo más recomendable es ejecutar campañas conjuntas de SEM + SEO.

    Fuente: Pysn Pueblo y Sociedad Noticias

    viernes, 15 de febrero de 2013

    10 aplicaciones web que permiten probar en línea código de distintos lenguajes




    Si tienes la necesidad de probar código y no tienes la posibilidad de probarlo localmente pues no tienen un IDE, aquí encontraras una lista creada por el sitio UpScreen con 10 aplicaciones web que permiten probar en línea distintos tipos de código..
    Es así que pueden ejecutar código de lenguajes como C, C++, PHP,  Perl, Python, Ruby y hasta pueden probar HTML, SQL, CSS y otros.
    Aquí tienen la compilación,

    1. Codepad

    codepad

    2. WriteCodeOnline

    writecodeonline

    3. Tinkerbin

    tinkerbin

    4. JsFiddle

    jsfiddle

    5. IDEone

    ideone

    6. Google Code Playground

    google-code-playground

    7. CodeRun IDE

    coderun

    8. Viper7

    viper7

    9. CSSDesk

    cssdesk

    10. SQL Fiddle

    sqlfiddle
    Fuente: lukor

    Twitter Delicious Facebook Google+ Stumbleupon Favorites More