Lunes 22 de enero de 2018 Profesor Josep

Comenzamos repasando que eran las variables y parece que la clase ira en este sentido y crearemos un archivo con código HTML junto con Código PHP en el mismo documento.

También hace referencia a que el ejercicio de hoy sera puntuable y entrara dentro de la evaluación del curso, el ejercicio tratara de instalar wordpress manualmente en un servidor local con wamp.

Comenzamos la practica con bluefish y la programación en multiple código PHP+HTML el primer error que he tenido es que al abrir el documento en navegador y me ha mostrado bien el código HTML pero ml el código PHP, entonces he guardado el archivo index en PHP he levantado servidor y he ejecutado el archivo desde localhost/ruta de carpeta/index.php de esta forma queda el código en bluefish

Vista desde navegador ejecutado en servidor localhost

Observación, el directorio /www se omite en el navegador por que ese directorio por defecto es publico y ejecuta el software de servidor por eso pondremos localhost/apuntesaula/index.php y no, localhost/www/apuntesaula/index.php

Ahora vamos con las variables, las hay varios tipos.

Variable numérica
Variables alfanuméricas
Variables booleanas, Guardan un valor lógico que puede ser verdadero o falso, en programación son muy comunes.
Variables arrays, guardan un conjunto de variables en una sola variable accesible desde el index.

Ahora hemos echo un ejercicio de variables array hemos agrupado tres variables en una sola linea del siguiente modo:

En este caso hemos creado una variable array del siguiente modo:

$mobils = array(«Iphone», «samsung», «Nokia»);

Los contenidos de la caneda d variables tienen que estar cerrados con () y separados entre comillas » y ,

desglosado en variables simples seria así:

$variable0= Iphone

$variable1= Samsung

$variable2 = Nokia

Siempre comienzan a contar desde cero las variables y después con el comando echo podríamos mostrar cada variable en la parte del texto que nos convenga.

Cuando hacemos el comando echo entre punto y punto le podemos añadir variables para que las muestre con un solo echo ahorrando lineas de código y tiempo de programación y de carga. Se le llama concatenar variables.

No hace falta definir que tipo de variable trabajamos, por que PHP con el valor que le damos ya sabe con que tipo de variable estamos trabajando, pero se puede llegar a forzar a que interpreto una variable que necesitemos que interprete de otro modo.

Forzaremos una variable del siguiente modo:

settype ($variable, «integer»); con esta linea de código forzamos a una variable a mostrar un número entero.

Comenzamos el primer ejercicio puntuable con la instalación de WordPress en servidor localhost.

Lo vamos a descargar de la web de wordpress lo podemos descargar en la ubicación que queramos y lo descomprimimos y nos quedara una carpeta con el nombre WordPress y esa carpeta la copiaremos en la ruta del servidor local C:\Wamp\www

Una vez hecho este paso vamos crear una base de datos y un usuario de la base de datos, para después poder instalar WordPress en esa base de datos que hemos creado.

Vamos localhost/phpmyadmin y desde aquí vamos a crear la base de datos y un usuario de la base de datos si por lo que sea pide usuario para entrar a phpmyadmin le pondremos Usuario root y contraseña en blanco.

Una vez dentro vamos donde dice bases de datos y le damos un nombre dejamos en cotejamiento para que mire si tenemos una base de datos con el mismo nombre y le damos en crear, ahora nos dirá que no hay tablas, es normal por que aun no hay nada en esa base de datos.

Después nos iremos a cuentas de usuario le damos en agregar cuentas de usuario y llenamos los campos que nos va pidiendo, nombre del usuario, servidor en este caso localhost y la contraseña.

después asignaremos permisos de usuario en este caso vamos asignarlos todos por que queremos tener todo el control de la base de datos como administradores que somos.

Una vez asignados privilegios le damos en continuar y ya veremos creado el usuario de la base de datos.

Ya tenemos una base de datos creada que se llama WordPress (le podéis poner el nombre que queráis) y un usuario para administrar la base de datos que se llama freebox (le podéis poner el nombre que queráis) ahora ya podemos ir al navegador y escribir la siguiente ruta localhost/wordpress y nos aparecerá el asistente de configuración con el que podremos configurar e instalar WordPress en la base de datos que hemos creado.

Tras escoger el idioma nos aparecerá la siguiente ventana con un resumen de los datos que vamos a necesitar para continuar con la instalación, le damos clic en ¡vamos a ello! para continuar.

Información necesaria para instalar WordPress en localhost

Ahora tenemos que escribir los datos que nos requieren en nombre de base de datos ponemos la que hemos creado antes en mi caso wordpress, nombre de Usuario de la base datos en mi caso freebox, en servidor de la base de datos ponemos localhost ya que es un servidor local, en contraseña tenemos que poner la contraseña que hemos asignado al usuario de la base de datos y por ultimo el prefijo de tabla que es por el nombre que comenzaran todos los archivos que genere wordpress en la base de datos, lo dejamos en wp_

Si todo ha ido bien nos aparecerá este mensaje

Le damos en Ejecutar la instalación y comenzara el proceso de instalación de WordPress

Titulo del sitio es el que se vera en la pestaña del navegador como vimos en los apuntes curso primera semana, en nombre de usuario pondremos el que queramos pues lo estamos creando de nuevo, para la contraseña igual ponemos la que queramos lo único que hay que acordarse bien de todos los datos que vamos creando y recomiendo que la contraseña tenga mayúsculas, minúsculas, números, caracteres especiales y un mínimo de 10 dígitos.

En el apartado tu correo electrónico pondremos un correo real que tengamos acceso es importante por que si algún día necesitamos recuperar el acceso al usuario de wordpress nos van a enviar la ayuda a esa dirección.

Marcamos la casilla para que no se indexe en los motores de búsqueda, así si la subimos al hosting y le asignamos Dominio hasta que nosotros no queramos no estará visible a los buscadores y evitaremos que alguien entre a nuestra web sin acabar y se lleve una mala impresión.

Por ultimo le damos a instalar WordPress y nos tendría que aparecer el siguiente mensaje.

Ahora si le damos en acceder nos redirigirá al login de WordPress, por defecto localhost/wordpress/wp-admin y aquí nos pedirá usuario y contraseña (lo acabamos de crear recuerdas?)

Le pones los datos y ya podremos acceder al escritorio de WordPress para comenzar a trabajar!!

Vídeo de como instalar WordPress en un servidor localhost con Wamp Server.

LISTO! HASTA AQUÍ LA CLASE DEL LUNES! Y MAÑANA FIESTA HASTA EL MIÉRCOLES NADA!

Miércoles 24 de enero de 2018 clase con Josep

Vamos a cambiar el idioma de WordPres el idioma de los menús. Los ficheros que componen el idioma se encuentran en la carpeta wp-content/languages, en mi caso el directorio es C:\Wamp\www\wordpress\wp-content\languages, vamos a convertir el WordPress enlace descarga archivos wordpress español Para cambiar el idioma tenéis que descargar esta carpeta y los archivos de dentro pegarlos en el directorio C:\Wamp\www\wordpress\wp-content\languages , una vez copiados los archivos tenemos que ir ajustes (settings) General y ahí cambiar el idioma por Español y guardar cambios (save changes)

Ahora vamos hacer una prueba de evaluación la descargamos de drive en este enlace en la prueba de evaluación hay una parte en la que tenemos que descargar plugins desde https://es.wordpress.org/plugins/ solo tenemos que ir al buscador e introducir el nombre del plugin que queremos descargar.

Los plugins descargados son:

force login, Autoptimize, EWWW Image Optimizer,WP Limit Login Attempts, WP Super Cache, WP-Optimize, Protect admin, Updraftplus.

Una vez descargados los tenemos que descomprimir y copiarlos a la carpeta C:\Wamp\www\wordpress\wp-content/plugins

curso inem salt girona — Corpiar plugins descomprimidos

Podéis descargar todos los plugins en este ENLACE

Ahora hemos entrado en el panel de control phpmyadmin en la ruta localhost/phpmyadmin y una vez logeados vamos a exportar una base de datos, primero escogemos la base de datos que queremos y luego nos ha enseñado varias opciones en la pestaña personalizado pero en las opciones exportar rápido también hace lo necesario.

Ahora vamos a destruir la base de datos y la volveremos a restaurar haciendo una importación, para destruirla en el panel izquierdo la seleccionamos y le damos en operaciones y por ultimo en eliminar base de datos (DROP) nos advertirá le decimos ok.

En este caso al importar a dado error establishing data base por que no habíamos creado una nueva base de datos donde volver a importar el contenido.

La nueva base de datos tienen que tener el mismo nombre exacto que la anterior, una vez creada en el panel izquierdo la seleccionamos y le damos en importar ahora seleccionar archivo, es el que se creo al hacer la exportación lo seleccionamos y por ultimo le damos en continuar, si todo ha ido bien ya tenemos la pagina operativa y saldrá un mensaje que ha ido con éxito.

Nota. Cree la exportación desde el usuario root y fue todo bien.

Hoy hemos aprendido como instalar plugins en WordPress de manera manual y como hacer una copia de seguridad, borrar la base de datos y luego restaurarla.

Hemos hecho la prueba de evaluación donde teníamos que hacer un manual de como instalar WordPress en un Hosting externo.

Básicamente es el mismo procedimiento que en localhost pero creando la base de datos y el usuario desde el cPanel del Hosting y subiendo la carpeta WordPress al directorio public.html del Hosting, los datos de configuración son los mismo lo único que en servidor no pondremos localhost y pondremos el nombre de dominio (www.nombredelaweb.com)

También teníamos que configurar el idioma y añadir un nuevo usuario con permisos de administrador, por otra parte hemos configurado que la pagina de inicio sea estática y que los buscadores no indexen nuestra web.

También hemos descargado 8 plugins los mismos que hicimos al principio de clase y de manera manual subiéndolos al directorio, public.html/wordpress/wp-content/plugins

Adjunto la prueba de evaluación en PDF por si la quieren descargar Manual instalación WordPress Hosting Externo

Con eso hemos finalizado la clase mañana tenemos clase con Albert y para los que quieran mas a las 18:30h hay meetup WordPress en Barcelona, cómo tener un blog de éxito y mantenerlo fácilmente.

Jueves 25 de enero de 2018 clase con Albert

Comenzamos bajando un editor de texto avanzado llamado Atom, lo hacemos desde este ENLACE

Comenta Albert que se puede hacer una aplicación en HTML para android con un compilador que pasa el lenguaje HTML, CSS, JavaScript, pero puede que en la compilación se pierda alguna funcionalidad.

Estamos esperando que toda la clase tenga instalado el programa Atom.

No doy abasto a explicar todo mas tarde lo redactare bien!

Para comenzar le daremos en open project y luego otra vez en open project.

Crtl+shift+7 este comando sirve para comentar un texto, es indicado para hacer referencia algún grupo de código

Antes de apretar crtl+shift+7 hay que seleccionar el texto que quieres transformar en comentario. Una vez seleccionado le das a crtl+shift+7 y se trasforma en un comentario.

Al lado del numero de linea de código hay una flecha pequeña que sirve para desplegar o agrupar todo un grupo de código.

Ahora nos enseña a colocar una imagen en un documento HTML, lo hacemos con esta etiqueta <img src= «nombredelimagen.extension/>

Esta etiqueta: <img src=”nombredelaimagen.extension/” buscará la imagen en la misma carpeta donde se encuentra el archivo html. Si la imagen se encuentra en otra carpeta tenemos que especificar la dirección para que se cargue en el navegador correctamente.

Ejemplo elaborado por Ambrogio, compañero de clase:

CARPETA_1

archivo_1.html

imagen_1.jpeg

CARPETA_2

archivo_2.html

imagen_2.jpeg

CARPETA_3

archivo_3.html

imagen_3.jpeg

– Código para cargar imagen_1.jpeg en archivo_1.html:

<img src=”imagen_1.jpeg/”> (la imagen se encuentra en la misma carpeta que el archivo html, o sea CARPETA_1 en este caso y solo utilizamos el nombre de la imagen)

– Código para cargar imagen_2.jpeg desde archivo_1.html:

<img src=”CARPETA_2/imagen_1.jpeg/”> (la imagen se encuentra en una carpeta que está dentro de la carpeta donde se encuentra el archivo html, o sea la imagen está dentro CARPETA_2 que se encuentra dentro CARPETA_1. Especificamos la dirección para encontrarla. En este caso como está una carpeta más adelante utilizamos el nombre de la carpeta más “/” y luego el nombre de la imagen. Dos carpetas adelante: “nombrecarpeta/nombrecarpeta/nombreimagen” y así)

– Código para cargar imagen_1.jpeg desde archivo_2.html:

<img src=”../imagen_1.jpeg/”> (la imagen se encuentra en una carpeta que está afuera o antes de la carpeta donde se encuentra el archivo html. Para volver una carpeta atrás utilizamos este codigo “../” seguido por el nombre de la imagen y así buscará la imagen en la carpeta anterior de donde nos encontramos. Para volver dos carpetas atrás “../../nombreimagen” y así.)

Ahora para modificar el tamaño de la imagen que hemos añadido el atributo width de la siguiente manera <img src=»prova.png» width=»400″ /> el numero hace referencia en píxels.

Y si queremos aplicarle una descripción de la imagen lo aremos con el atributo alt de la siguiente manera:

Si tenemos el atributo alt (o sea alternativa) y la imagen falla en cargar por cualquier razón, aparecerá en la pantalla del navegador el texto especificado dentro del atributo alt en lugar de la imagen y la persona que lo mira sabrá el contenido que había en esa imagen.

Ahora vamos a crear una tabla con la etiqueta <table> aquí dentro ira la cabecera y el cuerpo de la tabla </table> la etiqueta que se utiliza para la cabecera de la tabla es <thead> Aquí dentro cabecera de la tabla</head> y utilizamos la etiqueta <tbody> aquí va el cuerpo de la tabla</tbody>

<tr> table row significa linea de tabla y dentro de es linea se ponen tantas columnas como queramos con las etiquetas <th> titulo de la cabecera de cada columna en negrita</th> es el equivalente al <h1> y para el cuerpo de la tabla es igual se crea linea con <tr> y para el contenido <td> datos de la tabla</td> para los datos de las columnas (table data)

A continuación un ejemplo práctico de como crear una tabla paso a paso elaborado por el compañero de clase Ambrogio:

TABLAS PASO POR PASO

1. Crea la tabla

<table>

</table>

2. Crea la estructura de la tabla

<table>

<thead> –> Cabecera de la tabla

</thead>

<tbody> –> Donde irán los datos de la tabla

</tbody>

</table>

3. Crea las rayas de la tabla

<table>

<thead>

<tr> (1 raya para la cabecera de la tabla, o sea como tendría que ser. Más de </tr> 1 raya para la cabecera no tendría sentido)

</thead>

<tbody>

<tr> (en este caso hemos creado 3 rayas para el cuerpo de la tabla)

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

<tr> = table row (raya de la tabla)

Esto es lo que tenemos ahora:

Cabecera

Raya 1

Raya 2

Raya 3

(aún no aparece nada en el navegador hasta que no creamos las columnas. Solo es para dar una idea)

4. Crea las columnas de la tabla

Creamos las columnas que queremos por cada raya utilizando <th> para crear las columnas de la cabecera y <td> para crear las columnas para el cuerpo.

<table>

<thead>

<tr>

<th>Cabecera columna 1</th> (creamos 3 columnas para la cabecera)

<th>Cabecera columna 2</th>

<th>Cabecera 1 columna 3</th>

</tr>

</thead>

<tbody>

<tr> (raya 1)

<td>Datos columna 1</td> (como tenemos 3 cabeceras pues <td>Datos columna 2</td> crearemos 3 columnas para cada raya <td>Datos columna 3</td> de los datos)

</tr>

<tr> (raya 2)

<td>Datos columna 1</td>

<td>Datos columna 2</td>

<td>Datos columna 3</td>

</tr>

<tr> (raya 3)

<td>Datos columna 1</td>

<td>Datos columna 2</td>

<td>Datos columna 3</td>

</tr>

</tbody>

</table>

<th> = table heading

<td> = table data

Esto es lo que hemos creado:

Cabecera columna 1	Cabecera columna 2	Cabecera columna 3
Datos columna 1 raya 1	Datos columna 2 raya 1	Datos columna 3 raya 1
Datos columna 1 raya 2	Datos columna 2 raya 2	Datos columna 3 raya 2
Datos columna 1 raya 3	Datos columna 2 raya 3	Datos columna 3 raya 3

Con la etiqueta border=»1″ le decimos el grosor de todas las lineas de la tabla
Con la etiqueta cellspacing=»0″ es el espacio entre celdas
Con la etiqueta cellspadding=»10″ le damos el margen que queremos que tengan del texto a la celda
La etiqueta bgcolor=»color hexadecimal» cambia el color del fondo de la web

Nota: En la pagina https://themeforest.net/ podemos descargar plantillas con tablas ya hechas

Hasta aquí la clase de hoy, gracias al compañero Ambrogio por echarme una mano con los apuntes.

26 de enero de 2018 clase con Josep

Estamos acabando de realizar la prueba de evaluación de como hacer una instalación de WordPress manual en un servidor externo, me faltaba añadir una descripción de los plugins instalados:

Descripción de los plugins:

Force Login: hace que se necesite loaguearse para poder ver el contenido de la web.

Autoptimize: Sirve para optimizar el código mejorar el tiempo de carga de la web.

EWWW Image: Optimiza las imágenes para carguen mas rápido.

WP Limit Login Attempts: Mejora la seguridad, limitando los inicios de sesión erróneos.

WP Super Cache: mejora el tiempo de carga de la web vaciando cahes

WP-Optimize: Optimiza la base de datos limpiando archivos innecesarios

Protect admin: Nos permite cambiar la URL de administración por defecto (wp-admin) por una no común.

Updraftplus: Permite crear copias de seguridad en la nube, dropbox, drive..etc

Repasamos concepto básicos de ejecución aprendidos en la primera clase:

Los diferentes tipos de lenguaje de programación de las web’s.

PHP es software libre y se ejecuta directamente en servidor
Javascrpt se ejecuta en el navegador del cliente
ASP.net se ejecuta en el servidor es de Microsoft o sea de pago
La combinación de PHP, MySQL y javascript permite el funcionamiento de CMS (gestores de contenido) como WordPress

Es importante saber donde se ejecuta cada tipo de programación ya que por ejemplo, si ejecutamos PHP directamente en navegador no mostrara nada, por que no sabe interpretarlo se necesita de un software especifico como Wamp.

Ahora hablamos sobre la creación de formularios con html, lo mas importante de los formularios es:

A donde tiene que ir la información introducida en el formulario (en este caso la recoge en un archivo .php
Nombre único de formulario
La etiqueta submit

La variable post en php $_POST recoge la información introducida en el formulario.

Ahora vamos a crear un formulario en HTML que enlace con un Scrip php

El código HTML de arriba hace la llamada al Scrip PHP de abajo.

Este script es el que guarda la información introducida en el formulario HTML y la procesa mostrándola en pantalla por que así se lo hemos ordenado con el comando echo.

Nota: recordar que hay que ejecutar en localhost de lo contrario el navegador no podrá mostrar el Script php, entonces mejor trabajar con archivos creados directamente en servido (recordar en carpeta www para wamp)

Estamos comentando la funcionalidad de algunas variables como:

$GLOBALS hace referencia a todas las variables disponibles
$_SERVER información del entorno del servidor
$_GET variables HTTP GET
$_POST variables POST de HTTP
$_FILES variables de subida de ficheros HTTP
$_REQUEST variables request HTTP
$_SESSION variables de sesion
$_ENV variables de entorno
$_COOKIE cookie HTTP
$php_errormsg muestra en pantalla errores

WordPress contiene un fichero de functions.php sirve para guardar una funciones determinada, como por ejemplo hacer un encabezado automático después en caso de necesitar cambiar el encabezado solo hay que llamar a la función creada.

Aquí un ejemplo de función encabezado: