Hackear páginas Web

Aprende html, el lenguaje de la Web

superlentes-Mozilla

Nivel de dificultad: principiante

Coste: 0 euros

 

Una de las actividades propuestas por Mozilla dentro de su proyecto Webmaker para aprender todos los secretos de la web es “hakear la web”, personalizar páginas webs ya creadas con nuestros textos o imágenes. Una forma sencilla y divertida de empezar a conocer el lenguaje html.

Para ello, sigue estos sencillos pasos

 

Instala la herramienta 

Accede a la herramienta de Mozilla “Superlentes de rayos X”. Con estas gafas digitales podrás ver los códigos que se esconden detrás de las páginas web para darles el formato y cambiarlos de forma sencilla. Arrastra el cuadro amarillo donde pone “Activar Superlentes de rayos X” a la barra de favoritos de tu navegador, como indica la imagen.

Te recomiendo que utilices el navegador de Firefox, ya que las gafas no funcionan bien en todos los navegadores. Si no lo tienes instalado puedes descargarlo de esta página.

Si no tienes activada la “barra de marcadores” de tu navegador, te recomiendo que la actives dado que es la forma más cómoda de archivar tus páginas favoritas. La activas en el menú “ver” del navegador.

 

Accede a la página web que quieres hackear

Navega por la red, hasta encontrar una página que te gustaría personalizar con tus propios textos y fotos. Activa las “Superlente de rayos X” pinchando en la pestaña de tu barra de marcadores. Ahora puedes acceder a cualquier zona de la página que quieres personalizar dando a “enter” o a la tecla “R” de remix. Se abrirá un recuadro con los textos, imágenes y los códigos html asociados. Todos los cambios que hagas se producirán en tu “página virtual” no en la página de origen.

 

Cambia textos, formatos, imágenes o vídeos

Para cambiar los textos, sólo tienes que remplazarlos en el recuadro de la izquierda. En la derecha verás el diseño resultante. Pincha en “guardar para que se apliquen a la página que estás personalizando.

También puedes jugar con los códigos html para ver como varían los formatos.

Para cambiar las imágenes, sólo tienes que remplazar la url de la imagen que quieras. Busca en Internet una imagen que quieres que componga tu página, copia su Url o dirección de Internet y pégala remplazando la url de la imagen que quieres cambiar. Selecciona imágenes archivadas bajo licencia Creative Commons para su reutilización.

Si prefieres insertar un video en vez de una imagen no tienes más que poner la Url del vídeo que quieres publicar.

 

Comparte tus creaciones

Portada original

Portada original

Portada remezclada

Portada remezclada

Cuando hayas terminado, puedes grabar tu nueva página presionando el botón “P”. Tendrás que abrir una cuenta con tu correo electrónico. Pincha en registrarte y sigue las instrucciones. Al final del proceso, te dará la Url donde está guardada la página que has creado. Con esta Url puedes compartir tu diseño en cualquier red social de Internet.

 

Consigue tu diploma

Los “badges”, son los títulos o diplomas Internet. Lo ofrecen distintas instituciones para que puedas certificar tus habilidades y capacidades en tus curriculums virtuales. Cuando finalices esta actividad puedes pedir tu título o diploma de “Remixing:Marker”, un diploma que acredita que eres capaz de remezclar recursos de la web para crear algo nuevo.

 

Dónde encontrar más información

Curso gratuito HTML y CSS: Aprenda a crear sitios web mediante la estructuración y el estilo de sus páginas con HTML y CSS. Codeacademy

Curso gratuito html. Htlm.net

Curso gratuito html. W3schools. (Inglés)

Tutorial gratuito “Crear una Web simple”. Treehouse

Elementos básicos html , elaborado por TechKim (en inglés)

Todos los elementos html. Mozilla (en inglés)

Cool tools: herramientas útiles para crear tu Web. Wiki de Tech The Web

Artículos relacionados

  • Empezar con Arduino desde cero

    Empezar con Arduino desde cero

    Con menos de 20 euros y algunas horas de práctica, Arduino ofrece la posibilidad de crear increíbles proyectos interactivos,…

    0
    5
  • La batalla electoral hacia el 26 J, según Google

    La batalla electoral hacia el 26 J, según Google

    El uso masivo del buscador de Google en España y la expansión de internet a todos los rincones y...

    0
    0
  • Riesgos de las redes sociales

    Riesgos de las redes sociales

    Prohibir a tu hijo su uso, no los va a evitar.

    0
    1
  • Scratch

    Scratch

    “Cuando las personas aprenden a programar en Scratch, aprenden estrategias importantes para resolver problemas, diseñar proyectos, trabajar colaborativamente y…

    0
    1