CONTACTO
Cel. 316 680 01 40
Tel. 571 - 704 39 58
Calle  173 No. 55 - 62

 

 

 

Tips para hacer una página web espectacular con arte responsive y efectos paralax, adaptable a móviles y tabletas

Todo lo que necesitas saber para que tu sitio web marque la diferencia con tendencias vanguardistas.

 

Menú de temas

 

Fundamentos del Efecto Parallax con diseño Responsive o arte Líquido.

Uno de los trendings en el desarrollo de páginas es el Efecto Parallax, con diseño Responsive o arte líquido, que se autoajusta a las pantallas de todos los dispositivos desde donde se accede, ya sea en posición vertical u horizontal. Si no lo conoces por su nombre aquí tienes unos ejemplos de páginas utilizándolo:

Dyservet.com
Hotel Los Puentes Comfacundi
Hotel Santuario de Fúquene Comfacundi

 

Construir un sitio así requiere trabajar toda la web alrededor de un concepto en el que se desenvuelva el efecto. Como podrás notar, todo gira alrededor del scroll que va haciendo el usuario sobre la página.

La palabra Parallax, como tal, nos da ya una descripción de lo que es el efecto, puede traducirse al español como alteración, y es que queda claro que la velocidad, el movimiento o la posición de los elementos se ve alterada para realizar el efecto.

Uno de los principios es que los elementos del fondo se mueven más lentamente que los de adelante, aplicar este sencillo principio ya le dará un efecto visual enorme a tu página.

Por otra parte, es interesante que también busques agregar sprites cuyo comportamiento dependa del scroll del usuario. Sin duda, cuando uno ve estas páginas, es común pensar que hay cientos de líneas de JavaScript detrás de esos proyectos, probablemente así sea, sin embargo si tú quieres un resultado sorprendente en tu sitio web, lo mejor es que te asesores bien en cuanto a tecnologías vanguardistas de desarrollo web y contrates una excelente empresa, como Dyservet.com.

 


Hoy en día es indispensable pensar en cómo vamos a llegar a los usuarios de dispositivos móviles. Las opciones disponibles en la actualidad son, o bien invertir en el diseño de páginas web responsive, o crear un sitio web diferente dirigido a los dispositivos móviles.

El diseño web responsive (RWD: RESPONSIVE WEB DESIGN), en términos simples, es la capacidad de la página web para responder automáticamente al tamaño de la pantalla del dispositivo desde el que se está navegando. Si bien puede parecer una opción abierta a discusión, esto no podría estar más lejos de la verdad. Es una verdad que el diseño web responsive es el pilar del diseño web del futuro. Es un proceso que aún está siendo desarrollado por las mejores empresas de desarrollo y afinado para ofrecer los mejores resultados. La metodología aún sigue evolucionando, a medida que el mercado de dispositivos móviles sigue en auge y en continua innovación.

En la actualidad, el diseño web responsive, es capaz de atender tamaños de pantalla específicos. En el futuro, será capaz de responder a cualquier dispositivo de una manera más adaptable y flexible. El hecho de que tu página web sea responsive, te da acceso a muchos beneficios importantes, algunos de los cuales están relacionados con SEO:

1. Mayor posicionamiento en los rankings por las búsquedas de localización específica.

RWD te permite orientar la geo-ubicación en la elección de palabras clave de tu web. Esto es muy beneficioso para las empresas, en una época donde las búsquedas, incluyen cada vez más un lugar específico. Esto se ha reflejado en las estadísticas reportadas por los directorios de empresas como Yelp. Ellos reportan que el 40% de las búsquedas realizadas en sus anuncios se originan a partir de su aplicación móvil.

Del mismo modo, BGR ha publicado estadísticas para mostrar que una décima parte de todas las búsquedas en la web, se originan en los dispositivos móviles. Los dispositivos móviles están aumentando su penetración en el mercado, debido a los precios más bajos y a las mejores redes, y es probable que esto siga en aumento.

El RWD crea un sitio web que puede incorporar fácilmente los marcadores Geo-específicos en su estructura general, y esto significa una experiencia de consumo mucho mejor, y se traduce en una posición más alta en los ránkings de los buscadores.

2. Eliminación del SEO y la duplicación de contenido

El SEO requiere tiempo, energía y dinero para hacerlo bien. Si has optado por crear una web independiente dedicada a los dispositivos móviles, te verás obligado a duplicar el esfuerzo en SEO, y esto supone un desperdicio de los recursos comerciales. Por otra parte, para los motores de búsqueda, los dispositivos móviles y los ordenadores de escritorio, son dos entidades diferentes. Esto significa que el éxito que tenga el SEO en los dispositivos móviles, no será un factor determinante en el ranking de la web para el ordenador de mesa y viceversa. La división del esfuerzo en SEO, significa que terminarás gastando más, y obtendrás menos resultados.

Cuando utilizas RWD, tu esfuerzo en SEO se mantiene a través de ambos dispositivos. Esto significa que los textos de anclaje, las etiquetas, meta descripciones, contenidos y palabras clave se mantienen tanto en el ordenador de mesa, como en el dispositivo móvil. Además, puesto que RWD es relativamente nuevo en el mercado, aún no se ha convertido en un estándar y, por lo tanto, los sitios web que lo utilizan, son propensos a hacerse notar y marcar la diferencia.

La duplicación de contenido es otro desafío que no utiliza el RWD. La mayoría de los webmasters, utilizan el mismo contenido para ambas versiones de su sitio web. Esto reduce la credibilidad de la web para móviles, y hace difícil que se posicione en el ranking. Además, todos los métodos que están actualmente disponibles para el etiquetado y los enlaces, no están plenamente reconocidos por los rastreadores web, y cuando se ven obligados a duplicar contenido, también hay que duplicar los esfuerzos para mantener las dos versiones de la página web. Esto es una pérdida de recursos y tiempo que podrían ser utilizado para otra actividad.

3. ‘RWD es el futuro. Lo hemos comprobado ‘- Google

Cualquier webmaster que no entienda la importancia de Google para el éxito de un negocio online, merece que su posición en el ranking baje. Como el mayor motor de búsqueda en el planeta, Google es el jugador más destacado en el sector online. Han recomendado que los webmasters adopten RWD con el fin de servir el mismo contenido HTML a los consumidores durante el uso de consultas de medios CSS. El algoritmo de búsqueda de Google, pone mucho peso en la experiencia del consumidor, y esto se refleja en su capacidad para proporcionar al usuario del motor de búsqueda, las respuestas correctas.

Ellos, por lo tanto, comprueban la experiencia del espectador en el sitio web, la interacción social, y el promedio de tiempo que el espectador pasa en la página. Es esencial que sigas el ejemplo de Google, ya que son los creadores de tendencias actuales en la tecnología de motores de búsqueda.

4. Atrae los beneficios del link building

El link building es una de las actividades que consumen más tiempo, pero es esencial para cualquier webmaster. Los beneficios que se derivan de esta práctica, no se perderán cuando la página web se traslade a una plataforma móvil. En lugar de crear un nuevo sitio móvil e iniciar el proceso de nuevo, puedes utilizar RWD y trasplantar tu trabajo anterior a plataformas móviles. Esto no sólo es beneficioso para la construcción de enlaces en directorios y listados, sino también para el intercambio social.

La experiencia del espectador, influirá en si compartirá o no el enlace de la página web. Una página web responsive, es más propensa a ser compartida, y ayudará a la integración global de los esfuerzos online que haya hecho tu empresa.

5. RWD es más barato y más rentable

Rediseñar un sitio web para incorporar RWD es mucho más fácil y barato, que construir un nuevo sitio web para dispositivos móviles desde cero. Por otra parte, construir una web específica para dispositivos móviles, también necesitará una estrategia de marketing y comunicaciones, y esto también aumentará los costes asociados a esta opción.

El uso de RWD también significa que el sitio web será gestionado y administrado como una unidad. Esto elimina la necesidad de contratar más personal para manejar la versión móvil de la web. Se prevé que el RWD, sea el futuro del diseño web al mismo tiempo que los dispositivos móviles se vuelven aún más potentes en el mercado.

En conclusión, el respaldo que el RWD ha recibido de Google ya es un razonamiento suficiente para que te plantees adoptarlo. El mercado móvil está creciendo, y no debes perder la oportunidad comercial que te está brindando.

 

App: Aplicaciones para móviles

 

Todo el mundo conoce grandes aplicaciones como: Angry Birds, Candy Crush, Facebook, Twitter, Uber o Instagram. El desarrollo de apps móviles se ha convertido en una industria multimillonaria con grandes expectativas de futuro. Pero, ¿cómo puede un emprendedor entrar en este negocio? ¿Cuánto cuesta crear una App y cómo se construye?

Compartimos algunos puntos que se deberían considerar antes de tomar esta decisión. Crear una App móvil es un proceso muy complejo, pero puede traer grandes beneficios para el negocio o startup que decida ponerla en marcha. Tipos de Aplicaciones

Según su funcionalidad:

Funcionalidad básica: Pensar en esto como una jerarquía, se abre en la pantalla grandes temas y se hace clic en uno y tendrás un conjunto de nuevas listas. El correo electrónico en el iPhone es un buen ejemplo de esto. Sin duda es de fácil construcción y diseño y una buena opción para las empresas que desean una aplicación “simple” que muestre información básica.

Base de datos con funcionalidad personalizada: Imagina que tienes una cantidad completa de contenido que deseas utilizar. Un ejemplo sería tener cientos de razas de perros que deseas organizar y mostrar de manera diferente. Esto se puede hacer más allá del formato de tabla básica, el desarrollo se vuelve más complejo.

Juegos: La gama de complejidad en este tipo de App es muy amplia, se puede empezar por algo muy simple hasta llegar al 3D o la incorporación de la experiencia del usuario a través del movimiento físico del dispositivo. Todo es posible en el Game Center.

Mejoras o modificaciones del hardware del dispositivo: Esto significa que al crear la app se toman ciertas funciones del teléfono, como la alarma, la cámara o el flash, para hacerlo mejor. Por ejemplo, el de la cámara + app que añade filtros a las imágenes que sacas con el teléfono.

Aplicaciones totalmente dinámicas: Similar a las aplicaciones de bases de datos, estas apps se basan únicamente en la información externa – Twitter, Weather Channel, Flipboard.

Servicios personalizados: Estas aplicaciones están orientadas a permitir la entrada de los usuarios al contenido de una manera específica. Los ejemplos son Pages, Adobe Ideas y Numbers.

Todo lo demás: Seguro que hay miles de aplicaciones que son completamente únicas, pero la lista anterior podría cubrir el 95% de lo que hay disponible hoy en día.

Según la tecnología de desarrollo:

Aplicaciones nativas: Son las que se desarrollan con el software que ofrece cada sistema operativo llamado Software Development Kit o SDK. Las apps nativas se diseñan y se programan específicamente apra cada plataforma, ya sea Android, iOS o Windows Phone, en el lenguaje utilizado por el SDK. Entre sus características está que se actualizan frecuentemente y es el usuario quién descarga la última versión.

Aplicaciones web: Las aplicaciones web o webapps tienen como base de programación el HTML, JavaScript y CSS, todas herramientas muy habituales para programadores web. A diferencia de las nativas, no necesitan instalarse porque se visualizan como una web normal usando el navegador.

Aplicaciones híbridas: Es una combinación de las dos anteriores. En este post sobre tipos de apps desarrollamos con más en profundidad este tema.

El tipo de aplicación que desees desarrollar puede cambiar en función de la cantidad de contenido que tengas y cuánto control deseas tener sobre todo el proceso. Es importante darse cuenta de que puedes conseguir aplicaciones de forma muy rápida y barata si sabes perfectamente qué tipo de aplicación quieres desarrollar. Proceso de desarrollo de aplicaciones móviles

El proceso de desarrollo de aplicaciones se puede romper en cuatro partes principales – idea, distribución y planificación, diseño, y puesta en funcionamiento.

1. Idea

El primer paso, incluso antes de saber la idea es pensar sobre cuánto cuesta crear una App móvil. Cuando descubres los precios aproximados sueles dejar de pensar en tu idea y esto es un error. Pronto te darás cuenta de que hay una gran probabilidad de obtener un retorno de la inversión.

Por ejemplo, la creación de juegos es complicada pero tienen la capacidad de hacerse virales fácilmente. Por otra parte, las aplicaciones simples no pueden cubrir grandes expectativas, pero son baratas y fáciles de construir. El primer paso, por lo tanto, es encontrar el presupuesto óptimo según tus necesidades y las del negocio, además de definir los esfuerzos de marketing que se llevarán a cabo.

2. Planificación

Este paso implica ir a través de cada pantalla individual y comprender cómo todas las partes de la aplicación interactúan entre sí. Si presiono este botón, ¿qué sucede? Te sorprenderás de la cantidad de pasos y escenarios que hay, incluso para la aplicación más sencilla. La cantidad de funciones para definir y construir también jugará un papel importante en el coste de la aplicación.

3. Diseño

El diseño viene una vez que la programación y la funcionalidad se han definido, el diseñador obtiene una lista completa de lo que debe ser creado. El diseño puede hacer o deshacer una aplicación, así de simple, por lo que es prioritario en su desarrollo la selección de un buen diseñador freelance. Necesitarás un gran icono que distinga tu app, pantallas de inicio, iconos de las diferentes pestañas… y todo debe de estar relacionado.

4. Puesta en funcionamiento

Una vez que tengas la aplicación construida en xCode (el entorno de desarrollo de aplicaciones para Apple), el desarrollador freelance podrá ayudarte a sacar la aplicación en la tienda correspondiente (iTunes por ejemplo). Esto requiere la creación de una cuenta de iTunes Connect (unos 70 euros al año) y luego rellenar toda la información necesaria para la aplicación – iconos , descripciones , precios, etc.

La mayoría de estos pasos son bastante intuitivos y la configuración se debe hacer sólo una vez, por lo que si decides desarrollar otra aplicación más adelante, ya tendrás una cuenta donde incluirla.

Una vez que tienes la aplicación en la tienda, puedes supervisar todo el funcionamiento a través de iTunes Connect – cuántas descargas , cuánto dinero estás ganando, etc. Hay muchas formas aumentar los ingresos de tus aplicaciones, incluyendo los anuncios dentro de la aplicación y la posibilidad de comprar información adicional a través de la App. Podrás ver y analizar todo lo que está ocurriendo.

 

Cómo hacer buenas fotos de tus productos

¡Hola! Seguro este es uno de los temas que más esperabas para complementar tu negocio en línea e iniciar una buena campaña de marketing digital: Las Fotografías de tu sitio WEB... Tener buenas o malas fotografías es de lo que van a depender tus ventas un 80 % (incluyendo marketing, tienda, etc…), el resto es el producto en sí. Si lo piensas, es triste, pero si una foto no llama la atención, por muy bien hecho que esté el producto, no te lo va a comprar ni perri.

¿Pero y si mi cámara es pequeña y compacta?

Tranquilo, no hace falta que tengas la super cámara más cara y grande del mundo. Incluso pondré ejemplos de fotos hechas con el móvil (eso sí, el móvil tiene que ser bueno). Lo que necesitas son ganas, sentido de la estética y un pelín de técnica. Aprenderemos juntos a montar un estudio de foto super económico en casa para que hagas unas fotos profesionales. La vida no es como aparece en Pinterest. Fotos perfectas, con una luz impresionante, una localización inmejorable… Y dices… ¡Yo quiero una foto igual!

10 puntos clave para realizar buenas fotos

  • Utiliza luz natural: Intenta hacer las fotos cerca de alguna ventana. Si es un día soleado, mucho mejor. Con una cortina blanca quedan las sombras más suaves. La mejor luz es la de mediodía, cuando el sol está en vertical, crea menos sombras. Si no es posible luz natural, lo mejor es que uses una caja de luz (más abajo te explico cómo hacerla).
     
  • No uses flash: Y menos el de relleno que llevan las cámaras compactas. Crea mucha luz en una única zona, quema la foto y es muy difícil arreglarla después.
     
  • Intenta conseguir una cámara buena: Vale que no sea la mega cámara de profesional, pero tampoco que sea la cámara de un móvil viejo.
     
  • Elige un fondo neutro: Aunque en este punto discrepo ya que las fotos de exterior también son bien bonitas, es verdad que para las fotos de productos, quedan mucho mejor cuando tienen el fondo neutro. Si, puede ser blanco. Así destacarás mucho más el producto.
     
  • Ensaya. Haz miles de fotos. Puede parecer que son buenas vistas desde la cámara, pero cuando las vamos a retocar al ordenador, nos damos cuenta que salen desenfocadas… De mil fotos, alguna habrá que te salga bien.
     
  • Usa trípode para evitar movimientos. Quien dice trípode dice mesa, caja, objeto plano para colocar la cámara. Además, podrás colocar la cámara una vez y lo único que tendrás que hacer será cambiar de producto. Aún así, hay trípodes bien baratos, si puedes, hazte con uno, será mucho más cómodo.
     
  • Recorre tu producto mirando por el visor o la pantalla de la cámara. Así podrás encontrar el mejor ángulo y perspectiva del producto.
     
  • Después de terminar de hacer las fotos, es obligatorio, OBLIGATORIO, pasar por el ordenador para retocar las fotos obtenidas. Del retoque hablaremos luego.
     
  • Apunta en un bloc de notas antes de empezar todos los puntos clave para la foto. A qué altura está el trípode, el producto, desde qué angulos haces las fotos… Para que todo se repita exactamente igual en todas las fotos.

“Una imagen vale más que mil palabras” Una frase totalmente cierta en nuestro día a día. Cuando ojeamos una revista de moda, cuando queremos elegir un hotel, cuando queremos comprar unos envasados de comida… Nos fijamos en la fotografía. Y toda esa fotografía tiene mil trucos, no te creas que es sólo técnica. A los productos de comida para que salgan más atractivos, le echan aceite para que ...

TECNICA

Tampoco quiero profundizar mucho en este tema porque es infinito, para eso ya están los talleres in situ donde se aprende mucho más, o mil webs donde saber qué es la obturación, la velocidad, etc…

  • Balance de blancos: Pon la cámara siempre en manual, y maneja los balances de blancos para que el blanco sea blanco y no amarillo. Para saber más, pincha aquí.
  • Profundidad de campo: Técnicamente hablando y si tu cámara lo permite, trata de usar el diafragma para acentuar y minimizar la profundidad de campo (esto es, que lo que aparezca en segundo plano quede desenfocado. Todo enfocado (número f grandes), o fondos desenfocados ( números f pequeños). Para saber más sobre el diafragma y profundidad de campo visita este post.
  • Sigue las reglas de los 3 tercios. Esto significa que se divide la escena en tres partes, tanto en horizontal como en vertical. La líneas que determinan estos tercios se cortan en puntos estéticamente adecuados para situar el centro de interés, con lo que evitamos que éste, al estar situado en el centro de la imagen resulte estático.
  • Resolución: Lo ideal es que la cámara la programes a 5 megas con una resolución de 1024 x 768 píxeles.

ESTETICA

Lo que vendemos con nuestros productos es estilo de vida, armonía. Debemos reflejar en ellas nuestra filosofía.

  • Publicar fotos del mismo tamaño. Que las imágenes tengan el mismo ancho y alto.
  • Paletas de colores: Utiliza gamas de colores. Para todas tus fotos. Sigue tu filosofía, tu público objetivo. En mi tablero de pinterest puedes hacerte una idea de gamas de colores.
  • Toma varias fotos del producto, de distintos águlos, una completa y otra de detalle. Cada producto puede tener unas 3 o 4 fotos tomadas de diferentes ángulos.
  • Manten la fidelidad de colores. Los colores de tu producto en la foto deben ser de lo más realistas para que cuando tus clientes reciban el producto no se quejen diciendo que “ pensaba que el bolso era amarillo, no verde…”. Cuida mucho este aspecto.
  • Acompaña las fotos con objetos en segundo plano, de colores neutros, para no quitarle protagonismo al producto en sí. Es una opción más, no es necesario.Por ejemplo, una rama de un árbol bien puesta, te puede servir como soporte de pendientes o pulsera… Es un ejemplo de millones que puede haber.
  • Que tus fotos tengan aire. Es decir, que haya espacio vacío en las fotos, que no todo lo ocupe el producto ( excepto cuando vayamos a fotografiar un detalle del mismo).
  • Para fotografiar detalles de tu producto, usa la opción de macro de tu cámara. Todas las cámaras, hasta las más básicas tienen esta opción.
  • Técnica Dropping: Recorta el producto en la misma foto. Para ser más artística, no hace fala que salga el producto entero, si quieres sacar algún detalle, que se vea más la tela, la cadena, etc…
  • Utiliza el mismo estilo para todas las fotos. Si utilizas un filtro, utilízalo para todas, si haces las fotos desde un ángulo, hazlo con todos los productos igual. Coherencia.

Te presento un ejemplo que he encontrado en ARTESANIO.

foto artesanio

¿Hacemos una caja de luz casera?

La caja de luz sirve para hacer fotos como en un estudio, nivel profesional. Pero una caja de luz o lightbox como se conoce, no es más que una caja de cartón con 3 focos bien colocados y tu producto dentro. Esto es una caja de luz:

caja buena

En el siguiente dibujo te explico cómo se hace.

caja de luz casera A SACO_2

 

Con esta caja de IKEA, también se puede hacer y te cuesta poco.

 

Captura de pantalla 2013-11-13 a las 21.47.57

Y con estos focos tienes de sobra (eso sí, que los 2 o 3 que tengas, tengan el mismo tipo de luz, misma potencia y misma bombilla).

Captura de pantalla 2013-11-13 a las 21.50.03

También te dejo un vídeo para que veas como se hace in situ.

en este video está perfectamente explicado, está en inglés, pero visualmente se entiende muy bien.

Unas buenas fotos significan unas mejores ventas, asi que ponte manos a la obra y monta tu propio estudio de fotografía handmade!

 

Puedes ojear mi tablero de pinterest de Fotografía de productos aquí.

Estas son algunas fotos de productos que he encontrado en Pinterest, para que veáis algunos ejemplos.

234534

 
 

Herramientas para los buscadores

Soporte técnico de computadores, redes y periféricos en Bogotá, Colombia.

 

Diseño y desarrollo de sitios web a la medida y desarrollo de software en Bogotá, Colombia.

Palabras más buscadas:

empresas colombianas

paginas web colombia

desarrollo web

diseño web colombia

empresas de desarrollo web

empresa desarrollo web

empresa de desarrollo web

empresa web

diseño web bogota

empresas desarrollo web

desarrollo de web

paginas web desarrollo

empresa paginas web

empresa de paginas web

empresa pagina web

empresas creacion paginas web

desarrolladores paginas web

paginas de desarrollo web

web desarrollo

empresas que hagan paginas web

empresas de pagina web

pagina web empresa

sitios web de empresas

desarrolladores web

empresas de paginas web

pagina web de empresa

paginas web de empresas

desarrollo de sitios web

empresas que hacen paginas web

empresa de creacion de paginas web

desarrollo pagina web

desarrollos web

empresas de desarrollo de paginas web

empresas con paginas web

empresas de creacion de paginas web

desarrollo web empresas

empresa creacion paginas web

empresas con pagina web

empresas paginas web

desarrolladores de paginas web

paginas web empresas

empresas de desarrollo de software

empresas pagina web

pagina web de empresas

pagina web empresas

diseño y desarrollo web

diseño web en colombia

empresa de diseño web

empresa diseño web

diseno web colombia

diseño de paginas web en colombia

diseño de paginas web colombia

empresas de desarrollo de software bogota

empresas de software en bogota

empresas diseño web

empresas de diseño web

paginas web en bogota

confeccion pagina web

diseño y desarrollo de paginas web

desarrollo de software bogota

diseño web en bogota

empresas de diseã±o web bogota

agencia de diseño web

diseño web

empresa de diseño

diseño web empresas

desarrollo web bogota

diseño web empresarial

mejor empresa diseño web

diseño tiendas virtuales en colombia

diseño web empresa

agencia diseño web

empresas diseño paginas web

diseño y desarrollo de sitios web

empresas de diseño web bogota

empresas desarrolladoras de paginas web

diseño de paginas web para empresas

desarrollo web colombia

diseno de paginas web en colombia

web de empresas

cotizar diseño web en bogota

desarrollo y diseño de paginas web

empresas de diseño de paginas web

desarrollo de paginas web bogota

desarrollador de software bogota

hosting colombia