Hablemos de Menus Comunes

Rafael · #1 (**permalink**) 24/04/2013, 15:08

(Estoy armando un tema, a ver que tal queda, Lo voy a ir editando y modificando.

Métodos para integrar un menú común en nuestro sitio web.
Cuando estamos iniciando en diseño de páginas web, nos topamos con el problema de que cuando nuestro sitio va aumentando en cantidad de páginas, actualizar el menú que se repite en todo el sitio puede ser complicado.

Presento aquí un breve resumen de las alternativas que hay, con algunos comentarios, pros y contras.

Este tema lo iré editando conforme a las opiniones y correcciones que ustedes vayan haciendo. Gracias.

Rafael · #2 (**permalink**) 24/04/2013, 15:08

1) No usar Frames

Esta primera opción la dejo como histórico, ya que, aunque fué muy socorrida hace años, actualmente es obsoleta.

Este método consiste en utilizar un archivo contenedor, con etiquetas especiales <frameset> y dos (o más) archivos html. Uno con el menú y otros con el contenido.

A medida que uno activa un link en el archivo menú, el contenido se despliega en el otro frame.

Este frame debe de tener un "name" y los links deben tener el atributo target, con el nombre del frame destino.

Pros:

Fácil de implementar
El menú se mantiene muy consistente, incluso cuando es del tipo "árbol" ya que este menú no se recarga.
Una aplicación puede ser por ejemplo un manual de uso de un software, donde los temas son muchos y hace falta tener a la vista este menú.

Contras:

No se puede marcar un tema en los favoritos del navegador. Solamente el primer tema que venga por defecto.
Si un motor de búsqueda indexa el contenido, al activar la liga, sólo se abrirá la página del contenido, sin el menú.
Obsoleta Las etiquetas frameset ya no aparecen en la especificación Html5.

_____________________
2) No usar Flash

Esta también fué bastante utilizada, pero tampoco se recomienda ya, su uso.

La idea era tener un solo archivo swf con el menú, y poner este archivo flash en cada una de nuestras páginas. Cuando se necesitaba actualizar el menú, bastaba con actualizar el archivo de flash, y cada página, al ser desplegada, llamaría esta versión actualizada del menú.

Pros:

Contras: Flash es una tecnología que no se va a desarrollar más y no es soportada por algunos navegadores y dispositivos.

_____________________
3) No usar Iframes

Esta es una opción que a primera vista es semejante al uso de frames. Los iframes, a diferencia de los frames siguen vigentes, aunque son recomendados para otro tipo de aplicaciones, tales como ligar un recurso especial, a nuestro sitio, por ejemplo cargar un mapa o video desde un sitio externo.

Utilizarlo solamente para tener un menú común no es recomendable.

Código HTML:

Ver original<a href="Tema-1.html" target="Contenido">Tema 1</a>
<a href="Tema-2.html" target="Contenido">Tema 2</a>
<iframe id="Contenido" href="ContenidoInicial.html"></iframe>

Pros:

Fácil de implementar
El menú se mantiene muy consistente, incluso cuando es del tipo "árbol" ya que este menú no se recarga.

Contras:

No se puede marcar un tema en los favoritos del navegador. Solamente el primer tema que venga por defecto.
Si un motor de búsqueda indexa el contenido, al activar la liga, sólo se abrirá la página del contenido, sin el menú.
Si el contenido no cabe en el espacio asignado, se desplegarán barras de desplazamiento adicionales, o el contenido aparecerá cortado.

Rafael · #3 (**permalink**) 24/04/2013, 15:09

4) JavaScript

Utilizar JavaScript. En algunos casos es necesario desactivarlo y entonces la navegación se vuelve nula.

Código Javascript:

Ver originalCodigo

5) Ajax

Ajax es una variante de Javascript.

Código Javascript:

Ver originalCodigo

6) JQuery

prueba.html:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<body>
 
<h1>Muestra de Include con jq</h1>
 
<div id="muestra"></div>
</body>
<html>

script:

Código Javascript:

Ver original$(function(){
      $("#muestra").load("test.html"); 
    });

test.html:

Código HTML:

Ver original<h1>ESTO ESTA INCLUIDO CON JQ</h1>
<hr>
<p>Esto será un header</p>

Rafael · #4 (**permalink**) 24/04/2013, 15:09

Includes o plantillas

Utilizar includes o plantillas, con un lenguaje del lado del servidor es la manera más adecuada de tener elementos comunes en un sitio robusto. Super útiles en un sitio con páginas html e imprescindibles en un sitio con bases de datos.

La diferencia básica la podríamos entender como que un include es meter un pedazo de codigo en tu documento principal. Y en la plantilla es que la plantilla recibe datos desde fuera para llenarse y desplegarse.

7) Includes (php, ssi y otros lenguajes)

Ilustro el lenguaje que conozco un poquito, php, pero la idea básica es la misma para otros lenguajes.

Cabe mencionar que algunos servidores traen una función parecida directamente, sin necesidad de pasar por un lenguaje de programación como php, estos son Server Side Includes (ssi).

Código PHP:

Ver original<?php
include 'menu.html';
?>

_____________________
8) Plantillas

Código PHP:

Ver originalCodigo

9) Plantillas combinadas con includes

Rafael · #5 (**permalink**) 24/04/2013, 15:19

¿Como utilizar los includes?

A diferencia de un archivo con extensión html, donde le podemos hacer click y este se abrirá en nuestra computadora, los includes necesitan unos requisitos.

1) Estar en un servidor

2) Tener la extensión adecuada para que sea interpretado por el servidor (ó algún lenguaje del lado del servidor). (Una explicación de qué es un servidor y qué es un lenguaje del lado del servidor está acá: http://www.forosdelweb.com/f91/hable...guajes-698777/)

---

Si tenemos contratado algún hospedaje en algún lado, probablemente ellos ya tienen además instalado digamos php.

Si lo queremos hacer en nuestra computadora, lo más rápido es usar un instalador de Apache+Php(+MySql) Como esto: http://www.wampserver.com/en/ o http://www.easyphp.org/

---

Después tu archivo se tendrá que llamar ahora Ejemplo.php en lugar de Ejemplo.html

Pero adicionalmente los archivos deberán estar en cierto directorio específico dependiendo de dónde y cómo hayas configurado tu Apache+Php+MySql.

Al escribir ahora por ejemplo en tu navegador: 127.0.0.1 el navegador será engañado y esa carpeta la desplegará como si estuviera viéndola sobre internet, o sea, no viendo el archivo en tu disco duro, sino en el servidor que ahora tienes instalado.

Rafael · #6 (**permalink**) 24/04/2013, 15:40

Voy a estar editando esto. Sientanse libres de aportar/criticar.

caricatos · #7 (**permalink**) 24/04/2013, 15:55

Hola:

Si da su permiso, maestro... yo desaconsejaría javascript porque puede deshabilitarse... y la opción ajax la condicionaría a que fuera accesible (por la razón anterior). -se nota que modero por javascript-

Una alternativa que es lo último que he probado es mediante xml, pero sería muy difícil de explicar

Me interesa el tema, pero no termino de entender tu intención.

Saludos

Rafael · #8 (**permalink**) 24/04/2013, 17:25

Solo es mostrar brevemente las diferentes alternativas para los nuevos.

Ultimamente he estado viendo varios posts de gente que usa por ejemplo iframes para sus menús. Quiero hacer notar que es una opción, pero hay mejores.

Triby · #9 (**permalink**) 24/04/2013, 19:43

Cita:

Iniciado por Rafael

Contras de menú en frames: No se puede marcar un tema en los favoritos del navegador, ni puede ser indexada por buscadores, ya que la página contenedora en realidad está vacía.

Esto no es correcto, ya que los motores de búsqueda analizan cada enlace (incluidos los de frames) y van agregando el contenido que encuentren. De hecho, el problema sería que al llegar desde un buscador, sólo se abrirá la página del contenido, sin el menú.

Se supone que el contenido de los flash es el que no puede ser indexado, aunque hay formas de lograrlo, pero no me gusta flash para webs y nunca investigué al respecto.

Rafael · #10 (**permalink**) 24/04/2013, 19:55

OK. Voy a ir corrigiendo todas esas observaciones.

#11 (**permalink**) 25/04/2013, 08:28

Cita:

Iniciado por Triby

Esto no es correcto, ya que los motores de búsqueda analizan cada enlace (incluidos los de frames) y van agregando el contenido que encuentren. De hecho, el problema sería que al llegar desde un buscador, sólo se abrirá la página del contenido, sin el menú.

Si bien esto es cierto, la página indexada será la de contenido, no la contenedora. Por lo tanto, la página a la que accederá el usuario directamente desde el buscador no contendrá el menú

razpeitia · #12 (**permalink**) 25/04/2013, 09:37

Estoy impaciente por ver las plantillas de python.

Triby · #13 (**permalink**) 25/04/2013, 11:56

AlvaroG, creo que dijimos lo mismo, pero tú fuiste más claro.

Rafael, respecto al comentario de razpeitia, creo que se podría englobar ejemplos de menús con includes o plantillas para lenguajes del lado del servidor (Asp, Php, Python, Ruby, Perl, etc.), porque tratar de cubrir todos será un trabajo bastante pesado.

Por cierto, yo dejaría aparte SSI, que no es realmente programación, sino una característica disponible/configurable en algunos servidores.

Rafael · #14 (**permalink**) 21/05/2013, 09:23

Tengo unas dudas conceptuales.

Yo separaría Includes de plantillas en esta explicación, porque en includes el documento principal recibe el pedazo include

Y en una plantilla el documento principal es la plantilla, y recibe más bien datos.

Estoy inventando una categoría Plantillas más includes, para ilustrar las posibilidades.

De hecho Razp así entendí el día que me diste la capacitación. ¿Cómo ven?

Triby, de hecho tengo la duda de qué lenguajes se parecen a otros, por ejemplo entiendo que la estructura de includes es parecida a php y creo perl, pero la lógica de python la entiendo muy diferente... Ruby ¡NI IDEA!

Rafael · #15 (**permalink**) 18/12/2014, 04:21

Quisiera retomar el tema ya que la gente sigue queriendo usar iframes

1) ¿Alguien podría ponerme un diagrama de las plantillas python por ejemplo?
2) ¿Y ponerme el código equivalente al include de asp, perl, py o lo que sea que se use?
3) ¿Y el equivalente al get+swich de los lenguajes respectivos?

O si no me quedo con el poquito que se de php

razpeitia · #16 (**permalink**) 03/02/2015, 23:42

Cita:

Iniciado por Rafael

1) ¿Alguien podría ponerme un diagrama de las plantillas python por ejemplo?

Claro, python tiene un monton de template engines. Pero usare el que trae django, ya que son bastantes populares.

De hecho, como tengo un montón de flojera pondré uno que ya estoy usando en alguno de mis proyectos.

base.html

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{{ site_name }} :: {% endblock title %}</title>
 
    {% block css %}
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    {% endblock css %}
 
  </head>
  <body>
 
    <div class="container">
      {% include 'website/header.html' %}
 
      {% include 'website/navbar.html' %}
 
      {% block content %}{% endblock %}
 
      {% include 'website/footer.html' %}
    </div>
 
    {% block javascript %}
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    {% endblock javascript %}
  </body>
</html>

header.html

Código HTML:

Ver original{% load static from staticfiles %}
 
<div class="row">
  <a href="{% url 'home' %}"><img class="center-block img-responsive" src="{% static 'website/header.png' %}" alt="alguna descripcion"/></a>
</div>

footer.html

Código Python:

Ver original<hr/>
<div class="row">
  <div class="col-md-4">
    <h1 class="text-center">Titulo 1</h1>
    <p>Parrafo 1</p>
  </div>
 
  <div class="col-md-4">
    <h1 class="text-center">Titulo 2</h1>
    <p>Parrafo 2</p>
  </div>
 
  <div class="col-md-4">
    <h1 class="text-center">Titulo 3</h1>
    <p>Parrafo 3</p>
  </div>
 
 
</div>
<hr/>
<div class="footer">
  <p class="text-center">© {{ company_name }} {{company_start_year }} - {% now "Y" %}</p>
</div>

navbar.html

Código Python:

Ver original<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Cambiar navegación</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
 
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        {% for nav in nav_list %}
            <li class="{% if nav.is_active %}active{% endif %}"><a href="{{ nav.url }}">{{ nav.text }}</a></li>
        {% endfor %}
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Y mas o menos este es el esquema que uso, que template tags, modelos, librerías y otras cosas use para hacer lo que debo de hacer, eso es otro tema. Pero para que se den una idea mas o menos esto lo que ocupo para mis templates base.

Y para usarlos solo hago.
product_list.html

Código HTML:

Ver original{% extends 'website/base.html' %}
 
{% block title %}{{ block.super }} Product List{% endblock title %}
 
{% block content %}
    {% for product in product_list %}
        {{ product }}
    {% endfor %}
{% endblock content %}

pzin · #17 (**permalink**) 10/02/2015, 15:51

En rails es bastante parecido a Python, PHP y demás:

application.html.slim

Código slim:

Ver originaldoctype html
html lang="en" 
  head
 
    meta charset="utf-8"
    meta content="IE=edge" http-equiv="X-UA-Compatible"
    meta content="width=device-width, initial-scale=1" name="viewport"
    title = content_for?(:title) ? yield(:title) : @site_name
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
      
  body
 
    .container
 
      = render 'layouts/header'
      = yield
      = render 'layouts/footer'
 
    = javascript_include_tag 'application', 'data-turbolinks-track' => true

layouts/_header.html.slim

Código slim:

Ver originalnav.navbar.navbar-default
  .container-fluid
    / Brand and toggle get grouped for better mobile display
    .navbar-header
      button.navbar-toggle.collapsed data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button" 
        span.sr-only Cambiar navegación
        span.icon-bar
        span.icon-bar
        span.icon-bar
    / Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      ul.nav.navbar-nav
        - for nav in nav_list
          li class=('active' if nav.is_active)
            = link_to nav.text, nav.url

layouts/_footer.html.slim

Código slim:

Ver originalhr
.row
  .col-md-4
    h1.text-center Titulo 1
    p Parrafo 1
  .col-md-4
    h1.text-center Titulo 2
    p Parrafo 2
  .col-md-4
    h1.text-center Titulo 3
    p Parrafo 3
hr
.footer
  p.text-center= "©  #{company_name} #{company_start_year} - #{Time.now.year}

products/index.html.slim

Código slim:

Ver original- for product in @products
  article
    h1 = product.name

Cogiendo el código del compañero.

Por lo que igual no hace falta indicar de toooodos los lenguajes, ya que el principio —que es de lo que trata— es parecido siempre.

razpeitia · #18 (**permalink**) 10/02/2015, 17:12

@pzin

Te falto como heredar de base.

pzin · #19 (**permalink**) 10/02/2015, 18:11

Base es application ¿no? No sé cómo funciona Django, en rails la vista la carga ese yield. application.html.slim es un layout (template).

razpeitia · #20 (**permalink**) 10/02/2015, 21:32

Si el base.html es application.html.slim, pero donde esta product_list.html?

pzin · #21 (**permalink**) 11/02/2015, 08:46

Cita:

Iniciado por razpeitia

Si el base.html es application.html.slim, pero donde esta product_list.html?

Lo pongo, aunque realmente sigue todo igual. Sé que en django las plantillas funcionan medio raras. Creo que era diferente el concepto MVC. Pero bueno, como digo, la esencia no cambia el código de lo demás.