slide1

Alt1040. Noticias acerca de Internet, diseño, música, cine, opiniones, weblogs y medios

Es uno de los weblogs de tecnología más seguidos de la blogosfera hispana.

slide2

Bitelia. Blog de software, internet y servicios web

Software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo sobre tecnología.

slide3

Xataka. Publicación de noticias sobre gadgets y tecnología.

Últimas tecnologías en electrónica de consumo y novedades tecnológicas en móviles, tablets, informática, etc.

slide4

Wwwhatsnew. Aplicaciones, marketing y noticias en la web.

Servicios que os pueden ser útiles para dibujar, gestionar tareas, hacer amigos, encontrar restaurantes...

slide5

Fayerwayer. Discusiones y opiniones de lo ultimo en tecnología y gadgets

Con secciones dedicadas a Internet, Software o Redes Sociales es un referente a nivel de tecnología en español.

17 de julio de 2013

La web móvil. Aspectos técnicos

Ya nos quedó suficientemente claro por qué tenemos que invertir nuestro tiempo en desarrollo web para móviles.
Toda la información en el post 'la necesidad de adaptar tu web site a dispositivos móviles'



El siguiente paso es determinar lo que queremos, ¿web móvil o aplicación móvil?

Tenemos que partir de la base de que el diseño web es universal o compatible con cualquier dispositivo, mientras que una app tiene que aportar un valor añadido, lo que va a suponer una mayor inversión en recursos para la adaptación a la plataforma específica (Iphone, Android, Windows Phone, etc).

1- La primera opción es la de adaptar nuestro sitio web a dispositivos móviles.

Éstos son algunos de los aspectos técnicos básicos a considerar:

  • si usas diseño web adaptativo en el que el código HTML es el mismo para todos los dispositivos y son las CSS las encargadas de modificar el procesamiento de la página, se recomienda el uso de media queries.

    Media Queries es un módulo CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de pantalla. Se convirtió en un estándar recomendado por la W3C en junio del 2012 y es un principio básico de la tecnología de diseño web adaptaivo. Fuente Wikipedia: Media Query.

    Ejemplo: @media only screen and (max-width: 620px) {...}.

  • si optamos por la publicación dinámica de diferentes HTML en la misma URL, el servidor responderá en función del user-agent que solicite la página. Se recomienda que el servidor envíe una sugerencia para detectar el contenido móvil. Esta sugerencia se implementa mediante la cabecera Vary HTTP.

    El contenido de la respuesta variará en función del user-agent que solicite la página. Si el servidor ya utiliza la cabecera Vary HTTP, puedes añadir User-Agent a la lista que ya se ha proporcionado.

  • en el caso de URL para móviles independientes, la recomendación es la siguiente:

    1. para las páginas de escritorio, añade una etiqueta de enlace especial rel="alternate" que señale la URL para móviles.

      Ejemplo: <link rel="alternate" media="only screen and (max-width: 620px)" href="http://m.example.com/default"/>
    2. y para las páginas para móviles, añade una etiqueta de enlace rel="canonical" que señale la URL para equipos de escritorio.

      Ejemplo:<link rel="canonical" href="http://www.example.com/default"/>
Extracto de las recomendaciones para Developers de Google: Google Developers

Errores comunes en los sitios desarrollados para smartphones que debemos evitar:

  • los vídeos no se reproducen porque no usamos tecnología html5 estándar.
  • redireccionamientos defectuosos.
  • error 404 (Page Not Found) sólo para smartphones.
  • baja velocidad de carga de la página.
  • no prestar atención a la usabilidad: tamaño incorrecto de los textos e imágenes, colores inapropiados, ubicación inadecuada de las opciones de navegación, falta de implementación de los atajos de teclado, etc.
  • llamadas a enlaces externos que se abren en otras ventanas.
  • ausencia de un apartado de contacto o método de retroalimentación.
  • no proporcionar un enlace al sitio web completo.

2- Si nos decantamos por la aplicación para móviles, tenemos que contar con conocimientos de los lenguajes de programación necesarios para su desarrollo, ¿o tal vez no?

Existen en el mercado diferentes herramientas para crear apps móviles para las distintas plataformas existentes sin conocimientos previos de programación.

Vamos a poder utilizar asistentes de edición para personalizar el diseño de la interfaz y configurar las funciones de aplicaciones básicas, siendo el propio asistente quién se ocupe de compilar nuestro proyecto en una aplicación nativa para la plataforma elegida y su posterior publicación en la tienda de aplicaciones.

  • Creapp: ofrece un buen catálogo de plantillas prediseñadas para ayudar a los iniciados en este interesante campo a crear nuestra primera aplicación.
    Permite integrar en nuestro proyecto, sistemas de pedidos online, pasarela de pago para tiendas virtuales y otro tipo de servicios de gran utilidad para medianas y pequeñas empresas.

  • Apps Builder: la diferencia de este servicio con respecto al resto de asistentes es que su editor puede capturar los contenidos de nuestra página web para utilizarlo como base con la que desarrollar aplicaciones para los diferentes sistemas operativos móviles.
    Además ofrece la posibilidad de configurar paso a paso y sin tocar una sola línea de código las características de tu aplicación añadiendo módulos como: Noticias, Foto, Vídeo, Podcasting, Tienda, Canal RSS, Facebook, Twitter, Sitio web, Radio, PDF, Texto, Código, Muro de chat, Contactos, Mapas, Mensaje de texto, Llamada y Correo.

  • Mobincube App Generador: quizá sea uno de los generadores de aplicaciones móviles multiplataforma más completos dado el grado de personalización que permite.
    Resulta bastante intuitiva y práctica y ofrece la posibilidad de exportar nuestro proyecto a las principales plataformas móviles como iOS, Android, HTML5, BlackBerry o Windows Phone.

  • BlackBerry App Generator: nos permite crear aplicaciones para las diferentes versiones del sistema operativo BlackBerry sin tener conocimiento alguno de programación.

Fuente: Cómo crear aplicaciones móviles sin saber programar. Think Big

24 de junio de 2013

La necesidad de adaptar tu web site a dispositivos móviles

España es líder en tasa de penetración de Smartphones de los países EU5 (Alemania, España, Francia, Italia y Reino Unido). Estudio realizado por ComScore en abril de 2013.
El año 2012 cerró con una tasa de penetración del 63% dónde el 89% de los usuarios afirman usar estos dispositivos para conectarse a Internet a diario.

En cuanto a tablets ocupamos la octava posición en el ranking mundial con una tasa de penetración del 24%. El crecimiento de estos dispositivos ha sido histórico y nunca antes visto en nuestro país.

En términos de tráfico web procedente de estos dispositivos la tendencia también es creciente. En el año 2012 se duplicó por cuarto año consecutivo respecto al año anterior y se espera que en 2013 se mantenga dicho crecimiento.
Fuente: Comunidad IEBS, Innovation & Entrepreneurship Business School

  • ¿son éstas, razones de peso en la adaptación de contenidos para la web móvil?

    Evidentemente sí, en el año 2013 ya habrá más usuarios navegando desde móviles que desde PC.

  • ¿cuáles son los problemas con los que nos vamos a encontrar?

    Las características de este tipo de dispositivos dificultan la experiencia de navegación y de usuario. Cuentan con una serie de limitaciones que no tienen los ordenadores de escritorio:

    1. las pantallas son pequeñas y su resolución escasa
    2. no están optimizados para la entrada de datos
    3. existe una gran diversidad de dispositivos con diferentes capacidades: algunos terminales no soportan determinados formatos de vídeo o lenguaje de script
    4. la velocidad de carga de datos es más lenta
    5. disponen de un menor ancho de banda en sus conexiones
    6. escasos recursos de memoria de los dispositivos
    7. etcétera

  • Ante un reto de tal magnitud, ¿cuáles son mis opciones de desarrollo?

    Existen tres técnicas de desarrollo que se utilizan normalmente en la web para dirigirse a los usuarios multidispositivo y permitir la personalización de contenido y optimización en la experiencia de usuario:

    1. Responsive Web Design o diseño web adaptativo

      El diseño web adaptativo o adaptable es una técnica de diseño y desarrollo web que consigue adaptar el sitio web al entorno del usuario, lo que hace posible tener un único diseño para móviles, tabletas y PC.
      Esta técnica te permite optimizar la experiencia de tu página en diferentes tamaños de pantalla sin crear varios sitios web.
    1. Dynamis Serving o publicación dinámica de diferente contenido HTML en la misma URL

      Cuando un cliente visita tu sitio web, el servidor web puede detectar el tipo de dispositivo en el que se encuentra y presentar una página personalizada (provees un documento HTML y CSS distintos) en la misma URL.
      Puede ser muy útil para ocultar o mostrar ciertos elementos que, según el contexto, no tienen sentido en móvil o en la versión de escritorio.

    2. Web dedicada y exclusiva para móviles

      Consiste en crear un sitio diferente para el tráfico de móviles, independiente del sitio original para ordenadores.
      La ventaja fundamental es que la carga y navegación son más rápidos al adaptar más fácilmente el contenido a los usuarios de móviles.

Construyendo sitios web móviles amigables



¿Qué solución es mejor?



Google Developers: Creación de sitios web optimizados para móviles

23 de mayo de 2013

Herramientas web que te sacarán de más de un apuro



La red ofrece cada vez un mayor número de herramientas online cuyo uso nos facilita sobremanera el día a día.



Que tire la primera piedra quién no se haya visto en una situación de emergencia y haya tenido que recurrir a una de estas aplicaciones en línea de gran utilidad.

Algunas de las herramientas que uso con frecuencia:

  • Convierte los archivos con extensión docx a doc

    Es posible que te hayan enviado por correo un documento de word adjunto con extensión .docx (formato de Office 2007) y al tener instalado una versión anterior (Office 2000, Office XP, Office 2003 o incluso OpenOffice) no has podido abrirlo.

    La solución es sencilla, basta con instalar el paquete de compatibilidad de Microsoft Office para formatos de archivos de Word, Excel y PowerPoint 2007.
    Pero si te urge leer el fichero sin recurrir a la instalación, recomiendo acceder al convesor online:

    Able2Extract

  • Instala una impresora virtual generando pdf desde cualquier aplicación con PDF Creator

    Si has realizado todos los pasos necesarios para hacer una reserva online de avión o de hotel y llegados al último paso en el que quieres imprimir el localizador te das cuenta de que no tienes tinta en la impresora, no te eches las manos a la cabeza.

    Puedes instalar el software libre y gratuíto PDF Creator que genera archivos pdf desde cualquier aplicación que soporte impresión.

    PDF Creator

  • Transforma cualquier url en un archivo pdf respetando el contenido original con HTML2PDF

    Si lo que queremos es crear un documento pdf a partir de una página web cualquiera HTML2PDF es tu herramienta online.

    Su manejo es tan sencillo como incluir la url del sitio web que nos interese o incluso su código html y marcar la opción "Convert" para obtener una previsualización del resultado final y un enlace de descarga para almecenar en nuestro equipo el documento final.

    HTML2PDF

  • Convierte tu imagen al formato ICO. También puedes crear un favicon para tu web.

    Muy útil para los desarrolladores que no tienen el perfil de diseñador gráfico y por tanto no disponen de un programa de edición gráfica que resuelva este problema.
    Podemos encontrar este conversor en:

    Online Convert

  • Reduce hasta un 70% el peso de una imagen png preservando buena parte de su calidad original con el compresor TinyPNG

    No olvidemos que el formato de imagen png es el único formato ampliamente soportado que puede almacenar imágenes parcialmente transparentes.

    Interesante herramienta para reducir el tamaño de imágenes de un website con el objetivo de lograr un menor consumo de ancho de banda, una carga más rápida y en definitiva una mejor experiencia de usuario.

    Shrink PNG files

  • Potente editor online de html, javascript y css: JSFiddle

    Es una herramienta 100% web para practicar en tu navegador.
    Te ofrece un ambiente de varias ventanas, en las que puedes escribir por separado html, javascript y css y en otra ventana puedes ver el resultado de tus pruebas.

    Una de las ventajas añadidas, además de su fácil uso, es la incorporación de las librerías javascript más populares del mercado: Mootols, JQuery, Prototype, Yui, Dojo, Processing, ExtJS, etc.

    JSFIDDLE

  • Interesante herramienta con la que tener una aproximación de cómo nos ven nuestros usuarios desde todo tipo de dispositivos: Screenfly

    Nos permite visualizar un sitio web en resoluciones de navegadores de escritorio, tablets, smartphones y hasta los navegadores presentes en algunos televisores o smart tv.

    Simplemente con introducir la URL de nuestro site o blog, esta herramienta simula de forma automática la visualización que un usuario tiene en múltiples resoluciones y dispositivos dando una idea exacta de la experiencia que estamos ofreciendo a nuestros usuarios.

    quirktools

  • Si estáis diseñando una web o realizando cambios en vuestro sitio y una de las prioridades es cambiar su tipografía, podéis usar typewonder.

    Se trata de una herramienta que permite visualizar cómo quedaría cualquier página web si usamos algún tipo de letra de las disponibles en Google Fonts.

    Solo tenemos que informar la url y seleccionar la tipografía deseada, typewonder se encargará de mostrar el resultado sin necesidad de haber tocado una sola linea de código.

    TypeWonder

  • Interesante utilidad web que nos permite encontrar el tono exacto de cualquier color que busquemos proporcionándonos el código hexadecimal correspondiente: 0to255

    Construido por diseñadores y para diseñadores, se trata de una herramienta minimalista, útil, sencilla e intiutiva.

    Elegimos un color del panel de colores ofrecido y de forma automática se incluyen una amplia colección de tonalidades que van desde el más claro hasta el más oscuro.

    0to255

  • Herramienta online gratuíta para todo desarrollador interesado en validar su código html: HTML_CodeSniffer

    Los estándares que se utilizan para evaluar el código son WCAG 2.0 nivel AAA, WCAG 2.0 nivel AA y WCAG 2.0 nivel A.

    Esta utilidad cuenta además con una herramienta que nos permite pegar directamente el código html para mostrarnos posibles errores, advertencias y avisos de nuestro código.

    Las normas y sus reglas están alojadas en el repositorio GitHub, por lo que, una vez que una nueva norma o regla se agrega, el bookmarklet se actualiza de forma automática.

    HTML_CodeSniffer

  • Conversor de divisas

    Por último, no quería excluir de la lista, un conversor de divisas para aquellos a los que nos apasiona visitar países más allá de las fronteras de la Unión Europea.

    La información que proporciona el sitio web se actualiza cada minuto, mostrándonos su valor real en cada momento.

    XE

9 de abril de 2013

¿por qué Twitter no va a la biblioteca?


A nadie le sorprende hoy el potencial de Twitter como servicio de microblogging o lo que es lo mismo, servicio que permite a sus usuarios enviar y publicar mensajes cortos (alrededor de 140 caracteres), generalmente de texto plano.


La idea para la que fué diseñado responde al concepto de un "periodismo creado por y para todos".

Desde sus inicios, allá por marzo de 2006, su crecimiento ha sido vertiginoso convirtiéndose en la red social con mayor número de usuarios. Y no es de extrañar porque representa una herramienta de comunicación imprescindible y altamente eficiente para la difusión de información en tiempo real y para la puesta en marcha de estrategias de marketing.

Sus posibilidades son tan amplias que todavía nos cuesta sacarle el máximo partido. Por destacar algunas de ellas, diremos que es especialmente interesante para:
Una de las funcionalidades de mayor repercusión es su motor de Búsquedas que podemos usar de tres formas:

  • desde la página de búsquedas 'https://twitter.com/search-home' que nos proporciona un número más que aceptable de operadores (de campo, booleanos, de proximidad...) para definir la precisión de una consulta y además, nos permite acceder a las tendencias del momento.
  • desde la página de búsqueda avanzada 'https://twitter.com/search-advanced' con la posibilidad de confeccionar filtros de consulta complejos y en la que destacaría la posibilidad de búsquedas locales y publicaciones escritas en un idioma determinado.
  • desde la caja de texto de búsqueda en la parte superior de la interfaz.
Y dicho todo ésto, os preguntaréis ¿qué tiene que ver con el título de este artículo?

Más allá de cualidades y virtudes, que las tiene y muchas, yo le pediría al equipo tecnológico de San Francisco que se esfuerce un poco más en el desarrollo del algoritmo de corrección ortográfica, diseñado para ofrecer consultas alternativas que mejoran los resultados de búsqueda del tipo "Did you mean" o "Quiso decir".

Nos ponemos manos a la obra e introducimos el término biblioteca en el campo de texto de consulta y pulsamos enter.

Twitter nos corrige,
Quisiste decir: biblioteta

El resultado en formato gráfico:



En un principio pensé que se trataba de algún término desconocido para mí o de reciente aparición en la nueva era digital, pero mis dudas se disiparon en segundos cuando al pulsar el link pude concluir que lo que andaba buscando era "Abasteciendo de Tetas desde el 1 de Octubre de 2010" o "Resorte cultural para el archivo mamario".

Gracias Twitter por tu inestimable ayuda!!!

Y sí, es verdad, las nuevas tecnologías avanzan muy deprisa y las herramientas de socialización y comunicación están cambiando nuestra forma de vida pero, al margen de sarcasmos e ironías, todavía nos queda un largo camino por recorrer.

24 de marzo de 2013

¿te consideras un especialista SEO?

La optimización de motores de búsqueda o posicionamiento en buscadores es el proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores. Es frecuente nombrarlo por su siglas en inglés,
SEO (Search Engine Optimization)


Éstas son algunas de las cuestiones más importantes que tiene que hacerse un especialista seo:

  • ¿Conoces las técnicas básicas y fundamentos de seo necesarios para rentabilizar un negocio en internet?
  • ¿Qué es lo primero en lo que se fija de tu sitio web un experto seo?
  • ¿Qué es lo que esperan de tí y qué es lo que puedes aportar como especialista seo?
  • ¿Cuánto tiempo tardaré en posicionar mi negocio en los buscadores?
  • ¿Conoces las herramientas adecuadas y referencias para poder llevar a cabo un proyecto?
Si tienes respuestas para las preguntas planteadas te invito a responder al siguiente cuestionario sobre 'estrategias de posicionamiento':

  • Dentro del marketing en buscadores hay las siguientes modalidades:

  • Los efectos del SEO empiezan a notarse:

  • La principal diferencia entre SEO y PPC es:

  • El modelo de PPC:

  • El posicionamiento de nuestra página en los resultados de Google depende de:

  • El posicionamiento de una página depende de:

  • Cuando hablamos de PPC estamos hablando de:

  • El trabajo de un SEO consiste en:

  • El Page Rank es:

  • Las señales de calidad son:

  • QDF y QDD son:

  • Un buen SEO conoce los factores de posicionamiento por:

  • ¿Qué es el Trust Rank?

  • ¿Qué factores de confianza tienen más relevancia en el algoritmo de Google?

  • Las búsquedas realizadas por los usuarios pueden ser:

  • La herramienta Key Word Tool de Google sirve para:

  • La herramienta de Google Trends sirve para analizar:

  • Los enlaces que generemos para nuestra página web deben ser:

  • El Long Tail:

  • Se denomina Black hat SEO

  • ¿Qué factor on page es más importante para el posicionamiento de una web?

  • ¿Qué factor off page es más importante para el posicionamiento de una web?

  • ¿Cuál es una herramienta para el seguimiento de un KPI o indicador de rendimiento?

  • ¿Qué es el error 404?

  • ¿Cuál es el redireccionamiento "permanente"?

  • ¿Cuál sería una buena etiqueta para optimizar una fotografía?

  • ¿Cuál te parece un buen "Texto Ancla" para un link interno de una joyería?



11 de marzo de 2013

Y creías que lo sabías todo sobre la web ...


La "Web Social" o en inglés "Social Media" está cambiando nuestra forma de vivir: la forma en que nos comunicamos, creamos nuevas amistades, nos presentamos ante el mundo, buscamos trabajo y hacemos negocios.


Somos millones de personas interactuando en línea a través de blogs, wikis, redes sociales, sitios dedicados a compartir fotos, vídeo o música, widgets y bookmarks, por mencionar sólo algunos.

Este incesante flujo de información marca la tendencia hacia un nuevo panorama de comunicación en el que las Redes Sociales están superando a los medios tradicionales de información.
Si aún así crees que lo sabes todo sobre la world wide web (www) puede que estés muy equivocado.

Éstas son sólo algunas de las curiosidades que quizás todavía no conozcas:

  • ARPANET es el antecedente de lo que hoy conocemos como Internet.
    Fué creado en 1969 cuando se estableció la primera conexión de computadoras entre tres universidades en California y una en Utah, Estados Unidos.
    Su desarrollo alcanza su máxima expresión en 1990 con el uso de la telaraña mundial (WWW) de la que Tim Berners-Lee es considerado creador.
  • el primer banner de la historia fue lanzado en octubre de 1994 por la compañía de comunicaciones AT&T en HotWired.com, la primera revista digital y precursora del actual Wired.com. Su tamaño fue de 468 x 60 pixeles, lo que sigue siendo el estándar más utilizado en la actualidad. El mensaje del anuncio decía: "¿Hizo clic aquí alguna vez? ¡Pues debería hacerlo!"
  • un dominio de Internet es una red de identificación asociada a un grupo de dispositivos o equipos conectados a la red Internet.

    ¿conocías los siguientes nombres de dominios de nivel superior?
    1. .asia, la región de Asia
    2. .biz prevista para ser usado por negocios.
    3. .eu, para países de Europa
    4. .fm, para páginas del país Estados Federados de Micronesia, pero usado también para estaciones de radio de frecuencia modulada
    5. .int, para entidades internacionales, organizaciones como la ONU
    6. .jobs, para departamentos de empleo y recursos humanos en empresas
    7. .mil, para el Departamento de Defensa de los Estados Unidos (Único país con dominio de primer nivel para el ejército)
    8. .mobi, para empresas de telefonía móvil o servicios para móvil.
    9. .museum, para los museos
    10. .travel, para páginas de la industria de viajes y turismo.
    11. .web es un dominio de internet de nivel superior, no oficial, que lleva propuesto desde 1995.
    12. .ws es un dominio de internet con el significado de web site.
    13. .xxx, para industria pornográfica.
    14. más información sobre dominios en wikipedia
  • El 26 de marzo de 2006 Jack Dorsey, creador de Twitter, envió el primer 'tweet' de la historia: "creando mi twttr".
    Por países, en España existe un 30% de usuarios de Internet que utilizan Twitter frente al 20% de EE.UU. y el asombroso 51% de Arabia Saudí.
  • Facebook es la segunda página web que más tráfico genera después de Google.
    En lo que respecta al porcentaje de la población mundial de Internet que twittea activamente (utiliza el sistema al menos una vez al mes), nos encontramos con un 21% (en empate con YouTube), mientras que Google+ arroja un 27% y Facebook un 51% (datos del segundo semestre de 2012).
  • en España, Google alcanza la escalofriante cifra del 97,10% de cuota de mercado de buscadores (cifra de 2012), seguida por Bing, Yahoo, Orange y Conduit
  • por contra, existen cinco países dónde su supremacía queda relegada a un papel secundario:
    1. Rusia con su buscador Yandex
    2. República Checa y Seznam
    3. China cuenta con Baidu
    4. Corea del Sur y Naver
    5. Japón y su buscador Yahoo Japan
  • los huevos de pascual virtuales son mensajes ocultos o marcas personales sobre un producto intelectual.

    Algunos de los más sonados y divertidos:

    1. escribe about:mozilla en la barra de dirección de Mozilla Firefox y pulsa Enter
    2. ahora escribe about:robots y pulsa Enter
    3. entra en la página de Google Maps, pulsa el botón Cómo llegar e introduce en Dirección de origen: Beijing y en Dirección de destino: Tokio. En el punto 34 de la ruta, aparece el mensaje "Ir en moto de agua por el océano Pacífico" durante 782 km.
    4. en homenaje a la saga de videojuegos 'Star Fox', introducimos Do a Barrel Roll en la caja de texto de búsqueda de Google y pulsamos Enter para ver al buscador hacer un giro completo rememorando al de las naves que protagonizan este juego de Nintendo.
    5. ahora introduce el término askew o tilt, veremos que la página adquiere una ligera inclinación hacia la derecha.

  • "Gangnam Style" del artista surcoreano PSY es el vídeo más visto de la historia de Youtube con más de 1300 millones de reproducciones (en su pico máximo ha registrado un promedio de 10 millones de reproducciones cada 24 horas, lo que supone casi 116 reproducciones por segundo solo en YouTube).

    Infografía realizada por @DosPuntoUno: