Macaw. Deja de escribir código, empieza a dibujarlo !!

Trabaja como photoshop y exporta tus diseños en html y css, listos para subir a internet. Así de fácil!!!!
4.7 (3 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
50 students enrolled
Instructed by Ranz López Design / Web Design
$19
$20
5% off
Take This Course
  • Lectures 26
  • Length 2 hours
  • Skill Level All Levels
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2014 Spanish

Course Description

En este curso aprenderas de la manera más sencilla, rápida y moderna todo lo necesario para empezar a crear tus webs.

-----------------------

Macaw es una herramienta web de código inteligente, podriamos decir que es una combinación perfecta entre Photoshop y Dreamweaver, con un altisímo nivel de “intuición" y “fluidez" de trabajo al momento de crear un sitio web.

Macaw trabaja de forma fluida con capas como photoshop, breakpoint intuitivos para hacer desde el inicio de su creación un sitio adaptativo (responsive), gran variedad de fuentes web, así como la posibilidad de tener estilos (css) con “memoria propia", es decir, que para aquellos que no conocen mucho de programación web, pueden reutilizar estos estilos de una forma muy sencilla y de manera visual… Macaw se encarga del código por ti generando automáticamente archivos jquerry, css u otro lenguaje.

Podemos decir que Macaw habla dos lenguajes que hasta ahora están hasta cierto punto separados: el lenguaje del diseñador y el de los desarrolladores.

Trabajar un proyecto web desde cero (boceto, mockups, prototipo, diseño, desarrollo, lanzamiento) nunca ha sido tan fluido porque solemos saltar entre el papel, el photoshop, el editor de códigos, y todas las demás herramientas que podamos implementar, pero ahora podemos hacerlo todo en una misma aplicación, que como he mencionado ya, es sumamente intuitiva y que seguramente ha llegado para quedarse en nuestro estilo de trabajo.

Macaw desarrolla el código de una forma sumamente limpia y precisa, con su motor llamado Alchemy, encargado de la ingeniería de la escritura del código exclusivamente para este programa que se encarga de realizar un código ordenado, limpio y que presenta soluciones mejores de lo que muchas veces podemos aplicar nosotros mismos.

Seguro que ya tienes ganas de trabajar con Macaw.

¡¡¡A que esperas para conocer esta fantástica herramienta!!!.

What are the requirements?

  • Macaw
  • Photoshop (opcional)
  • Editor de textos como Coda, Sublime Text o Dreamweaver (Opcional)

What am I going to get from this course?

  • Aprender a maquetar HTML sin necesidad de maquetar ;)
  • Crear estilos CSS con un par de clics
  • Hacer plantillas o bocetos en, ¡¡ Tiempo Recórd !!
  • Diseños Responsive por arte de magia...
  • ... y código web semántico y bien estructurado!!!!
  • Sin olvidar que todas las semanas habrá contenido nuevo.

What is the target audience?

  • Cualquier persona puede tomar el curso (con conocimientos mínimos de HTML se aprenderá con más fluidez y más rápido).

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Instalación e interfaz de Macaw
04:01

¡¡¡ Hola y bienvenidos a este fantástico curso !!!.

Alguno de vosotros habréis imaginado en poder hacer con vuestras plantillas web, un click y convertirlas en una web totalmente funcional, con código semántico perfecto y sin tener que haber escrito nada, ¿verdad?, pues ahora es posible gracias a Macaw.

Para poder empezar lo antes posible este curso, os enseñare como conseguir Macaw. Lo primero, iremos a la página oficial de dicho programa para poder descargarlo.

Hay dos maneras de obtenerlo: bajándonos la versión de prueba o comprándolo. Al hacer la compra dispondremos de él para siempre y con todas sus actualizaciones de aquí en adelante gratis y recibiremos mails con información de las próximas mejoras!! En cambio si optáis por la versión de prueba tendréis varios días para poder mirarlo y ver como funciona esta herramienta.

Una vez descargada la abrimos y la instalamos en nuestro mac. Esperamos unos minutos y voila!! Ya estamos listos para comenzar.

02:40

Una vez instalado Macaw en nuestro mac, abriremos el finder y lo buscamos entre nuestras aplicaciones. Es el icono azul con una “M” en el medio. Lo cogemos y lo arrastramos hasta nuestro dock, al lado de nuestras herramientas. Le damos click y esperemos a ver su interfaz. Cuando lo abrí pensé que iba a ser complejo y difícil de entender… pero todo lo contrario, es fácil, simple y elegante. Si conocéis herramientas de diseño como photoshop por ejemplo, vais a ver que en muchos aspectos, se asemeja su distribución.

Como veis lo primero que resalta la vista es el lienzo blanco que disponemos para empezar a “dibujar” en él. Arriba vemos iconos que sirven para posicionar elementos y a su izquierda las herramientas que utilizaremos para dar vida a nuestros proyectos. Como los punteros de selección, texto, cajas y demás.

En su lado derecho encontraremos tres secciones que serán las encargadas de exprimir las herramientas al máximo:

  1. El Inspector que da propiedades a los elementos dibujados.
  2. La sección de esquema (outline), dedicada para ordenar nuestros dibujos en el lienzo, que como ya dije es exactamente como si de capas se tratara al igual que photoshop, y por último
  3. la librería que nos ayudara a tener muy a mano nuestros materiales como imágenes y gráficos.

Una vez visto esto, empecemos, como y para qué, se utilizan cada uno de estos apartados.

Instalación e interfaz
3 questions
Section 2: Herramientas Macaw
04:10

Antes de utilizar las herramientas que disponemos en Macaw, lo primero que hay que ver es como funciona el lienzo donde dibujaremos nuestras webs.

Como podeis observar es un espacio en blanco sin mas, pero podemos configurarlo a nuestras necesidades. Para poder verlo, lo primero que haremos es crear un archivo nuevo. Para ello subimos arriba y le damos a proyecto nuevo (new proyect). Al abrirlo, el lienzo a cambiado de estar en blanco a tener una cuadrícula.

Esta cuadrícula es esencial para el trabajo fluido en Macaw. Ayuda a colocar nuestros elementos de manera uniforme y sirve como guía.

Por defecto en Macaw, todos los proyectos empiezan con un total de 1200px de anchura. Si queremos cambiarlo por que necesitamos más o queremos una medida más pequeña por que nuestro diseño, asi lo requiere, simplemete nos colocamos justo en la regla que esta encima del lienzo y nos fijaremos que en “1200” hay una flechita blanca que al pinchar sobre ella nos dejara adaptar la anchura a nuestro gusto. Para conseguir la anchura exacta que necesitamos, nos va indicando con el número de píxeles, la medida que estamos escogiendo para nuestro proyecto.

Ya ajustada la anchura, el siguiente paso es preparar la cuadrícula a nuestro antojo. Para eso nos vamos a la parte derecha y observaremos que tenemos 4 secciones para modificar nuestro lienzo.

La 1ª son los puntos de rotura o media-queries o breakpoints, como queráis llamarlos, la 2ª sirve para agregar imágenes de fondo o un color. La 3ª que es la que queremos, para modificar la cuadrícula y la última para ponerle un nombre a nuestro documento.

Pues en la 3, tenemos 4 propiedades de cuadricula. Una es la anchura que tiene nuestra cuadricula en el lienzo, siempre expresada por porcentajes. Si queremos trabajar en pixeles exactos pinchamos sobre el porcentaje y lo cambiamos. la siguiente el numero de columnas que queremos tener en nuestra cuadricula, ya sean 12, 6 o 15. El “gutter” siempre expresado en porcentajes que se encarga en dar espacio entre columnas. Y abajo las opciones de visualización de la cuadricula: visible e invisible, separaciones, bordes y rellenos.

02:24

Las Herramientas de Selección de Macaw son prácticamente iguales que cualquier programa de diseño, como photoshop, Illustrator, etc, etc.

Esta herramienta se selecciona automáticamente al terminar de usar cualquiera de las otras. Como podeis ver, cojo una herramienta al azar y al soltar podemos ver como se selecciona sin necesidad de elegir.

Esta herramienta tiene varias funciones:

    - selecciona elementos,

    - modificar sus anchuras y alturas tanto individualmente como proporcionalmente

    - y para mover o arrastras los objetos.

03:48

La herramienta Elemento es de las más utilizadas en programas de diseño. Su función en Macaw es la de crear cajas sin contenido… cajas vacías diferenciadas por su color gris de fondo. Muy útiles para crear prototipos o estructuras rápidas para nuestras futuras webs. Se hacen seleccionando la herramienta o copiando y pegando un elemento que ya este dibujado.

La siguiente, que es la Herramienta de Contenedor se utiliza para la agrupación y ordenación de elementos.

Si tenemos elementos dibujados en nuestro lienzo podemos agruparlos simplemente cogiendo la herramienta y arrastrándola hasta que abarquemos los objetos que queramos agrupar. Si nos fijamos en las capas, todos los elementos dibujados por defecto Macaw los interprete como "divs" sueltos que al agruparlos se quedan ordenados perfectamente en estos contenedores.

Otra manera de agrupar es seleccionando directamente cada elemento individualmente presionando la tecla swhift y acto seguido cmd+G o ctr+G si estamos en Windows. De esta manera los elementos seleccionados serán envueltos en una caja, que se adaptan a la altura y anchura que tengan los elementos entre si.

Al estar todo agrupado en un contenedor todo su interior esta vinculado a él. Si yo cambio la anchura de este, todo, se vera afectado.

Si un elemento contiene texto, botones o imágenes, al agruparlo todo, Macaw preguntara si queremos transferir los estilos que tengan a la caja nueva en la que van a ser agrupados. En mi opinión es aconsejable decir que si para que tengamos un código y una semántica más limpia.

05:41

Ahora vamos a ver dos tipos de elementos de texto en Macaw: Texto de Párrafo y Texto de Punto.

Para el Texto de Párrafo, pinchamos en la herramienta y arrastramos sobre el lienzo, estableciendo la medida que queramos.

Al crear la caja el volumen de escritura que añadamos dentro, no hará que perdamos la anchura elegida, pero si se expandirá en altura si el volumen de texto es superior a la altura que le hemos dado; sin olvidar que este elemento se comportara como un elemento en bloque.

En cambio en el Texto de Punto, con hacer clic en el lienzo con la herramienta de texto seleccionada, creará un campo de texto que tiene una anchura y altura automática según la cantidad de palabras escritas y tendrá un comportamiento de elemento en línea. Al ser automática esta caja vemos que no nos deja cambiar sus dimensiones como en el otro elemento de texto al no tener puntos de anclaje.

Si queremos cambiarlo, se podrá modificar a Texto de Párrafo, simplemente cambiando el sufijo de anchura en las propiedades de Dimensiones. Pinchando en auto se desplegaran las opciones de px y %. Al elegir alguna de estas dos ya habrá cambiado sus propiedades y podemos comprobarlo al ver que podemos cambiar manualmente su anchura y altura desde la propia caja.

Todo lo que escribas en Macaw es justamente como se vera en la web. Podrás utilizar tus tipografías favoritas instaladas en tu ordenador o si lo prefieres a fuentes online si tienes cuenta en Adobe Typekit, conectandote a ella de la manera mas fácil desde el panel de propiedades de texto.

03:15

Áreas de texto, correo electrónico, contraseña, números, áreas de búsqueda y entradas a enlaces, todos estos elementos pueden ser dibujados utilizando la Herramienta de Entrada. De forma predeterminada, Macaw dibujará una entrada de texto estándar.

Para cambiar el tipo de elemento antes de dibujarlo, mantenemos presionado el icono de la herramienta para que aparezca un submenú que contendrá los diferentes elementos.

----

El Área de Texto es muy parecido al de entrada, pero permite hacer el área más grande ya sea manualmente arrastrando y soltando o con las propiedades del panel de inspector. También se diferencia por su pequeño borde negro

----

El elemento de Selección de Opciones es básicamente una lista desplegable. Puede modificar las opciones disponibles añadiendo más, utilizando el constructor de la lista en el Inspector. Para agregar una opción haciendo clic en el botón “+”. Hacemos doble clic en el nombre de la opción y nos permitirá editar el texto. Arrastrar la opción para reorganizar y clic en el icono de la papelera para eliminarlo.

----

Elementos Checkbox y Radio se pueden dibujar haciendo clic y arrastrando en el lienzo con sus respectivas herramientas. Ambos elementos tienen una anchura mínima de 66 píxeles y una altura mínima de 22 píxeles, que se aplican cuando se dibujan, pero con la opción de ajustarse mas adelante.

Cuando se añade un elemento casilla de verificación o de radio al lienzo, se crean tres elementos en vez de uno: la casilla de verificación, una etiqueta y un recipiente para los dos.

Las diferentes opciones de esta herramienta no es inmediatamente perceptible dentro Macaw. Sin embargo, la función a la que están destinadas se pueden ver al publicar el trabajo.

Todos los campos de entrada son de texto editable.

01:08

Los Botones son similares a los elementos de texto, pero tienen la característica de centrar el texto automaticamente.

Tiene una propiedad especial (editable en la paleta avanzado, situada en el inspector), que permiten manejar formularios con la ayuda de las herramientas de entrada pero básicamente se usan para enlaces simples.

01:55

Si pulsamos el icono y creamos el elemento en el lienzo, al soltar aparecerá una ventana modal mostrandonos diferentes opciones. Estas nos van a permitir insertar en nuestros diseños, HTML puro, creación de iframe para textos con scroll, enlaces para la incorporación de mapas de google y videos, tanto de youtube como de vimeo.

Por defecto Macaw no mostrará su contenido integrado, mientras que en el editor o en el navegador de vista previa, pero se mostrará correctamente en los archivos una vez publicados.

Herramientas Macaw
9 questions
Section 3: Posicionamientos
03:56

Macaw permite tres tipos de posicionamiento: Estático, Absolutos y Fijos. Cada uno de estos mecanismos tiene sus propios usos y limitaciones. Cada elemento dentro de Macaw puede tener su propio tipo de posicionamiento.

Las posiciones se pueden establecer mediante los tres iconos de la izquierda de la barra de propiedades, que son visibles si solamente si seleccionamos un elemento. Creamos un elemento y vemos como aparecen. El icono de la onda de color azul se utiliza para la estática, la cruz naranja es para absoluta y el pin verde está para el posicionamiento fijo.

El Estático, es el modo de posicionamiento por defecto de Macaw. El Conjunto de elementos estáticos se posicionan en relación con el elemento que le precede en el documento; me explico: un elemento que se posiciona de forma relativa, se calcula, desde la posición original en el documento. Esto significa que se mueve el elemento hacia la derecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento después de haberse posicionado

Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres elementos de forma relativa respecto a su posición original en la página.

Fíjate cómo las imágenes dejan espacios vacíos en sus posiciones originales en el documento. Lo mismo ocurre si el elemento esta en el interior de otro, para que lo veáis meto un elemento en un contenedor, este toma la posición y coge la posición desde el interior.

Esto puede ser un poco confuso para alguien no familiarizado con el desarrollo web, sin embargo, es muy importante aprender el concepto de Posicionamiento Estático ya que la mayoría de la web se construye utilizando estas mecánicas.

Cuando se arrastra un elemento alrededor de la lona o lienzo, Macaw calculará automáticamente los márgenes necesarios para posicionar el elemento. Si nos damos cuenta los Elementos posicionados de manera estática tienen un contorno azul.

Hay que tener muy en cuenta que los elementos que utilizamos con posicionamiento estático son esencialmente encadenados juntos. Por lo tanto, modificar la posición de estático a fijo o absoluto puede afectar a la colocación de otros elementos dibujado alrededor.

02:15

Ahora los elementos de la clase anterior los seleccionamos y les damos la siguiente posición: la Absoluta.

Al hacerlo sus colores pasan a ser naranjas. El Posicionamiento Absoluto permite que los elementos se coloquen en una coordenada específica, empezando a calcularlas desde la posición en la que se encuentran. Eso se refiere, a que no están en el flujo de documentos y, por tanto, no afectan a la posición de los elementos que lo rodean.

Tampoco ocupan espacio alguno en el documento. Esto significa que no dejan un espacio vacío después de ser posicionado, como si ocurría con el estático. Si yo cojo un elemento y lo paso por encima de otro, este no empieza a calcular su posición por la derecha del elemento que queda detrás de él, si no que le pasa por encima sin influir en su posición.

También debemos fijarnos que hemos cambiado los elementos de relativos a absolutos, ¿verdad?; pues si nos metemos dentro del contenedor vemos que no es así, esto quiere decir que no cambian las posiciones de los elementos metidos en un contenedor, habría que hacerlo manualmente.

01:46

El Posicionamiento Fijo es similar al posicionamiento absoluto, excepto que las coordenadas establecidas para los elementos fijos son en relación con la ventana gráfica en lugar de los padres del elemento. Así, los elementos con posicionamiento fijo permanecerán en su lugar aunque el documento se desplace. Si tu colocas elementos fijos, no se moverán nada.

Elementos fijos tienen un contorno verde.

02:47

Vistas y entendidas las tres posiciones estática/relativa, absoluta y fija. Aparte de aparecer los iconos de posiciones, a su derecha también salen 2 apartados importantes. Las tres “X” y las ventanas de márgenes. Ha estas opciones en conjunto se las podrían llamar los orígenes.

Las “x” definen la dirección en la que se coloca un elemento. Las opciones se diferencian en propiedades basadas en el modo de posicionamiento en el que se encuentren.

Cualquier posicionamiento, permiten a las “X”, cambiarse a la izquierda, derecha o centro. Si lo usamos hacia la Izquierda utilizarán margen-izquierdo para colocar al elemento.

Si optamos al derecho flotará un elemento a la derecha y utilizará el margen derecho para el posicionamiento.

Y si lo centramos, forzará al elemento para que sus márgenes laterales, derecho e izquierdo, sean automáticos, de esta manera los centra en el documento.

Los elementos con posicionamiento absoluto o fijo tienen también unas opciones diferentes al estático. Las “Y”. Estas lo que hacen, es ordenar al elemento que empiecen sus márgenes de arriba y de abajo en la posición que deseamos.

----

Las Guías ayudan a colocar un elemento. Aparecen al arrastrarlos por el lienzo cuando sus bordes estén alineados con otro elemento. Son de color verde.

Si no aparecen las guías, puede que esten desactivadas.Se pueden mostrar de nuevo subiendo al panel Ver > Toggle Positioning guides.

Posiciones Estáticas, Absolutas y Fijas
4 questions
Section 4: Panel Inspector: Propiedades y Estilos
08:13
Ya sean elementos, imágenes o botones, podemos personalizar sus bordes con css de una manera nunca vista antes. Y por si fuera poco subimos el listón y le damos redondeces con la potencia de CSS3.
11:22
Color, Degradados e Imágenes de fondo... eso es lo necesario para ver atractivamente una web del siglo XXI.
08:02
La profundidad y el juego que aportan estos efectos no pueden faltar en las webs del siglo XXI. Ya solo con oir eso parece complicado de hacer y te demuestro en el video lo fácil que resulta de hacer con Macaw.
Enlaces internos y externos
03:05
Textos
07:09
Nodos
05:16
Imágenes Retina
03:15
Recortes de imágen
03:08
Importaciones de imágen
01:25
Descarga de plantilla web
00:57
Section 5: RWD (Responsive Web Design)
Últimos detalles
07:07
Breakpoints
17:14
Opciones del navegador interno
02:19
Section 6: Este no es el final....

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ranz López, Diseñador y Desarrollador Web

¡Hola! Me llamo Christian Ranz, y soy un gran apasionado de las tecnologías y del diseño web. Especializado desde hace mas de 6 años, a la restauración, maquetación, diseño de páginas web para la mejora visual (en todos los navegadores) y posicionamiento web mas adecuado tanto si son "rwd"; o no. Jefe en departamento de diseño y maquetación desde hace 4 años como maquetador de revistas, manuales técnicos y cursos interactivos (e-learning) en varias empresas, e instructor en cursos offline de creación de páginas web.

Ready to start learning?
Take This Course