Tal y como os dije, voy a comenzar el libro de Campamento Web, ya que recientemente terminé el videojuego de Ziu Pet. Solo lleva seis páginas con un índice, introducción al libro, y la sección que habla de programas donde encontraréis los seis programas más útiles que hemos publicado en la web. Y ahora estoy escribiendo la sección que habla sobre la seguridad, donde encontraréis las definiciones de malware, spyware, virus, troyano, ciberdelincuente, spam... además de consejos para navegar seguro y algunos antivirus y antispyware. Además, habrá otra sección con las mejores aplicaciones que hayamos publicado en la web, varios tutoriales (como el de cómo crear tu juego, cómo crear tu web...) y curiosidades. Además, quizás ponga algunos pasatiempos con sopas de letras, etc.
Si no eres bueno dibujando, estás harto de Photoshop y derivados, o quieres probar cosas nuevas, te presento Sumo Paint, una aplicación online para crear y editar imágenes. Tiene casi las mismas cosas que Photoshop, y me atrevería a decir que es hasta mejor.
En unos cinco minutos he creado esto:
Tiene una gran variedad de colores, pinceles, gradientes, efectos... Y no podrás parar de pintar y editar. Además, su uso es tan sencillo que no tendrás que ver ni un solo tutorial. ¿Qué, te animas?
Ya me planteé hace tiempo hacer una opinión personal del tema, pero no encontraba el momento adecuado para escribir. Bueno, vale, era por la pereza... Pero bueno, creo que ya va siendo hora de que, a pesar de todas las páginas web que hablan de esto, la mía se una a la batalla.
Yo, personalmente, prefiero Blogger, aunque Wordpress también tiene sus ventajas. He aquí la lista con una explicación de mis críticas:
Indexación Mal es sabido por los que usan Blogger que usando este servicio se aparecerá más en los buscadores. Realmente esto es falso, porque Blogger no indexa mejor en buscadores, si no que, al ser de Google, puede darte una ayuda mínima para aparecer más en las búsquedas, pero perfectamente un blog de Wordpress puede aparecer más que tú. Posiblemente, hasta se indexen mejor los blogs de Wordpress, aunque solo lo usé dos días para probarlo y no puedo afirmarlo con firmeza.
Espacio de memoria Blogger ofrece 1 Gb en imágenes y Wordpress 5 Gb, de forma gratuita. Pero si quieres tener más espacio, te sale más rentable Blogger, ya que para aumentar tu espacio, es mucho más barato que Wordpress.
Organización para tu administración A todo webmaster nos gusta tener un panel bien organizado para administrar nuestras noticias, comentarios, diseño... Como opinión personal, considero que Blogger tiene las secciones mejor organizadas.
Diseño de tu plantilla Yo siempre he tenido muy en cuenta la estética de un blog, lo considero algo fundamental para tener éxito, junto a un buen contenido. Blogger tiene más posibilidades de personalización, ya sea por el diseñador de plantillas que tiene o por la variedad de plantillas que puedes descargar de otros sitios. Wordpress tiene plantillas muy buenas y variadas, pero no puedes personalizarlas tanto como con Blogger.
Mi consejo final es probar dos los. Publica una entrada sin sentido, y mira el que mejor te convenga fijándote únicamente en las posibilidades que te otorga cada uno.
¿Y tú, cuál prefieres? Escríbenos un comentario con tu opinión ;)
Ya está terminado Ziu Pet, el videojuego oficial de Campamento Web. ¿Quieres descubrir la magia de cuidar a un dragón? Ahora puedes gracias a este juego. ¡Y no te olvides de registrarte en el foro!
Ya que es San Valentín, aprovecho para alegrar a todos aquellos que no hayan recibido nada (como yo), regalando unas imágenes y chistes que he sacado por algunos sitios. ¡Aquí va mi regalo de San Valentín!
- Sabes querida, cuando hablas me recuerdas al mar.
- ¡Qué lindo mi amor! No sabía que te impresionara tanto.
- No me impresionas... ¡¡me mareas!!
Dos amigos: - Me voy a divorciar. - Qué me dices. ¿Tu mujer es infiel por casualidad? - No, por costumbre.
- Cariño, hace tiempo que no me dices nada con amor.
Para no perderte y coger práctica, haz un pequeño videojuego con lo más importante de la 1ª y 2ª parte. Usa lo que quieras de cada una, pero haz un ejemplo para practicar.
¿Cansado de tener que descargar programas, investigar por varios sitios web para poder redondear tus imágenes? Pues con RoundPic podrás poner bordes a tus imágenes de forma online, y cómo no, gratis. Solo tienes que subir la imagen, y darle a "Round it!", en un abrir y cerrar y de ojos, tendrás tu imagen lista con bordes, como esta:
Si quieres crear una insignia con buen estilo, te presento Web2.0Badges, una web que te permitirá crear, de forma online y gratuita, unas estampas como estas:
Solo tenéis que elegir el estilo de la insignia, poner tu texto, y poco más. ¿Véis que sencillo? ¡Ahora es tu turno, diseña insignias!
Es increíble, pero a mis siete años dedicándome a la música, todavía no he abierto ninguna web dedicada a la música, aun siendo lo que más amo en mi vida, antes que a los ordenadores. Con un ordenador se pueden hacer muchas cosas, sí, pero todo está ya inventado, tú solo aprendes lo que inventan, pero... con la música no. ¿Qué te parecería componer, expresar tus emociones, hacer comunicar a alguien mediante música lo que quieras? Yo he compuesto muchas canciones, pero ninguna de ellas ha salido más allá de Youtube y mis amigos, con apenas visitas. Pero bueno, aunque no tenga un gran éxito y no le dedicaré tanto como a esta web, voy a estrenar Tinta de música, un libro fantástico donde aprenderéis armonía (para componer), consejos para tus composiciones, algunas obras de ejemplo, un poco de historia de la música y algunas partituras escritas por mí. El libro no lo comenzaré todavía, solo aviso.
Tengo muchas tareas pendientes, y esta es una nueva que se suma a la lista. Recordemos todo lo que tengo que hacer:
Qué ocurrirá si formateo mi ordenador... El formateo del ordenador lleva consigo una gran pérdida: todos tus archivos se eliminarán: los programas, imágenes, vídeos, carpetas... Formatear el ordenador significa limpiarlo completamente, de forma que quedará todo como cuando lo compraste. Normalmente, el ordenador se formatea cuando va demasiado lento, ya sea por tener muchas cosas instaladas u otros.
Antes de formatear... Una forma sencilla de mantener tus archivos es guardándolos en un CD o USB. De esta forma, cuando formatees el ordenador, seguirás teniendo tus archivos de antes en el CD o USB y solo tendrás que pasarlos de nuevo al ordenador. Pero solo mete lo que sea imprescindible, ya que si no, volverás a estar como antes y formatear el ordenador no habrá servido de nada.
Yo no sé cómo formatear el ordenador, pero sí que me lo han formateado, así que solo puedo otorgaros esta información. Espero que al menos, os sea un poco útil para guiaros y pensároslo antes de formatearlo.
Posiblemente sea anticipado para anunciar, sí, pero no puedo esperarme a lanzar la noticia. Durante estos meses (desde verano del 2011), he estado trabajando profundamente en el videojuego de Campamento Web, llamado Ziu Pet. El videojuego está en su fase final. He enviado a algunos un adelanto del videojuego para que lo prueben y me digan fallos y mejoras, y cuando todo esté controlado, y viendo que no hay errores para jugar, y que está mejorado al máximo, lo anunciaré.
Pero visto que la encuesta de que si queríais un libro de Campamento Web ha sido, por mucha diferencia, el "Sí", voy a trabajar en el libro en cuanto termine el videojuego, que en un mes como mucho estará terminado sin errores. El libro tendrá de todo: programas, tutoriales, consejos de seguridad, consejos para la web, cómo crear una página web... Un poco de lo que tenemos en la web, y otro poco que no tenemos, pero siempre de lo mejor. Cuando termine el libro, pasado algún tiempo, sacaré el CD de Campamento Web, que incluirá el videojuego de Ziu Pet, y el libro en .pdf. Posiblemente se me venga alguna idea más a la cabeza y ponga algo más, pero por ahora, eso es lo que hay.
Vamos a aprender a cómo poner distintas secciones en la web. Para eso necesitaremos otro documento del bloc de notas. En él tienes que pegarle el código exactamente igual que el que tienes en "index.html", pero quitando la parte del contenido.
Por ejemplo, si en "index.html" tienes puesto un texto de bienvenida, en este nuevo archivo lo eliminas y en su lugar, pones lo que quieras: una noticia relacionada con la sección, por ejemplo.
El procedimiento es el mismo, solo que el archivo puede llamarse "loquesea.html", pero que no sea "index.html".
Ahora vamos a nuestro panel de archivos FTP (como si fuésemos a publicar por primera vez nuestra página web) pero ahora subimos también nuestro nuevo archivo. En mi caso, se llama "pag_web.html". ¿Véis? Está el "index.html" que es la portada de la web, y "pag_web.html" que es el mismo código (así que el diseño de la web es el mismo), pero con distintas noticias.
Ahora el último paso es añadir un enlace. Así que solo tienes que hacer como si fueses a poner un enlace normal, pero añadiendo el nombre de "pag_web.html" (en mi caso). Un ejemplo de enlace sería: <a href="pag_web.html"><img src="http://dl.dropbox.com/u/55341396/creaweb.png" /></a> Solo tienes que poner el nombre del archivo. De esta forma, al hacer clic en la imagen, irás al archivo "pag_web.html" que acabas de incluir, como si fuese una sección nueva.
Como vemos, hemos creado una variable #wrapper, #contenido y #sidebar, del cual hemos puesto un tamaño y un color de fondo.
El wrapper es todo el espacio que va a ocupar la página web (el contenido más la sidebar) y hemos puesto que tenga 1.000 píxeles, que es lo que se suele poner. Si quisieses que el contenido o la sidebar fuese más pequeño o más grande, ajustas los px pero teniendo en cuenta de que entre los dos deben sumar el valor del wrapper.
Después hemos puesto el contenido y la sidebar, y vemos que entre las dos suman 1.000.
En la segunda parte del código vemos que el wrapper se divide a su vez en "contenido" y "sidebar", y ahí es donde pondremos el contenido de cada uno.
Eso es todo, pero por si quedan algunas dudas, voy a poner un ejemplo de la segunda parte del código (la primera parte creo que es fácil)
<div id="wrapper">
<div id="contenido">
Bienvenidos a la web de Campamento Web. Esto es un ejemplo de lo que podrás crear con una sidebar. Este es el contenido con las noticias o lo que quieras poner.
<div style="height:500px"></div>
</div>
<div id="sidebar"> Esto se ve en la sidebar, y esta es una imagen: <a href="http://campamentoweb.blogspot.com/2012/02/crea-tu-pagina-web-desde-cero.html"><img src="http://dl.dropbox.com/u/55341396/creaweb.png" /></a><div></div>
</div>
Como ves, puedes colocar tanto textos, como otros códigos HTML para colocar imágenes o lo que quieras.
Se habla bastante del cierre de Megaupload por la red y en conversaciones normales en la calle. Y cómo no, los ciberdelincuentes están aprovechándose de ello abriendo sitios que son como Megaupload.
Hace unos días se hablaba de que Anonymous abrió un nuevo Megaupload, pero me temía que fuese un rumor falso y por eso no publiqué de eso. Como bien pensaba, era todo falso. Ten mucho cuidado ahora, MEGAUPLOAD NO EXISTIRÁ, NI VOLVERÁ A EXISTIR, ¡JAMÁS! SE HA PERDIDO TODO. Así que no hagas caso de ninguna web que simule ser como Megaupload, Megavideo, etc, porque es falso y están empezando a tener virus para que se infecte tu ordenador.
Desde siempre he querido tener una web creada totalmente por mí. Sabemos que hay servicios que nos ofrecen muchísimas cosas para hacer una web o blog y además, de forma sencilla como Blogger, Wordpress... Pero imaginemos que estos servicios caen en algún momento... entonces, tu web también caerá.
Bueno, antes que nada deciros que puede ser tarea difícil, pero en verdad es muy fácil. Habrá muchos códigos, sí, pero es muy fácil aprender todo. Además, pasaremos un buen rato aprendiendo.
Yo nunca he hecho esto, así que tampoco soy un profesional.
¿Estás preparado para crear una web totalmente tuya?
ANTES DE EMPEZAR...
Los códigos los pondremos en un bloc de notas. Será lo que nos servirá para hacer la web, aunque creas que no. Recuerda que tienes que ponerle de nombre index.html, aunque venga predefinido con el formato .txt.
1. Creando la base
Para comenzar, haremos un pequeño código en HTML. Ya sabes, todos los códigos tendremos que ponerlos en un archivo del bloc de notas con el nombre de index.html.
<html>
<head>
<title>Título de tu web</title>
</head>
<body>
¡Bienvenido!
<p> Esta es una web de prueba </p>
</body>
</html>
Todos los códigos que se hagan en HTML deben ir entre <html> y </html> y dentro, aparecerán los demás:
- <head> </head>: entre estos códigos se pone lo que va dentro de la cabecera/título, también encerrado entre <title> </title>
- <body> </body>: aquí irá encerrado los códigos de lo que queda en la web.
- <p> </p>: es para poner un párrafo.
2. Dando color
Vamos a aprender cómo poner color de fondo, y color de texto.
Para eso, agregaremos a nuestro primer código lo que está en negrita:
<html>
<head>
<title>Título de tu web</title>
</head>
<body bgcolor="#FFFFFF" text="#FFFFFF">
¡Bienvenido!
<p> Esta es una web de prueba </p>
</body>
</html>
En "bgcolor" va el color hexadecimal del color de fondo de la web, y en "text", el color hexadecimal de color del texto.
3. Modificar el texto
Ya sabemos algunas cosas básicas, pero con estas etiquetas podrás modificar los textos y el contenido:
- <br> sirve para hacer saltos de línea. Por ejemplo:
Hola <br>
Estoy aquí.
Ese "Hola" se vería arriba, y "Estoy aquí", como si hubieses presionado la tecla "Enter".
- <hr> sirve para hacer una línea separadora. Por ejemplo:
Hola <hr>
Adiós
Se vería:
Hola
______________
Adiós
- <hx> sirve para hacer títulos. Ese "x" tienes que cambiarlo por un número (1,2,3...) y mientras mayor sea, más grande será la letra. Además, recuerda que este código debes encerrarlo con </hx>. Por ejemplo:
<h1>ejemplo</h1>
Se vería:
Ejemplo
- <p> ya he dicho en la lección 1 que es para poner párrafos.
- <center> es para centrar. También debe cerrarse el código con </center>. Por ejemplo:
<center>
Buenas tardes.
</center>
Se vería:
Buenas tardes
- Algunas técnicas para modificar texto:
<b> Texto </b> para poner texto en negrita.
<i> Texto </i> para poner texto en cursiva.
<u> Texto </u> para poner texto subrayado.
<strike> Texto </strike> para poner texto tachado.
<big> Texto </big> para poner texto grande.
<small> Texto </small> para poner texto pequeño.
4. Añadiendo imágenes y enlaces
Hasta ahora hemos visto lo más importante para que puedas organizar al menos, un inicio en tu web. Pero todavía se ve muy simple y sin estilo. Entonces, para que se quede todo más bonito, deberemos agregar imágenes. Para eso, solo agrega este código: <img src="URL DE LA IMAGEN" border="0" alt="" />
Y sustituye URL DE LA IMAGEN por la dirección de la imagen. Si quieres hacer que al hacer clic en la imagen vayas a otro sitio, pon esto:
<a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div>
Ya sabes, todo esto debe ir entre <body> y </body>, al igual que todas las etiquetas que hemos visto anteriormente (excepto si quieres modificar el título de la web)
Para las imágenes eso es todo. Pero si quieres poner enlaces en un texto pondremos lo siguiente: <a href="ENLACE">TEXTO</a></span>
Vamos a ver cómo estaría quedando nuestra web con un título, texto, fondo y una imagen:
¡Esto ya va cogiendo forma! ¿Quieres hacer todavía más cosas? ¡Pues vayamos a la siguiente parte!
5. Poner un menú, una sidebar y secciones - Menú: Es imprescindible tener un menú de navegación en tu web. Para hacerlo usaremos tablas que nos servirán para alinear los enlaces que formarán parte del menú. Puedes usar textos con enlaces, o imágenes con enlaces:
Este código muestra un menú vertical con enlaces en el texto:
<table border="1" cellpadding="4"><tbody>
<tr><td><a href="ENLACE">TITULO1</a></span></td>
<tr><td><a href="ENLACE">TITULO2</a></span></td>
<tr><td><a href="ENLACE">TITULO3</a></span></td>
</tbody></table>
Este código muestra un menú horizontal con enlaces en el texto:
<table border="1" cellpadding="4"><tbody>
<tr><td>
<a href="ENLACE">TITULO1</a></span>
</td> <td>
<a href="ENLACE">TITULO2</a></span>
</td> <td>
<a href="ENLACE">TITULO2</a></span>
</td></tr>
</tbody></table>
Este código muestra un menú vertical con enlaces en imágenes:
<table border="1" cellpadding="4"><tbody>
<tr><td><a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div></td>
<tr><td><a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div></td>
<tr><td><a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div></td>
</tbody></table>
Este código muestra un menú horizontal con enlaces en imágenes:
<table border="1" cellpadding="4"><tbody>
<tr><td>
<a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div>
</td> <td>
<a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div>
</td> <td>
<a href="ENLACE"><img src="URL DE LA IMAGEN" /></a><div>
</td></tr>
</tbody></table>
Menú horizontal con enlaces en imágenes
- Si no quieres bordes cambia el valor de "border" y "cellpadding" por 0.
- Para cambiar el tamaño de las imágenes usa este código:
<img src="URL DE LA IMAGEN"width=250 height=150 />
En width y height puedes cambiar el valor para modificar la altura y el ancho de la imagen.
- Para poner una imagen de fondo pega este código justo después de </head>:
<body background="URL DE LA IMAGEN">
- Para cambiar la fuente de letra usa este código:
<font face="FUENTE DE LETRA">TEXTO</font>
- Para aparecer más en los buscadores pon debajo de <head> este código:
<meta name="description" content="DESCRIPCIÓN DE TU WEB " />
Pon una descripción que incluya palabras clave de tu página web. Por ejemplo, si tu web trata de animales procura que salgan palabras como "animales", "cuidados", "alimentación"...
7. Subir los archivos a un hosting
Ya tenemos todo creado, pero... ¿ahora qué hacemos? Pues pondremos nuestra web online para que todos puedan visitarla. Para eso necesitaremos alojarlo a un hosting.
Hay hostings de pago y otros gratis, pero ahora usaremos uno gratis, y es 000webhost. En este vídeo podrás aprender cómo usarlo:
Si no puedes verlo: regístrate y activa tu cuenta, entra al CPanel y entra en "File manage". Ahí, escribe la contraseña de tu cuenta nuevamente, y accede a la sección de "public_html". Sube tu archivo "index.html" (en "Upload") y mira que el nombre del archivo subido no tenga ".txt". Para quitárselo dale a "Rename". ¡Y ya está, tu web estará disponible en la dirección que hayas puesto al crear la cuenta!
Puede que el hosting donde alojes tu web cierre, pase a ser de pago... pero no hay problema. Solo busca otro donde alojar tus archivos, y todo seguirá como antes.
¡Y esto acaba aquí! Desde Campamento Web te deseamos mucha suerte en la creación de tu página web. Espero que este tutorial haya sido de tu agrado y hayas aprendido mucho. Para cualquier duda, opinión, aporte... ya sabes que puedes escribir un comentario.
Que yo sepa, hay una única forma de poner una lista con los últimos comentarios y el resultado es muy simple. Tan solo aparece el nombre del usuario y su comentario. Pero he descubierto una web con la que podrás tener una lista de los últimos comentarios en tu blog de forma muy sencilla y, además, muestra una imagen de los avatares de los comentaristas. (El avatar es la imagen que tienen en la cuenta)
Para conseguir este gadget solo entra aquí, y completa lo siguiente:
Recuerda que en la última pregunta que te hacen, tienes como respuesta un "No". Cámbiala por un "Sí", para no tener publicidad. Cuando le des a "Generate", haz clic en una imagen como la siguiente:
¡Y listo! Ya tienes en tu blog de Blogger, una bonita lista con los últimos comentarios.
