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 | May 1, 2015 | Diseño web, SEO, Usabilidad
USABILIDAD WEB: PAUTAS GENERALES
Dentro de la usabilidad web y como indicábamos anteriormente: qué es y para qué, cuando vayamos a diseñar y/o programar nuestra página web, debemos pensar fundamentalmente en la satisfacción de nuestros visitantes al lograr realizar lo que ellos desean hacer de forma fácil y sin gran esfuerzo en aprender a moverse por nuestra web.
Para conseguir lo indicado, es bueno seguir, tener en cuenta, una serie de pautas o consejos básicos sobre usabilidad:
- Debemos facilitar una la lectura rápida de los contenidos
Creo que este concepto lo veremos más claro si echamos un vistazo tanto a un periódico en formato papel como a uno en formato digital – El Mundo, El País, Europa Press -.
Como podemos comprobar, se nos ha facilitado la lectura con las siguientes técnicas:
a) Haciendo uso de los diferentes niveles de títulos -<h2>Sarkozy reúne a la cúpula de las fuerzas de seguridad tras las críticas a la investigación</h2>, así como del uso de párrafos <p>, listas <ul>, negrita <strong>, etc., se obtiene una visulización del contenido que falcilita su lectura rápida y al mismo tiempo su jerarquía.
b) Se ha procedido a agrupar bajo un mismo título cosas/elementos que están mutuamente relacionados.
En la noticia sobre el Masters 1000 de Miami se ha agrupado texto y foto -lectura rápida- así como los enlaces para ver más información sobre la noticia o ampliar información.
- Debemos hacer uso de las convenciones definidas
En las páginas web, así como en los periódicos, con el tiempo se han ido creando una serie de normas no escritas/convenciones que facilitan que el usuario, independientemente del periódico o web que visite, sepa moverse por la web y que es preciso tener en cuenta.
Estas son :
a) Los enlaces. Si lo convencional es que el texto de enlace a otros contenidos vaya subrrayado, con el paso del tiempo, ésta convención se ha modificado al hecho de que dicho subrrayado aparezca cuando se sitúa el puntero del ratón encima del texto enlace -a:hover-.
b) Barras de desplazamiento. Se desaconseja las barras de desplazamiento horizontal -más ahora que estamos pasando de las pantallas de 4:3 a las panorámicas de 16:9-. No es recomendable añadir barras de desplazamineto vertical. Se debe utlizar las que ya de por sí nos proporcionan los navegadores. Poner más barras, sólo puede confundir o crear ‘ruido’ en la página.
c) Marcos/Frame y barras. Dos son las razones que desaconsejan el uso tanto de marcos/frames como de sus barras de desplazamineto asociadas. Una, ya se ha indicado en el punto anterior, aparte de que con una lectura rápida lo más probable que esa nueva barra pase desapercibida; otra, el hecho de que cada día está más en desuso los frames por un uso más normalizado de los div -ni qué decir tiene cuando se implemente el HTML 5-.
No solo hay mantenerse al día con los estandares web, sino también con las normas, pautas o convenciones sobre uso de la usabilidad web.
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.
