Introducción
Según la Wikipedia: Una página web es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador.¹
Me parece que Internet ha llegado para quedarse y que con el tiempo no sólo será el medio de comunicación imperante para las décadas siguientes, sino que será donde mayor publicidad se invertirá.² Por lo que es esencial conocer por lo menos lo básico para poder comunicarnos de manera efectiva con nuestros clientes.
El siguiente manual no copia ni pega información de otros manuales disponibles en internet. Se basa en herramientas que facilitan la programación, que están disponibles en línea y son gratuitas.
Herramientas básicas
Si bien es cierto que desde Word y otros editores de texto podemos crear páginas web, en la práctica su código fuente no es tan compatible con plataformas como Blogger, ya que al copiar y pegar te inserta códigos extra como fuentes que no son compatibles con algunas plantillas que instalaste en Blogger y tus entradas simplemente se verán distintas a la fuente establecida con dicha plantilla. El resultado es un desastre porque “estéticamente” tendrás diferentes estilos en las fuentes. Incluso las celdas tendrán un aspecto en tu documento de word, pero al momento de publicarlas serán distintas a las predeterminadas en tu plantilla.
Copiar un código desde Word
Sin embargo hay algunos trucos para copiar el código de una página web hecha en Word que a veces empleo.
Si generamos un archivo de texto desde Word, podremos observar que al guardar como página web, el código fuente es enorme, y que al copiar y pegar directamente desde el documento web generado en Word a nuestra página o entrada en un blog también copiará ese kilométrico código.
Para
ello el truco que empleo es primero generar un documento.
Y
colocar unas marcas que son las (XXX), de esta forma, con “Control + F” busco
(XXX) y así puedo copiar y pegar únicamente el código que necesito:
Real-time HTML Editor
Ya entrados en gastos, en la ilustración de arriba podemos observar un visor HTML gratuito en línea (Real-time HTML Editor):
El cual es muy útil cuando vas a anidar un video de YouTube o algún documento que necesites insertar a tu código y que, por ejemplo, deseas ajustar su tamaño como vemos en el ejemplo subrayado en rojo, donde configuramos y vemos en tiempo real lo ancho (Width) y lo alto (High):
Quackit
Para las personas que desean tener una introducción sobre cómo programar un documento web recomiendo un editor en línea llamado: Quackit, que nos provee las herramientas necesarias para hacerlo gratuitamente:
Esta herramienta ya por default te provee los códigos de apertura:
Este editor añade en el <html>, <head>, <title> y <body>, así como la <! DOCTYPE>. Estos elementos HTML está definidos una página web HTML.
<html> Lenguaje de programación.
<head> Cabecera del documento
<title> Título del documento.
<body> Cuerpo del documento.
Cabe mencionar que lo escrito dentro de la cabecera “head “ no es visible dentro del cuerpo “body” del documento, pero es importante para el navegador, los buscadores, etc.
Es importante observar en la ilustración que al abrirse una etiqueta, todas se han cerrado con la diagonal (/) excepto las etiquetas como <br /> que simbolizan espacios de línea.
Estilos
En el menú de estilos nos proporciona diferentes opciones que van desde letra de máquina de escribir hasta el de “contenedor especial” que es el primero marcado como “Estilo 1”
En código fuente estaría escrito así:
<div style="background: rgb(238, 238, 238); padding: 5px 10px; border: 1px solid rgb(204, 204, 204); border-image: none;"><tt>Estilo 1</tt></div><br />
<del>Estilo 2</del><br />
<big>Estilo 3</big><br />
<q>Estilo 4</q><br />
Donde en el primer estilo, lo que determina el color del fondo es el código [background: rgb(238, 238, 238)]. Relleno [Padding]. Los bordes y su color [border: 1px solid rgb(204, 204, 204); border-image: none;] y su fuente tipo máquina de escribir [<tt>]
En el estilo 2: <del> define el tachado. En el estilo 3 <big> aumenta el tamaño de la fuente y en el estilo 4 <q> nos entrecomilla las palabras.
Encabezados
Para añadir un encabezado Quackit posee un menú cortinas que al observar su código fuente nos provee de las etiquetas:
<h1>Formato 1</h1>
<h2>Formato 2</h2>
<h3>Formato 3</h3>
<h4>Formato 4</h4>
Lo cual es muy útil a la hora de generar un documento que tenga títulos, subtítulos, subtítulos de los subtítulos, etc. Ya que jerarquiza el nivel de lectura que van teniendo los apartados que conforman el cuerpo de nuestro documento HTML. Escrito directamente en un bloc de notas el “header” llega hasta seis niveles: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>
Tamaño y fuente
Lo que determina el tamaño de la fuente se programa de la siguiente manera:
<span style="font-size:10px;">
Vayamos por partes: El elemento <span> del lenguaje de marcado de hipertexto (HTML), la etiqueta <span> se utiliza exclusivamente para el formato y los efectos sobre el texto que se muestra en el documento.³
Lo que determina los puntos de la letra es el “font-size:” ya que según el número de pixeles que determinemos representará las dimensiones del texto.
En cuanto a las fuentes, estarán representadas en pantalla según estén instaladas en nuestro sistema operativo, por ejemplo:
En tamaño 1 tenemos el código: <span style="font-family:verdana,geneva,sans-serif;">
En tamaño 2: <span style="font-family:courier new,courier,monospace;">
Tamaño 3: <span style="font-family:comic sans ms,cursive;">
Y tamaño 4: <span style="font-family:georgia,serif;">
Por eso, hay veces que en nuestros celulares podemos llegar a observar representado en pantalla de diferente manera que en la PC, ya que son más limitadas las fuentes instaladas en los móviles que en una computadora.
Hay que notar que nuevamente hemos abierto un código del tipo “span” por lo que tras aquél texto que vayamos a programar debemos cerrarlo: </span></span>
Ya que tenemos un span de tamaño y otro para el de la fuente.
Color de fuente y de fondo
Otros dos de los “span style” son el color y el fondo.
El color tanto de la fuente lo determina el código:
<span style="color:#FF0000;">
Y el color del fondo lo determina:
<span style="background-color:#000000;">
Y aquí es donde me apasiona tanto el tema y la búsqueda de más herramientas en línea que son gratuitas. Por ejemplo contamos con la página: Códigos de colores HTML:
Su selector de colores HTML es muy útil para encontrar los códigos de los colores deseados, ya que sólo es hacer uso de la barra de desplazamiento vertical para elegir el color y después con el mouse seleccionar el tono de color deseado para obtener su código, los cuales puedes ir guardando según necesites. Incluso si se tiene un código a la mano y no se sabe qué color obtendremos, lo insertamos en el campo que dice: “Introduzca su código de color”.
Para el color del fondo tenemos otra herramienta y es la
página de la Tabla de colores
La cual está diseñada para ayudar a encontrar la combinación
ideal entre los colores de fondo y los colores de las fuentes de nuestro sitio. Por ejemplo:
El color Light Goldenrod Yellow [(HEX) #FAFAD2] [(RGB)250,250,210] casi no podemos verlo, pero al irle dando a cualquiera de los botones que dicen “OK” podemos ir buscando el que le dé mejor presentación:
Light Goldenrod Yellow [(HEX) #FAFAD2] perfectamente puede leerse con un fondo Naranja [(Hex) #FFA500] [(RGB) 255, 165, 0].
Y por último con respecto al color, comparto Adobe Color CC (antes llamada Adobe kuler).
Esta calculadora te sugiere al introducir un código
Hexadecimal o RGB otros colores que análogos, monocromáticos, complementarios,
etcétera, lo cual nos servirá para ir generando un proyecto cuya paleta de
colores sea armónica.
La función del ícono de la cámara fotográfica sirve
para calcular los códigos de los colores Claros, intensos, oscuros, etcétera
que predomina en una imagen que ya poseamos en nuestra pc.
Inserción de elementos en una página
Imágenes
Continuando con el editor en línea Quackit, entre los elementos que nos permite insertar son imágenes, las cuales nos dan distintas funciones que iremos descifrando en el código que nos arroje:
Una vez que hemos rellenado los datos que necesitamos, desglosaremos el hipervínculo para comprender su programación:
<a href="https://www.facebook.com/objectumcomics/" target="_blank"><img src="http://i5.photobucket.com/albums/y197/caretos/blogger/uno_zpsibjxwn0m.jpg" style="border-width: 5px; border-style: solid; width: 400px; height: 400px;" /></a>
Un destino:
1.- <a href="https://www.facebook.com/objectumcomics/" target="_blank">
Una vez que la imagen sea visualizada en la pantalla, al dar clic sobre ella nos está llevando a la página: “https://www.facebook.com/objectumcomics/” “target =_blank” nos indica que la ruta a esa página sea a una pestaña nueva.
2.- <img src="http://i5.photobucket.com/albums/y197/caretos/blogger/uno_zpsibjxwn0m.jpg" width: 400px; height: 400px;" />
Aquí estamos definiendo que la imagen alojada en photobucket debe tener un ancho y largo de 400 pixeles.
Nunca lo olvides: “width” es anchura y “height” altura.
3.- Por último la línea: style="border-width: 5px; border-style: solid;
Indica que a la imagen le estamos dando un borde de cinco pixeles, los bordes casi no se usan, aunque si deben formar parte de un diseño ya sabes que para que sean más anchos o delgados influye el número que en este caso es: 5px.
Elemento flash
Esta herramienta sirve para anidar un elemento programado en flash como un video, una serie de diapositivas, etc. En este caso entré a la página para buscar un (.swf) que es la extensión que se usa para los elementos flash:
http://www.cartoonnetwork.com.mx/juego/lego-star-wars-la-amenaza-padawan-ataque-de-ases
Como hay veces que el editor en línea no sirve para códigos más complejos como éste:
<object width="770" height="480" id="gamePlaceholder" data="http://tbsila.cdn.turner.com/toonla/images/cn30/content/84/game/ataque-de-ases/spanish/Ace Assalut_ES/game.swf" type="application/x-shockwave-flash" style="visibility: visible;"><param name="allowscriptaccess" value="always"><param name="allownetworking" value="all"><param name="allowfullscreen" value="false"><param name="wmode" value="opaque"><param name="bgcolor" value="#8d8d8d"><param name="base" value="http://tbsila.cdn.turner.com/toonla/images/cn30/content/84/game/ataque-de-ases/spanish/Ace Assalut_ES/game.swf"></object>
Una opción que tienes es explorar con el propio navegador tomar el código del objeto y pegarlo en el visor para ir limpiando el código hasta tener lo que realmente se necesita para poder anidarlo en una página:
Tablas en HTML
Definitivamente generar tablas en HTML es otro mundo. En lo personal prefiero generarlas en Word (con el truco de limpieza de código que inicialmente expuse) ya que generar una tabla de este tipo:
Definitivamente generar tablas en HTML es otro mundo. En lo personal prefiero generarlas en Word (con el truco de limpieza de código que inicialmente expuse) ya que generar una tabla de este tipo:
Pros y contras de generar una tabla en word
| |
Pros
|
Contras
|
Celda título fácil de hacer.
|
Hay que saber limpiar el código basura de Word.
|
Sus herramientas minimizan tiempo.
|
Hay que calcular dimensiones.
|
Tiempo de hechura en Quackit
4:50
El código es:
Analicemos el código:
<table border="1" (Borde de la tabla) cellpadding="1" cellspacing="1" (espacio que habrá en el texto dentro de la celda a lo alto) style="width: 500px;" (anchura de la celda)>
<tbody> (cuerpo de la tabla)
<tr> borde exterior de la celda.
<td> borde interior de la celda.
<img alt="happy" height="23" src="www.ejemplo/emoticonos/feliz.png" title="happy" width="23" />
O que predefinidos, se escribe dos puntos y paréntesis derecho () el emoticón presenta de manera programada la sonrisa. Aunque otra opción es presentar símbolo de texto Unicode que nos provean símbolos ya establecidos:
♪♫☮ ☯✂✉♨❀ ✿☃☎
En este link tenemos una colección de ellos, así como de caracteres especiales:
http://libretadesalon.blogspot.mx/2014/02/simbolos-matematicos-y-astronomicos-en.html
https://www.123contactform.com/index.php?p=login&pactionafter=publish&id=522492&from=firsttime
http://www.slideshare.net/
http://hex2rgba.devoth.com/
http://fsymbols.com/es/generadores/smallcaps/
http://html-color-codes.info/codigos-de-colores-hexadecimales/
http://www.psicologiadelcolor.es/colores-psicologicos/
http://www.quackit.com/html/online-html-editor/full/
https://developers.facebook.com/docs/javascript/quickstart
http://htmledit.squarefree.com/
http://www.virtualnauta.com/tabla-de-colores
https://color.adobe.com/es/create/color-wheel/?base=2&rule=Compound&selected=2&name=Mi%20tema%20de%20Color&mode=rgb&rgbvalues=0.8,0.31879999999986463,0.07999999999999999,0.6,0.3593999999999323,0.24,1,0.03999999999996362,0,0.25,1,0.3082210242586143,0.2622724252493572,0.8,0.07999999999999999&swatchOrder=0,1,2,3,4
http://vectorish.com/
https://icomoon.io/app/#/select/library
https://www.vecteezy.com/
http://www.gutenberg.org/ebooks/search/?sort_order=random
https://pixabay.com/
http://artifexinopere.com/
http://www.gratisography.com/
http://www.plaintextures.com/
http://www.dafont.com/es/
<table border="1" (Borde de la tabla) cellpadding="1" cellspacing="1" (espacio que habrá en el texto dentro de la celda a lo alto) style="width: 500px;" (anchura de la celda)>
<tbody> (cuerpo de la tabla)
<tr> borde exterior de la celda.
<td> borde interior de la celda.
Fijar color a la tabla⁴<table bgcolor= "#00FFFF" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Fijar el color a la fila<table border="1" cellpadding="1" cellspacing="1">
<tr bgcolor= "#00FFFF" >
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
<tr bgcolor= "#00FFFF" >
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Para cambiar el color a la celda<table border="1" cellpadding="1" cellspacing="1">
<tr >
<td bgcolor= "#00FFFF" >Ene</td>
<td>Feb</td>
<td bgcolor= "#00FFFF" >Mar</td>
</tr>
<tr>
<td>Abr</td>
<td bgcolor= "#00FFFF" >May</td>
<td>Jun</td>
</tr>
</table>
Resultado
<tr >
<td bgcolor= "#00FFFF" >Ene</td>
<td>Feb</td>
<td bgcolor= "#00FFFF" >Mar</td>
</tr>
<tr>
<td>Abr</td>
<td bgcolor= "#00FFFF" >May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Para cambiar el color del borde<table bordercolor = "#0000FF" border="8" cellpadding="1" cellspacing="1">
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Para cambiar el color del borde en dos tonos <table bordercolordark="#999933" bordercolorlight="#CCCC66" border="8" cellpadding="1" cellspacing="1">
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Separadores
Para el caso que se quiera dividir por secciones algún documento, <hr /> te genera una línea horizontal a lo ancho del documento, justo así:Emoticones y caracteres especiales
Los emoticones pueden estar configurados para insertarse mediante un panel que ya tiene configuradas las imágenes que insertará:<img alt="happy" height="23" src="www.ejemplo/emoticonos/feliz.png" title="happy" width="23" />
O que predefinidos, se escribe dos puntos y paréntesis derecho () el emoticón presenta de manera programada la sonrisa. Aunque otra opción es presentar símbolo de texto Unicode que nos provean símbolos ya establecidos:
♪♫☮ ☯✂✉♨❀ ✿☃☎
En este link tenemos una colección de ellos, así como de caracteres especiales:
http://libretadesalon.blogspot.mx/2014/02/simbolos-matematicos-y-astronomicos-en.html
Herramientas gratuitas online para HTML y diseño en general
http://www.onlineocr.net/default.aspxhttps://www.123contactform.com/index.php?p=login&pactionafter=publish&id=522492&from=firsttime
http://www.slideshare.net/
http://hex2rgba.devoth.com/
http://fsymbols.com/es/generadores/smallcaps/
http://html-color-codes.info/codigos-de-colores-hexadecimales/
http://www.psicologiadelcolor.es/colores-psicologicos/
http://www.quackit.com/html/online-html-editor/full/
https://developers.facebook.com/docs/javascript/quickstart
http://htmledit.squarefree.com/
http://www.virtualnauta.com/tabla-de-colores
https://color.adobe.com/es/create/color-wheel/?base=2&rule=Compound&selected=2&name=Mi%20tema%20de%20Color&mode=rgb&rgbvalues=0.8,0.31879999999986463,0.07999999999999999,0.6,0.3593999999999323,0.24,1,0.03999999999996362,0,0.25,1,0.3082210242586143,0.2622724252493572,0.8,0.07999999999999999&swatchOrder=0,1,2,3,4
Recursos
Vectores y otros
http://www.freepik.es/http://vectorish.com/
https://icomoon.io/app/#/select/library
https://www.vecteezy.com/
Mapas de bits
http://etc.usf.edu/clipart/http://www.gutenberg.org/ebooks/search/?sort_order=random
https://pixabay.com/
http://artifexinopere.com/
http://www.gratisography.com/
http://www.plaintextures.com/
Fuentes tipográficas
http://font.downloadatoz.com/hot-fonts.htmlhttp://www.dafont.com/es/
¹https://es.wikipedia.org/wiki/P%C3%A1gina_web
²http://www.elfinanciero.com.mx/tech/por-primera-vez-la-publicidad-por-internet-supera-a-la-de-tv-en-eu.html
³http://www.ehowenespanol.com/span-html-info_269237/
http://www.mailxmail.com/curso-html/color-fondo-tablas
http://www.mailxmail.com/curso-html/color-fondo-tablas
0 comentarios:
Publicar un comentario