Curso de Desarrollo Web Completo 2.0

Creamos nuestra primera página web y establecemos lo que será el método de trabajo(pantalla dividida) que utilizaremos durante el curso. 

Analizamos Example.com como ejemplo de página web viendo las principales etiquetas HTML que forman parte del documento.

Construimos el esquema básico de cualquier documento HTML con una sencilla web de ejemplo.

Analizamos qué es un encabezado HTML y los distintos tipos existentes.

Estudiamos el uso de la etiqueta <P> como elemento HTML para mostrar párrafos.

Podemos darle formato al texto para hacer que este tenga distinta apariencia: negrita, cursiva, subrayado, etc.

En esta clase estudiamos como enumerar una serie de elementos utilizando en HTML la etiqueta <UL>.

En esta clase estudiamos como enumerar una serie de elementos utilizando en HTML la etiqueta <OL>

Aprende a mostrar una imagen en tu documento HTML utilizando la etiqueta <IMG>

Los formularios HTML permiten el intercambio de datos entre el cliente y el servidor web. En esta clase estudiaremos cómo crearlos.

Aprende a mostrar el contenido en una disposición tabular utilizando la etiqueta <TABLE> de HTML.

La potencia del hipertexto reside en poder intercambiar la información fácilmente. En esta clase aprenderemos a incrustar enlaces en nuestras páginas webs.

Las entidades HTML nos permiten mostrar en el navegador caracteres especiales y símbolos. En esta clase aprenderás a utilizarlas.

Aprende a inscrustrar contenido externo en tu sitio web utilizando la etiqueta <IFRAME>.

Primera parte de un ejemplo que utiliza todas las etiquetas estudiadas en la sección.

Segunda parte de un ejemplo que utiliza todas las etiquetas estudiadas en la sección.

Para subir nuestras creaciones tendremos que configurar nuestro servidor de hosting. En esta clase aprenderás a hacerlo.

Instalación de FireFTP en Windows y conexión con el servidor de alojamiento.

Instalación de FireFTP en Mac y conexión con el servidor de alojamiento.

En esta clase aprendemos a conectar FireFTP desde Linux con nuestro servidor web y al mismo tiempo asociar el programa Geany para que sea el encargado de hacer las ediciones de código "en vivo".

Explicamos qué son las hojas de estilo en cascada(CSS) y su importancia en la web.

Explicamos cómo podemos poner estilos asociados a distintas etiquetas HTML utilizando los estilos "en línea".

Separamos el estilo del cuerpo del documento aprendiendo a utilizar la etiqueta <STYLE>.

En esta lección aprenderás cómo podemos poner estilos a un conjunto de etiquetas HTML que lo compartan utilizando para ello las clases o un elemento concreto utilizando los ID.

Aprenderemos a crear una sección o división en nuestro documento con la etiqueta DIV.

Aprende a poner cualquier color en tu documento HTML utilizando el nombre del mismo o la codificación RGB. En esta clase también aprenderás a usar la extensión Colorzilla.

Aprenderemos cómo funciona en CSS el posicionamiento flotante mediante la propiedad position:float.

Estudiaremos otros tipos de posicionamientos de elementos en nuestro documento HTML y veremos las diferencias entre ellos.

Estudiaremos las propiedades CSS margin-* que nos permiten establecer los márgenes en los distintos elementos de nuestro sitio web. Ideal cuando queremos separar por ejemplo elementos entre sí.

Aprenderemos a usar la propiedad padding de CSS y veremos la diferencia que existe con margin.

En esta clase aprenderemos a utilizar la propiedad border y veremos los distintos tipos existentes.

Explicamos el uso de distintas fuentes en una página HTML.

Aprende a poner textos en negrita, cursiva, subrayado, etc. utilizando CSS.

Nos centraremos en las distintas posibilidades que ofrece CSS para alinear un texto a izquierda, derecha, centro y justificado utilizando la propiedad text-align.

Utilizando CSS aprenderás a poner los enlaces con distintos estilos y añadir/eliminar colores, subrayado, etc.

Primera parte del proyecto de la clonación de un sitio web desde cero. En esta clase vemos como establecer la barra superior, en concreto, el logotipo y acceso al portal.

Completamos la barra principal del sitio web de la BBC creando los distintos elementos menu.

Continuamos con la parte inferior roja del sitio web y el siguiente menú del sitio web.

En esta clase veremos cómo poner una noticia en la parte principal de la web.

Establecemos la imagen de la noticia así como los enlaces con sus correspondientes estilos.

En esta clase veremos cómo poner las miniaturas a los vídeos así como los estilos asociados a los enlaces de los mismos.

Concluimos nuestro trabajo con la tira lateral de miniaturas de vídeos con sus respectivos enlaces.

Separamos el código de la página de su estilo mediante el uso de ficheros externos CSS que pueden ser importados desde el documento principal.

¿Deseas saber más? Incluimos una referencia adicional con recursos interesantes a la sección de CSS.

Explicamos qué es y para qué se utiliza Javascript en la web.

En esta clase veremos cómo añadir un sencillo código en Javascript a nuestro documento HTML.

Usamos getElementById para poder acceder a los elementos identificados mediante un ID de una página web.

En esta clase estudiamos cómo podemos gestionar el evento clic mediante código Javascript.

Estudiamos como podemos con getElementByID y la gestión de eventos clic de Javascript modificar por ejemplo el contenido de un sitio web.

En esta clase aprenderás a modificar los estilos del documento HTML utilizando scripts.

Revisamos los conceptos aprendidos en clases anteriores proponiendo un pequeño desafío en el cual el estudiante tendrá que hacer mediante la gestión del evento clic y el uso de estilos que varios círculos de colores desaparezcan.

Definición y ejemplos de uso de variables en Javascript.

En esta clase aprenderemos como utilizar un "conjunto de variables" que guardan alguna relación entre sí mediante el concepto de vector o array. Definición y uso en Javascript de arrays.

Aprenderemos a modificar el flujo de ejecución de un programa mediante el uso de condiciones en instrucciones selectivas en Javascript.

Desafío que revisa los conceptos aprendidos en las clases anteriores realizando un juego en Javascript.

Explicación de la instrucción iterativa for que sirven para repetir un bloque de instrucciones un número determinado de veces.

Aprendemos a utilizar la instrucción iterativa while para repetir un conjunto de instrucciones hasta que se deje de cumplir una determinada condición.

Aprende a separar las instrucciones de código Javascript en bloques reutilizables denominados funciones.

Propuesta de desafío Javascript utilizando todo lo estudiado anteriormente para realizar un sencillo juego que comprueba tus reflejos.

Finalizamos nuestro desafío Javascript.

Aprendemos a separar el código Javascript en un fichero externo al documento HTML.

¿Deseas aprender más? En este documento adjuntamos documentación adicional sobre Javascript.

Explicamos qué es, para qué sirve, ventajas y posibilidades de expansión de esta popular librería de Javascript.

Aprendemos como incluir jQuery en nuestros proyectos webs.

Aprendemos la sintaxis básica de uso de jQuery en nuestro código mediante el ejemplo de la detección de un evento click.

Aprendemos cómo podemos modificar el contenido del documento HTML utilizando las funciones de jQuery y los selectores.

Usando jQuery y sus funciones aprendemos a modificar el estilo de determinados elementos de nuestro sitio web.

Utilizando jQuery y la facilidad de uso que tiene para modificar el estilo CSS del documento aprenderemos a hacer que determinados elementos del documento aparezcan o se desvanezcan.

En esta clase aprenderemos a realizar animaciones utilizando jQuery.

Aprendemos qué es AJAX y cómo nos permite realizar solicitudes asíncronas en nuestro sitio web.

En esta clase aprendemos qué son y cómo podemos utilizar filtros de expresiones regulares en nuestros sistios webs utilizando jQuery.

Usamos el poder de jQuery aplicado a la validación de campos de un formulario.

Concluimos nuestro ejemplo de validación de jQuery con formularios.

Explicamos qué es y para que nos puede servir este complemento de jQuery denominado jQuery User Interface.

Aprendemos a hacer elementos arrastrables y redimensionables usando el plugin de jQueryUI.

Aprendemos a manejar las capacidades Drag & Drop de jQueryUI.

Vemos cómo hacer ejemplos de acordeones y ordenaciones con jQueryUI.

Presentación del proyecto de sección y comienzo del mismo.

Utilizando jQuery y las capacidades añadir/eliminar una clase a elementos HTML codificamos los botones de la barra superior de nuestro reproductor de código.

Creamos un textarea donde podemos escribir nuestro código y utilizando IFRAME y jQuery actualizamos los contenidos de una ventana a otra. 

En esta clase aprendemos a manejar los botones de la barra superior para que reparta las distintas ventanas y adapten su tamaño.

Terminamos el proyecto de sección con los últimos retoques haciendo posible la ejecución de scripts también en el reproductor de código.

¿Quieres aprender más? Te mostramos algunos enlaces que pensamos que pueden resultar útiles para amplicar conocimientos de jQuery.

Explicamos qué es y para qué sirve Bootstrap.

Ejemplo de uso de plantilla Bootstrap para una simple página que muestra "Hola mundo".

Explicación de cómo funciona el sistema de división de partes de una pantalla en Bootstrap(rejilla o grid).

Aprendemos a utilizar las barras de navegación de Bootstrap, configurarlas y gestionarlas para que se adapten a la pantalla.

Estudiamos como incluir formularios con una apariencia profesional utilizando Bootstrap.

Concluimos el formulario con Bootstrap y vemos cómo implementar tablas utilizando Bootstrap.

Analizamos el uso de otros componentes especiales de Bootstrap como Jumbotron, alertas, barras de progreso, tarjetas, etc.

Los modales nos van a permitir mostrar ventanas emergentes e incluso solicitar la interacción del usuario. En esta clase vemos cómo podemos utilizarlos.

Qué son y para qué sirven los popovers en Bootstrap.

Aprendemos a utilizar los Tooltips en Bootstrap.

En esta clase aprendemos a utilizar el componente ScrollSpy para páginas webs donde tenemos mucho contenido y deseamos enlazar el desplazamiento por la misma con la navegación.

Proyecto de sección donde realizamos una landing page o página de aterrizaje donde pondremos todos los conocimientos aprendidos sobre Bootstrap.

Conclusión del proyecto de página de aterrizaje.

Explicamos cómo utilizar los temas oficiales de Bootstrap en nuestros sitios webs.

¿Quieres conocer más de Bootstrap? Te mostramos algunos enlaces que consideramos que son útiles para ampliar información.

Te explicamos qué es WordPress, el motivo por lo que es importante que sepas utilizarlo y cómo podemos desplegarlo en nuestro sistema de alojamiento.

Introducción al panel de administración de WordPress.

Aprenderás qué son los temas de WordPress y cómo podemos instalarlos.

Configuramos la barra de menú del tema Zerif de WordPress.

Explicamos como crear un blog utilizando la plantilla X-Theme.

Configuramos el tema X-Theme para que nuestro sitio funcione como un blog.

Instalamos el plugin WooCommerce de WordPress y lo configuramos junto con X-Theme para crear una tienda virtual.

Explicamos qué es PHP y su funcionamiento desde el servidor creando páginas webs dinámicas para los clientes.

Simple script en PHP que muestra el mensaje de "Hola mundo".

Explicamos cómo podemos utilizar variables en PHP y sus principales tipos.

Explicamos la sintaxis de PHP para el uso de arrays.

En esta clase aprendemos el uso de sentencias condicionales para alterar el flujo de ejecución de nuestro script PHP. En concreto mostramos cómo utilizar if y else.

Aprendemos a ejecutar instrucciones iterativas mediante bucles en PHP que utilizan for y foreach.

Ejemplo de utilización de bucles while en PHP.

En esta clase aprenderemos a enviar información mediante la URL al servidor y crearemos un ejemplo de formulario que nos permitirá posteriormente manipularla utilizando el array de PHP $_GET.

Implementamos un script que comprueba, mediante el envío de un número al servidor, si este es o no primo.

Enviamos la información del formulario incluida en la propia solicitud HTTP utilizando para ello POST. Analizamos las ventajas del envío y posterior tratamiento de datos mediante este método en PHP.

Implementación de un sencillo script en PHP que nos permitirá enviar emails.

Realizamos un formulario de contacto utilizando las dos validaciones posibles: en el cliente(mediante Javascript) y en el servidor(mediante PHP). En esta clase nos centraremos en la parte del cliente.

En esta clase nos centraremos en el lado del servidor para realizar las validaciones y mostrar, en caso de error, los mensajes correspondientes con la apariencia de Bootstrap.

Estudiamos las funciones de PHP include y file_get_contents

Realizamos una aplicación web que pretende ser un compendio de todo lo aprendido anteriormente para obtener la predicción meteorológica de un sitio web existente.

En esta clase nos centramos en la codificación PHP del lado del servidor para obtener los datos externos y presentarlos en pantalla.

Concluimos nuestro desafío haciendo que la ciudad sea una parte dinámica de la entrada del formulario y adecuamos la salida para que se nos muestre perfectamente en pantalla así como la visualización de los posibles errores.

¿Quieres conocer más? Te proporcionamos algunos enlaces útiles para ampliar los conocimientos de la sección de PHP.

En esta clase explicamos qué es y para qué sirve MySQL. Utilizamos nuestro proveedor de alojamiento para crear una base de datos MySQL y utilizarla en nuestros ejemplos. Introducimos PHPMyAdmin como interfaz web para la gestión de bases de datos MySQL.

Explicamos el mecanismo de conexión a una base de datos MySQL desde código PHP.

Explicamos qué es una consulta o query y cómo podemos obtener datos de MySQL utilizando las sentencias SELECT.

En esta clase aprenderás a utilizar INSERT INTO y UPDATE en MySQL para añadir y modificar datos dentro de una tabla existente.

Estudiamos ALTER TABLE como la instrucción MySQL que nos va a permitir modificar la estructura de una tabla previamente creada en nuestra base de datos.

Utilizamos los bucles en PHP junto con MySQL y la función mysqli_fetch_array para iterar sobre un conjunto de datos almacenados en el servidor.

Realizamos un ejercicio práctico donde creamos un formulario de registro de usuario. El desafío consiste en comprobar si el usuario existe o no en los existentes en la base de datos para lo cual tendremos que codificar mediante PHP una serie de comprobaciones.

Exponemos la problemática del no saneamiento de entradas de datos llegadas desde el lado del cliente y cómo podemos evitarlas utilizando mysqli_real_escape_string para escapar caracteres especiales y evitar casos de SQL injection.

Explicamos el concepto de sesión, su utilidad y cómo podemos utilizarlas en PHP con session_start() y $_SESSION

Estudiamos el concepto de cookie, su utilidad y como usarlo en PHP.

Exponemos el peligro de almacenar las contraseñas en claro y explicamos cómo hacerlo correctamente utilizando funciones resumen(hashes) y salt.

Presentación del proyecto de sección denominado Diario Secreto y primeros pasos: creación de tablas, formulario de registro, etc.

Almacenamos la contraseña de manera segura utilizando md5 y salt, gestionamos las cookies para que la sesión permanezca iniciada o se cierre a conveniencia.

Duplicamos el formulario principal para que tengamos la posibilidad de iniciar sesión y registrar usuario. Enviamos variables ocultas al script PHP para identificar entre los casos. Comprobamos el inicio de sesión.

En esta clase nos centraremos en darle una apariencia profesional a nuestro formulario utilizando Bootstrap. Establecemos el fondo y colocamos correctamente los elementos en pantalla para que presente una apariencia a nuestro gusto.

Corregimos algunos errores, dividimos algunas partes del código PHP para incluirlas posteriormente mediante include y utilizamos Bootstrap para crear la página de nuestro diario con una barra de navegación y TEXTAREA.

Concluimos nuestro proyecto final actualizando la base de datos, corrigiendo algunos errores y mostrando el correcto funcionamiento de nuestro Diario Secreto desarrollado con MySQL.

Adjuntamos un conjunto de recursos útiles para ampliar la documentación de MySQL.

Explicamos el concepto de API y su utilidad.

Creamos una cuenta de openweathermap.org para utilizar su API en nuestro script de obtención de datos para la predicción del tiempo.

Introducimos la API de Google Maps. Explicamos cómo crear un proyecto, generarnos una clave API para utilizarla en nuestros sitios webs y realizamos varios ejemplos ilustrativos del uso de la misma.

Utilizando la API de Google Maps realizaremos un minidesafío dónde crearemos un formulario en Bootstrap que permitirá localizar un código postal dada una dirección.

Explicamos cómo acceder al desarrollo de aplicaciones para Twitter utilizando su API y vemos un sencillo script de PHP que utiliza la autenticación OAuth, se conecta a una cuenta de Twitter obteniendo su TimeLine y envía un post.

En esta clase aprenderemos a realizar un sencillo cliente de Twitter que muestra los tweets más importantes(marcados con favoritos un número determinado de veces).