Contenido

Diseño web. ............................................................................................................................................................................................... 3

Curso diseño web principiantes 00 – introducción. ................................................................................................................................ 3
Curso diseño web principiantes 01 – preparación. ................................................................................................................................. 5
Curso diseño web principiantes 02 – creación del proyecto. .................................................................................................................. 5
Curso diseño web principiantes 03 – preparando Bootstrap. ................................................................................................................. 6
Curso diseño web principiantes 04 – barra de navegación. ................................................................................................................... 7
Curso diseño web principiantes 05 – container, row y col. ..................................................................................................................... 8
Curso diseño web principiantes 06 – diseño del index.html ................................................................................................................... 9
Curso diseño web principiantes 07 – estilos con css. .......................................................................................................................... 11
Curso diseño web principiantes 08 – crear la base de datos. .............................................................................................................. 13
Curso diseño web principiantes 09 – crear clases y config en PHP. .................................................................................................... 14
Curso diseño web principiantes 10 – MySQL/MariaDB y PDO. ........................................................................................................... 16
Curso diseño web principiantes 11 – leer tablas MySQL/MariaDB. ..................................................................................................... 18
Curso diseño web principiantes 12 – contador eficiente de usuarios. .................................................................................................. 20
Curso diseño web principiantes 13 – plantillas. .................................................................................................................................... 23
Curso diseño web principiantes 14 – formulario HTML5 y Bootstrap. .................................................................................................. 25
Curso diseño web principiantes 15 – Method y action en formularios. ................................................................................................. 27
Curso diseño web principiantes 16 – Validación con PHP. .................................................................................................................. 31
Curso diseño web principiantes 17 – Validación con PHP II. ............................................................................................................... 31
Curso diseño web principiantes 18 – Comprobar errores con Bootstrap. ............................................................................................ 32
Curso diseño web principiantes 19 – Fin de la validación básica. ........................................................................................................ 38
Curso diseño web principiantes – XAMPP, MySQL y MariaDB. ........................................................................................................... 40
Curso diseño web principiantes 20 – Insertar usuarios. ....................................................................................................................... 41
Curso diseño web principiantes 21 – Nombres y email únicos............................................................................................................. 48
1
Curso diseño web principiantes 22 – Encriptar contraseñas. ............................................................................................................... 55
Curso diseño web principiantes 23 – Redirecciones. ........................................................................................................................... 56
Curso diseño web principiantes 24 – Pasar parámetros por GET. ....................................................................................................... 58
Curso diseño web principiantes 25 – Página de login. ......................................................................................................................... 63
Curso diseño web principiantes 26 – Validar login. .............................................................................................................................. 67
Curso diseño web principiantes 27 – Control de sesión. ...................................................................................................................... 72
Curso diseño web principiantes 28 – Navbar dinámica. ....................................................................................................................... 74
Curso diseño web principiantes 29 – Tablas y relaciones. ................................................................................................................... 75
Curso diseño web principiantes 30 – Más CSS y más tablas............................................................................................................... 77
Curso diseño web principiantes 31 – Más repositorios. ....................................................................................................................... 81
Curso diseño web principiantes 32 – Insertar datos en masa. ............................................................................................................. 84
Curso diseño web principiantes 33 – Mostrar entradas. ....................................................................................................................... 86
Curso diseño web principiantes 34 – Resumir entradas. ..................................................................................................................... 89
Curso diseño web principiantes 35 – URL amigables. ......................................................................................................................... 93
Curso diseño web principiantes 36 – Parámetros en URL amigables. ............................................................................................... 103
Curso diseño web principiantes 37 – URL personalizadas................................................................................................................. 110
Curso diseño web principiantes 38 – Vista de entrada. ...................................................................................................................... 116
Curso diseño web principiantes 39 – Recuperar datos al azar........................................................................................................... 121

2
Diseño web.
Curso diseño web principiantes 00 – introducción.
1. ¿En qué va consistir esta serie?
 Pasos y tecnologías para crear un sitio web.
 Aplicaciones web.
 Juegos web.
 Crear páginas de formas diferentes.
2. ¿Qué vamos aprender exactamente?
 Web práctica, bonita, cómoda y útil.
 Tecnologías Microsoft.
 Tecnologías Oracle.
 Tecnología libre.
3. ¿De qué tecnologías hablamos?
 Estándar HTML 5.
 Sirve para crear estructuras webs muy básicas, sin colores ni comportamientos.
 CSS 3.
 Hojas de estilo.
 Lenguajes de reglas para dar estilos a los HTML.
 MySQL (base de datos).
 Acceder a información.
 Guardar información.
 Manipular información.
 Modificar la información.
 PHP.
 Lenguaje que se ejecuta en el servidor web.
 El servidor detectara la petición, PHP ejecutara las instrucciones del programador y presentara la web al usuario.
 Comportamiento de la web.
 Procesar datos dinámicamente.
 Solo funciona cuando se carga la página.
 Web bastante estáticas.
 Bootstrap (Creada por los ingenieros de Twitter).
 Framework para trabajar con más ventaja.
 Aplicaciones responsivas que se ajustaran a cualquier medida de pantalla o dispositivo.
3
4. ¿Qué tecnologías usaremos después de la parte básica?
 Symfony (PHP).
 Framework de diseño web.
 Web con PHP.
 Seguridad a prueba de bombas.
 JavaScript.
 Se ejecuta en el cliente.
 Se ejecuta por el navegador o dispositivo del cliente.
 Uso de PHP al mínimo.
 Ahorra carga del servidor.
 Crear páginas interactivas, que pueden hacer decenas de operaciones en segundo plano a la vez.
 Cambiar dinámicamente la información que se ve sin tener que recargar la página.
 JavaScript  Ajax.
 Forma de intercambiar datos con el servidor en tiempo real.
 JavaScript  JQuery.
 Framework basado en JavaScript.
 Juegos web sin Flash, usando JavaScript.
 Apache CORDOVA.
 Framework para exportar aplicaciones web a aplicaciones móviles nativas.
 Aplicaciones web creadas con JavaScript y AJAX a aplicaciones nativas de sistemas operativos móviles (Android,
iOS, Windows Phone, Firefox OS, Ubuntu, etc).
5. ¿Cómo funcionara la serie?
 Haciendo páginas webs.
6. ¿Merece la pena aprender todo esto?
 El diseño web es el futuro.
 Crear aplicaciones en servidores en Internet, solo se usan y ya (no se instalan).
 Los CMS son las siglas de Content Management System, que se traduce directamente al español como Sistema Gestor
de Contenidos. Como su propio nombre indica, es un sistema que nos permite gestionar contenidos, son geniales para
web sencillas y rápidas, pero no nos sirven para hacer web complejas y personalizadas.
 WordPress.
 Joomla!
 Drupal.

4
Curso diseño web principiantes 01 – preparación.
 IDE.
Eclipse.
Sublime Text 3.
PhpStorm (costo, descarga con crack papi).
WebStorm JavaScript IDE (costo, descarga con crack papi).
NetBeans.
o Java última versión.
o JDK.
 XAMPP.
 Servidor Apache, necesario para los archivos web.
 Servidor y cliente MySQL para comunicarse.
 PHP, lenguaje del servidor.

Curso diseño web principiantes 02 – creación del proyecto.

 Entrar al IDE y crear el proyecto.
C:\xampp\htdocs\bloggerthechic

 Activar XAMPP, servidor Apache y MySQL.

5
Curso diseño web principiantes 03 – preparando Bootstrap.
1. Descargar Bootstrap, Framework que sirve para dar estilo rápido y sea responsivo (sirva en cualquier tipo de pantalla).
http://getbootstrap.com/
2. Descargar jQuery, para que Bootstrap funcione.
http://jquery.com/download/

3. Carpetas del proyecto.

Notas: Usar los .min que son más fáciles de cargar en dispositivos móviles.
Notas: Cambiar el nombre del jquery-3.1.1.min.js a jquery.min.js

6
 4. Así quedo el proyecto hasta el momento.

Curso diseño web principiantes 04 – barra de navegación.

1. Barra de navegación.

7
Curso diseño web principiantes 05 – container, row y col.
1. Contenedores, filas y columnas.
Container, caja que guarda componentes.
1. container: deja márgenes (derecha e izquierda).
2. container-fluid: no deja márgenes (derecha e izquierda).
Row, divisiones horizontales de la pantalla.
Col, divisiones verticales.
1. col una simple columna, el contenido se separa de forma vertical.
2. col-3 el número nos indica el ancho de la columna (12 de tamaño máximo).

8
 3. col-xs-3 xs [Smartphone], sm [Tabletas], md [Pantallas estandar], lg [pantallas grandes] (responsive design) diseño
adaptable.

Curso diseño web principiantes 06 – diseño del index.html

1. Cabecera, usando jumbotron (no aplica el row y col de Bootstrap).

9
2. Rejilla de la página.

10
Curso diseño web principiantes 07 – estilos con css.

Uso de CSS.
1. Componente HTML corriente, escribiría su nombre. Ejemplo «body».
2. Si es una clase, se escribe un «.» seguido el nombre de la clase. Ejemplo «.jumbotron».
3. Si es en un ID, se escribe una «#» seguido del nombre del ID. Ejemplo «#navbar».
Observa los ejemplos de acceso…
body {
background-image: url("../img/Robot_Fondo.jpg");
}

.jumbotron {
/*background-color: #D2AB50*/
background-color: rgb(210, 171, 80);
color: white;
}
11
.panel-heading {
/*Si no aplica el CSS usar !important*/
background-color: #D2AB50 !important;
color: white !important;
}

.panel-body {
color: #2b2b2b !important;
}

.navbar {
background-color: #2b2b2b !important;
}

/*Uso de pseudonormas de los enlaces css

1. :link indica el especto de un enlace al que nunca hemos ido (azul).
2. :visited ya se ha visitado una vez (morado).
3. :hover cuando pasa el mouse encima (solo sirve en computadoras).
4. :active cuando este activo, o si se mantiene pulsado.
*/

.navbar-brand:link, .navbar-brand:visited {
color: rgb(210, 171, 80) !important;
}

/* Puedo separar especificaciones con comas */

.navbar-brand:hover, .navbar-brand:active {
color: white !important;
}

/* Puedo acceder hasta a, a través de barra-navegación después li */

#barra-navegacion li a:link, #barra-navegacion li a:visited {
color: white !important;
}

#barra-navegacion li a:hover, #barra-navegacion li a:active {

12
 color: rgb(210, 171, 80) !important;
}

Curso diseño web principiantes 08 – crear la base de datos.

 Si por algún motivo no funciona o está ocupado el puerto 80 cambiarlo a 8080 (investigar cómo se hace).

 Usar Firefox, no manda errores como Chrome.

13
  Importar un script con un editor de texto (ver en proyecto blog.sql en carpeta database).

 Encriptar la contraseña (se verá más adelante).

Curso diseño web principiantes 09 – crear clases y config en PHP.

 Con el Servidor Apache y MySQL activos de XAMPP.
 En PHP se puede usar la extensión que sea, pero usaremos «config.inc.php» [inc que significa include y no usarse].
1. Los archivos que se ejecutan.
2. Los archivos que solo contienen información.
 Los archivos que representan acciones u otra información inician con minúscula.
 Los archivos que representan las clases inician con mayúscula.

14
15
Curso diseño web principiantes 10 – MySQL/MariaDB y PDO.
 Verificación de conexión.

16
17
Curso diseño web principiantes 11 – leer tablas MySQL/MariaDB.
 Uso de repositorios (Symfony). Ejemplo RepositorioUsuario.

18
 Comprobar si funciona en index.php

19
Curso diseño web principiantes 12 – contador eficiente de usuarios.
 Creación de un contador de usuarios.
20
21
 Poner iconos para dar más colorido a la página.

22
Curso diseño web principiantes 13 – plantillas.
 Creación de un sistema básico de plantillas.
 Nota: las comillas simples en PHP manejan el contenido como un string.
 Nota: las comillas dobles en PHP manejan el contenido como string pero cuando hay un $ intentan leer el contenido de la variable.

23
24
Curso diseño web principiantes 14 – formulario HTML5 y Bootstrap.

25
26
Curso diseño web principiantes 15 – Method y action en formularios.
 Envió de parámetros.

27
28
29
 Realización de validaciones.
 Usar «placeholder».

30
Curso diseño web principiantes 16 – Validación con PHP.
1. Validar los campos usando HTML5 (Solo para aconsejar a los usuarios).
2. Validar usando JavaScript (No usar de forma principal, ya que se puede desactivar y es fácilmente manipulable).
3. Validar usando PHP (Se ejecuta en el servidor, el usuario o tiene acceso a lo que pasa, buen medio de seguridad).
 Renviar los datos a la misma página que los envió.

 En la cabecera, se suele crear una especie de validación, si es correcto se redirige a una nueva página.

Curso diseño web principiantes 17 – Validación con PHP II.

31
Curso diseño web principiantes 18 – Comprobar errores con Bootstrap.
 Comprobar que el usuario ha usado el botón enviar.

32
 Usar dos formularios.
1. El formulario que vería el usuario cuando entra a la página registro.
2. El formulario que ha pulsado el botón enviar.

33
 Usar Bootstrap de alertas.

34
35
36
37
Curso diseño web principiantes 19 – Fin de la validación básica.

38
  Verificar si el formulario es correcto.
Nota: comparaciones en los if ().
1. = comparación normal.
2. == comparación superficial.
3. === comparación estricta.

39
Curso diseño web principiantes – XAMPP, MySQL y MariaDB.
 Actualización de servidor MySQL a MariaDB.
 Investigar como migrar

40
Curso diseño web principiantes 20 – Insertar usuarios.
 Guardar la contraseña.

41
Nota: Cuando se hace una operación con PDO en la base de datos (seleccionar, buscar, introducir o borrar, etc.) podemos obtener un
booleano que nos da un verdadero o un falso lo que permite saber si la operación se ha realizado con éxito o no.

42
 Inserción de un nuevo usuario.

43
Nota: Así ya jalo, pero corregiremos lo de config.inc.php
Nota: Inserto dos veces, ¿Qué habrá pasado?

44
 Creación de constantes.

45
46
¡Aunque no jalo así!

Ya jalo, regrese a como estaba Conexion.php

Nota: Sigue guardando dos veces…

¡Ya quedo!

47
  Corregir errores pendientes:
1. Registrarse con el mismo nombre de usuario.
2. Registrarse con el mismo correo electrónico.
3. Permitir que la contraseña se vea a simple vista.

Curso diseño web principiantes 21 – Nombres y email únicos.

 Creación de métodos para comprobar si existe ya el nombre o el correo electrónico.

48
 Mejorar las comprobaciones.

49
50
51
Así quedo en la vista…

52
 Edición desde la base de datos.
 Borro la base de datos y la Importo de nuevo.

53
54
Curso diseño web principiantes 22 – Encriptar contraseñas.

55
  Modificación en la base de datos.

Curso diseño web principiantes 23 – Redirecciones.

 $_GET envía parámetros por URL.
Ejemplo de uso de $_GET

56
57
Curso diseño web principiantes 24 – Pasar parámetros por GET.

58
59
60
61
62
  Redirección solo una vez…
Nota: solo hay que definirlas bien en config.inc.php

Curso diseño web principiantes 25 – Página de login.

 Creación del sistema de login.
1. Página para iniciar sesión.
63
2. Serie de archivos que manejes la sesión.
3. Algunas cosas más.

64
65
66
Curso diseño web principiantes 26 – Validar login.
 Código PHP para validar.

67
68
69
70
71
Curso diseño web principiantes 27 – Control de sesión.
 Las cookies se guardan en el servidor.
$_SESSION [‘’]:  Súper variable global, es una serie de variables que se guardan en la memoria
del servidor.
 Cuando entramos en una página web con un navegador, el servidor crea una
sesión a ese navegador.
 En la sesión se pueden guardar usuarios o datos del usuario.
 Si entramos con otro navegador a la misma página web, ese navegador tendrá
una sesión diferente, incluso si abrimos una pestaña «Modo Incognito» seria
como si fuera otro navegador.

72
  El servidor le da su propia sesión a cada navegador que está conectado al
servidor (cualquier navegador).
$_POST [‘’]:  Recoge todos los datos enviados a través de un formulario.
$_GET [‘’]:  Recoge todos los datos enviados a través de la URL.

73
Curso diseño web principiantes 28 – Navbar dinámica.

74
Curso diseño web principiantes 29 – Tablas y relaciones.

75
76
Curso diseño web principiantes 30 – Más CSS y más tablas.
 Estilos CSS para la barra de navegación dinámica.

77
78
  Crear clases Comentarios y Entradas.
Nota: Cambie el MVC a ver cómo me va…

79
80
Curso diseño web principiantes 31 – Más repositorios.
 Rellenar una base de datos de forma automática.

81
82
83
Curso diseño web principiantes 32 – Insertar datos en masa.

84
85
Curso diseño web principiantes 33 – Mostrar entradas.

86
87
88
Curso diseño web principiantes 34 – Resumir entradas.

89
90
 Añadir un botón para seguir leyendo.

91
92
  Limitar las entradas mostradas (será temporal), después veremos paginación.

Nota: LIMIT busca solo 5 entradas, OFFSET comienza con la entrada 81, ya que desplaza las 80 primeras.

Curso diseño web principiantes 35 – URL amigables.

 Piedras angulares del desarrollo Web moderno.
URL antigua.
http://www.bloggerthechic/entrada.php?entrada=43
No es útil para los humanos ni para los buscadores.

93
URL amigable.
1. Es más fácil de entender para los humanos, que ven la dirección.
2. Los buscadores, tienen robots y exploran que enlaces existen. Si estos enlaces son fáciles de procesar y de entender, la página
web será indexada por el buscador.
http://www.bloggerthechic/entrada/43
http://www.bloggerthechic/entrada/como-crear-urls-amistosas
 Se necesita el módulo rewrite de Apache.

 Editando el archivo de configuración de Apache .htaccess [comportamiento del servidor].

 Manejar un mínimo de código en .htaccess y pasar el control a PHP.

94
 Una dirección relativa: Esa dirección se sigue a partir de donde se encuentra el archivo.

95
Entonces:

96
97
98
99
 Estructura (gestión de contenido) profesional.
 Creación de un enrutador index.php que va a controlar que archivos se carga según la ruta que se ha insertado.

100
101
 Voy a aplicar bien el MVC ojala no falle nada (Si fallo pero corregí rutas en include_once ‘’).

102
Curso diseño web principiantes 36 – Parámetros en URL amigables.
 Mejorando el index.php
KISS Keep It Simple Stupid « ¡Hazlo sencillo, estúpido! ».

103
104
105
106
107
 Verificar si registra un usuario.

108
 Iniciar sesión con nueva ruta.

109
Curso diseño web principiantes 37 – URL personalizadas.
 Mejorar la base de datos (Se agregó url_entrada VARCHAR (255) NOT NULL UNIQUE a la tabla «entradas»).

 Ya corregí lo de Conexión usando Config.inc.php

110
111
112
113
114
 Resultado en el navegador.

115
Curso diseño web principiantes 38 – Vista de entrada.

116
117
118
119
120
Curso diseño web principiantes 39 – Recuperar datos al azar.


121