Los objetivos de este módulo son:

Conocer las principales fases que existen en el desarrollo de un sitio o aplicación web.
Conocer la estructura básica de una página web.
Aprender a crear páginas web sencillas con encabezados, párrafos y listas.
Aprender a crear enlaces entre las distintas páginas que forman un sitio web.
Conocer algunos editores de código HTML.

El desarrollo web

En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla, aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.

En el siguiente vídeo se explican las diferencias que existen entre los wireframes, los mockups y los prototipos, se explica la importancia de prototipar una aplicación o sitio web antes de implementarla y se muestran los diferentes tipos de diagramas que se emplean para representar la navegación, la estructura y el funcionamiento de una aplicación o sitio web.

Prototipado: wireframes, mockups y prototipos

Los planos son diagramas de organizacion y de funcionamiento blueprint, diagramas de contenido o flujo o mapa web.
Debe ser comprensive y reflejar con claridad la estructura, el flujo de navegación, y las relaciones entre los elementos.

En un prototipo no se debe incluir el diseño gráfico. Se debe presentar en gama de grises. Son dibujos estáticos. Sketching, es cuando realizamos bocetos de forma rápida e informal, con lápis y papel para transmitir una idea o concepto con rápidez y claridad.

Wireframes: es más elaborado e incluye el inventariado de contenido, es decir, qué contenido debe estar presente en cada página. Los elementos de la misma como cabeceras, enlaces, listas, formulario, etc.; el etiquetado de los vinculos o de los títulos; el layout (la ubicación, colocación y agrupación de los elementos de la página), así como la estrategia de navegación y la priorizacion de contenidos dentro de la misma. Debe contener tambien mediante notas asociadas a los elementos para indicar cómo deben mostrarse o para definir su comportamiento funcional.

Cuando se tiene una secuencia de WireFrames se habla de un StoryBoard.

Prototipos Funcionales: son prototipos de alta fidelidad, tambien llamados a menudo maquetas o mockups, que permiten detallar el proceso interactivo de una o varias tareas. Son prototipos o maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.

Nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación Web.

Planos: Diagramas de flujo, o mapa web.
Maquetas: Referencia visual de la estructura, organizacion e interacción a nivel de página.
-->Prototipos de baja fidelidad: Estáticos. -
->Sketch boceto rápido e informal con lapiz y papel
->WireFrame describe con más detalle e incluye notas asociadas a los elementos sobre cómo se
deben mostrar o su comportamiento funcional.

Prototipos de alta fidelidad: Dinámicos.
->Prototipos funcionales, maquetas dinámicas.

Pencil project: Permite diseñar el prototipo, tiene muchas herramientas, pero no permite un prototipo exportado en codigo html. Lo exporta en Imagen.

Axure: Permite crear el prototipo y generar el codigo HTML del mismo. Desventaja: que si te enfocas mucho en este prototipo es dificil que lo llegues a cambiar. Video de Axure. 30 días en trial.

Balsamiq: Permite crear el prototipo más informalmente, aunque esto no quiere decir que de manera fea. Pero se puede diseñar con menos color evitando el enamoramiento del diseño, y complicarse la existencia agregando colores. Bonito a la vista parece que lo hubieses diseñado a mano. Se debe descargar e instalar app.

Gliffy: herramienta online.

Lumzy: Esta herramienta es para uso online. http://lumzy.com/app/

WireframeSketcher: al usar el entorno de programación eclipse.

Visio: De Microsoft Office.

Adobe Ilustrator:

El lenguaje HTML

HTML son las siglas de HyperText Markup Language, que puede traducirse como lenguaje de marcas o marcado de hipertexto.El lenguaje HTML se emplea para crear las páginas web.

El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:

html
head
meta
title
link
style
script
body
p
a
strong
em
img
form
input
select
textarea
table
tr
th
td
blockquote
hr
ul
ol
li
div
span

Historia de HTML

Tim Berners Lee, es considerado el padre de la web por que desarrolló tres tecnologías fundamentales en las que se basa la web.

- HTML

- URL

- HTTP

Sobre HTML5

El 28 de octubre de 2014 el W3C publicó HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014, lo que supone que HTML5 ya tiene el rango de estándar.

¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportarán mágicamente.

HTML5 is a W3C Recommendation.

HTML: conceptos básicos (parte 1)

HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML.

El elemento es el componente básico de una página web. Una página web esta conformada por un conjunto de elementos.

HTML: conceptos básicos (parte 2)

HTML: conceptos básicos (parte 3)

Código de la lección:

<html>

<head>

</head>

<body>

<p><strong>HTML</strong> son las siglas de <em>HyperText Markup Language</em>,

que puede traducirse como lenguaje de marcas o marcado de hipertexto.

</p>

<p>El lenguaje HTML se emplea para crear las páginas web.

Es muy fácil ver el código HTML de una página web,

la opción exacta cambia de un navegador a otro y

también puede cambiar de una versión a otra de un mismo navegador,

pero suelen tener un nombre similar.

</p>

<p><strong>HTML</strong> se compone de etiquetas que se escriben

entre los símbolos menor que y mayor que.</p>

<h2>Historia de HTML</h2>

<p>Los inicios del lenguaje HTML se remontan al año 1990,

cuando <em>Tim Berners-Lee</em> creó la primera página web.</p>

<h2>Versiones de HTML</h2>

<p>Tim Berners-Lee definió la primera versión de HTML en el año 1991</p>

<p>En la actualidad, la última versión de HTML es HTML5</p>

</body>

</html>

Actividad:

<html>

<head>

<title>Tim Berners-Lee</title>

</head>

<body>

<h1>Tim Berners-Lee</h1>

Sir Timothy "Tim" John Berners-Lee (Londres, Reino Unido, 8 de junio de 1955) es un científico de la computación británico,

conocido por ser el padre de la Web. Estableció la primera comunicación entre un cliente y un servidor usando el protocolo <strong>HTTP</strong>

en noviembre de 1989. En octubre de 1994 fundó el <em>Consorcio de la World Wide Web</em> (<strong>W3C</strong>) con sede en el <strong>MIT</strong>,

para supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet.

<h2>Biografía</h2>

Nació en el sudoeste de Londres en 1955. Sus padres eran matemáticos y

formaron parte del equipo que construyó el Manchester Mark I (una de las primeras computadoras).

Durante el tiempo que estuvo en la universidad, construyó una computadora con una soldadora, circuitos <strong>TTL</strong>,

un procesador Motorola 68000 y un televisor viejo. Se graduó en física en 1976 en el <em>Queen's College de la Universidad de Oxford</em>.

Conoció a su primera esposa en este periodo. En 1978, trabajó en <em>D.G. Nash Limited</em> (también en <em>Poole</em>) escribió un sistema operativo.

Desarrollo de su carrera

Berners-Lee trabajó en el <strong>CERN</strong> desde junio hasta diciembre de 1980. Durante ese tiempo,

propuso un proyecto basado en el hipertexto para facilitar la forma de compartir y la puesta al día de la información entre investigadores.

En este periodo también construyó un programa llamado Enquire que no llegó a ver la luz.

Después de dejar el <strong>CERN</strong>, en 1980, se fue a trabajar a la empresa de <em>John Poole Image Computer Systems Ltd.</em>,

pero regresó al <strong>CERN</strong> otra vez en 1984.

En 1989, el <strong>CERN</strong> era el nodo de Internet más grande de Europa y Berners-Lee vio la oportunidad de unir Internet y el hipertexto

(<strong>HTTP</strong> y <strong>HTML</strong>), de lo que surgiría la World Wide Web. Desarrolló su primera propuesta de la Web en marzo de 1989,

pero no tuvo mucho eco, por lo que en 1990 y con la ayuda de Robert Cailliau, hicieron una revisión que fue aceptada por su gerente, Mike Sendall.

Usó ideas similares a las que había usado en el sistema Enquire para crear la World Wide Web, para esto diseñó y construyó el primer navegador

(llamado WorldWideWeb y desarrollado con NextStep) y el primer servidor web al que llamó <strong>httpd</strong> (HyperText Transfer Protocol daemon).

Fuente: <em>Wikipedia</em>

</body>

</html>

HTML: conceptos básicos (parte 4)

El título de la página:

Wikipedia HTML

Trainig W3

W3School
Elementos y etiquetas listados en tablas

Listas no numeradas
<lu>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</lu>

Listas numeradas:
<ol>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ol>

Listas de definición:
<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>

<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>

<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>

HTML: listas (1)

Actividad:
<html>
<head>
<title>Internet</title>
</head>

<body>
<h1>Internet</h1>
<h2>Contenido</h2>
<br>
<ol>
<li>Principales protocolos</li>
<li>Formas de conectarse</li>
</ol>
<br>
<ol>
<h2><li>Principales protocolos</li></h2>
<ul>
<li>Transmisión de Ficheros</li>
<ul>
<li>FTP</li>
</ul>
<li>Correo electrónico</li>
<ul>
<li>IMAP</li>
<li>POP</li>
<li>SMTP</li>
</ul>
</ul>
<h2><li>Formas de conectarse</li></h2>
<dl>
<dt>Red telefónica comutada (RTC)</dt>
<dd>La linea telefónica de toda la vida. Para acceder a Internet es necesario de un módem.</dd>
<dt>Red Digital de Servicios Integrados (RDSI)</dt>
<dd>Una línea telefónica especial. Para acceder a Internet es necesario un modém RDSI.</dd>
<dt>Línea de Abonado Digital Asimétrica (ADSL)</dt>
<dd>Se basa en la conversión de una línea RTC en una línea de alta velocidad. Para acceder a Internet es necesario un módem ADSL. </dd>
<dt>Fibra Óptica</dt>
<dd>Unalínea de fibra óptica. Normalmente la fibra óptica no llega hasta el usuario final, por lo que el término más apropiado es Fibra híbrida coaxial</dd>
</dl>
</ul>
</body>
</html>

HTML: enlaces

La Web se basa en dos conceptos: el hipertexto y la hipermedia.

El hipertexto permite crear, agregar, enlazar y compartir información con una estructura no secuencial que proviene de diversas fuentes por medio de enlaces. Los enlaces también se conocen como hipervínculos, vínculos o ligas (en Sudamérica). Y en inglés se emplean los términos hyperlink y link.

Nodos o secciones: contienen información accesible para el usuario.
Enlaces Uniones o conexiones entre nodos.
ANclajes: Puntos de activación de los enlaces.

Tipos de enlaces:
- Intradocumentales:
Dentro del mismo documento, página.

Se manejan ID (destino) y en el enlace va precedido del simbolo #.

- Extradocumentales:

Actividad:

<h1>Los tres pilares de la Web</h1>

<a href='http://es.wikipedia.org/wiki/Tim_Berners-Lee'>Tim Berners-Lee</a> es considerado el padre de la Web porque desarrolló los tres elementos básicos para el funcionamiento de la Web:

HTML, siglas de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web.

Fuente: <a href='http://es.wikipedia.org/wiki/HTML'>HTML</a>, Wikipedia

Hypertext Transfer Protocol o HTTP (en español protocolo de transferencia de hipertexto) es el protocolo usado en cada transacción de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboración que culminó en 1999 con la publicación de una serie de RFC, el más importante de ellos es el RFC 2616 que especifica la versión 1.1.

Fuente: <a href='http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol'>HTTP</a>, Wikipedia

Un localizador de recursos uniforme o URL —siglas en inglés de Uniform Resource Locator— es un identificador de recursos uniforme (URI) cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo. Están formados por una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que designa recursos en una red, como Internet.

Fuente: <a href='http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme'>URL</a>, Wikipedia

HTML: problemas con los editores

Un editor de páginas web es un programa de ordenador, un software, diseñado para facilitar la creación y edición de páginas web basadas en HTML, CSS, JavaScript y otras tecnologías que se emplean en el desarrollo web.

HTML: tres errores típicos

Saltos de línea.
Espacios en blanco.
Referencias de caracteres (caracteres especiales).

Presentación del proyecto

Crear un sitio web formado por varias páginas conectadas mediante enlaces.

Qué tengo que hacer

Este curso tiene como objetivo que al finalizarlo seas capaz de crear y publicar un sitio web en Internet. ¿Qué sitio web? Te proponemos tres tipos de sitios web, pero puedes elegir otra temática:

Tu currículo: disponer de un currículo en la Web puede ser un elemento diferenciador a la hora de buscar empleo.
Identidad digital personal en la Web: un sitio web que represente tu marca digital como profesional.
Tu empresa: el sitio web de tu empresa (puede ser real o imaginaria).

A lo largo del curso tu sitio web irá creciendo en contenido y en funcionalidades, así que no intentes correr, ten paciencia. Y no intentes ser muy ambicioso: a Thomas Alva Edison se le atribuye la cita “No fracasé, sólo descubrí 999 maneras de como no hacer una bombilla”. Tú te encuentras en la misma situación: estás aprendiendo, vas a descubrir 999 maneras de como no hacer un sitio web.

Te sugerimos que no intentes crear un sitio web muy grande: de cinco a diez páginas es suficiente para poder probar todo lo que vas a aprender en este curso.

Como se te ha explicado en este módulo, el primer paso es prototipar tu sitio web. En una de las actividades que has realizado tenías que evaluar algunas herramientas que ayudan a crear prototipos. La herramienta ya la tienes pero ahora, ¿por dónde empiezas? Un buen punto de inicio es analizar el contenido y la estructura de otros sitios web similares al que vas a construir.

Una vez tengas definido el prototipo de tu sitio web puedes pasar a crearlo página por página. Para ello utiliza un editor de páginas web, ¿cuál? Recuerda la actividad que has realizado en la que tenías que analizar varios editores de páginas web y decidir el mejor desde tu punto de vista.

Ya tienes el tema de tu sitio web, ya tienes tu prototipo y ya tienes tu editor de páginas web. ¿Y ahora?

Comienza por la página principal y luego pasa a crear el resto de páginas web. Por ejemplo, si has decidido crear un sitio web para publicar tu currículo en la web, puedes crear estas páginas (lo primero que se indica es el título que le puedes poner a cada página):

“Tu nombre”: página principal con enlaces al resto de páginas del sitio web.
“Tu nombre - Datos personales”: página con los datos personales de contacto.
“Tu nombre - Formación académica”: página con la formación académica, la puedes estructurar en apartados según el tipo de formación (primaria, secundaria, superior, profesional, cursos).
“Tu nombre - Idiomas”: página con los conocimientos de idiomas (idioma, nivel, exámenes oficiales, estancias en el extranjero).
“Tu nombre - Experiencia profesional”: página con la experiencia profesional (empresa, puesto, labor desempeñada).

Por ahora no puedes hacer muchas cosas, no puedes poner imágenes, no puedes poner formularios, no puedes poner vídeos, etc. No te preocupes, en los próximos módulos aprenderás a hacer todo eso y mucho más.

¿Y la presentación visual? ¿Cómo se cambian los colores o el tipo de letra? Recuerda que todo eso se define con CSS (Cascading Style Sheets) y se tratará en la segunda parte de este curso. Por ahora te tienes que centrar en la estructura y contenido de tu sitio web.

Prototipos visuales de alta fidelidad

Evolución de los prototipos de baja a alta fidelidad, se muestran los principales atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), y cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).

El prototipo o diseño visual es la evolucion del mockup, un documento más elaborado y detallado.

Buscar un diseño que este acorde con lo que se quiere realizar.

http://www.webdesign-inspiration.com/web-designs/page/25

http://www.webcreme.com/

http://ohdeergames.com/

http://dblg.co.uk/

http://www.onthegrid.city/

http://www.goldsmithandco.com/

http://chicksfryhouse.com/

http://allenova.pro/

Para crear paletas de colores.

Elementos para complementar la creación.

Desarrollo Web

Buscar este blog

lunes, 23 de noviembre de 2015

Módulo 2: Cómo se escribe una página web