por Carlos Doral | | Blog, CSS, Diseño web, Gestión proyectos
Adaptar tu página web a móviles, tabletas, smartphones, ipad, iphone, android, etc., es algo que puedes hacer si cuentas con un profesional en diseño y maquetación CSS3. A este tipo de diseño se le denomina responsive, aquí te dejamos otro artículo relacionado.
Muchas veces nos preguntan si es necesario tener dos versiones de la misma web, una para ordenadores y otra para dispositivos móviles. Si la web está bien realizada y diseñada no es necesario, el HTML de las páginas es el mismo y lo que varía son los estilos CSS, los cuales deben definir las conocidas media query para ajustar el layout de las páginas en función de la anchura del dispositivo. En definitiva: si tienes una web bien diseñada no necesitas dos versiones.
¿Puedo adaptar mi web actual a móviles y tabletas?
Si tu página está realizada en HTML, maquetada en capas y con posicionamiento relativo es muy posible que sí se pueda adaptar. Si por el contrario está realizada en Flash o maquetada con tablas en lugar de capas o con posicionamiento absoluto será bastante más difícil, consúltanos si necesitas una opinión técnica.
Si tu página esta medianamente bien hecha simplemente se le inyecta un archivo .CSS al final de la cabecera que reescribe las reglas de estilo actuales de la página, adaptándola a las diferentes anchuras de dispositivo.
En ocasiones hay que modificar la renderización del HTML para crear contenedores o adaptadores paternos y esto puede complicar el trabajo, sobre todo si la página genera contenido dinámico.
por Carlos Doral | | Blog, CSS, Herramientas online, Iconos, Recursos gratuitos, Tipografías
Hemos descubierto un estupendo recurso gratuito que te permite crear una tipografía de iconos personalizada. En esta web hay disponibles diferentes juegos de iconos gratuitos para que puedas seleccionar cualquier de ellos y además puedes subir tus propios iconos vectoriales para crear una tipografía completa.
Este es el enlace: Fontello
por Carlos Doral | | Blog, CSS, Diseño web, Gestión proyectos
Si tienes una página web antigua necesitarás adaptarla a teléfonos móviles y tabletas si quieres que desde estos aparatos puedan visitar tu página. No se debe menospreciar este mercado de dispositivos porque actualmente un 66% de los visitantes web proceden de visitas realizadas desde teléfonos móviles, tabletas, televisores con conexión a Internet, etc.
Adaptar una página web a dispositivos móviles y tabletas no es demasiado complejo pero sí requiere de un diseñador web que tenga conocimientos en maquetación HTML5 y CSS3 para que sea capaz de crear un diseño responsive o adaptable.
Si nunca has oído hablar del diseño responsive te lo explicamos a continuación. Este tipo de diseño lo que hace es adaptar el contenido de la página a la anchura de la ventana de navegación de tal forma que el contenido nunca aparece recortado horizontalmente. El contenido se va distribuyendo hacia abajo de tal forma que sólo se utiliza el scroll vertical. Esto, que puede parecer una tontería, es muy importante porque los dispositivos permiten rotación y cambian la anchura de la ventana constantemente y si la página es adaptable el contenido se estirará y encojerá de forma flexible evitando tener que utilizar la barra de scroll horizontal.
Si por un casual tu página web está realizada en Flash entonces no podrás realizar una adaptación para teléfonos móviles y tabletas porque estos dispositivos no soportan la tecnología Flash y en ese caso lo que tendrás que hacer es crear una página web totalmente nueva, desde cero. Siempre puedes crear tu nueva página en base a la página actual intentando conservar texto e imágenes pero en ningún caso debes continuar con tu página Flash porque no se va visualizar en esos dispositivos puesto que se ha dejado de soportar esa tecnología. Por eso insistimos a nuestros clientes que tener una página Flash es como no estar en Internet hoy día.
Si estás pensando renovar tu página porque es antigua esta es la ocasión para pasarte a WordPress, la mejor herramienta para tener una página web viva, gestionable, con blog, de diseño responsive, orientada a SEO, con un catálogo enorme de diseños de plantilla para que puedas elegir el que mejor se adapte a tu actividad y lo mejor: más de 27.000 plugins gratuitos para ampliar las funcionalidades de tu web de forma casi infinita!
por Carlos Doral | | Blog, CSS, Herramientas online, jQuery, Recursos gratuitos
Hemos descubierto esta magnífica herramienta online llamada LiveWeave que nos recuerda mucho al editor de texto Sublime. Permite crear/editar archivos HTML, CSS y Javascript y probar el funcionamiento en el momento. Ideal para crear maquetas instantáneamente, quizá este sea el futuro de los editores de código e IDEs.
Aquí está el enlace.
por Carlos Doral | | Blog, CSS
Esta es una interesante colección de ejemplos de algunas propiedades CSS3. Viene muy bien para no olvidar ninguna de ellas o aprender alguna característica poco conocida, como poner múltiples imágenes de fondo, colores HSLA, imágenes en bordes y otras más.
Lo bueno es que según la característica nos dice la compatibilidad con los navegadores que la soportan, aquí está el enlace.
por Carlos Doral | | Blog, CSS
Aquí dejamos un enlace de una página que tiene una interesante colección de ejemplos de transiciones CSS3. Para los que no lo sepan, las transiciones CSS3 son el futuro de las animaciones en las páginas web.
CSS3 nos permite crear animaciones de todo tipo: rotaciones, escalados, efectos de opacidad, desplazamientos, etc. y ahora mismo son soportadas por la gran mayoría de navegadores web modernos aunque hay que esperar un poco a que desaparezcan de escena reliquias como IE8 que impiden su implantación definitiva.
Actualmente algunas web optan por usar transiciones CSS3 pensando en navegadores modernos y pasan olímpicamente de los navegadores antiguos. En mi opinión y a día de hoy no es aconsejable para dar este paso, es importante pensar en navegadores obsoletos como IE8 que todavía tienen una cuota de mercado importante.
Muchas páginas crean sus animaciones usando Javascript como alternativa a CSS3 pero el consumo de recursos es mayor, lo ideal es CSS3 ya que las transformaciones y procesos se realizan sobre el hardware nativo, lo cual ofrece mayor rapidez, fluidez y menor consumo de memoria.
Aquí está el enlace.
