Los Community Manager son las personas encargadas de gestionar las Redes Sociales y, aunque parezca una tarea sencilla o de conocimientos simples en habilidades sociales, comunicación, psicología, etc… también deben poseer conocimientos técnicos en lenguajes de programación utilizados en webs, blogs, etc… como el Html, JavaScript, Flash, etc.
Cuando gestionamos una página web o escribimos un artículo en un Blog con un editor de Html, el editor codifica todo lo que prescribimos en el Html automáticamente. Por un lado está la página web visible a todo el mundo, y por el otro, el código fuente con el que se prescribe durante su diseño. En el editor de Blogs como WordPress, nos aparece dos opciones mientras editamos nuestros artículo; Visual y HTML. En visual podemos ver el texto tal cuál vamos escribiendo como si fuera un editor de texto e imágenes, y en la pestaña Html, podemos visualizar el cuerpo de mensaje con sus comandos, variables y demás entrañas de programación. Si en cualquier Web que visualizamos pinchamos botón derecho, si nuestro navegador nos lo permite, debería aparecer una opción como ‘Codigo Fuente’ que nos permitiría ver lo que veríamos en el editor de Html durante el diseño.
Quién conocer el lenguaje Html, le es muy fácil escribir una entrada desde la sección Hml, aunque bastante más complejo. Por eso, es más sencillo usar el modo visual para confeccionar nuestras entradas.
Lo primero de todo será aprender a redireccionar enlaces o links a otras páginas, para usar esa información como ampliación de la misma. Si seleccionamos el icono en forma de eslabón, marcado en color verde, podremos incluir el enlace web en el apartado de url, es necesario incluir ‘http://’ delante de las ‘www’ para que reconozca bien la página.
O bien, si se trata de alguna de las entradas de nuestro blog lo que queremos redireccionar, podemos buscarle en el recuadro de más abajo también. En el recuadro de texto de enlace podemos escribir la letra, palabra o frase clave que aparecerá tal cual en el cuerpo del mensaje, seleccionar la casilla si queremos que nos abra una página nueva al hacerlo, sino se abriría sobre la misma, y finalmente, guardar cambios. Una vez guardados podremos tratar el enlace como texto “normal” seleccionándolo para incluirlo en negrita, subrayado, etc. Si pinchamos sobre el enlace, nos aparecerá la opción debajo para poder eliminarlo o editarlo.
#bricoKX: En caso que al subrayar el enlace para ponerlo en negrita, subrayado o cambio de color, nos diera algún fallo como que no obedece nuestra acción, intentarlo nuevamente un par o tres de veces, e incluso, seleccionarlo con un espacio en blanco más para que no falle.
Otro de los elementos importantes en un Blog es el contacto. En el menú de personalización de nuestras entradas podemos agregar algún Widget de contacto o seguimiento por correo electrónico, de manera que nuestros lectores puedan recibir feedback por correo electrónico o ponerse en contacto directo en caso de duda o urgencia.
A continuación, dejo un pequeño ejercicio de programación con algunas aspectos básicos para crear un cuerpo de mensaje en Html con las siguientes etiquetas;
<html>
<head>
<title>Reparación y Mantenimiento</title>
</head>
<body>
<p>Estás en la página<b>Reparación y Mantenimiento</b></p>
<p>Aquí encontraras ayuda con tus incidencias</p>
</body>
</html>
Ahora guardaremos el archivo con la extensión *.html a través del menú Archivo y seleccionamos la opción Guardar como. Escogemos el directorio donde deseamos guardarlo dándole un nombre, por ejemplo, index.html. En tipo de archivo seleccionamos ‘Todos los archivos’.
Una vez guardado, si abrimos el archivo veremos una página web muy básica que nos ha generado la edición en html anteriormente.
La primera etiqueta <html> es para indicar que se trata de un archivo programado con lenguaje html. La última etiqueta </html> es para indicar el final del archivo. Es como la primera pero con una barra inclinada antes de html.
Las páginas web constan de dos partes: el head y el body. El head es el encabezado de la página y el body el cuerpo de la página, lo que los visitantes ven.
Indicamos el comienzo del head mediante la etiqueta <head> y el final del head mediante la etiqueta </head> que significa fin del head.
En el head de una página hay que escribir el título de la página, y por eso hemos escrito la etiqueta <title> que significa título de la página. Cuando hemos terminado de escribir el título lo cerramos con la etiqueta </title>, es decir, entre las etiquetas <title> y </title> hay que escribir el título de la página. En este ejemplo hemos escrito: ‘Reparación y Mantenimiento’. El título no lo ve el visitante en la página propiamente dicha sino en la barra superior, la que está en lo más alto de la pantalla.
A continuación del cierre del head viene la etiqueta <body> y todo lo que escribamos entre <body> y el cierre del body </body>, es lo que se va a visualizar en el cuerpo de la página web.
Hemos comenzado el body con la etiqueta <p> que significa el comienzo de un párrafo y al finalizar el párrafo hemos escrito </p> que significa fin del párrafo. Entre <p> y </p> hemos escrito; Estás en la página <b> Reparación y Mantenimiento </b>
Las etiquetas <b> y </b> se usan para que salga en negrita lo que hayamos escrito entre ellas. Las etiquetas deben ir sin espacio con la frase, pero la frase en sí, si que debe llevar espacios donde corresponda para que aparezca tal cual.
La etiqueta <p> indica el comienzo de un nuevo párrafo y al cerrar este párrafo con una </p>, además, como ya no hemos querido continuar con la página hemos cerrado el body con la etiqueta </body>.
Como podemos observar, la barra en diagonal ‘/’ es la encargada de cerrar todas las etiquetas que se abren. A continuación del cierre del body, aparece la etiqueta </html> que expresa el fin del archivo html, es decir, el fin de la página.
En el head de la página solo hemos escrito la etiqueta <title> para escribir el titulo de la página, pero se pueden añadir muchas más, especialmente para que los buscadores web encuentren y clasifiquen nuestra página de acuerdo a su contenido.
Cuando escribimos una entrada en el blog, el editor del Blog escribe todas estas etiquetas automáticamente. Si por ejemplo, marcamos una frase y pulsamos en el icono de Negrita, el editor escribe la etiqueta de negrita <b> Aqui el texto que hayamos seleccionado </b>.
Pero estemos ante un editor de html o no, hay que conocer las bases del lenguaje html, que es más completo que un editor. Ya que, a veces, el editor no podrá realizar acciones que sí podremos realizar conociendo el lenguaje html.
El siguiente paso tras crear el cuerpo de mensaje ya guardado, sería subir el fichero index.html al servidor donde se aloja nuestra web, el hosting, con alguna aplicación ftp para que se pueda publicar. La mayoría de servidores exigen que la página principal se guarde como index.html, pero esto no es más que un término informático, el título de la web es lo que hemos indicado entre las etiquetas <title>Reparación y Mantenimiento</title>.
En el caso de los blogs, podemos, sino lo hemos prescrito directamente en el editor, copiar y pegar el cuerpo en el mismo editor. En el caso de tener un árbol con varios ficheros html que incluyan imágenes, habrán que tener en cuenta que nuestro hosting soporte para cargar ficheros previamente, o bien, usar los enlaces de las imágenes cargadas en otra web e incluídos en el cuerpo de mensajek con las siguientes etiquetas <img /> </ img>.
De acuerdo a los estándares de html solo un número reducido de etiquetas pueden ser incluidas en la sección head; <title>, <base>, <link>, <meta>, <style> y <script>;
La etiqueta link establece un enlace que solo puede aparecer en la sección head. Por ejemplo, un enlace a una página ubicada en una web de un dominio distinto al nuestro.
<head>
<link href=»http://www.paginaweb.com/fuentes.css» type=»text/css» rel=»stylesheet»>
</head>
La etiqueta style establece estilos dentro de la página. Por ejemplo, donde establece los colores blue y red:
<head>
<style type=»text/css»>
p {color:blue}
h2 {color:red}
</style>
</head>
La etiqueta script se utiliza para insertar scripts, aplicaciones automatizadas a través de enlaces en una página. Por ejemplo;
<head>
<script type= «text/javascript» src=»https://servikx.com/bricokx/bricokx.js»>
</head>
La etiqueta title se incluye en el head, y es la más importante para que nuestra página aparezca en los resultados de búsqueda de los buscadores como Google, Bing, etc.
La información que incluyamos en el head no será mostrada por el navegador, es decir, los visitantes no la verán, pero es de vital importancia internamente para que los navegadores y los motores de búsqueda localicen nuestra página.
La etiqueta <meta> es fundamental para que los buscadores clasifiquen nuestra página según sus contenidos y aparezca al realizar una búsqueda. Para clasificar las páginas web los buscadores como Google se fijan primero en la etiqueta <title> y después en la etiqueta <meta>. Existen varios tipos de etiquetas <meta>; la meta description y la meta keywords son las más determinantes para los buscadores, aunque existen más etiquetas del tipo meta.
La meta description se utiliza para describir el contenido de la página, y la meta keywords para incluir palabras clave, esto es, para resumir la página utilizando palabras clave.
Por ejemplo, completaríamos el código html de ejemplo anterior de la siguiente manera;
<html>
<head>
<title> Reparación y Mantenimiento </title>
<meta name=»description» content=»tutoriales de ayuda, informática, tecnología, hardware, software, social media, internet, redes»>
<meta name=»keywords» content=» bricokx, tutoriales, informática, tecnología, hardware, software, social media, internet, redes «>
</head>
<body>
<p>Estás en la página<b> Reparación y Mantenimiento </b></p>
<p>Aquí aprenderás recetas fáciles y deliciosas</p>
</body>
</html>
O sea, que primero especificamos el tipo de etiqueta meta que se trata, escribiendo name=, y después se le añade el contenido escribiendo content=
Aunque las etiquetas title, meta description y meta keywords son fundamentales para que los buscadores encuentren nuestra página, estos se fijan también en todas las frases y palabras que haya escritas en el body de la página, es decir, en la parte visible para el visitante. Por eso debemos escribir frases relevantes en toda la página, frases que un usuario de internet pueda escribir en su navegador al realizar una búsqueda.
Cuando ya tenemos preparado nuestro contenido para aparecer en los buscadores como Google, antes debemos indexarlo en sus sistemas a través del siguiente enlace para desarrolladores web. Es muy intuitivo y fácil de enviar. Para ello debemos acceder con nuestra cuenta de Google. Una vez dentro debemos introducir la dirección de la url que queremos indexar con http:// delante para que no haya ningún fallo de redireccionamiento.
El lenguaje html es extensamente complejo y no es mi objetivo alargar mucho más la parrafada del post, ya que para aprender a programar en condiciones es necesario empaparse de varios horas del curso respectivo de cada lenguaje, pero con estos principios básicos sobre el html son la base de la programación para diseñar las entrañas de una web o un weblog, además, añadiendo algunos otros lenguajes como php, css o Java en el documento base para enriquecer la base diseñada con el html. En Internet podemos encontrar innumerables manuales sobre el html, desde aprender a programar con él, como realizar búsquedas de elementos en particular como tablas, formularios o colores en html. Esto, si bien, es muy útil para utilizarlo para personalizar algunas redes sociales como Twitter para escoger el color o los enlaces de nuestro Time Line o muro de noticias.
Una de las páginas más completas para extender la información sobre el desarrollo web.
serviKX 4.0 © 