Experto de Photoshop a WordPress creando 4 Themes/Plantillas

Aprende como convertir tus Diseños de PS a WordPress, incluye plantillas con Bootstrap, Foundation y temas avanzados
4.5 (149 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.
643 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 239
  • Length 20.5 hours
  • Skill Level Intermediate Level
  • 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 3/2015 Spanish

Course Description

¿Alguna vez has intentado convertir un diseño en Photoshop y encontrarte con problemas para hacerlo?

¿Estás cansado de utilizar plantillas que no se adaptan al diseño que tienes en mente?

En este curso aprenderás a construir tu diseño desde Photoshop a un tema de WordPress.

En este curso desarrollarás 4 proyectos completos!

Primer Sitio: Un sitio web básico que te enseñará lo básico para crear plantillas en WordPress.

Segundo Sitio: Crearemos un segundo sitio web con opciones más avanzadas, responsivo y que integrará opciones más avanzadas como Advanced Custom Fields, Custom Post Types y un Login personalizado.

Tercer Sitio: Desarrollarás un sitio web con el Framework más avanzado del mundo: Foundation 6 y SASS.

Cuarto Sitio: Desarrollarás un sitio web con el Framework más popular del mundo: Twitter Bootstrap.

Este curso es para ti si deseas crear tus propias plantillas, mejorar tus habilidades de programación/diseño web y si quieres ampliar tus habilidades en tu Curriculum para obtener un mejor empleo en este año.

What are the requirements?

  • Un Editor de Texto, un servidor local y posibilidades de crear una base de datos es todo lo que necesitas para seguir este curso

What am I going to get from this course?

  • Convertir sus propios diseños de Photoshop a WordPress
  • Poder leer la Jerarquia de Temas de WordPress (Theme Hierarchy) para realizar cualquier diseño en especifico
  • Conocer archivos más avanzados de WordPress
  • Sacar el máximo provecho a WordPress sin tener tantos problemas
  • Crear sitios web 100% dinámicos para el trabajo que ya tienes o el que deseas tener

What is the target audience?

  • Cualquier persona que desee crear temas en WordPress y tenga poca o nula experiencia aprenderá todo lo necesario.
  • Si ya has utilizado WordPress y quieres extender su funcionalidad, este curso es para ti
  • Personas que quieran aprender a crear sitios web para sus clientes o lugar de trabajo deberán tomar este curso
  • Si ya tienes experiencia creando diseños en HTML y te gustaría crear páginas dinámicas, este curso es el indicado para ti.

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: Que vamos a construir en este curso
04:25

Veamos el primer proyecto que realizaremos en este curso

07:45

Veamos el segundo proyecto que realizaremos en este curso

05:08

Veamos el tercer proyecto que realizaremos en este curso

04:30

Esta será la 4ta plantilla, la realizaremos con Twitter Bootstrap, el framework más  popular para CSS, HTML y JavaScript

08:38

Conoce todas las ventajas que tiene aprender a desarrollar plantillas de WordPress, estas en el mejor momento para hacerlo y en el curso indicado.

02:06

Veamos los archivos para este curso

Sobre las imágenes de este curso
Article
02:14

Revisaremos los archivos PSD para nuestra Primer Plantilla una revista de la ciudad de Toronto.

04:57

En el segundo tema de este curso estaremos elaborando un sitio web para una agencia de viajes, en esta parte convertiremos 8 archivos PSD. Además de que agregaremos algunas características más avanzadas.

02:16

En este video daremos un vistazo a los 7 archivos de Photoshop que se incluyen esta sección del curso. NOTA: Los archivos fueron realizados con la versión CS6

Section 2: Introducción a PHP
06:21

Veamos como crear un archivo de PHP y un bloque de código

03:24

Veamos como imprimir en pantalla en PHP

04:36

Veamos como crear variables en PHP más algunas recomendaciones

08:42

Veamos como hacer código más inteligente, que tome decisiones con condicionales

05:52

Veamos lo que son los arreglos indexados

05:20

En este video veremos lo que son los arreglos Asociativos

04:27

Veamos 2 funciones muy útiles a la hora de trabajar con arreglos

05:09

a la hora de escribir código PHP hay 2 estilos, veamos como utilizar ambos

04:58

Los bucles te ayudarán a repetir algo cuantas veces sea neesario, iniciaremos con el más complejo, el for

03:20

El foreach es especialmente diseñado para arreglos (aunque los otros también pueden imprimir y trabajar con arreglos) veamos como utilizarlo

04:14

El while, es por mucho el más utilizado en WordPress, veamos como utilizarlo

07:26

Todo lenguaje cuenta con una gran cantidad de funciones ya escritas para ti, en este video veremos algunas de ellas

03:30

Veamos como crear tus propias funciones en PHP

03:26

Cualquier información puede ser pasada a las funciones mediante la lista de argumentos, veamos como crear una función con argumentos

04:02

WordPress utiliza algo llamado los Template Tags, veamos un ejemplo sencillo para darnos idea de como es esta forma de utilizarlos, y que al final, son funciones.

06:16

Las funciones pueden retornar valores, veamos un ejemplo sencillo

07:45

PHP puede manejar funciones matemáticas, veamos algunos ejemplos

Section 3: Nuestra Primer Plantilla en WordPress
03:38

En este video instalaremos WordPress desde cero. crearemos la base de datos, así comenzaremos todos desde el mismo punto.

04:13

Si utilizas Windows y es tu primera vez trabajando con algo de PHP y mySQL lo ideal es tener un servidor local, WAMP te hará la vida muy sencilla, veamos como instalarlo.

06:18

Estaré utilizando Mac y Mamp para el resto del curso, pero en este video verás como tener el mismo ambiente de desarrollo en Windows e instalar WordPress sin problemas.

04:56

En este video crearemos los primeros archivos para nuestro Theme.

04:04

La Jerarquía de Temas (Theme Hierarchy) de WordPress te dice como debes nombrar tus archivos para que WordPress los reconozca, aquí le damos el primer vistazo.

Section 4: Comenzando a trabajar con los archivos de nuestra primer plantilla
02:41

WordPress permite crear páginas, aquí aprenderás como nombrar y crear los archivos para páginas.

08:12

WordPress permite crear contenido por módulos, para poder reutilizar lo mas que podamos, el header es una parte de las mas importantes, aquí crearemos uno.

02:26

Al igual que el Header, el Footer es otro elemento muy importante, en este video crearemos uno con todo lo necesario para funcionar.

04:44

En este video crearemos todas las páginas para nuestro curso, así como algunos ajustes importantes para el correcto funcionamiento de nuestro sitio web.

04:29

En este video aprenderás como agregar archivos a la plantilla de WordPress de la forma correcta.

06:21

En este video agregaremos una hoja de estilos para comenzar a trabajar, así como el archivo functions.php para todas las funciones relacionadas a nuestra plantilla

03:40

Creando los primeros estilos de nuestra página web.

En este video comenzaremos a crear el código CSS para nuestra página web.

06:48

En este video agregaremos nuestro primer menú administrable a nuestro sitio web

05:52

En este video escribiremos los CSS para nuestro menú

10:38

En este video veremos como agregar el menú al Footer y como agregar los estilos CSS a este.

04:25

En este video crearemos una barra lateral para nuestro diseño.

09:33

En este video instalaremos el plugin de desarrollo de WordPress, además aprenderemos a trabajar con las imágenes destacadas.

04:40

En este video veremos una función en WordPress para detectar cuando tenemos una imagen destacada o no.

06:02

En este video comenzaremos a trabajar con una zona de Widgets para nuestra sección de Testimoniales.

07:38

En este video editaremos el CSS de nuestro sidebar y zona de Widgets.

03:55

En este video veremos la forma de trabajar con la página actual para que WordPress nos diga en que parte de nuestro sitio estamos ubicados.

05:23

En este video veremos la plantilla para todas nuestras Entradas de WordPress

03:23

En este video crearemos un Custom Template para nuestro Blog.

Section 5: Creando un sitio con funciones avanzadas
04:41

En este video veremos como hacer consultas a la base de datos de WordPress con la función WP_Query

03:32

En este video te mostraré el alcance de WP_Query, prácticamente todo lo que desees puedes consultarlo con esta poderosa función

08:35

En este video veremos algunas etiquetas mas utilizadas en WordPress para mostrar el contenido.

12:23

Una vez hecho el Query de nuestro sitio en WordPress es momento de pasarle algo de CSS.

02:59

En este video veremos otro archivo, single.php las plantillas de cada Entrada.

06:21

En este video veremos las etiquetas mas comunes para nuestra plantilla single.php

04:34

En este video editaremos el CSS de nuestro single.php

08:59

En este video crearemos un Template para nuestra sección de Consejos

10:18

En este video instalaremos un Plugin para nuestro formulario de Contacto y lo editaremos con CSS3.

10:02

En este video comenzaremos a crear la página principal de nuestro sitio web.

04:56

En este video veremos como mostrar los 2 últimos post en la página principal.

07:18

En este video daremos estilo a nuestros 2 últimos post de la página principal

06:21

En este video veremos como integrar librerias JavaScript a nuestro diseño.

16:48

En este video agregaremos un Slider programando, sin utilizar Plugins.

05:07

En este video introducimos un nuevo archivo, category.php que se encargará de mostrar las categorías de nuestro blog.

02:43

En este video veremos algunas funciones para imprimir títulos dinámicamente en nuestro sitio web.

03:09

En este video agregaremos la fotografía para nuestro Theme.

Section 6: Utilizando un Starter Theme o Blank Theme para acelerar el desarrollo de Themes
02:42

En este video comenzaremos la instalación de WordPress para iniciar desde cero.

05:31

En este video descargaremos e instalaremos HTML5 Blank para comenzar el proyecto.

06:48

En este video daremos un Tour para conocer lo que nos ofrece HTML5 Blank Theme

05:17

En este video revisaremos los archivos PSD para el presente curso, estos archivos serán lo que convertiremos a un theme de WordPress

Section 7: Creando nuestro diseño para una Agencia de Viajes
01:02

En este video comenzaremos haciendo los primeros ajustes a nuestra plantilla para comenzar a familiarizarnos con HTML5 Blank Theme

04:27

Crearemos todos las páginas que servirán de interiores para nuestro diseño, además lo enlazaremos al menú de WordPress para hacerlo dinámico.

08:27

Comenzaremos editando el CSS de nuestro diseño, en esta parte comenzamos con el menú principal y la barra de nuestro sitio.

05:17

Continuamos la construcción de nuestro sitio, en este video trabajaremos con el Footer principal.

03:48

En este video haremos que nuestros encabezados tengan un efecto especial.

01:02

Vamos a ver lo que serán los archivos que utilizaremos para este curso. Las imágenes de cada ciudad que son agregadas a las galerías están en este capitulo

02:15

Vamos a ver algunos Plugins útiles para el desarrollo de themes en WordPress.

03:07

Photoshop es una herramienta muy útil para desarrollo web, aquí aprenderás como ir cortando tu diseño para irlo integrando a WordPress

03:40

Imprimir una imagen destacada es fácil, pero en este video veremos un uso más avanzado para esta funcionalidad que agregará gran detalle a tu sitio web.

05:23

Finalizaremos la edición de nuestra imagen destacada agregando un poco de CSS.

01:53

Crear plantillas en WordPress puede ser un poco confuso, aquí te mostraré la mejor forma de hacerlo

Section 8: Agregando funcionalidad más avanzada a nuestro Theme
06:20

Advanced Custom fields te permitirá agregar campos extras a tu sitio en WordPress, aquí lo agregaremos a nuestro diseño

04:16

En este video veremos como agregar un nuevo tamaño de imágenes para nuestro sitio web y como imprimirlas.

13:48

Con nuestras imágenes listas, agregaremos un efecto de CSS3 que simulará el efecto polaroid en fotografías, todo hecho con CSS3.

05:46

WordPress viene con Entradas y Páginas, en este video agregaremos un nuevo Custom Post Type llamado Tours.

04:50

Daremos un toque avanzado a nuestro Custom Post Type de Tours, agregaremos varios campos nuevos para darle mucha información extra al usuario final de una forma organizada.

08:00

Crearemos el contenido para nuestra sección de Tours, cargaremos la galería, información, etc.

08:07

Una vez hechos creados nuestros tours en la Base de datos, es momento de crear una plantilla y hacer la consulta a la base de datos de WordPress

06:29

Una vez hecha la consulta a la Base de datos de WordPress es momento de imprimir los campos en nuestra página

12:30

Una vez que hemos podido imprimir los campos a nuestra plantilla es momento de agregar un poco de CSS.

10:24

En este video veremos la sección completa de cada Tour, imprimiremos la imagen destacada, galería, precio, cupo, fechas e itinerario

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Juan Pablo De la torre Valdez, Freelance Web Developer and Owner of Easy-WebDev

My name is Juan Pablo De la torre Valdez, i´m from Guadalajara. Mexico.
For the last 10 years i been working with the web, i have a lot of experience in modern Web Technologies such as Foundation, Bootstrap, RWD, WordPress, Drupal, PHP, JavaScript & jQuery, HTML5, CSS3, SASS and Photoshop.

I started a company called CreativaWeb where i design and develop WordPress based websites.

I really like to design and develop websites, in the recent years i made hundreds of websites for Government, Universities, Startups and Medium-Size Companies from my city, the whole country and  from another countries.

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

Soy diseñador y programador web desde hace más de 10 años, tengo amplia experiencia y trabajo diariamente con tecnologías como Foundation,  Bootstrap, WordPress, Drupal, PHP,JavaScript y jQuery, HTML5, CSS3, SASS y Photoshop.

Comencé una compañia llamada CreativaWeb, donde principalmente diseño y desarrollo sitios web en WordPress.

Me gusta combinar mi trabajo en diseño y programación; en los años anteriores he hecho cientos de páginas para dependencias del Gobierno, Universidades, Pequeños y Medianos de negocios de mi ciudad, a nivel nacional y de otros países.

Ready to start learning?
Take This Course