Asociación Europea de Economía y Competitividad (AEDEEC)

Asociación Europea de Economía y Competitividad (AEDEEC)

La Asociación Europea de Economía y Competitividad (AEDEEC) ha premiado a WebReunidos desarrollo y diseño S.L. con La Medalla de Oro al Mérito en el Trabajo, en reconocimiento a su trayectoria profesional en el sector del diseño de páginas web, marketing online y posicionamiento Web.

La ceremonia de imposición de medallas tuvo lugar, en una Cena de Gala celebrada en el Hotel NH Collection Eurobuilding de Madrid.

Una de las mejores empresas de diseño web en España

El presente galardón reconoce a WebReunidos como una de las mejores empresas de diseño web en España. El premio concedido supone un reconocimietno especial a la gestión realizada.

WebReunidos es una empresa que apuesta por la calidad del trabajo así como de la formación integral de sus componentes.

Las fundadoras de la empresa, reciben premio

Medalla de Oro al Mérito en el Trabajo

La AEDEEC reconoce con dicho galardón ‘el éxito de las empresas con una trayectoria ejemplar a nivel nacional y/o europeo y que realizan prácticas e iniciativas que apoyan el espíritu y conciencia empresarial. Además de la concesión del galardón, la asociación hace entrega de un certificado y un sello de calidad que refleja la ética, profesionalidad y resultados de la empresa.’

El solemne evento fue conducido por la periodista Ana García Lozano y el galardón fue impuesto por el Vicepresidente de la Asociación D. José Luis Barceló Mezquita (El Mundo Financiero).

Además, dio la coincidencia de que este año ha sido nombrado como Consejero de Honor de la Asociación Europea de Economía y Competitividad a D. Kike Sarasola, por su brillante trayectoria como Empresario y Fundador de la cadena hotelera Room-Mate Hoteles.

Incluimos a continuación palabras de agradecimiento de WebReunidosUna de las CEO durante la gala

“En primer lugar dar las gracias a la prestigiosa Asociación Europea de Economía y Competitiva por este galardón del que nos acaban de hacer entrega.

Para WebReunidos, como pequeña empresa que somos, nos honra este reconocimiento a la labor que venimos realizando desde que iniciamos este proyecto, y nos anima a seguir en esta línea.

Bajo nuestro lema ‘tu éxito, nuestro objetivo’, lo que pretendemos es que tanto empresas como profesionales que contratan nuestros servicios, tengan su mejor presencia en internet.

Porque entendemos, que la mejor tarjeta de presentación de una empresa, y más hoy en día, es su marca digital, su posición en internet a través de su web  o redes sociales.

Estamos en la era de las tecnologías, en la era de Internet, en donde si no estás no existes. Por ello, creemos que es muy importante tener de una página web dinámica, accesible, posicionada y con un diseño atractivo. Ese es nuestro trabajo, a lo que nos dedicamos con empeño y tesón.

Y ya, por último, y no por ello menos importante, agradecer a nuestro personal  y colaboradores su profesionalidad, dedicación y entrega en el desarrollo de sus tareas y proyectos. Y, sobre todo, a nuestros clientes por la confianza depositada en nosotros a lo largo de este tiempo.

Muchas gracias.”

Mª Carmen Hernández – Belén Recuero

Socias Fundadoras WebReunidos S.L.

Certificado AEDEEC

Cómo hacer una página web popular

Cómo hacer una página web popular

Muchas son las preguntas y dudas que surgen cuando un emprendedor decide tener presencia en internet. Por supuesto lo primero que piensa es: ‘necesito una página web’. Pero, ¿cómo hacer una página web popular?, ¿qué tiene que tener un sitio web para ser exitoso?

Vamos a dar respuesta de forma muy concisa a esta pregunta. Nos vamos a apoyar en 5 factores como pilares principales de una buena web.

Cómo hacer una web popular

5 Factores para una página web exitosa

SEO

Lo situamos en primer lugar, ya que en internet como ya es popularmente conocido, ‘si no apareces no existes‘. Y hoy por hoy, la existencia pasa por aparecer en los primeros puestos de Google. Si bien es imposible tener todo el proyecto en las primeras posiciones, por lo menos tenemos que tener algunas páginas.

Así que es importante encontrar a un desarrollador que programe desde la estructura pensando en posicionamiento SEO. Así es como se ahorrarán esfuerzos y costes en el futuro.

Como base del posicionamiento web hay que tener muy claro que lo primero que tiene que dar una respuesta optima es el alojamiento web o hosting.

Responsive Web Design (RWD)

Al igual que se busca presencia en los resultados de Google, es deseable llegar al máximo público. Cada vez más los internautas usan distintos dispositivos móviles.

Un diseño web optimizado debe responder a las exigencias de cada dispositivo además de evolucionar la adaptación a las futuras demandas.

Es muy importante elegir un sistema que facilite la evolución según avanza la tecnología.Web exitosa. Imagen

Accesibilidad

Al igual que en SEO es recomendable que tanto desarrollador como diseñador tengan amplios conocimientos en accesibilidad. Al igual que queremos tener presencia en buscadores y que nuestra web se muestre en dispositivos móviles, es imprescindible llegar a todo el público y ahí es donde tenemos que prestar atención a la accesiblidad.

Como ya hemos dicho en otras ocasiones, una web accesible tiene unos tiempos de carga muy buenos y su estructura a nivel lógico y de información va a ser impecable.

Es deseable que una web cumpla con los requisitos de accesibilidad AA.

Usabilidad

La usabilidad tiene que ser tenida en cuenta como parte de la experiencia que el usuario va  tener a la hora de visitar una página web.

Se tiene que facilitar la navegación, tiempos de carga rápidos, llegar a la información rápidamente, para lo cual la profundidad de navegación tiene que ser muy reducida.

Aquí además el contenido juega un papel muy importante, al igual que en SEO, tiene que ser sencillo y práctico.

Atractivo

Por supuesto, por mucho que cumpla con los anteriores requisitos, una web tiene que ser atractiva. Como dice nuestro lema: ‘diseños que atraen’, una web construida con gusto y elegancia reportará tiempos de visita óptimos.

Aquí es donde es importante contar con la pericia y experiencia de un buen diseñador capaz de hacer una página web popular.

Herramienta AMP de Google

Herramienta AMP de Google

Se ha lanzado la herramienta AMP de Google con su actualización más novedosa desde el año 2016. Un gran empujón para la herramienta de pruebas de páginas en versión AMP (Acelerated Mobile Pages). El acceso sigue siendo en la url habitual para validar página AMP, también se pueden probar los resultados de búsqueda directamente.

Formulario de validación de la herramienta AMP de Google. Imagen

INDEXACIÓN DE PÁGINAS AMP

Tras la ejecución de una dirección URL en versión AMP en el formulario de la herramienta, se mostrarán los resultados. Lo mejor es que ahora se puede enviar la versión AMP directamente a la indexación de Google. Asegúrese antes de enviar que lógicamente todo está correcto. La vista previa de los resultados de búsqueda está disponible y nos da una visión real del resultado.

Resultados de validación AMP. Imagen

Ni que decir tiene que la herramienta AMP de Google, no solo está para analizar las urls propias. Así que si quieres espiar a la competencia y ver cómo es su código fuente, es una oportunidad muy buena.versión AMP. Imagen

Si estás interesado en implementar el sistema AMP en un blog, aquí te presentamos un tutorial muy sencillo de como instalar versión AMP en WordPress.

Mantenimiento web

Mantenimiento web

Mantenimiento web y su importancia

Cuando damos por finalizado el proceso de diseño y creación de un nuevo sitio web no debemos relajarnos porque en ese preciso momento comienza una nueva etapa que resulta crucial para el funcionamiento de tu web: el mantenimiento web. Cuando hablamos de mantenimiento web no solo hablamos del mantenimiento y actualización del contenido (texto, imágenes, vídeos, enlaces rotos, etc) sino que también hablamos del mantenimiento de código HTML o CSS.

Mantenimiento web, imagenMantenimiento código HTML, CSS

La revisión del correcto funcionamiento de tu página web pasa por analizar y controlar la parte de código, es un factor muy importante del que cuidan los webmasters. En algunas ocasiones, resulta necesario modificar alguna configuración a nivel de código, revisarlo y analizarlo para detectar problemas de seguridad e incluso configurar a nivel de servidor para mejorar algún aspecto interno, como puede ser el tiempo de carga. Además, revisar periódicamente el conjunto de archivos contenidos en tu página web y las bases de datos que lo conforman también resulta especialmente importante a la hora de detectar cualquier anomalía.

Actualización de plugins en WordPress

En el caso de las páginas web creadas a partir de la plataforma WordPress, la más popular en la actualidad, el mantenimiento web pasa necesariamente por la actualización de los plugins, plantillas y de la versión WordPress que se actualiza cada cierto tiempo. Este tipo de actualizaciones previenen brechas de seguridad y vulnerabilidades que pueden poner en peligro tu sitio web y, además, suelen incluir mejoras reales respecto de versiones anteriores. Algunos de los plugins que destacan sobre el resto y que resulta primordial mantener actualizados son aquellos que tienen como función mejorar el SEO de nuestros contenidos. Los más conocidos son SEO by Yoast y All in One SEO Pack.

Ventajas del mantenimiento de contenidos web

  • Puedes eliminar los enlaces rotos que resultan tan molestos para el lector.
  • Puedes mantener temas actualizados. Si escribiste sobre ellos en el pasado y se produce una novedad normativa o similar, lo actualizas y lo adaptas para que el posicionamiento se vea afectado y puedas atraer nuevas visitas hacia un artículo antiguo.
En definitiva, el mantenimiento de contenidos web es muy importante para mantener el posicionamiento web e incluso para mejorarlo ante determinadas novedades.

Mantenimiento web: las claves de su eficiencia

En definitiva, y resumiendo todos los temas tratados, un mantenimiento web de excelencia debe pasar necesariamente por el control y análisis estricto de la web. Para ello, es necesario:
  • Realizar copias de seguridad que nos servirán en el caso de que se produzca algún fallo. Es muy importante conservar todo el contenido web.
  • Actualizar y controlar todos los componentes de tu web: plugins y plantilla, sobre todo.
  • Analizar el funcionamiento general de la web: número de visitas, tiempo de carga, anormalidades en posicionamiento, etc.
  • Mantener actualizados los contenidos. Por ejemplo, si aparece una nueva normativa de la que has hablado anteriormente y se producen novedades respecto de lo que escribiste en su día no está de más incluirlo en tu artículo.
En este punto también es de vital importancia analizar los enlaces salientes para comprobar que no existan enlaces rotos a páginas web que ya no existen. Realizar un mantenimiento web de código y un mantenimiento web de contenidos es una tarea que todo webmaster debe implementar pero, a veces, por falta de conocimientos o experiencia, no se lleva a cabo y terminan apareciendo los primeros problemas. Si es tu caso, consulta con un especialista y déjate aconsejar para que tu página web no deje de funcionar correctamente en ningún momento.
Plugin AMP de WordPress, instalación y configuración de Google Analytics

Plugin AMP de WordPress, instalación y configuración de Google Analytics

Antes de comenzar con la instalación del plugin AMP de WordPress repasemos muy  brevemente qué es el proyecto AMP para páginas web.

Se trata de un desarrollo open source que ofrece una experiencia de navegación en móvil, rápida y eficaz, a groso modo podríamos explicar que dicha navegación se consigue cargando todos los elementos indispensables que necesita un contenido en la misma página (JavaScript, CSS, etc), puedes consultar toda la información detallada en la web oficial de Acelerated Mobile Pages.

La clave del proyecto reside en optimizar la velocidad de carga, todos sabemos que una página web que no se carga rápidamente es susceptible de que no se vea, algo que además afecta negativamente al posicionamiento SEO.

La idea inicial es aplicar este sistema a páginas del tipo noticias, por lo que las plataformas con formato blog son ideales.

Instalación del plugin AMP recomendado para WordPress

En la web oficial de WordPress encontrarás este fantástico plugin para convertir las entradas en páginas AMP.

plugin-amp-wordpress

Pasos para la instalación y configuración:

  1. Descargar el plugin y subirlo al directorio /wp-content/plugins/ o bien instalarlo directamente desde la zona de plugins del propio WordPress, el nombre a buscar sería: ‘Acelerated Mobile Pages’, dejar el plugin activado.
  2. Incluir dentro del archivo ‘.htacces ‘ y al principio, las siguientes líneas de código:

RewriteEngine On

RewriteCond %{REQUEST_URI} !/amp$ [NC]

RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]

RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ http://www.tu-url.xxx/$1/amp [L,R=302]

  1. Sustituir http://www.tu-url.xxx por la url donde está el proyecto.

Si bien la inclusión del código en .htaccess es opcional, por el momento, la experiencia nos dice que a Google le ayuda a detectar antes nuestras versiones de páginas en AMP.

La nueva url para páginas AMP será el enlace habitual del artículo con la terminación /amp/, por ejemplo:

URL para escritorio: https://webreunidos.es/mi-pagina-noticia

URL para versión AMP: https://webreunidos.es/mi-pagina-noticia/amp/

Como veis la instalación es muy simple, ahora queda esperar a que aparezcan en las búsquedas realizadas en dispositivos móviles.

¿Cómo configuro Google Analytics para el plugin AMP?

Google analytics. ImagenAunque sabemos que existen algunos plugins para implementar analytics en las páginas web de AMP, somos partidarios de evitar la instalación de plugins adicionales, con el fin de no retardar la ejecución y carga de páginas.

La buena noticia es que no necesitas instalar un plugin adicional, con el siguiente código incluido dentro del archivo function.php tendremos controlado el seguimiento de páginas y perfectamente enlazado con la cuenta de Google Analitycs.

Estos son los pasos:

  1. Evidentemente, si no tienes una cuenta de Google Analitycs, crea una y abre un espacio personalizado para tu proyecto en la versión AMP.
  2. Consigue el id de seguimiento y guárdalo para utilizarlo más adelante.

Ahora tendrás que ir a Google Api y crear una CLAVE API para incluirla dentro del script que se ejecutará en el function.php con el fin de que funcione correctamente la analítica de AMP.

Plugin AMP para WordPress. Imagen

Personalizar el archivo function.php para enlazar Google Analitycs con el plugin AMP

Normalmente en un proyecto que disponga de un plugin AMP, el webmaster deberá disponer de una analítica para la versión de escritorio y otra para la versión de AMP para móviles.

Es necesario diferenciar el seguimiento para páginas con el plugin AMP, con su id correspondiente, por esto en WordPress precisamos llegar al archivo function.php e incluir el siguiente código:

<?php

add_filter( ‘amp_post_template_analytics’, ‘xyz_amp_add_custom_analytics’ );

function xyz_amp_add_custom_analytics( $analytics ) {

if ( ! is_array( $analytics ) ) {

$analytics = array();

}

// https://developers.google.com/analytics/devguides/collection/amp-analytics/

$analytics[‘xyz-googleanalytics’] = array(

‘type’ => ‘googleanalytics’,

‘attributes’ => array(

// ‘data-credentials’ => ‘include’,

),

‘config_data’ => array(

‘vars’ => array(

‘account’ => «UA-XXXXXXX-2»

),

‘triggers’ => array(

‘trackPageview’ => array(

‘on’ => ‘visible’,

‘request’ => ‘pageview’,

),

),

),

);

// https://www.parsely.com/docs/integration/tracking/google-amp.html

$analytics[‘xyz-parsely’] = array(

‘type’ => ‘parsely’,

‘attributes’ => array(),

‘config_data’ => array(

‘vars’ => array(

‘apikey’ => ‘XXXXXXXXXXXXXXXXXXXXXXXXXXX’,

)

),

);

return $analytics;

}

?>

Sustituiremos las cadenas de XX con su correspondiente id y APIKEY.

Si bien no se ha mencionado hasta ahora, lo ideal es que el function.php se encuentre dentro de un tema hijo, puedes encontrar más información en la web oficial de WordPress.

Hay otras maneras de instalar el plugin AMP de WordPress con Google Analytics, pero creemos que esta es la más simple por ahora.

YouTube responsive video

YouTube responsive video

Video YouTube

En este tutorial te enseñamos a incluir en tu web un video YouTube responsive, con el fin de que se vea correctamente en monitores de escritorio, tablets y dispositivos móviles.

Cada ve más, Google tiene más en cuenta las páginas web que tienen una versión móvil correcta y por lo tanto están siendo premiadas.

Una de las complicaciones con las que un diseñador web se puede encontrar está en cómo adaptar un vídeo de YouTube para que se visualice correctamente en todos los dispositivos. En este tutorial, no vamos a crear una versión móvil sino que vamos de una manera muy sencilla a explicar cómo se puede adaptar un vídeo para que sea líquido, y por lo tanto se ajuste correctamente a cualquier tamaño.

Como todos sabemos la inclusión del vídeo pasa por utilizar una etiqueta llamada <iframe>, que si bien no es buena para la accesibilidad, es necesaria para el funcionamiento de códigos externos, lo más normal es que no tengamos acceso al control de lo que se está ejecutando dentro de ese marco, sin embargo si tenemos la oportunidad de manejar las características de iframe.responsive web para youtube

Definición de etiquetas y CSS

Aunque no es obligatorio, sí es recomendable la inclusión de la etiqueta viewport con el fin de que se vea correctamente en dispositivos Tablet y móviles.

<meta name="viewport" content="width=device-width, user-scalable=no"> <!-- opcional -->

El código CSS para este ejemplo es muy simple

<style>

#video {
	width: 100%;
	height:1%;
	min-height:380px;
	overflow:hidden;
	float:left;
    margin-bottom: 30px;
    margin-top: 7px;
}
#video iframe {
	width: 100%;
	min-height:360px;
}

</style>

Para el cuerpo de nuestro código solo nos queda tener la url del  vídeo que queremos incluir, luego cada uno maquetará a su gusto.

<body>

  <h1>YouTube responsive video: Demo</h1>
<div id="video"><iframe src="https://www.youtube.com/embed/ELDTyQj_UL4?autoplay=1" frameborder="0" allowfullscreen></iframe></div>
    <p>Tutorial desarrollado por: <a href="https://webreunidos.es" title="Diseño Web Madrid: WebReunidos" target="_self">WebReunidos</a></p>
</body>

Aquí tenéis una Demo de YouTube responsive video de cómo funciona este código tan simple.

Como siempre os dejo el código completo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no"> <!-- opcional -->
<title>Documento sin título</title>
<style>

#video {
	width: 100%;
	height:1%;
	min-height:380px;
	overflow:hidden;
	float:left;
    margin-bottom: 30px;
    margin-top: 7px;
}
#video iframe {
	width: 100%;
	min-height:360px;
}

</style>
</head>

<body>

  <h1>YouTube responsive video: Demo</h1>
<div id="video"><iframe src="https://www.youtube.com/embed/ELDTyQj_UL4?autoplay=1" frameborder="0" allowfullscreen></iframe></div>
    <p>Tutorial desarrollado por: <a href="https://webreunidos.es" title="Diseño Web Madrid: WebReunidos" target="_self">WebReunidos</a></p>
</body>
</html>

Creo que con este tutorial se ha demostrado que tener un YouTube responsive video es simple.