Pract. 7 Una navegación responsive

Y en mi práctica 7 del curso de Introducción al Desarrollo web responsive con html y css de domestika.org de la navegación responsive quise probar una versión que no ocultara o no se solapara al contenido (contraria a la versión solapada del profesor). Porque a saber que contenido tenga la susodicha página, al que tú prestarás atención en ese preciso momento está claro va a ser al menú. Para ello utilicé la propiedad display: block y display: none desde la media query correspondiente con su javascript ya cargado.

navegación responsive que no solapa contenido

Y para las pantallas de más de 600 píxeles como tablets y ordenadores se mostraría este otro tipo de menú que aprovecha el ancho de pantalla.

navegacion responsive

Publicado en Inicio | Deja un comentario

Pract.6 Una estructura responsive – curso de html y css

Estoy como decía metida actualmente, alternando y conciliando claro con otras cosas, con un curso de domestika.org de Introducción al Desarrollo Web Responsive con HTML y CSS de Javier Usobiaga, ya voy por la práctica 6 en la que tocaba crear una estructura responsive con las @media queries. La subí a mi sitio para compartirla y poderla ver también mis otros dispositivos. Conseguí la filosofía mobile first y que hiciera hasta 3 cambios de tamaño de tipo e incluso ;) añadí un background-color diferente para cada ancho de pantalla.

estructura responsive con media queries

Este sería el ancho aprox. para mostrarse en 1 tablet. Está guapo ver como se va adaptando,.. flip, flap! por aquí y por allá! Fué cuestión de dividir el 100% disponible en tantas columnas y porcentajes como requiriera cada dispositivo. Para dispositivos de más de 801px (pc) puse 4 columnas y dentro de un content de un 85% (que contemplamos para los divs interiores como si fuera un 100%) puse mis #box a un width de 22% y un margin (ambos lados) de 1.5%. La cuestión es que la suma total de width y margin haga siempre 100. Es decir: 1,5+22+1,5+22+1,5+22+1,5+22+1,5= 100. Me quedó genial!

Publicado en Inicio | Deja un comentario

Creación de Wireframes y Mockups

Fundamentales hoy día para el diseño y creación de cualquier prototipo de aplicaciones web para cualquier dispositivo, de una forma ágil y efectiva, doy repaso a lo que son los Wireframes (versión en blanco y negro más esquemática y sin fotos, ni logos) y a posteriori los Mockups (versión funcional ya si a color, con las imágenes y logos y las principales funciones de la web o aplicación desarrolladas) se han consolidado como el paso previo indispensable para cualquier buen diseñador web, surgiendo aplicaciones y estandarizándose y agilizándose así un proceso, que antiguamente hacíamos a mano y sin tanta ayuda.

A tener en cuenta que de las funciones de un Mockup, mostraremos ante todo la navegación (con una buena arquitectura de la información de base) y algunos formularios o banners animados. No se ha de porqué ir mucho más allá de momento.

Por mi parte, después del curso de CIFO de l’Hospitalet, con el mismo sobrenombre “Creación  de Wireframes, Mockups y animación multimédia con photoshop” he aprendido, entre otras, que hay herramientas de pago que seguro están muy bien, e inicialmente quise usar, como puedan ser Sketch, Balsamiq o Axure pero que si por algún motivo no puedes, también existen otras semi gratuitas como Moqups o Cacoo Diagrams que te permiten probar y crear unos cuantos wireframes o tu site map inicial.

Site Map proyecto web mockups Sala Liberat

Luego siempre tendremos la opción de bajarnos unos free “wireframe kits” para Photoshop:  ahí va uno: http://www.bypeople.com/free-psd-and-sketch-wireframing-kit/ con todo lo necesario para acabar de definir haciendo nuestra versión editable y lograr así unos estupendos mockups.

Publicado en Inicio | Deja un comentario

Verano y cursillos o seminarios

Bueno, bueno… ya llega el verano por fín y con él esos meses en que mucha gente decidimos apuntarnos a cursos y seminarios varios para ampliar nuestros conocimientos en él ambito gráfico y web. Por mi parte he elegido Soft Obert para tal fín y os lo recomiendo encarecidamente. Los profesores están bastante preparados y las instalaciones no son con Macs pero están perfectamente adaptadas (no me llevo comisión que conste) pero me han caido bien ;) .

De momento solo os puedo hablar de los cursos de Community Manager y WordPress. Próximamente haré unos de Google Analytics y adwords . Los precios son bastante razonables pero vigilad bien cuales son vuestras necesidades.

Publicado en Inicio | Deja un comentario

Herramienta 3D de illustrator

Mucha gente debe conocer la herramienta de efecto / 3D de illustrator / extrusión y viselado. Es una herramienta que muchos hemos desestimado por no conseguir los efectos deseados de iluminación o contraste en las letras. Hace unos días estube investigando y buscando algunos tutoriales acerca de esta herramienta y encontré este video de conectatutoriales: Texto en 3D con Illustrator/1- Conecta tutoriales

Tiene una 1a y una 2a parte en la cual tenemos que colorear las letras y aplicarle algún fondo. Lo estube siguiendo y finalmente logré crear mi propio texto en 3D con un background de nubes. Las nubes son unos pinceles que me descargué de brusheezy.

Publicado en Photoshop / illustrator, Photoshop / illustrator tips | 13 comentarios

¡Bienvenid@s a Recursos-cs!

Bienvenido a recursos-cs. En esta página encontrarás información y tutoriales relacionados con ámbito gráfico y web recopilado de otros portales y páginas de interés. Mi idea con este blog es intentar tener un poco más a mano todo el material de recursos que he ido recopilando en estos últimos años de modo que pueda tenerlo todo más a mano. Os invito a visitar mi porfolio de diseñadora gráfica, web y multimédia en http://carolinaserrano.es

Publicado en Inicio | Deja un comentario