Curso de Diseño Web en Sanchinarro
Hola, en esta entrada voy a subiros los vídeos de algunas de las prácticas que vamos a ir haciendo en clase a lo largo del Curso de Diseño Web en Sanchinarro, en el Centro Cultural de Sanchinarro.
Podéis ver la lista entera en mi canal de Youtube, o seguir los contenidos ayudados por el índice.
CURSO DE DISEÑO WEB EN SANCHINARRO
ÍNDICE
1. Instalación WordPress y configuración básica
Para comenzar nuestro Curso de diseño web en Sanchinarro, lo primero que tenemos que hacer para comenzar a construir nuestra página web es instalar el servidor local en nuestro ordenador.
Para Mac instalaremos en este curso MAMP, y para PC instalaremos XAMPP
La ruta del servidor local en PC será C:xampp. Y la carpeta donde estarán nuestros proyectos será C:xampp/htdocs
La ruta del servidor local en Mac será Aplicaciones/Mamp. Y la carpeta donde estarán nuestros proyectos será Aplicaciones/Mamp/htdocs
También instalaremos en nuestro ordenador el editor de código SUBLIME TEXT
Para empezar nuestro proyecto de página web con WordPress lo primero que vamos a hacer es ir a https://es.wordpress.org/ desde donde descargaremos la última cversión en español de este CMS y luego la descomprimimos.
Renombramos la carpeta con el nombre del proyecto 2tproyecto1
Buscamos el archivo wp-config-sample.php y lo abrimos con Sublime Text
Estas son las líneas de código que tenemos que editar:
// ** MySQL settings – You can get this info from your web host ** //
/** The name of the database for WordPress */
define( ‘DB_NAME’, ‘database_name_here’ );
/** MySQL database username */
define( ‘DB_USER’, ‘username_here’ );
/** MySQL database password */
define( ‘DB_PASSWORD’, ‘password_here’ );
Vamos a renombrar el nombre de la base de datos, el nombre del usuario y el password. En los 3 casos para este ejercicio usaremos el nombre del proyecto: 2tproyecto1
Tiene que quedar así:
// ** MySQL settings – You can get this info from your web host ** //
/** The name of the database for WordPress */
define( ‘DB_NAME’, ‘2tproyecto1’ );
/** MySQL database username */
define( ‘DB_USER’, ‘2tproyecto1’ );
/** MySQL database password */
define( ‘DB_PASSWORD’, ‘2tproyecto1’ );+
Guardamos el archivo renombrándolo como: wp-config.php
Y ya podemos llevar la carpeta al servidor local de nuestro ordenador.
En Aplicaciones/Mamp/htdocs ó en c:xampp/htdocs es donde tenemos que pegar esta carpeta.
Abriremos el proyecto y ya podemos empezar a hacer las configuraciones básica de inicio.
En este vídeo vemos el proceso y cómo hacer las configuraciones básicas para comenzar a trabajar en el Curso de diseño web en Sanchinarro.
2. Instalación del tema TOWER
Podemos buscar un tema para nuestro proyecto en THEMEFOREST. Vamos a ver cómo elegir un tema para nuestro proyecto y cómo instalarlo. En esta práctica del Crso de Diseño Web en Sanchinarrto vamos a hacerlo con TOWER, que es el theme que he elegido para trabajar en el segundo trimestre.
En THEMEFOREST podmos elegir y comprar temas y plugins.
Como vemos en el vídeo de la práctica, una vez elegido el tema, al comprarlo nos creará una cuenta de ENVATO desde donde gestionaremos todas nuestras compras.
En el vídeo vemos las dos formas de instalar un theme, bien pegándsolo en la carpeta THEMES de nuestro proyecto o bien importando el archivo ZIP del theme.
Una vez que tengamos el tema child activado, instalaremos los plugins que nos indica el theme que son necesarios para empezar a trabajar en nuestro proyecto.
Acabado todo el proceso, borraremos los 3 temas por defecto que nos ofrece WordPress.
En el siguiente vídeo vemos el proceso de la práctica.
3. VISUAL COMPOSER
Durante el curso vamos a probar varios builder o constructores. Un builder nos permite construir fácilmente nuestras páginas y entradas.
El primero que probaremos es VISUAL COMPOSER porque me parece que su curva de aprendizaje es rápida y he podido comprobar que los alumnos aprenden rápidamente a trabajar con él.
Más adelante introduciremos otros como ELEMENTOR, DIVI, etc.
En esta práctica construimos un menú principal muy básico, cambiamos el logotipo de la página y creamos una página INICIO muy básica para aprender a trabajar con filas y columnas.
Es importante, antes de ver el vídeo y empezar a practicar, aprender algo sobre el modelo cajas de CSS.
En esta entrada podéis aprender algunas nociones básicas.
