{"id":1432,"date":"2018-10-16T12:13:46","date_gmt":"2018-10-16T17:13:46","guid":{"rendered":"http:\/\/linuxitos.com\/main\/desarrollo-web-con-bootstrap-4-html-y-php-parte-i\/"},"modified":"2018-10-16T12:18:47","modified_gmt":"2018-10-16T17:18:47","slug":"desarrollo-web-con-bootstrap-4-html-y-php-parte-i","status":"publish","type":"post","link":"https:\/\/linuxitos.com\/main\/desarrollo-web-con-bootstrap-4-html-y-php-parte-i\/","title":{"rendered":"Desarrollo Web con Bootstrap 4, HTML y PHP | Parte I"},"content":{"rendered":"
<\/div>\n
\n
<\/a><\/div>\n
\u00a0<\/span><\/div>\n
<\/div>\n

S\u00e9 que el t\u00edtulo del post es un tanto ut\u00f3pico, ya que no es tan simple aprender a desarrollar p\u00e1ginas web, sin embargo tampoco es algo tan complejo, sobre todo hoy en d\u00eda que existenten herramientas que nos permiten crear de manera simple y r\u00e1pida un sitio web completo, incluso sin necesidad de saber nada sobre CSS, HTML, PHP. Herramientas como WIX, indesign, dreamweaver, etc., permiten crear en cuesti\u00f3n de minutos una p\u00e1gina decente y sin mucha dificultad.<\/span>
\n
\n<\/span>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\u00f3digo, editar, modificar, y no solo utilizar alguna herramienta WYSIWYG, \u00e9stos post, son para ellos.<\/span>
\n
\n<\/span>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\u00e1s de un but\u00f3n. Si bien es cierto, es encesario conocer las bases de CSS, programaci\u00f3n, objetos, dise\u00f1o, etc., pero todo eso se puede ir conociendo durante el proceso de aprendizaje.<\/span><\/p>\n

\n

1.- Introducci\u00f3n<\/b><\/span>
\n
\n<\/span>\u00bfQu\u00e9 es HTML?<\/b><\/span>
\n
\n<\/span>HTML significa \u00abLenguaje de Marcado de Hypertexto\u00bb por sus siglas en ingles \u00abHyperText Markup Language\u00bb, es un lenguaje que pertenece a la familia de los \u00ablenguajes de marcado\u00bb y es utilizado para la elaboraci\u00f3n de p\u00e1ginas web. El est\u00e1ndar HTML lo define la W3C (World Wide Web Consortium) y actualmente HTML se encuentra en su versi\u00f3n HTML5.<\/span>
\n
\n<\/span>Cabe destacar que HTML no es un lenguaje de programaci\u00f3n ya que no cuenta con funciones aritm\u00e9ticas, variables o estructuras de control propias de los lenguajes de programaci\u00f3n, por lo que HTML genera \u00fanicamente p\u00e1ginas web est\u00e1ticas, sin embargo, HTML se puede usar en conjunto con diversos lenguajes de programaci\u00f3n para la creaci\u00f3n de p\u00e1ginas web din\u00e1micas.<\/span>
\n
\n<\/span><\/p>\n

https:\/\/www.w3.org<\/a><\/span><\/div>\n


\n<\/span>\u00bfQu\u00e9 es Bootstrap?<\/b><\/span>
\n
\n<\/span>Los \u00faltimos a\u00f1os y con la aparici\u00f3n 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\u00f3n los sitios web tambi\u00e9n ha tenido que cambiar mucho.<\/span>
\nVamos a empezar por el principio, Bootstrap es un framework CSS desarrollado inicialmente (en el a\u00f1o 2011) por Twitter que permite dar forma a un sitio web mediante librer\u00edas CSS que incluyen tipograf\u00edas, botones, cuadros, men\u00fas 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\u00f1o 2011 y su desarrollo continua en un repositorio de GitHub.<\/span>
\n
\n<\/span><\/p>\n

http:\/\/getbootstrap.com<\/a><\/span><\/div>\n


\n<\/span>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\u00f1o. Adem\u00e1s, Bootstrap ofrece las herramientas necesarias para crear cualquier tipo de sitio web utilizando los estilos y elementos de sus librer\u00edas.<\/span>
\n
\n<\/span><\/p>\n

https:\/\/github.com\/twbs\/bootstrap<\/a><\/span><\/div>\n


\n<\/span>Desde la aparici\u00f3n de Bootstrap 3 el framework se ha vuelto bastante m\u00e1s compatible con desarrollo web responsive, entre otras caracter\u00edsticas se han reforzado las siguientes:<\/span>
\n
\n<\/span>– Soporte bastante bueno (casi completo) con HTML5 y CSS3, permitiendo ser usado de forma muy flexible para desarrollo web con unos excelentes resultados.<\/span>
\n– Se ha a\u00f1adido un sistema GRID que permite dise\u00f1ar usando un GRID de 12 columnas donde se debe plasmar el contenido, con esto podemos desarrollar responsive de forma mucho m\u00e1s f\u00e1cil e intuitiva.<\/span>
\n– Boostrap 3 establece Media Queries para 4 tama\u00f1os de dispositivos diferentes variando dependiendo del tama\u00f1o de su pantalla, estas Media Queries permiten desarrollar para dispositivos m\u00f3viles y tablets de forma mucho m\u00e1s f\u00e1cil.<\/span>
\n– Boostrap 3 tambi\u00e9n permite insertar im\u00e1genes responsive, es decir, con solo insertar la imagen con la clase \u201cimg-responsive\u201d las im\u00e1genes se adaptaran al tama\u00f1o.<\/span>
\n– Todas estas caracter\u00edsticas hacen que Boostrap sea una excelente opci\u00f3n para desarrollar webs y aplicaciones web totalmente adaptables a cualquier tipo de dispositivo.<\/span>
\n
\n<\/span>\u00bfQu\u00e9 es PHP?<\/b><\/span>
\n
\n<\/span>PHP (acr\u00f3nimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de c\u00f3digo abierto muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML.<\/span>
\n
\n<\/span>Bien, pero \u00bfqu\u00e9 significa realmente? Un ejemplo nos aclarar\u00e1 las cosas:<\/span>
\n
\n<\/span>Ejemplo #1 Un ejemplo introductorio<\/span>
\n
\n<\/span><\/p>\n

<!DOCTYPE HTML>\n<html>\n    <head>\n        <title>Ejemplo<\/title>\n    <\/head>\n    <body>\n        <?php\n            echo \"\u00a1Hola, soy un script de PHP!\";\n        ?>\n    <\/body>\n<\/html><\/b><\/span><\/span><\/pre>\n
En lugar de usar muchos comandos para mostrar HTML (como en C o en Perl), las p\u00e1ginas de PHP contienen HTML con c\u00f3digo incrustado que hace \u00abalgo\u00bb (en este caso, mostrar \u00ab\u00a1Hola, soy un script de PHP!). El c\u00f3digo de PHP est\u00e1 encerrado entre las etiquetas especiales de comienzo y final <?php y ?> que permiten entrar y salir del \u00abmodo PHP\u00bb.<\/span>
\n
\n<\/span>Lo que distingue a PHP de algo del lado del cliente como Javascript es que el c\u00f3digo es ejecutado en el servidor, generando HTML y envi\u00e1ndolo al cliente. El cliente recibir\u00e1 el resultado de ejecutar el script, aunque no se sabr\u00e1 el c\u00f3digo subyacente que era en php.<\/span>
\n
\n<\/span>Lo mejor de utilizar PHP es su extrema simplicidad para el principiante, pero a su vez ofrece muchas caracter\u00edsticas avanzadas para los programadores profesionales.<\/span>
\n
\n<\/span><\/p>\n
https:\/\/secure.php.net\/manual\/es\/intro-whatis.php<\/a><\/span><\/div>\n

\n<\/span>2.-Herramientas\/Software que se requiere para iniciar<\/span><\/b>
\n
\n<\/span>a) OS Fedora<\/b><\/span>
\n
\n<\/span>En los post se utilizar\u00e1 Fedora 28 x86_64, para los ejemplos e instalaci\u00f3n de software, sin embargo, no es necesario instalarlo, si usan windows, o alguna distro linux, simplemente tendr\u00e1n que revisar c\u00f3mo se instala o configuran las herramientas que se utilizaran. Adem\u00e1s, las herramientas las pueden reemplazar por sus elecciones, como ya he dicho antes, en gustos se rompen g\u00e9neros.<\/span>
\n
\n<\/span>Si lo quieren descargar:<\/span><\/p>\n
    \n
  1. https:\/\/getfedora.org<\/a><\/li>\n<\/ol>\n

    \n<\/span>b) Un editor de texto<\/b><\/span>
    \n
    \n<\/span>De nuevo, en gustos se rompen gen\u00e9ros, as\u00ed que pueden utilizar el editor de texto que gusten, est\u00e1n de los m\u00e1s simples como Gedit, Bloc de Notas, los intermedios, SublimeText, Atom, Bracketes, y los m\u00e1s profesionales como E-macs o Vi.<\/span>
    \n
    \n<\/span>En los post se utilizar\u00e1 Sublime-Text, debido a que es f\u00e1cil de usar, personalizable, multiplataforma y no es pesado.<\/span>
    \n
    \n<\/span>Instalaci\u00f3n en Fedora:<\/span>
    \n
    \n<\/span>Versi\u00f3n estable<\/span>
    \n
    \n<\/span><\/p>\n
    sudo dnf config-manager --add-repo https:\/\/download.sublimetext.com\/rpm\/stable\/x86_64\/sublime-text.repo<\/pre>\n
    sudo dnf install sublime-text<\/pre>\n
    \u00a0<\/span><\/p>\n
    https:\/\/www.sublimetext.com\/docs\/3\/linux_repositories.html<\/a><\/span><\/div>\n

    \n<\/span>b) Navegador Web<\/b><\/span>
    \n
    \n<\/b><\/span> Pueden utilizar el que sea de elecci\u00f3n.<\/span>
    \n
    \n<\/span>c) Servidorde PHP<\/b><\/span>
    \n
    \n<\/span>Se utilizar\u00e1 XAMPP: Seguir el siguiente tutorial para eso:<\/span>
    \n    https:\/\/linuxitos.com\/main\/instalar-xampp-7-10-2-fedora-28\/<\/a><\/span>
    \n
    \n<\/span>
    \n<\/span>3.- Configurando el servidor de PHP, XAMPP<\/b><\/span>
    \n
    \n<\/span>Crear un enlace de la carpeta htdocs a la carpeta personal:<\/span>
    \n
    \n<\/span><\/p>\n
    sudo ln -s \/opt\/lampp\/htdocs \/home\/linuxitos\/www<\/span><\/pre>\n
    Crear un enlace del archivo de errores de php:<\/span>
    \n
    \n<\/span><\/p>\n
     sudo ln -s \/opt\/lampp\/logs\/php_error_log \/home\/linuxitos\/www<\/span><\/span><\/pre>\n

    \n<\/span>4.- Conlusi\u00f3n:<\/span>
    \n
    \n<\/span>La primera parte de \u00e9stos post, es monstrar la teor\u00eda b\u00e1sica necesaria, as\u00ed como instalar y configurar las herramientas de software necesarias para el siguiente paso.<\/span>
    \nSi has terminado hasta ac\u00e1, te invito a seguir adelante con la Parte 2.<\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    \u00a0 S\u00e9 que el t\u00edtulo del post es un tanto ut\u00f3pico, ya que no es tan simple aprender a desarrollar p\u00e1ginas web, sin embargo tampoco es algo tan complejo, sobre todo hoy en d\u00eda que existenten herramientas que nos permiten crear de manera simple y r\u00e1pida un sitio web completo, incluso sin necesidad de saber […]<\/p>\n","protected":false},"author":2,"featured_media":1382,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65,1540,1543,152,1542,67,292,1541,10],"tags":[1554,1555,1556],"class_list":["post-1432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-develepmet","category-developer","category-html","category-html5","category-php","category-web","category-web-developer","category-xampp","tag-bootsatrap","tag-html","tag-php"],"_links":{"self":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/1432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/comments?post=1432"}],"version-history":[{"count":4,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/1432\/revisions"}],"predecessor-version":[{"id":1897,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/1432\/revisions\/1897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media\/1382"}],"wp:attachment":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media?parent=1432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/categories?post=1432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/tags?post=1432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}