Aprende como transformar tu diseño web en una plantilla dinámica con PHP.

Share on Pinterest
Comparte con tus amigos










Enviar

Muchas veces cuando estamos trabajando con diseño front-end nos topamos con la necesidad de crear múltiples archivos para diseñar las diferentes partes de un sitio web, un proceso que es tan simple como crear una pagina de inicio o una pagina base y después duplicarla para modificar lo necesario y obtener una sección extra de nuestra pagina.

Hacer esto tiene un problema y es que si trabajamos con archivos .html tendremos que modificar el contenido de cada uno de los archivos, por ejemplo: Si tenemos 10 secciones de nuestro sitio web y queremos modificar el menú tenemos que modificar los 8 archivos .html . Y esto es un problema, es por eso que tenemos que crear plantillas con las que podamos modificar elementos repetitivos como menús de navegación, sidebars, pies de pagina, etc. De esta forma si queremos modificar el menú en vez de tener que editar 8 archivos, editando solo un archivo se modificara el menú en todas las secciones. A esto se le conoce como plantillas y hoy vamos a aprender a hacer una plantilla básica.

Lo que necesitas antes de comenzar

A partir de ahora cada que trabajes con plantillas tus archivos en vez de ser .html deben ser .php . Asi es vamos a utilizar php, una sola linea de código, pero es php. Y como vamos a trabajar con este lenguaje de programacion necesitamos tener un servidor local.

En este articulo no te enseñare a instalar un servidor local ya que es muy sencillo, basta con descargar el programa y presionar siguiente, siguiente, siguiente, lo típico.

Yo utilizo xampp en windows y es el que te recomiendo, pero existen mas que puedes descargar, como por ejemplo mamp para Mac.

Link XAMPP: https://www.apachefriends.org/es/index.html

Tampoco voy a profundizar mucho en como funciona un servidor local pero te explico rápidamente para que tengas una idea.

Antes los sitios web los creabas en una carpeta cualquiera, bien pudiera ser en el escritorio, en tus documentos, etc. A partir de ahora existe una carpeta especifica en donde deberás poner tus sitios web o al menos los que trabajen con PHP.

Esa ruta en el caso de XAMPP es: C:\xampp\htdocs

Dentro de htdocs van a ir las carpetas de tus sitios web asi que lo único que tienes que hacer es acceder a ese carpeta y dentro crear una para cada uno de tus sitios o proyectos.

Ejecutar el sitio web en el navegador también cambia, anteriormente lo que hacías era dar doble click sobre el archivo html o abrirlo en el navegador, ahora es diferente, como estamos trabajando con archivos PHP tenemos que ir a nuestro navegador y acceder al sitio mediante: http://localhost/tu_sitioweb

Si tienes un archivo llamado index.php lo ejecutara y sera el archivo que abrirá. Así que a partir de ahora es muy importante que recuerdes eso, si trabajas con archivos php tienes que recordar ejecutarlos desde localhost.

Como crear una plantilla básica (template)

Ahora si comencemos a crear una plantilla, primero que nada tienes que tener un sitio web estático, es decir un sitio con archivos html, css y/o javascript. Este sitio como acabamos de ver lo tienes que mover dentro de htdocs para poder acceder a el mediante localhost, una vez dentro de htdocs vamos a cambiarle las extensiones de .html a .php, ten cuidado al cambiarlas porque es posible que te queden algo como index.html.php lo cual esta mal.

Después lo que vamos a hacer es estudiar nuestro sitio web, identificar que partes se repiten en las demás paginas o secciones de nuestro sitio, por ejemplo el menú de navegación, el sidebar, pie de pagina, etc. Depende de cada pagina, por cada seccion que hayas identificado vas a crear un nuevo archivo con el nombre de esa parte por ejemplo con en la mayoría de los sitios el header es el mismo en todas partes vamos a crear un archivo llamado header.php, como el pie de pagina también es el mismo en todos sitios vamos a crear uno llamado footer.php y asi dependiendo de cuantos tengas.

Una vez los tengas lo que vamos a hacer es extraer un pedazo de código del documento original y pegarlo en los nuevos documentos por ejemplo, vamos a extraer el header, lo seleccionamos y lo cortamos. y por ultimo lo pegamos en el archivo header.php.

Aquí un ejemplo de la parte del header que corte de mi index.php

Ahora falta la parte mas importante relacionar el header.php con el index.php, esto es muy fácil y lo logramos con una simple linea de código.

Con esta linea estamos de alguna manera importando el código de header.php a nuestro index.php.

Lo que resta es hacer lo mismo para las demás partes del sitio, el sidebar y pie de pagina simplemente copiando la anterior linea de código en las demás partes y remplazando obviamente el archivo header.php por el archivo que necesitemos importar.

De esta manera vas a tener todo tu sitio dividido por partes y si creas mas archivos simplemente los relacionas con include() y cuando quieras modificar una parte general simplemente modificas un solo archivo.

Por ultimo decirte que este tipo de template/plantilla es muy básico, pero de momento te servirá para trabajar mas cómoda y fácilmente tus sitios web.

Para los que me piden el código de la plantilla que utilice en el video aquí tienen:

Código HTML:

Código CSS:

Si no has entendido alguna parte aquí tengo un tutorial que te servirá para entender como funcionan y como crear plantillas.

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Angel Rogelio’ Medina

    Con este tipo de plantilla que todo el menú esta en un archivo, como se puede hacer para que los elemento se activen, cuando le damos click.

  • Muy bueno el tutorial.

  • Pipe

    bueno, y ahora si quiero hacer un sitio grande, que tengo que hacer.

  • Diego castillo martinez

    hola soy nuevo en algunas cosas pero hay algo que no c y me cuesta trabajo es como hacer un buscador interno de mi pagina y que sea responsive design

  • Lea Ndro Elvieja

    Hola Falcon, todavía no empecé a seguir este tutorial y ya te lo estoy agradeciendo!! Sos un capo.

  • Software

    Me Gustaria que hagas como hacer columnas izquierda y derecha con css :D

  • Wendy De Alba

    FalconMasters excelente video

  • puedo meter los scipts y estilos en plantillas??

  • Fernando Yevenes

    carlitos consulta cual es el plugin que utilisaste para sublime en php … cuando genero el include no cambia de color .. Saludos
    fdo.yevenes@gmail.com


Aprende con nuestros cursos

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 4: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso
Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso