por WebReunidos | Jul 9, 2016 | Accesibilidad, CSS, Desarrollo web, Diseño web, SEO
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.
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.
por WebReunidos | May 8, 2016 | Desarrollo web, Diseño web
Hoy en día, puesto que internet permite que todo el mundo desarrolle su profesión de la forma que considere más oportuna, estamos sujetos a una gran competitividad, lo cual es bueno… Salvo cuando quienes no tienen ni idea tratan de engañar a los clientes. Aquí vamos a señalarte cómo detectar el intrusismo en el desarrollo web… ¡Para que no te engañen!
Trucos para detectar el intrusismo en el desarrollo web
Aquí te dejo algunos trucos con los que podrás identificar fácilmente el intrusismo en el desarrollo web (que tiene como consecuencia un mal resultado en lo que el cliente demanda):
- Precios por debajo de la media del mercado: Esta es una característica común del intrusismo. Puesto que no pueden utilizar su marca como reclamo, porque la marca no tiene credibilidad, hacen uso de estrategias de precios agresivas, muy por debajo de la media, para atraer a incautos. Recuerda que lo barato sale caro.
- Formas de pago dudosas: En el caso de que no solo sean intrusos, sino que, además, sean estafadores, puede que te pidan el pago por adelantado (o, al menos, un porcentaje elevado del total), para luego dejarte sin la web que estabas comprando.
- Pide referencias: La mejor forma de saber si una marca o persona es de fiar, es preguntando y buscando en Google. Si Google te arroja quejas de usuarios que ya contrataron el servicio y no están satisfechos, busca a otra persona.
- Pide ejemplos de trabajos previos: Este es un punto sencillo pero importante. Pide al desarrollador web ejemplos de trabajos anteriores, de forma que puedas ver cuál es el resultado y que puedas ponerte en contacto con los dueños de dichas webs ya creadas. Nadie mejor que ellos para explicarte si el desarrollador web es de fiar y tiene calidad o no.
Esperamos que estos sencillos trucos para detectar el intrusismo en el desarrollo web te hayan sido de utilidad. Recuerda que ese intrusismo no solo nos afecta a los profesionales, sino que lo hace en mayor grado al cliente, que rara vez recibe lo que necesita.
por WebReunidos | Sep 27, 2015 | Desarrollo web, Diseño web, SEO
Si estás buscando hosting para tu proyecto y este tiene su principal público en España, seguramente te interese contratar un hosting en Madrid para dar servicio a toda España.
Entre muchos factores, el principal impulsor a efectos de posicionamiento está en tener una IP española, es decir la IP del servidor contratado tiene que estar en España.
Elegir un hosting en españa de calidad: Trucos para hacerlo
El mundo de internet se ha vuelto bastante complejo, y cada vez hay más empresas ofreciendo servicios de todo tipo para que desarrolles tus sitios web y tus proyectos. Entre las empresas que han proliferado, se encuentran las de hosting. En esta ocasión, te explicamos algunos trucos para elegir un hosting de calidad.
Cómo elegir un hosting de calidad
Aquí te dejo algunas preguntas que debes hacerte y que deberías comprobar antes de elegir un proveedor de hosting:
- ¿Qué velocidad de transferencia ofrece?: Este es uno de los puntos más importantes. Una buena velocidad de transferencia permite que la web responda más rápido ante la presión, lo cual significa que podrás sobrecargar ligeramente más tu web y podrás soportar mayor cantidad de usuarios.
- ¿Es compartido?: Importantísimo. Las webs noveles y recién creadas pueden funcionar en un servidor compartido, pero cuando empiezas a crecer, es inevitable que necesites un servidor para ti solo, sin riesgo de que lo que haga otra web te afecte negativamente a ti. Plantéate si tu sitio web va a necesitar un servicio personalizado.
- ¿Qué potencia ofrece?: La potencia que tenga un servidor es tan importante como la velocidad de transferencia, ya que es lo que te asegura que tenga una buena respuesta ante las más variadas situaciones. Si es un sitio web de un negocio serio y que va a tener bastante tráfico, necesitarás más potencia que si solo lo quieres para un blog sencillo.
- ¿Qué hay del servicio técnico?: Un punto a menudo olvidado pero que yo considero imprescindible. ¿El servicio técnico habla tu idioma? ¿Está disponible las 24 horas del día? Ese tipo de aspectos hay que preguntárselos antes de contratar un hosting, ya que no hay nada peor que tener la web caída y no recibir respuesta o ser incapaz de comunicarte con el servicio de atención al cliente porque habla otro idioma.
Es muy importante que el hosting responda a las necesidades del proyecto que se va a implementar, bien sea un desarrollo a medida, WordPress, plataforma ecommerce u cualquier otro.
Un hosting de calidad además de soportar diferentes proyectos debe ser escalable, es decir, tiene que atender la demanda de un proyecto desde su inicio con poca afluencia de público hasta conseguir gran número de visitas y evolución del código, atendiendo a las diferentes versiones de lenguajes y base de datos que van apareciendo con el tiempo..
Recomendaciones básicas para un alojamiento web profesional
Lo ideal dispones de tiempo y además la empresa de alojamiento da ese servicio, es tener un plan de pruebas durante un tiempo. En ese tiempo, entre otras cosas, comprobaremos como responde el servicio técnico a las demandas requeridas, como se ha dicho, este es un punto tan importante como la capacidad y potencia del hosting.
Una buena empresa de hosting tiene la posibilidad de ofrecer alojamiento administrado o no.
En el caso de un hosting no administrado vamos a tener que realizar las tareas de instalación de software al servidor, actualizaciones, acciones de seguridad y muchas otras operaciones propias de administración de sistemas, esto implica tener sólidos conocimientos y disponer del tiempo adecuado con el fin de tener un servicio sólido.
Una buena idea si no se dispone de tiempo es contratar un hosting administrado, si bien siempre es una opción más cara, pero de este modo evitaremos problemas de funcionamiento, emplearemos el tiempo que se dedica a sistemas a aplicarlo a nuestros desarrollos.
Otro de los requisitos que para seguridad de nuestros proyectos y tranquilidad debe reunir un hosting, es el servicio de backup o copias de seguridad durante todo el año, si bien son tareas que manualmente se pueden realizar o programar, es conveniente que el servidor contratado para el alojamiento lo realice de forma automática.
Como herramienta de ayuda al seguimiento y evolución de nuestros sitios web, el hosting debe de poseer una herramienta de informes de vistas que nos permita analizar qué resultado está teniendo cada proyecto, que accesos hay, tiempos de las visitas, estadísticas anuales, gráficos y mucho más.
Como verás, con estos trucos para elegir un hosting de calidad no tendrás ningún problema y tendrás la certeza de que has elegido aquel que mejor se adapta a tus necesidades. Al fin y al cabo, no todas personas necesitan exactamente lo mismo.
Aunque en este artículo se ha generalizado mucho, sin tener en cuenta si es un proyecto bajo licencia, tipo Micrososft o bajo licencia libre, tipo GNU, como norma general y dada la temática de nuestro blog, para un desarrollo web en PHP con MySQL o algún tipo de gestor de contenidos, WordPress, Drupal, etc., lo ideal y básico será un servidor Linux que soporte PHP y MySQL, con servicio backup y soporte 24×7.
Si buscas posicionar tu proyecto en todo el país, lo idóneo será un hosting en Madrid para España.
por WebReunidos | Mar 26, 2015 | Desarrollo web, Diseño web, SEO
WordPress como tienda online
El crecimiento del comercio electrónico ha sido evidente en la mayoría de países del mundo y esa evidencia ha repercutido en la aparición de multitud de tiendas online en la red, sobre todo en los últimos meses.
A simple vista, diseñar y crear una tienda online no parece tarea fácil para una persona que no disponga de los conocimientos técnicos necesarios para enfrentarse al código HTML. Sin embargo, gracias a la plataforma WordPress y al famoso plugin WooCommerce, las dificultades han disminuido en gran medida para los emprendedores que deciden lanzarse al mundo del comercio electrónico.
WordPress y WooCommerce: ¿de qué hablamos?
WordPress es un gestor de contenidos de código abierto muy popular por la gran cantidad de blogs personales y profesionales que integra. Pero no solo eso, un gran número de las páginas web que visitamos a diario están diseñadas a través de esta plataforma debido a la gran facilidad de uso y personalización que tiene. ¿Y por qué no decirlo? Un alto porcentaje de tiendas online también han sido creadas sobre WordPress, ya sea por medio de una plantilla responsive (adaptable a diferentes tamaños de pantalla) compatible con WooCommerce o por medio de un diseño personalizado creado por un programador o diseñador web.
Pues bien, WooCommerce es un plugin libre y gratis compatible con WordPress que sirve para convertir un sitio web en una tienda online. Ha sido tal su difusión en la red que cuenta con más de 400.000 instalaciones y con un gran número de plugins exclusivos creados para él que denominamos Addons.
Tal como ocurre con WordPress, WooCommerce es sencillo de manejar y altamente personalizable, pero lo cierto es que no es algo que puedas aprender a hacer de forma intuitiva. Antes necesitas tener ciertos conocimientos y por eso es habitual acudir a un diseñador o programador web que te dejará la tienda online a tu gusto invirtiendo más de la mitad del tiempo que tú emplearías en conseguir algo decente.
Tienda online en WordPress: ventajas y más ventajas
Las ventajas de elegir la plataforma WordPress a la hora de crear tu tienda online son numerosas. De hecho, ya hemos hablado sobre su facilidad de uso pero existen muchas más ventajas:
- Alto grado de personalización. Puedes elegir entre diferentes themes o plantillas, instalar diferentes plugins y funcionalidades y ordenar todo a tu gusto.
- Utilizar WordPress es gratis. Algunos plugins y plantillas son de pago pero si no quieres desembolsar ni un solo euro puedes diseñar un sitio web totalmente gratis.
- Diseño Responsive. La adaptabilidad de tu tienda online o sitio web a todo tipo de pantallas y dispositivos resulta fundamental en una actualidad en la que cada vez más crecen las ventas a través de tablets o smartphones.
- Posicionamiento web. Por medio de plugins como SEO by Yoast podrás controlar la visibilidad probable de los artículos de tu blog. Además, atraer al robot de Google responsable de realizar los rankings del principal buscador es relativamente fácil gracias a la instalación de un XML Sitemaps en tu plataforma WordPress. Obviamente, tener estos plugin instalados no garantizan que tu posicionamiento surja solo, sino que necesitas aplicar ciertas técnicas y conocimientos o contratar los de un profesional.
- Mantenimiento y actualización fácil. Editar páginas y artículos en WordPress es relativamente fácil. La cosa se complica cuando queremos cambiar ciertas funcionalidades de una tienda online o añadir/quitar nuevos productos. Lo más rápido siempre será contratar a un profesional que se encargue del mantenimiento de la tienda.
En definitiva, las ventajas de utilizar la plataforma WordPress para crear tu tienda online son numerosas y por eso es el gestor de contenidos más utilizado a nivel mundial. ¿Te atreves a utilizarlo?
por WebReunidos | Mar 13, 2015 | Desarrollo web, Diseño web, SEO, SEO - SEM
Cómo empezar una web
Una pregunta que es muy habitual cuando se quiere lanzar a internet un negocio es ¿qué necesito para mi página web?, bien esto es algo que tiene que definirse con mucho detenimiento ya que en gran medida definirá los pilares sobre los que se asienta nuestro proyecto.
Muchos son los pasos que hoy día hay que dar con el fin de tener una página de calidad y responda a la competitividad que hay en el mercado, si quieres más información sobre como tener un diseño web eficiente mira nuestro artículo sobre crear una web fácil y profesional.
Esta guía está orientada al principiante, que le llevará paso a paso por todo el proceso desde el principio, hablando en esta ocasión de cosas tan básicas como la obtención de un dominio o el alojamiento.
El nombre de dominio
Una buena forma para comenzar es definir el nombre de dominio adecuado. Este es el nombre que desea darle a su sitio web. Por ejemplo, el nombre de dominio del sitio web que estás leyendo es «webreunidos.es«. Para obtener un nombre de dominio, tienes que pagar una cuota anual a un registrador autorizado, con esto se tiene el derecho a utilizar ese nombre. Es importante definir un nombre que contenga la palabra clave de tu negocio.
El alojamiento web o hosting
Un proveedor de alojamiento web es, simplemente, una empresa que tiene muchos servidores conectados a Internet, dicha empresa debe de cuidar la capacidad de gestión de sus servidores, seguridad, velocidad, etc. Cuando publicas tus páginas web en sus equipos, todo el mundo tiene la posibilidad de acceder a esos servidores con el fin de visualizar la información.
Es muy recomendable si queremos ofrecer un servicio de calidad a los internautas, tener un alojamiento que no sufra caídas, es decir, que no se quede sin servicio, bien por un número de visitas elevado o por ataques de seguridad, y sobre todo que nos permita implementar cuantas necesidades precisemos.
El diseño de tus páginas web
Muchas son las cuestiones a tratar en este punto, y como es cierto que merece un capítulo aparte, le instamos a que lea los principios fundamentales del diseño web, donde encontrará los pasos a seguir para un desarrollo profesional.
Implementación y pruebas del sitio web
Es evidente que durante todo el proceso de creación, se van realizando numerosas pruebas, tanto a nivel de diseño como de funcionamiento, no obstante al finalizar hay que prestar una atención especial a este punto. Además siempre que sea posible observa como terceros trabajan con tu desarrollo con el fin de pulir deficiencias.
Estudia cómo se visualiza en los distintos navegadores y dispositivos móviles, este es un punto muy importante debido a que hoy día es imprescindible para SEO.
Alta en buscadores
Una vez tengamos el proyecto pulido y definido a las exigencias de ese momento, procederemos a darlo de alta en los principales buscadores, Goolge, Bing, Yahoo, etc.
Luego ya quedará a opción de cada uno el publicitarlo en redes sociales y como no, darle un mantenimiento durante toda la vida de la web con el fin de que sea un referente y esté presente en los primeros puestos de buscadores. Este es un buen principio para responder a qué necesito para mi página web.
por WebReunidos | Mar 4, 2015 | Arquitectura de la información, Desarrollo web, Diseño web
Crear una web fácil y profesional
Descubre cómo crear una web fácil y con un resultado profesional, te presentamos a modo de guía imprescindible para principiantes y también profesionales cualificados, una serie de pasos que deberías seguir para confeccionar una web de calidad.
Es normal que para los iniciados en el mundo del diseño y desarrollo web, a la hora de abordar sus primeros proyectos, surjan una serie de dudas, vamos a abordarlas según aparece la primera idea de un proyecto, hasta su optimización para SEO.
¿CÓMO ABORDAR EL PROYECTO O IDEA?
Una buena forma de comenzar es dividir la trayectoria del proyecto en cuatro fases:
- Investigación
- Diseño
- Desarrollo
- Optimización
La investigación es la fase más importante, conviene asentarla correctamente ya que nos permitirá diseñar y desarrollar con velocidad y precisión siempre que tengamos toda la información relevante. Es muy importante relacionarse correctamente con el tema que se está tratando, es decir, conocerlo muy bien.
Al igual que un actor que va a desempeñar el papel de un piloto, tendrá que pasar días, incluso meses en ambientes de aviación, etc., para un proyecto web tendremos que ‘mezclarnos’ lo máximo con el ambiente que rodea al proyecto, con esto tendremos una información de primera a la hora de enfocar el diseño y por supuesto la lógica de funcionamiento.
Al crear una web es muy fácil que empleemos de una semana a un mes, en la fase de investigación, dependiendo de la envergadura o complicación del proyecto web.
CREAR BOCETOS PARA LA WEB
Una vez estamos impregnados del papel que representará la nueva web, pasamos al fase de diseño de las distintas páginas, aquí cada uno según su pericia o experiencia, comenzará con bocetos a papel o directamente sobre un archivo en blanco, todo es correcto dentro del arte de la creación web.
En esta fase, se rellenan fragmentos con distintas tipografías, colores, imágenes e ilustraciones que se van escogiendo con el fin de encontrar la armonía más adecuada. La verdad es que lo ideal es no tener una presión de tiempo para la entrega, ya que la inspiración no es algo científico que se aplica en cualquier momento.
Una vez que hemos dado con la idea adecuada, la que tiene el potencial, se comienza a ensamblar un complejo puzle donde nada queda al azahar, es hora además de aplicar las técnicas de accesibilidad y usabilidad correspondientes.
DISEÑO WEB OPTIMIZADO
Como se suele decir, cuesta lo mismo hacer algo bien que mal, es más, hacerlo mal llevará más tiempo, y que cierto es, con este pensamiento quiero haceros llegar la idea de construir desde el principio con eficacia, en esta parte del diseño prestaremos mucha atención a la confección de las hojas de estilo CSS, lo ideal es que se construyan en cascada, puedes ayúdate de la guía de hojas de estilo CSS definitiva, de esta manera se consigue por un lado presentar la información correctamente y optimizar su velocidad de carga, lo que será sumamente beneficioso para el posicionamiento SEO.
Por otro lado, si estamos pensando en una versión para dispositivos móviles o adaptable, nos evitará muchos quebraderos de cabeza diseñarla desde el principio, de nuevo estamos sumando beneficios al posicionamiento SEO a través de la versión para móvil.
LÓGICA DE NEGOCIO
Si como decíamos anteriormente hemos desarrollado la fase de investigación y toma de requisitos correctamente, no deberíamos de tener muchos problemas a la hora de montar toda la estructura de bases de datos y toda la programación para su gestión que precise el proyecto.
Primero define qué sistema de base de datos es más adecuado al proyecto, según sea una web de consultas, una tienda online, etc., recomiendo que se dedique un poco te tiempo a este tema, aquí encontrarás información ampliada sobre cómo elegir la base de datos correcta.
Una vez tengamos diseñada la base de datos estaremos en condiciones de aplicar el leguaje de servidor apropiado, en este punto la recomendación va en caminada a desarrollar procesos por un lado seguros y por otro lado que sean lo más eficientes posibles, con el fin de que los consumos de ‘máquina’ o servidor sean bajos y la velocidad de ejecución alta.
SEO ON PAGE
Para nadie pasa desapercibido la importancia que tiene el SEO para las páginas web, este dependerá en gran medida de la experiencia y pericia de quien lo aplica. No nos vamos a detener en este punto, pues es tan extenso que requiere dedicación a parte, recomendamos pasar por los artículos de posicionamiento SEO donde encontrarás información muy útil y actual.
Una vez tengamos esos conocimientos sobre posicionamiento para la web, observamos que lo que tenemos que aplicar a priori en el desarrollo de un proyecto, son técnicas de SEO ON PAGE, bien pues esas técnicas se deben de aplicar desde el principio, a modo de ejemplo y como explicábamos anteriormente, el construir una hoja de estilos CSS correctamente contribuye a este tipo de posicionamiento.
TESTEOS Y PRUEBAS
En cuanto consigas la primera versión del proyecto, no dejes pasar más tiempo perfeccionando este sin antes realizar todas las pruebas que puedas, no solo tú o tu equipo, implica a otras personas que sean ajenas a la actividad, personal de otro departamento, amigos, etc., recoge todas sus opiniones, observa como navegan por tu web, que puntos tienen más incidencia, donde encuentran más problemas, etc. Esta es la mejor forma para ir optimizando el producto que se quiere conseguir para crear una web fácil y profesional.
