2.20. Prototipos visuales de alta fidelidad

2.20. Prototipos visuales de alta fidelidad

  marzo 20, 2018    Fernando López

---

En el vídeo Prototipado: wireframes, mockups y prototipos de la lección 2.4.,se te ha explicado que existen diferentes tipos de prototipos, de baja y alta fidelidad.

En el siguiente vídeo se explica la 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:

1. busca inspiración, 
2. paleta básica de colores, 
3. busca recursos gráficos, 
4. define las tipografías, 
5. recopila el material necesario),

y cinco consejos para empezar a diseñar:

1. trabaja en capas, 
2. de general a particular, 
3. no abuses de ciertos elementos, 
4. optimiza el tiempo, 
5. organización.

Listado para explorar con el software de diseño, practicar con las posibilidades creativas, inspirarte o resolver tus dudas técnicas:

https://design.tutsplus.com/articles/50-great-photoshop-tutorials-for-clever-beginners--psd-785

http://www.tutorialmagazine.com/

https://www.digitalartsonline.co.uk/tutorials/

http://spyrestudios.com/30-adobe-photoshop-illustrator-tutorials-for-web-designers/

https://designrfix.com/resources/60-adobe-photoshop-illustrator-tutorials

https://blog.spoongraphics.co.uk/category/tutorials

https://creativenerds.co.uk/inspiration/100-fresh-new-photoshop-and-illustrator-tutorials/

http://www.vandelaydesign.com/photoshop-illustrator-tutorials/

Listado de sitios para encontrar inspiración, buscar ideas o explorar tendencias:
http://www.webcreme.com/
http://www.webdesign-inspiration.com/
https://designyoutrust.com/
http://abduzeedo.com/
https://ffffound.com/

Teoría del color:
https://desarrolloweb.com/articulos/1444.php
https://www.kabytes.com/diseno/uso-de-los-colores-en-diseno-web/
http://www.abcdisegno.com/teoria-del-color/
http://www.abcdisegno.com/colores-para-la-web/


Generar paleta de colores:
http://paletton.com/#uid=12J0u0kllllaFw0g0qFqFg0w0aF
http://www.colorhexa.com/

Inspiración colores:
https://www.pinterest.es/manekibeader/inspirational-colour-palettes/
http://www.colourlovers.com/

Recursos gráficos gratuitos:
http://freelancefolder.com/25-sites-for-free-vector-files/
http://www.vectorvalley.com/
http://all-silhouettes.com/
http://www.bestfreewebresources.com/
http://www.bittbox.com/
http://psd.fanextra.com/
http://designbeep.com/
https://webdesignledger.com/

Uso de la tipografía y sus características así como encontrar tipos de letra para tus diseños:
Artículos tipografía en diseño web:
https://www.creativebloq.com/web-design/choose-web-fonts-1233034
https://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

Tendencias e inspiración tipográfica:
https://webdesignledger.com/21-examples-of-inspiring-typography-in-web-design/#97fa2e75c1

Recursos tipografía:
https://fonts.google.com/
https://www.fontsquirrel.com/
https://www.dafont.com/es/
http://www.fontfabric.com/
https://www.theleagueofmoveabletype.com/

Elementos de diseño:
https://www.johnlovett.com/design-overview
https://es.slideshare.net/contactofaum/elementos-de-diseo
https://www.ecured.cu/Elementos_b%C3%A1sicos_del_Dise%C3%B1o_Gr%C3%A1fico
http://www.cristalab.com/tutoriales/diseno-web-fundamentos-basicos-c63l/

Comunidades y blogs de diseño:
https://www.creativebloq.com/net-magazine
https://webdesignledger.com/
https://www.creativebloq.com/


Fuente: Actívate, Google España

Read More

2.15. Problemas con los editores

2.15. Problemas con los editores

  marzo 15, 2018    Fernando López

---

Pelearse por ver cuál es el mejor editor de HTML es una pérdida de tiempo. En la Wikipedia podéis encontrar una lista de editores de HTML. Algunos son gratuitos, mientras que otros son de pago; algunos son para Windows, mientras que otros son para Macintosh o para Linux. Así que, la oferta es muy variada y cada alumno puede elegir el que más le guste.

ACTIVIDAD 15
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.
El artículo Editor de páginas web de la Wikipedia clasifica este tipo de aplicaciones en tres tipos (la clasificación no es muy acertada, pero más vale algo que nada):
Editor de texto sin formato.
Editor de texto con ventanas.
Editor WYSIWYG.
En este curso no te recomendamos un editor de páginas web concreto. Tú debes buscar varios editores, los debes probar y debes decidir con cuál te encuentras más cómodo. Publica en el foro del curso los resultados de tu búsqueda:
La lista de editores de páginas web que has evaluado.
Las ventajas y desventajas de cada uno.
El editor de páginas web que has seleccionado.
Las razones que te han llevado a tomar esa decisión.

SOLUCIÓN ACTIVIDAD 15
Se supone que vamos a estar mucho tiempo editando código, por lo que un aspecto importante a tener en cuenta es la potencia de nuestro ordenador para analizar qué programas consumen más o menos recursos y conseguir ser más eficientes en nuestro trabajo.

Los expertos aconsejan que en los inicios es conveniente algo sencillo para aprender a introducir el código correctamente, programas como Notepad++ son perfectamente válidos para comenzar.

Hay una gran cantidad de editores de páginas web, la gran mayoría  muy potentes que facilitan en gran medida el trabajo de los desarrolladores.  Unos programas son más ligeros que otros, debemos valorar con cual nos sentimos más cómodos:

Notepad++ es muy ligero y entiendo que perfectamente válido tanto para principiantes como para expertos. Es solo para Sistema Operativo Windows.
En esta página podéis encontrar 10 excelentes herramientas alternativas del Notepad++ para Linux.

Dreamweaver solo para Sistema Operativo Windows.

En mi caso utilizo como único sistema operativo Linux, limitando algunas opciones como Notepad++, pero creo que hay alternativas más que suficientes.

Los que he probado son los siguientes:

Sublime Text es multiplataforma válido para Microsoft Windows, macOS y Linux. Se puede descargar y evaluar de forma gratuita. Sin embargo no es software libre o de código abierto y se debe obtener una licencia para su uso continuado, aunque la versión de evaluación es plenamente funcional y no tiene fecha de caducidad.
Es sin duda alguna el que más me gusta, me va genial, es muy liviano y tiene una interface muy amigable.  Instalando además el plugin Emmet es muy fácil la introducción de código.

Atom es parecido a Sublime Text, pero lo descarté porque en mi caso tarda más en cargar y va más lento.

AVISO IMPORTANTE
Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo
Atribución, No-Comercial. En caso de utilizarse este material o de la creación de un derivado, la atribución se debe
respetar citando la fuente como “Actívate, Google España 2016” y expresamente, si es posible, mediante un enlace
activo a​ ​https://www.google.es/activate. Revisado, enero 2016.

Read More

2.12. HTML: listas

2.12. HTML: listas

  marzo 12, 2018    Fernando López

---

El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas. Laslistas no ordenadas, las listas ordenadas y las listas de descripción.

Cada una de estas listas se crea con una etiqueta específica de HTML: <ul> para la lista no ordenada, <ol> para la lista ordenada y <dl> para la lista de descripción. Los elementos de las listas se definen de la siguiente forma. Para la lista no ordenada y la lista ordenada se emplea el elemento <li>. Para la lista de descripción se emplean los elementos <dt> y <dd>.

Vamos a verlo con detalle:

Ul es el acrónimo de unordered list, lista no ordenada. En una lista no ordenada, el orden de aparición de los elementos no es importante. Cada elemento de la lista se define con <li>, que es el acrónimo de list item. Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos. Por ejemplo, todo esto es una lista no ordenada. En el siguiente ejemplo, a la izquierda tenemos el código HTML que produce como resultado la lista no ordenada que aparece a la derecha.

El estilo de una lista se puede cambiar, para que en vez de un círculo relleno, un disco, sea el contorno del círculo o un rectángulo el elemento marcador. Antiguamente existía el atributo type en HTML que permitía cambiar el estilo de una lista no ordenada. Pero ese atributo ahora está obsoleto y no se debe de usar. En su lugar se debe emplear CSS, pero eso se verá en otro vídeo.

Ol es el acrónimo de ordered list, lista ordenada. En una lista ordenada, el orden de aparición de los elementos es importante. Cada elemento de la lista se define con <li>, que es el acrónimo de list item.
Los elementos de la lista se indican con números o letras. Por ejemplo, todo esto es una lista ordenada.

En el siguiente ejemplo, a la izquierda tenemos el código HTML que produce como resultado la lista ordenada que aparece a la derecha. Una lista ordenada puede hacer uso de los siguientes atributos que modifican su comportamiento.

En HTML4 y HTML5 se puede emplear el atributo start que permite indicar el valor inicial en el que debe comenzar la lista. También está el atributo type que permite indicar el tipo de numeración, como por ejemplo letras o números romanos. En HTML5 se ha añadido el atributo booleano reversed, que permite indicar que la numeración debe ser descendente.

En el siguiente ejemplo se muestran cinco listas ordenadas.
En la primera lista simplemente se ha empleado la etiqueta <ol> para definir la lista ordenada.
En las otras cuatro listas, se ha empleado el atributo type para modificar la numeración de las listas: letras mayúsculas, letras minúsculas, números romanos en mayúsculas y números romanos en minúsculas.

En el siguiente ejemplo se muestra el uso del atributo reversed para invertir el orden de numeración de las listas. El atributo reversed es un atributo booleano, lo que significa que sólo puede tomar un valor que es el mismo nombre del atributo. En este ejemplo se muestra el efecto del atributo reversed combinado con el atributo type.

Dl es el acrónimo de description list, lista de descripción, que se compone de términos. Cada término puede poseer cero o más descripciones. Cada término de la lista se define con <dt>. Cada descripción de un término se define con <dd>. Y los elementos no se indican con símbolos, números o letras, sino con un aumento del margen izquierdo, de la sangría izquierda.

La lista de descripción se emplea normalmente para definir un glosario o un diccionario. En el siguiente ejemplo, este código genera la lista que se muestra a la derecha. Podemos apreciar como las definiciones de cada término poseen una sangría o margen izquierdo.

En una lista de descripción, un término puede tener cero o varias descripciones. Por ejemplo, este código genera la lista de descripción que se muestra en la parte superior de la pantalla. En esta lista de descripción hay tres términos, el primero y el tercero poseen dos descripciones, pero el segundo una sola descripción.

Por último, en HTML también se pueden crear listas anidadas.

Una lista anidada es simplemente una lista dentro de otra, y se pueden combinar de cualquier forma. La lista que está dentro de otra se llama sublista. 

En el siguiente ejemplo, este código genera la lista que se muestra en la parte superior de la imagen. Esta lista posee tres niveles de anidamiento y está formada por tres listas no ordenadas. En el primer nivel se emplea como símbolo un disco, en el segundo un círculo y en el tercero un cuadrado sólido.

Y en este último ejemplo, se ha anidado una lista ordenada dentro de una lista no ordenada. A la derecha se muestra el resultado.

Fuente: http://youtu.be/V2ImdQdPqNE

https://www.google.es/activate​. Revisado, enero 2016.

Read More

2.11. HTML: conceptos básicos (parte 4)

2.11. HTML: conceptos básicos (parte 4)

  marzo 11, 2018    Fernando López

---

En las tres partes anteriores de este videotutorial sobre los conceptos básicos de HTML, hemos visto algunos aspectos de su vocabulario, es decir, de las palabras que forman el lenguaje, y de su gramática, es decir, sus reglas que nos indican cómo podemos combinar sus palabras, su vocabulario, para formar textos complejos.

Respecto al vocabulario, por ahora sólo conocemos estas etiquetas.

Respecto a la gramática, vamos a repasar las principales reglas que debes de tener en cuenta.
Muy importante, en HTML5 algunas de estas reglas se han relajado y ya no es necesario aplicarlas, pero yo te aconsejo que las sigas aplicando, ya que unas veces tendrás que escribir o mantener páginas web desarrolladas con HTML 4, XHTML 1 o HTML5. Así que, para que no te líes, te voy a dar las reglas que siempre son válidas en las tres versiones.

En primer lugar, las etiquetas siempre se tienen que cerrar. Por ejemplo, este fragmento de HTML es incorrecto porque la etiqueta <strong> y la etiqueta <p> no están cerradas.

Este otro fragmento es correcto, porque todas las etiquetas están correctamente cerradas.

Los elementos anidados deben tener un correcto orden de apertura/cierre: el que se abre último, debe cerrarse primero. Este fragmento de HTML es incorrecto porque la etiqueta <p> se ha abierto antes que la etiqueta <strong>, por lo que la etiqueta <p> se debe cerrar después que la etiqueta <strong>, no antes.
Este fragmento, este segundo fragmento sí que es correcto, los elementos <p> y <strong> están correctamente anidados.

Por otro lado, según la versión de HTML que se utilice, las etiquetas se pueden escribir en mayúsculas y minúsculas, o sólo en minúsculas.

Yo te recomiendo escribir las etiquetas siempre en minúsculas, aunque se puedan escribir en mayúsculas.

Los valores de los atributos deben siempre ir encerrados entre comillas simples o dobles. En alguna versión de HTML, los valores de los atributos se pueden escribir sin comillas. Sin embargo, esto es incorrecto en otras versiones, por lo que siempre hay que encerrar los valores de los atributos entre comillas dobles o comillas simples.

Para los nombres de los ficheros, de las páginas web, lo mejor es que te limites a utilizar las letras del alfabeto inglés, números, el guión y el guión bajo. Sí, se pueden usar más caracteres, pero te pueden dar problemas en algunas situaciones.

Y la extensión de las páginas web es “.htm” o “.html”.

Ahora, te propongo que veas el vídeo “Errores web: El título de la página”, de poco más de 4 minutos de duración. En este vídeo te explico para qué se usa el título, la etiqueta <title>, de una página web y te muestro algunos errores típicos que se cometen en muchos sitios web.

También te recomiendo que leas el artículo dedicado al lenguaje HTML que puedes encontrar en la Wikipedia. Con lo visto en estos vídeos no deberías tener problemas para entender la mayor parte de lo que se cuenta en este artículo.

También te recomiendo que leas el HTML/Training que ofrece el W3C. Hemos visto muy poco de HTML, veremos más cosas en otros vídeos, pero puedes intentar aprender algo más por tu cuenta. Este sitio web está en inglés, pero algunos de los materiales los podemos encontrar
traducidos al español.

Por supuesto, recuerda el sitio web W3Schools. En este sitio puedes encontrar un apartado de tutoriales.

Consulta el tutorial sobre HTML, al menos el apartado sobre conceptos básicos.

En la página del W3C puedes encontrar mucha información sobre HTML, pero recuerda, es un sitio web dirigido a profesionales y expertos, no para principiantes.

Puedes consultar la especificación oficial de HTML5, que por ahora es un documento de trabajo y no estará completada hasta el año 2014, por lo que puede sufrir numerosos cambios de aquí a entonces.

En la especificación de HTML5 puedes consultar la lista de elementos organizados por categoría, o la lista alfabética de los elementos, y la lista alfabética de los atributos. No te tienes que aprender estas listas de memoria, por supuesto, sólo tienes que intentar que te suenen algunos de los nombres de los elementos y de los atributos, y saber dónde encontrar estas listas para volver a ellas cuando las necesites.

Ahora te propongo dos ejercicios. Primero, te propongo que aprendas por ti mismo las etiquetas de HTML que son necesarias para crear listas no numeradas y numeradas. A continuación, intenta hacer una página web que sea tu currículo. Puede tener una apariencia
similar a este ejemplo que te muestro.

Normalmente, cuando explico lo que hemos visto en este vídeotutorial, lo primero que me preguntan los alumnos a continuación es “¿cómo le cambio el color, el tamaño o el tipo de letra al texto?”. Por ahora no podemos, recuerda que HTML sólo define la estructura y el contenido de las páginas web, no la presentación.

Paciencia, eso lo haremos cuando lleguemos al tema de CSS, las hojas de estilo en cascada que nos permitirán definir la presentación de nuestras páginas web.

Fuente: https://www.youtube.com/watch?v=YAaeTml3XqY

https://google.es/activate. 

Read More

2.10. HTML: conceptos básicos (parte 3)

2.10. HTML: conceptos básicos (parte 3)

  marzo 10, 2018    Fernando López

---

2.10. HTML: conceptos básicos (parte 3)

En la parte anterior de este videotutorial hemos creado una página web sencilla con el editor de textos Bloc de Notas del sistema operativo Microsoft Windows. En este vídeo vamos a usar un editor más potente, Notepad++, para seguir editando nuestra página web.

Notepad++ es un editor de textos gratuito para los sistemas operativos Microsoft Windows que se distribuye bajo licencia GPL.

Notepad++ lo puedes descargar desde su sitio web en diferentes formatos. Incluso, te puedes descargar el código fuente, por si te atreves a modificarlo.

Es muy ligero y rápido, y dispone de interesantes características, como syntax hightlight, opción que colorea la sintaxis del código que escribimos, la opción de autocompletar etiquetas, o el soporte de diferentes juegos de caracteres, incluyendo Unicode.

Además, Notepad++ dispone de un gran conjunto de plugins que amplía sus funciones.

Vamos a continuar con la página web que hicimos en el videotutorial anterior y la vamos a usar de ejemplo para aprender a trabajar con Notepad++.

Una vez que tengas instalado este programa en tu sistema operativo, cuando selecciones un fichero cualquiera y pulses el botón derecho del ratón, te aparecerá una opción “Edit with Notepad++” que te permite abrir rápidamente un fichero en Notepad++.

Aquí tenemos la página web que hicimos en el videotutorial anterior y vamos a añadirle algomás. Por ejemplo aquí, a continuación de HTML, vamos a escribir “, Hypertext Markup Language”. Y lo voy a etiquetar con la etiqueta <em> de énfasis.

Cuando yo empiezo a escribir la etiqueta <em> y la cierro, automáticamente este programa me escribe la etiqueta final o de cierre, que yo puedo cortarla y colocarla fácilmente al final del texto que quiero etiquetar.

Esta opción está disponible en Notepad++ si tenemos instalado el plugin TextFX. En concreto, esta opción, la de cerrar automáticamente las etiquetas, la tenemos disponible en el menú “TextFX Settings”, la opción “Autoclose XHTML/XML tag”.

Si yo la desactivo, cuando ahora escriba una etiqueta nueva, como vemos no se cierra, la tengo que cerrar yo manualmente. Sin embargo, si la vuelvo activar, “TextFX Settings, Autoclose”,
ahora escribo un párrafo y se cierra automáticamente.

Vamos a escribir algo más en la página web: “La versión actual de HTML es la 5, aunque no está completada”.

Y: “Se espera que esté terminada en el año 2014”. Voy a etiquetar “año 2014” , la voy a destacar, con la etiqueta <strong>.

Otra opción que tiene este programa es pulsar Ctrl+ y me sale una lista para autocompletar la etiqueta. Como yo he escrito “str” se me va a la lista de etiquetas y a la lista de atributos a la posición “str” y ya me aparece la etiqueta <strong> que la puedo seleccionar, se me cierra automáticamente, la corto y la pego a continuación.

Como vemos, son muy potentes estas opciones, ayudan bastante. Otra opción muy interesante es el emparejamiento de etiquetas. Yo puedo seleccionar una etiqueta, por ejemplo este párrafo, y me marca, me selecciona, donde está la etiqueta de cierre correspondiente. O aquí, esta etiqueta <strong> se cierra en esta posición.

Y también puedo, si así lo deseo, cerrar ciertas partes de la página. Por ejemplo aquí, yo podría cerrar el <body>, y podría cerrar también el <head>. Podría dejar solamente el <html>, o voy abriendo, voy desplegando las distintas partes de la página que necesite.

Por supuesto, tenemos también opciones típicas de cualquier editor, como es numerar las líneas del código, y aquí abajo, en la barra de estado inferior, pues tenemos la longitud del fichero, cuántas líneas tiene y en que posición actual se encuentra el cursor.

Muy importante son estos dos valores que vemos aquí abajo, “DOS/Windows”, esto me indica el formato de los saltos de línea. Esto yo lo puedo modificar en cualquier momento en el menú “Editar”, “Conversión fin de línea”, puedo convertir a otros formatos, como este fichero está en formato “DOS/Windows”, lo puedo convertir a formato “Unix” o a formato “Macintosh”.

Y muy importante también es la opción, el valor que vemos aquí “UTF-8” me indica el juego de caracteres del fichero. Esto lo puedo cambiar a través del menú “Codificación”, puedo convertir el fichero a otros formatos. Pero esto ya lo veremos más adelante en otro vídeo sobre el juego de caracteres.

Para finalizar, puedo lanzar, puedo ver esta página web en un navegador y lanzarla directamente desde Notepad++. Para ello me voy al menú “Ejecutar”, realmente no vamos a ejecutar la página, esto no es código, pero lo que vamos a hacer es lanzar la página, que se cargue, que se visualice automáticamente en un navegador.

Aquí nos aparecen los navegadores más usuales, que por supuesto, para usar estas opciones debemos tener estos navegadores instalados en nuestro sistema operativo.

Por ejemplo, voy a lanzar esta página, voy a ver cómo se ve en Chrome. Simplemente selecciono aquí, espero unos segundos y se me abre la página en el navegador Google Chrome.
Y podemos ver el texto que yo he añadido y cómo aparece aquí enfatizado este texto, y este texto en negrita. Porque en mi código yo he marcado “Hypertext Markup Language” lo he marcado con la etiqueta <em> y “año 2014”, lo he marcado, lo he etiquetado con la etiqueta <strong>.

Y con esto finaliza este vídeo en el que hemos visto cómo editar una página web con el programa Notepad++.

Hemos visto algunas características interesantes que nos ayudan a escribir el código HTML, como el coloreado de la sintaxis, el cierre automático de las etiquetas, la opción de autocompletar las etiquetas y los atributos, y el emparejamiento de la etiqueta inicial con la etiqueta final.

Fuente: https://www.youtube.com/watch?v=n38_BP87EY4


http://google.es/activate​

Read More

2.9. HTML: conceptos básicos (parte 2)

2.9. HTML: conceptos básicos (parte 2)

  marzo 09, 2018    Fernando López

---

Recuerda que con el lenguaje HTML sólo se describe la estructura y el contenido, que puede ser texto, imágenes, vídeos y otros componentes, de las páginas web. Con HTML no se define la presentación visual de las páginas web.

En la primera parte de este videotutorial vimos la sintaxis del elemento, el componente básico de una página web. Una página web está compuesta por un conjunto de elementos escritos en un orden concreto. Recuerda que un elemento se compone de una etiqueta inicial o de apertura, y una etiqueta final o de cierre.

Con todas las etiquetas que vimos en la primera parte de este videotutorial ya podemos hacer páginas web sencillas.

Pero atención, lo que vamos a ver a continuación es una simplificación, para que sea más fácil de entender. En otro vídeo veremos detalles adicionales que son necesarios para que una página web sea realmente correcta.

Para escribir el código de una página web, es decir, para escribir el código HTML, no necesitas ningún programa especial. En este vídeo vamos a empezar a usar el Bloc de notas, vamos a hacer la primera página web con el Bloc de notas.

Recuerda que la etiqueta principal de una página web es la etiqueta <html>. La etiqueta <html> debe encerrar todo el contenido de la página web. A mí me gusta, cuando escribo el código de la página HTML, escribir, cuando escribo la etiqueta de inicio, escribo automáticamente la etiqueta de cierre. Así no se me olvida. No es obligatorio, pero es un consejo que te doy.

A continuación, dentro de la etiqueta <html>, dentro de la página web, la siguiente parte, la primera parte es la cabecera, la sección <head>. En la sección <head> recuerda que se escribe
información, los metadatos que definen cómo se va a procesar la página web, cómo se va a visualizar, pero normalmente en el <head> no se escribe nada que deba aparecer visualmente en la página web. Por ahora, lo único que sabemos escribir es la etiqueta <title>, que es el título de la página web. Le voy a poner de título “Érase una vez HTML”. Y recuerda, si hemos abierto la etiqueta <title>, debemos de cerrarla.

Después del <head> tenemos el apartado <body>, el cuerpo de la página. Todo lo que escribamos aquí en el <body> sí que se va a ver, se va a pintar en la página web. 

Ahora te animo a que escribas tu primera página web. Puede ser esta que yo he hecho o puedes intentar escribir una más complicada.

Para esta primera página he usado un editor sencillo, el Bloc de Notas. En la próxima parte de este videotutorial voy a usar un programa más potente.

Fuente: https://www.youtube.com/watch?v=44j4aXjRGbQ

http://google.es/activate​

Read More

2.8. HTML: conceptos básicos (parte 1)

2.8. HTML: conceptos básicos (parte 1)

  marzo 08, 2018    Fernando López

---

Si ya has visto las dos partes del vídeo “Historia de la Web: su nacimiento parte1 y parte2”, sabrás que Tim Berners-Lee es considerado el padre de la Web porque desarrolló las tres tecnologías fundamentales en las que se basa la Web:

HTML, HyperText Markup Language, el lenguaje de marcado o etiquetado que se emplea para crear, para escribir, los documentos o páginas web.

URL, Uniform Resource Locator, el localizador de recursos uniforme, el sistema de localización o direccionamiento de los documentos web.

Y HTTP, HyperText Transfer Protocol, el protocolo o lenguaje con el que se comunican el navegador y el servidor web y que se emplea para transmitir los documentos web por Internet.

Con el lenguaje HTML se describe la estructura y el contenido, que puede ser texto, imágenes, vídeos y otros componentes, de las páginas web. Con HTML no se define la presentación visualde las páginas web.

Esto es muy importante que lo asimiles, así que te lo voy a repetir una vez más: el lenguaje 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.

En la actualidad, el lenguaje HTML está desarrollado por el World Wide Web Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la Web.

En la página del W3C puedes encontrar mucha información sobre HTML, pero para empezar note lo recomiendo, porque te puede abrumar y asustar, ya que es un sitio web dirigido a profesionales y expertos, no para principiantes.


Para empezar a aprender HTML puedes consultar documentación sobre HTML5 o sobre las versiones anteriores HTML 4 o XHTML 1. Te conviene conocerlas todas, y las diferencias que hay entre unas y otras, porque ahí fuera, en Internet, te vas a encontrar de todo. Para ser un buen profesional necesitas conocer las tres versiones.

Para aprender HTML y otras tecnologías web te recomiendo el sitio web W3Schools. En este sitio puedes encontrar un apartado de tutoriales. Después de ver los vídeos de este curso, consulta el tutorial sobre HTML, al menos el apartado sobre conceptos básicos.

El lenguaje HTML está formado por etiquetas, que se escriben encerradas por los corchetes angulares menor que y mayor que.

Desde que el lenguaje HTML se creó en el año 1990, el número de etiquetas que posee ha ido aumentando y en la actualidad, en la versión HTML5, está formado por más de 100 etiquetas.
El elemento es el componente básico de una página web, una página web está compuesta por un conjunto de elementos escritos en un orden concreto.

Un elemento se compone de una etiqueta inicial o de apertura, y una etiqueta final o de cierre.
La etiqueta final se define con una barra inclinada y el nombre de la etiqueta inicial. En este ejemplo, la etiqueta se llama p y define un párrafo de texto de la página.

La etiqueta inicial puede llevar atributos, pero la final nunca lleva. En HTML, los atributos pueden llevar un valor. Por último, las etiquetas pueden tener contenido, que es todo lo que seescriba entre la etiqueta inicial y final: el contenido puede estar formado por otras etiquetas de HTML o puede ser simplemente texto como en este ejemplo.

Los elementos se pueden anidar, es decir, se pueden escribir unos dentro de otros, pero respetando algunas reglas que tendrás que aprender. 

En cualquier momento, puedes ver el código HTML de una página web cualquiera con la opción “Ver código fuente” que puedes encontrar en la mayoría de los navegadores, a través del menúcontextual que puedes activar pulsando el botón derecho del ratón sobre una parte vacía de una página web, o a través del menú “Herramientas” en el caso del navegador Google Chrome y el menú “Ver” en el resto de navegadores.

Al ver el código fuente de cualquier página lo normal es que al principio no entiendas nada y te parezca chino. No te preocupes, a todos nos ha pasado eso al principio.

Con lo visto hasta ahora, ya deberías de reconocer qué es un elemento. Por ejemplo, aquí tenemos dos elementos de tipo <strong>, que se emplea para destacar una parte del texto, ydeberías saber que se pueden anidar, es decir, que se pueden escribir unos elementos dentro de otros, como en este ejemplo en el que este párrafo contiene estos dos elementos de tipo<strong>.

Fíjate en este ejemplo cómo se corresponde el código HTML con lo que luego se ve en la página web.

Aquí tenemos este texto, “totalmente gratuito”, que es el contenido de este elemento strong, aparece marcado por esta etiqueta <strong> de inicio y esta etiqueta </strong> final o de cierre.

Cuando se visualiza la página web, el navegador muestra, pinta, el texto “totalmente gratuito” destacado, en este caso en negrita. Eso es así porque la función, la semántica, el significado de la etiqueta <strong> es destacar el texto que contiene. Podemos ver que ocurre lo mismo con este otro texto “curso online” que también aparece marcado por la etiqueta <strong>. Cuando se visualiza en el navegador, “curso online” también aparece destacado en negrita. Estas dos etiquetas <strong> están anidadas, están dentro de este párrafo que podemos ver aquí. Todo este texto, y todo este otro texto, que se corresponde, cuando se visualiza la página web, con todo este texto que forma el primer párrafo.

A continuación tenemos otro párrafo, el que contiene el texto “Aprende HTML, CSS, JavaScript, PHP, y los principios básicos del diseño” que se corresponde con el segundo párrafo.

Y por último tenemos este texto “Empezamos el 10 de septiembre”, que podemos ver que se visualiza, el navegador lo muestra destacado, lo muestra en negrita. Ya puedes imaginar cómoestá este texto etiquetado, como está marcado en el código fuente HTML. Efectivamente, “Empezamos el 10 de septiembre” aparece encerrado entre las etiquetas <strong> de inicio y la etiqueta </strong> de cierre. Y a su vez todo ello forma este tercer párrafo de texto.

El lenguaje HTML es un lenguaje, y como tal, tiene su vocabulario, sus palabras con sus significados, y su gramática, sus reglas que nos indican cómo podemos combinar sus palabraspara formar textos complejos.

¿Cómo se aprende HTML? Pues igual que cualquier otro lenguaje, estudiando sus reglas, pero sobre todo, viendo cómo otras personas lo usan y, por supuesto, usándolo.

Si no lo practicas, no lo aprenderás. Este es el primer consejo que te doy y el más importante:
practica, practica, practica y practica.

En este videotutorial vamos a empezar con las etiquetas esenciales para crear una página web  y con unas pocas etiquetas para poder escribir texto.

La etiqueta <html> es la etiqueta principal, sólo puede existir una y toda la página web debe escribirse entre la etiqueta inicial y final de html.

La etiqueta <head> define la primera parte de una página web, la cabecera. Normalmente lo que se escribe en la cabecera no aparece representado en la página web cuando se visualiza en un navegador web, sino que se emplea para definir los metadatos, información sobre la página o instrucciones sobre cómo procesar la página web. Dentro de la cabecera se puede escribir la etiqueta <title> que es obligatoria, sólo puede haber una, y se emplea para definir el título de la página.

Por último, la etiqueta <body> define la segunda parte de una página web, el cuerpo. Lo que se escribe en el cuerpo sí que aparece representado en la página web cuando se visualiza en unnavegador web.

Las etiquetas <h1>, <h2>, y así hasta <h6>, se emplean para definir los encabezados o títulos en la página. Existen seis niveles de importancia, siendo <h1> el más importante, y <h6> el nivelmenos importante. Normalmente, usarás los niveles <h1>, <h2> y <h3>, y es muy raro que tengas que usar los niveles <h4>, <h5> y <h6>.

La etiqueta <p> se emplea para definir un párrafo de texto.

Y la etiqueta <strong>, que ya la hemos visto antes, se emplea para destacar un fragmento de texto importante mientras que la etiqueta <em> se emplea para definir un texto enfatizado.
¿Cuándo un texto está destacado o es enfatizado? Aunque en el estándar de HTML se aconsejan algunos usos de las etiquetas <strong> y <em>, al final cada autor desarrolla su propio estilo y decide cuándo utilizar una u otra.

Con todas estas etiquetas ya podemos hacer páginas web sencillas, que es lo que vamos a hacer en la siguiente parte de este videotutorial.

Fuente: https://www.youtube.com/watch?v=GIyD5DI7sgc

http://google.es/activate​

Read More

2.7. Sobre HTML5

2.7. Sobre HTML5

  marzo 07, 2018    Fernando López

---

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. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.

Si quieres saber algo más sobre la publicación de HTML5 consulta la nota de prensa del W3C HTML5 is a W3C Recommendation.

Importante: el material educativo de este curso fue preparado antes de la publicación de HTML5 como estándar, por lo que a veces se puede indicar que HTML5 no es un estándar.

Nota: el 1 de noviembre de 2016 se publicó HTML 5.1. Las novedades que incorpora no afectan al contenido de este curso. Si tienes interés en conocer cuáles son los cambios de la versión 5.1 respecto a la version 5.0, puedes consultar el apartado Changes.

Fuente: http://google.es/activate​

Read More

2.6. Historia de HTML

2.6. Historia de HTML

  marzo 06, 2018    Fernando López

---

Si ya has visto las dos partes del vídeo “Historia de la Web: su nacimiento parte 1 y parte 2”, sabrás que Tim Berners-Lee es considerado el padre de la Web porque desarrolló las tres tecnologías fundamentales en las que se basa la Web:

HTML, HyperText Markup Language, el lenguaje de marcado o etiquetado que se emplea para crear, para escribir, los documentos o páginas web.

URL, Uniform Resource Locator, el localizador de recursos uniforme, el sistema de localización o direccionamiento de los documentos web.

Y HTTP, HyperText Transfer Protocol, el protocolo o lenguaje con el que se comunican el navegador y el servidor web y que se emplea para transmitir los documentos web por Internet.

Lo que nos interesa es que Tim Berners-Lee desarrolló la primera versión del lenguaje HTML. te voy a explicar la evolución del lenguaje HTML durante sus primeros años.

La mejor información sobre los primeros años del lenguaje HTML la podemos encontrar en el libro “Raggett on HTML4”, del año 1998.

Afortunadamente, existe una versión online del capítulo 2 de este libro, el capítulo que está dedicado a contar la historia de HTML.

Dave Raggett, uno de los autores de este libro, fue el editor de la especificación del lenguaje HTML durante muchos años, así que lo que nos cuenta en su libro lo sabe por haber sido protagonista de ello en primera persona.

Tim Berners-Lee desarrolló el lenguaje HTML a partir de SGML, Standard Generalized Markup Language, un estándar ISO del año 1986 que se emplea para la organización y etiquetado de textos.

El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no impone en sí ningún conjunto de etiquetas en especial. Por tanto, SGML es equivalente al actual XML.

Como podemos ver en este ejemplo, un documento creado según SGML se parece bastante a HTML, o mejor dicho, HTML se parece a SGML, ya que SGML es anterior a HTML. El uso de una pareja de etiquetas para marcar partes del texto en HTML está tomado directamente de SGML, al igual que ciertas etiquetas como <p>, los encabezados <h1>, <h2>, etc., o las etiquetas de lista como <ol>, <ul> y <li>, que eran muy comunes en lenguajes creados a partir de SGML.

Sin embargo, lo que SGML no incluía, y sí que es una invención propia de Tim Berners-Lee es la etiqueta <a> con el atributo href para los enlaces o hipervínculos.

Recordemos que noviembre de 1990 se suele fijar como el nacimiento de la Web: Tim Berners-Lee publicó su primer sitio web y realizó la primera conexión desde un navegador  mientras trabaja en el CERN, el laboratorio europeo de investigación en física de partículas en Suiza.

Voy a emplear el siguiente diagrama para seguir la evolución del lenguaje HTML. En la parte superior se muestra la evolución del lenguaje HTML, mientras que en la parte inferior se muestra la evolución de los navegadores más populares. Por ahora nos vamos a fijar en los primeros años del lenguaje HTML, hasta la publicación de la versión 4.

Las primeras versiones de HTML no fueron estandarizadas, en parte porque su uso no estaba muy extendido, así que no era necesaria una estandarización formal.

El primer intento de estandarización lo encontramos en el borrador “Hypertext Markup Language” de junio de 1993, escrito por Tim Berners-Lee y Daniel Conolly. Este documento se considera la primera versión del lenguaje HTML, la 1.0. Daniel Conolly desarrolló el primer DTD de HTML, como podemos leer en este mensaje de junio de 1992. Esta primera versión de HTML no disponía de algunos elementos que son imprescindibles hoy en día en las páginas web, como las tablas y los formularios.

Y por otro lado, permitía crear documentos que hoy en día no son válidos, como este ejemplo en el que no aparecen ni la etiqueta <head> ni la etiqueta <body>, y la etiqueta <title> está escrita al mismo nivel que el resto del contenido de la página.

En julio de 1993 se comenzó a trabajar en la especificación de la siguiente versión de HTML, que dio lugar a HTML+ en noviembre de 1993, que nunca llegó a estandarizarse. HTML+ estaba compuesto de encabezados, párrafos, listas, figuras, tablas, formularios, texto preformateado y fórmulas matemáticas. La principal novedad de HTML+ es que incorporaba por primera vez las tablas y los formularios.

Por cierto, si se revisa el documento de HTML+ se pueden encontrar algunas cosas curiosas, como la propuesta de la etiqueta <FIG> con la etiqueta <CAPTION> para definir figuras. ¿Y por qué es curioso?

Muy sencillo, estás dos etiquetas finalmente no formaron parte del estándar de HTML, sin embargo, en HTML5, la nueva versión de HTML, incorpora como novedades las etiquetas <figure> y <figcaption>, que son muy parecidas a <fig> y <caption>.

Otra curiosidad de HTML+ es que incorporaba la posibilidad de definir ecuaciones matemáticas en HTML.

Esta característica al final no se incluyó en HTML, pero dio lugar a un lenguaje totalmente independiente, llamado MathML que ya va por la tercera versión.

Quizás te estés preguntando, ¿llegó a existir un navegador que aceptase las nuevas etiquetas de HTML+?

Sí, por supuesto, se llamaba Arena, y era un navegador desarrollado como prueba de concepto para mostrar las nuevas posibilidades de HTML.

En octubre de 1994 se funda el W3C, el World Wide Web Consortium, que a partir de entonces se encargará del desarrollo de las tecnologías que mueven la Web.

Y por fin llegamos a noviembre de 1995, cuando se publica HTML 2.0, la primera versión de HTML que fue realmente un estándar, en concreto, fue un Request for Comments, aún no era una recomendación del W3C.

Mientras tanto, empezó a fraguarse la primera guerra de los navegadores, entre Microsoft y Netscape.

Un elemento de esa guerra fue la inclusión de ciertas características especiales en los navegadores para distinguirlos de la competencia. Así, por ejemplo, Netscape inventó la etiqueta <blink>, mientras que Microsoft inventó la etiqueta <marquee>. Ambas etiquetas no han formado parte del estándar en ningún momento y no se deben emplear.

En enero de 1997 se publicó HTML 3.2, la primera versión estandarizada por el W3C.

Y en diciembre de 1999 se publicó la última revisión, HTML 4.01.

¿Qué pasó a continuación?

El W3C abandonó el desarrolló de HTML y concentró todos sus esfuerzos en el desarrollo de XML, un metalenguaje que define unas reglas para definir otros lenguajes.

En enero de 2000 se publicó XHTML 1.0, una reformulación de HTML 4 utilizando como base XML 1.0. XHTML 1.0 era como HTML 4.01, tenía las mismas etiquetas, pero imponía unas reglas más estrictas para que los documentos fueran válidos.

Y una revisión de XHTML 1.0 fue publicada en agosto de 2002.

Sin embargo, XHTML no triunfó y la gente seguía usando HTML. ¿Por qué? Seguramente porque XHTML era muy estricto y la gente no estaba preparada para ello.

Así que, en el año 2004, un grupo llamado WHATWG y formado por Apple, Mozilla y Opera, se forma y comienza el desarrollo de un HTML más cercano a la gente. El W3C rectifica, cancela el
desarrollo de XHTML, y se une a WHATWG para desarrollar HTML5.

Si quieres saber más sobre el nacimiento de HTML5 y cómo fue que el W3C canceló el desarrollo de XHTML, te recomiendo la lectura del artículo “The Web is Reborn”.

En la actualidad, abril de 2018, HTML5 se encuentra en el estado de recomendación en la versión 5.2.

Fuente: https://www.youtube.com/watch?v=EEttUcYhv30&feature=youtu.be
http://google.es/activate​

Read More

2.5. El Lenguaje HTML

2.5. El Lenguaje HTML

  marzo 05, 2018    Fernando López

---

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. 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:

• Ver código fuente de la página en Google Chrome y Mozilla Firefox.
• Ver código fuente en Internet Explorer y Opera.

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

En las siguientes lecciones vas a aprender la estructura básica de una página web y el uso de las etiquetas que más se suelen utilizar. Pero antes, te proponemos que aprendas algunas cosas de la historia de HTML.

Fuente: http://google.es/activate​

Read More

2.4. Prototipado: wireframes, mockups y prototipos

2.4. Prototipado: wireframes, mockups y prototipos

  marzo 04, 2018    Fernando López

---

La responsabilidad de un arquitecto de información, es, tal y como la explica Jesse James Garrett en su conocido libro “Los elementos de la experiencia de usuario”: identificar los objetivos del proyecto y las necesidades de los usuarios, especificar las funcionalidades y requerimientos de la aplicación web, definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda, y finalmente realizar el prototipado de la aplicación.

Nuestra responsabilidad final es asegurar que los usuarios podrán encontrar y gestionar la información de manera efectiva.

De la misma manera que un arquitecto realiza los planos y la maqueta del edificio antes de que este comience a construirse; los arquitectos de información nos valemos de la diagramación y el prototipado para especificar cuál será la organización, estructura, navegación y funcionamiento de la aplicación web. Es decir, al igual que ellos, realizamos planos y maquetas del sitio antes de que este comience a construirse.

Los planos, son diagramas de organización y funcionamiento, que se suelen denominar  blueprint, diagramas de contenido o flujo o mapa web.

A la hora de realizar la diagramación de una aplicación web lo más importante es que sea comprensible y refleje con claridad la estructura, el flujo de navegación y la relación entre los elementos.

Existen diferentes propuestas para realizar la diagramación de una aplicación web. Un vocabulario muy utilizado y que os recomiendo conocer es el "Vocabulario visual para describir arquitectura de información y diseño de interacción" de James Garrett" , uno de cuyos libros os recomendaba anteriormente. Garret es un destacado arquitecto de información, muy conocido también por acuñar el término AJAX en el año 2005.

El diagrama que veis abajo es un ejemplo de diagramación de Garret de la aplicación web Yahoo Mail.

En su artículo podréis descargar librerías para aplicar su vocabulario con diferentes aplicaciones como PowerPoint o Visio.

Pero como he dicho, no es la única propuesta que existe. Lo más importante es que la diagramación sea clara y compresible, y por ello es muy recomendable incluir una leyenda con los símbolos utilizados.

Además de estos libros, os recomiendo el artículo “La diagramación en la arquitectura de información” de Ronda León, en el que recopila diferentes propuestas de vocabularios, entre ellos el suyo propio.

Las maquetas, son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página. Vamos a ver que hay diferentes tipos y que distinguimos entre prototipos de baja fidelidad y alta fidelidad.

En ningún caso se debe incluir diseño gráfico en un prototipo, que se realiza en etapas posteriores, y que es importante aclararle al cliente cuando se le presenta el prototipo. No se deben utilizar colores salvo los estrictamente necesarios, y por ello usamos gamas de grises.

Los prototipos de baja fidelidad son dibujos estáticos.

Hablamos de sketching cuando realizamos bocetos de forma rápida e informal, con lápiz y papel, para transmitir una idea o concepto con rapidez y claridad.

Es una técnica muy útil en las entrevista iniciales con el cliente, para comunicar conceptos o proponerle alternativas a un problema, durante un brainstorming o en las reuniones internas con el equipo de trabajo.

Antes de comenzar un prototipo más elaborado es conveniente comenzar con este tipo de bocetos para trabajar ágilmente con varias ideas, ir esquematizando las páginas y definiendo las diferentes zonas de las mismas.

Os recomiendo como libro de referencia "Sketching User Experience" de Bill Buxton.

Un wireframe 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, formularios, etc; el etiquetado de los vínculos o de los títulos; el layout, es decir, la ubicación, colocación y agrupación de los elementos de la página, así como la estrategia de navegación y la priorización de contenidos dentro de la misma.

Un wireframe, asimismo, debería incluir el comportamiento mediante notas asociadas a los elementos para indicar cómo deben mostrarse o para definir su comportamiento funcional.

Cuando tenemos una secuencia de wireframes hablamos de un storyboard.

Los prototipos funcionales son prototipos de alta fidelidad, también 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 como observamos en este ejemplo.

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.

Os recomiendo la lectura de mi artículo “Arquitectura de información. Fundamentos” y el libro “Arquitectura de información en entornos web” de Mario Pérez-Montoro Gutiérrez.

La importancia de prototipar una aplicación antes de comenzar el diseño gráfico y su implementación es vital:
1º.-  El equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual.
El cliente además ve y comprende cómo será la aplicación, mucho mejor que sí se ofrece descrita en un documento.
El prototipado evita malentendidos entre el proveedor y el cliente o incluso entre los propios miembros del equipo, ayuda a especificar los requerimientos, a detectar inconsistencias o falta de funcionalidad, y se convierte en un complemento de gran valor en el análisis.

2º.- El prototipo se modifica con facilidad y rapidez, se evitan así modificaciones posteriores mucho más costosas cuando la aplicación ya se está implementando, de modo que se reducen costes y tiempos.

3º.- Permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto. De este modo se detectan y solucionan los problemas antes de comenzar su implementación y el resultado son aplicaciones web más fáciles de entender, de usar y que se ajustan mejor a las necesidades de los usuarios.

Mi experiencia me dice que los beneficios de prototipar una aplicación web justifican con creces el tiempo que se invierte en él, pues se reduce en gran medida el tiempo de desarrollo posterior y aumenta considerablemente la calidad del resultado y la satisfacción del cliente y el usuario final. 

Os recomiendo mi artículo “Wireframes”, donde se incluyen referencias de interés, entre las que os recomiendo el artículo ”Prototipado” de la Fundación Sidar y el blog “Wireframes” donde encontraréis ejemplos, plantillas, herramientas y otros recursos.

También puede seros útil el “Glosario de usabilidad y accesibilidad” para consultar aspectos terminológicos.

Aquí tenéis también otras dos presentaciones sobre prototipado que os pueden ser de utilidad y donde podéis ver más ejemplos.
https://www.slideshare.net/nickf/wireframes-for-the-wicked
https://www.slideshare.net/hiteshmehta/importance-of-wireframe-in-web-design

Para terminar me gustaría daros cinco consejos básicos para realizar un buen prototipo, y que se resumen en:
1º.- Sencillez y claridad.
2º.- Hazlo en blanco y negro.
3º.- Representa los tamaños y proporciones de los bloques de contenido.
4º.- Ten en cuenta las pautas de usabilidad y accesibilidad.
5º.- Diseña para tus usuarios. IMPORTANTE.

En resumen, en este artículo hemos hablado de la importancia de prototipar una aplicación web antes de realizar su diseño gráfico o comenzar su implementación, y como, a su vez, el prototipado no debe comenzarse sin haber definido primero los objetivos del sitio, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web.

Hemos visto que se distingue entre planos y maquetas.

Los planos o blueprints, diagramas de contenido o flujo, o mapa web, sirven para mostrar la estructura de la aplicación y su flujo de navegación.

las maquetas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página. Hemos visto también que se distingue entre prototipos de baja fidelidad, que son estáticos, y prototipos de alta fidelidad, que son dinámicos.

Hemos recomendado comenzar con un sketch, es decir, un boceto rápido e informal con lápiz y papel.

Y después un wireframe representará con más detalle la aplicación, incluyendo notas asociadas a los elementos sobre cómo se deben mostrar o su comportamiento funcional.

Por último, los prototipos funcionales son maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.

Hemos visto que la terminología es muy variada y no siempre unívoca, pues todavía no está claramente asentada. Y por ello, al consultar la bibliografía y las referencias, os recomiendo que no os centréis en aspectos terminológicos sino en las recomendaciones para realizar buenos diagramas y prototipos de vuestras aplicaciones web.

Fuente: https://www.youtube.com/watch?v=51qwXIQlTg4
Blog de Olga Carreras
http://google.es/activate​

ACTIVIDAD 4 - Herramientas de Prototipado
"En esta actividad debes evaluar el funcionamiento de varias herramientas de dibujado de prototipos y debes seleccionar la que creas que ofrece las mejores características. Publica en el foro los resultados de tu investigación, indica cuál es la mejor herramienta de dibujado según tu opinión."

La arquitectura de la información es todo un mundo  y desde mi punto de vista este capítulo debería abordarse en varios capítulos. Creo que es muy denso, y a mí personalmente me ha llevado muchas horas de investigación y actualización, debido al desfase temporal de la realización del curso hasta la fecha (Mayo 2018)evidentemente la tecnología ha evolucionado y han aparecido nuevas aplicaciones que facilitan enormemente tanto la diagramación (blueprints) como la maquetación, wireframes y mockups, estos últimos con herramientas muy potentes, que incluso eliminan el proceso de diseño en Photoshop o Gimp, ya que exportan el diseño directamente a HTML 5.

Conceptos como arquitectura de la información, que según Jesse James Garrett, fundamental para identificar los objetivos del proyecto y las necesidades de los usuarios, especificar las funcionalidades y requerimientos de la aplicación web, definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda, y finalmente realizar el prototipado de la aplicación, son tareas que requieren un estudio mucho más detallado y en profundidad.

Centrándome en la propuesta del ejercicio, existen una innumerable cantidad de herramientas, imposible de evaluar todos,  para todos los gustos, que satisfarán las necesidades de cada usuario.

El resultado de mi investigación son las herramientas y artículos siguientes:

Interesante articulo sobre como planificar un pequeño sitio web en pocos pasos:
https://www.sitepoint.com/wire-frame-your-site/

Recursos de diagramación para el diseñador web:
http://desarrolloparaweb.blogspot.com.es/2010/04/recursos-de-diagramacion-para-el.html

http://pencil.evolus.vn/ Sencilla aplicación para escritorio disponible para Windows, Mac y Linux. Permite diseñar rápida y fácilmente documentos de propuesta para clientes; todo un website en un mismo archivo exportable a PNG, html o PDF, principalmente.
Características de pencil project:
Diseño de plantillas y creación de prototipos.
    Documento de múltiples páginas, todo tu website en un solo archivo.
    Vínculos y enlaces internos entre tus páginas.
    Edición de texto enriquecido.
    Instalación de plantillas definidas por el usuario.
    Operaciones estándar de dibujo: alineación, z-orden, escalado, rotación, dimensiones, etc.
    Acciones para objetos (random de textos, por ejemplo)
    La exportación a HTML, PNG, documento de Openoffice.org, documento de Word y PDF.


Aplicaciones para la diagramación:
Dia alternativa Open Source a Visio. https://wiki.gnome.org/Apps/Dia

https://www.smartdraw.com/ (online)
Microsoft Visio
Mindmanager https://www.mindjet.com/ (online)
Freemind http://freemind.sourceforge.net/wiki/index.php/Main_Page
OmniGraffle (OSX) https://www.omnigroup.com/  Apps para Mac, iPad, and iPhone.

Read More

2.3. El desarrollo web

2.3. El desarrollo web

  marzo 03, 2018    Fernando López

---

En primer lugar, cuando se habla de desarrollo web, mucha gente lo confunde o lo mezcla con el diseño web. Que quede claro desde un principio que son actividades distintas, que en un proyecto web deberían ser realizadas por personas diferentes, pero es muy normal que en proyectos web pequeños realizados por una o dos personas, el diseño y el desarrollo web pueden ser realizados por la misma persona.

El diseño web se refiere al diseño visual de un sitio web o de una página web y con frecuencia implica el diseño de los elementos gráficos de la página. En el diseño se tienen en cuenta elementos gráficos como la tipografía, los colores, los tamaños y las proporciones.

El diseño se suele realizar con una herramienta gráfica como Adobe Photoshop o GIMP, y proporciona el marco para la presentación y el comportamiento de la página. El producto final del diseño web no suele contener código.

El diseño de la página (puede ser una simple imagen en formato PNG, por ejemplo) es utilizado por el mismo diseñador o por otra persona como base para el código de la página web. El diseño de la página se divide (se trocea) en partes que se pueden representar mediante código (HTML + CSS), o se convierten en elementos puramente gráficos.

La persona que realiza el diseño de un sitio web, se le suele llamar “el diseñador”.

Por otro lado el desarrollo web se refiere a la programación necesaria para construir una aplicación o sitio web. Se suele dividir en dos partes que pueden estar conectadas, la parte cliente y la parte servidor que funcionan de forma independiente y emplean tecnologías distintas, aunque muchas veces también interactúan, por lo que también se habla de programación de la parte cliente-servidor.

Para el desarrollo de la parte cliente, los conocimientos que se necesitan tener son por un lado HTML y CSS para la creación de las páginas web, y por otro lado JavaScript y el DOM para la programación de la parte cliente.

El desarrollo de la parte servidor se refiere a la programación necesaria para construir el "back end" de un sitio web. El "back end" es la parte del sitio web que no ven los visitantes de un sitio web, pero que es necesario para poder presentar la información correcta en el formato correcto a los visitantes.

En el desarrollo de la parte servidor se emplean lenguajes de script como PHP, ASP, ASP.NET, JSP, Perl y Coldfusion para acceder a una base de datos y recuperar la información necesaria para visualizar una página web. Por tanto, el desarrollo web también cubre el diseño y desarrollo de las bases de datos. Y como una aplicación web está al alcance de cualquiera, también es necesario tener en cuenta la correcta seguridad del producto final.

La persona que realiza el desarrollo web, se le suele llamar “el desarrollador”.

Para comprender un poco más las diferencias que existen entre un diseñador web y un desarrollador web, vamos a ver la siguiente infografía.

Esta infografía es una simplificación y en algunos aspectos puede llegar a ser cómica, pero algunos datos que contiene sí que son interesantes.

La parte que se refiere a la forma de vestir y de comportarse es un poco simplista y no aporta nada interesante.

Sin embargo, en la segunda parte podemos encontrar datos que provienen de la Oficina de Estadísticas de Empleo de los Estados Unidos.

Por un lado, destaca el hecho de que hay más puestos de trabajo de desarrollador web que de diseñador web. Esto concuerda con el sentido común, ya que en un proyecto normal la fase de desarrollo requiere un mayor esfuerzo que la fase de diseño, por lo que es necesaria una mayor mano de obra.

Por otro lado, destacan los salarios que recibe cada uno, ya que el salario del desarrollador web casi dobla al del diseñador web.

En la siguiente infografía se vuelven a comparar el diseñador y el desarrollador web.

En esta infografía vuelve a aparecer la comparación del número de puestos de trabajo y del salario medio.

Pero también se comparan las aptitudes principales de uno y otro: un diseñador web necesita intuición, creatividad e imaginación, mientras que un desarrollador web necesita lógica, pensamiento lineal y técnica.

También es interesante el apartado en el que se hace referencia a los estudios requeridos: un diseñador web necesita una titulación en diseño gráfico, bellas artes o producción multimedia, mientras que un desarrollador web necesita experiencia en programación.

Para finalizar, una infografía en la que se resume el esfuerzo y el tiempo necesario para el desarrollo de un sitio web normal.

La infografía está disponible en castellano y divide el desarrollo de un sitio web en las siguientes fases: contacto inicial, planificación, contenido, diseño, desarrollo y lanzamiento.
Además, se muestra la interacción del equipo de desarrollo con el cliente.

Fuente: https://www.youtube.com/watch?v=biWdMqAeZUM
http://google.es/activate​

Read More

2.2. Cómo se escribe una página web

2.2. Cómo se escribe una página web

  marzo 02, 2018    Fernando López

---

En el módulo anterior has aprendido a crear páginas web mediante Blogger, un sistema gestor de contenidos, un programa específico para la creación de páginas web. Pero, ¿realmente tú estás creando la página web, o la está creando el programa en base a las acciones que realizas en el programa?

Cuando creas una página web con Blogger o algún programa similar, el programa te impone una serie de limitaciones: estás limitado a hacer aquello para lo que el programa ha sido programado. ¿No te gustaría tener un control total sobre lo que puedes hacer?

En este módulo vas a comenzar a aprender a hacer páginas web por ti mismo, sin ayuda de nada. Para lograrlo debes aprender HTML (HyperText Markup Language), el lenguaje con el que se escriben las páginas web.

Aprender HTML es muy parecido a aprender un idioma. Cuando te propones aprender un idioma nuevo, no esperas aprenderlo en 21 días, en tres meses o en un año: lo normal es que tardes varios años. HTML no es tan difícil como un idioma, no te llevará toda la vida aprenderlo, pero sí que necesitarás meses o años.

Por otro lado, cuando te propones aprender un idioma nuevo, no empiezas aprendiendo todas las palabras del diccionario: vas aprendiendo palabras nuevas poco a poco. Con HTML ocurre lo mismo: no intentes aprender todo el lenguaje a la vez, tienes que aprenderlo poco a poco. En este módulo y en los siguientes irás aprendiendo poco a poco las principales características de HTML.

Nota: Te hemos dicho HTML no es tan difícil como un idioma, no te llevará toda la vida aprenderlo, pero sí que necesitarás meses o años. En realidad, sí que te va a llevar toda la vida aprenderlo, porque el lenguaje HTML está en constante evolución. Los idiomas también evoluciona, ¡pero HTML lo hace mucho más rápido!

Fuente: http://google.es/activate​

Read More

2.1. Presentación Módulo 2

2.1. Presentación Módulo 2

  marzo 01, 2018    Fernando López

---

Las páginas web son documentos electrónicos escritos con un lenguaje de marcado o etiquetado llamado HTML.

HTML es un lenguaje, y como cualquier lenguaje, para aprenderlo hace falta tiempo y esfuerzo.

El secreto para aprenderlo es muy simple: practica, practica y practica.

HTML tiene su vocabulario y su gramática.

El vocabulario son las etiquetas que se pueden emplear
 <a> <p> <img>

La gramática son las reglas que establecen cómo se deben emplear las etiquetas para escribir un documento.
<html>:
<head> <body>

En esta semana vas a aprender la estructura básica de una página web, lo que se suele conocer como “el esqueleto de una página”.

Además, vas a aprender también a crear listas para incluir información en una página web de forma ordenada.

Y vas a aprender lo que quizás es lo más importante de las páginas web: los enlaces o vínculos. Los enlaces se emplean para crear el hipertexto, la característica principal que define a la Web.

Las páginas web se pueden escribir con cualquier editor de textos, no hace falta un programa sofisticado para escribir páginas web. Por ejemplo, en Microsoft Windows podrías usar el “Bloc de notas”.

Sin embargo, esta semana va a aprender a utilizar un editor de textos que posee una serie de características que te ayudarán a escribir las páginas web de una forma más rápida y con menos errores.

Fuente: https://www.youtube.com/watch?v=1NPS6zGC-PU
http://google.es/activate​
 

Read More