Presentación del curso, explicación de la página web que conseguiremos después de los 49 capítulos.

Creación del Sitio Web, entorno de trabajo y creación de la plantilla que utilizaremos en todo el proceso. Dividimos la página en secciones para que resulte más cómodo modificarla. Hacemos nuestra primera página ya visible en el navegador.

Modificación del estilo CSS principal de la plantilla para adaptarlo al uso que le vamos a dar. Creamos algunos gráficos sencillos que nos ayudarán a adaptar el diseño final.

Colocamos el logo y vemos las formas que tiene el navegador para averiguar la capa en la que nos encontramos. Empezamos con la creación del menú CSS desplegable.

Modificamos el CSS e integramos el menú desplegable en nuestra página Web con los submenús correspondientes. Manejamos la hoja CSS y nos ayudamos de las herramientas de desarrollo del navegador.

Finalizamos con la creación del menú CSS desplegable. Aprendemos a introducir tipos de letra no standard desde Googlefonts para mejorar el aspecto profesional de nuestro sitio Web.

Ajustamos los estilos de la página a través de los CSS. Creamos páginas dependientes de plantilla y comenzamos a rellenar con datos nuestras primeras páginas Web.

Creada ya nuestra estructura Web básica y lista la Web para meter toda la información, buscamos un slider Jquery que podamos adaptar a nuestro diseño. Buscamos por Internet uno que nos acople al diseño que estamos construyendo y comenzamos con su instalación y configuración.

Modificamos el Jquery y los CSS con el fin de acoplarlo a nuestro espacio de Web, creamos imágenes nuevas para cada apartado.

Acabamos de modificar el JQuery Slider para que nos acople perfectamente a la página. Creamos una plantilla de Dreamweaver para la parte de administración.

Definimos el diseño del apartado de administración con los menús adecuados. Creamos nuestra base de datos con el phpMyAdmin que nos proporciona el Wamp y vemos paso a paso como construir la primera tabla.

Conectamos con la Base de Datos. Utilizamos las herramientas de Dreamweaver para crear una inserción de datos en la propia base de datos, que luego utilizaremos como salida para las imágenes del Slider JQuery.

Creamos botones de Input con tamaño dinámico a través de un CSS. Utilizamos un pequeño Javascript para darle las propiedades al botón creado para que realice un Submit del Formulario. Creación del formulario para subir imágenes al servidor.

Finalizamos el script para subir imágenes mediante PHP. Continuamos con el backend completando la lista de las publicidades que tenemos activas en nuestra página.

Usamos el selector de consultas avanzado, de forma muy sencilla, para obtener datos de la BD MySQL. Repetimos región para obtener más de un resultado. Primeros condicionales en PHP, mejoramos el estilo de la administración mediante CSS. Comenzamos con la edición de datos de la BD.

Continuamos con la edición de registros de la Base de datos MySQL a través de PHP. Eliminación de registro y pregunta al usuario sobre si realmente quiere hacer esa acción.

Preparamos la página para que el Slider cargue los datos que hemos gestionado a través de la Base de Datos.

Modificamos el diseño y forma de visualización del Slider Jquery para acoplarlo al espacio y colores que tenemos. Usamos CSS y un poco de Photoshop para ajustar los colores.

Creamos tres bloques flotantes justo debajo de nuestro JQuery para promocionar partes concretas de nuestra Web. Utilizamos CSS de forma intensiva, explicando cada paso y cada modificación para que la puedas adaptar a tus necesidades.

Iniciamos el desarrollo del apartado de Portfolio, definiendo las tablas de Base de datos que utilizaremos para almacenar los datos, de forma que lo dejemos preparado para utilizar AJAX para hacer búsquedas de elementos.

Modificamos el script de subir ficheros para que nos sirva para cualquier carpeta. Creamos de forma rápida la gestión del Portfolio basándonos en la que tenemos realizada ya anteriormente.

Continuamos con el formulario de edición del Portfolio. Vamos construyendo la página para ir sacando los datos que tenemos almacenados.

Asignamos clases nuevas en el CSS y ajustamos la página que muestra los datos del Portfolio de la Base de Datos. Presentación por capas de los datos que obtenemos de la Base de Datos.

Insertamos más registros en la Base de Datos de Portfolio y vemos la página de Maestro/Detalle enviando un parámetro para ver los datos más detallados de una lista de resultados.

Creamos una galería en Jquery que nos permitirá sacar los datos de las imágenes de una forma elegante y profesional.

Modificamos la galería JQuery para personalizarla. Creamos una parte extra para mostrar datos que obtenemos de la Base de datos de una forma más gráfica.

Acabamos el diseño de la presentación de Portfolio en CSS. Modificamos la edición de un registro en la BD, modificando el comportamiento de insertar registro de forma manual, para comprender las modificaciones en la Base de datos

Acabamos con la modificación del formulario, comprobando los datos en la Base de datos de MySQL. La particularidad de los campos checkbox, utilización de condicionales para mejorar nuestros datos de salida en la página.

Comenzamos con nuestro primer AJAX para sacar resultados. Obtendremos los datos de la base de datos utilizando un pequeño script y una consulta a nuestra base de datos en función de la palabra que busquemos.

Profundizamos en la muestra de resultados de nuestro AJAX y lo ampliamos con más opciones para que sea realmente operativo. Todo el código está disponible para descargar, para que no haya ningún problema.

Seguimos con la preparación de los resultados con AJAX y con la consulta PHP, complicando la programación con el fin de dar mayores opciones al posible cliente que visite nuestra página. Nos encontramos con problemas y vemos la forma de resolverlos

Completamos el AJAX y solucionamos los problemas que nos habíamos encontrado. Exportamos la Base de datos de MySQL para poder exportarla a un hosting real, o como copia de seguridad de nuestros datos.

Ajustamos las capas de los resultados del AJAX para que se vean de una forma más profesional y ajustado al tope de la página. Hacemos una copia de seguridad de la página porque vamos a empezar con la modificación de la plantilla.

Arreglamos la plantilla para ajustarla a las necesidades que tenemos. Creamos un simpático gráfico con el teléfono de contacto y comenzamos a generar el nuevo apartado que contendrá una validación en Javascript.

Empezamos con la creación del formulario que nos servirá para recopilar la información de interés de los visitantes, lo podéis adaptar a vuestras necesidades con los campos de formulario que correspondan.

Continuamos creando campos para el formulario y con la elaboración de las validaciones que necesitaremos para los campos que estamos completando. Javascript práctico y muy sencillo.

Finalizamos la construcción del formulario y creamos la página que recibirá los datos en PHP, analizando cada dato y dándole la funcionalidad que necesitaremos en cada caso y en función del tipo de campo.

Finalizamos la validación Javascript con el detalle de marcar los campos obligatorios en rojo. Comenzamos a recibir los datos en la página de destino para ayudar a procesar el contenido de los mismos.

Desglosamos cada apartado del formulario para seleccionar los datos que serán mostrados en el e-mail que enviaremos al visitante de la Web que haya solicitado la información. Creación del email de envío.

Finalizamos la construcción del e-mail que enviamos al usuario, y comprobamos como se vería por pantalla para pulir diseño y datos. Incrustamos una imagen para mejorar la presentación del mismo.

Hacemos la programación necesaria para hacer la página multiidioma con PHP y utilizando archivos separados de inclusión en nuestro código.

Utilizamos el Spry para crear un flotante de ayuda a ciertos apartados de nuestro formulario. Ajustamos el menú superior para que llegue al extremo lateral y personalizamos el aspecto del menú.

Arreglamos el diseño del menú superior y del pie de página y empezamos a ver cómo transformar la página para que sea visible en Ipad, tablets y móviles con la ayuda de BoilerPLate y Initializr

Comenzamos con la adaptación de nuestra página a móviles y tablets, cogiendo como ejemplo el código descargado y utilizando lo necesario de HTML5 vamos a ir transformando nuestra cabecera con menús.

Revisamos el CSS con los media queries para ir ajustando la parte de arriba de nuestra Web. ¿Para qué sirven?, ¿Cómo se pueden utilizar?. Prueba y error para adaptar nuestra página.

Completamos el efecto de estrechamiento del menú gracias a los media queries y la manipulación de los archivos CSS que forman nuestra página.

Acabamos de configurar los CSS para que se ajusten al tamaño correspondiente en función del Viewport, ya sea una tablet, un teléfono móvil, un Ipad, etc...

Ocultamos y mostramos zonas y capas en función de si estamos simulando una visualización desde un Ipad, un móvil, etc... Ajustamos otras zonas de nuestra Web para que cambien en función del viewport.

Comprobamos como Dreamweaver nos ha eliminado partes del código que utilizábamos para obtener datos de la BD, recuperamos los códigos de nuestra copia de seguridad. Simulamos la visualización de nuestra Web con un emulador de Android. Un último detalle de CSS3, despedida y cierre!.