Bienvenidos a nuestra plataforma de blogging, sigue nuestra comunidad y comparte, la idea es crear una cultura de contenidos en tormo al diseño, web, marketing social media y 3d
Crecimiento Empresarial, Marketing Digital

El Growth Hacking conjunto de técnicas que se vienen empleando por empresas que basaron su estrategia de mercadeo en el crecimiento y adquisición de clientes a través de los medios digitales. Para empresas como Google, Facebook, Airbnb, esta técnica se volvió prioritaria y les ha hecho y hace facturar millones de dólares.

 

El concepto es: Para que una startup tenga la repercusión deseada, se necesitará crecer tanto en la adquisición de clientes, como en ingresos y ventas, para marcas digitales o redes sociales en internet, el objetivo de crecimiento podría ser: cantidad de usuarios de la herramienta o aplicación, cantidad de usuarios registrados, cantidad de usuarios de pago del sitio, entre otras. Es ahí en donde entran los Growth Hackers: La idea de crecimiento comprende no sólo a los seguidores en las redes sociales y visitantes en nuestro blog o website, la idea de crecer abarca principalmente crecer en ganancias, clientes  y compradores de nuestros productos, crecer en clientes, pero además desarrollar estrategias creativas para fidelizarlos, es un aspecto que toda empresa debería considerar, y que día a día se está volviendo una necesidad.

 

Es en el ámbito digital en donde se presentará la mayor cantidad de inversión en los años venideros, ¿Porqué? Además de que casi todos estaremos interconectados a través del mundo de la world wide web, la manera y tendencias con las que evolucionan los mercados globales nos muestran un progreso bastante fuerte en como muchas empresas están renovando y orientando sus estrategias de publicidad y mercadeo hacia el ámbito de todo lo que se mueve a través de la web.

 

El concepto Growth Hacking no se debe confundir con el término hacking visto desde un punto de vista más amplio, no se trata de hackear o de hacer trampa, sino de analizar, la mano derecha y herramienta de trabajo de un growth hacker siempre será la recolección y análisis de datos, las técnicas de crecimento empresarial digital se basan principalmente en analisis de data, las tácticas, técnicas y soluciones a aplicar están basadas en la manera en la que se interpretan dichos datos analizados.

 

Sin embargo en el Growth Hacking (tambien conocido como Growth Marketing), el objetivo principal siempre será hacer exitoso al equipo de ventas, el crecimiento debe verse de forma integral y se hace necesario dentro de todo el ciclo de vida del producto. Otras de las características que debe tener un Growth Hacker es la capacidad de hacer testeos y pruebas que permitan detectar soluciones más efectivas de promocionar y vender productos y servicios, adquirir usuarios y compradores, etc. Además para ser un Growth Hacker se debe ser creativo y poder detectar necesidades y soluciones innovadores que puedan llegar a ser simplemente, arrasadoras.

 

 

Modelos de Growth Hacking

 

Existen diversas maneras y metodologías para abordar un modelo de crecimiento empresarial y estas se personalizarán dependiendo del proyecto, diversas empresas desarrollaron múltiple modelos, sin embargo, uno de los modelos popularmente podría ser el siguiente:

 

Definición de indicadores

 

Nuestro proyecto de crecimiento empresarial digital debe tener unos objetivos de crecimiento claros y cuantificables, gracias a esto es que podremos tomar mediciones de nuestros experimentos y saber si los resultados han tenido el éxito esperado. Estos indicadores pueden estar divididos en globales y específicos e podrán ir variando a lo largo del tiempo, todo depende de como nuestras estadísticas y medición de resultados se desenvuelva.

 

Algunos ejemplos de indicadores pueden ser el CTR (click through rate) cantidad de clics sobre impresiones en la búsqueda, la cantidad de visitas que está recibiendo un sitio web (diarias, mensuales, anuales, por página), la cantidad de llamadas que se reciben desde las campañas y diferentes medios y plataformas de marketing, el incremento en las ventas (cantidad, ingresos, clientes), entre otras.

 

Fragmentacion del problema

 

Para abarcar nuestro proyecto debemos incluir determinadas áreas y categorías, en la medida que podamos subdividir nuestro problema principal, podremos atacar cada uno de estos aspectos por separado, incluso formar un equipo con las diferentes ramas y especialidades que se puedan llegar a solicitar.

 

Planteamiento de hipótesis

 

Con nuestros indicadores y áreas definidas se continúa planteando una hipótesis, se parte de generar un planteamiento con respecto a las métricas y los puntos anteriores, los experimentos que se apliquen posteriormente, servirán para probar o demeritar la hipótesis planteada. Este planteamiento debe basarse en nuestro enfoque de crecimiento y análisis previos.

 

Métrica de referencia

 

Nuestra hipótesis planteada deberá tener una métrica relacionada que nos va a ayudar a comprobar y medir si nuestra hipótesis es verdadera o falsa, podríamos necesitar diversas métricas de crecimiento que nos ayudarán a demostrar nuestra hipótesis, en ese caso debemos clasificarlas como principales y secundarias.

 

Meta de crecimiento

 

Ya con una idea más clara de nuestra campaña de crecimiento, podemos definir una meta u objetivo de crecimiento, totalmente cuantificable y con una duración clara, la pregunta es ¿Cuánto crecimiento necesito? El objetivo principal de crecimiento debe ser claro, realizable y medible, y será el pilar fundamental de nuestra campaña de Growth Hacking, las tácticas, técnicas y herramientas a usar deben estar totalmente enfocadas en lograr cumplir nuestra meta de crecimiento.

 

Ejecución del experimiento

 

Este momento de nuestra estrategia se hace fundamental, acá debemos correr nuestro testeo o prueba A / B, el concepto trata de crear nuestras campañas y estrategias, ejecutarlas en paralelo o en simultáneo con variaciones, cada una con tiempos definidos y condiciones similares y tiempos, al cabo de la finalización de nuestro testeo, tendremos información vital que nos permitirá conocer qué estrategias serán más eficientes y eficaces a la hora de cumplir nuestros objetivos.

 

Validación de resultados

 

Con los datos que nuestro testeo A / B  arroja, tendremos un excelente punto de referencia para decidir qué estrategias y tácticas han tenido los mejores resultados, estos resultados deben ser validados con nuestras métricas de referencia iniciales, es un punto importante para tomar decisiones y conocer los resultados de crecimiento obtenidos en nuestra campaña, comprobando o derogando nuestra hipótesis planteada y verificando si nuestra meta ha sido cumplida.

 

Iteración

 

Iterar es variar pero con un conocimiento claro de porqué se toman las decisiones al realizar dichas variaciones, gracias a los resultados de crecimiento obtenidos y totalmente comprobables podemos tomar decisiones de mejoría y optimización, lo cual nos permite lograr nuestros objetivos planteados, cuanto estos sean cumplidos, se iterará hacia un siguiente problema detectado o meta de crecimiento, la iteración es fundamental para la evolución de nuestras estrategias y obtención de resultados.

 

Los embudos de marketing (Funnels)

 

Debido a que nuestro objetivo principal será el growth (crecimiento), los denominados funnels no se deben obviar, este será un punto fundamental para conocer, cuantificar nuestros resultados y detectar mejorías dentro de todo el proceso de adquisición de clientes y cierre de ventas. Se podría definir un Funnel como la serie de pasos para atraer, detectar, convertir y  clientes potenciales en compradores fidelizados y promotores de nuestro producto.

 

Estos embudos tienes varias características y procesos dependiendo del punto de vista y enfoque desde el cual se abarquen, pero dentro de todos lo tiempos de Funnel que pueden haber cabe destacar principalmente estos dos:

 

Embudo de producto (Customer Funnel)

 

Este tipo de funnel se centra en nuestro producto, y en el análisis de ciertas características que pueda llegar a tener nuestro comprador para detectar oportunidades o posibilidades de venta y probabilidades de pago. Debemos saber como destacar las características principales que posee nuestro producto y como hacer llegar estos aspectos a los posibles clientes, debemos detectar ese algo diferenciador y único que tiene nuestro producto y que va a motivar a la gente a comprarlo. Además los compradores potenciales deben poder acceder a información de cómo utilizar nuestro producto. Para lograr tener avances exitosos en este embudo debemos analizar a fondo los usuarios de nuestro producto y los comportamientos y el target que pueden tener para generar procesos de usuabilidad y adquisición sostenibles.

 

 

Embudo de ventas (Sales Funnel)

 

Este embudo se basa principalmente en hacer el proceso de ventas y nuestro departamento de ventas lo más exitoso posible, parte desde el punto en el que un visitante o alguien que ve nuestro anuncio o algún referido u oportunidad detectada ya sea por medios digitales o tradicionales, nos contacta y muestra interés en nuestro producto, por cualquiera de los diferentes medios de recolección de leads que tengamos como por ejemplo, un número telefónico en nuestra tarjeta corporativa o página web, nuestro email, o un formulario de contacto en nuestro sitio web, marketing en redes sociales y buscadores, anuncios impresos, anuncios en revistas, periódicos vallas, otros sitios web, contacto personal, referidos, etc.

 

Una vez el lead o cliente potencial se ha adquirido, debemos  completar una serie de pasos o proceso para convertir esa oportunidad de venta en un cierre de la venta a nuestro favor. Para que este proceso mejore y cerremos más ventas, debemos optimizar cada una de sus fases y establecer una metodología clara de los pasos que vamos a seguir y procedimiento para concretarla.

 

Esta metodología dependerá de varios aspectos como el tamaño de la compañía, el presupuesto del cual se dispone para marketing, cantidad de empleados, cantidad de ingresos mensuales, infraestructura, etc. Sin embargo todos los embudos tienen en común que una vez se adquiere el lead se remite al departamento de ventas, que puede tener varias fases, procesos y departamentos dependiendo del avance dentro de dicho proceso de venta hasta lograr el cierre definitivo el cliente potencial puede pasar por un vendedor junior, luego uno senior a medida de su avance dentro de nuestro funnel, cabe anotqar que el proceso de venta puede cerrar en negativo, o que el cliente potencial no adquiera nuestro producto, es esta fase es donde se debe trabajar más debido a que del pleno y profundo análisis de por qué el cliente potencial no cerró la compra tendremos conclusiones y decisiones a tomar para mejorar dicho proceso, esto hará que nuestro embudo de ventas sea más efectivo.

 

Esta es una pequeña introducción a la tendencia que está revolucionando el mundo de marketing digital hoy en día, si desea saber más del tema le recomendamos solicitar una capacitación o asesoría personalizada para que detectemos las oportunidades de crecimiento que puede tener su negocio, los invitamos a conocer nuestra agencia Dweb3d.com.

 

 

0

Animacion 3d, Diseño Industrial

La regla número 1 que debes saber para realizar un diseño en 3d es que lo debes desarrollar en .stl. Este es un formato de archivo muy util para este tipo de desarrollos ya que los stl son cerrados en su geometría y están desarrollados para poder detectar que errores o aperturas del diseño tienen en su forma, al tener un archivo stl sin errores se garantiza que el desarrollo 3D fué adecuado y se puede proceder con la impresión en 3D.

 

Ahora bien, ¿En que tipo de software podemos desarrollar piezas para impresión en 3d? la respuesta es: hay una amplia variedad en el momento y sigue creciendo; podemos utilizar desde los clásicos 3D Studio Max o la familia de Solid Works, además hay software que se han especializado más en el tema de creación de .stl para moldes y con uso en la ingeniería como Autodesk Inventor.

 

Los archivos .stl no sólo se utilizan en las impresiones en 3d sino también en otros tipos de conformado por control numérico computarizado CNC como es la electroerosión y maquinado computarizado. Si usted es diseñador o ingeniero industrial seguramente alguna vez tendrá que usar este tipo de archivos.

 

Entre las herramientas cad que nos permiten crear piezas para impresión en 3d tenemos: 123D design, 3D Slash, 3DTin, CubeTeam, Cubify Invent, Design Spark Mechanical, FreeCAD, Geomagic Design, Inventor, Rhino 3D, SketchUp, Solidworks y TinkerCAD. Hay también herramientas de modelado freeform que nos permiten detalles más orgánicos, diseñar personajes y crear escenarios y detalles más complejos enfocados además hacia el ámbito de la animación en nuestros proyectos: 123D Creature, 3D Max, Blender, Cinema 4D y Maya. Por último tenemos herramientas de escultura digital en las que tenemos la posibilidad de intervenir materiales tal cual como si los estuvieramos esculpiendo, para despues exportarlos para imporesión 3d u otros usos, ejemplos de estos tipos de software son: 123D Sculpt, Cubify Sculpt, Loepoly, Sculptris, SculptGL y Zbrush.

 

Les compartimos algunos desarrollos elaborados en formato final .stl en los cuales debimos verificar con detalle que el .stl no tuviera errores para que el electroerosionado en el que se iban a conformar las piezas finales no tuviera errores. Si necesitan asesoría en diseño 3D para impresión y relacionados, no dude en contactarse con Dweb3d.

 

 

0

Diseño Web

Es importante estar al tanto de las tendencias en diseño de páginas web que se van presentando año tras año, para el 2016, algunas empresas grandes marcan pautas en los diseños de sus páginas que terminan sirviendo de guía para el mercado en gerneral, algunas de estas tendencias son las siguientes:

 

Microinteracciones

 

Son interacciones dentro de una acción más grande, y son muy útiles sobre todo en el diseño para dispositivos móviles y en el diseño para apps, por ejemplo las notificaciones push que se pueden recibir dentro de una aplicación por un like a sus imágenes, o poner la alarma para 10 minutos después una vez se ha activado, estos son ejemplos de microinteracciones con los dispositivos móviles.

 

Entre los  beneficios que tienes las microinteracciones en el diseño web, están:

 

  • Orientar y ensañar a los usuarios cómo interactuar con nuestro sitio.
  • Comunicar cambios de estatus o lograr que el usuario preste atención por ciertas áreas.
  • Proveer retroalimentación desde las acciones principales.
  • Agregar elementos que mejoran la experiencia sin desviarse del objetivo principal.
  • Fortalecen la identidad de la marca.
  • Cumple expectativas (las microinteracciones son ahora la norma en muchos sitios y productos)

 

Tarjetas (Cards)

 

Resumen la información en un sólo contenedor, esta práctica fué presentada por sitios como Facebook y Pinterest y ahora se vuelve toda una tendencia, múltiples industrias a lo largo y ancho de la web la están utilizando.

 

  • Las cards son intuitivas y fáciles de entender sin explicaciones adicionales.
  • Permiten a los sitios organizar una larga acantidad de información en piezas concretas.
  • Es fácil compartirlas en las redes sociales.
  • Son perfectas para diseño web adaptable.

 

Diseño Minimalista

 

El contenido es rey y si el diseño visual se enfoca en mostrar el contenido de una manera adecuada, están alabando al rey.

 

No presentar distracciones adicionales al usuario de nuestro sitio, lo ayudará a enfocarse en este contenido que estamos presentando, la estética minimalista se vuelve adecuada para mostrar la información de una manera concreta, y esto ha venido siendo tendencia y sigue siéndolo durante el 2016.

 

 

  • Beneficios:
  • Con un vistazo podremos entender la ubicación de los elementos y funcionalidad.
  • Énfasis en los contenidos, especialmente visuales.
  • Reducción en los tiempos de apertura.
  • Atmósfera de sofisticación (Apple).
  • Incremento en legibilidad.

 

Híbrido entre Flat y Material Design

 

Material Design en un lenguaje de diseño por capas de Google y el diseño Flat o plano fué diseñado como el lenguaje gráfico más simple.

 

Conocido cómo Flat Design 2.0, el estilo híbrido refleja la est{etica moderna del flat design y la sensación por capas de Material Design.

 

  • Mecánicas realistas hacen la interfaz de usuario intuitiva y viva.
  • Los objetos por capas planas mejoran la usabilidad debido a que los objetos clicables son fáciles de identificar.
  • Estética moderna.
  • Los visuales planos tienen velocidades de carga más rápidas.
  • Al ser usados para diseño de sitios web de escritorio, hace parecer la navegación menos forzosa.

Animaciones Enriquecidas

 

La animaciones son muy interesantes desde la animación tipo ícono en la carga de una página hasta una animación a gran rango usada para un fondo.

 

La animaciones crean y dan vida a un sitio web, dan una reatroalimentación más intuitiva y atraen la atención a elementos específicos.

 

Las animaciones usadas en los sitios web son y serán tendencia en el diseño de páginas web por el momento.

 

Tipografías Dramáticas

Al tener mejores resoluciones de dispositivos, conexiones de internet más rápidas y la posibilidad de nuevas herramientas de fuentes, como Google Fonts, Adobe Typekit y Font Awesome, vuelven esta temporada una era dorada para la tipografía.

 

Hay muy buenas opciones para tipografías en estos momentos en cuento a diseño web se refiere. Lo cual es una oportunidad para mostrar identidad de marca. La legibilidad se vuelve un aspecto imprescindible a tener en cuenta.

 

 

Otras Tendencias en Diseño Web para el 2016

 

Además veremos un uso de colores más vibrantes, contrastes impactantes y degradados fuertes, el uso de imágenes en alta resolución, scrolls de pantalla largos, o navegación que activa el scroll y una alternativa popular a las fotografías e imágenes de stock serán las ilustraciones personalizadas.

0

Marketing Digital

Hillary Clinton va viento en popa con su campaña en rumbo a las elecciones presidenciales de los Estados Unidos de América. De hecho según Gallup cuenta con una popularidad en el público hispano del 65% contra un 21% de Trump. Y con lo pendientes que estàn los medios con respecto a esta campaña que se ha vuelto sensación y noticia a nivel mundial, debido a que las decisiones que se toman desde la Casa Blanca impactan el resto del mundo.

 

Pero en una batalla en la que no hay tregua, hasta la orientación culinaria de los candidato cuenta y puede ser usada como herramienta de marketing a favor, y esto lo sabe muy bien  el equipo de Hillary Clinton. Durante su reciente visita a la ciudad norteamericana de las Vegas, Nevada, la candidata hizo una estratégica parada en una famoso sitio de comida mexicana que debe su renombre a los excelentes tacos al pastor que allí preparan.

 

Esta visita no sólo significa que la candidata presidencial pudo hacer tenido muchísima hambre en el momento, sino que más bien tiene hambre de votos y espera contar con el apoyo de la comunidad mexicana y latina en las elecciones que se avecinan y en las cuales cualquier paso en falso dado por alguno de los candidatos ha afectado su popularidad y su supuesto potencial de votos para las próximas elecciones, todo un país y gran parte de mundo y los medios internacionales y locales no han despegado el ojo de lo que pasa o deja de pasar con los candidatos.

 

Ya Trump se destacó por sus comentarios en contra de la comunidad hispana y mexicana en Estados Unidos, ahora Clinton en un contra-ataque espera lograr que esas palabras de más que dijo el conocido magnate puedan convertirse en votos para la candidata presidencial que espera convertirse en la primera presidenta de esta nación, si todo va con respecto a las recientes encuestas y estadísticas, que la favorecen.

 

Como se puede ver, para un personaje público, cada aspecto por lo más trivial que parezca puede convertirse en una oportunidad o debilidad en su carrera o metas, ya que al tener millones de personas pendientes de lo que pasa en sus vidas, la opinión pública tendrá un amplio impacto en sus aspiraciones.

 

0

Marketing Digital

La empresa líder en datos digitales E-Marketer se aventura a predecir que en el año 2017 la inversión total en marketing digital en Estados Unidos superará a la inversión en televisión. Estos datos podrían parecer sorprendentes, pero al analizar las tendencias que marcaron el 2016 y 2015, lo más probable es que esto suceda.

 

Uno de los aspectos que hará posible que esto suceda es el auge que tienen en el momento los dispositivos móviles, las marcas deben buscar cada vez formas más directas de llegar a sus usuarios a través de la publicidad y los dispositivos que la mayoría de personas usan en el momento son precisamente los teléfonos móviles. Esta es otra predicción para el año 2017: La publicidad en dispositivos móviles superará la publicidad digital para dispositivos de escritorio.

 

Esta es una estadística que las agencias digitales deben ver más como una ventaja en vez de como un obstáculo, es más las directrices en el desarrollo de productos digitales debe considerar el creciente uso de dispositivos móviles, antes de lanzar un producto se deben considerar las maneras de lograr un alto impacto en este tipo de plataformas y que los desarrollos logrados se muestren de manera apropiada en smartphones.

 

Las empresas que en el momento no consideran el marketing digital como parte de sus estrategias de marketing están desaprovechando ser parte de esta creciente tendencia, siendo parte de pleno siglo 21 la manera de hacer publicidad siempre debe buscar las formas más innovadoras e impactantes posibles, y en el ámbito digital hay aún muchas posibilidades de innovar, controlar y medir los procesos y metas en cuanto a marketing digital se refiere.

 

Es precisamente en la capacidad de medición de retorno de inversión ROI y estadísticas que nos brindan las herramientas digitales, que la publicidad en medios digitales llega a superar a los métodos de publicidad tradicionales, esta posibilidad de análisis y toma de decisiones que el marketing digital nos brinda lo hace una herramienta invaluable y debe ser considerado dentro del presupuesto de publicidad de cualquier empresa ya sea grande, mediana o pequeña.

 

No es realmente aventurado, decir que el marketing digital seguirá creciendo para el 2017 como lo ha hecho hasta ahora, es hora de tomar provecho de este boom y replantear las técnicas tradicionales de promocionar marcas, productos y servicios, hacia técnicas que integren tanto los medios tradicionales como digitales.

 

 

0

Video y Fotografía

A los que pensaban que la realidad virtual ya era algo que había desaparecido les decimos que están muy equivocados, ya que llega Google con su casco de realidad llamado Daydream View, este accesorio está diseñado en un material confortable y suave que hará que el tiempo de juego y exploración sea más cómodo, estos accesorios son diseñados para ubicar un teléfono móvil Pixel o cualquiera compatible con Daydream.

 

Pero a todas estas, ¿Que es Pixel? Pixel es un dispositivo móvil presentado por Google, o como ellos dicen, más que un dispositivo móvil, es un asistente personal, la forma más sencilla de entender a Pixel es como la renovación de los smartphones de Google antes conocidos cono Nexus. Este teléfono va mucho más allá de su antecesor y rompe con las barreras de ser sólo un equipo que saca el máximo provecho del sistema operativo Android, pues lo promocionan como el primer teléfono con Google asistente y además trae incluida la primera app de la plataforma de realidad virtual de Google Daydream.

 

Este es sin duda un salto hacia nuevas posibilidades de lo que puede y lo que no se puede hacer con teléfonos móviles, pues esta forma de incorporar en la realidad virtual los smartphones, piensa en usarse además para ver películas, conéctandose con plataformas como Netflix y similares, el alcance que se le dá al estar pensado para reproducir videos en realidad virtual se ve muy interesante.

 

Este paquete de entretenimiento tendrá un valor de 718 dólares: 639 USD el Pixel y 79 USD el Daydream View  (Aproximadamente $ 2´200.000 COP ), para nuestro país no está al alcance de todos, pero sin duda habrá un público de gamers y aficionados a los gadgets que no dudarán en adquirirlo.

 

La pregunta es: ¿Iphone se quedará quieto en este sentido o tratará de estar a la altura incursionando en el desarrollo de este tipo de dispositivos? Sólo el tiempo lo dirá, por lo pronto esperemos más videos e información acerca de estos innovadores dispositivos que Google nos presenta.

0

Diseño Web

Muchos ya conocemos la increíble ventaja que representan los diseños web adaptables y responsive, podemos remitirnos a artículos de nuestra web para saber más de su definición y proceso e historia web en general; pero ya entrando en datos técnicos como se programa una página web responsive?, a continuación una introducción al respecto.

 

Aunque pareciera un aspecto bastante complicado, todo parte del principio fundamental de adaptabilidad en páginas que es muy básico: Debemos consideras 3 anchos de pantalla como mínimo: uno para smartphones, uno para tablets y otro para pantalla completa, en algunos casos será necesario considerar un ancho extra más que es el de las pantallas de notebooks pequeños que a veces nos dan inconvenientes  si sólo consideramos un ancho completo ya que es muy diferente una pantalla de 980 pixeles de ancho a una de 2000 pixeles de ancho, ya que hay que considerar que cada vez más usuarios acceden desde pantallas grandes por un lado, y por otro mucho más creciente aún, lo usuarios ya tienen acceso a internet móvil y poseen smartphones, además necesitan acceder a la información bastante rápido.

 

Para eso sirven los media queries y hay algunas maneras de añadirlos, se pueden llamar por separado desde el archivo html respectivo o ser pueden ingresar en el mismo archivo, a continuación les expongo un ejemplo en el cual pensamos en 4 tipos de pantallas, acá se intuye que ya tenemos un código para el ancho completo y para especificar en el css los respectivos paquetes los delimitamos con el siguiente bloque de código: @media screen and (max-width: ?px)  {   Bloque de código del ancho respectivo }  en donde ? es el punto máximo en hasta el cual el código es aplicado, luego de rebasar ese ancho pasa al siguiente bloque de css y así sucesivamente, algunos recomiendo empezar con cómo se vé el ancho más pequeño e irlo cada vez agrandando, entre más específicos sean los detalles de cada sección, mejor será la adaptabilidad de los diversos componentes, en este ejemplo tenemos sólo dos elementos, pero con esta misma estructura podemos asignar más elementos, considerando que muchas páginas tienen un header (sección superior), un slider (banners cambiantes) y un footer (sección inferior), sin contar los menús, recuerde que el div respectivo debe nombrado, para realizarle el respectivo llamado desde CSS.

 

 /* smaller than 980  */
 @media screen and (max-width: 980px) {
 /* content */
 #contenido {
 width: 60%;
 padding: 3% 4%;
 }
 /* sidebar */
 #barra-lateral {
 width: 30%;}
 }
 /* smaller than 650 */
 @media screen and (max-width: 650px) {
 /* content */
 #contenido {
 width: auto;
 max-width:450px;
 float: none;
 margin: 20px 0;
 }
 /* sidebar */
 #barra-lateral {
 width: 100%;
 max-width:650px;
 text-align:center;
 margin: 0;
 float: none;
 }
 #barra-lateral img {
 width: 100%;
 max-width:450px;
 margin: 0;
 float: none;
 } #barra-lateral .widget {
 padding: 3% 4%;
 margin: 0 0 10px;
 }
 /* smaller than 560 */
 @media screen and (max-width: 480px) {
 #contenido {
 width: auto;
 max-width:300px;
 text-align:center;
 float: none;
 margin: 20px 0;
 }
 /* sidebar */
 #barra-lateral {
 width: 100%;
 max-width:350px;
 text-align:center;
 margin: 0;
 float: none;
 }
 #barra-lateral img {
 width: 100%;
 max-width:350px;
 text-align:center;
 margin: 0;
 float: none;
 } 

 

Es necesario algo de práctica para dominar la técnica y tener conocimientos en HTML y CSS previos para poder realizar la maqueta correctamente, la mejor versión para maquetar el archivo .html sería por supuesto HTML5 que ya viene optimizado para funcionar en dispositivos móviles y tablets, para tener una buena interactividad es necesario incorporar además Javascript en nuestro sitio, recuerde que para diseñar webs cada vez será más importante pensar en los usuarios, por lo cual el diseño es bueno enfocarlo hacia la experiencia que tendrán los usuarios con las páginas web.

0

Diseño Web

Para la comunidad de diseñadores web y bloggers en WordPress tenemos una noticia en el mundo del desarrollo web, una nueva versión de el actualmente más famoso CMS para blogging y sitios web: WordPress en su version 3.8 o también conocida como “Parker” como homenaje a el legendario maestro del jazz Charlie Parker, está versión de WordPress está en línea desde el 13 de diciembre de 2013, con un nuevo tema para blogs llama Twenty Fourteen y una interfaz de administrador rediseñada y bajo el concepto del diseño web adaptable que ofrece una mejor experiencia de lectura y publicación desde tablets y smartphones, esquemas de color varios para escoger y un diseño de interfaz fresco en las áreas de temas, widgets y escritorio. Y como siempre el formato opensource de WordPress nos permite disfrutarla de forma gratuita, ya ha tenido más de millón y medio de descargas en tan sólo 4 días luego de su lanzamiento. Bueno, y con ocasión del comienzo de las festividades de navidad y año nuevo, ha sido un excelente regalo. Hemos tenido un gran año 2013 con los lanzamientos de WordPress 3.6, 3.7 y 3.8, esperamos que para todos lo haya sido, que nos traerá WordPress para el 2014?

 

La versión 3.8 fué llamada Parker en honor a un maestro innovador del Jazz y el bebop, Charlie Parker y ya está disponible para descarga, una estética moderna y un diseño fresco que transmite claridad y simplicidad. Una tipografía limpia y de código abierto, como todo lo de WordPress. Un contraste refinado, que cambia el look de WordPress al que estábamos acostumbrados.

 

WordPress en cada dispositivo: Debido a que todos accedemos a Internet de diversas maneras, como por ejemplo desde el smartphones, tablets, portátil o PC de escritorio, WordPress ahora se adapta a diversos tamaños de pantallas, lo cual nos hará sentir como en casa. Con alta definición y mejoras en la velocidad, podremos publicar más rápidamente nuestros artículos.

 

Los esquemas de color le darán a su interfaz una increíble capacidad de personalización, con los 8 nuevos esquemas de color que ahora se introducen en el diseño y desarrollo web de esta versión de WordPress.

 

188 personas contribuyeron para que este lanzamiento se hiciera posible y todos podamos acceder a él de manera gratuita.

 

Más información de la versión 3.8 “Parker” de WordPress en su sitio oficial:

http://wordpress.org/news/2013/12/parker/

0

Diseño Web

Responsive Web Design, Diseño Web Adaptativo o Adaptable

 

Todos los días la tecnología avanza de manera sorprendente con el fin de hacer más fácil la vida del hombre y con ella, surgen nuevos deseos y necesidades que demandan la innovación y la mejoría de los productos y servicios que se posicionan en el mercado.

 

Si hablamos de las tendencias en Internet, las nuevas estrategias que se están generando tienen que ver con los usuarios, de hecho su enfoque esta en ellos. Anteriormente existía una gran barrera que separaba al consumidores de los sitios, pues aunque se seguían desarrollando aparatos electrónicos con acceso a Internet, muchas de las paginas no estaban optimizadas para funcionar desde estos dispositivos.

 

Sin embargo ese obstáculo pudo derribarse gracias a las nuevas técnicas que permiten a las páginas adaptarse al contexto de los usuarios actuales y atraer a los usuarios potenciales, y que la muchos diseñadores, programadores y dueños de sitios están implementando.

 

keep reading

0

PREVIOUS POSTSPage 1 of 4NO NEW POSTS