Blog de Diseño Web

Iniciar Sesión en Nuestro Sitio

Viernes, Marzo 31, 2017

Programando un Diseño Web Adaptable

Lunes, 16 Diciembre 2013 by Jorge Forero

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.

Etiquetado como:

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/

Etiquetado como:

Que es el Diseño Web Adaptable?

Martes, 10 Diciembre 2013 by Jorge Forero

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.

Etiquetado como:

Infografías Sobre Diseño Web y Redes Sociales

Jueves, 10 Octubre 2013 by Jorge Forero

Las infografías son útiles maneras de representar gráficamente estadísticas, textos, descripciones y narraciones, en las cuales representamos los datos de una manera icónica, figurativa, gráfica, e incluso sonora, animada e interactiva. Las infografías son medios para mostrar los datos e información gráficamente a través de infogramas, que pueden ser mapas, estadísticas, íconos, gráficos comparativos, viñetas, con los que la información se hace más completa y detallada y el elemento gráfico la hace más comprensible y amigable.

En esta ocasión hemos elaborado una selección de infografías útiles para la comunidad del diseño y desarrollo web y social media, las infografías permiten comprender rápidamente algunos aspectos ya que al ser mostradas de una manera gráfica la información se vuelve más clara, si desea un diseño específico de alguna infografía y mostrar la información de una manera distinta e impactante no dude en contactarnos.

Etiquetado como:

El Diseño Web en Colombia

Jueves, 11 Julio 2013 by Jorge Forero

El papel de los diseñadores de websites colombianos

En Colombia el diseño web es una rama en constante aumento y en este año 2013 vemos un auge en nuestro país de esta disciplina. Las ventajas de emprendimiento que presenta nuestro país le dá a los diseñadores web gran ventaja a la hora de crear empresa y eso es una ventaja. Es por esto que cada vez más crecen las redes de freelancers en américa latina y a través de ellas el networking entre países a avanzando.

El creciente intercambio de Colombia con naciones como por ejemplo Estados Unidos, países centro americanos e incluso España y Europa, y la buena respuesta con trabajos de calidad y a precios competitivos, nos abre las puertas al mundo y se empieza a ver una tendencia como lo que pasa por ejemplo en India y China, que son países que, al tener un bajo costo en programación y alta competencia, le ofrecen a las "Grandes Potencias" trabajos de buena calidad a precios competitivos.

Debido a que el mercado local colombiano de las páginas web tiende a la saturación, los diseñadores web colombianos debemos mirar cada vez a tener nexos y ofrecer servicios a empresas en el exterior y para poder seguir siendo competitivos en un entorno local hay que ofrecer un producto de mejor calidad y diferenciador frente a la competencia.

Es importante el aspecto del valor agregado que le imprimimos a nuestros productos, la posibilidad de ofrecer servicios integrativos también amplía las ventajas a la hora de poder integrar paquetes de servicios que puedan satisfacer las expectativas de los clientes.

En dweb3d estamos comprometidos con nuestra nación y con ofrecer siempre los servicios de la mejor calidad, servicios con valores agregados como la posibilidad de ofrecer páginas autoadministrables, incluir capacitación para que el usuario final actualice sus páginas web, incluir consejos de posicionamiento e integrar un blog corporativo a nuestras páginas, así como la integración de lo que se conoce como web 3d y diseño gráfico 3d, disciplinas que integran el diseño web y el diseño web.

Como parte de nuestra visión, está la posibilidad de formar redes, vínculos y alianzas estratégicas, con empresas nacionales e internacionales para dar a conocer la calidad e impacto de nuestros diseños dentro y fuera del país.

Con integración de los sitios diseñados con estrategias digitales que incluyen marketing online, publicidad en google adwords y social media, optimización en motores de búsqueda (posicionamiento seo), interconexión con redes sociales, blogging corporativo, y técnicas como el email marketing, hará que sus webs sean de alto impacto y aumenten su tráfico.

Etiquetado como:

Bienvenidos a la nueva plataforma de Dweb3d.com

Martes, 11 Junio 2013 by Jorge Forero

Con el fin de mejorar nuestros servicios y la atención a nuestros actuales y futuros clientes les presentamos la nueva Dweb3d.com

En la nueva versión de nuestra página web, podrán explorar el estilo fresco y profesional que les traemos para este año 2013, siéntanse libres de opinar sobre como le parece esta nueva versión de dweb3d con respecto a la anterior, siempre nos estamos esforzando por mejorar la calidad de nuestros productos y servicios, los invitamos a explorar las nuevas secciones de nuestro website.

Historia del Diseño Web

Viernes, 19 Abril 2013 by Jorge Forero

Historia de Internet y del Diseño Web

Una historia corta pero que crece a pasos agigantados

La historia las páginas de Internet es corta, cambia a pasos agigantados, pues va de la mano con la historia de Internet. Cambia asimismo de maera radical incluso la forma en que vivimos nuestras vidas. Más importante aún, Internet ha creado miles de empleos y de nuevas profesiones que a pesar de que van cambiando de nombre, apareciendo y desapareciendo, hay muchas que se van consolidando y se vuelven una importante fuente de empleo de manera global en el sector servicio. Entre las nuevas profesiones que han surgido están incluidas, el social media manager, el community manager, que luego evolucionan en la estrategia digital, así como el maketing online, posicionamiento en buscadores SEO, los bloggers y por supuesto, el diseño web.

Aunque el diseñar páginas web es una profesión que sólo ha estado con nosotros durante las últimas décadas, se ha convertido en una parte importante de nuestras vidas. Se imaginan un Internet sin animaciones, diseño adaptable, fuentes incrustadas ni hojas de estilos? El diseñador web es quien se encarga de estos aspectos.

Rápidamente el diseño web ha ido evolucionando a medida que ha evolucionado Internet. Al principio los portales eran construidos con solo texto, pero poco a poco la inclusión de imágenes, videos y animación 3D ayudaron a caracterizar los sitios en la red, volviéndolos más interesantes e interactivos.

Etiquetado como:

Tendencias en Diseño Web para el 2013

Miércoles, 06 Marzo 2013 by Jorge Forero

Diseño Web Adaptable o Responsive, Mayor Importancia a los contenidos y los dispositivos móviles serán las tendencias para este año

Con un nuevo año vienen nuevas tendencias, y son tendencias que ya venían cocinándose desde el año pasado, era de esperarse además por la creciente ola y arremetida de los dispositivos móviles que el acceso a las páginas web desde smartphones, tablest y demás dispositivos portátiles, es además una tendencia que viene reflejada con la creciente venta de celulares inteligentes y con ello el acceso a internet desde este tipo de dispositivos, la disminución en producción y hasta la casi desaparición de los notepads, que pierden la batalla frente a las tablets que cada vez se producen de manera más masiva.

Es por esto que las tendencias en diseño web de este vienen relacionadas con la importancia en accesibilidad, la importancia hacia el usuario y los contenidos de calidad, así como el uso de minimalismo en el diseño, tipografías cada vez más cercanas a los impresos, el uso de espacios en blanco, colores planos y simplicidad en el diseño.

Etiquetado como:

Diseño Web 10 razones para elegirnos

Viernes, 08 Febrero 2013 by Jorge Forero

Una excelente solución en diseño web

Por qué elegirnos? Les presentamos en este artículo 10 razones para escogernos como su solución en páginas web.

    • Diseño de Páginas web optimizadas y pensadas hacia el posicionamiento en buscadores, analizamos y detectamos sus palabras clave con más oportunidades de negocio, esto es lo que utilizaremos en el momento de implementar el contenido de su website, optimizar el posicionamiento web (SEO) y para posibles estretegias de marketing online.

 

    • Excelente relación costo - beneficio: Al contratar nuestros productos y servicios obtendrá mucho más por una menor inversión, lo cual hace nuestros precios bastante competitivos.

 

    • Capacitación en CMS: Nuestros paquetes de diseño web con contenido administrable incluyen capacitación para que usted mismo pueda actualizar y publicar en su sitio web.

 

    • Somos especialistas en estrategia digital, podemos acompañar nuestro producto haciendo constantes análisis para detectar cuáles son las mejores opciones de inversión en cuanto al marketing online, posicionamiento en buscadores, social media, blogs y aspectos relacionados, lo cual podrá traducirse en ingresos para su negocio y posicionamiento de su marca.

 

    • Diseño web adaptable, responsivo o adaptativo: Nuestros diseños web se ajustan a los diferentes dispositivos de navegación, incluyendo tablets y smartphones, este aspecto nos dá una ventaja si tenemos en cuenta que la cantidad de usuarios de dispositivos móviles va en considerable aumento, aumentando así las posibilidades de visitas de su página y mejorando las posibilidades de eficiencia de una estrategia de marketing.

 

    • Protección a sus datos y seguridad de su dominio: Sus datos están seguros con nosotros, se firmará un acta de exclusividad para su uso, también tendrá seguridad respecto a la propiedad de su dominio.

 

    • Herramientas de análisis a las cuales usted mismo podrá acceder: Instalamos herramientas de análisis en su sitio web como google analytics y google webmaster tools, para poder obtener información vital en la toma de decisiones respecto a que camino tomar en nuestra estrategia digital, usted podrá acceder a dicha información y podrá estar al corriente del estado de su sitio web.

 

    • Blog corporativo: Nuestras páginas incluyen la opción de poseer un blog corporativo, es una excelente opción a la hora de posicionarse, podemos acompañarlo continuamente en su desarrollo y correcto enfoque, basados en las herramientas de análisis y estrategia digital.

 

    • Contínuo seguimiento y análisis para obtener mejores resultados: Uno de los aspectos más importantes de su página web unauesta en funcionamiento, es contar con la posibilidad de contínua implementación y orientación, esto nos permitirá optimizar su posicionamiento y aumentar las oportunidades de conversión de su negocio.

 

    • Soporte: Manténgase conectado con nosotros por medio de nuestro twitter, redes sociales, chat personalizado, por vía telefónica o la vía que prefiera, le brindaremos oportuno soporte a sus inquietudes.

 

Etiquetado como:

Esencia y Concepto en Diseño Web

Jueves, 23 Agosto 2012 by Jorge Forero

Por donde comenzar como desarrollador y diseñador de páginas web.

Es importante entender la esencia de lo que el diseño web significa en sus diferentes niveles, por ejemplo, usabilidad, diseño adaptable y estándares de calidad, sería excelente tener las herramientas de adobe a disposicion, ya que se necesitaría tal vez un video, ya que en la web el video es una forma muy directa de llegar a los usuarios, otro nivel muy importante es la difusión que se le dará a la página en social media y la optimización para buscadores, además podría ser útil un programa como illustrator, ya que elementos como las infografías son importantes a la hora de mostrar información, pueden ser más directos para los usuarios y sobre todo, fáciles de entender.

Etiquetado como:
CONTACTO

Jorge Enrique Forero 3D & Web Design, UX, SEM
WA: +57 3017678964 +57 310 696 92 16
Natalia Rodriguez: 3015744338 +57 6710942
Email:
Skype: jorge.forero.design

Dweb3d contrate nuestros servicios de websites y marketing digitalContáctese con dweb3d

SUSCRÍBASE Y COMPARTA EN SOCIAL MEDIA
Scroll to top