Factura Electrónica, Hosting Inventarios Cuentas por Cobrar por Pagar Acceso Remoto, 370 pesos mensuales iva incluido, pdf, xml, impresora opcional San Juan del Rio Queretaro Mexico atencion personal de Javier Mosqueda Farias
Logo
Home
Factura Digital
Web y Mail
Información
Comprar
Contáctenos
Registrarse
Acerca de...
International
Cómo crear HTML
fácilmente con WSB20

Existe una forma sencilla de producir HTML que WSB20 implementa con simples caracteres para indicar lo que se quiere.

Por ejemplo, se pueden crear títulos o [1] subtítulos iniciando párrafos con '-' y con '.' respectivamente, o bien se pueden crear viñetas iniciando los párrafos con ' *- ' o bien con ' 1- ', ' a- ', ' i- ' etc. Los detalles de qué hace cada marcador están más abajo.

Viñetas No Ordenadas

  • Aquí tenemos una viñeta
  • pero ésta no tiene control de numeración
  • Se llama lista no ordenada o unordered list

Viñetas Ordenadas

  1. este debe ser el primer renglón
  2. Ahora tienes una viñeta cuyos elementos
  3. sí están numerados
  4. y no tienes que preocuparte
  5. por qué número pones al principio
  6. de cada renglón, [2] si acaso te equivocaste
  7. en el orden, sólo cambia los renglones
  8. y la numeración [3]es re-generada
  9. de manera automática.

Así es que con esta herramienta tu vida se simplifica y produces formatos elegantes y bien estructurados.

Imagenes

Estas utilizan el comando f | (sin el espacio intermedio) y seguido del "pipe" el nombre de la imagen. Opcionalmente una coma seguida de i,c,d (izquierda,centro o derecha respectivamente) y opcionalmente una coma más, seguida del texto alternativo y/o título para que respectivamente se muestre al faltar la imagen y al pasar el mouse sobre la imagen. Si el texto alternativo lleva una coma (,) , lo que esté luego de "," será el nombre de la clase bajo la cual se ha de formatear la imagen. Si además de esta información, hay una coma y un dígito del 1 al 4, se usará para modificar la imagen a una de los 4 tamaños autogenerados al subir imágenes: 80, 150, 350 y 500 pixels. No requiere el pipe y f de cierre. Si se usa, no será interpretado.

Estas son unas kebabs

Estas son unas kebabs
Matriz de Imágenes

Estas utilizan la definición:

picmatrix = lista separada por ";" (sin los espacios entre pixmatrix y el signo de igual y la lista)

La lista separada por ";" debe contener lo siguiente:

  • directorio donde están las imagenes
  • patrón que define el nombre de la foto en Expresiones Regulares: Ej. foto-200.jpg se escribe como w+-200.jpg , donde w es alfanumérico incluído el guión bajo. El quión medio se "escapea", el 200 es literal. El "." es cualquier caracter, pero . es un punto por estar "escapeado" y jpg es literal. Así es que las "gif" que estén en ese directorio no serán incluídas. Tampoco las que no digan 200, cosa que es una buena medida para que al organizar imagenes, siempre se suban al directorio con un número que indique su tamaño y picmatrix pueda usar sólo aquellas que no van a distorsionar la matriz de imágenes.
  • El ancho de la matriz en columnas (2, 3, 4, etc);
  • la clase de la celda que contendrá la imagen. Esta clase debe existir en style.css
  • La alineación horizontal (left, right, center)
  • La alineación vertical (top, middle y bottom);

Así por ejemplo si generamos una matriz con el criterio de que tenga "th2--" (los defaults para 150 pixeles de lado) en el directorio "fotos", de 3 columnas, con la clase "recuadro" (fondo celeste y borde marón) y centrados en ambos sentidos

picmatrix = fotos;th2--;3;recuadro;center;middle


bobmijas

bobmijas

bobmijas

Kebab

alpina

banner1

digicert

digicert1

folder colgante

html icon

importessl

power transfer1

power transfer2

precioxoperacion

shop0

shop0a

shop1

shop3

shop5

tarifa

tarifa

thee20

web

web
Gama de Layouts

Los layouts disponibles son:

  • layout(1)
  • layout(2)
  • layout(3)
  • layout(4)
  • layout(5)

Mientras en el paréntesis sólo haya el número del 1 al 5, se desplegará la forma del layout, siempre y cuando layout(n) esté pegado al margen.

Si está despegado del márgen, no tendrá efecto y se mostrará como arriba

Ahora veremos lo anterior pero mostrando el layout realmente.

Layout #1

Titulo
Subtitulo
Imagen
Zona para Texto General Extensible hacia abajo

Layout #2

Imagen
Titulo
Subtitulo
Zona para Texto General Extensible hacia abajo

Layout #3

Titulo
Subtitulo
Imagen
Zona para Texto General Extensible hacia abajo
Sub Caja 1 de Color con Titulo, Subtitulo y Contenido
Sub Caja 2 de Color con Titulo, Subtitulo y Contenido
Sub Caja 3 de Color con Titulo, Subtitulo y Contenido

Layout #4

Titulo
Subtitulo
Imagen
Zona para Texto General Extensible hacia abajo
Sub Caja 1 de Color con Titulo, Subtitulo y Contenido
Sub Caja 2 de Color con Titulo, Subtitulo y Contenido
Sub Caja 3 de Color con Titulo, Subtitulo y Contenido

Layout #5

Titulo
Subtitulo
Imagen
Zona para Texto General Extensible hacia abajo
Sub Caja 1 de Color con Titulo, Subtitulo y Contenido
Sub Caja 2 de Color con Titulo, Subtitulo y Contenido
Sub Caja 3 de Color con Titulo, Subtitulo y Contenido
Sub Caja 4 de Color con Titulo, Subtitulo y Contenido
Sub Caja 5 de Color con Titulo, Subtitulo y Contenido
Sub Caja 6 de Color con Titulo, Subtitulo y Contenido

Para usar los Layouts

Es necesario expresar layout(n | Titulo |Subtitulo |Foto | Texto Para el Contenido, al que le aplican las mismas reglas anteriores, es decir, viñetas, subrayados, itálicas, negritas, imágenes, etc.); Debido a que el control de texto depende mucho de los saltos de línea y de lo que esté pegado al margen izquierdo como *- , para viñetas, en lugar de escribir físicamente el texto dentro del comando layout(), solo se escribirá el marcador que contiene el texto.

Marcadores para texto

Un marcador de texto es similar al control de imagenes, es un paréntesis seguido de un signo más, esto es (+ y terminado con lo inverso +). Inmediatamente despues de abrir el marcador (+ debe escribirse el nombre del marcador seguido de pipe y fin de línea, luego, todo el texto que se quiera, incluyendo saltos de línea, etc; ej: (+nombre| todo el texto al gusto y +).

A diferencia de las imágenes, que pueden iniciar su marcador (- en cualquier lugar, un marcador de texto sólo funciona pegado al margen izquierdo, y su terminación sólo funciona pegada al margen izquierdo

  • Para abrir (+mi_nombre|
  • Contenido: Todo el texto a continuación en uno o más renglones
  • para cerrar el marcador +)

La llamada a layout, quedaría como layout(3 | Titulo | Subtitulo | Foto | mi_nombre ) .

Las reglas para "mi_nombre", es decir, el nombre del marcador de texto es que contenga sólo caracteres "Word", es decir alfanumérico y guión bajo "_". No incluye ñ ni letras con acentos. Si se usan, el marcador no será detectado por definición.

Este párrafo está escrito luego de haber creado un marcador llamado ejemplo1. Para hacer que se imprima de manera inmediata, basta con escribir m | nombre_del_marcador . Este comando m | sólo funciona si está pegado al margen izquierdo, como se muestra a continuación para el marcador "ejemplo1";

Este es el primer párrafo de un marcador; cada uno de los párrafos dentro del marcador es formateado según su definición, como si se tratase de párrafos fuera del marcador. Como este es un párrafo normal

Este es un párrafo de tipo titulo dentro del marcador
El tercer párrafo se trata de un subtítulo
  • este es una viñeta
  • y esta es otra viñeta

Nuevamente un párrafo normal y terminamos el marcador "ejemplo1"

Para hacer que un marcador sea expulsado y así analizar su contenido, debe utilizarse el comando m | nombre_del_marcador pegado al margen izquierdo y no requiere cierre | m, aunque puede escribirse y no afecta.

Ahora probamos n | negritas | n , i talicas | i , s | subrayado | s y colores con c#f00 | color rojo | c (no debe haber espacio entre n,i,s, c y el "pipe" = | ).

Los controles anteriores no tienen limite de cuántos puedes colocar por párrafo. c#f0

</span>

#080| color verde , color azul y en todas sus c#00
</span>

. No hay límite para anidarlos, ej. subrayado, coloreando, negritas e itálico, ejemplo puede efectuarse ahora mismo y luego colorear otra vez, luego negritas e itálicas , sin usar HTML.

Ejemplos de Tablas

La instruccion t | (sin el espacio intermadio) y su contraparte | t .

Estos abren y cierran respectivamente una tabla. Luego de t | se escribe el nombre de la clase de la tabla y a partir del siguiente renglón, estará el contenido de la tabla. Punto y coma (alineación derecha) o coma (alineación izquierda), se convierten en el separador de columna. Usar un # antes de número para generar separadores de miles Por el momento no se han definido los equivalentes de colspan y los rowspan, pero aparecerán en cualquier momento y se indicará en esta sección.

t | clase [,opcional alineacion]

ej.

t | clase , c , 80% (sin los espacios intermedios)

ejemplo,de,como,hacer,tablas;y alineación
seis,siete,ocho,nueve,diez;50000
once,doce,trece,catorce,quince,#50000
once,doce,trece,catorce,quince;#50000
| t
ejemplodecomohacertablasy alineación
seissieteochonuevediez50000
oncedocetrececatorcequince50,000
oncedocetrececatorcequince50,000

Aquí viene una tabla:

Layout usando marcadores

AhoraProbando
Subtis
Texto Alternativo

Este es el primer párrafo de un marcador; cada uno de los párrafos dentro del marcador es formateado según su definición, como si se tratase de párrafos fuera del marcador. Como este es un párrafo normal

Este es un párrafo de tipo titulo dentro del marcador
El tercer párrafo se trata de un subtítulo
  • este es una viñeta
  • y esta es otra viñeta

Nuevamente un párrafo normal y terminamos el marcador "ejemplo1"

Para hacer que un marcador sea expulsado y así analizar su contenido, debe utilizarse el comando m | nombre_del_marcador pegado al margen izquierdo y no requiere cierre | m, aunque puede escribirse y no afecta.

Prueba de otros marcadores B

En este caso este marcador permite verificar que en layouts es posible cargar información sin limite, para ser ubicada dentro de los distintos cuadros del layout

Prueba de otros marcadores A

En este caso este marcador permite verificar que en layouts es posible cargar información sin limite, para ser ubicada dentro de los distintos cuadros del layout

Prueba de otros marcadores C

En este caso este marcador permite verificar que en layouts es posible cargar información sin limite, para ser ubicada dentro de los distintos cuadros del layout

Prueba de otros marcadores D

En este caso este marcador permite verificar que en layouts es posible cargar información sin limite, para ser ubicada dentro de los distintos cuadros del layout

Prueba de otros marcadores E

En este caso este marcador permite verificar que en layouts es posible cargar información sin limite, para ser ubicada dentro de los distintos cuadros del layout

Prueba de otros marcadores F

En este caso este marcador permite verificar que en layouts es posible cargar información sin limite, para ser ubicada dentro de los distintos cuadros del layout


  1. esta seria una referencia, la cual se crea con doble parentesis y se cierra con su respectivo doble paréntesis
  2. el numero de la referencia es generado de manera automática
  3. no hay límite para la cantidad de referencias


Login Términos de Servicio Privacy Policy Android