miércoles, 10 de mayo de 2017

Actividad 2.15: Presentación del proyecto



Elegí hacer un curriculum, el cual la actividad te indicaba hacer las siguientes páginas.


“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).
Realmente no hice algo muy "estructurado" solo hice algo básico para poner en práctica el modulo.


No necesariamente era "publicar" el proyecto, solo indicaba que lo guardara. Sin embargo solo quiero poner aquí algunos avances antes de continuar con el siguiente modulo.


Estos son mis avances:


imagen 6
imagen 7


  •     




domingo, 7 de mayo de 2017

Actividad 2.14 HTML: problemas con los editores


Actividad

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.





  • Block de notas
Conocido en ingles como "Notepad", es un programa que tiene la apariencia de un bloc de notas. Se puede eidtar texto sin formato y de forma simple. Actualmente block de notas incluye opciones más avanzadas que pueden ser útiles para usuarios avanzados como desarrolladores y programadores. Es un programa de código fuente libre con soporte para varios lenguajes de programación. Solo funciona en Microsoft Windows.


Ventajas


Fácil
Rápido
No consume recurso
Desventajas

Tiene pocas opciones
Es dificil de encontrar errores en el texto
Fuentes: yadithelianaypollo,





  • Nano
Editor de texto para sistemas Unix basado en curses. Viene instalado por defecto en Ubuntu. No es tan potente como Vim o Emacs pero es mucho más fácil de manejar que estos. Es un clon de Pico, el editor del cliente de correo electrónico Pine. nano trata de emular la funcionalidad y la interfaz de fácil manejo de Pico, pero sin la integración con Pine.


Ventajas


fácil de usar
simple
rápido
Desventajas

Utiliza atajos de teclado que no muchas personas están acostumbradas
Difícil en identificar los errores

Fuente: wikipedia, sliceoflinux




  • Gedit
El editor de textos gedit que viene instalado en algunas distribuciones de linux. Es una aplicación potente tanto para la edición de texto como para edición de código para programadores. Uno de sus puntos fuertes es que pueden añadirse plugins y complementos para personalizar las capacidades del software.
Viene de serie con varios temas visuales enfocados en diferentes resaltados de sintaxis y color de fondo, numeración de líneas, una herramienta de búsqueda y remplazo, autoguardado de documentos, inserción automática de cierres de etiquetas, modo de edición en pantalla completa.


Ventajas


Fácil de usar
Instalación de pluggins
colores para resaltar la sintaxis
cierres de etiquetas
herramientas de búsqueda
Autoguardado
Autocompletado de palabras
Manejo de pestañas

Desventajas

Instalación de paquetes
Consume recursos
Fuente: genbeta, pctux




  • Sublime
Es un editor de texto y editor de código fuente está escrito en C++ y Python para los plugins. Desarrollado originalmente como una extensión de Vim, con el tiempo fue creando una identidad propia, por esto aún conserva un modo de edición tipo vi llamado Vintage mode. 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.


Ventajas


Minimapa, para previsualización de la estructura
Multicursor, escribir el texto en diferentes posiciones del archivo.
División de ventanas, dividir el programa en una o varias ventanas.
Multipestaña
Búsqueda
Autocompletado
Colores para resaltar sintaxis
Soporte de plugins
Resaltado de paréntesis, corchete o llave.
Desventajas

Dificil de aprender
fallos del programa
dificil de configurar
Fuentes: wikipedia, jorgesanches


Conclusiones



De todos los editores de texto que he usado, mi favorito es sublime text. Se que hay otros editores de texto mucho mejores que sublime text como son: Atom o Adobe Brackets. Puesto que brindan herramientas o plugins mucho mejores que sublime. Pero me he acostumbrado tanto al uso de sublime que realmente he tenido algo de pereza en cambiarme de herramienta. Eso si, estoy abierta a utilizar otro programa, cuando pueda darme el tiempo de saber como usarlo y conseguir propiamente las licencias (soy estudiante, no tengo dinero ahorita).


Sublime brinda un sin fin de ventajas que en mi opinión me han ayudado muchas veces. El autocompletado es una de ellas, pero siendo sincera eso ha hecho que se me olviden algunas reglas de html o de como se llaman las etiquetas. Me ha encantado mucho los resaltados de colores en la sintaxis puesto que me ayuda a encontrar más rápido mis errores en codificar. Y ni si diga de la herramienta de búsqueda o de remplazo, o incluso el multicursor.


En fin, tiene muchas ventajas muy buenas. Y recomendaría mucho el uso de esta herramienta. Es con licencia pero no tiene fecha de caducidad, en cuanto tenga la oportunidad me compraré el software. ¡Los desarrolladores han hecho una increíble herramienta!

Actividad 2.13 HTML: enlaces


actividad
1. A partir del texto que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:


Además, tienes que tener en cuenta los siguientes requisitos:

El título de la página debe ser Los tres pilares de la Web.
Los enlaces que aparecen en la página deben tener los siguientes destinos:
Tim Berners-Lee → http://es.wikipedia.org/wiki/Tim_Berners-Lee
Web → http://es.wikipedia.org/wiki/World_Wide_Web
HTML → enlace intradocumental al epígrafe HTML
HTTP → enlace intradocumental al epígrafe HTTP
URL → enlace intradocumental al epígrafe URL
Fuente: HTML → http://es.wikipedia.org/wiki/HTML
Fuente: HTTP → http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol
Fuente: URL → http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme

Consejo: para comprobar que los enlaces intradocumentales funcionan correctamente, aumenta el tamaño o zoom de la página con "Control +"



Código de la actividad

Los tres pilares de la Web
Tim Berners-Lee es considerado el padre de la Web porque desarrolló los tres elementos básicos para el funcionamiento de la Web:
HTML
HTTP
URL
HTML
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: HTML, Wikipedia
HTTP
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: HTTP, Wikipedia
URL
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: URL, Wikipedia

Solución


<html>
<head>
<title>Los tres pilares de la Web</title>
</head>
<body>
<h1>Los tres pilares de la Web</h1>
<p><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 <a href="http://es.wikipedia.org/wiki/World_Wide_Web">Web</a>:</p>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#http">HTTP</a></li>
<li><a href="#url">URL</a></li>
</ul>

<h2 id="html">HTML</h2>
<p>HTML, siglas de <strong>HyperText Markup Language</strong>, 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.</p>
<p>Fuente: <a href=" http://es.wikipedia.org/wiki/HTML">HTML</a>, Wikipedia</p>

<h2 id="http">HTTP</h2>
<p><strong>Hypertext Transfer Protocol</strong> 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.</p>
<p>Fuente: <a href="http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol">HTTP</a>, Wikipedia</p>

<h2 id="url">URL</h2>
<p>Un <strong>localizador de recursos uniforme</strong> o URL —siglas en inglés de <em>Uniform Resource Locator</em>— 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.</p>
<p>Fuente: <a href=" http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme">URL</a>, Wikipedia</p>
</body>
</html>

Actividad 2.12. HTML: listas (2)


Actividad


1. Debes crear un página web que tenga el mismo aspecto que la siguiente imagen:







Selecciona para cada lista el mejor tipo de lista


Solución

<html>
<head>
<title>Internet</title>
</head>
<body>
<h1>Internet</h1>
<h2>Contenido</h2>
<ol>
<li>Principales protocolos</li>
<li>Formas de conectarse</li>
</ol>
<h2>1. Principales protocolos</h2>
<ul>
<li>Transmisión de ficheros:
<ul>
<li>FTP</li>
</ul>
</li>
<li>Correo electrónico:
<ul>
<li>IMAP</li>
<li>POP</li>
<li>SMTP</li>
</ul>
</li>
</ul>
<h2>2. Formas de conectarse</h2>
<dl>
<dt>Red Telefónica Conmutada (RTC)</dt>
<dd>La línea telefónica de toda la vida. Para acceder a Internet es necesario 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 módem 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>Una lí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>

</body>
</html>

2.12 HTML: Conceptos básicos (parte 4)

Dentro del video menciona la realización de un curriculum con HTML, haciendo uso de lo aprendido.

Este es el curriculum que realicé.
<html>
<head>
<title>Curriculum Vitae de luis carlos diaz</title>
</head>


<body>
<h1><center>Curriculum Vitae de luis carlos diaz</center></h1>
<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>luis carlos diaz </strong></li>
<li>Fecha de nacimiento: <strong>25/04/92</strong></li>
<li>Lugar de nacimiento: <strong>colombia</strong></li>
</ul>

<h2>Formación Academica</h2>
<ul>
<li>2016-2013: <strong>Univerisdad</strong></li>
<li>2012-2009: <strong>Preparatoria</strong></li>
<li>2009-2006: <strong>Secundaria</strong></li>
</ul>

<h2>Formación laboral</h2>
<ul>
<li>2016-actual: <strong>Programación</strong></li>
<li>2015: <strong>Documentación en projectos</strong></li>
<li>2014: <strong>manteamientos de computadores</strong></li>
</ul>

</body>
</html>

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


Actividad

1. Corrige los errores que presenta el código base que se te proporciona.



Código de la página

<html lang=es>
<head>
<title>World Wide Web</title>
</head>
<body>


<h1>World Wide Web</h1>


<p>
En informática, la <strong><em>World Wide Web</strong></em> (WWW) o Red informática mundial comúnmente conocida como la web, es un sistema de distribución de documentos de hipertexto o hipermedios interconectados y accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de esas páginas usando hiperenlaces.


<h2>Historia</h2>


<p>
La web se desarrolló entre marzo de 1989 y diciembre de 1990 por el inglés Tim Berners-Lee con la ayuda del belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992.
</p>


<p>
Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares web (como los lenguajes de marcado con los que se crean las páginas web), y en los últimos años ha abogado por su visión de una web semántica.
</p>


<p>Fuente: <em>Wikipedia</p></em>


</html>



Solución


<html lang="es">
<head>
<title>World Wide Web</title>
</head>
<body>


<h1>World Wide Web</h1>
<p>
En informática, la <strong><em>World Wide Web</em></strong> (WWW) o Red informática mundial comúnmente conocida como la web, es un sistema de distribución de documentos de hipertexto o hipermedios interconectados y accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de esas páginas usando hiperenlaces.
</p>


<h2>Historia</h2>
<p>
La web se desarrolló entre marzo de 1989 y diciembre de 1990 por el inglés Tim Berners-Lee con la ayuda del belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992.
</p>
<p>
Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares web (como los lenguajes de marcado con los que se crean las páginas web), y en los últimos años ha abogado por su visión de una web semántica.
</p>


<p>
Fuente: <em>Wikipedia</em></p>
</body>
</html>

Actividad 2.10 HTML: Conceptos básico (parte 3)


Actividad
1. A partir del texto que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:


Además, tienes que tener en cuenta los siguientes requisitos:


El título de la página debe ser Tim Berners-Lee.
El texto "Tim Berners-Lee" como encabezado de nivel 1.
El texto "Biografía" como encabezado de nivel 2.
Todas las siglas, como HTTP, W3C o MIT deben aparecer como texto destacado.
Los nombres de las instituciones o empresas, como Consorcio de la World Wide Web o Universidad de Oxford, deben aparecer como texto enfatizado.


Código de la actividad


Tim Berners-Lee
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 HTTP en noviembre de 1989. En octubre de 1994 fundó el Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet.
Biografía
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 TTL, un procesador Motorola 68000 y un televisor viejo. Se graduó en física en 1976 en el Queen's College de la Universidad de Oxford. Conoció a su primera esposa en este periodo. En 1978, trabajó en D.G. Nash Limited (también en Poole) escribió un sistema operativo.
Desarrollo de su carrera
Berners-Lee trabajó en el CERN 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 CERN, en 1980, se fue a trabajar a la empresa de John Poole Image Computer Systems Ltd., pero regresó al CERN otra vez en 1984.
En 1989, el CERN era el nodo de Internet más grande de Europa y Berners-Lee vio la oportunidad de unir Internet y el hipertexto (HTTP y HTML), 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ó httpd (HyperText Transfer Protocol daemon).
Fuente: Wikipedia


Solución 


<html>
<head>
<title>Tim Berners-Lee</title></head>
<body>
<h1>Tim Berners-Lee</h1>




<p>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.
</p>


<h2>Biografía</h2>


<p>
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</em> de la <em>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.
</p>


<h2>Desarrollo de su carrera</h2>


<p>
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.
</p>


<p>
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.
</p>


<p>
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ó httpd (HyperText Transfer Protocol daemon).
</p>


<p>Fuente: <em>Wikipedia</em></p>
</body>
</html>

Actividad 2.9. HTML: conceptos básicos


Actividad


1. En el código base que se te proporciona debes realizar los siguientes cambios:

Las siglas HTML deben aparecer como texto destacado en toda la página.
Tim Berners-Lee debe aparecer como texto enfatizado en toda la página.
Debes añadir el siguiente contenido:
Un encabezado de nivel 1 con el texto "HTML" antes de "HTML son las siglas de..."
Un encabezado de nivel 2 con el texto "Historia de HTML" antes de "Los inicios del lenguaje HTML..."
Un encabezado de nivel 2 con el texto "Versiones de HTML" antes de dos nuevos párrafos que contienen el texto "Tim Berners-Lee definió la primera versión de HTML en el año 1991" y "En la actualidad, la última versión de HTML es HTML5".


Código de la actividad

<html>
<head>
<title>El título de la página</title>
</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>HTML se compone de etiquetas que se escriben entre los símbolos menor que y mayor que.</p>


<p>Los inicios del lenguaje HTML se remontan al año 1990, cuando Tim Berners-Lee creó la primera página web.</p>


</body>
</html>

Solución

<html>
<head>
<title>HTML</title>
</head>
<body>
<h1>HTML</h1>
<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 <strong>HTML</strong> se emplea para crear las páginas web. Es muy fácil ver el código <strong>HTML</strong> 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 <strong>HTML</strong> 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><em>Tim Berners-Lee</em> definió la primera versión de <strong>HTML</strong> en el año 1991.</p>
<p>En la actualidad, la última versión de <strong>HTML</strong> es HTML5.</p>
</body>
</html>

Actividad 2.8. Herramientas de prototipado


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


Antes de dar mi opinión, investigué un poco de cada herramienta. Esto es lo que encontré.

Pencil Project
Es una herramienta gratuita y de código abierto con la que una persona puede diseñar sus propios prototipos web. Permite diseñar rápida y fácilmente documentos de propuesta para clientes.


Fuente: Pencil Project.



Balsamiq

Aplicación para crear maquetas para interfaces gráficas para usuario. Permite al diseñador diagramar widgets pre construidos utilizando un editor WYSIWYG (what you see is what you get) de drag and drop. Facilita y agiliza la creación de bocetos. Está disponible como aplicación de escritorio para Windows, OS X y Linux.


Fuentes: applesfera, video2brain

Gliffy

Es un servicio en linea que permite la creación de diagramas, además de compartirlos con otras personas. Se puede crear cualquier tipo de diagramas con flowcharts, UI wireframes, diagramas de clases, planos de casas, diagramas de redes, diagramas UML, o cualquier diagrama complejo o simple.


Fuente: herramientas20



Personalmente ya había usado antes la herramienta de balsamiq, tiene una gran variedad de figuras para hacer los esquemas de las páginas web. Es muy útil e intuitiva, aunque había veces que unos iconos me confundían y no hacían la actividad que pensaba que era. No probé todas las opciones que tenía la aplicación. Luego de usar la versión gratis, la aplicación se me bloqueó y ya no he podido usarla. Una lastima que no tenga dinero para comprar una versión para mi :/.

En Pencil project era la primera vez que usaba esta herramienta. Es muy fácil de usar, y me gustaron algunas figuras que brinda puesto que ademas de maquetar páginas web también podías hacer esquemas para aplicaciones de escritorio, aplicaciones moviles, o algunos diagramas (de flujo, UML, etc).


Gliffy, por otro lado, es semejante a otro programa de escritorio llamado DIA. Es sencillo de usar y está más enfocado a los diagramas. Lo que me encantó es que fuera una página web puesto que así puedo entrar a modificarlo desde cualquier lugar. Aunque sería algo dependiente de la web, eso es malo.

En conclusión, me sigo quedando con balsamiq por las opciones y los diseños que brindaba, puesto que parecía que maquetabas la aplicación como si de un dibujo fuera. Sin embargo, siento que estoy siendo injusta puesto que es muy poco el tiempo que he usado Pencil Project o Gliffy. Espero tener oportunidad de usar las dos herramientas en algun otro projecto.

jueves, 4 de mayo de 2017

Contenido del curso

Módulos:



imagen 2



0. Historia de la Web

Orígenes de internet y la web, los principales acontecimientos y protagonistas
que participaron en su desarrollo.


1. Como funciona la Web

Fundamentos de la web que te permitirán la creación de tus propias paginas
web.


2. Como se escribe una pagina Web

Fundamentos de la creación de las paginas web con HTML, el lenguaje de
marcado que se utiliza para escribir paginas web.


3. Como se publica un sitio Web

Publicar un sitio web en internet para que este disponible para todo el publico.
Principales factores a tener en cuenta a la hora de contratar un alojamiento
(hosting).


4. Como se escribe una pagina Web correcta



Importancia y beneficios de escribir una pagina web correcta sin errores.

Módulo 0: Historia de la Web


Módulo 0: Historia de la Web
Los objetivos de este módulo son:
Conocer los acontecimientos más importantes de la historia de Internet y la Web.
Aprender algunos aspectos importantes sobre el funcionamiento de Internet y la Web: las URLs, los nombres de dominio, las direcciones IP y el sistema de nombres de dominio.
Diferenciar Internet y la Web.
Ser capaz de utilizar Blogger, un sistema de gestión de contenidos, para publicar información en la Web.


La Web

En 1989, Tim Berners-Lee llevaba varios años trabajando en el CERN, la Organización Europea para la Investigación Nuclear. Aunque Tim era físico, desde que había finalizado sus estudios universitarios se había dedicado a trabajar en temas de telecomunicaciones e informática. En marzo de 1989, Tim escribió un pequeño informe, Information Management: A Proposal, en el que proponía el desarrollo de un sistema distribuido de gestión de la información.

Tim le presentó el informe a su jefe, Mike Sendall. Mike le devolvió a Tim el informe con sólo tres palabras escritas al principio de la primera página, Vague but exciting..., impreciso pero emocionante...



Justo 25 años después, ahora en el año 2014, estamos celebrando que Tim Berners-Lee escribió ese pequeño informe. Porque ese pequeño informe que proponía el desarrollo de un sistema de gestión de la información para solucionar el problema que existía para compartir la información en el CERN se transformó en algo enorme, la Web.


Sólo tenía que tomar la idea del hipertexto y conectarlo a las ideas de TCP y DNS y ¡ta chan! - La Web.
Tim Berners-Lee





Internet y la Web
Vinton Cerf, uno de los padres de Internet.
¿Qué es Internet? ¿Qué es la Web?
Internet, también conocida como la Red de redes o simplemente la Red es un conjunto descentralizado de redes de comunicación interconectadas. Internet permite que redes de diferentes tipos, lo que se llaman redes físicas heterogéneas, puedan conectarse entre sí.


Eso permite que un usuario se pueda conectar a Internet a través de una red cualquiera de comunicación, como por ejemplo, una red de telefonía por cable, una red de telefonía celular, una red de radio, o una red de comunicación satelital. Todo ello es posible porque lo importante en Internet no es la forma de conexión física, lo importante es que la red permita una comunicación mediante el protocolo TCP/IP.


Para que lo entiendas fácilmente, un protocolo, en este caso TCP/IP, es el idioma o lenguaje que emplean dos sistemas, en este caso dos ordenadores, para hablar entre sí.
Igual que ocurre con las personas, para que dos sistemas se puedan entender es necesario que hablen el mismo idioma, aunque a veces, al igual que con las personas, se puede hacer uso de un traductor para que dos sistemas se entiendan entre sí. Internet se puede entender como una red de carreteras por la que circulan los datos que se transmiten.


Los datos que se transmiten emplean diferentes idiomas, diferentes protocolos. La World Wide Web, la Web, es simplemente un sistema más con su protocolo, el protocolo HTTP, que hace uso de Internet para la transmisión de los datos, en este caso las páginas web.


Pero además del protocolo HTTP, además de la Web, por Internet circulan más cosas. Por ejemplo, el protocolo FTP se emplea para la transmisión de ficheros. Los protocolos SMTP y POP se emplean para el envío y la recepción de correos electrónicos. Y el protocolo Telnet se emplea para establecer conexiones remotas con otros ordenadores.




Internet en el mundo
En junio de 2014, la Internet Society publicó el Global Internet Report 2014. Este informe va acompañado de un mapa interactivo, Global Internet Report Map, que muestra varios datos por países de los que destacan los siguientes conceptos:


Porcentaje de penetración entre los usuarios de Internet.
Coste, como porcentaje de la renta per cápita necesaria para tener un acceso de banda ancha a Internet.
La mediana de la velocidad de descarga para una conexión fija a Internet.
Algunos datos son conocidos desde hace años. Por ejemplo, los países nórdicos se sitúan entre los diez primeros en porcentaje de penetración:


Islandia: 96,5% (1)
Noruega: 95,1% (3)
Suecia: 94,8% (4)
Dinamarca: 94,6% (5)
Finlandia: 91,5% (8)
Islas Feroe: 90,0% (10)
En el extremo opuesto se sitúa Eritrea con un 0,9%.
Respecto al coste, algunos de los países nórdicos vuelven a aparecer entre los diez primeros de los países donde el coste es menor. En el extremo opuesto vuelve a aparecer Eritrea con casi un 4000% (más o menos, un ciudadano medio necesita 40 veces su sueldo para poder tener una conexión a Internet).
Respecto a la velocidad de descarga, el número 1 es Hong Kong con 57,07 Mbit/s como mediana de la velocidad.



La familia de protocolos de Internet
En el vídeo Internet y la Web han aparecido varios términos que quizás no conozcas: HTTP, FTP, SMTP, POP. ¿Qué significan?
La familia de protocolos de Internet es un conjunto de protocolos de red que se emplean para transmitir datos entre ordenadores a través de Internet. Existen más de cien protocolos, cada uno especializado en una función o en un tipo de comunicación concreta. Por ejemplo, el protocolo HTTP (HyperText Transfer Protocol) se emplea para la transmisión de las páginas web y el protocolo FTP (File Transfer Protocol) se emplea para la transmisión de ficheros.

Lee el artículo de la Wikipedia Familia de protocolos de Internet que ofrece un pequeño resumen sobre los protocolos que se emplean en Internet. Y consulta también Protocolos de Internet en el que están enlazados los artículos de los principales protocolos de Internet.


Se recomienda las siguientes lecturas sobre TCP/IP ofrecidas por Oracle:




Introducción al conjunto de protocolos TCP/IP
Cómo manejan las comunicaciones de datos losprotocolos TCP/IP



Historia de Internet: su nacimiento
En los siguientes videos se resume el nacimiento de la web:













Luego de ver los videos anteriores, sabrás que:



1. INTERNET no es lo mismo que la WEB.
2. Quien es el padre de la Web, asi como quien es uno de los padres del Internet.



Módulo 1: Como funciona la Web



imagen 2




Módulo 1: Como funciona la Web


Objetivo del módulo:

Evolución de la Web: de la página web a la aplicación web

Conocer los fundamentos de la web, que te permitan crear tus propias páginas web.
Evolución de la Web: de la página web a la aplicación web
En este curso vas a aprender a crear páginas web, pero no aplicaciones web. Una aplicación web es un programa, un software, que se puede utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador web. El desarrollo de una aplicación web requiere conocimientos avanzados como programación y manejo de bases de datos.
Si quieres aprender más cosas sobre las aplicaciones web y su desarrollo, te recomendamos que consultes:

Aplicación web



El hipertexto y la hipermedia
Las páginas web son el ejemplo más conocido de hipertexto e hipermedia, pero existen otros sistemas que también se basan en estos dos conceptos.


Hipertexto
Conjunto estructurado de textos, gráficos, etc., unidos entre sí por enlaces y conexiones lógicas.


Multimedia
Que utiliza conjunta y simultáneamente diversos medios, como imágenes, sonidos y texto, en la transmisión de una información.


Hipermedia
Conjunto estructurado de diversos medios, como textos, gráficos, imágenes y sonidos, unidos entre sí por enlaces y conexiones lógicas para la transmisión de una información.





Las URLs
¿Qué son las URLs? ¿Qué partes componen una URL?



Las URLs amigables
En el vídeo anterior Las URLs se te propone como ejercicio que aprendas por ti mismo qué son las URLs amigables, también llamadas URLs semánticas y a veces URLs bonitas.


¿No sabes por dónde empezar a buscar? Consulta el artículo de la Wikipedia URL semántica y podrás leer:


Las URL semánticas o URL amigables son aquellas URLs que son, dentro de lo que cabe, entendibles para el usuario. Lejos de las clásicas URLs de las páginas dinámicas llenas de variables GET y números difíciles de recordar, las URL semánticas están formadas con palabras relacionadas con el contenido de la página y fáciles de recordar. Estas se utilizan en los sitios web dinámicos (no estáticos). Por ello se están utilizando mucho más que las URL extensas.
En la siguiente tabla se muestran varios ejemplos de URLs amigables:


URL no amigable URL amigable
http://example.com/index.php?pagina=contacto http://example.com/contacto
http://example.com/index.php?pagina=consulting&seccion=marketing http://example.com/consulting/marketing
http://example.com/productos?categoria=2&pid=25 http://example.com/productos/2/25
http://example.com/cgi-bin/feed.cgi?feed=news&frm=rss http://example.com/news.rss
http://example.com/servicios/index.jsp?id=legal&subid=patentes http://example.com/servicios/legal/patentes
http://example.com/kb/index.php?cat=8&id=41 http://example.com/kb/8/41
http://example.com/index.php?mod=perfiles&id=193 http://example.com/perfiles/193


¿Ves las diferencias que existen entre una URL no amigable y una URL amigable? ¿Se entiende mejor la URL amigable?




Los nombres de dominio
El nombre de dominio es un nombre único que normalmente se emplea para identificar un sitio web en Internet. Un nombre de dominio aparece en una URL, pero un nombre de dominio y una URL son dos cosas distintas que no debes confundir.









Los nuevos nombres de dominio
.com, .org, .net y otros más fueron los primeros nombres de dominio que existieron en Internet. Pero Internet ha crecido mucho desde su nacimiento (¿recuerdas cuándo y dónde nació Internet?, si no lo recuerdas, vuelve a ver el vídeo sobre la historia de Internet), las necesidades han aumentado y esos nombres de dominio se han quedado pequeños.


A mediados de 2012, ICANN (Internet Corporation For Assigned Names and Numbers), el organismo que regula los nombres de dominio, publicó una lista con los 1.930 nuevos nombres de dominio de primer nivel que habían sido solicitados durante el proceso que había iniciado unos años antes. Estos nombres de dominio no existen todavía, se están introduciendo poco a poco y algunos han sido rechazados (en Program Statistics se puede consultar el número de nombres de dominio que han sido introducidos o rechazados hasta el momento).
Algunos de los nuevos nombres de dominio se refieren a profesiones, como .abogado o .doctor, así como a empresas y marcas, como es el caso de .microsoft, .google, .canon, .dunlop o .calvinklein.
Respecto a España, destacan los dominios geográficos como .barcelona o .madrid, junto a los de marcas como .zara o .movistar, y entidades financieras como .lacaixa y .bbva.
Y respecto a Latinoamérica, algunas empresas han solicitado nombres de dominio específicos, como .avianca., .globo o.uol.








Las direcciones IP y el sistema de nombres de dominio
Las direcciones IP identifican los dispositivos conectados en una red, como por ejemplo un ordenador. Sin embargo, normalmente empleamos un nombre de domino (¿recuerdas el vídeo Los nombres de dominio). ¿Qué relación existe entre las direcciones IP y los nombres de dominio?
La clave está en el Sistema de Nombres de Dominio (en inglés Domain Name System).








Sistema de gestión de contenidos
Un sistema de gestión de contenidos (en inglés Content Management System y también conocido por sus siglas CMS) es un software que permite crear, administrar y publicar contenidos en forma de páginas web.


Un sistema de gestión de contenidos permite publicar páginas web de una forma rápida y sencilla, sin necesidad de conocer cómo están realizadas las páginas web. Pero ese no es el objetivo de este curso: el objetivo de este curso es que seas capaz de crear las páginas web por ti mismo desde cero. Sin embargo, en este curso vas a aprender a utilizar un sistema de gestión de contenidos como un paso previo a la creación de páginas web de forma autónoma.


En este curso vas a aprender a utilizar Blogger, un servicio disponible a través de Internet que se puede clasificar como un sistema de gestión de contenidos ofrecido bajo la modalidad de Software como Servicio (en inglés Software as a Service y también conocido por sus siglas SaaS), un servicio de distribución de software donde el programa y los datos que maneja el programa se alojan en servidores a los que se accede a través de Internet.


Blogger es un servicio gratuito de Google. ¿Cómo nació? Lee la noticia Google compra más de un millón de diarios personales y lo sabrás.


¿Y para qué queremos que aprendas a utilizar Blogger? Espera un poco, en el proyecto de este módulo te lo explicaremos.
¿Quieres saber más cosas? Consulta los siguientes artículos de la Wikipedia:


Sistema de gestión de contenidos.
Blogger.
Software como servicio.

Creación de una página web con Blogger (1): estructura de un blog
Antes de crear tu primer blog te vamos a explicar la estructura básica de un blog. Como verás, un blog no es una página web muy compleja.

Después de ver este vídeo ya podrás crear tu primer blog en Blogger.





Creación de una página web con Blogger (2): configuración básica
Blogger ofrece unas opciones de configuración que debes conocer. La más importante es la configuración de la zona horaria.


Actividad
Realiza los siguientes pasos:
1. Crea un blog en Blogger.
2. Configura el blog con tu zona horaria.
3. Configura el blog para que en la página principal se muestren las entradas de los últimos 15 días.
4. Configura los comentarios para que sólo puedan comentar los usuarios con cuentas de Google y que los comentarios se tengan que revisar antes de publicarse.


El siguiente blog (mi primer blog), es un ejemplo del resultado que se obtiene de la actividad anterior y algunos extras mas que se verán mas adelante.


Creación de una página web con Blogger (3): edición básica de una entrada
En el vídeo anterior te expliqué cómo configurar tu blog en Blogger para que funcione correctamente.



En este vídeo te voy a explicar lo más importante que debes conocer sobre la creación y edición de las entradas de tu blog.



Creación de una página web con Blogger (4): edición avanzada de una entrada
En este vídeo vamos a ver lo que ha quedado pendiente: cómo crear un enlace, cómo insertar una imagen y cómo insertar un vídeo en una entrada. Además, también vamos a ver cómo asignar etiquetas a las entradas.



Creación de una página web con Blogger (5): diseño y gadgets
En el vídeo anterior te expliqué algunas cosas avanzadas sobre la edición de una entrada en Blogger.
En este vídeo te voy a explicar cómo puedes cambiar el diseño visual de tu blog.







Proyecto
Los objetivos del proyecto de este módulo son:
• Crear un blog en Blogger.
• Seleccionar un nombre de dominio adecuado para tu blog.
• Crear enlaces a páginas web propias y a páginas de otros sitios web.
• Insertar elementos multimedia, como imágenes y vídeos, en tu blog.


Objetivos


• Aprender a utilizar un gestor de contenidos (Blogger) para crear un sitio web.


NOTA: este ejercicio es independiente del resto de ejercicios que vas a realizar en el resto de módulos del curso.


Qué tengo que hacer


Crea un blog en Blogger. ¿Para qué? Un blog se puede usar para muchas cosas, pero en este curso te proponemos que utilices el blog como cuaderno o diario de aprendizaje: puedes usar el blog como un cuaderno en el que recoger todo lo que vayas aprendiendo en este curso. Un blog te ofrece una ventaja muy importante frente a otros métodos: en el blog puedes crear enlaces a los recursos que encuentres en Internet que te interesen. Cuando te propongamos que leas un artículo o consultes una web, la puedes enlazar desde tu blog. Cuando encuentres una página web en la que hayas aprendido algo, la puedes enlazar desde tu blog. Y así con todo lo que encuentres. De esta forma, en el futuro podrás volver al blog para consultar aquello leíste una vez.


Algunas de las cosas que debes hacer en el ejercicio que te proponemos son:


1. Crea un blog en Blogger.
2. Selecciona un nombre de dominio (URL) para tu blog.
3. Crea enlaces a páginas web propias y a páginas de otros sitios web. Por ejemplo, puedes empezar a crear enlaces a los artículos de la Wikipedia que tratan los temas que se han visto en este módulo: el hipertexto y la hipermedia, las URLs, los nombres de dominio, etc.
4. Inserta elementos multimedia, como imágenes y vídeos, en tu blog.




Módulo 0: Historia de la Web
Los objetivos de este módulo son:
Conocer los acontecimientos más importantes de la historia de Internet y la Web.
Aprender algunos aspectos importantes sobre el funcionamiento de Internet y la Web: las URLs, los nombres de dominio, las direcciones IP y el sistema de nombres de dominio.
Diferenciar Internet y la Web.
Ser capaz de utilizar Blogger, un sistema de gestión de contenidos, para publicar información en la Web.


La Web


En 1989, Tim Berners-Lee llevaba varios años trabajando en el CERN, la Organización Europea para la Investigación Nuclear. Aunque Tim era físico, desde que había finalizado sus estudios universitarios se había dedicado a trabajar en temas de telecomunicaciones e informática. En marzo de 1989, Tim escribió un pequeño informe, Information Management: A Proposal, en el que proponía el desarrollo de un sistema distribuido de gestión de la información.

Tim le presentó el informe a su jefe, Mike Sendall. Mike le devolvió a Tim el informe con sólo tres palabras escritas al principio de la primera página, Vague but exciting..., impreciso pero emocionante...



Justo 25 años después, ahora en el año 2014, estamos celebrando que Tim Berners-Lee escribió ese pequeño informe. Porque ese pequeño informe que proponía el desarrollo de un sistema de gestión de la información para solucionar el problema que existía para compartir la información en el CERN se transformó en algo enorme, la Web.


Sólo tenía que tomar la idea del hipertexto y conectarlo a las ideas de TCP y DNS y ¡ta chan! - La Web.
Tim Berners-Lee












Módulo 0: Historia de la Web