Crear un sitio web que se adapte a las pantallas de nuestros dispositivos móviles ha dejado de ser un lujo para ser una necesidad. Aunque la mayoría de las webs consigue verse de forma decente en un tablet, no ocurre lo mismo con los móviles, por lo que se hace necesario incluir algunas funcionalidades (extensiones o características na hoja de estilos) que permitan adaptar de forma dinámica el contenido que presentamos.
Si preferís tener algo de libertad en lo que a diseño se refiere, la mejor forma es programar la web pensando, desde su inicio, en el aspecto móvil, y para eso tenemos responsivewebcss.com, para que nos ayude en ese punto.
Se trata de una aplicación, presentada hoy en webresourcesdepot.com, que genera el código CSS necesario para poder comenzar a trabajar. Solicita los tamaños y la estructura base de nuestra web y permite bajar archivos html y css para que sean incluidos o adaptados dentro de nuestro diseño, ahorrando mucho tiempo en programación y diseño.
Ya que el resultado es html, tendremos que abrir el código e incluir los elementos dinámicos adecuados para transformarlo en php o cualquier otro lenguaje con el que estemos trabajando, aunque el tener el css ya creado es un paso que muchos agradecerán, tanto para trabajos profesionales definitivos como para los que estén practicando y estudiando diseño web.
Crear el diseño de un sitio web y transformarlo en plantillas con hojas de estilo CSS son dos trabajos que en muchas ocasiones requieren dos tipos de profesionales diferentes, siendo necesario invertir una gran cantidad de tiempo en la transformación de la idea en archivos que un navegador reconozca como «página web».
Si trabajáis con photoshop y queréis agilizar el trabajo, podéis usar varias opciones que ayudan a crear la hoja de estilo, total o parcialmente, opciones que pueden ayudar a ahorrar varios días en la creación del proyecto. Aunque en muchos casos el código generado es bastante «sucio», es una buena forma de no comenzar desde cero.
Una de las últimas opciones que han aparecido en esta categoría es css3ps.com, herramienta que se integra en forma de plugin y trabaja con CSS3.
Es un plugin gratuito para Photoshop que realiza el trabajo en la nube para convertir las capas en CSS3. Tarda bastante en realizar la transformación, pero hay algunas demostraciones en su web que muestran como el resultado puede ser bastante completo.
Existen muchas herramientas creadas para el diseño de prototipos de aplicaciones, pero pocas tan sencillas y prácticas como wireframe.cc.
Se trata de un nuevo proyecto que nos presentaron hace unas horas, orientado para la comunidad de diseñadores, programadores y jefes de proyecto que desean dejar el lápiz y realizar bocetos más realistas directamente en la web.
Podemos seleccionar plantillas para diseño web o diseño de aplicaciones móviles, con la opción de incluir diferentes elementos, cambiar de tamaño lo que hemos seleccionado y alterar la estructura de la información para ayudar a entender mejor el resultado de lo que se va a programar.
Podéis ver una demostración en su página web y empezar a dibujar sin necesidad de registro dentro de wireframe.cc
Artículo escrito por Chaz, diseñador gráfico que trabaja en Breezi, el creador de sitios. Con él los diseñadores pueden crear, administrar y diseñar cada pixel de sus sitios fácilmente.
Chaz también es un “geek” que disfruta del diseño impreso y web, el cine, el freelance y seguir aprendiendo.
Si estás diseñando un sitio web (ya sea con Breezi, Yola, Basekit o cualquier otra herramienta de diseño web), lo más probable es que quieras que genere tráfico para que tu contenido sea visto por su público meta. El diseño web debe ayudar a este objetivo y resaltar el propósito de tu sitio. Es por ello que debes tener usar los elementos adecuados para crear tu sitio, en especial la página de aterrizaje, porque es a través de ellas que tu público meta “aterrizará” en tu sitio. En el ejemplo que vemos aquí es evidente que se usa una frase importante para atraer la atención y dos botones muy claros para que el visitante tome acción de manera inmediata.
Si usas bien una pagina de aterrizaje, es más fácil que tu usuario tome las acciones esperadas en tu sitio: que se registre para una cuenta, que descargue contenido o compre un producto. Con una página de aterrizaje apropiada puedes obtener una alza en tus conversiones (de visitantes a clientes) y cumplir el propósito de tu página o sitio web.
Artículo escrito por Joe, parte del departamento de digital marketing en Breezi, un creador de sitios web que te permite crear y diseñar sitios web con control total de diseño. Él cuenta con más de 5 años de experiencia en SEO, SEM, PPC y sus paciones incluyen diseño web y nuevas tendencias de la web.
Aunque saber usar código y software de escritorio todavía son habilidades muy valoradas, ya no son un requisito para diseñar sitios destacados.
Debido al rápido crecimiento de las apps en línea, los diseñadores pueden crear sitios enteros desde su navegador. Aquí están algunas de las apps que recomendamos a diseñadores para expandir su repertorio (muchas de las cuales son gratuitas).
Breezi es un creador de sitios en línea. Sirve como una base para crear, diseñar y administrar todo el contenido para un sitio. Es diferente a la mayoría de las herramientas para crear sitios porque está dirigido a diseñadores, dándoles una flexibilidad y control incomparables.
Primero escoges un wireframe o un tema prediseñado como punto de inicio y después, comienza a diseñar el sitio que habías imaginado. Tienes control sobre cada pixel de cada página. Todo el contenido es administrado a través de “apps” y con ellas puedes agregar otros servicios en línea (algunos de los cuales los mencionaremos más adelante) a tu sitio Breezi.
Una vez que termines tu sitio, podrás publicarlo e incluso tienes la opción de sincronizar los archivos de tu sitio a una cuenta de FTP si necesitas un respaldo o si quieres hospedar tu sitio en otra cuenta.
Photoshop, o cualquiera que sea la aplicación de escritorio que uses, es una muy buena opción para editar imágenes con un nivel avanzado. Sin embargo, para una manipulación fácil y rápida (con muchas opciones de personalización), debes probar PicMonkey.
Ni siquiera tienes que registrarte y obtener una cuenta: solamente sube tu imagen y utiliza las herramientas de edición. Usa los controles laterales para recortar, cambiar de tamaño o rotar una imagen. También puedes cambiar la exposición, los colores y la acentuación. Modifica la imagen al aplicar filtros, texturas, retoques, textos, gráficos, bordes y más. Cuando termines, guarda y exporta tus imágenes a cualquier formato que desees.
¿Necesitas crear una paleta personalizada de colores o patrones para tu sitio? Entonces, debes utilizar COLOURlovers.com. Es un sitio comunitario con una serie de herramientas que te permiten buscar colores, paletas, patrones y tendencias para inspiración. Puedes usar una herramienta (o más) para crear una propia.
El color es un componente importante en un diseño web sólido, así que esta herramienta es muy útil para crear una paleta de colores para el sitio que estés diseñando. Te ofrecen recomendaciones en relación a los colores que estés usando y existen varias selecciones de colores que puedes usar hasta encontrar los colores exactos que estás buscando.
Una vez que la paleta esté lista, tienes la opción de guardarla, exportarla y compartirla con la comunidad para obtener retroalimentación.
¿Necesitas usar un color en específico que viste en un sitio? Si es así, la extensión de Google Chrome, Eye Dropper, es una herramienta fácil y rápida de usar. Si no usas Chrome, hay extensiones similares para Firefox y otros navegadores.
Solamente tienes que instalar la extensión del navegador y usar el gotero para seleccionar cualquier color que veas en una página. La extensión guarda tus colores y puedes copiar su código hexadecimal para usarlo en letras, fondos y otras áreas de tu sitio.
El color juega un papel muy importante en el diseño web pero la tipografía no se queda atrás. Typecast es una herramienta que sirve para experimentar con diferentes tipos de tipografías. Podrás probar diferentes combinaciones para tus encabezados, subtítulos, el cuerpo de tu sitio, vínculos y más.
También te permiten experimentar con el espaciado entre caracteres, entre líneas de texto, con el tratamiento del color de la fuente, entre otras opciones de estilo. Una vez que hayas establecido la letra que quieras usar, regresa a tu sitio y aplica el formato y estilo al texto de ahí.
Carga y exhibe contenido en tu sitio
Dependiendo del sitio que estés creando, será necesario exhibir diferentes tipos de contenido. Aquí hay algunas de las mejores apps en línea para subir, almacenar e insertar distintos medios y contenido a un sitio:
Dropbox ”“ Una gran opción para guardar y compartir archivos
SoundCloud ”“ Puedes insertar reproductores de audio y de listas de reproducción
Vimeo or YouTube ”“ Para almacenar e insertar videos
Wazala ”“ Una opción de comercio electrónico que puedes insertar en tu sitio
Scribd ”“ Sube e inserta documentos de PDF o diapositivas
Y ahí están. Ahora tienes la opción crear, diseñar y publicar un sitio nuevo al usar estas herramientas en línea. Esta lista solamente es la punta del iceberg de lo que hay en Internet para diseñar sitios. Si tienes una app en línea preferida, haznos el favor de compartirla en la sección de comentarios.
Axiatel, empresa conocida por la venta de servicios de telecomunicaciones para empresas (fax por email, telefonía de empresa o conference call), anuncia ahora un sistema de creación de páginas web que permite obtener presencia en la web sin necesidad de tener conocimientos de programación.
El objetivo es dar la posibilidad al cliente de la creación de una página en internet de una manera sencilla, por precios bajos y sin necesidad de tener conocimientos de informática o diseño web, además de otras interesantes opciones como la adquisición de dominios de manera gratuita.
El sistema es sencillo e intuitivo, permitiendo obtener resultados con solo 10 minutos de tiempo. Nos permite configurar nuestra propia web en pocos pasos existiendo hasta 50 distintos modelos de presentación, siendo posible añadir fotos, vídeos y crear una larga cantidad de secciones para nuestra página, tales como localización en Google Maps, un Formulario de Contacto para los clientes y seguidores o un apartado para Pago por Paypal para que podamos desarrollar una Tienda Online.
Con esta nueva opción podremos tener nuestro propio dominio de forma gratuita usando una larga lista de extensiones (.com, .es, .biz, .org, etc…).
El servicio no es gratuito, pero podemos probarlo durante 30 días sin compromiso. En caso de adaptarse a nuestras necesidades, tendremos que pagar desde 7,9€ al mes, existiendo en su página de creación de páginas web una comparación de los dos planos existentes.
Con la crisis que ha afectado a un buen sector de empresas convencionales y el aumento de empleados freelance, se ha empezado a notar que las oportunidades laborales ahora se encuentran en la red, pero al igual que en la vida cotidiana el trabajo virtual demanda innovación, creatividad, algo impactante que no se limite a la creación de un perfil en Twitter o Linkedin por ejemplo.
Pues bien, en Mashable han compartido algunos buenos servicios para artistas gráficos que desean dar un punto adicional a su perfil virtual publicando su portafolio online de una manera sencilla, sin prescindir en momento alguno de la calidad y con el suficiente poder para captar la atención de un buen número de lectores y clientes. También pueden ser de utilidad para empresas que quieran compartir sus catálogos o promocionarse un poco más a través de la parte visual. En fin, aquí están:
Con una interfaz bastante colorida e intuitiva, Carbonmade muestra una plataforma de portafolios online para artistas gráficos y todo tipo de diseñadores que crean tener el suficiente talento para exhibir sus obras con el público. Son miles de portafolios y millones de imágenes las ya presentes en Carbonmade, de hecho en su sección de ejemplos son destacadas algunas de las mejores. Continúa leyendo «6 fascinantes servicios para publicar tu portafolio online gratis»
Especialmente para las pruebas y análisis de errores en cada desarrollo, Firefox y Chrome ofrecen increíbles arsenales de extensiones para revisar hasta el último fragmento de código, en busca de lo sobrante o modificable, sin necesidad de instalar pesadas y nada portables aplicaciones de escritorio. Las siguientes son algunas de las más populares en la sección de complementos de Mozilla:
Un paquete de utilidades de desarrollo organizadas en forma de barra de herramientas: bloqueo de scripts, cookies e imágenes, edición de CSS, resaltado de características, información específica de los objetos, detalles de formularios, búsqueda de errores y otras decenas de opciones. Continúa leyendo «10 extensiones de Firefox para el desarrollo web»
Para conseguir una verdadera democracia de la información es necesario tener herramientas que permitan a cualquiera poder expresarse de la forma más cómoda posible en Internet. Si bien es cierto que plataformas como blogger, wordpress, tumblr, posterous y compañía hacen una gran labor para permitir la publicación por gente con media y baja cultura digital, a veces es necesario tener más flexibilidad a la hora de definir aspectos estéticos. Es en ese mundillo donde se mueve IMCreator, una nueva herramienta que permite la creación de sitios sin necesidad de conocer conceptos de programación o de diseño web. Basado en plantillas que pueden configurarse y personalizarse, IMCreator me recuerda a Wix.com, que trabaja en Flash y permite el diseño de páginas en Facebook. Es bastante flexible y deja espacio a los que conocen algo de HTML, permitiendo la inclusión de módulos algo más sofisticados que los ya existentes. Por las plantillas que allí podemos ver, parece que está muy enfocado a los profesionales que quieren tener una presencia en la web, ya que sus categorías están basadas precisamente en eso, en especializaciones profesionales. Una buena opción para ser analizada si aún no tenéis ninguna web con vuestra carta de presentación. Link: IMCreator | Vía venturebeat
Por aquí ya os hemos comentado varios trucos para trabajar con CSS3 ahorrando tiempo de programación, hoy ampliamos la lista con un nuevo generados de sombras creado en wordpressthemeshock.com. Podemos alterar varias variables para obtener el resultado deseado, incluyendo tamaño de la sombra, opacidad y desplazamiento. Una imagen de ejemplo irá alterándose en tiempo real para ver el efecto de nuestra configuración. Muy sencillo de usar y muy práctico para quien trabaja con diseño web.
Artículo escrito por Chaz, diseñador gráfico que trabaja en 
