tag envoltorio :)

memoadian · #1 (**permalink**) 22/02/2012, 14:20

Saludos gente, resulta que hoy me puse a pensar en algo, generalmente yo usaba un div (y sigo usando) que envuelve toda mi web, el famos wrapper que hace que el header, main, y fooetr esten dentro, esto por el tema del centrado de la web.

Bien en html5 uso algo así:

Código HTML:

Ver original<body>
    <div class="wrapper">
        <header>
            <h2>WEB</h2>
        </header>
        <section>
        </section>
        <aside>
        </aside>
        <footer></footer>
    </div>
</body>

no se si exista una mejor forma de hacer este envoltorio, se que muchos dirán no lo usespero a veces si se requiere.

usarian section?

gracias por sus opiniones. Por ahi me sorprende que leyendo tantas estructuras para saber las más comunes los de HTML5 no crearan <wrapper>

memoadian · #2 (**permalink**) 22/02/2012, 23:46

Plop nadie tiene una miserable opinión? :O

Panino5001 · #3 (**permalink**) 23/02/2012, 01:26

Mi opinión es que es innecesario (para wrapper ya tenés el tag body).
Igualmente considerá que mi opinión es la de un troll que piensa que html5 es un desastre (un caos donde ni siquiera se ponen de acuerdo los que lo concibieron en cómo escribir el markup (es <br> o <br />?), donde las capas de presentación y comportamiento están totalmente mezcladas -cómo es posible desde css agregar contenido, por ejemplo?-) que ojalá mejore con html6

Esa es mi opinión, pero si no te gusta, tengo otra, que he meditado cuidadosamente: 42

zanguanga · #4 (**permalink**) 23/02/2012, 07:17

Cita:

Iniciado por Panino5001

Mi opinión es que es innecesario (para wrapper ya tenés el tag body)

Coincido totalmente, en mi opinión se trata de eliminar todo lo que sea innecesario.

Aunque si necesitas forzosamente una capa para ajustar un ancho o un fondo, podría ser algo así

Código:

<section id= "wrapper">

emprear · #5 (**permalink**) 23/02/2012, 09:51

No estoy de acuerdo, se ha instalado por ahi la idea de que el uso de divs es innecesario. Pero puede servir como un elemento auxiliar para la maquetación, es cierto que las etiquetas semánticas pueden se estilizadas y posicionadas, si quiero hacer un diseño centrado de 960px bien puede hacerse

<div style="width: 960px; margin: 0 auto;">
<header>
</header>
<section>
</section
<footer>
</footer>
</div>

Y si ubiese un aside a manera de barra lateral?
centrar el header? y tener que poner las section dentro d este?
posicionar por separado header section footer?

todo depende del conjunto y del contexto, pero hacer de esto una norma me suena exagerado.Hace unos días @rafael propuso un ejercicio para intercambiar experiencias, les recomiendo que lo analicen
http://www.forosdelweb.com/f175/jugu...1/#post4125842

@Panino5001
sin llegar ha decir que es un desastre, coincido que mucho de lo que representa html5, es todavía muy confuso, Yo ya me decidí por el uso de este, pero creo que en definitiva es una apuesta por el momento.

Saludos

memoadian · #6 (**permalink**) 23/02/2012, 10:22

vaya que bueno que opinan, y si coincido en parte con panino, por que la verdad que implementar html5 es bastante más rudo que cuando si implemento xhtml y css2, por lo que muchos hacen esto y otros aquello y nadie esta mal XD.

yo también ya "trato" de hacer todo con html5 pero apenas ayer que maquetaba un sitio me puse a pensar si esto que hago esta bien o mal ;) solo el tiempo lo dirá.

y bueno también lo que dice zanguanga es muy válido si te apegas totalmente a html5, un section, pero como que no esta hecho para eso. Fue mi primera opción también pero como emprear ahora creo que los divs pueden ser usados como un buen recurso. al final de cuentas parece que da lo mismo.

Rafael · #7 (**permalink**) 24/02/2012, 04:25

Mis 2 centavos.

Coincido con Emprear. No se trata de eliminar lo que no es necesario per sé*. Se trata de dar sentido semántico... yo sé que estamos abusando el término, pero no lo estamos analizando a profundidad.

Básica y coloquialmente es dar sentido linguístico a lo que necesita tener sentido linguístico. Pero hay elementos constructivos que no tienen que tener sentido linguístico, el sentido que tienen es constructivo en términos de estructura de apoyo, casi siempre apoyo para la construcción visual.

Un warper no tiene ese sentido, por lo que no debería querérsele asignar con un section. Es un div y punto. Y de que los warpers son necesarios, son necesarios en algunos casos por el momento, debido como todo, a deficiencias en los navegadores, pero probablemente también a el modo lógico de pensar, tal vez heredado del diseño de publicaciones impresas. Eso sería interesante de evaluar.

Quizá un warper completo no sea necesario, para eso coincido que está el body, pero warpers parciales, como el usado por http://www.cssstickyfooter.com/ debería ser implementado con divs. Este caso del footer todavía es necesario, hasta que los navegadores lo peguen abajo de manera lógica.

Rafael · #8 (**permalink**) 24/02/2012, 04:41

* Me auto cito: "No se trata de eliminar lo que no es necesario per sé"

Esto es un asunto aparte del warper. Se están comentiendo muchos errores incluso al asignar "class" e "id" con el fin de identificar objetos.

Sé que este ejemplo de emprear lo hizo por practicidad (en lugar de asignarle el class y pegar el css por separado)
Lo pongo solo como ejemplo de lo que comunmente hacemos.
<div style="width: 960px; margin: 0 auto;">
Pero estamos haciendo casi casi un <font face="arial"> Estamos metiendo el estilo dentro del documento contenido. Y esto no lo digo por responder a un aire purista del código**.

Casi igual de mal es poner
<div class="Rojo"> y poner en otro lado .Rojo {color: red;} Lo correcto es poner <div class="Aviso"> por ejemplo.

Pensamos que da lo mismo y que las etiquetas semánticas son para el todopoderoso y omnipresente google. No. La semántica es para humanos.

Hay muchas cosas que seguir reflexionando, pero no reflexionando al rededor de si section va arriba de article o al revés, sino reflexionando en el uso de internet como medio de comunicación, como medio de expresión, el diseño como comunicación visual, el mensaje como interlocución receptor-emisor (sí, así y no al revés).

** Algunos nos tocó vivir en una era pre digital. En muchas áreas todavía podemos regresar al siglo pasado por ejemplo al entrar en un área burocrática de una oficina de gobierno pequeña. En aquella época, la única manera de marcar un título en un documento era ESCRIBIRLO CON MAYUSCULAS, y sin acentos en ellas, ___subrayándolas___ regresando el carrito, o en un caso desesperado, pasarle veinte veces el mismo caracter, agujerando casi el papel.

Esta evolución semántica es para eficientarnos en una era de información + una era de impacto visual. El no hacerlo es mantenernos en esa era de papeleo de a máquina de escribir.

ryugen · #9 (**permalink**) 24/02/2012, 06:33

Mi opinión se está hablando de que los tags de HTML5 son complicados de implementar o que las definiciones no son del todo claro, sin embargo no se tienen en cuenta lo siguiente:

No hay que tener miedo de usarlos, el estándar se encuentra en formación por lo tanto se está experimentando, con el tiempo la semántica concreta de cada tag se irá estabilizando, pero mientras tanto no perdamos la oportunidad de utilizarlo. Y para aquellos que digan que lo anterior es arriesgarse a generar una página con mala semántica o estructura, me gustaría como ejercicio colectivo nos pongamos a ver las estructura o semántica que nos trasmiten las páginas XHTML 1 o HTML 4.01 que hemos programado y nos daremos cuenta, de que una gran cantidad de personas se niegan a cambiar por "no querer hacerlo mal con la semántica" sin embargo veremos que en muchos casos el marcado tambien es pobre o de semántica erronea.

Estoy dejando de lado el tema de la compatibilidad entre navegadores porque no es el tema de la discusión acá.

Saludos

emprear · #10 (**permalink**) 24/02/2012, 06:57

Cita:

Iniciado por Rafael

*

Sé que este ejemplo de emprear lo hizo por practicidad (en lugar de asignarle el class y pegar el css por separado)

Comentario: Menos mal que lo interpretaste. De todas maneras en próximos posts voy a evitar la simplificación para no crear malas prácticas

Casi igual de mal es poner
<div class="Rojo"> y poner en otro lado .Rojo {color: red;} Lo correcto es poner <div class="Aviso"> por ejemplo.

Comentario: Asi es, y que conste que si uso .rojo{color red}, para aplicarlo puntualmente a la etiqueta <span>

Pensamos que da lo mismo y que las etiquetas semánticas son para el todopoderoso y omnipresente google. No. La semántica es para humanos.

Comentario: Casualmente hacia el final del post ubicado en http://www.forosdelweb.com/f175/jugu...1/#post4125842 ,planteo un interrogante referido a esto

Hay muchas cosas que seguir reflexionando, pero no reflexionando al rededor de si section va arriba de article o al revés, sino reflexionando en el uso de internet como medio de comunicación, como medio de expresión, el diseño como comunicación visual, el mensaje como interlocución receptor-emisor (sí, así y no al revés).

Comentario: Y vaya que lo hay (aclaro que también soy un dinosaurio predigital).
De mis años de estudiar Letras (un par apenas), recuerdo

Claro, era más fácil cuando nuestro receptor era el destinatario de nuestro mensaje/código... Ahora, nuestro receptor, se encuentra delante de una pantalla, y eso cambia las cosas. El receptor deja de ser el humano, nuestro código html/css se convierte en mensaje al mismo tiempo, y está destinado a 2 receptores de distinta especie, el navegador, que hace la representación visual y a (por el momento), San Google, y una serie de semidioses menores, Bing, Yahoo, etc ..., encargados ni más ni menos, que de valorar correctamente nuestra semántica. Y mi duda se mantiene, lo hacen? lo harán? cuando?
Bueno, podría seguir con otras consideraciones. Espero que con esto se entienda la idea

.

Saludos

memoadian · #11 (**permalink**) 24/02/2012, 11:19

hey yo puse div class="wrapper" que conste que es un envoltorio ;)

daPhyre · #12 (**permalink**) 27/02/2012, 12:46

Cita:

Iniciado por emprear

También he llegado a tener esta duda cuando maqueto con HTML5, y de momento lo hago como el ejemplo que ha dicho emprear de usar un divisor para mostrar mi wrapper centrado.

Interpretando lo que dice el borrador actual de HTML5, cada etiqueta tiene su función, y en último caso que no corresponda a ninguna de las mencionadas, se utilizará un Div en dado caso. Yo entiendo, según la función de cada etiqueta, que ninguna corresponde a la de poner un wrapper que centre el contenido, por lo cual el Div sería el necesario en dicho caso

Es al menos, mi interpretación actual. Si estamos en un error que no hemos notado, me encantaría ser corregido lo mas pronto posible

zanguanga · #13 (**permalink**) 28/02/2012, 10:14

Cita:

Iniciado por emprear

Comentario: Y vaya que lo hay (aclaro que también soy un dinosaurio predigital).
De mis años de estudiar Letras (un par apenas), recuerdo

EMISOR -RECEPTOR - MENSAJE -CODIGO

Claro, era más fácil cuando nuestro receptor era el destinatario de nuestro mensaje/código... Ahora, nuestro receptor, se encuentra delante de una pantalla, y eso cambia las cosas. El receptor deja de ser el humano, nuestro código html/css se convierte en mensaje al mismo tiempo, y está destinado a 2 receptores de distinta especie, el navegador, que hace la representación visual y a (por el momento), San Google, y una serie de semidioses menores, Bing, Yahoo, etc ..., encargados ni más ni menos, que de valorar correctamente nuestra semántica. Y mi duda se mantiene, lo hacen? lo harán? cuando?
Bueno, podría seguir con otras consideraciones. Espero que con esto se entienda la idea

Echo en falta el canal, que vendría a ser el CSS o el HTML (no, eso sería código), o la pantalla, o Internet...

Finalmente parece que hay más acuerdo que desacuerdo entre los que estamos por aquí

referenteweb · #14 (**permalink**) 01/03/2012, 06:40

Bueno respecto a que la etiqueta wrapper es util?, la respuesta es si, ya que hay muchos proyectos web donde es mejor tener un contenedor sea centrado o que lo utilizes con otras funcionalidades, lo cual para la etiqueta body estaria mal.

Respecto a que si se deberia usar section en ese caso, la respuesta es no, el elemento section no es una etiqueta solo con fines de CSS, para esos casos es correcto lo que indicas, es mejor utilizar un envoltorio #wrapper y luego los elementos dentro del el que si tenga relación semantica.

De acuerdo a lo que decia, en mi sitio web lo tengo maquetado muy similar a la estructura que buscas: http://referenteweb.com

Por ultimo tambien hize un artículo hace un tiempo de como utilizar el elemento section: http://referenteweb.com/html-5-section-cuando-utilizarlo

Espero te sea de ayuda

emprear · #15 (**permalink**) 01/03/2012, 07:34

Cita:

Iniciado por zanguanga

Echo en falta el canal, que vendría a ser el CSS o el HTML (no, eso sería código), o la pantalla, o Internet...

Finalmente parece que hay más acuerdo que desacuerdo entre los que estamos por aquí

No me incites porque me despacho con un diagrama más grande y en 3D !!!
Saludos

Panino5001 · #16 (**permalink**) 01/03/2012, 11:19

Cita:

Iniciado por referenteweb

Bueno respecto a que la etiqueta wrapper es util?, la respuesta es si, ya que hay muchos proyectos web donde es mejor tener un contenedor sea centrado o que lo utilizes con otras funcionalidades, lo cual para la etiqueta body estaria mal.

Por qué no puede usarse el body como contenedor de contenido centrado?
Es cierto que no es algo que se vea demasiado, pero cuál es la razón de no hacer algo como esto:

Código PHP:

  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
*{ margin:0; padding:0;}
html{ width:100%; height:100%; background:#00C}
body{ width:500px; height:500px; background:#F00; margin: 100px auto; }
</style>
</head>

<body>
</body>
</html>

Ojo, no digo que haya que hacerlo así ni es una chicana. Lo pregunto porque realmente me interesa saber cuál es la razón que justifica realmente el uso de wrappers porque yo pienso que no son necesarios ni funcional ni semánticamente, pero dudo de mi propia opiniónal ver que la gente los usa muchísimo.

kseso? · #17 (**permalink**) 01/03/2012, 15:44

Hace un par de días recomendaba vía teitter y en mi blog la lectura del artículo de Steven Bradley en vanseodesign.com: "Is It Time To Change Our CSS Practices?" *(1)

Se puede estar de acuerdo o en desacuerdo con todo o parte. Pero interesante creo que lo es.

Como son varias las intervenciones precedentes sólo mencionaré un par de ellas (por aquello de que coincido).

Dice Panino que adjura de html5. Sólo me referiré al aspecto del marcado html y la pretendida semántica. Del resto me callo (por ignorancia).
Cuánta verdad. Html5 es un pan que han sacado al mostrador sin pasarlo por el horno. Toda una aberración el sindiós que han creado y todo un retroceso respecto a xhtml.
Caos en la grafía. Caos en qué es cada nuevo invento.Caos en la estructura semántica y caos en la jerarquía de las etiquetas: Un mismo elemento puede ser continente y a la vez contenido de su contenido. Todo puede contener a todo y a su vez contenido por cualquiera.
Lo dicho, un rediós sindiós.

Una página son dos aspectos (y la importancia o relevancia de cada no de ellos se la da quien la construye y quien la visita, no terceros):
.- El contenido.
.- La presentación del mismo.

¿Por qué razón los talibanes de la semántica van a demonizar el uso de cualquier recurso para conseguir el contenido y el continente que el difusor del mensaje quiera/necesite emplear? Recomienden, sí, pero pretender imponer una visión, no. Y es lo que está ocurriendo.
Cualquier tema o idea llevada al extremo suele estar equivocada.

Los div (divisores o cajas) nacieron para eso. Para contener y separa unos contenidos de otros. Si se necesita crear una división exprofeso para algo, bien estar. ¿Necesita un "wrap"? Créelo. Necesita un "div id="fixed", adelante.

Y sí, también de acuerdo (otra vez los viejos coincidiendo) en que el tag | body | se puede utilizar para evitar un "wrap". Ya se es muy antiguo el utilizar tanto | body | como | html | para ahorrarse div´s al emplear | display: table |

Cita:

Iniciado por Panino5001

Lo pregunto porque realmente me interesa saber cuál es la razón que justifica realmente el uso de wrappers porque yo pienso que no son necesarios ni funcional ni semánticamente, pero dudo de mi propia opiniónal ver que la gente los usa muchísimo.

Imagina el siguiente esquema de bloques:
cabecera y pie de página al 100% de ancho
cuerpo de multicolumnas con menor anchura al 100%, el conjunto centrado, (que nadie me mencione el inline-block por el flotado, que no son intercambiables en el 100% de las situaciones)

<<<<<<<<--------------------->>>>>>>>>>>>>>
*(1)
Se cuestiona aspectos como:
¤ Los sitios deben tener el mismo aspecto en todos los navegadores.
¤ Hacer páginas basadas en píxeles es malo.
¤ Nunca se debe añadir marcado no-semántico.
¤ Usted debe usar selectores descendientes exclusivamente.
¤ La "Classitis" es mala y que hay que evitarla a toda costa.

emprear · #18 (**permalink**) 01/03/2012, 17:42

Cita:

Iniciado por Panino5001

Por qué no puede usarse el body como contenedor de contenido centrado?
Es cierto que no es algo que se vea demasiado, pero cuál es la razón de no hacer algo como esto:

Código PHP:

  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
*{ margin:0; padding:0;}
html{ width:100%; height:100%; background:#00C}
body{ width:500px; height:500px; background:#F00; margin: 100px auto; }
</style>
</head>

<body>
</body>
</html>

Ojo, no digo que haya que hacerlo así ni es una chicana. Lo pregunto porque realmente me interesa saber cuál es la razón que justifica realmente el uso de wrappers porque yo pienso que no son necesarios ni funcional ni semánticamente, pero dudo de mi propia opiniónal ver que la gente los usa muchísimo.

Parte de tus planteos y dudas se ven reflejados, en forma práctica, en un par de ejercicios que propuso @rafael (es muy probable que hayas visto el post "juguemos a diagramar2"), del cual han salido discusiones interesantes.
Yo también hice mi aproximación a la propuesta, en http://www.forosdelweb.com/f175/jugu...1/#post4125842
que ha su vez incluye un link al resultado final. En el mismo explico el porque de mi inclinación a utilizar determinadas cajas (divs) para lograr el objetivo. Y no creo que por ello se pierda la semántica (o pretendida al menos) de html5.

Creo que esto dá y dará por largo tiempo, mucha tela para cortar. Por el momento, todas mis afirmaciones se encuentran en un estado más experimental aún, que la propia especificación de la W3C, quien te dice, en un tiempo futuro, me olvide de toda esta historieta de la semántica de los headers, section, article y me quede solo con otras muy buenas funcionalidades que html5 está aportando.

"Prefiero algo coherente dentro de un div, a cualquier burrada dentro de un article", y de esas últimas, hay cada vez más.

SAludos

Panino5001 · #19 (**permalink**) 01/03/2012, 18:10

Cita:

"Prefiero algo coherente dentro de un div, a cualquier burrada dentro de un article", y de esas últimas, hay cada vez más.

daPhyre · #20 (**permalink**) 01/03/2012, 21:11

Cita:

Iniciado por Panino5001

Por qué no puede usarse el body como contenedor de contenido centrado?

La verdad yo no he visto muchos ejemplos de algo así

Seguido de la filosofía "<body> debe contener todos los elementos visibles dentro de la página" (siendo <head> la metainformación no visible y nunca se refiere a <html> en ello), y dados todos los ejemplos en que siempre <body> se usa para el color/imagen-mosaico de fondo, y un div "wrapper" para centrarlo, nunca me había considerado el ejemplo que expones.

Jamás he visto que alguien hiciera eso que dices, ni se si sea "correcto" o "incorrecto" hacerlo de esta forma. Pero si me dicen que no tiene nada de incorrecto el hacerlo así, consideraré que es una buena alternativa para generar este efecto