Mapa Visual de la Web 2.0

http://internality.com/web20/files/mapa-web-20.pdf

Comparativa Alojamientos Web

https://docs.google.com/document/d/1tg2I6we7Hqi9Gq0TV3e5HrqHu1ZfP5l9nflYCFJQ47M/edit?usp=sharing

Notepad++

Para la edición de páginas web podemos utilizar el Bloc de Notas de las aplicaciones de Windows, o bien un editor más potente como puede ser el Notepad++.

https://notepad-plus-plus.org

Es un editor de código fuente, de software libre, que soporta diferentes lenguajes de programación, y funciona en entorno MS Windows.

Entre las características principales del programa para la edición de lenguaje HTML podemos destacar las sigueintes:

• Coloreado de la síntaxis
• Cierre automático de las etiquetas.
• Opción de autocompletar las etiquetas y los atributos.
• Emparejamiento de la etiqueta incial con la etiqueta final.

HTML5

La nueva versión del lenguaje de programación creado por Tim Beerners-Lee, alcanzó el nivel de recomendación del W3C  (World Wide Web Consortium) en octubre de 2014.

El lenguaje HTML ó "lenguaje de marcas de hipertexto" se considera el lenguaje de programación más importante y el más utilizado, estando además ligado a la creación de la propia Web.

HTML se escribe en forma de "etiquetas" rodeadas por corchetes ángulares (<,>,/). 

Las etiquetas más comunes del lenguaje de programación son las siguientes:

<a href=”http://direccion”>TEXTO </a>	Vínculo a una dirección web
<b>TEXTO</b>	Texto en negrita
<br>	Salto de línea
<div></div>	Contenedor o bloque (puede contener texto o cualquier otro elemento)
<h1>TEXTO</h1>	Encabezado de una sección (desde h1 a h6)
<hr>	Inserta una línea o división
<i>TEXTO</i>	Texto en cursiva
<img src=”imagen.jpg” alt=””>	Inserta una imagen
<input>	Inserta una forma o control
<input type=”text”>	Entrada de texto
<input type=”button”>	Botón
<input type=”checkbox”>	Casilla
<ol></ol>	Lista ordenada
<ul></ul>	Lista desordenada
<p>TEXTO</p>	Inserta un párrafo
<script></script>	Inserta un código que ejecuta una función
<span></span>	Para darle estructura al contenido
<table></table>	Inserta una tabla
<textarea>TEXTO<textarea>	Inserta un cuadro de texto

Para aprender HTML : http://www.w3schools.com/

Herramientas de prototipado

Para la elaboración de prototipos de páginas web existen una serie de herramientas online que podemos utilizar, para la elaboración de diagramas de flujo, wireframes y mockups.

Algunas son gratuitas, como la siguiente:

http://pencil.evolus.vn/

Con esta herramienta se pueden realizar prototipos fáciles GUI, para interfaz de usuario de Android  y IOS con plantillas preinstaladas. 

Contiene formas de uso general, elementos de diagrama de flujo, escritorio/ formas de interfaz de usuario web, Android y IOS GUI formas.

También se pueden realizar diagramas de apoyo dibujo y tiene una galería de imagenes prediseñadas de OpenClipart.org.

Además los archivos son exportables en diferentes tipos de formatos: Png, como página Web, Pdf, Svg, documento de OpenOffice, etc.

Otras son de pago, como:

https://balsamiq.com/

Esta herramienta se utiliza para la elaboración de wireframes de baja fidelidad que se centren fundamentalmente en la funcionalidad. Permite la colaboración en línea de diferentes usuarios y pueden compartirse públicamente los proyectos. Cuenta con una colección de más de 75 modelos que se pueden utilizar. Su característica principal es que es rápida y fácil de usar.

https://www.gliffy.com/home/

Con esta herramienta podemos elaborar diagramas de flujo, de red, mapas de piso, organigramas, mapas mentales, diagramas de Venn, análisis FODA, wireframes, mapas de sitio, UML, dibujos técnicos, etc.

Aquí os dejo un Manual de usuario de la aplicación.