RED ESCUELA.: Organizar Contenidos

Principal.OrganizarContenidos Historia

Oculta ediciones menores - Muestra los cambios de salida

04 abril 2011 a las 06h59 por eldirec -

Línea añadida 4:

Restaurar

04 abril 2011 a las 06h58 por eldirec -

Línea cambiada 4 desde:

%color=#ff8c00 center%'''[+++ORGANIZAR CONTENIDOS EN TABLAS Y CUADROS DE TEXTO+++]'''\\

para

%color=#ff8c00 center%'''[++ORGANIZAR CONTENIDOS EN TABLAS Y CUADROS DE TEXTO++]'''

Restaurar

04 abril 2011 a las 06h58 por eldirec -

Líneas cambiada 3-7 desde:

%color=#ff8c00 center%'''[+++ORGANIZAR CONTENIDOS EN ~~BLOQUES~~+++]'''\\
%color=#ff8c00%'''[+Guías para Bloques y Secciones+]'''

Los contenidos de un Tema pueden estar organizados en Bloques de Texto que permita una mejor ubicación del texto como también de las imágenes.

para

[[<<]]
%color=#ff8c00 center%'''[+++ORGANIZAR CONTENIDOS EN TABLAS Y CUADROS DE TEXTO+++]'''\\

Los contenidos de una página Wiki pueden estar organizados en Bloques de Texto que permita una mejor ubicación del texto como también de las imágenes.

Restaurar

04 abril 2011 a las 06h52 por eldirec -

Líneas cambiada 387-390 desde:

~~(:include~~ Principal/FormatosParaColores:)

para

%color=#ff8c00 center%'''[++Formatos de Colores++]'''

Para conocer sobre los colores que puedes aplicar visita la sección [[Principal/FormatosParaColores|Formatos de Colores]]

Líneas cambiada 392-396 desde:

[[<<]]

para

[[<<]]

Restaurar

04 abril 2011 a las 06h50 por eldirec -

Líneas añadidas 1-2:

(:description Guías para Bloques y Secciones:)
(:title Organizar Contenidos:)

Líneas cambiada 5-6 desde:

~~(:description Guías para Bloques y Secciones:)~~

para

Líneas borrada 392-400:

(:div align=center style='align:center; border:4px dotted white; padding:10px; background-color:orange; width:450px':)
%white center%%newwin%'''[+► [[WikiEscuela/ConociendoRedEscuela|Ver ARTICULO MODELO con secciones]]+]'''
(:divend:)

(:include Base/GuíaDeEstilos#ejemplos:)

Restaurar

09 septiembre 2008 a las 02h57 por ayudante -

Línea cambiada 394 desde:

%white center%%newwin%'''[+► [[WikiEscuela/ConociendoRedEscuela|Ver ARTICULO MODELO con ~~Secciones de Texto~~]]+]'''

para

%white center%%newwin%'''[+► [[WikiEscuela/ConociendoRedEscuela|Ver ARTICULO MODELO con secciones]]+]'''

Restaurar

09 septiembre 2008 a las 02h57 por ayudante -

Líneas cambiada 389-395 desde:

para

[[<<]]
[[<<]]

(:div align=center style='align:center; border:4px dotted white; padding:10px; background-color:orange; width:450px':)
%white center%%newwin%'''[+► [[WikiEscuela/ConociendoRedEscuela|Ver ARTICULO MODELO con Secciones de Texto]]+]'''
(:divend:)

(:include Base/GuíaDeEstilos#ejemplos:)

Restaurar

12 agosto 2008 a las 06h46 por ayudante -

Líneas cambiada 387-395 desde:

para

(:include WikiEscuela/FormatoParaColores:)

Restaurar

08 agosto 2008 a las 08h21 por ayudante -

Líneas añadidas 1-395:

%color=#ff8c00 center%'''[+++ORGANIZAR CONTENIDOS EN BLOQUES+++]'''\\
%color=#ff8c00%'''[+Guías para Bloques y Secciones+]'''
(:description Guías para Bloques y Secciones:)

Los contenidos de un Tema pueden estar organizados en Bloques de Texto que permita una mejor ubicación del texto como también de las imágenes.

En RedEscuela puedes utilizar Areas de Contenido como ser Tablas, Marcos y Capas.

%color=#ff8c00%'''[+ORGANIZRA CONTENIDOS EN TABLAS+]'''%%\\
Una tabla es una estructura conformada por Filas y Columnas. A continuación se muestra cómo crear una tabla sencilla de 2 columnas y 3 filas:

%bgcolor=#ffeeee navy%'''Se escribe así:'''

>>lframe width:'300px'<<
[@(:table border=1 width=300px:)
(:cellnr:)
Fila 1 - Columna 1

(:cell:)
Fila 1 - Columna 2

(:cellnr:)
Fila 2 - Columna 1

(:cell:)
Fila 2 - Columna 2

(:cellnr:)
Fila 3 - Columna 1

(:cell:)
Fila 3 - Columna 2

(:tableend:)@]

>><<

%bgcolor=#ffeeee navy%'''Para que se vea así:'''

>>lframe width:'300px' background=#ffe8ff<<
(:table border=1 width=300px:)
(:cellnr:)
%blue%'''Fila 1''' - %green%'''Columna 1'''

(:cell:)
%blue%'''Fila 1''' - %green%'''Columna 2'''

(:cellnr:)
%blue%'''Fila 2''' - %green%'''Columna 1'''

(:cell:)
%blue%'''Fila 2''' - %green%'''Columna 2'''
(:cellnr:)
%blue%'''Fila 3''' - %green%'''Columna 1'''

(:cell:)
%blue%'''Fila 3''' - %green%'''Columna 2'''

(:tableend:)
>><<

[[<<]]
[[<<]]

Las tablas pueden tener color de fondo para decorar su contenido:

'''[+Tabla con color de fondo+]'''

%bgcolor=#ffeeee navy%'''Se escribe así:'''

>>lframe width:'380px'<<
[@(:table border=1 width=400px bgcolor=lightblue:)
(:cellnr:)
TITULO 1

(:cell:)
TITULO 2

(:cellnr:)
Texto en primer columna

(:cell:)
Texto en segunda columna

(:cellnr:)
Texto en tercer fila

(:cell:)
Texto en tercer fila

(:tableend:)@]
>><<

>>lframe width:'380px'<<
%bgcolor=#ffeeee navy%'''Para que se vea así:'''

(:table border=1 width=380px bgcolor=lightblue:)
(:cellnr:)
TITULO 1

(:cell:)
TITULO 2

(:cellnr:)
Texto en primer columna

(:cell:)
Texto en segunda columna

(:cellnr:)
Texto en segunda fila

(:cell:)
Texto en segunda fila

(:tableend:)
>><<

[[<<]]
[[<<]]
[[<<]]

Se pueden aplicar diferentes Bordes a la tabla:

'''[+Tabla con borde+]'''

%bgcolor=#ffeeee navy%'''Se escribe así:'''

>>lframe width:'380px'<<
[@(:table border=3 bordercolor='green'
width=400px bgcolor=lightgreen:)
(:cellnr:)
TITULO 1

(:cell:)
TITULO 2

(:cellnr:)
Texto en primer columna

(:cell:)
Texto en segunda columna

(:cellnr:)
Texto en tercer fila

(:cell:)
Texto en tercer fila

(:tableend:)@]
>><<

>>lframe width:'380px'<<
%bgcolor=#ffeeee navy%'''Para que se vea así:'''

(:table border=3 bordercolor='green' width=350px bgcolor=lightgreen:)
(:cellnr:)
TITULO 1

(:cell:)
TITULO 2

(:cellnr:)
Texto en primer columna

(:cell:)
Texto en segunda columna

(:cellnr:)
Texto en segunda fila

(:cell:)
Texto en segunda fila

(:tableend:)
>><<

[[<<]]
[[<<]]
[[<<]]

Aplicar color de Fondo a ciertas celdas:

'''[+Celdas con color+]'''

%bgcolor=#ffeeee navy%'''Se escribe así:'''

>>lframe width:'380px'<<
[@(:table border=1 width=400px :)
(:cellnr style='background-color:gold;':)
TITULO 1

(:cell style='background-color:gold;':)
TITULO 2

(:cellnr:)
Texto en primer columna

(:cell:)
Texto en segunda columna

(:cellnr:)
Texto en tercer fila

(:cell:)
Texto en tercer fila

(:tableend:)@]
>><<

>>lframe width:'380px'<<
%bgcolor=#ffeeee navy%'''Para que se vea así:'''

(:table border=1 width=350px :)
(:cellnr style='background-color:gold;':)
TITULO 1

(:cell style='background-color:gold;':)
TITULO 2

(:cellnr:)
Texto en primer columna

(:cell:)
Texto en segunda columna

(:cellnr:)
Texto en segunda fila

(:cell:)
Texto en segunda fila

(:tableend:)
>><<

[[<<]]
[[<<]]
[[<<]]

!

%color=#ff8c00%'''[+ORGANIZAR CONTENIDOS EN RECUADROS+]'''%%\\
Para enmarcar algunas frases y utilizar bordes y recuadros:

(:table border=1 :)
(:cell style='padding:5px; background-color:#faffb7; ' width='300px' align='center' :)
'''[+Se escribe así:+]'''
(:cell style='padding:5px; background-color:#faffb7; ' width='300px' align='center' :)
'''[+Para que se vea así:+]'''

(:cellnr style='padding:5px;':)
'''Crear un texto en un Frame (marco)'''

[@>>frame<<@]
[@Este texto se encuentra
en un marco.@]

[@Aunque tenga varios
párrafos igual seguirá
dentro del marco.@]
[@>><<@]

(:cell style='padding:5px;':)
>>frame<<
Este texto se encuentra
en un marco.

Aunque tenga varios
párrafos igual seguirá
dentro del marco.
>><<

(:cellnr style='padding:5px;' align=left:)
'''Texto en Frame centrado'''

[@>>cframe width:'400px'<<@]
[@%gray%[-'''Texto para Citas'''-]@]

[@Este texto está en marco centrado
con un ancho de 400 pixeles@]
[@>><<@]

(:cell style='padding:5px;':)
>>cframe width:'400px'<<
%gray%[-'''Texto para Citas'''-]

Este texto está en marco centrado
con un ancho de 400 pixeles
>><<

(:cellnr style='padding:5px;' align=left:)
'''Texto en un DIV (capa)'''

[@(:div style='border:1px solid blue; @]
[@ background-color:#ffffcc':)@]

[@Este texto esta en un DIV.
Puedes aplicarle colores de
fondo y estilos de borde.@]

[@(:divend:)@]

(:cell style='padding:5px;':)
(:div style='border:1px solid blue; background-color:#ffffcc':)

Este texto esta en un DIV.\\
Puedes aplicarle colores de\\
fondo y estilos de borde.

(:divend:)

(:cellnr style='padding:5px;' align=left:)
'''Ejemplos de texto en DIV'''

[@(:div style='background-color:#ffddaa; @]
[@ border:2px solid color=#ff8c00;width:300px; @]
[@ padding:10px; margin-left:300px;':)@]

[@Este DIV tiene borde de 2 pixeles
de grosor color naranja con margen izquierdo
de 50 pixeles y margen interno de 10 px y
un ancho del cuadro de 300 pixeles. @]

[@%center%Attach:escolares-small.gif@]

[@(:divend:)@]

(:cell style='padding:5px;':)
(:div style='background-color:#ffddaa; border:2px solid color=#ff8c00;width:300px; padding:10px; margin-left:50px;':)

Este DIV tiene borde de 2 pixeles\\
de grosor color naranja con margen izquierdo\\
de 50 pixeles y margen interno de 10 px y\\
un ancho del cuadro de 300 pixeles.

%center%Attach:escolares-small.gif

(:divend:)

(:cellnr style='padding:5px;' align=left:)
'''Mas ejemplos de DIV'''

[@(:div style='font-style:italic; @]
[@ border:4px dotted green; padding:20px; @]
[@ background-color:#c0ffb7 :)@]

[@Este texto esta en un DIV con borde punteado
de 4 pixeles y con un margen interno de 20 px,@]

[@Se puede incluir@]

[@'''texto formateado'''@]

[@* Lista@]\\
[@-> Sangria@]

[@(:divend:)@]

(:cell style='padding:5px;':)
(:div style='font-style:italic; border:4px dotted green; padding:20px; background-color:#c0ffb7':)
Este texto esta en un DIV con borde punteado\\
de 4 pixeles y con un margen interno de 20 px,

Se puede incluir

'''texto formateado'''

*Lista
-> Sangria

(:divend:)

(:tableend:)

Restaurar