Desarrollo Web con Bootstrap 4, HTML y PHP | Parte I


 
Sé que el título del post es un tanto utópico, ya que no es tan simple aprender a desarrollar páginas web, sin embargo tampoco es algo tan complejo, sobre todo hoy en día que existenten herramientas que nos permiten crear de manera simple y rápida un sitio web completo, incluso sin necesidad de saber nada sobre CSS, HTML, PHP. Herramientas como WIX, indesign, dreamweaver, etc., permiten crear en cuestión de minutos una página decente y sin mucha dificultad. Sin embargo, algunos programadores de software para escritorio como c, c++, java, etc., y que quieren aprender desarrollo web, o simplemente aquellos autodidactas que quieren ver código, editar, modificar, y no solo utilizar alguna herramienta WYSIWYG, éstos post, son para ellos. En resumen, la siguiente serie de post es para iniciarse en el desarrollo web, reutilizando herramientas ya existentes, como frameworks, plugins, etc., con la finalidad de agilizar el trabajo, pero no al grado de olvidarse de aprender lo que hay detrás de un butón. Si bien es cierto, es encesario conocer las bases de CSS, programación, objetos, diseño, etc., pero todo eso se puede ir conociendo durante el proceso de aprendizaje.
1.- Introducción ¿Qué es HTML? HTML significa "Lenguaje de Marcado de Hypertexto" por sus siglas en ingles "HyperText Markup Language", es un lenguaje que pertenece a la familia de los "lenguajes de marcado" y es utilizado para la elaboración de páginas web. El estándar HTML lo define la W3C (World Wide Web Consortium) y actualmente HTML se encuentra en su versión HTML5. Cabe destacar que HTML no es un lenguaje de programación ya que no cuenta con funciones aritméticas, variables o estructuras de control propias de los lenguajes de programación, por lo que HTML genera únicamente páginas web estáticas, sin embargo, HTML se puede usar en conjunto con diversos lenguajes de programación para la creación de páginas web dinámicas. ¿Qué es Bootstrap? Los últimos años y con la aparición de la web 2.0 Internet ha cambiado y se ha transformado para dar acogida a todas las necesidades de sus usuarios, y por esa razón los sitios web también ha tenido que cambiar mucho. Vamos a empezar por el principio, Bootstrap es un framework CSS desarrollado inicialmente (en el año 2011) por Twitter que permite dar forma a un sitio web mediante librerías CSS que incluyen tipografías, botones, cuadros, menús y otros elementos que pueden ser utilizados en cualquier sitio web. Aunque el desarrollo del framework Bootstrap fue iniciado por Twitter, fue liberado bajo licencia MIT en el año 2011 y su desarrollo continua en un repositorio de GitHub. Bootstrap es una excelente herramienta para crear interfaces de usuario limpias y totalmente adaptables a todo tipo de dispositivos y pantallas, sea cual sea su tamaño. Además, Bootstrap ofrece las herramientas necesarias para crear cualquier tipo de sitio web utilizando los estilos y elementos de sus librerías. Desde la aparición de Bootstrap 3 el framework se ha vuelto bastante más compatible con desarrollo web responsive, entre otras características se han reforzado las siguientes: - Soporte bastante bueno (casi completo) con HTML5 y CSS3, permitiendo ser usado de forma muy flexible para desarrollo web con unos excelentes resultados. - Se ha añadido un sistema GRID que permite diseñar usando un GRID de 12 columnas donde se debe plasmar el contenido, con esto podemos desarrollar responsive de forma mucho más fácil e intuitiva. - Boostrap 3 establece Media Queries para 4 tamaños de dispositivos diferentes variando dependiendo del tamaño de su pantalla, estas Media Queries permiten desarrollar para dispositivos móviles y tablets de forma mucho más fácil. - Boostrap 3 también permite insertar imágenes responsive, es decir, con solo insertar la imagen con la clase “img-responsive” las imágenes se adaptaran al tamaño. - Todas estas características hacen que Boostrap sea una excelente opción para desarrollar webs y aplicaciones web totalmente adaptables a cualquier tipo de dispositivo. ¿Qué es PHP? PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de código abierto muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML. Bien, pero ¿qué significa realmente? Un ejemplo nos aclarará las cosas: Ejemplo #1 Un ejemplo introductorio
<!DOCTYPE HTML>
<html>
    <head>
        <title>Ejemplo</title>
    </head>
    <body>
        <?php
            echo "¡Hola, soy un script de PHP!";
        ?>
    </body>
</html>
En lugar de usar muchos comandos para mostrar HTML (como en C o en Perl), las páginas de PHP contienen HTML con código incrustado que hace "algo" (en este caso, mostrar "¡Hola, soy un script de PHP!). El código de PHP está encerrado entre las etiquetas especiales de comienzo y final <?php y ?> que permiten entrar y salir del "modo PHP". Lo que distingue a PHP de algo del lado del cliente como Javascript es que el código es ejecutado en el servidor, generando HTML y enviándolo al cliente. El cliente recibirá el resultado de ejecutar el script, aunque no se sabrá el código subyacente que era en php. Lo mejor de utilizar PHP es su extrema simplicidad para el principiante, pero a su vez ofrece muchas características avanzadas para los programadores profesionales. 2.-Herramientas/Software que se requiere para iniciar a) OS Fedora En los post se utilizará Fedora 28 x86_64, para los ejemplos e instalación de software, sin embargo, no es necesario instalarlo, si usan windows, o alguna distro linux, simplemente tendrán que revisar cómo se instala o configuran las herramientas que se utilizaran. Además, las herramientas las pueden reemplazar por sus elecciones, como ya he dicho antes, en gustos se rompen géneros. Si lo quieren descargar:
  1. https://getfedora.org
b) Un editor de texto De nuevo, en gustos se rompen genéros, así que pueden utilizar el editor de texto que gusten, están de los más simples como Gedit, Bloc de Notas, los intermedios, SublimeText, Atom, Bracketes, y los más profesionales como E-macs o Vi. En los post se utilizará Sublime-Text, debido a que es fácil de usar, personalizable, multiplataforma y no es pesado. Instalación en Fedora: Versión estable
sudo dnf config-manager --add-repo https://download.sublimetext.com/rpm/stable/x86_64/sublime-text.repo
sudo dnf install sublime-text
  b) Navegador Web Pueden utilizar el que sea de elección. c) Servidorde PHP Se utilizará XAMPP: Seguir el siguiente tutorial para eso: http://linuxitos.com/main/instalar-xampp-7-10-2-fedora-28/ 3.- Configurando el servidor de PHP, XAMPP Crear un enlace de la carpeta htdocs a la carpeta personal:
sudo ln -s /opt/lampp/htdocs /home/linuxitos/www
Crear un enlace del archivo de errores de php:
 sudo ln -s /opt/lampp/logs/php_error_log /home/linuxitos/www
4.- Conlusión: La primera parte de éstos post, es monstrar la teoría básica necesaria, así como instalar y configurar las herramientas de software necesarias para el siguiente paso. Si has terminado hasta acá, te invito a seguir adelante con la Parte 2.

Comentarios:

@