HTML, CSS, Bootstrap, Php, Javascript y MySql: Todo lo que necesitas saber para crear un sitio dinámico

Por Olga Maria Stefania Cucaro

Este libro pretende iniciar a quienes quieran crear un sitio web de forma independiente, al mundo de los dominios y la programación ligada a la web. El autor concibió este trabajo como un trabajo científico destinado al uso educativo y de estudio para todos aquellos que se acerquen al estudio de la programación del lado del cliente y del lado del servidor.
En primer lugar se explicará la diferencia entre los diversos dominios existentes en la red y en un momento posterior se intentará explicar el CSS y HTML para luego entrar en la programación PHP (lado servidor) y JavaScript (lado cliente) con la creación de bases de datos a través de phpMyAdmin.
Todo esto se explicará a través de un sitio web de ejemplo creado específicamente usando un Bootstrap gratuito por simplicidad y conveniencia básica y programando un panel de control con inicio de sesión conectado al sitio a través de la base de datos para insertar imágenes directamente desde la web cargándolas a la base de datos creada con phpMyAdmin conectado al sitio. Obviamente, luego de haber ingresado al mundo de las bases de datos y la programación, será posible aplicar estos conocimientos a cualquier otra necesidad de iteración por parte del usuario que requiera el proyecto del sitio.
El objetivo de este estudio no es crear páginas web simples que hoy en día se pueden hacer fácilmente con WordPress u otro software fácil de usar, sino con fines puramente educativos para explicar el uso de bases de datos y programación del lado del servidor y del cliente para hacer una sitio dinámico de lo contrario estático. En resumen, este trabajo puede ser útil para aquellos que quieran acercarse al fascinante mundo de la programación web desde sus inicios.

• Idioma: Español
• Editorial: ResearchFreelance
• Fecha de lanzamiento: 20 feb 2022
• ISBN: 9791221300772

Vista previa del libro

Introducción

Este libro pretende iniciar a quienes quieran crear un sitio web de forma independiente, al mundo de los dominios y la programación ligada a la web. El autor concibió este trabajo como un trabajo científico destinado al uso educativo y de estudio para todos aquellos que se acerquen al estudio de la programación del lado del cliente y del lado del servidor.

En primer lugar se explicará la diferencia entre los diversos dominios existentes en la red y en un momento posterior se intentará explicar el CSS y HTML para luego entrar en la programación PHP (lado servidor) y JavaScript (lado cliente) con la creación de bases de datos a través de phpMyAdmin.

Todo esto se explicará a través de un sitio web de ejemplo creado específicamente usando un Bootstrap gratuito por simplicidad y conveniencia básica y programando un panel de control con inicio de sesión conectado al sitio a través de la base de datos para insertar imágenes directamente desde la web cargándolas a la base de datos creada con phpMyAdmin conectado al sitio. Obviamente, luego de haber ingresado al mundo de las bases de datos y la programación, será posible aplicar estos conocimientos a cualquier otra necesidad de iteración por parte del usuario que requiera el proyecto del sitio.

El objetivo de este estudio no es crear páginas web simples que hoy en día se pueden hacer fácilmente con WordPress u otro software fácil de usar, sino con fines puramente educativos para explicar el uso de bases de datos y programación del lado del servidor y del cliente para hacer una sitio dinámico de lo contrario estático. En resumen, este trabajo puede ser útil para aquellos que quieran acercarse al fascinante mundo de la programación web desde sus inicios.

PARTE GENERAL

Diferencia entre sitios y blogs.

El blog se actualiza diariamente, o semanalmente, no hay noticias nuevas de las que el blogger haya decidido hablar en el blog construido ad hoc (blog de cocina, programación, etc.). El sitio solo se puede actualizar cuando cambia la información de la empresa o, en el caso de una cartera o un sitio de comercio electrónico, cuando cambian los productos o los precios.

Los sitios pueden ser tanto estáticos como dinámicos, mientras que un blog necesariamente debe ser dinámico ya que debe actualizarse continuamente. Los sitios estáticos se crean en html y css y solo los puede editar un experto a través de los archivos de origen, mientras que los sitios dinámicos tienen muchas iteraciones con el usuario que modifica las páginas automáticamente. Ejemplos de sitios dinámicos son sitios de comercio electrónico y blogs que le permiten seleccionar lo que le interesa o interactuar con el sitio de varias maneras.

Para crear sitios o blogs dinámicos y receptivos, ahora usamos alojamiento con paneles de control simples, también llamados Sistema de gestión de contenido (CMS), como el software Wordpress de código abierto. Este es el método más simple para crear y actualizar su sitio de manera continua y fácil sin tener ningún conocimiento específico.

Qué son los dominios y el hosting

Se requiere un dominio para hacer público un sitio web. El dominio lo pone a disposición un proveedor y puede ser gratuito o de pago. Normalmente los dominios de primer nivel son los que identifican un territorio, mientras que los de interés para los usuarios son los de segundo, tercer y cuarto nivel.

Los dominios de segundo nivel son aquellos que habitualmente encontraremos de pago e identifican al usuario (por ejemplo www.user.com). Los de segundo y tercer nivel están disponibles en su mayoría de forma gratuita en la web (por ejemplo, podemos tener www.altervista.user.com). Los dominios de segundo, tercer y cuarto nivel también se pueden conectar a su sitio (por ejemplo, podemos tener blog.user.com).

Cuando queremos poner en línea páginas web, también debemos solicitar un alojamiento (espacio web), del inglés to host que significa alojar. Muchas veces el proveedor que elijamos nos dará tanto el dominio como el hosting gratuito o de pago. Esto depende de las condiciones que ofrezca el proveedor.

En el ejemplo que explicaremos más adelante en este libro, hemos elegido un hosting con un dominio de tercer nivel gratuito de Altervista.

Evidentemente, si eres programador y estás vendiendo un sitio a un cliente, no podrás utilizar un dominio de tercer nivel, sino que utilizarás un dominio de segundo nivel con hosting de pago que traspasarás a la empresa tras crear el site o que gestionarás anualmente. Esto dependerá del contrato redactado con el cliente.

Como en todo lo relacionado con la programación, la elección del hosting de pago o gratuito depende del resultado final que se quiera conseguir. El hosting de pago tiene servicios adicionales y varias direcciones de correo electrónico asociadas al dominio, además de estar compuesto únicamente por el nombre de la empresa o de la persona a la que se podría facilitar en la búsqueda de Google.

Cómo crear páginas sin saber idiomas con WordPress

Wordpress es un software de código abierto que le permite crear y actualizar dinámicamente su blog o sitio. A través de un CMS (Content Management System) muy intuitivo, le permite agregar contenido de texto, videos e imágenes sin trabajar en el código directamente en las páginas de nuestro sitio. También ofrece la posibilidad, si conoces los conceptos básicos del lenguaje html, de modificarlo directamente desde el código fuente. Evidentemente esta plataforma ofrece muchas posibilidades de utilizar widgets y plantillas para poder tener, al final del trabajo de creación, un blog personalizado, pero no tantas como nos permitiría hacer una creación personalizada con html, php, javascript y código mysql donde podemos crear nuestro propio sitio desde cero sin temas prefabricados. Para personalizar más el sitio en función de un tema, puedo agregar un CSS al

Wordpress sigue siendo una excelente opción y además nos permite insertar código php. En este caso, puedo ir al aspecto del editor de temas e ingresar las funciones del tema en un archivo llamado function.php. Esto no es muy recomendable ya que todo el código adicional se perderá cuando se actualice el tema.

En cambio, hay un complemento para insertar el código php que se llama Fragmentos de código. Después de la instalación y activación, encontraré Snippets en el menú principal y podré usar algunos archivos existentes o crear nuevos.

Cómo crear páginas usando HTML y CSS

Cuando escribimos un sitio en html, nuestra PC (CLIENTE) se comunica con otra computadora llamada SERVIDOR que le da una respuesta al Cliente.

El cliente realiza una solicitud al servidor que responde interpretando el lenguaje html y visualizando el sitio.

Para crear páginas web puedes utilizar un simple wordpad o bloc de notas o el Notepad más avanzado que también resalta los errores de escritura de las instrucciones.

HTML representa la estructura del sitio, mientras que CSS puede considerarse la vestimenta (los gráficos) del sitio.

HTML es un lenguaje de marcado y no un lenguaje de programación. De hecho, el navegador traduce el código y nos permite ver la página web.

Las etiquetas son esenciales para dar una estructura a la página que luego será traducida por el navegador.

Ejemplo de elemento o etiqueta:

Título de la página

Título del párrafo

Título de la página

Si copiamos este código en una hoja de notas y lo guardamos con extensión html, veremos que aparecerá nuestro sitio raw.

Luego guardamos el archivo con la extensión html. Lo llamaremos index.html porque es el nombre que el navegador reconocerá como la página principal de nuestro sitio.

Si hacemos doble clic sobre el archivo del escritorio se desplegará en el navegador:

Verá que el navegador reconoce las etiquetas y formatea nuestro texto como queríamos. Este es un ejemplo simple de cómo el navegador lee páginas html.

El navegador luego traduce las etiquetas en elementos de la página web.

Desde Chrome si escribimos:

Ctrl + u mostrará el código html de cualquier página web.

Índex.html:

Esempio Web Design

current>index.html>Home

about.html>About

services.html>Services

Corpo del sito

Esempio Web Deisgner, Copyright © 2022

Esempio Web Design

current>index.html>Home

about.html>About

services.html>Services

Corpo del sito

Esempio Web Deisgner, Copyright © 2022

Obviamente, si no insertamos el