AJRA

Cine + series + actualidad tecnologica = #CulturaFreak

Categoría: DESARROLLO WEB (Página 1 de 2)

WordPress se actualiza a la version 4.8

Los chicos de Automattic han actualizado WordPress a la version 4.8 y estas son las novedades que incorpora.

Leer más

Error-404

Que es un Error 404 y como deberíamos personalizarlo

El error 404 se le muestra al usuario cuando el navegador ha contactado correctamente con nuestra web, pero no ha sido capaz de encontrar el contenido que se pide.

Esto suele pasar cuando una página ha sido renombrada o borrada.

Cuando esto sucede el navegador muestra una imagen con el código 404 y la frase NOT FOUND.

Aunque esto se puede personalizar y es lo que veremos en este artículo.

La primero es intentar evitar que esto suceda, para ello podemos usar las herramientas de Google Search Console (el antiguo Webmaster Tools), la cual nos muestra todos los errores 404 que hay en nuestra web.

Pero en ocasiones no depende de nosotros, puede que alguien nos haya enlazado con una dirección incorrecta y no podemos hacer nada… o casi, porque lo que si podemos hacer es personalizar nuestra página de error 404.

¿Y QUE PONEMOS EN NUESTRA PÁGINA DE ERROR 404?

Lo primero es indicar al usuario que lo que está buscando no existe, dile la verdad, que ha sucedido un error inesperado, pero ayúdale a encontrar lo que busca o por lo menos dale otra oportunidad, nunca hay que dejar al usuario “atrapado” y sin salida en una página de error 404.

Sobra decir que hay que personalizar la página con tus propio branding y logo.

Tambien es imprescindible poner un campo de búsqueda en la página de error 404, para darle la oportunidad al usuario de buscar dentro de nuestra web lo que estaba tratando de encontrar desde fuera.

Otra recomendación es la de incluir un listado de tus artículos destacados, más visitados o más comentados. De esta forma, si el usuario ha llegado por “error”, por lo menos que vea lo mejor de tu web.

Estos son solo algunas de las recomendaciones sobre como personalizar la página 404 de tu website, pero si necesitas mas ayuda con ella o deseas que desde @CUBODEKUBRICK te ayudemos con ella, tan solo tienes que ponerte en contacto con nosotros usando este formulario.

Sublime-Text

Sublime Text

En este artículo quería hablaros de una de las herramientas que más uso en mi dia a dia.

Se trata de Sublime Text.

Sublime-Text

Sublime Text es posiblemente uno de los mejores y más flexibles editores de código que puedes encontrar a día de hoy y además se trata de una aplicación multiplataforma, por lo que no tienes excusa para utilizarlo desde Windows, GNU/Linux o macOS.

 

Puedes descargar su última versión desde aquí – Sublime Text 3.

 


 

En este primer artículo vamos  hacer un breve repaso a las características básicas que trae Sublime Text y en próximos artículos ya os contaremos más trucos, plugins o modificaciones que hacer para adaptar el editor a nuestro gusto.

 

PESTAÑAS.

Ahora ya estamos acostumbrado a que los navegadores funcionen con pestañas en lugar de con ventanas, pues este editor también permite trabajar con diferentes archivos abiertos en pestañas, lo cual es más comodo y ágil.

Sublime Text

 

RESALTADO DE SINTAXIS.

Sublime Text incorpora resaltado a color de sintaxis, lo que facilita la lectura del código, además de enumerar cada una de las líneas.

 

AUTOCOMPLETADO.

Esta es quizás una de las mejores cosas que tiene Sublime Text, el autocompletado.

Esta característica nos ayudará a recordar cómo se escriben ciertos comandos o funciones.

Sublime Text

 

SELECCIONES Y EDICIONES MÚLTIPLES.

Otra de las características que hacen grande a Sublime Text y que ahorran mucho tiempo, si seleccionamos una palabra, comando, código, color o lo que sea y apretamos CRTL+D se seleccionará la siguiente coincidencia pudiendo así modificarlas todas al mismo tiempo.

Sublime Text

 

AUTOCERRADO DE ETIQUETAS.

Con la simple combinación de teclas “ALT + .” nos podremos olvidar de cerrar etiquetas en HTML a qué Sublime Text se ocupará el solo de hacerlo.

 

SALTAR A UNA LÍNEA.

En ocasiones los programadores tenemos que trabajar en archivos con miles de líneas, y por más que nos digan que el error está en la línea X es lento llegar a dar con ella.

Pero con Sublime Text se acabó ese problema ya que con la combinación “CTRL+G” podremos introducir la línea en la que queremos situarnos.

 

CODE-FOLDING.

Más características interesantes, en este caso es la posibilidad de plegar o desplegar bloques de código, para así centrarnos solo en la parte que nos interesa en ese momento.

 

BÚSQUEDAS.

Esta es una de las características más básicas de cualquier editor de código, pero no esta de mas recordarla.

Al igual que en la mayoría de los programas con un simple “CTRL+F” podremos buscar cualquier coincidencia durante todo el archivo.

 

PLUGINS.

Y por si todas estas características no bastasen para decir que Sublime Text es uno de los mejores editores de código que podemos encontrar, tambien tenemos el “Package Control”.

El Package Control viene a ser un repositorio de plugins, como una App Store en la que podremos encontrar cientos de plugins que aportaran diferentes funcionalidades a nuestro ya de por sí genial editor.

 

ESQUEMA DE COLORES.

Y por ultimo (para no hacer mas largo este articulo) hay que destacar que el programa incorpora un gestor de temas, que nos permite personalizar la apariencia y colores de Sublime Text.

 

Por defecto el programa viene con unos 10 temas preinstalados, pero existe la posibilidad de descargar e instalar mas temas de paginas como ColorSublime (http://colorsublime.com), donde podremos navegar entre miles de temas y escoger el que mejor se adapte a nuestras necesidades.

 

Personalmente yo uso el tema “Monokai Contrast

 


 

Esto es todo por hoy, y creo que es más que suficiente para darle una oportunidad al que posiblemente sea el mejor editor de código que puedes encontrar en la actualidad.

 

Durante los proximos dias escribire una pequeña guia sobre la configuracion basica de Sublime Text, una serie de breves tips que harán que este editor se adapte aún más a vuestra dia a dia.

¿Como hacer una captura de pantalla de toda una web?

En ocasiones, cuando estoy diseñando una página web para un cliente, este me pide que le envie una captura de pantalla de como esta quedando, y ahí viene el problema, hacer una captura de pantalla es algo muy sencillo ¿pero que pasa cuando nuestra página se sale del Above the Fold?

Bueno, como esto es algo que ya me ha pasado muchas veces y muchos de vosotros me ha pedido como solucionarlo he investigado posibles soluciones y aquí os enseño cual es la que mejor me ha funcionado.

FULL PAGE SCREEN CAPTURE

De entre todas las posibles soluciones que he probado la que más me gustó es Full Page Screen Capture, una extensión de Google Chrome que nos instalará un botón en la barra de herramientas que al presionarlo nos creará una captura completa de la página web en la que estés incluyendo lo que hay below the fold.

Full Page Screen Capture

Más sencillo imposible.

La extensión es increíblemente ligera, sencilla de utilizar y completamente gratuita, así que no dudéis en descargar la extensión, instalarla en vuestro navegador y ponerla a prueba.

DESCARGAR

Cómo optimizar las imágenes antes de subirlas a tu web

En este articulo os voy a hablar sobre la importancia de optimizar las imágenes correctamente antes de subirlas a tu pagina web.

Optimizar las imagenes

¿Y porqué es tan importante optimizar las imágenes?

La optimización de las imágenes de nuestra web es importante por varios motivos:

 

• Hoy en día casi el 50% de visitas a una web provienen de un dispositivo móvil y hay que pensar que la mayoría de conexiones 3G o 4G no son tan rápidas como desearíamos, por eso optimizando nuestras imágenes reduciremos considerablemente el tiempo de carga de nuestra web en dispositivos móviles. (Y de paso haremos que nuestros visitantes gasten menos en su tarifa de datos).

 

• Posicionamiento SEO: Haciendo un buen uso de las imágenes podemos aumentar el tráfico de nuestra web, nuestra imagen ya no sólo aparecerá en la búsqueda por imágenes se Google, y ahora también puede aparecer en la búsqueda universal, así que deberemos realizar una revisión del SEO de nuestras imágenes como el atributo ALT, el nombre del archivo, los datos EXIF, el peso y tamaño, etc… (en breve escribiré un artículo sobre el SEO para imágenes).

 


 

 

OK, ahora tenemos claro que hay que optimizar las imágenes antes de subirlas a la web pero ¿Como optimizar las imágenes?

 

La primera opción es la más común, usar Photoshop.

 

Abrimos la imagen en cuestión y usamos la opción “Guardar para web…

 

Pero este método tiene varias pegas, no todo el mundo tiene Photoshop instalado y no todo el mundo sabe usarlo.

 

Además Photoshop se ha convertido en un devorador de memoria RAM y es un programa demasiado pesado para realizar una tarea tan básica como la compresión y optimización de una imagen.

 

Así que, la segunda opción que yo os recomiendo usar Compressor.io.

 

Optimizar las imagenes

 

Se trata de una aplicación web con la capacidad de comprimir y optimizar imágenes llegando a reducir el tamaño de una imagen hasta el 90%.

Compressor.io soporta cuatro tipos de archivo:

  • JPEG
  • GIF
  • PNG
  • SVG

 

Las imágenes las podemos subir de dos modos diferentes; haciendo uso del cargador de imágenes o usando el “arrastrar y soltar” que lo hace todo más cómodo.

Una vez subida la imagen que deseamos optimizar tendremos la opción de seleccionar la compresión sin perdida de calidad o la compresión máxima con una ligera perdida de calidad.

Sea cual sea la que seleccionemos veremos en tiempo real la compresión realizada y una comparativa de la imagen real y la imagen resultante.

Otra de las características de Compressor.io es que después de realizar la compresión nos da la posibilidad de descargar la imagen o de guardarla directamente en nuestra cuenta de Dropbox o de Google Drive.

 


 

Ahora ya sabes como rebajar el peso de las imágenes de tu web, así que piensa en tus usuarios, piensa en sus tarifas de datos, en los tiempos de carga de tu web y en el posicionamiento SEO de cara a Google.

 

Y como es costumbre acabo este artículo recordando que en caso de que necesites ayuda con tu web puedes ponerte en contacto conmigo haciendo uso del formulario de contacto e intentare ayudarte en todo lo posible.

WordPress 4.4

WordPress 4.4 y sus novedades

Desde hace un par de días esta disponible para descargar la nueva actualización oficial de WordPress.org: WordPress 4.4 Clifford.

Desde este artículo vamos a hacer un breve repaso a las novedades más importantes que incorpora este popular CMS, y digo popular porque WordPress no para de crecer, hasta el punto que a día de hoy 1 de cada 4 webs que hay en Internet ya esta desarrollada sobre WordPress.

WordPress 4.4

¿Qué novedades trae WordPress 4.4?

La principal novedad que nos presentan los chicos de Automattic tiene que ver con el tema predeterminado que traera este WordPress 4.4.

Como viene siendo habitual WordPress nos presenta el que sera el tema predeterminado para el año 2016, el tema que se llamara Twenty Sixteen.

WordPress Twenty Sixteen

Se trata de un tema totalmente orientado para el uso como blog y muy optimizado tanto en tiempos de carga como en repuesta en diferentes tamaños de pantalla volviendose todavía más responsive ya que una de las principales novedades que tiene es que las imágenes publicadas también se ajustaran automáticamente a diferentes formatos de pantalla. WordPress 4.4 Responsive

Otra de las novedades que incluye WordPress 4.4 es la posibilidad de incrustar vistas previas de otros posts o webs. Algo similar a lo que ocurre en Twitter o Facebook, basta con pegar la URL de un post y de inmediato se desplegara una tarjeta informativa que incluye el título, extracto, enlace al blog y cantidad de comentarios de dicho artículo. 

El resto de novedades no son tan llamativas, como nuevos iconos y colores para destacar categorías, la incorporación de la REST API, nuevas funciones para llamar contenidos específicos o mejoras en el cacheo de comentarios e interacciones más intuitivas con objetos particulares.

Os dejo con un video promocional de WordPress 4.4 donde se muestran sus novedades, para que le deis un vistazo y así entendáis mejor todas sus novedades.

https://videopress.com/v/J44FHXvg

Estas son las principales novedades que trae WordPress 4.4 y recordad que si necesitais ayuda para actualizarlo o crear vuestro blog con WordPress podeis contactar conmigo y os ayudare en todo lo posible.

Desarrollo Web

La historia del desarrollo web (con GIFs animados).

Hoy vamos a hacer un repaso por la historia del desarrollo web
Y lo vamos a hacer acompañando la explicación con una serie de GIFs animados que nos ayudarán a entender la evolución.

Los inicios del desarrollo web (1989)

Los primeros años de internet fueron años de aprendizaje, nadie sabia muy bien como funcionaba Internet ni hacia donde iba a evolucionar la cosa.

Esa fue la época de comenzar a experimentar con el código.
Creo que todos probamos a programar alguna vez un ‘Hello World!’

Evolucion-Desarrollo-Web-01

El uso de las tablas (1993)

Con la llegada de Frontpage y Dreamweaver (entre otros) pusieron de moda el uso de las tablas para desarrollar y diseñar las paginas webs.

Aunque a día de hoy aun se pueden encontrar algunas webs que basan sus diseños en tablas, es algo que ya ha quedado en desuso.

Evolucion-Desarrollo-Web-02

La llegada del Javascript (1995)

El código HTML se amplio con la llegada del Javascript, y con ello llegaron los odiosos Pop-up que tanto nos fastidiaron a mediados de los 90.

Evolucion-Desarrollo-Web-03

Ahora se puede hacer (casi) todo lo que hacia Javascript usando CSS.

Flash (1996)

Llegan las odiosas animaciones en Flash (confieso que yo también diseñe web en Flash), una época en que todas las webs tenían barras de carga y estaban cargadas de intros y elementos animados.

Evolucion-Desarrollo-Web-04

Luego llego Apple y ‘mato’ a las webs diseñadas en Flash.

CSS (1999)

Uno de los cambios mas importantes de internet, el momento en el que se separan el desarrollo web y el diseño web.

Con el código HTML desarrollamos la estructura de la web y con el CSS le aplicamos un diseño.

Evolucion-Desarrollo-Web-05

Grids y Frameworks para móviles (2007)

En los 90 los desarrolladores web teníamos que lidiar con el problema de adaptar las webs a todos los navegadores posibles (Internet Explorer, Firefox, Chrome, Safari, Opera) y por si eso no fuese suficiente en los 2000 llegaron los dispositivos móviles y ahora nos toca adaptarlos a todas las pantallas posibles usando grids y frameworks para móviles.

Evolucion-Desarrollo-Web-06

Responsive Web (2010)

Con la llegada del Responsive design, aprendemos a adaptar el mismo contenido web a los diferentes tamaños de pantallas (Ordenadores, Smartphones, Tablets, etc…)

Evolucion-Desarrollo-Web-07

El mismo contenido adaptado a diferentes resoluciones.

Diseño Flat y Material Design (2014)

Esta evolución esta mas basada en el diseño que en el desarrollo, se trata de una tendencia en el diseño web conocida como el Material Design, un diseño simplista, plano y mucho mas enfocado en el contenido web.

Evolucion-Desarrollo-Web-08

Ya sabemos que en internet el contenido es el Rey.

 

¿Cómo medir la velocidad de mi web?

Dependiendo del proyecto tu página web deberá tener un diseño más elegante y sencillo, o más llamativo y divertido, pero lo que siempre es igual en todos los proyectos es que la web debe ser ligera y cargar rápidamente.

Estamos en 2015 y a los usuarios no les gusta tener que esperar a que una página web se acabe de cargar para poder leer un artículo o ver una imagen, así que debemos centrarnos en conseguir que nuestra página sea lo más ligera posible.

En este artículo no os voy a explicar cómo hacer más ligera vuestra página más ligera, lo que voy a hacer es explicaros como comprobar la velocidad de carga que tiene vuestra web, así vosotros mismo podréis decidir si necesitáis rehacer la página o realizar algunas mejoras en el código fuente para que cargue más rápido.

¿Cómo medir la velocidad de mi web?

Para medir la velocidad de carga de nuestra web tenemos muchas herramientas, pero la que yo suelo utilizar y os recomiendo a todos es PageSpeed, una aplicación de Google creada específicamente para que los desarrolladores puedan comprobar que la pagina este correctamente optimizada y que los tiempos de carga no son excesivos.

PageSpeed para medir la velocidad de mi web

Google PageSpeed Insight es una herramienta de código abierto y totalmente gratuita (como la mayoría de servicios de Google) que te ayudara a optimizar el rendimiento de tu sitio web.

La podéis encontrar en la URL http://developers.google.com/speed/pagespeed/insights/.

La herramienta es muy fácil de utilizar, tan solo tenéis que introducir la dirección de vuestra página web y pulsar Intro.
PageSpeed os mostrara una pantalla con varios valores:
• El tiempo de carga de vuestra página web en Ordenadores.
• El tiempo de carga de vuestra página web en Smartphones.
• Puntuación en Experiencia de Usuario.

PageSpeed Insight analiza diferentes aspectos de tu sitio web como la configuración del servidor, la estructura HTML, optimización de las imágenes, JavaScript o el CSS, y os devolverá una puntuación que va de “0” (el más bajo) a “100” (el más alto).

Como curiosidad he pasado el PageSpeed a mi web y he obtenido un 92/100 en velocidad web y un 100/100 en Experiencia de Usuario.

¿Cuál es tu puntuación?
Y recuerda, si necesitas ayuda para hacer tu página web o para mejorar el rendimiento y la experiencia de usuario puedes contactar conmigo y veremos cómo puedo ayudarte.

Mobile Friendly

¿Que es el “Google Mobile Friendly”?

Hoy vengo a hablaros de un tema importante para vuestras webs, y es algo que muchos clientes han estado preguntándome estos días.

¿Porque desde hace unos días he perdido la mitad de visitas diarias en mi web?

Mobile Friendly

Bien, pues eso es debido a los cambios que realizó Google en su algoritmo el pasado 21 de Abril.

Google implementó la variable “Mobile Friendly“, que determina si tu web está correctamente adaptada para ser mostrada en un dispositivo móvil.

Si esta adaptada no hay problema, pero en el caso de que no este adaptada tu web no se mostrará en las búsquedas de Google que se realicen desde móviles.

Por mucho que tu contenido sea relevante, o incluso que busquen directamente tu nombre… Si la web no está adaptada para móviles no aparecerá en una búsqueda desde móvil.

Puede parecer que no, pero el cambio es importante, basta ir a los informes de Analytics y comprobar cuantas de nuestras visitas provienen de dispositivos móviles. (En mi caso el 54% de las visitas provienen desde móviles).

¿Como puedo comprobar si mi web está adaptada para móviles?

Fácil, Google tiene una página en la que podemos insertar nuestra URL y ellos se encargan de comprobar si nuestra web está adaptada o no para dispositivos móviles.

Basta con visitar este enlace.

Mi web no está adaptada.
¿Como puedo adaptar mi web para que sea Mobile Friendly?

Si tu web está creada sobre WordPress (Cómo debería ser 😜) estas de suerte, tienes varias soluciones y a cual más fácil.

  1. Actualizar tu theme a uno que sea responsive.
  2. Utilizar el plugin Jetpack.
  3. Utilizar el plugin WPTouch.

Si por el contrario tu web no utiliza WordPress y esta hecha “a mano” deberás adaptarla modificando código.
(Uno de los inconvenientes de no usar WordPress).

Si estás un poco perdido y necesitas ayuda para adaptar tu web no dudes en consultarme usando mi formulario de contacto.

¿Que es una Landing Page?

En el artículo de hoy, volvemos a hablar de un término relacionado con el Marketing Digital.

Hoy quiero explicar que es una Landing Page.

Landing Page

Una Landing Page es una de las mejores herramientas con las que cuenta una página web a la hora de conseguir conversiones.

Sí traducimos literalmente Landing Page al castellano nos encontramos con “Página de Aterrizaje” y es que se trata de la página a la que el usuario llega (aterriza) después de hacer click en algún enlace, banner, campana de Email Marketing, o cualquier otro tipo de promoción.

Las Landing Page son diferentes al resto de páginas de una web (o al menos deberían serlo), ya que estas páginas responden a un único propósito, lograr conversiones:

  • Lograr que el usuario compre nuestro producto.
  • Que se registre en nuestra base de datos.
  • Que comparta nuestro contenido.
  • Que se descargue algún tipo de archivo.
  • Etc…

¿Y porque digo que la Landing Page debería ser diferente al resto de páginas de nuestra web?

Pues porque el resto de páginas de nuestra web suelen tener demasiada información que no ayuda a tener conversiones, la cabecera, pie de página, menús de navegación o sidebars incluyen demasiadas opciones que pueden distraer la atención de los clientes y hacer que acaben saliendo de la Landing Page sin realizar nuestro objetivo.

¿Que debería incluir una Landing Page?

Cómo siempre le digo a mis clientes, DEPENDE.
Cada caso es diferente, y depende del objetivo de tu web.

Pero hay un par de cosas que todas las Landing Page deberían incluir:

  1. Logotipo de tu empresa.
  2. Información sobre la oferta/producto generalmente en formato de lista o bullet points. (Recuerda menos es mas, cuanto más breve y directo mejor).
  3. Link o formulario que realicen la conversión.
  4. Toda Landing Page debe contar con un Call to Action bien llamativo, que capte la atención del usuario.
  5. Toda información importante (incluido el Call to Action) debería estar en el Above de Fold, reduciendo así el uso del scroll.

Aquí os dejo un ejemplo de lo que sería una Landing Page perfecta.

Ejemplo Landing Page

Cómo ves tiene un título llamativo, una imagen atractiva, un número breve de características, un formulario con un número reducido de campos y un Call to Action que se ve desde lejos.

Estos son solo algunos consejos aprendidos de mi experiencia con diversos clientes, pero como os he dicho al principio del artículo todo depende de cada caso y puede que lo que me funciona a mi no os funcione a vosotros.

Así que lo mejor es que hagáis un Test A/B en el que probar con diferentes títulos, contenidos, Call to Actions y probad cambiando las posiciones de los botones o imágenes.

Solo así podréis analizar los datos y ver que opciones funcionan mejor en vuestra Landing Page.

En el caso de necesitar una Landing Page puedes ponerte en contacto conmigo, estudiaremos tu caso e intentaremos dar con el producto idóneo.

Página 1 de 2

Creado con WordPress & Tema de Anders Norén