Creando mi primer sitio Web. Los mock-up de las paginas de sitio.

Siguiendo con la tarea del prototipado de mi primer sitio Web comienzo con la esquema de página por página. Primer wireframe general  que hice ayer me servirá de guía. Voy a seguir con Adobe Muse pero sin hacer trampas, solo el mockup de página y ya esta.
            Con este programa se puede crear y publicar los sitios Web trabajando casi solamente con los             elementos gráficos, también te ofrece la oportunidad exportar tu diseño del sitio Web en                       formato .html.
Pero mi propósito es aprender a crear una página Web con HTML y CSS, aunque pienso que también tendré que espabilarme con JavaScript ( tengo algunos conocimientos de programación básica en Java y mirando el lenguaje JavaScript lo vi bastante comprensible ).
            Bueno, vamos por partes, como diría el Jack Destripador...

Página Inicio

Página Sobre mi

Página Gallería 

Página Blog

Página Contacto

Página Proyectos

Página Proyecto N

Página Regalo

No quiero ni pensar lo que saldrá en la ventana del navegador cuando lo escribiré en el HTML.
¿Conocéis "  Expectativas vs. Realidad  "? Pienso que más o menos esto...

Creando mi primer sitio Web. Wireframe de sito Web

Al final del Modulo 2 se nos propone comenzar a crear un sitio Web para publicarlo en Internet al final del curso.
Tenemos 3 variantes propuestos:
        1. Un currículo
        2. Identidad digital personal en la Web
        3. Un sitio de empresa
Me gustaría probar crear un sitio Web personal. Así que comenzamos!

WIREFRAME DE NAVEGACIÓN DE SITIO WEB

 El  Wireframe o esquema de sitio web es el primer paso que permite esquematizar el diseño de la página u ordenamiento del contenido de sitio Web.

 Primero comenzaré con el esquema general del sitio.

Debo decir que me gusta el diseño gráfico, ilustración y dibujo y me gustaría tener un sitio de web personal para poder exponer mis proyectos.

  El primer wireframe lo realicé con el programa de prototipos y diagramas Gliffy. 

Diagrama inicial

Diagrama más detallada

Planteo que mi sitio web tendrá las siguientes paginas :

•    Home page
•    Sobre mí          ↱ Proyectos  ⇀ № 1⇀ №2...
•    Gallery    ⥤ ⥤
•    Blog                 ↳ Regalo para ti
•    Contact         

Mi siguiente paso será probar realizarlo con software Adobe Muse.
De momento hice un "Plan" como lo llaman en Muse, o sea un diagrama general de paginas que tendrá mi sitio Web.

El fireframe de sitio en Adobe Muse

Mi primera impresión " Es un programa maravillooooooosooooo!"En 1 minuto lo tenía hecho todo.
Os debo una explicación. Hago muchos proyectos personales de ilustración y diseño gráfico, para los quales uso los programas de Adobe Photoshop, Illustrator, InDesign  etc. No puedo permitirme comprarlos así de golpe, pero ahora hay una buena opción... Estoy suscrita al Adobe Creative Cloud que me permite (pagando un precio muy razonable al mes 49,99€+ IVA) tener acceso a todas las programas de Adobe en su versión CC.
Ahora comenzaré hacer los mock-up de las páginas.

Continuará....

Un pequeño análisis de los editores web

En la actividad 2.15 nos piden analizar los editores de paginas web. Ante todo debo decir que ya tengo instalado un editor gratuito Komodo Edit y me parece fantástico porque es bastante completo:Es multilenguaje ( HTML, HTML5, CSS, JavaScript, PHP, Python, Perl, Ruby...), se puede obtener la vista de la pagina en un navegador... etc.Puedo adelantar que me quedaré con éste editor.
Mirando algunas páginas web encontré una lista de 10 mejores editores de las páginas web (articulo escrito por Jose Manuel Alarcón)
La repasé visitando las páginas web de los desarrolladores. Me gustó mucho CoffeeCup, tiene buena pinta. Es libre para el sistema Windows en una versión básica y "Ohh, que sorpresa..." la versión para Mac es únicamente de pago $69.
El editor WYSIWYG multiplataforma KompoZer también se ve muy bien. Es gratuito. Utiliza código de Mozilla Composer, así que supongo que como y el editor BlueGriffon utiliza por debajo el motor de renderizado de Firefox para visualizar las páginas a medida que las vamos editando.
También hablan muy bien del Aptana Studio otro editor multiplataforma y multilenguaje de carácter gratuito. Dicen que:

"Ofrece una excelente ayuda contextual a la hora de escribir código HTML, que incluye también el soporte de los diferentes navegadores para cada característica". 

Aún que avisan que esta basada en Eclipse o sea en Java, por si no os interesa instalar esta plataforma. Puede ser que probaré este editor más adelante, porque con el se puede probar la página en todos los navegadores ( por si alguien tiene dudas: JDK de Java es gratuito).
Muchos elogios se dedican al editor JetBrains WebStorm, es de pago 44€. Por lo que leí parece maravilloso para los profesionales de la programación de páginas web.
☼ Cuando " seré mayor" me compraré uno ;D ☼ 

Apuntes para el Modulo 1: Como funciona la Web

"La World Wide Web (WWW, o simplemente Web) es un espacio de información en el que los elementos de interés, denominados recursos, se identifican mediante identificadores globales llamados Identificadores Uniformes de Recursos (URI)."

     Architecture of the World Wide Web, Volume One  es una recomendación del W3C del año 2004 
  en la que se describe la arquitectura de la Web y las decisiones de diseño que condujeron a alcanzar   esa arquitectura y modo de funcionamiento.

 

Las 3 principales formas de conectarse a Internet en España y sus diferencias 

  Cobre, fibra óptica, cable

El nombre de dominio

ICANN (Internet Corporation For Assigned Names and Numbers) es el organismo que regula los nombres de dominio en Internet.

"El nombre de dominio, por ejemplo “icann.org”, es básicamente la dirección de una persona u organización en Internet. Es donde otras personas pueden encontrarlo en línea, y también puede convertirse en su identidad en línea."

-Para registrar un nombre de dominio, debe realizar lo siguiente:

•  Elija el nombre de dominio de primer nivel (también llamado extensión) y el de segundo nivel (también llamado etiqueta) .
•  Seleccione un registrador o revendedor para hacer el registro . 
•  Verifique la disponibilidad del nombre que eligió . 
•  Decida cuál será la longitud del registro . 
•  Realice los procedimientos de registro, incluido el pago 

 -¿Por qué hay tanta diferencia en los costos de los nombres de dominio?

Algunas fuentes ofrecen nombres de dominio por precios que parecen muy bajos, mientras que otras lo hacen por precios que parecen muy altos. Los registradores acreditados por ICANN pueden fijar sus propios precios por los servicios de registro de nombres de dominio. Algunas diferencias de precio se deben al nivel de servicio técnico que ofrece cada registrador. Por ejemplo, un registrador cuya mesa de ayuda está disponible las 24 horas del día, los siete días de la semana, quizás cobre más que un registrador que sólo cuenta con una dirección de correo electrónico para soporte. Además, puede ocurrir que los registradores ofrezcan nombres de dominio junto con otros servicios, lo que daría como resultado un precio mayor.

La información detallada sobre el registro, la renovación o la transferencia de los nombres de dominio se encuentra en la Guía para principiantes para nombres de dominio publicado 
por ICANN

Como se ve en el siguiente vídeo oficial de red.es solo transcurren unas milésimas de segundo desde que el usuario aprieta el botón para navegar a una dirección web hasta que se resuelve la dirección IP asociada a un nombre de dominio y se solicita el recurso asociado a la dirección web.

Los registros DNS        

DNS (Domain Name System) o Sistema de nombres de dominio en español  pertenece a la familia de los protocolos de Internet. Su función es la resolución (traducción) de nombres de dominio. Los usos más comunes son la asignación de nombres de dominio a direcciones IP  y la localización de los servidores de correo electrónico de cada dominio.

  Tipos de registros DNS:

• A = Address (dirección) Traduce nombres de servidores de alojamiento a direcciones IPv4
• AAAA = Address (dirección) Se usa en IPv6
• CHAME = Canonical Name (nombre canónico) Crea nombres de servidores de alojamiento adicionales, o alias, para los servidores de alojamiento de un dominio
• NS = Name Server (servidor de sombres) Define la asociación que existe entre un nombre de dominio y los servidores de nombres que almacenan la información de dicho dominio     
• MX = Mail Exchange (registro de intercambio de correo) Asocia un nombre de dominio a una lista de servidores de intercambio de correo para este dominio
• PTR = Pointer (indicador) Funciona a la inversa del registro A, traduciendo IPs en nombres de dominio
• SOA = Start of authority (autoridad de la zona) Proporciona la información sobre el servidor DNS primario de la zona
• HINFO = Host INFOrmation (información del sistema informático) Permite conocer el tipo de máquina y sistema operativo al que corresponde un dominio
•  TXT = TeXT (información textual) Permite a los dominios identificarse de modos arbitrarios
• LOC = LOCation (localización) Permite indicar las coordenadas del dominio
• SRV = SeRVices (servicios) Permite indicar los servicios que ofrece el dominio
• SPF = Sender Policy Framework (marco legal de remitentes) Ayuda a combatir el spam
• ANY = Toda la información de todos tipos que exista

 

Tim Berners-Lee, el padre de la Web

  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.

                                                 autor: fotógrafo  Paul Clarke                                                    

  
Ante la necesidad de distribuir e intercambiar información acerca de sus investigaciones de una   manera más efectiva, Berners-Lee desarrolló las ideas fundamentales que estructuran la web. 
 Él y su grupo crearon lo que por sus siglas en inglés se denomina LenguajeHTML  (HyperText Markup Language) o lenguaje de etiquetas de hipertexto, el protocolo HTTP(HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL (Uniform Resource Locator).
Es posible encontrar muchas de las ideas plasmadas por Berners-Lee en el proyecto Xanadú (que propuso Ted Nelson) y el memex(de Vannevar Bush).

Podéis escuchar lo que piensa Berners-Lee sobre el pasado y el futuro de la Web en su discurso
en el acto dedicado al 25 Aniversario de la Web: