Guía básica para maquetar tu sitio web en WordPress
3.9 (29 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.
467 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Guía básica para maquetar tu sitio web en WordPress to your Wishlist.

Add to Wishlist

Guía básica para maquetar tu sitio web en WordPress

¿Quieres diseñar en WordPress un sitio elegante, profesional, distinguido? Es posible, gracias a plugins SiteOrigin
3.9 (29 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.
467 students enrolled
Created by Joan Morci
Last updated 8/2017
Spanish
Curiosity Sale
Current price: $10 Original price: $40 Discount: 75% off
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 15 Articles
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • A tener el contenido de tu sitio web organizado como deseas
  • A mayor organización más facilidad para que los usuarios sepan qué les puedes ofrecer
  • Tú web lucirá un aspecto profesional y atractivo
View Curriculum
Requirements
  • Mínimo tienes que saber qué es WordPress(.org)
  • Tener instalado un tema prediseñado desde el propio repositorio de WordPress(.org)
  • Saber instalar plugins
Description

☕  ACTUALIZACIONES (Info dispuesta el 9 de julio de 2017)
Cuando llegué con este curso a Udemy, solo exploraba una herramienta de maquetación visual, en forma de plugin para WordPress. Una de las mejores herramientas, por su sencillez y tiempo en el repositorio de WordPress. Pero tras un par de críticas constructivas, decidí que debía tomar nota sobre ellas, y actualizar el curso en la medida que creía necesario.

Es por ello que este curso va a estar en continua actualización hasta su culminación, y conforme añada más secciones con sus correspondientes nuevas clases, aumentará el precio. No obstante, os recomiendo ver las primeras clases de la sección 1 para que os ilustréis mejor a este respecto. Concretamente la clase: 'Nuevas secciones próximamente...' en ese artículo expongo todas las secciones que están por llegar.

INFORMACIÓN GENERAL 

Va a ser una primera toma de contacto, para saber qué es y cómo trabajar con un maquetador visual en WordPress, más concretamente con plugins de la casa SiteOrigin, gratuitos.

Este tipo de plugins también son llamados, page builder. Permiten colocar la información de tu web de la forma que desees, con sólo arrastrar y soltar cada bloque de información, sin tocar una sola línea de código. Todo de manera fácil e intuitiva.

SiteOrigin es uno de los plugins, de este tipo, más descargados (dada su antigüedad) y más compatible con diversos temas y plugins. Cambia de tema tantas veces como desees, y la maquetación de tu contenido siempre te acompañará.

Quiero que tengas claro que éste va a ser un curso que va a recibir todas las actualizaciones que sean necesarias, entre otras cosas, porque yo uso dicho plugin para maquetar mi sitio web. Por lo que verás con cierta frecuencia varios anuncios educativos durante el mes.

Pero además, estoy siguiendo las recomendaciones de Udemy con respecto al mundo del marketing, y también hago caso de las criticas constructivas y comentarios de alumnos e incluso otros instructores.

Son los alumnos, quienes quieren aprender más y mejor, los que me sugieren que incorporar al curso para hacerlo más completo (siempre que tenga que ver con la temática del mismo).

Who is the target audience?
  • Para ti, si tienes conocimiento sobre una materia
  • Si tienes o quieres presencia en Internet
  • Si te quieres distinguir del resto
Students Who Viewed This Course Also Viewed
Curriculum For This Course
45 Lectures
04:43:44
+
Aspectos generales del curso
7 Lectures 33:22

Presentación del profesor del curso, breve explicación del mismo y mi persona.

Preview 02:50

Cuando llegué a Udemy con este curso lo hice sin muchas pretensiones. Explicaba cómo usar una herramienta de maquetacion visual, denominada también ‘page builder’. Tuve valoraciones muy positivas, el tiempo que deje gratis el curso (1 mes). Pero también hubo críticas negativas (las menos) sin explicación alguna. Y otras criticas constructivas, en especial la de Dario Cariboni. Gracias a esta persona el curso va a mejorar exponencialmente.

Preview 02:24

En Udemy existen 4 formas de comunicarnos, las cuales te paso a detallar en este video. Para que pueda atender mejor tanto tus dudas como sugerencias.

Preview 04:47

Información escrita de la diapositiva que sigo en el video relacionado con esta clase.

Preview 00:51

Esto es posible gracias a la crítica constructiva de Dario Cariboni, quien me hizo reflexionar sobre cómo debería ser el curso, en base al título que tiene. Mi interés es que os deis valor y cada uno cree su propio sitio web. 
No obstante, os mostraré cómo modificar el tema prediseñado Primer (gratuito) desde el principio y los plugins que usaré (para que todos tengamos la misma configuración). Probablemente no acabaré todas las secciones que pretendo incorporar hasta otoño 2017. Espero tengáis paciencia, pues cada sección me llevará aproximadamente 2 o 3 semanas.


Preview 02:37

Para mucha gente ajena a la plataforma (o incluso dentro de ella), no consideran justo que Udemy juegue con los precios de tu curso. La mayoría de estas personas desconocen la filosofía por la cual Udemy nació. Gracias a una entrevista a uno de los fundadores de Udemy, Eren Balí, entendí el propósito final de Udemy, con el cual me identifico. Balí se preocupa por personas con gran potencial alrededor del mundo pero que no pueden permitirse pagar una carrera en una Universidad de alto prestigio.

Preview 09:46

La mayoría de personas coleccionan certificados pero sin aplicar en ningún momento lo que han aprendido. Eso no vale para nada. Udemy no es una institución acreditada, no obstante ofrece cursos impartidos por expertos en su campo de especialización. Y como veremos gracias al cofundador de la red LinkedIn, hoy día se da más valor a demostrar lo que sabes hacer en proyectos reales. Para lo cual te hago una serie de recomendaciones.

Preview 10:07
+
Aspectos generales en la construcción de un nuevo sitio web (Update: 12-07-2017)
25 Lectures 03:00:15

Te doy la bienvenida a esta sección, en la cual pretendo que comprendas de un vistazo rápido todo lo que abarca la creación de un nuevo sitio web, tanto si es para ti, como para otra persona o entidad. 
Antes de darte las herramientas para su construcción, tendrás que saber qué quieres hacer exactamente. Las clases a pesar de parecer largas, son muy útiles y se hacen amenas. En todo momento una diapositiva te guiará sobre lo que se muestra, tanto con una explicación como ejemplo práctico, el cual puedes seguir a modo de ejercicio. Además, algunas de estas clases también tendrán su propia sección.

Preview 01:21

Definición a nivel general y cómo se aplica esto al entorno WordPress. Cómo se vinculan tanto páginas como entradas a dominios y subdominios, y utilidad de estos últimos en cierto alojamiento web. Se menciona de pasada, cómo crear enlaces apropiados para SEO en tus entradas (artículos). Al final se citan 3 alojamientos web recomendados para WordPress(.org)

Qué es un sitio web
09:09

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra.

Qué es un sitio web - Info
01:10

Se explica el cometido principal tanto para una empresa como una persona que quiera destacar su Marca Personal (conocimiento de una temática + personalidad). Este último aspecto servirá de ejemplo para todo el curso, ya que me especializo en eso. En un sitio web tenemos que conocer 4 aspectos muy bien y relacionados con marketing (Vilma Nuñez, sirve de ejemplo). También debes ser consciente de la cantidad de elementos multimedia que podemos manejar afín de dar a conocernos mejor, ya sea a nivel publicitario o comunicativo.
Nota: Más adelante, contará con su propia sección.

Para qué sirve un sitio web
11:38

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra.

Para qué sirve un sitio web - Info
02:03

Se explican una serie de procesos vinculados a una redacción previa por escrito (mencionado en la clase anterior) y necesaria. Así ayudas a transmitir mejor el tipo de sitio web que quieres hacer para ti o incluso encargar a una agencia o freelance. Esta clase sirve tanto para alumnos como para clientes. 
Nota: Más adelante, contará con su propia sección.

Preview 17:46

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra.

Orden y comprensión de tus ideas - Info
03:53

Aquí te muestro los medios habituales. Algunos ya los conocerás, otros resultarán ser una sorpresa por el escaso porcentaje de población que los usa pero se cuenta con dichas personas. Y otro de ellos aunque conocido... será una revelación cuando gracias a cierta herramienta sepas cuan bueno es el servicio que te ofrece o no.

Cómo accedes a un sitio web
14:49

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra.

Cómo accedes a tu sitio web - Info
02:43

Explicación de los diferentes tipos de tecnologías. Qué software ayuda a su interpretación. Qué software permite la creación de sitios pequeños (estáticos) con tecnologías sencillas (HTML y CSS) o sitios grandes (dinámicos) con tecnología más compleja (PHP). Se hace una comparativa de ambos tipos de software
- Dreamweaver, para sitios pequeños (HTML y CSS)
- WordPress, para sitios grandes (PHP) con tecnología más compleja
Así mismo, breve explicación sobre HTML5 y CSS3 que sirve de introducción a otras clases.

Cómo es creado un sitio web
18:01

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra

Cómo es creado un sitio web - Info
00:48

Una explicación más detallada de cómo suele mostrar cierto software, usado habitualmente, un sitio web. Normalmente se presenta con 2 tecnologías sencillas (HTML y CSS). Pero a veces se le suele acompañar de una tecnología más compleja (JavaScript), como suele suceder con el software WordPress, gracias al uso de plugins (o funciones específicas que no verás en este curso). Te dejo una recomendación con respecto a ciertos plugins a la hora de instalarse.

Sitio web: HTML, CSS, JavaScript
05:34

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra.

Sitio web: HTML, CSS, JavaScript - Info
00:20

Una primera toma de contacto para este tipo de tecnología. Qué es y para qué sirven. Se ofrece un ejemplo práctico, en una escuela online, cuyo ejercicio se completará en su traspaso a WordPress, para que tú mismo hagas la prueba y evites ciertos errores.
Nota: Más adelante, verás esta clase integrada en la sección relacionada con maquetar tu sitio web con SiteOrigin y otros plugins.

Etiquetas HTML (estructura contenido)
12:39

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra.

Etiquetas HTML (estructura contenido) - Info
00:35

Una primera toma de contacto para este tipo de tecnología. Qué es y para qué sirven. Se ofrece un ejemplo práctico, en una escuela online, cuyo ejercicio se completará en su traspaso a WordPress, para que tú mismo, hagas la prueba y veas la facilidad no solo de cambiar colores y tipografías, sino hacer desaparecer títulos o bloques enteros (algo aplicable a las 'landing page' o créditos footer/pie de página).
Nota: Más adelante, verás esta clase integrada en la sección relacionada con maquetar tu sitio web con SiteOrigin y otros plugins.

Reglas CSS (presentación agradable)
17:38

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra.

Reglas CSS (presentación agradable) - Info
01:00

Un resumen donde te aclaro las 2 clases anteriores. HTML y CSS, es lo único que necesitas aprender para tomar el control de cómo se verá tu sitio web, y así distinguirte del resto.

HTML y CSS (es lo único que necesitas)
02:13

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra

HTML y CSS (es lo único que necesitas) - Info
00:26

En esta clase te hago especial hincapié en la declaración del tipo de documento HTML que usan todos los sitios webs (esto se refiere a que versión están usando). También te hablo de las etiquetas <meta> o <link> y elemento <title>. Así mismo, verás una versión ligera del elemento <body> sin la estructura habitual de un sitio web. Esta explicación te sirve de base para que comprendas el concepto de la clase siguiente.

Estructura básica sitio web HTML
12:58

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra

Estructura básica sitio web HTML - Info
01:17

Una de las clases más didácticas de toda la sección, cuya información ha sido ampliamente contrastada. Tienes 3 diapositivas a tu disposición, explicando la evolución de las diferentes versiones de HTML y CSS, las cuales tanto en su versión más moderna como antigua, siguen trabajando juntas pero hay que evitar malas prácticas que detallo en la clase. Buscadores, navegadores y cierto software que ya dije en clases anteriores, dan mucha importancia a las etiquetas semánticas HTML5 a nivel de estructura (dentro del elemento <body>).

Evolución etiquetas HTML
18:56

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra.

Evolución etiquetas HTML - Info
02:06

En WordPress existen 2 formas de realizar un sitio web. Sacando provecho de un tema prediseñado, con el que empezamos este curso, y en el cual veremos ciertas limitaciones con respecto a un tema personalizado al 100% (framework). No obstante, el tema prediseñado que escogí es gratuito y está a medio camino entre ambas formas de trabajar en WordPress, dado que tiene 9 'temas hijos' de diferente temática y ofrece cierta libertad de maquetación en su header y footer, algo inusual en un tema prediseñado convencional. 
Al final de esta clase te muestro una herramienta que te permitirá saber qué plugins o temas de WordPress utilizan otras personas/empresas. 
Nota: Como ya digo en la clase, es recomendable guardar la maquetación que hagáis con SiteOrigin, ya que en la última sección de la actualización del curso, manejaremos un framework gratuito y usaremos dicha maquetación.

Temas: Prediseñados Vs Personalizados 100%
18:41

Lo mismo* que en la diapositiva del vídeo pero en versión escrita (texto), con imágenes y enlaces a los sitios que se muestran.
*: Puede contener información extra.

Temas: Prediseñados Vs Personalizados 100% - Info
02:27

Comprueba lo que has aprendido en la sección 2: Aspectos generales en la construcción de un nuevo sitio web

Cuestionario - Sección 2
18 questions
+
Concepto, demostración, presentación e incompatibilidades de plugins SiteOrigin
4 Lectures 20:49

Son también denominados page builder, te permiten colocar la información de tu web de la forma que desees y no únicamente como te ofrece de forma nativa WordPress. 

Sirven tanto para las entradas de tu blog (es decir, los artículos) como para las páginas (secciones fijas de tu web). 

Preview 02:20

Selecciona la opción correcta

Recomendaciones uso maquetadores visuales
1 question

Hago un repaso por todas las secciones de mi web, para que veáis el resultado del maquetador visual. Excepto la sección del Blog, ya que ahí está el diseño del propio tema que elegí.

Preview 07:52

Aquí os muestro los maquetadores visuales que existen. Tanto gratuitos como de pago. Además os advierto que tengáis cuidado con los más populares (de pago), pues no siempre son la mejor opción.

Presentación Page Builder de SiteOrigin y otros maquetadores web
07:29

¿Qué tiene de especial 'Page Builder por SiteOrigin'?

'Page Builder por SiteOrigin' y otros maquetadores visuales
3 questions

Que yo sepa, existen 2 plugins incompatibles con el maquetador visual de SiteOrigin. Te digo cuáles son.

Incompatibilidades conocidas en Page Builder de SiteOrigin
03:08
+
Tutorial básico teórico + práctico
8 Lectures 41:36

Acudimos al repositorio de WordPress.org (en adelante WP) para buscar y descargar los 2 plugins. También lo puedes hacer desde el apartado correspondiente en tu Escritorio de WP. Primero Page Builder y después SiteOrigin Widgets Bundle

Descargar, instalar y activar los 2 plugins de Page Builder de SiteOrigin
02:07

Vamos a ver si te has enterado bien que plugin debes instalar primero

Repasando qué plugin tiene prioridad
1 question

Una vez activados ambos plugins, veremos dónde encontrarlos.

Preview 06:13

Como te decía al comienzo, este maquetador visual es uno de los que mejor se mimetiza con el diseño interno (back-end) de WordPress. Tanto es así, que puede pasarte desapercibido. Te indico dónde aparece.

Así mismo, debes tener cuidado con la pestaña Revert to Editor, ya que borraría maquetación hecha y no podrías volver a la misma.

Localizar dónde está la pestaña Page Builder
04:20

Defecto de Page Builder con Vista Previa y otros...

Repasemos qué sucede con la pestaña Page Builder y su contraria
2 questions

Aquí, no sólo agregamos una fila también tenemos opción de insertar columnas, un máximo de 8, otorgando a cada una de ellas el ancho que deseemos. 

Siempre que quieras agregar una nueva fila, vigila cuál tienes activa. Si por el motivo que sea no te gusta donde se ha situado, puedes cambiarla de posición. También puedes editarla, duplicarla o eliminarla.

Agregar una fila
03:54

Un widget es una forma de ver tu contenido, a través de una pequeña aplicación o programa, cuyo objetivo es facilitarte el acceso a funciones que usas frecuentemente. Por ejemplo: textos, imágenes, video, mapa google, formulario contacto o suscripción, buscador, redes sociales dónde estás. Pero como veremos hay otros, propios de diseño.


Agregar un widget
09:07

Una vez que hayamos avanzado en nuestra maquetación y queramos ver una previsualización antes de guardar, basta con hacer clic sobre la pestaña correspondiente. Editor en vivo.

La ventana que se abre es muy parecida al personalizador de WP. Según situamos el puntero del ratón sobre el apartado visual, a nuestra derecha, vemos como los widgets contenidos en las diferentes filas, aparecen sombreados, en la zona izquierda.


Editor en vivo
05:35

Como su propio nombre indica te permite visualizar copias anteriores antes de publicar tu maquetación. Esta opción es una de las peor conseguidas en este maquetador visual. Veremos otras mejores que suplen a ésta, en la próxima y última clase.

Historial
03:03

Esto que parece una pestaña que puede pasar desapercibida, es muy importante si disponemos de poco tiempo porque tenemos unas opciones muy interesantes. Entre ellas:

  • Directorio de estructuras. Aquí encontrarás varios temas prediseñados, no siempre encajan bien en el tema que estés usando. Pero se puede ajustar desde cierto sitio.
  • Importar/Exportar (Plantillas). Hay que maquetar muy bien, procurar usar las menos filas posibles para que guarde plantilla.
  • Clonar: Páginas. Una de las opciones más interesantes por facilidad y rapidez. 
  • Clonar: Entradas. No recomiendo maquetes entradas. A mí, me aparece curiosamente una, pero no está maquetada. A veces te puede aparecer un 'falso positivo'.
Layouts (anteriormente llamada: Predefinir)
07:17
+
Fin del curso
1 Lecture 00:26
Despedida
00:26
About the Instructor
Joan Morci
3.9 Average rating
29 Reviews
467 Students
1 Course
Marca Personal en Diseño Multimedia

Todos buscamos ser genuinos en algo, destacar en un talento. Algunos nos perdemos por el camino, otros encontramos uno de nuestros elementos y los más afortunados varios. Yo no descubrí mi talento, al menos uno de ellos, hasta el 2006 (27 años). Pero no fue hasta finales noviembre 2015 que me focalicé en ello.

Desde que descubrí mi talento, ayudo a otros a darse a conocer, a través del Diseño Multimedia: diseño web, gráfico y edición audiovisual.

Me dirijo a emprendedores, autónomos y trabajadores por cuenta ajena, quienes se valoran y quieren darse a conocer.

Te ayudo a potenciar tu Marca Personal, a través del Diseño Multimedia, otorgándote distinción en medios online y offline. Gracias a la influencia del diseño visual y emocional. Tan importante es lo que se dice como su correspondencia gráfica y los sentimientos que ésta evoca.

He tenido oportunidad de trabajar con personas: religiosas, políticos, militares, artistas, emprendedores, autónomos, ONG, videojuegos, series de TV.

El único límite que tienes en la vida, en muchas ocasiones, te lo impones tu mismo. Por ello te invito a romper esa barrera, y darte la oportunidad de que te conozcan tanto en el terreno profesional como personal. La suma de ambos aspectos, determina tu Marca Personal. Aquello que te diferencia del resto y con lo que dejas huella en los demás.

Para ello te ofrezco la oportunidad de hacerlo... yo por ti (servicios), tú por ti mismo (formación) o identificar el verdadero problema para darte la solución correspondiente (consultoría).

Si eres una de esas personas que no tienen claro lo que quiere en la vida, te recomiendo un libro que me ayudo a verlo mejor, El Elemento: Descubrir tu pasión lo cambia todo (Ken Robinson). 

Si aún no te queda claro en qué puedes ser una persona verdaderamente talentosa, mi siguiente recomendación es que te pongas en manos de un buen Life Management (gestor de cambios en tu vida), por ejemplo Gloria Méndez. Quien a buen seguro sabrá entenderte, guiarte y llevarte de la mano para descubrir tu elemento, aquella vocación en la que fluyes y te hace sentir pleno/a.

Sólo cuando tienes claro que quieres hacer con tu vida, tanto profesional como personal, será cuando pueda ayudarte.

Siempre he pensado que una persona que trabaja en su verdadera vocación, le ayuda a alcanzar la mejor versión de si mismo. Y eso siempre es algo positivo para dicha persona y la sociedad, la cual se nutre de ese valor alcanzado.

En relación con mi llegada a Udemy como instructor (profesor), diré que siempre me he sentido atraído por el mundo de la educación, pero me veía incapaz de manejar una clase llena de adolescentes, más interesados en incordiar que aprender una materia. 

Sin embargo, apreciaba la labor de algunos profesores que tuve en el Instituto (educación secundaria), los cuales se salían un poco de la norma y gracias a anécdotas o ejemplos de la vida cotidiana, hacían más fácil asimilar ciertos conceptos. 

Gracias a estos profesores tan 'pintorescos' me siento con la capacidad de abordar este gran reto, el cual había probado en pequeñas dosis con mis clientes de diseño web y me agradecían la paciencia demostrada. 

Dicho esto, espero hacerlo lo mejor posible en mi paso por Udemy, para lo cual deseo que los alumnos se expresen libremente y escriban aquello en lo que puedo mejorar para que su propio aprendizaje sea aun mejor.

¡Nos vemos en el curso!