{"id":1796,"date":"2012-04-23T13:26:31","date_gmt":"2012-04-23T13:26:31","guid":{"rendered":"http:\/\/www.apprentalonline.es\/blog\/?p=1796"},"modified":"2012-04-23T13:26:31","modified_gmt":"2012-04-23T13:26:31","slug":"crear-plantilla-concrete5-a-partir-de-una-web-estatica","status":"publish","type":"post","link":"https:\/\/www.k3bone.com\/blog\/2012\/04\/crear-plantilla-concrete5-a-partir-de-una-web-estatica\/","title":{"rendered":"Crear plantilla Concrete5 a partir de una web est\u00e1tica"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Concrete5<\/strong>, como ya dijimos en un post anterior sobre lo Nuevo de Concrete5<\/a> es un CMS<\/strong> que nos permite editar el contenido directamente en la p\u00e1gina sin necesidad de codificar.<\/p>\n

Hoy vamos a crear una plantilla para Concrete5<\/strong> simple y as\u00ed poder tener una idea b\u00e1sica de como crear la que vosotros quer\u00e1is.<\/p>\n

Descargar plantilla<\/h2>\n

Para no empezar de cero, vamos a descargar una plantilla desde ArcSin<\/a>:<\/p>\n

\"\"<\/a><\/p>\n

Una vez en nuestro PC, lo descomprimimos y renombramos la carpeta a \u00abcolorate<\/strong>\u00ab. Ahora abrimos en nuestro editor preferido una documento de texto y ponemos el t\u00edtulo y la descripci\u00f3n y lo guardamos como \u00abdescription.txt\u00bb en la raiz de nuestro sitio, de este modo:<\/p>\n

\nCOLORATE Mi primer theme en Concrete5\n<\/pre>\n
Como Concrete5<\/strong> utiliza PHP para sus archivos lo primero que vamos a hacer es renombrar el index.html<\/em> de la plantilla que nos hemos descargado, por default.php<\/em> y lo abrimos.<\/p>\n
Veremos un archivo en el que su c\u00f3digo es puramente HTML, as\u00ed que vamos a modificarlo un poco para que se nos convierta en algo m\u00e1s din\u00e1mico gracias a PHP.<\/p>\n
1. Modificar ruta de los archivos utilizados<\/h2>\n
Vamos a modificar todos las rutas con las llamadas a archivos tipo Javascript, CSS, Im\u00e1genes, etc .. Para ello lo primero que haremos ser\u00e1 buscar en el c\u00f3digo textos que puedan hacer llamadas con rutas como por ejemplo, href y src. Y en cada uno de ellos habr\u00e1 que poner delante de la ruta lo siguiente:<\/p>\n
C\u00f3digo Antes:<\/p>\n
\n<!-- para CSS -->\n<!-- para im\u00e1ganes -->\n<img class="bordered" src="img\/sample-event.jpg" alt="" width="240" height="80" \/>\n<\/pre>\n
C\u00f3digo Despu\u00e9s:<\/p>\n
\n<!-- para CSS -->\n\n<!-- para im\u00e1ganes --><\/pre>\n<img class="bordered" src="<?=$this->getThemePath()?>\/img\/sample-event.jpg" alt="" width="240" height="80" \/>\n<\/pre>\n
Una vez lo tenemos todo modificado, vamos a trasladarlo a la carpeta themes de nuestra instalaci\u00f3n de Concrete5, en nuestro caso lo copiamos en: http:\/\/localhost\/colorate\/themes Una vez copiados los archivos, nos vamos al panel de control de nuestra instalaci\u00f3n de concrete5 y a la zona de Themes. Aqu\u00ed veremos el theme disponible para instalar (Themes Available to Install). Lo \u00fanico que tendremos que hacer es darle al bot\u00f3n INSTALL y se instalar\u00e1. Con lo que veriamos nuestra theme instalado de la siguiente forma: \"Preview Para probar si todo funciona bien, lo mejor es hacer clic en el bot\u00f3n PREVIEW tal y como vemos en la imagen, con lo que obtendremos una vista previa como esta: \"Preview<\/p>\n
2. Modificar Title<\/h2>\n
El t\u00edtulo de cada una de las p\u00e1ginas que compondr\u00e1n nuestro sitio web tambi\u00e9n tiene que ser din\u00e1mica para poder configurarlo a gusto en el panel de control y que se vea reflejado din\u00e1micamente en todas las p\u00e1ginas. Para ello tendremos que hacer la siguiente modificaci\u00f3n:<\/p>\n
C\u00f3digo anterior:<\/p>\n
\n<title>Website Template: Simple Organization (demo)<\/title>\n<\/pre>\n
C\u00f3digo despu\u00e9s:<\/p>\n
\n<? Looder::element('header_required'); ?>\n<\/pre>\n
Ahora si actualizamos nuestro sitio web, podremos ver en el c\u00f3digo fuente (Ver c\u00f3digo fuente en tu navegador) que nos ha agregado din\u00e1micamente unas l\u00edneas como estas:<\/p>\n
\n<meta http-equiv="content-type" content="text\/html; charset=UTF-8" \/>\n<title>COLORATE :: Home<\/title>\n<meta name="description" content="" \/>\n<meta name="generator" content="concrete5 - 5.5.2" \/>\n<\/pre>\n
3. Crear texto editable<\/h2>\n
Ahora iremos cambiando las zonas visibles del sitio web de forma que podamos controlar el contenido a trav\u00e9s del panel de control, que se consigue instanciando el objeto Area con diferentes atributos. Area principal<\/strong>: Para el area principal utilizaremos la funci\u00f3n (‘Main’). C\u00f3digo anterior:<\/p>\n
\n<h2 class="label label-green">Mission Statement<\/h2>\n<p class="quiet large">What we want to achieve<\/p>\n<p>Vestibulum eu pellentesque ante. Sed tincidunt quam eu nisl luctus id mattis tellus rhoncus.<\/p>\n<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Donec dapibus eros vitae nibh venenatis faucibus.<\/p>\n<\/pre>\n
C\u00f3digo despu\u00e9s:<\/p>\n
\n<? $a = New Area('Main'); $a->display($c); ?>\n<\/pre>\n
Area Men\u00fa de navegaci\u00f3n principal<\/strong>: Para el area principal utilizaremos la funci\u00f3n (‘Header Nav’). C\u00f3digo anterior:<\/p>\n
\n<ul class="tabbed">\n<li class="current-tab"><a href="<?=$this->getThemePath()?>\/index.html">Blog<\/a><\/li>\n<li><a href="#">Events<\/a><\/li>\n<li><a href="#">About<\/a><\/li>\n<li><a href="#">Archives<\/a><\/li>\n<li><a href="#">Join Us!<\/a><\/li>\n<\/ul>\n<\/pre>\n
C\u00f3digo despu\u00e9s:<\/p>\n
\n<? $a = New Area('Header Nav'); $a->display($c); ?>\n<\/pre>\n
Otras areas editables<\/strong>:<\/p>\n