Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje31-12-2010, 22:10 (UTC)    
Título del mensaje: [Tutorial] Adaptar cualquier plantilla

Adaptar plantillas para PWG
No quería dejar de dar mi versión de este tutorial y tratar de conseguir un objetivo que veo que muchos no logran respecto a este tema y se trata de hacer un tutorial para que sepan como adaptar cualquier plantilla a PaginaWebGratis.es. PaginaWebGratis.es es un sitio web para crear páginas de manera muy sencilla lo que trae aparejado algunos limites y complicaciones en otros aspectos más avanzados como el de colocar cualquier diseño. Pero no es imposible y con este tutorial trataré de explicártelo de la manera más simple

1º Paso: Edita tu diseño
Antes de empezar a trabajar con la plantilla externa es fundamental que te dirijas a tu Kit de construcción y en la pestaña "Editar diseño" selecciones el diseño "CSS Design":




2º Paso: Busca y descarga un plantilla de uso libre
A menos que hayas comprado una deberás buscar una plantilla de uso libre para no tener problemas con los derechos de autor de las que no estén autorizadas para uso público. Puedo recomendarte estos sitios, entre muchos otros, para encontrar plantillas gratuitas:
http://www.freecsstemplates.org , http://www.free-css-templates.com , http://www.free-css.com , http://www.freecsstemplates.com , http://www.templatemo.com , http://www.templateworld.com , http://www.oswd.org , http://www.solucija.com/templates/free , http://www.freecsstemplate.net , http://www.bestfreetemplates.info .

Nosotros vamos a adaptar el diseño Equivalency de FreeCSSTemplates.org, tu puedes elegir el que gustes. Debes descargar el diseño para conseguir la carpeta con los archivos:



Los archivos que utilizaremos serán los marcados en celeste y suelen ser los más frecuentes ya que style.css contiene los estilos en código CSS, index.html incluye los códigos HTML y la carpeta "images" las imágenes que componen el diseño. Puede que la plantilla que tu descargues contenga otro tipo de archivos como por ejemplo archivos .js en caso de que requiera de algún script. Recuerda que en PWG no pueden utilizarse códigos PHP.


3º Paso: Sube las imágenes e instala el código CSS
Ahora debes subir cada una de las imágenes a la web y obtener su dirección. Te dejo algunos tutoriales por si no sabes como hacerlo:
http://www.paginawebgratis.es/forum/viewtopic.php?t=29577

Una vez que las hayas subido todas y cuentes con sus URL de enlace directo es hora de instalar el código CSS. Para eso abre el archivo de estilos (en nuestro caso se llama style.css) con cualquier programa de edición de texto como Bloc de Notas o Adobe Dreamweaver. Ahora copia todo el contenido que incluye y pégalo en tu Kit de construcción en la pestana "Editar diseño"/"Configuraciones avanzadas"/"CSS-Code
sin Style Tags":




Además de todos esos códigos añade esto al final de la última "}":
Código:
#header {
display:none;
}
#title {
display:none;
}
#nav_container {
display:none;
}

Estos 3 códigos son para quitar el menú, titulo y encabezado que trae por defecto la plantilla. ¡Pero atención! Debes chequear que ni el CSS que acabas de pegar ni el HTML que vamos a pegar más tarde contengan las etiquetas "header", "title" ni "nav_container" ya que no se mostrarán por el código que acabamos de introducir. En caso de que si estén deber cambiarles de nombre tanto en el CSS (por ejemplo ponerle header2 en vez de header) como en el HTML.
Para terminar con el código CSS debes reemplazar las direcciones de las imágenes que acabas de subir por las que están incompletas, por ejemplo si te encuentras con algo así en tu CSS:
Código:
background: url(images/fondo.png);

Deberás reemplazar images/fondo.png por la URL correspondiente a la imagen subida a Internet, por ejemplo:
Código:
background: url(http://reg.imageshack.us/en/fondo.png);



4º Paso: Define el contenido que irá por encima y por debajo de la página.
Estas es una de las partes que más conflictos trae ya que no todos los diseños están construidos de la misma manera, pero si lo piensas de la siguiente manera será muy sencillo.

A- Identifica el espacio donde se ubicará el contenido de tus páginas (las que editas desde "Controlar páginas"). En nuestro ejemplo es este:



B- Dirígete al archivo .html de tu plantilla (en nuestro caso es index.html). Solo utilizaremos los códigos que estén escritos entre las etiquetas <body> y </body> por lo tanto es importante que encuentres esos 2 códigos entre todos los demás ya que el resto no servirá. Ahora debes buscar entre todos los códigos que están entre <body> y </body> la parte que corresponde al contenido que identificamos en el paso anterior. En mi caso buscaré el texto "Welcome to equivalency".



C- Todo lo que se encuentre antes del texto "Welcome to equivalency" lo vamos a pegar en "Editar diseño"/"Configuraciones avanzadas"/"Texto por encima de la página" y todo lo que sobra en "Texto por encima de la página" sin incluir las etiquetas <body> y </body>. En mi caso sería:

En "Texto por encima de la página":
Código:
   <div id="header">
      <div id="logo">
         <h1><a href="#">Equivalency </a></h1>
         <p> Template design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
      </div>
      <div id="menu">
         <ul>
            <li class="first current_page_item"><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
      </div>
   </div>
   <!-- end #header -->
   <div id="page">
      <div id="page-bgtop">
         <div id="page-bgbtm">
            <div id="content">
               <div class="post">


En "Texto por debajo de la página":
Código:
</div>
            <!-- end #content -->
            <div id="sidebar">
               <ul>
                  <li>
                     <div id="search" >
                        <form method="get" action="#">
                           <div>
                              <input type="text" name="s" id="search-text" value="" />
                              <input type="submit" id="search-submit" value="GO" />
                           </div>
                        </form>
                     </div>
                     <div style="clear: both;"> </div>
                  </li>
                  <li>
                     <h2>Aliquam tempus</h2>
                     <p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>
                  </li>
                  <li>
                     <h2>Categories</h2>
                     <ul>
                        <li><a href="#">Aliquam libero</a></li>
                        <li><a href="#">Consectetuer adipiscing elit</a></li>
                        <li><a href="#">Metus aliquam pellentesque</a></li>
                        <li><a href="#">Suspendisse iaculis mauris</a></li>
                        <li><a href="#">Urnanet non molestie semper</a></li>
                        <li><a href="#">Proin gravida orci porttitor</a></li>
                     </ul>
                  </li>
                  <li>
                     <h2>Blogroll</h2>
                     <ul>
                        <li><a href="#">Aliquam libero</a></li>
                        <li><a href="#">Consectetuer adipiscing elit</a></li>
                        <li><a href="#">Metus aliquam pellentesque</a></li>
                        <li><a href="#">Suspendisse iaculis mauris</a></li>
                        <li><a href="#">Urnanet non molestie semper</a></li>
                        <li><a href="#">Proin gravida orci porttitor</a></li>
                     </ul>
                  </li>
                  <li>
                     <h2>Archives</h2>
                     <ul>
                        <li><a href="#">Aliquam libero</a></li>
                        <li><a href="#">Consectetuer adipiscing elit</a></li>
                        <li><a href="#">Metus aliquam pellentesque</a></li>
                        <li><a href="#">Suspendisse iaculis mauris</a></li>
                        <li><a href="#">Urnanet non molestie semper</a></li>
                        <li><a href="#">Proin gravida orci porttitor</a></li>
                     </ul>
                  </li>
               </ul>
            </div>
            <!-- end #sidebar -->
            <div style="clear: both;"> </div>
         </div>
      </div>
   </div>
   <!-- end #page -->
</div>
<div id="footer">
   <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->


Esta imagen te dejará mucho más claro como funciona "Texto por encima de la página" y "Texto por debajo de la página":




D- Después de probar como se ve tu diseño deberás eliminar todo lo que es el texto que viene escrito por defecto para que ese espacio esté ocupado solamente por el contenido de "Controlar páginas". Si tu diseño tiene box o sidebar deberás editar su contenido desde "Texto por encima (...)" o "Texto por debajo (...)" dependiendo de donde se encuentre el código.


- Conclusión:
Como verán es todo muy relativo, pero solo debes apuntar a practicar tu habilidad en estos puntos:
- Identificar URLs de imágenes incompletas para reemplazarlas por URLs correspondientes a la ruta en Internet.
- Identificar el espacio de contenido para poder hacer la división de "Texto por encima (...)" y "Texto por debajo (...)".
- Probar borrando las partes inútiles de una en una para no borrar partes que deformen nuestro diseño.


Manipular códigos les hará mejorar sus habilidades para conseguir entender lo que estamos haciendo y poder personalizarlo a nuestro gusto mediante un método rápido y efectivo. Asi que solo me resta decirles ¡a practicar!.

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui


Ultima edición por tokarg el Mie Dic 05, 2012 10:22 pm; editado 2 veces
Mensaje31-12-2010, 22:43 (UTC)    
Título del mensaje:

Buen tutorial, y bien explicado algo dificil de explicar :D
______________
Entra-yaa
Doy soporte por mp
Doy soporte por mail marco.fbb@gmail.com
Mensaje31-12-2010, 22:53 (UTC)    
Título del mensaje:

Excelente tutorial, lo leí todo y está muy completo. Concuerdo con @entra-yaa, es muy complicado de explicar, porque como lo dijiste en el tutorial, el cuarto paso es mayormente el mas confuso, por mas que sea muy fácil.
Mensaje31-12-2010, 22:58 (UTC)    
Título del mensaje:

wow, buena explicacion :D
______________
PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG!
Mensaje31-12-2010, 23:34 (UTC)    
Título del mensaje:

Muy detallado y completo, aunque como tu y algunos usuarios lo sabemos no todas las estructuras son iguales, pero con un poco de paciencia, tiempo y dedicacion se puede adaptar sea cual sea

Buen Tutorial Sr. Tokarg

Salu2
______________
Miguel García | Desarrollador web freelance
Mensaje31-12-2010, 23:41 (UTC)    
Título del mensaje:

Te felicito hiciste un buen tutorial me sorprendio, creo que los subire a mi web.
______________
Mensaje01-01-2011, 00:12 (UTC)    
Título del mensaje:

muy buen explicado...Sigue asi






Mensaje01-01-2011, 00:55 (UTC)    
Título del mensaje:

Hoolaa

Muy bueno el Tuto y Bien explicado =D
______________
Mensaje01-01-2011, 03:57 (UTC)    
Título del mensaje:

Exelente tutorial.
______________
Twitter: @Giobuscador
Mensaje01-01-2011, 18:30 (UTC)    
Título del mensaje:

Ezta excelente y muy entendible!!!
______________


https://radiovijaer.es.tl/
Mensaje01-01-2011, 18:45 (UTC)    
Título del mensaje:

Muy Bueno El Tutorial
______________
¡La Banda Del InerPool - LBIP!

Web: http://lbip.es.tl/
Mensaje02-01-2011, 02:26 (UTC)    
Título del mensaje:

xD, medio tarde lo publicaste en PWG tokarg. En tu foro ya no se hace cuanto tiempo que esta
Esta bien explicado, después como dijiste es sólo cuestión de práctica.
______________


Ultima edición por kilometro6 el Sab Ene 01, 2011 10:26 pm; editado 1 vez
Mensaje02-01-2011, 06:02 (UTC)    
Título del mensaje: Agradecimientos!!!

Hola Tokarg...qué puedo decir...solamente que s te agradece tu aporte, la verdad que nos has ayudado un buen... ami se me complicaba mucho este asunto...jeje! Xd!! 100 Puntos!!
Mensaje02-01-2011, 09:37 (UTC)    
Título del mensaje:

Que bueno que les sirva! Espero pueda cumplir con el objetivo y hacerles aunque sea un poco más fácil la tarea

Saludos!
Mensaje02-01-2011, 10:13 (UTC)    
Título del mensaje:

buenisimo tutorial , en este tema de adaptar plantillas no hay muchos tutoriales, buenisimo aporte

salu2
______________


Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group