Que es Reponsive Web Design y Para que sirve

El diseño web responsive o adaptativo o "Reponsive Web Design" es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos. Desde ordenadores de escritorio a tablets y móviles.

Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet, smartphone… por lo que, cada vez más, nos surge la necesidad de que nuestra web se adapte a los diferentes tamaños de los mismos.Pero, ¿qué es esto exactamente?

¿Cómo funciona el responsive web design?

En lugar de construir una website para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media queries y un layout con imágenes flexibles. De esta forma, la website detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos imágenes, más ligeras, redistribución de las columnas en el diseño, menos texto, etc.).

El HTML5 permite una experiencia excelente para los usuarios, sin el coste de desarrollar una app nativa para cada dispositivo. En resumen, se diría que el responsive design son todo ventajas.

Es fácil de manejar ya que solamente trabajas sobre una website y los resultados serán uniformes en todas las plataformas sin distorsiones en las imágenes o texto. Además, ahorras tiempo y dinero al desarrollar una vez y un pago único de hosting.

Read More

En que Consiste y Sus Características

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se usa código media-queries de CSS3.

El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural.

Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo.

Read More

Ventajas y Desventajas

Ventajas

• Mejoramos la experiencia de navegación del usuario: El usuario que accede a una web a través de un móvil y no puede percibir el contenido correctamente porque éste se ha descuadrado al verlo en ese canal, probablemente no vuelva a entrar en nuestra web. Por el contrario si le damos un diseño responsivo, estaremos logrando que mejore la opinión que tienen de nuestro sitio web.

• Contenido duplicado: Otro factor importante que nos vamos a quitar y que perjudica seriamente al SEO es el del contenido duplicado. Si antes teníamos el mismo contenido para una versión adaptada al móvil y otro igual adaptado a otros dispositivos, con un diseño responsivo nos quitamos de un plumazo este problema.

• Reducción de inversión: Reducimos los costes ya que la plantilla que utilizamos tanto para una versión de ordenador como móvil es la misma. Ya no harán falta dos o más plantillas para adaptarlo, así que menos inversión en mantenimiento y costes.

• Viralidad: La era móvil tiene cada vez más peso. Según recientes estudios aproximadamente un 70% acceden a las redes sociales a través de dispositivos móviles. Seguro que al cabo del día alguna vez lo hacéis vosotros. Si nuestra web tiene un diseño responsivo y están accediendo a ella a través del móvil de manera optimizada es más que probable que tengan las redes sociales abiertas y compartan nuestro contenido, ya que es más rápido y cómodo.

Desventajas

• Dificultades técnicas: Aun cuando esta tendencia se está instaurando muy rápidamente, no está estandarizado al 100%. Como barrera de entrada aún no hay muchos expertos que dominen este desarrollo completamente.

• Tiempo y costes de desarrollo: Al llevar poco tiempo instaurado, aunque cada vez lo esté más, los tiempos para la creación del site puede alargarse más de lo esperado. Necesitarás tener un Plan B si no dispones de recursos económicos ni temporales para contar con tu web adaptada al móvil.

• Tiempo de carga: En el móvil la espera en los tiempos de carga se ve afectada en la experiencia del usuario frente a nuestra web. De un lado factores como el tipo de conexión en el que se encuentra el usuario en el momento (si es 3G o Wifi); y de otro la optimización del contenido del site afecta al peso y tiempo de carga (la teoría dice que las imágenes deben ser 

Read More

Que es jQuery y Para que sirve

Primero que nada, jQuery es una librería JavaScript open-source, que funciona en múltiples navegadores, y que es compatible con CSS3. Su objetivo principal es hacer la programación “scripting” mucho más fácil y rápida del lado del cliente. Con jQuery se pueden producir páginas dinámicas así como animaciones parecidas a Flash en relativamente corto tiempo.

jQuery es considerado un Framework de Javascript, o ambiente de desarrollo. Lo que no es más que un conjunto de utilidades las cuales no necesitan ser programadas, de hecho ya fueron programadas, probadas y podemos utilizarlas de una manera muy simplificada.

En otras palabras, podremos lograr los mismos resultados, en menos tiempo sin necesidad de programar una funcionalidad completamente.

¿Qué puedo hacer con jQuery?

jQuery nos permite agregar efectos y funcionalidades complejas a nuestro sitio web, como por ejemplo: galerías de fotos dinámicas y elegantes, validación de formularios, calendarios, hacer aparecer y desaparecer elementos en nuestra página y muchas otras poderosas opciones. Otra ventaja sin duda es la posibilidad que nos brinda de trabajar con AJAX, sin preocuparnos de los detalles complejos de la programación.

Read More

¿Por Qué utilizar jQuery?

Muchas veces nos planteamos si es mejor utilizar cosas ya hechas o desarrollarlas por nuestra propia cuanta. Bueno… este es totalmente relativo dado que cuando programamos, muchos de los lenguajes utilizados no son de bajo nivel, es decir estamos utilizando funciones pre-desarrolladas y simplificadas.

Con jQuery ocurre lo mismo, por ejemplo: el detectar que tipo de explorador utiliza un visitante tendríamos que escribir unas cuentas líneas de código en Javascript. Dado que jQuery es totalmente compactible con la mayoría de los exploradores, Internet Explorer, Firefox, Opera, Apple Safari etc. En definitiva, nosotros no necesitamos preocuparnos por los asuntos de compactibilidad, jQuery lo hace automáticamente.

El soporte es otra de las razones por la cual la utilización de jQuery en nuestros sitios es totalmente recomendada. Esta fantástica librería ha tenido una aceptación muy grande por los programadores, lo que ha generado que muchos desarrolladores se dediquen a la creación de plugins o complementos que utilizan jQuery. Esto nos permite agregar galerías dinámicas, calendarios, sistemas de votación, formularios dinámicos y muchas otras cosas tan solo agregando los plugins.

Otra razón, que es muy importante es que es gratis, y el código fuente puede ser modificada y adaptado a nuestras necesidades siguiendo las políticas de las licencias (MIT y GPL2)

Read More

Ejemplos

La forma de interactuar con la página es mediante la función $(), un alias de jQuery(), que recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML y devuelve todos los nodos (elementos) que concuerden con la expresión. Esta expresión es denominada selector en la terminología de jQuery.

$("#tablaAlumnos"); // Devolverá el elemento con id="tablaAlumnos"

$(".activo");       // Devolverá una matriz de elementos con class="activo"

Una vez obtenidos los nodos, se les puede aplicar cualquiera de las funciones que facilita la biblioteca.

// Se elimina el estilo (con removeClass()) y se aplica uno nuevo (con addClass()) a todos los nodos con class="activo"

$(".activo").removeClass("activo").addClass("inactivo");

O por ejemplo, efectos gráficos:

// Anima todos los componentes con class="activo"

$(".activo").slideToggle("slow");

Read More

Ventajas y Desventajas

Ventajas

• ·         jQuery es flexible y rápido para el desarrollo web
• ·         Viene con licencia MIT y es Open Source
• ·         Tiene una excelente comunidad de soporte
• ·         Tiene Plugins
• ·         Bugs son resueltos rápidamente
• ·         Excelente integración con AJAX

Desventajas

• ·         jQuery es fácil de instalar y aprender, inicialmente. Pero no es tan fácil si lo comparamos con CSS
• ·         Si jQuery es implementado inapropiadamente como un Framework, el entorno de desarrollo se puede salir de control.

Read More

Que es AJAX y Para que Sirve

AJAX es el acrónimo de Asynchronous Javascript and XML, es decir, Javascript y XML Asíncrono.

Es una técnica de desarrollo web para crear aplicaciones interactivas o. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Veamos un esquema para comprender mejor la idea que hay detrás del uso de Ajax. Este esquema lo iremos comentando y comprendiendo a medida que avancemos en la explicación.

Con Ajax, se hace posible realizar peticiones al servidor y obtener respuesta de este en segundo plano (sin necesidad de recargar la página web completa) y usar esos datos para, a través de JavaScript, modificar los contenidos de la página creando efectos dinámicos y rápidos.

En el esquema anterior vemos las ideas en torno a Ajax de forma gráfica. En la parte superior hemos representado lo que sería un esquema de comunicación tradicional: el cliente solicita una página web completa al servidor. El servidor recibe la petición, se toma su tiempo para preparar la respuesta y la envía. El resultado, una pequeña demora debido al tiempo que tarda en llegar la petición al servidor, el tiempo que éste tarda en preparar la respuesta, y el tiempo que tarda en llegar la respuesta más recargarse en el navegador.

En la parte inferior vemos lo que sería un esquema de comunicación usando Ajax: el cliente tiene una página web cargada (puede ser una página web completa, o sólo el esqueleto de una página web). El cliente sigue trabajando y en segundo plano (de ahí que hayamos dibujado con líneas punteadas las comunicaciones) le dice al servidor que le envíe un paquete de datos que le hacen falta. El servidor procesa la petición. Ahora la respuesta es mucho más rápida: no tiene que elaborar una página web completa, sino sólo preparar un paquete de datos. Por tanto el tiempo de respuesta es más rápido. El servidor envía el paquete de datos al cliente y el cliente los usa para cambiar los contenidos que se estaban mostrando en la página web.

Read More

Ejemplos

El ejercicio consiste en ver un breve ejemplo de uso de Ajax para realizar sugerencias de búsqueda (algo parecido a lo que hacen los buscadores cuando muestran sugerencias una vez hemos empezado a introducir una palabra).

Si deseas desarrollar este ejercicio, para desarrollarlo necesitas tener conocimientos básicos de PHP y disponer de un servidor (puede ser un servidor remoto o un servidor local como WAMP ó XAMPP o similar). Empecemos...

Escribe este código y guárdalo en el servidor con el nombre de archivo pruebaAjax.html:

Si desea copiarlo directamente haga clic aquí

Escribe este código y guárdalo en el servidor con el nombre de archivo listadoDatos.php:

Si desea copiarlo directamente haga clic aquí

Read More

Ventajas y Desventajas

Ventajas

• ·         Rapidez en las operaciones.
• ·         Menos carga del servidor (menos transferencia de datos cliente/servidor).
• ·         Menos ancho de banda.
• ·         Soportada por la mayoría de navegadores.
• ·         Interactividad (El usuario no tiene que esperar hasta que llegen los datos del servidor).
• ·         Portabilidad
• ·         Usabilidad
• ·         Velocidad (Debido a que no hay que recargar la página nuevamente)

Desventajas

• ·         Se pierde el concepto de “volver a la página anterior”.
• ·         Problemas con navegadores antiguos.
• ·         No funciona si el usuario tiene desactivado el Javascript en su navegador.
• ·         Se requieren conocimiento sobre las tecnologías que forman AJAX.
• ·         Problemas SEO, los buscadores no indexan la información recibida vía AJAX.

Read More