Etiqueta: dreamweaver

12 plugins gratuitos para Photoshop (Parte III)
Seguimos dando de comer a Photoshop con plugins gratuitos que facilitan el trabajo y mejoran tu productividad. Aunque algunos también puedes utilizarlos para retoque fotográfico o diseño gráfico muchos están pensados específicamente para diseñadores web.
En esta entrada recogemos 12 plugins y en estos enlaces tienes muchos otros plugins gratuitos para Photoshop
1. Oven
Este plugin facilita la exportación de “Recursos de Imagen” a diferentes formatos y resoluciones sin necesidad de renombrar las capas.
Para Photoshop CC & CC 2014
2. Ink
Del mismo autor que el anterior este nos ayuda cuando creamos bocetos web o mockups aportando información extra.
Para Photoshop CS6, CC
3. LayerCraft
Este plugin al igual que el primero Oven nos ayuda a crear los recursos cuando estemos diseñando interfaces para dispositivos móviles.
Para Photoshop CC & CC 2014
4. Velositey
Velositey es una extensión gratuita para Photoshop con la que puedes montar muy fácil y rápido el diseño de una web, su layout y estructura. (más info)
Para Photoshop CS6, CC & CC 2014
5. Duplllicator
Facilita la clonación de capas y grupos de capas, puedes elegir el número y la posición de esas copias.
Para Photoshop CC & CC 2014
6. QuickGuide
Una gran ayuda para gestionar las guías en Photoshop con un montón de funcionalidades.
Para Photoshop CC 2014
7. Lorem Ipsum Generator
Una extensión para generar texto falso no sólo en Photoshop, también en Illustrator, InDesign y Dreamweaver.
Para Photoshop, Illustrator, InDesign, Dreamweaver CS5, CS6 y CC.
8. LoremPicsum
Un plugin para añadir imágenes de distintos tamaños a tu boceto de Futurama, los Simpsons o Buscando a Nemo.
Para Photoshop CS & CC
9. Random User Generator
Extensión para crear usuarios aleatorios en tu diseño
Para Photoshop CS6 & CC
10. Bounce
Para integrar la comunidad de diseño Dribble dentro de tus aplicaciones de Adobe:
Para Photoshop, Illustrator, InDesign y Fireworks CS5 & CS6
11. Pictura
Para buscar fotografías en Flickr dentro del mismo Photoshop. (más info)
Para Photoshop CC 2014
12. Save Panel
Un plugin muy útil para agilizar el guardado de tus trabajos y también para compartirlos en Dropbox
Para Photoshop CS5, CS6, CC & CC 2014
18 de febrero de 2015
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
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
Dreamweaver CC 3: responsive design, CSS, JavaScript y jQuery
Curso de Dreamweaver CC 3: responsive design, CSS, JavaScript y jQuery. Diseño adaptativo, plantillas y opciones avanzadas para tu web.
Dreamweaver es desde hace años un referente en la creación de contenidos para la web. Su principal punto fuerte es la posibilidad de creación de contenidos HTML para desarrolladores de todos los niveles: desde el más novel, gracias a su forma visual de añadir los contenidos, hasta a programadores experimentados, gracias a todas sus herramientas de ayuda a la creación de código.
Vídeos gratuitos
Curso completo 24.48 € (15% descuento)
Este curso video2brain te enseñará cómo estructurar tus contenidos, cómo usar el diseñador CSS y cómo añadir contenidos JavaScript sin necesidad de programar. Además también verás cómo automatizar tareas y cómo usar Dreamweaver como el gran editor de código que es.
Este curso va a ser ideal para todo aquel que quiera conocer Dreamweaver y sus funciones más avanzadas y, como está planteado de manera práctica, irás descubriendo las opciones del programa a la vez que vas creando un sitio web, ya que la mejor manera de aprender es trabajando en un caso lo más real posible.
A lo largo de esta tercera parte vamos a avanzar en el diseño de nuestros sitios: trabajaremos con el diseñador CSS, sobre el box-model para organizar los contenidos en nuestras páginas, y cómo se mostrarán sus bordes, fondos y espaciados.
Además utilizaremos CSS3 para crear animaciones y transiciones aprenderemos a usar las plantillas CSS de Dreamweaver. También vamos a ver las opciones que nos ofrece Dreamweaver para trabajar con responsive design, y en concreto, vamos a utilizar las rejillas fluidas y las media queries.
Utilizaremos JavaScript y veremos cómo añadir jQuery automáticamente y qué opciones de programación con JavaScript nos ofrece el programa. Seguiremos con las posibilidades de automatización de creación de contenidos hablando de las plantillas y cómo nos facilitan el flujo de trabajo. Terminaremos viendo cómo programar con Dreamweaver y otros lenguajes como PHP o XML.
11 de diciembre de 2013
Animación, transformaciones y transiciones en CSS3
Agrega dinamismo e interactividad a tus sitios bajo estándares web
¿Ya usas CSS para darle la presentación a tus sitios web? Ahora aprende con este curso video2brain a transformar elementos y realizar transiciones y animaciones que se ejecutarán de forma fluida y que serán compatibles con la gran mayoría de navegadores de computadores de escritorio y de dispositivos móviles.
Ver Curso completo
En este curso conocerás las técnicas para agregar dinamismo a tu sitio web con CSS mediante los módulos de transformaciones, transiciones y animaciones.
Cada capítulo se centra en un módulo específico de CSS3 donde se explica su sintaxis y se muestra su uso, adicionalmente hay un capítulo con ejemplos en un sitio web real. En la gran mayoría de ejemplos se muestra la sintaxis completa, la cual incluye los diferentes prefijos propietarios que permiten dar soporte a los diferentes navegadores.
Entre las animaciones, transiciones y transformaciones que veremos, encontramos propiedades como escala, posición, opacidad, rotación y color; controlando tiempos, aceleraciones y otros elementos que otorgan gran dinamismo a tus sitios web multipantalla.
Un par de vídeos de muestra del curso:
1.- Animación, transformaciones y transiciones en CSS3: Transformaciones interactivas
Realizamos transformaciones que se ejecutan solamente cuando el usuario interactúa con el elemento.
2.- Animación, transformaciones y transiciones en CSS3: Uso de curvas cubic-bezier
En este video usamos valores de curvas cubic-bezier para agregar efectos personalizados de aceleración y desceleración.
Temario completo
Transformaciones CSS
- Estado actual de los módulos CSS para animación 05:12
- ¿Por qué animar con CSS? 01:22
- Transformaciones CSS 01:49
- Transformación rotate() 05:47
- Transformación translate() 05:13
- Transformación scale() 03:16
- Transformación skew() 03:09
- Modificar el punto de transformación 03:43
- Múltiples transformaciones 03:47
- Transformaciones interactivas 02:51
Transiciones CSS
- Creación de transiciones CSS 05:30
- Configuración de la transición del rollout 02:51
- Efectos de easing 05:30
- Uso de curvas cubic-bezier 02:51
- Uso de transition-delay 02:12
- Uso de los prefijos propietarios 03:37
- Notación acortada 05:33
- Transiciones en etapas 01:41
Ejemplos prácticos de Tranformaciones y Transiciones
- Color y escala 06:22
- Opacidad, escala, z-index y box-shadow 08:43
- Posición 06:16
Animaciones CSS
- Animaciones CSS 05:46
- Efectos de easing 01:47
- Uso de animation-delay 01:19
- Uso de animation-iteration-count y animation-direction 05:19
- Notación acortada 03:53
- Aplicar múltiples animaciones 04:33
- Animación por porcentajes 04:32
- Uso de animation-play-state 04:45
Despedida del curso
- Despedida del curso Animación, transformaciones y transiciones en CSS3 00:52
Curso completo 21.08 €
11 de octubre de 2013
Creación de libro infantil interactivo para iPad
Ilustra, anima, añade interacción y distribuye tu trabajo como app
Si quieres dotar a tus dibujos de movimiento e interactividad y verlos publicados en el App Store, estás en el curso adecuado. Aprenderás a animar una ilustración y a compilarla para convertirla en app para Android o iPad. Con Photoshop, Edge Animate y Dreamweaver, este workshop práctico te enseña a crear tu propia app a partir de unas ilustraciones estáticas, en pocos pasos y sin saber programar. Animarás y dotarlas de interactividad las ilustraciones para finalmente compilarlas con la ayuda de PhoneGap Build, para tener una app funcional, divertida e interactiva.
24.48 €
10 de octubre de 2013
Trabajo con fuentes web
Dale vida a tus sitios con fuentes optimizadas
Rompe el límite de las fuentes seguras para web. Con este curso video2brain aprenderás a usar diferentes servicios de fuentes web, desde el entendimiento de sus conceptos básicos hasta el conocimiento y la utilización de los más actuales. Los sitios web nunca tuvieron tanto carácter como ahora.
Curso completo 21.08 €
Analizaremos la compatibilidad actual de la regla @font-face con los diferentes navegadores así como la compatibilidad de los diferentes formatos de fuentes web y el motivo por el cual los usamos.
Usar fuentes de Google Fonts
Dentro del curso veremos desde cómo descargar una fuente y convertirla a diferentes formatos que den soporte a todos los navegadores para después insertar el código en nuestro archivo HTML y usarlo mediante CSS hasta el uso de las opciones de aplicaciones como Dreamweaver, Muse y Edge Animate que permiten trabajar con servicios como Edge Web Fonts y Type sin tener que usar código.
Uso de Edge Web Fonts con Dreamweaver
Curso completo 21.08 €
28 de agosto de 2013
Dreamweaver CC 2: Enriquecimiento de sitios web con formularios y multimedia
Añade formularios y contenidos multimedia a tu sitio web
Dreamweaver es desde hace años un referente en la creación de contenidos para la web: sus principales puntos fuertes son la posibilidad de creación de contenidos HTML para desarrolladores de todos los niveles: desde el más novel, gracias a su forma visual de añadir los contenidos, hasta a programadores experimentados, gracias a todas sus herramientas de ayuda a la creación de código. Descubre cómo incluir con listas y tablas, cómo insertar formularios y cómo trabajar con vídeo y audio. Y no te pierdas el capítulo dedicado al diseñador CSS.
24.48 €
Comprar curso completo
17 de julio de 2013