BuenosAiresLibre Wiki BALLS Mapa Galería Chat

Template Web

Contents

  1. Template Web
    1. Diseño
    2. Estructura de directorios y archivos
      1. Permisos
    3. Código fuente
      1. index.html
      2. base.css
    4. Imágenes
      1. banner-logo.png
      2. favicon.ico
      3. bottom_left.png
      4. bottom.png
      5. bottom_right.png
      6. left.png
      7. right.png
      8. top_left.png
      9. top.png
      10. top_right.png
    5. Captura de pantalla
    6. Implementación
    7. Colaboración
    8. Descarga

Con el objetivo de que todos los desarrollos utilizados en BuenosAiresLibre tengan un aspecto visual similar, en esta página podrás encontrar un template/modelo para que lo puedas utilizar en cualquier proyecto web que estés elaborando para BAL.

Se pretende implementar este template en todos los desarrollos existentes: BALLS, Mapa, Obelisco/Docs/PortalCautivo, etc.

Diseño

Este diseño fue realizado gracias a la colaboración de:

Estructura de directorios y archivos

  • css/

    • Las hojas de estilo deben estar dentro de este directorio.
    • Archivos incluídos con el template:

      • base.css

  • img/

    • Todas las imágenes deben estar dentro de este directorio.
    • Archivos incluídos con el template:

      • box/

        • green/

          • bottom_left.png

          • bottom.png

          • bottom_right.png

          • left.png

          • right.png

          • top_left.png

          • top.png

          • top_right.png

      • favicon.ico

      • banner-logo.png

  • js/

    • De necesitar incluír archivos con código javascript, los mismos deben estar dentro de este directorio.

  • index.html

Permisos

  • Todos los archivos y directorios deben tener como owner el mismo usuario con el que se corre el servidor HTTP.

  • Todos los directorios deben tener permisos 755.

  • Todos los archivos regulares (.css, .js, .html, etc) e imágenes deben tener permisos 644.

Código fuente

index.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Título - BuenosAiresLibre</title>
        <link rel="icon" type="image/png" href="img/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
        <table class="body_container" border="0" cellspacing="0" cellpadding="0">
        <tr>
                <td class="top_container">
                        <div class="top_container_login"><strong>Login: </strong>aaa</div>
                        <div class="top_container_title"></div>
                        <div class="top_container_menu">
                                <a href="http://www.buenosaireslibre.org/" class="top_menu_option top_menu_option_selected">BuenosAiresLibre</a>
                                <a href="http://wiki.buenosaireslibre.org/" class="top_menu_option">Wiki</a>
                                <a href="http://balls.buenosaireslibre.org/" class="top_menu_option">BALLS</a>
                                <a href="http://mapa.buenosaireslibre.org/" class="top_menu_option">Mapa</a>
                                <a href="http://galeria.buenosaireslibre.org/" class="top_menu_option">Galer&iacute;a</a>
                                <a href="www.buenosaireslibre.org/irc/client/pjirc_2_2_1_bin/NormalApplet.html" class="top_menu_option">Chat</a>
                                <a href="#" class="top_menu_option">Ayuda</a>
                        </div>
                        <div class="top_delimiter"></div>
                </td>
        </tr>
        <tr>
                <td class="main_container">
                        <table border="0" cellpadding="0" cellspacing="0" id="content">
                        <tr>
                                <td>
                                        <div class="box_container">
                                                <table border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                        <td class="box_corner_top_left"></td>
                                                        <td class="box_border_top"></td>
                                                        <td class="box_corner_top_right"></td>
                                                </tr>
                                                <tr>
                                                        <td class="box_border_left"></td>
                                                        <td class="box_content">
                                                                <span class="box_title">Ejemplo Tabla</span>
                                                                <br />El texto va acá.
                                                                <br />
                                                                <br />Más texto...
                                                                <br />
                                                        </td>
                                                        <td class="box_border_right"></td>
                                                </tr>
                                                <tr>
                                                        <td class="box_corner_bottom_left"></td>
                                                        <td class="box_border_bottom"></td>
                                                        <td class="box_corner_bottom_right"></td>
                                                </tr>
                                                </table>
                                        </div>
                                </td>
                        </tr>
                        </table>
                </td>
        </tr>
        <tr>
                <td class="bottom_container">
                        <div class="bottom_footer">
                                Red digital comunitaria de la Ciudad Autonoma de Buenos Aires y alrededores
                        </div>
                </td>
        </tr>
        </table>
</body>
</html>

base.css

/*
        BAL TemplateWeb - Base CSS
        css/base.css
*/
/*#### GENERAL */
body
{
        background-color: #e7e7e7;
        font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
        color: #666666;
        font-size: 12px;
        margin: 0px 0px 0px 0px;
}
table
{
        font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
}
.body_container
{
        width: 757px;
        height: 500px;
        background-color: #ffffff;
}
/*##### TOP */
.top_container
{
        background: url(../img/banner-logo.png) no-repeat top left #e7e7e7;
        background-position: 12px 7px;
        vertical-align: top;
        text-align: left;
}
.top_container_login
{
        padding-right: 10px;
        padding-top: 2px;
        height: 16px;
        font-size: 11px;
        text-align: right;
        color: #4478b1;
}
.top_container_title
{
        padding-left: 10px;
        height: 67px;
        font-size: 28px;
        font-weight: bold;
        color: #4478b1;
}
.top_container_menu
{
        padding-top: 5px;
        padding-bottom: 0px;
        text-align: right;
        font-weight: bold;
}
.top_menu_option
{
        font-size: 14px;
        text-align: center;
        padding-left: 2px;
}
a.top_menu_option:link, a.top_menu_option:visited, a.top_menu_option:active
{
        text-decoration: none;
        color: #006a9d;
        text-align: center;
        border-right: #e7e7e7 1px solid;
        border-left: #e7e7e7 1px solid;
        border-top: #e7e7e7 1px solid;
        padding-right: 3px;
}
a.top_menu_option:hover
{
        text-decoration: none;
        color: #ffffff;
        text-align: center;
        background-color: #81bbf2;
        border-right: #cccccc 1px solid;
        border-left: #cccccc 1px solid;
        border-top: #cccccc 1px solid;
        border-bottom: #81bbf2 1px solid;
        padding-right: 3px;
}
a.top_menu_option_selected:link, a.top_menu_option_selected:visited, a.top_menu_option_selected:active
{
        text-decoration: none;
        color: #ffffff;
        text-align: center;
        background-color: #81bbf2;
        border-right: #cccccc 1px solid;
        border-left: #cccccc 1px solid;
        border-top: #cccccc 1px solid;
        border-bottom: #81bbf2 1px solid;
        padding-right: 3px;
        padding-left: 3px;
}
a.top_menu_option_selected:hover
{
        text-decoration: none;
        color: #000000;
        text-align: center;
        background-color: #81bbf2;
        border-right: #e7e7e7 1px solid;
        border-left: #e7e7e7 1px solid;
        border-top: #e7e7e7 1px solid;
        border-bottom: #81bbf2 1px solid;
        padding-right: 3px;
        padding-left: 3px;
}
.top_delimiter
{
        background-color: #81bbf2;
        height: 5px;
        padding-top: 0px;
}
/*##### MAIN */
.main_container
{
        text-align: center;
        vertical-align: top;
        height: 100%;
}
/*##### BOTTOM */
.bottom_container
{
        text-align: left;
        vertical-align: top;
        height: 20px;
}
.bottom_footer
{
        font-size: 12px;
        background-color: #666666;
        color: #ffffff;
        text-align: left;
        padding-left: 5px;
        padding-right: 5px;
        height: 20px;
}
/*##### BOX - ROUNDED CORNERS */
.box_container
{
        margin: 10px;
        text-align: center;
        width: 486px;
}
.box_container table
{
        width: 100%;
        text-align: center;
}
.box_content
{
        background-color: #b1cbca;
        color: #333333;
        font-size: 12px;
        text-align: justify;
        height: 100%;
}
.box_title
{
        color: #006699;
        font-size: 20px;
        padding-bottom: 3px;
        padding-top: 0px;
}
.box_corner_top_left
{
        background: url(../img/box/green/top_left.png) no-repeat;
        width: 10px;
        height: 10px;
}
.box_corner_top_right
{
        background: url(../img/box/green/top_right.png) no-repeat;
        width:10px;
        height:10px;
}
.box_border_top
{
        background: url(../img/box/green/top.png) repeat-x;
        height:10px;
}
.box_corner_bottom_left
{
        background: url(../img/box/green/bottom_left.png) no-repeat;
        width:10px;
        height:10px;
}
.box_corner_bottom_right
{
        background: url(../img/box/green/bottom_right.png) no-repeat;
        width:10px;
        height:10px;
}
.box_border_bottom
{
        background: url(../img/box/green/bottom.png) repeat-x;
        height:10px;
}
.box_border_left
{
        background: url(../img/box/green/left.png) repeat-y;
}
.box_border_right
{
        background: url(../img/box/green/right.png) repeat-y;
}

Imágenes

banner-logo.png

favicon.ico

favicon.ico

bottom_left.png

bottom_left.png

bottom.png

bottom.png

bottom_right.png

bottom_right.png

left.png

left.png

right.png

right.png

top_left.png

top_left.png

top.png

top.png

top_right.png

top_right.png

Captura de pantalla

20070305_template.png

Implementación

  • El template incluye una tabla con bordes redondeados de ejemplo.

  • El contenido HTML de tu aplicación debería incluírse dentro del contenedor <div class="box_container">.

  • Si necesitás agregar más clases CSS, creá una nueva hoja de estilos para tu aplicación, y al archivo dale un nombre bien representativo.

  • Siempre validá tu código resultante (HTML/XHTML y CSS) en http://www.w3.org:

  • Por lo anterior, y para asegurar compatibilidad entre distintos browsers, intentá seguir sólo los estándares documentados en http://www.w3.org.

W3xhtmlValid.png W3CCSSValid.png

Colaboración

  • Se necesita de tu colaboración para mejorar esta página wiki, el template e implementarlo en todas las aplicaciones existentes y futuras.

Descarga

template-web.tar.gz

Wiki: GrupoDeDesarrollo/TemplateWeb (last edited 2008-09-28 09:18:23 by localhost)

USLA