Pag 1 de 191234567»...Última »

Ventajas del diseño responsable web ¡Hay que adaptarse!

Diseño Web, Html, Internet 1 Comentario »

El diseño web ha cambiado de forma espectacular y uno de los requisitos fundamentales desde que estoy en Grupo Idimad es diseñar webs adaptables para todo tipo de dispositivos, utilizando el sistema multicapa, html5, css3 y javascript para lograr un diseño responsive.

Responsive Desing

Uno de los últimos trabajos que he realizado para la empresa Dexconecta especializada en despedidas de soltero en Salamanca, aquí podéis ver su web www.dexconecta.com y su hermana gemela orientada a despedidas de soltero en Madrid, podéis ver el resultado del trabajo en www.dexconectamadrid.es.

Ambos trabajos con tecnología de diseño adaptable (Responsive Design) que os invito a que visitéis desde distintas plataformas ordenador portátil o de sobremesa, Tablet y Smartphone. O en su defecto cambiando el tamaño de la ventana del navegador.

Responsive Desing

¿Por qué nos preocupa tanto que nuestros proyectos sean responsive, hasta el punto de convertirse en requisito imprescindible del diseño?

  • El primero y más evidente es el incremento en las estadísticas de visita que hemos detectado en el tráfico desde dispositivos móviles y tablets. ¡Hay que adaptarse!
  • Por otra parte la experiencia de usuario (la famosa UX) que hace que ante un mercado con tantas resoluciones y sistema operativos en dispositivos de sobremesa se antoja necesaria esa adaptación para que “nadie” se quede fuera. ¡Hay que adaptarse!
  • El posicionamiento, ya que al mejorar la experiencia de usuario, este permanecerá más tiempo en la web, verá más páginas y la navegación será más fluida, cómoda e intuitiva. Todo esto hará nuestro sitio amigable para el usuario y a la par para los buscadores. ¡Hay que adaptarse!
  • votar

    Cuadernos del profesor 8 de php a html con Really-static

    Diseño Web, Html, Mis Trabajos 1 Comentario »

    Una etapa se acaba y con el dolor de ver desmantelado un centro cultural de referencia en Salamanca, como es el CILIJ de la Fundación Germán Sánchez Ruipérez, nuevos proyectos llenos de ilusión se abren en el horizonte.

    Cuadernos del profesor

    Uno de mis últimos trabajos en el CILIJ es la web para el portal de educación de la Junta de Castilla y León Cuadernos del profesor 8, una excelente iniciativa online que ofrece 24 actividades a los maestros y formadores relacionados con el desarrollo de la competencia lingüística, es decir, capacitar al alumnado para que sea capaz de hacer buen uso de la lengua oral y escrita en múltiples contextos.

    Cuadernos del profesor

    Entre los retos de este proyecto estaba el tener que desarrollar con un gestor de contenidos php/mysql con el que trabajar el contenido didáctico del portal y posteriormente migrarlo a html/css y javascript, ya que el servidor del portal de educación de la junta de Castilla y León no admite php/mysql. Para esta tarea utilice wordpress con el plugin Really-static.


    really-static
    really-static

    El pluging me permitió migrar todo el contenido a páginas estáticas amigables html/css y javascript configurando únicamente las urls de origen y las direcciones locales donde guardar la estructura web. El web site se ha depurado con Total Commander y Notepad++ obteniendo el resultado que hoy esta funcionando en la web de educación de la Junta. Espero que os guste, os parezca didáctico e interesante.

    votar

    Crea menús para tu web con cssmenumaker

    Diseño Web, Html 1 Comentario »

    El menú en el diseño web es un recurso fundamental que ofrece niveles de navegación para que el usuario no se pierda en el contenido de una página web. La técnica de personalizar con css las listas de elementos ordenadas o desordenadas es la más utilizada por los diseñadores web. Sin embargo es un sistema engorroso que muchas veces se puede sustituir por menús javascript o frameworks que ya ofrecen la estructura.

    cssmenumaker

    css menu maker es un sistema sencillo que permite la creación de multitud de tipos de menús personalizados para la web on line, sin necesidad de tocar el código html. En los menús freemium se puede usar un asistente para crear el menú completo para tu web, con enlaces incluidos y una vez terminado descargar el código para integrarlo en tu web. Si usas un gestor de contenidos como wordpress o blogger las guías te ayudarán a personalizar el menú que has creado.

    cssmenumaker

    Si deseas acceder a los menús premium o guardar los que has personalizado debes adquirir una licencia Básica (9$ al año) o Premium (19$ al año). Si eres usuario de Dreamweaver la extensión de css menu maker para instalarla en el programa cuesta 29$. Los menús son compatibles con todos los navegadores actualizados.

    votar

    Slideshows javascript adaptables

    Diseño Web, Html 1 Comentario »

    Algunos recursos o comportamientos en la organización de los contenidos de una página web han llegado a ser fundamentales: menús de navegación, botones o zonas de información escondida, pestañas con información clasificada o los slideshows, permiten optimizar el espacio para ofrecer la máxima información.

    slideshow

    En el caso de los slideshows javascript, se ha perfeccionado el diseño, la funcionalidad y opciones como en Roundabout de fredhq creado con jquery, que ofrece un impresionante slide giratorio interactivo que debido al momento actual de máxima diversidad de dispositivos que se conectan a la web, se convierten en recursos obsoletos.

    slideshow roundabout

    Ya no basta con mostrar la información con un diseño bonito, ahora el diseño se tiene que adaptar a la pantalla, debe ser responsable (Responsive desing) y por tanto los recursos que se usan también.

    slideshow bxslider

    El clásico slideshow de imágenes se ha vuelto a reinventar con BXSLIDER que ofrece un slide en jquery personalizable con diseño adaptable a cualquier resolución y dispositivo en tiempo real.

    slideshow layerslider

    Y si buscas algo espectacular no te pierdas SLIDER REVOLUTION o LAYERSLIDER una herramienta que aprovecha las nuevas funcionalidades css3 ofreciendo un slideshow añadiendo las animaciones html que permiten las hojas de estilo. Con un diseño adaptable, los 10$ que cuesta, es una magnifica inversión para crear webs impactantes compatibles con todo tipo de dispositivos y resoluciones. También disponibles como plugin para Wordpress.

    votar

    Crea enlaces con interambio de imágenes

    Diseño Web, Html 6 Comentarios »

    El diseño web cada día es más exigente y determinados comportamientos del ratón son fundamentales para facilitar la navegación entre los contenidos. Cambiar una o varias de las características del texto o la imagen de un enlace es casi un requerimiento fundamental: tamaño, color, opacidad, contorno, fondo o crear una animación…

    hover imagen CSS o javascript

    En el post botones css de texto y gráfico con rollover, he abordado esta tarea, pero en esta ocasión voy a explicar como realizar en enlace con cambio de imagen, para que por defecto se vea una imagen y al colocar el puntero del ratón sobre ella se vea otra.

    Existen 2 formas de hacerlo, con javascript o con hojas de estilo. En ambos casos el resultado es muy similar.

    1) Cambio de una imagen de enlace con Javascript:

    Si eres aficionado a crear páginas web con Adobe Dreamweaver los comportamientos permiten crear el código javascript para el intercambio de imagen en un enlace. Sólo hay que insertar la imagen en reposo, seleccionarla y en la barra de comportamientos seleccionar el + para elegir la opción intercambiar imagen.

    comportamiento o javascript

    Seleccionado la imagen de reposo se pueden ver y cambiar los comportamientos definidos (onMouseOver, OnMouseOut) y seleccionando el body se pude ver o modificar el comportamiento (imágenes/em>) para escoger todas las imágenes que se desea precargar de la web.

    preload comportamiento o javascript

    En el código puedes ver las funciones javascript para precargar imágenes (MM_preloadImages) cambiar imagen (MM_swapImage) y restaurar imagen de reposo (MM_swapImgRestore).

    Ver ejemplo. Descargar ejemplo.

    2) Cambio de una imagen de enlace con CSS:

    El mismo efecto se puede conseguir definiendo una clase CSS que se aplicará a la etiqueta del enlace deseado, para que se visualice la imagen de reposo o la imagen de sustitución deseada cuando se coloque el puntero del ratón encima.

    css hover

    En el ejemplo la clase opcionweb define la imagen de fondo (background-image) que no se repita la imagen (background-repeat) y la posicion de la imagen (background-position) el relleno (padding) define el espacio que debe verse, corresponde con la mitad del espacio horizontal de la imagen (240px) y el alto de la imagen (25px).

    En el hover propiedad CSS que se activa cuando el puntero del ratón esta encima de la imagen, se definen las mismas características que en reposo, cambiando solo la imagen que se desea visualizar, el efecto para el usuario es que cambia la anterior cuando en realidad se sustituye.

    Ver ejemplo. Descargar ejemplo.

    Blog Widget by LinkWithin
    votar

    Pag 1 de 191234567»...Última »

    
    Entradas RSS Comentarios RSS Acceder Subir
    twitter facebook Rss mail rssSígueme en Google Currents