Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Crear un marco PHP5 - Parte 3

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Ahora que tenemos un marco básico (ver parte 1 y parte 2 de esta serie), podemos comenzar a pensar en integrar diseños con nuestro marco PHP. Por ahora, nos concentraremos en el diseño de front-end, incluyendo cómo podemos hacer que nuestro nuevo marco sea más sencillo.

Cómo todo encaja

Hasta ahora, tenemos nuestros archivos principales, en una estructura lógica y un conjunto principal de objetos a los que se accede mediante nuestro registro. Uno de estos objetos es nuestro controlador de plantillas, que nos permite compilar y generar fácilmente resultados HTML. La salida se construye a partir de una serie de archivos que incluyen imágenes, css y plantillas que conforman 'la máscara'.

Paso 1: lo que se necesita para el diseño frontal de nuestro marco

Los diseños de front-end genéricos para la plantilla pueden ser difíciles de pensar correctamente. Es útil si la plantilla HTML básica del diseño contiene todo lo que cualquier sitio web que pueda crear usando el marco. Lo mínimo que considero es:

  • Un área de contenido principal, que llamaremos

    .

  • Una o dos columnas para el contenido que no es tan importante como en

    .

  • Algunos datos tabulares.
  • Listas desordenadas y ordenadas (listas de definiciones también, si es probable que las use).
  • Imagenes Me parece útil incluir un estilo separado para las fotografías, que identifico con la clase "foto" en HTML; por ejemplo, <img class = "photo" src = "images / photo.jpg" alt = "Photograph" />.
  • Un formulario para la captura de datos.

El <head>

Comenzaremos creando una estructura XHTML básica para nuestras páginas. Comenzaremos con la sección primero:

Puede cambiar el tipo de documento para que coincida, o incluso tener una disposición para poder definirlo dentro de la configuración de cada sitio web que cree con su marco, y también sería útil poder cambiar el

. Sería útil tener la hoja de estilo también definida como una configuración, que veremos en futuros tutoriales.

Además, la meta descripción y los atributos de la clave meta pueden estar codificados en la máscara de cada sitio web que cree, pero es aconsejable dar a cada página una descripción y un conjunto de palabras clave diferentes para evitar que aparezcan páginas en el índice complementario de Google.

El marcador de posición {pagetitle} se usará para insertar el título de la página actual en la plantilla.

El <body>

Ahora podemos pasar al cuerpo de nuestro archivo XHTML de plantilla para un diseño de interfaz genérico para nuestro marco. Mantendremos el diseño simple por ahora, asumiendo que la mayoría de los sitios web que crearemos con el marco utilizará el esquema tradicional de encabezado, contenido, columna y pie de página.

Paso 2: contenido básico

Según lo prometido, completaremos algunos contenidos básicos para que podamos tener el estilo de que tenemos al menos la mayoría de las etiquetas que probablemente aparecerán en una página lista para usar:

El contenido ahora está listo para un estilo simple.

Paso 3: estilo básico

Comenzaremos por restablecer el margen y el relleno de los elementos en nuestro documento XHTML con CSS:

Tomaremos un tiempo para asignar estilo al elemento del cuerpo y asegurarnos de que los enlaces dentro del documento estén resaltados apropiadamente:

A continuación, continuaremos centrando nuestro diseño en la división #wrapper, y asignando un borde débil a cada una de las divs para que podamos verlas a medida que diseñamos.

Si bien el CSS anterior no centrará este diseño en Internet Explorer 6, el CSS se ha mantenido básico para permitir la máxima flexibilidad. Con un poco más de CSS, casi tenemos un diseño de esqueleto completo para la interfaz de nuestro marco, todo lo que queda es un pequeño posicionamiento simple:

Todo lo que nos queda de estilo ahora son imágenes:

Lo que nos queda en esta etapa es un diseño de sitio web simple que podemos usar como base del front-end de nuestro marco de trabajo de PHP:

Por supuesto, para mayor flexibilidad, puede ser útil permitir 2 columnas de contenido por defecto, lo que se puede hacer con la adición de un poco más de XHTML y CSS.

Paso 4: plantillas de XHTML

El siguiente paso es transferir XHTML, CSS e imágenes a un skin adecuado para nuestro marco PHP. Para hacer esto, necesitamos dividir el XHTML en tres plantillas: encabezado, principal y pie de página. Debido a la forma en que está estructurado el sistema de plantillas, se puede generar una página a partir de cualquier número de plantillas, sin embargo, al menos se recomienda un encabezado, pie de página y una plantilla principal, esto significa que, en términos generales, solo deberíamos necesitar copiar y alterar el archivo de plantilla principal si tuviéramos que crear una nueva página que tuviera una estructura ligeramente diferente.

Plantilla de encabezado para el marco PHP (skins / default / templates / header.tpl.php)

La plantilla de encabezado para el marco PHP debe contener la sección de nuestro XHTML, así como la

sección de la

Plantilla principal para el marco PHP (skins / default / templates / main.tpl.php)

La plantilla principal debe incluir los divs que contendrán tanto el contenido primario como cualquier contenido en columnas. En lugar de copiar el texto ficticio que usamos para elementos de estilo, como párrafos, listas ordenadas y tablas, ahora podemos insertar marcadores de posición para este contenido, que se actualizarán dependiendo de dónde se encuentre el contenido.

El contenido del marcador de posición es:

  • {pagetitle} el título de la página.
  • {maincontent} el contenido principal de la página.
  • Encabezado {btitle} y {bcontent} y contenido para bloques de contenido. Esto está incluido dentro de un bucle rcolumn para que se puedan colocar varios bloques en la columna.

Plantilla de pie de página para el marco PHP (skins / default / templates / footer.tpl.php)

Por último, el XHTML restante va en el archivo de pie de página, que cierra el documento XHTML y la sección del cuerpo. Por lo general, utilizamos esto para incluir un aviso de copyright y un enlace 'diseño web realizado por' en nuestros sitios web.

Pedimos disculpas por el salto de PHP en nuestra serie, pero es importante construir las plantillas relevantes en formato de máscara para nuestro marco y las aplicaciones que lo utilizan. La Parte 4 de esta serie de desarrollo de framework PHP5 cubrirá las consideraciones básicas de seguridad y un controlador de autenticación básico, antes de continuar con la creación de nuestro modelo de Administración de contenido y ver cómo encajan los modelos en la Parte 5. También se incluirá en la serie: Envío de correos electrónicos, Ampliando nuestro marco y registrando un flujo de eventos de usuarios de una manera innovadora.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.