Manual de usuario de Supein Elaborado por: Farouk Coronel Coronel Introducción El siguiente manual pretende explicar todo lo posible sobre un sublenguaje de programación web desarrollado por mí con el objetivo de facilitar la programación web. El lenguaje determinado para páginas web es HTML, este lenguaje en la mayoría de las etiquetas usa el idioma inglés, lo que dificulta a los no hablantes del inglés a comprenderlas. Para que personas con deseos de realizar páginas web, sobre todo si apenas se está comenzando a programar puede resultar muy útil este sublenguaje, Supein está dirigido a personas que tienen poco conocimiento en cuanto a la programación y también a profesionales en el desarrollo web, pero Supein es en verdad muy útil para empezar ya que está en español. Aún así se necesita agregar algunos códigos básicos HTML, pero no se preocupen, para eso es este manual, para ayudarlos a entender de forma más sencilla de cómo hacer una página web. A continuación se detalla cómo empezar a programar con Supein. Empezando Para empezar primero se debe añadir en la cebezera de la página el estilo css donde contiene el contenido del sublenguaje Supein. Esto se consigue creando un documento html como el siguiente: <!DOCTYPE html> <html> <head> <title>Ejemplificando supein</title> <link rel="stylesheet" type="text/css" href="Supein.css"> </head> <body> </body> </html> Esta es la estructura de un documento html. Por si apenas estás aprendiento a programar, te invito a que busques en internet información básico sobre el lenguaje html, ya que se nesecitará conocer un poco de html, si sabes algo muy superficial ya es suficiente por lo que con Supein se irán reemplazando algunas etiquetas y el objetivo es facilitar la creación de páginas web. Para añadir la librería Supein, pones la etiqueta <link> con la cual relacionas un archivo css externo, y con la propiedad href escribes el directorio donde se encuentra el archivo dentro de las comillas, si el archivo está en la misma carpeta que la página en donde deseas usarlo queda exactamente igual que el ejemplo anterior. Letras de colores Para usar Supein primero se debe insertar en cualquier editor de texto, en el cuerpo del documento (entre las etiquetas <body> ----- </body), escribes la etiqueta de Supein <farouk>, dentro de esta etiqueta escribes todo el código del que hablaremos más adelante, al terminar cierras la etiqueta, </farouk>. Como en el siguiente ejemplo. <!DOCTYPE html> <html> <head> <title>Ejemplificando supein</title> <link rel="stylesheet" type="text/css" href="Supein.css"> </head> <body> <farouk> <!-- Aquí pones todos los códigos que hablaremos en el manual --> </farouk> <!--Puedes usar la eiqueta <farouk> en cualquier parte de body y las veces que quieras--> </body> </html> Para cambiar el color de texto usaremos la etiqueta <colortexto>, recuerda que todas las etiquetas deben de cerrarse con etiquetas del mismo nombre pero entre los signos </ >. Delante de colortexto escribimos el nombre del color que queremos cambiar la fuente. Por ejemplo: <!DOCTYPE html> <html> <head> <title>Ejemplificando supein</title> <link rel="stylesheet" type="text/css" href="Supein.css"> </head> <body> <farouk> <colortextorojo> El texto es rojo </colortextorojo> </farouk> </body> </html> Recuerda que puedes mezclar Supein con html como en el siguiente ejemplo. <!DOCTYPE html> <html> <head> <title>Ejemplificando supein</title> <link rel="stylesheet" type="text/css" href="Supein.css"> </head> <body> Este texto de por sí es negro y este: <farouk> <colortextorojo>Es rojo</colortextorojo> </farouk> </body> </html> A continuación pongo todos los colores que puedes usar, no olvides cerrarlas. Escribe todas las etiquetas en minúscula, sin acento y todo junto por favor. Rojo, morado, anaranjado, verde, magenta, cyan, azul, blanco, negro, gris, marrón (en la etiqueta no pongas el acento por favor), amarillo, rosa y azul celeste (debes escribirlo junto, así: <colortextoazulceleste> y cerrar </ colortextoazulceleste>. Decoración de texto Para cualquier texto normal use: <texto> Texto tachado: <tachado> Quitar toda decoración y estilo del texto: Añadir una clase a la etiqueta <p> o <font> de html. Así <p class=”sinestilo”>Todo el texto</p>. No pongas ninguna etiqueta de Supein, html normal. Linea encima del texto: <macron> Subrayado: <subrayado> Alineación de texto Alineado al centro: <centrado> Alineado al final: <final> Texto justificado: <justificado> Alineado a la izquierda: <izquierda> Alineado a la derecha: <derecha> Fuentes de texto Escribe etiquetas fuente con números desde el 1 al 16, solo una etiqueta <fuente1> <fuente 16>. Ejemplo: <!DOCTYPE html> <html> <head> <title>Ejemplificando supein</title> <link rel="stylesheet" type="text/css" href="Supein.css"> </head> <body> <farouk> <fuente8>Texto con la fuente</fuente8> </farouk> </body> </html> Color de fondo de lo que sea Esto será con la clase del mismo color de fondo que se desea, igual que con los colores de texto. Solo que esta vez no es una etiqueta sino una clase. Dentro de cualquier etiqueta le pones después de dejar un espacio en blanco: class=””. Entre las comillas escribes el nombre de clase a incluir. Ejemplo para cambiar el fondo de la página a verde: <!DOCTYPE html> <html> <head> <title>Ejemplificando Supein</title> <link rel="stylesheet" type="text/css" href="Supein.css"> </head> <body class="verde"> </body> </html> Los colores son: verdelimon, verdeazul, amarillo, azulbajo, anaranjado, barniz, moradobajo, rojo, carminazul, morado, guinda, gris, café, bosque, extraño, verdefuerte, madera, azul, añil, rosa, verde, blanco, negro, transparente, azulcielo. Tamaño de la fuente El tamaño de la fuente, del texto o de la letra, como quieran llamarle, se indica con las siguientes etiquetas: <virus>: No te preocupes por el nombre no es un virus informático ni algo así, simplemente transforma las letras en tamaño de un virus. <muypequeño>: Texto muy pequeño. <pequeño>: Texto pequeño. <medio>: Tamaño medio. <grande>: Texto grande. <muygrande>: Texto muy grande: <descomunal>: Texto gigantesco. Transformación del texto Nombres y definiciones de etiquetas: <capital>: Las primeras letras de cada palabra son mayúsculas. <minuscula>: Todas las letras son minusculas. <mayuscula>: Todas las letras son mayusculas. Color de borde Con las siguientes clases se puede cambiar el borde de objetos, imágenes, tablas y lo demás que tenga borde, además de ser específico también para celdas, columnas y filas. Los colores son: Rojo, morado, anaranjado, verde, magenta, cyan, azul, blanco, negro, gris, marron , amarillo, rosa y azulceleste. Estilo de borde Con Supein también podrás personalizar los bordes de tablas u otros elemnetos. También es con clases. Las clases son: sinborde, punteado, solido, doble, ranura, borde, decorado, principio, cuadrados e invisible. Alinear elementos Utiliza clases para alinear elementos: derecha e izquierda. Capas Para aplicar formato a toda una capa dividela con la etiqueta html <div> que también tiene etiqueta de cierre dónde termina la división, a la etiqueta div agrégale un id con los mismos nombres de etiquetas de color texto, color de fondo, tamaño y tipo de fuente. Recuerda que la estructura de la etiqueta debería quedar así: <div id=”azul”> Contenido de la división </div>. El fondo de la división será azul como resultado. Estilos de fuente Se obiene con las etiquetas <normal> para texto normal, <cursiva> para cursiva y <negrita> para letras en negrita. Cursores Llega la parte interesante, los cursores, y es que cuando pases tu cursor por el contenido el cursor o puntero, cambiará al diseño que elijas. Para usar esta función de estilo hover se debe de escribir la forma del puntero como una etiqueta dentro de la etiqueta <mouse>. Por ejemplo: <farouk><mouse><ayuda><texto>Pontucursoraquí</texto></ayuda></mouse></faro uk>. Estos son los cursores que puedes usar. <flecha>, <direcciones>, <normal>, <mas>, <derechaizquierda>, <masmenos>, <objetivo>, <izquierdaderecha>, <ayuda>, <arribaabajo>, <diagonal>, <prohibido>, <invisible>, <inverso>, <mano>, <cargando>, <abajoarriba>, <escribir>, <leer> y <esperar>. Fondo de página o sección con imágen. Hasta aquí veniamos poniendo fondo de varias secciones y objetos, pero también se puede cambiar colores por imágenes. Para esto vamos a utilizar la etiqueta <imagen> o la clase imagen, en caso de poner una imágen de fondo a <body>. Recuerda que todas las etiquetas de Supein tienen que estar dentro de etiquetas <farouk>. Para seleccionar la imagen de fondo, sólo debes tener una imagen en la misma carpeta o directorio que el documento web al que deseas poner la imagen como fondo, con el nombre Farouk (Con la F mayúscula), puede estar en 4 formatos que son: Jpg, Jpeg, Gif o Png. Animaciones Como su nombre indica sirve para hacer animaciones de tipo de evento hover, es decir cuando pongas el cursor encima de lo que haya en la etiqueta animacion, esto tendrá un efecto que le darás, como por ejemplo: Al pasar el cursor sobre un texto este cambia de color a amarillo y cosas por el estilo. Para conseguir tal efecto solo agrega una S mayúscula al final de la etiqueta o clase, una de las tantas que hemos estudiado, claro deben de ser etiquetas de Supein. Claro que la “S” significa exactamente Supein. Espero que te haye gustado mucho este nuevo sublenguaje, en cuanto pueda crearé otro dirigido para craer animaciones más avanzadas y acciones más interactivas, por el momento sólo espero que te sea útil. Para cualquier duda, sugerencia, felicitación o lo que quieras decirme mándame un mensaje al correo: Satorunomixi@gmail.com, en facebook a: Riron Yunibasaru Shinjitsu, o a mi canal de Youtube: Todaitube, en el cuál deseo hacer unos tutoriales también. Bien, hasta luego.
