Categoría: CSS

Ejemplo práctico de diseño de interfaz con Sketch
Crea tu propio UI kit usando Sketch. Descubre cómo puedes hacerlo sin dificultad gracias a la sencillez de manejo y las herramientas que pone a tu disposición este programa y descubre a la vez las herramientas de Sketch 2 y Sketch 3 para crear tus diseños vectoriales de manera más ágil y rápida.
Sketch es una aplicación profesional para crear gráficos vectoriales e interfaces detalladas, desarrollada por Bohemian Coding y disponible para sistemas Mac. Claramente enfocada a los diseñadores digitales, Sketch dispone de un elevado número de herramientas y capacidades para crear contenido con un alto grado de detalle, contando además con un espacio de trabajo sencillo e intuitivo.
Ejemplo práctico de diseño de interfaz con Sketch
Novedades en Sketch 3: Bohemian Code lanza su versión 3 en 2014, con algunos cambios en la interfaz y varias novedades interesantes, que repasamos en este vídeo.
Aprende a crear contenido gráfico sin apenas dificultad y mejora tus habilidades con Sketch. El límite será tu creatividad. Anímate a realizar tu propio diseño de un kit de interfaz formado por diferentes módulos tan diferentes como elementos de paginación, un mini reproductor musical, bloques de perfil de usuario, botones sociales, etc.
Campos de formulario en nuestra interfaz: Enlazaremos estilos entre diferentes elementos para crear un surtido de campos de formulario.
Este curso está pensado para usuarios que conozcan mínimamente el programa y quieran mejorar su destreza con el mismo, viendo lo sencillo que es emplear sus herramientas para crear contenido visual y real. En cualquier caso, la curva de aprendizaje es tan poco pronunciada, que también puede servir como introducción y acompañamiento durante la primera toma de contacto con este programa disponible para entornos Mac.
Combinaremos herramientas vectoriales, textos, imágenes, etc. para poder ir completando los diferentes ejercicios planteados, de una forma tan sencilla que si usamos otros programas, quizá estemos ante un entorno de trabajo diferente que terminemos incorporando a nuestro día a día.
Ejemplo práctico de diseño de interfaz con Sketch
Curso relacionado:
Diseño web con Sketch
26 de junio de 2014
Especial WordPress: Personalización de temas
Adapta y personaliza plantillas de WordPress
En la web podemos encontrar cientos de plantillas de WordPress, que siempre serán eso: una plantilla. En este curso aprenderás a personalizar temas de WordPress, tanto del front end como del back end para lograr el aspecto y el efecto deseado. A través de ejemplos prácticos conocerás una mecánica de trabajo que te facilitará el acceso a las propiedades de los principales elementos visuales de WordPress y te adentrarás, paso a paso y de forma sencilla, en la adaptación de temas a través de:
- la parametrización,
- la edición de hojas de estilo,
- la inserción de fragmentos de código,
- la aplicación de trucos y
- la instalación de extensiones.
Especial WordPress: Personalización de temas
WordPress es un sistema de administración de contenidos web (CMS) extremadamente popular. Gratis y open source, WordPress empezó como una herramienta para blogs, pero hoy en día es utilizado para construir todo tipo de sitios, desde portafolios personales hasta los 500 blogs de Fortune o sitios web de servicio completo de todo tipo de negocios, organismos sin fines de lucro y universidades. Con WordPress, los usuarios pueden cambiar la apariencia de su sitio utilizando temas preconstruidos o personalizados y agregando características y funcionalidades -como la detección y adaptación de dispositivos móviles – a través de plugins.
Hay dos versiones de WordPress: WordPress.com es la versión alojada, con una gran selección de plugins, widgets y temas no personalizables disponibles. La versión de alojamiento propio, WordPress.org, ofrece control completo sobre el branding y la funcionalidad del sitio.
La oferta existente de plantillas o temas para WordPress resulta verdaderamente desbordante. Podemos encontrar diseños de todos los estilos, concebidos además para todas las finalidades específicas imaginables. Sin embargo, una plantilla siempre será una plantilla, por definición, impersonal, para que sirva a un número indeterminado de usuarios.
Configuración de un sitio en Dreamweaver: En este vídeo seguimos unos sencillos pasos para la configuración del proyecto en Dreamweaver, vinculando nuestra copia local con la remota.
La apariencia gráfica de nuestra web habla de nosotros y quiere captar la atención de los visitantes, con lo que personalizar un diseño no es sólo cuestión de estética, sino también de efectividad y de negocio.
En este curso profundizaremos en la personalización de temas para WordPress, entendiendo una plantilla como un punto de partida perfectamente válido para el diseño personalizado, que marcará la diferencia entre nosotros y nuestros competidores, ya se trate de una web empresarial, un blog corporativo o un sitio personal.
Edición de los enlaces de nuestra web: Modificamos las propiedades de los enlaces, cambiando el color de sus diferentes estados.
Paso a paso y de forma sencilla aprenderás a modificar un tema de WordPress adaptándolo a tus necesidades, tanto si se trata del “front end” como del “back end”. Seguirás una mecánica de trabajo que te facilitará el acceso a las propiedades de los diferentes elementos que conforman la apariencia gráfica de un tema.
Edición del color de selección en la web: Cuando seleccionamos un texto, este se envuelve de un color para indicar su estado. Este color no es arbitrario, en realidad está definido en las hojas de estilo.
A través de la parametrización, la edición de hojas de estilo, la inserción de fragmentos de código, la aplicación de algunos interesantes trucos y la instalación de extensiones, serás capaz de cambiar completamente el aspecto visual de un tema. Sabrás dónde y cómo actuar para realizar las modificaciones que desees, pues contarás con las herramientas precisas para lograrlo.
Una vez concluido el curso contarás con las herramientas que te capacitarán para cambiar completamente el aspecto visual de un tema de WordPress.
Especial WordPress: Personalización de temas 21,08€ (15% descuento)
24 de junio de 2014
Desarrollo web con Bootstrap 3
Diseña y maqueta una web responsive de principio a fin.
Bootstrap es uno de los frameworks front end más utilizados, por su agilidad, su flexibilidad y la rapidez con la que se trabaja con él. Aprende con un ejemplo real la mecánica de trabajo con Bootstrap 3 para lograr maquetar webs que se adapten a dispositivos mediante responsive web design. Comprueba cómo el uso de Bootstrap 3 desde el diseño agilizará la maquetación y simplificará asombrosamente el desarrollo cliente, con resultados rápidos y profesionales.
Curso Desarrollo web con Bootstrap 3
Bootstrap es el framework de código abierto de Twitter, que proporciona una serie de herramientas para el diseño de sitios web responsive y aplicaciones web. Sus plantillas de diseño están basadas en HTML y CSS e incluyen formularios, botones, tablas, y muchos otros elementos de la interfaz. En el servicio de alojamiento de GitHub es uno de los proyectos más populares.
Con este curso totalmente práctico de Bootstrap 3 aprenderás a enfocar un proyecto web compatible con dispositivos móviles desde el inicio, del diseño a la maquetación, adaptándote a la filosofía mobile first que impone el propio framework y aprovechándote de las magníficas herramientas que pone a tu disposición para trabajar el Responsive Web Design de una manera ágíl y correcta.
Estructura contenido detalle. Header y formadores: Crearemos la estructura para la página de detalle, comenzando por la información general, zona de formadores y cabecera para el titular.
Mediante el uso de Bootstrap en su versión 3 no solamente estarás adquiriendo conocimientos que te pueden permitir tener un nexo de unión con cualquier empresa o estudio de diseño y desarrollo web al emplear un framework globalmente aceptado y extendido, sino que estarás aplicando metodologías y técnicas que harán tu trabajo no solamente eficaz, sino eficiente.
Descubrirás una metodología de trabajo que te permitirá adelantarte a posibles problemas en la maquetación de algunos elementos en diferentes contextos responsive y dominarás las bases del sistema de rejilla que integra, para lograr maquetar sitios webs en un tiempo récord.
Adaptación zona workshops: Entenderás qué implica la filosofía «mobile first» que sigue Bootstrap 3 y cómo no seguir ese criterio nos puede llevar a situaciones no deseadas. Corregiremos los problemas encontrados y ajustaremos el HTML y los estilos para lograr una correcta visualización en todos los contextos.
Si ya maquetas webs, este curso te enseña a usar una herramienta que te convertirá en un mejor profesional, para no solamente ser eficaz, sino lograr ser rápido y eficiente, cualidades indispensables en el desarrollo profesional. Si te dedicas al diseño y necesitas una buena herramienta para comenzar a maquetar, este curso te mostrará la simplicidad de la estructura de Bootstrap 3 y sus componentes, para partir con mucho del camino ya recorrido.
Curso Desarrollo web con Bootstrap 3
Relacionado: Curso Bootstrap 3
22 de junio de 2014
Crea tu web con WordPress y sin tocar código con Artisteer
Crea tu primera web desde cero con WordPress y Artisteer.
Mi primera web con WordPress
¿Quieres hacer una web y has oído hablar de WordPress? En este curso aprenderás, paso a paso, y de principio a fin, a desarrollar una web dotada de administrador de contenidos y de diseño adaptativo, una web creada con Artisteer y articulada sobre el proyecto de código abierto WordPress. No necesitarás ningún conocimiento previo y no tendrás que editar ninguna clase de código, puesto que crearemos la web desde Artisteer, un entorno de trabajo completamente visual que te resultará sencillo y familiar del que ya hablamos en este blog en 2009 Diseñar themes para WordPress al estilo Office | Artisteer
Primer contacto con Artisteer y su interfaz de usuario: Establecemos una primera toma de contacto con la aplicación y nos movemos a través de su interfaz.
Artisteer es una herramienta de creación de temas web desarrollada por Extensoft. Es un editor WYSIWYG automatizado (es decir, permite ver el resultado final mientras se está editando) y oculta los detalles del código HTML para que el usuario pueda crear temas web sin necesidad de programar. Permite diseñar temas para CMS sin necesidad de conocimientos o habilidades técnicas, usando código XHTML y CSS, y gracias a la opción “Suggest design” que ofrece diseños ya creados. Está disponible desde 2008 para Windows.
Front end y back end: Es muy probable que hayamos oído hablar del front end y del back end, quizá incluso los entendamos como las dos caras de una misma moneda. En este vídeo conoceremos qué son y qué función tiene cada uno realmente.
En un momento en que el desarrollo web se torna complejo para diseñadores y desarrolladores, una aplicación alcanza la madurez necesaria como para ser considerada como una opción de primer orden, se trata de Artisteer.
Cuando la tecnología Flash ha perdido gran parte de su importancia en la web y los dispositivos móviles con conexión a internet han demostrado que han venido para quedarse, a los creadores web se les exige un diseño que cuente con la calidad que ofrecía Flash, con el añadido de que éste se adapte a todas las pantallas del mercado, y generalmente, que además permita administrar sus contenidos vía web.
Elección de los colores base de la web: Iniciamos el proyecto seleccionando los colores base de la web, aquellos que servirán como referencia para todos los demás.
Este curso te muestra el camino más sencillo y eficaz de realizar una aplicación web que cumpla a nivel profesional con los requisitos exigidos. De la mano de video2brain, desarrollarás un proyecto avanzado de enorme potencial. Paso a paso, y de principio a fin, crearás una web con Artisteer que quedará articulada sobre la plataforma de código abierto WordPress.
Página estática: La clínica: Creamos la página y el contenido del apartado La Clínica, realizando una maquetación que se apoyará en las herramientas de composición de Artisteer.
Creación de una entrada en el blog: Aprendemos a realizar una entrada en el blog y observamos su comportamiento.
Sin necesidad de conocimientos previos, sin tener que insertar una sola línea de código, te resultará tan sumamente sencillo que no te lo podrás creer. Tanto si te dedicas al diseño, como si lo tuyo es el desarrollo, Artisteer te va a fascinar.
Mi primera web con WordPress
21 de junio de 2014
Crea aplicaciones móviles multiplataforma con jQuery y PhoneGap Build
PhoneGap es un framework de código abierto de Adobe para crear el desarrollo de aplicaciones móviles con tecnologías estándar HTML, CSS y JavaScript.
Las aplicaciones resultantes son híbridas, es decir que no son realmente aplicaciones nativas al dispositivo (ya que el renderizado es realizado mediante vistas web), pero no se tratan tampoco de aplicaciones web.
Crea aplicaciones móviles multiplataforma con jQuery y PhoneGap Build.
PhoneGap maneja APIs que permiten tener acceso a elementos como el acelerómetro, cámara, contactos en el dispositivo, red, almacenamiento, notificaciones, etc.
Actualmente está disponible como servicio dentro de Creative Cloud.
Curso completo de PhoneGap. De 0 a 100
Plantearse desarrollar aplicaciones en el código nativo de cada tipo de dispositivo no es viable para la mayor parte de proyectos, por eso PhoneGap es uno de los frameworks de referencia para la creación de contenidos programados en HTML5 y compilados como aplicaciones nativas para IOS, Android, etc. Aprende a crear aplicaciones en formato nativo Android, iOS, etc. aprovechando la facilidad de compilación de Phonegap Build y Dreamweaver y utiliza jQuery mobile para reducir el tiempo de desarrollo en tus proyectos.
La creación de una nueva app para dispositivos móviles se enfrenta siempre a una pregunta fundamental: ¿para qué plataforma móvil vamos a programar? El lanzamiento de una app para iPhone y Android nos obliga a realizar dos desarrollos, con el consiguiente gasto de esfuerzo, recursos y dinero. Y no digamos si además, queremos incluir otras, como Windows Mobile.
PhoneGap 3.1 y PhoneGap Build son una solución para este problema, ya que permiten desarrollar usando HTML5 y librerías JavaScript, como jQuery Mobile, y compilar en código nativo para diferentes plataformas móviles.
Estructura de los contenidos en jQuery Mobile: jQuery Mobile tiene una estructura propia a la hora de crear páginas y montar los contenidos, y en este vídeo explicaremos esa estructura.
Agrupando botones para PhoneGap: Para que estéticamente los botones queden bien organizados, hay varias formas de controlar su posición. En este vídeo agruparemos estos botones.
Diálogos con jQuery Mobile: Uso de diálogos con jQuery Mobile, para mostrar información sin usar las alertas del sistema.
Conseguir que un solo desarrollo en HTML5 nos permita distribuir nuestra app en las tiendas de las diferentes plataformas (App store, Google Play,…) es posible y este curso te presenta una manera muy rápida y fácil de hacerlo.
Usando Dreamweaver y su conexión con el servicio PhoneGap Build, crearemos una app muy simple pero con los elementos más usados: botones, enlaces, formularios, listas, etc. y la compilaremos para Android y iOS (iPhone/iPad). Veremos el trabajo con la API de PhoneGap y el uso de elementos como el acelerómetro, la cámara o la brújula.
De 0 a 100, en poco tiempo y explicado de forma clara y accesible, este curso te abre las puertas al mundo del desarrollo de apps para dispositivos móviles.
Curso completo de PhoneGap. De 0 a 100 -> 24.48€ (15% descuento)
6 de junio de 2014
Vídeotutoriales de Bootstrap 3
Desarrollo ágil de proyectos web responsive. Bootstrap es un framework front end muy extendido y pensado sobre todo para crear proyectos web responsive.

Qué es Bootstrap 3
Aprenderemos qué son los frameworks front end, en qué lugar está Bootstrap dentro de ellos y cuáles son sus principales características.
Descubre en este curso cómo Bootstrap 3 puede mejorar el flujo de trabajo de tus proyectos web, desde el diseño a la maquetación, logrando crear sitios webs adaptados para dispositivos de forma fácil. Conoce las bases de su sistema de rejilla que agilizará de manera asombrosa el tiempo de maquetación en tus proyectos web.
Bootstrap es el framework front end más popular en la actualidad, con una inmensa comunidad de desarrolladores en torno a él y un ecosistema ya maduro de temas, componentes y plugins. En su versión 3 abraza totalmente la filosofia «mobile first» para favorecer su uso en dispositivos móviles.
Con este curso aprenderás a apreciar las ventajas que Bootstrap 3 puede aportar a tus proyectos web, desde la fase de diseño hasta la maquetación, y lo harás con una herramienta que ha sido específicamente pensada para la creación de sitios web bajo la técnica de responsive web design.
Estudiaremos en profundidad su sistema de rejilla, que es la base de todo framework front end, para continuar con un recurrido básico por sus funcionalidades sobre etiquetas HTML, componentes y sus plugins basados en jQuery.
Ayudas para la validación de formularios
Bootstrap aporta interesantes ayudas para la gestión visual de validación de formularios, que se pueden integrar en nuestros proyectos de forma sencilla.
Al terminar tendrás una visión clara de los beneficios de Bootstrap 3 aplicado en proyectos web, sabrás como integrarlo desde la fase de diseño y cómo usarlo y personalizarlo para adaptarlo y configurarlo en función de las necesidades de cada uno de tus proyectos.
Curso completo Bootstrap 3 – 24.48€ (15% descuento)
5 de junio de 2014

10 trucos de Internet poco conocidos

Vamos a enumerar algunos trucos poco conocidos para productividad, procrastinar, jugar y encontrar huevos de pascua.

Algunos se hacen simplemente introduciendo una búsqueda, otros con atajos de teclado y otros mediante un bookmarklet, un marcador que en vez de llevarte a una dirección web ejecuta un JavaScript.

	Qué	Cómo
1	Abrir la última pestaña que has cerrado	CMD/CTRL + SHIFT + T
2	Copiar o insertar una URL	CMD/CTRL + SHIFT + L o ALT + D o simplemente F6 para seleccionar la URL y luego CMD/CTRL + C o teclear una nueva
3	Buscar una imagen en Google	Pulsa “S” y pincha con el borón derecho sobre una imagen o simplemente arrastra la imagen a la barra de direcciones
4	Convierte tu navegador en un editor de texto	Pincha y arrastra a tu barra de marcadores (vía)
		editor simple
		editor simple modo noche
		versión para programadores
5	Convierte tu navegador en un videojuego	Pincha y arrastra a tu barra de marcadores este enlace y destruye la web que quierasKick Ass
		Busca en Google Imágenes: “Atari Breakout”
		Busca en Google “zerg rush” (muchos más en List of Google hoaxes and easter eggs)
6	El código Konami conocido por los gamers también funciona en muchos sitios web	Visita alguna de estas webs y teclea el código Konami:En su día funcionaba en Facebook, ahora puedes encontrar huevos de pascua en Digg.com, Wired.co.uk, Condé Nast UK, blueworld.co.za o BuzzFeed y por supuesto tecléalo si quieres encontrar más sitios en konamicodesites.com
7	Invasión de gatitos	Visita cualquier página pero pon antes http://nyanit.com/ por ejemplo http://nyanit.com/ceslava.com
8	Edita cualquier página web	Arrastra a tu barra de marcadores y edita el contenido de cualquier web (vía) Editar una web
9	Tipografía web	Bookmarklets para trabajar la tipografía de una web // Tipografía web «real» con Bookmarklet
10	Bookmarklet para crear sprites CSS	SpriteMe \| Bookmarklet para crear sprites CSS

18 de mayo de 2014

IG Pagebuilder: inserta widgets y extras en tus posts y páginas de WordPress
IG Pagebuilder es un plugin gratuito para WordPress que añade un montón de extras para tus posts y páginas con tu propio layout y estilos.
Lo mejor es que no es con los a veces engorrosos shortcodes sino con un editor visual propio, vista en vivo, pinchando y arrastrando los elementos.
Crea columnas, divisiones e inserta fácilmente en un post o página cualquiera de estos elementos con estilos personalizables.
- Alert
- Audio
- Button Bar
- Carousel
- Divider
- Heading
- Image
- List
- Promotion Box
- QR Code
- Tab
- Table
- Text
- Tooltip
- Video
o cualquier widget
Como verás un todo en uno en un plugin gratuito si no quieres o sabes modificar tu tema. Hay una versión PRO con más elementos que precisamente ahora están sorteando.
Enlaces:
- Página oficial de IG Pagebuilder
- demo (claves: demo / demo)
14 de mayo de 2014

Categoría: CSS

Curso relacionado:

Qué

Cómo