julio 2018 - Introducción al Desarrollo Web | HTML y CSS

martes, 31 de julio de 2018

Modulo 2 | Editores de Páginas Web
julio 31, 2018 2 Comments
Cuando se está iniciando en el mundo del desarrollo web, tal vez encontrar la herramienta perfecta para escribir nuestras páginas web puede confundirnos un poco, todo esto gracias a que alrededor de la web hay una infinidad de posibilidades de editores. Por ello hoy analizaremos algunos cuantos y sus ventajas y desventajas.

Sublime Text
Este editor es bastante liviano, mutiplataforma y a pesar de ser de pago su versión de prueba se extiende muy al estilo de WinRar. La funcionalidad se puede mejorar fácilmente y la personalización solo requiere una instalación de complemento. Ofrece una paleta de comandos para facilitar el acceso a fragmentos, configuraciones y más. Ofrece edición y selección de múltiples líneas. Personalmente ya hace bastante tiempo vengo utilizando este editor y me he adaptado mucho a el gracias a su interfaz, llevando a cabo proyectos con otros lenguajes como Java. A pesar de que suele tardar un poco en archivos y proyectos grandes, es una herramienta muy buena.   



Brackets
Para ser sinceros hace muy poco tiempo que he descubierto Brackets, sin embargo; me ha dejado impresionada. Es una herramienta excelente para principiantes ya que al igual que Sublime Text ofrece comandos para facilitar el acceso a fragmentos. Está desarrollado por Adobe, es liviano, moderno y ofrece una gran interfaz de usuario. Viene con el administrador de extensiones incorporado para una fácil administración de las mismas. Y aunque uno de sus mayores problemas es que su soporte está limitado solo para lenguajes web. Ofrece vista previa en vivo, soporte de preprocesador y editores en línea, es decir que sin necesidad de guardar y volver a recargar nuestro navegador local, podemos visualizar los cambios de nuestro proyecto. 



Atom
Autodenominado el editor de texto hackeable, Atom se presenta como una herramienta de código abierto y de uso completamente gratuito. Es altamente personalizable gracias a su infinidad de paquetes disponibles. Ofrece funciones de control de Git y administración de paquetes. La unica gran desventaja que puedo encontrarle es el consumo de recursos. Atom consume mucha memoria. Sin embargo, es aconsejable ignorar Atom si se planea trabajar en proyectos grandes. Está disponible para los tres sistemas operativos principales y es completamente portable.



Dreamweaver
Una de las mejores herramientas que he utilizado para la creación web, entre sus grandes ventajas se destaca el ser muy bueno para trabajos profesionales.Su soporte sigue los estándares del World Wide Web Consortium. Se puede diseñar y crear páginas web sin conocimiento de código HTML. Permite pre visualizar las páginas web en casi todos los navegadores web, además de visualizar los cambios en la aplicación de manera inmediata al dividir la pantalla entre código y diseño. Permite el uso de extinciones como HTML y Java Script. Lo puede utilizar cualquier usuario para crear webs sin ser profesional. Además permite el uso de extensiones, que son pequeños programas que cualquier usuario puede escribir, descargar e instalar, ofreciendo funcionalidades añadidas a la aplicación. Aunque esta es un aplicación de paga, y deba contratarse con toda la suite de Adobe, yo la recomendaría si realmente se le dará peso a nuestro trabajo en este ámbito web.



En conclusión, cualquiera de estás herrmientas es buena, siempre y cuando sepamos identificar nuestras necesidades en nuestros proyectos o ejercicios. Personalmente para los ejercicios del curso probaré Brackets, aunque mi predilección siempre se va a Sublime Text  y Dreamweaver.
Reading Time:

viernes, 27 de julio de 2018

Modulo 2 | Herramientas de Prototipado
julio 27, 20180 Comments
Después de conocer los objetivos y demás conceptos necesarios para resolver una problemática web, expresado por medio de un 'Briefing Creativo' o de 'Diseño'; es necesario desarrollar el prototipo o propuesta del mismo proyecto a realizar. Para ello existen diferentes herramientas gratuitas o de paga que reseñaremos a continuación.

Pencil Project
De descarga completamente gratuita (Pencil Project) y para los sistemas operativos Windows, Linux y MAC OSX. En el pueden realizarse diferentes tipos de prototipado, no solo para proyectos web, si no que aquellos que sean de escritorio o bien moviles. Esto gracias a la infinidad de shapes que se disponen; con diferentes estilos, diseños y capaz de buscar muchos más paquetes en clipart.org de manera individual o los paquetes que pueden importarse de archivos externos, o del mismo repositorio de Pencil Proyect. Ofrece aparte la personalización de cada una de las shapes. Y en cuanto al Canvas igualmente es de completa personalización en formatos. Otro punto favorable, es la exportación a diferentes tipos de archivo, desde una imagen .PNG, a una plantilla HTML, un PDF con propiedades de edición, entre otros. 



Balsamiq
Es una aplicación tanto web, como de escritorio para la realización de Wireframing tanto estático como dinámico. Es de pago, pero oferece 30 días gratis a modo de prueba. Cuenta con un estilo muy hand-drawn. Entre los beneficios de esta plataforma podemos encontrar tutoriales desde lo más básico a lo más avanzado; foros de discusión y una interfaz muy intuitiva. Al igual que en Pencil Project pueden exportarse más shapes y paquetes del repositorio de Balsamiq. Y una de las ventajas a resaltar mucho más, es que los proyectos pueden ser colaborativos, esto sirve muchísimo cuando la planeación corresponde a un equipo grande de trabajo. Además cuenta con un presentador en tiempo real de como funcionaría el proyecto. 


Gliffy
Con está app web se pueden realizar una cantidad bastante extensa de prototipos. Esta plataforma es de pago pero permite 14 días de prueba. Sus shapes son de un estilo muy minimal, sin embargo; permite subir imágenes en formato png, jpg y gif para poder personalizar el esquema necesario. Permite colaboradores. Su apartado de ayuda provee atajos, un manual de usuario, consejos, etc.  Puede guardarse cualquier proyecto en Goggle Drive. Su interfaz es muy simple y fácil de utilizar. 



En general, las tres herramientas cubren con lo principal para llevar a cabo la realización de prototipado, tanto Gliffy como Pencil Project ofrecen más plantillas para otros proyectos que facilitan la realización de esquemas. Sin embargo; el primero es de pago y solo se puede utilizar de manera online, lo que complicaría el trabajo si no hubiera conexión a internet.

En cuanto a Balsamiq debido a su  interfaz tan intuitiva, la ayuda por medio de sus foros y tutoriales hace una experiencia más sencilla al trabajo, sin embargo; y a pesar del presentador a tiempo real, creo que sería necesario tener otros formatos para exportar el proyecto. 

Por eso y para concluir, al menos en proyectos pequeños, Pencil Project es la opción ideal.
  




Reading Time:

miércoles, 25 de julio de 2018

Modulo 2 | Fases del Desarrollo Web
Modulo 2 | El desarrollo web
julio 25, 20180 Comments
Muchas veces se confunden los términos desarrollo web y diseño web y se piensa que el diseño web incluye el desarrollo completo de una página web. Y no es así.

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

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


Reading Time:

sábado, 21 de julio de 2018

Modulo 1 | Sistema de gestión de Contenidos
julio 21, 20180 Comments
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.



Reading Time:
Modulo 1 | Direcciones IP
julio 21, 20180 Comments
Una dirección IP identifica un ordenador o cualquier otro dispositivo de red, como un router o switch, en Internet.

Cualquier dispositivo que se conecta a Internet, ya sea un ordenador, una tableta o un teléfono móvil, tiene asignada una dirección IP.

En la actualidad existen dos sistemas de direccionamiento, dos conjuntos de direcciones IP, IPv4 e IPv6.

Las direcciones IPv4 se expresan por un número binario de 32 bits, permitiendo un espacio de direcciones de hasta 4.294.967.296. Todo esto seguramente te suena a chino pero lo que quizás no te suenan a chino son números como estos, alguna vez lo habrás visto en tu ordenador o en tu teléfono móvil.

Las direcciones IPv6 se expresan por un número binario de 128 bits, permitiendo un espacio de direccionamiento de hasta 3.4×1038, lo que permite que cada persona en la Tierra pueda hacer uso de millones de direcciones IP.

Como las direcciones IPv6 son más largas se emplea la notación hexadecimal: cuatro dígitos hexadecimales separados por dos puntos. Se emplea esta notación porque si se siguiera utilizando la de IPv4 tendríamos que escribir números como estos.



Reading Time:
Modulo 1 | Los nombres de Dominio
julio 21, 20180 Comments
El nombre de dominio es un nombre único que normalmente se emplea para identificar un sitio web en Internet.

Hasta hace unos años, en los nombres de dominio sólo se podían usar los caracteres ASCII. La tabla ASCII contiene 128 caracteres, numerados del 0 al 127, pero sólo hay 95 caracteres ASCII imprimibles, numerados del 32 al 126. La tabla ASCII contiene las letras del alfabeto inglés, pero no contiene otras letras, como las vocales acentuadas o la eñe, lo cual plantea un problema para el español.

Sin embargo, gracias a la introducción del Nombre de dominio internacionalizado, ya es posible utilizar nombres de dominio con caracteres en otros idiomas. Pero por ahora no está muy extendido su uso.


Reading Time:
Modulo 1 | Las Url's
julio 21, 20180 Comments
URL, Uniform Resource Locator, el localizador de recursos uniforme, el sistema de localización o direccionamiento de los documentos web.

Este es el formato básico de una URL, aunque también puede incluir otros datos, como el nombre de usuario y la contraseña de acceso a un ordenador, el puerto de conexión, o
una combinación de todo lo anterior.

Por ejemplo, esta URL está formada por estas partes: el esquema, la máquina, el directorio y el archivo.

¿Qué es el esquema en una URL?
El esquema suele representar el protocolo, es decir, el mecanismo o método que se emplea para recuperar un recurso a través de una red de ordenadores.

A veces, en vez de esquema se emplea el término servicio, en el contexto de una URL son equivalentes.Los esquemas más conocidos son http, https, ftp, mailto y file.

Las URLs son un elemento básico de la Web, ya que son las que definen los hiperenlaces o hipervínculos y permiten definir el hipertexto, que permite relacionar información de diversas fuentes por medio de enlaces.




Reading Time:
Modulo 1 | El hipertexto y la hipermedia
julio 21, 20180 Comments
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. En el siguiente vídeo se explican los orígenes del hipertexto y se definen los conceptos hipertexto, multimedia e hipermedia:

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.

Reading Time:
Modulo 1 | Cómo funciona la Web
julio 21, 20180 Comments
Objetivo:
Conoce los fundamentos de la Web que te permitirán crear tus propias páginas 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
Aspectos básicos de las aplicaciones Web


Reading Time:
Modulo 0 | Nacimiento de Internet
julio 21, 20180 Comments
La historia de internet se remonta al temprano desarrollo de las redes de comunicación. La idea de una red de ordenadores creada para permitir la comunicación general entre usuarios de varias computadoras sea tanto desarrollos tecnológicos como la fusión de la infraestructura de la red ya existente y los sistemas de telecomunicaciones. La primera descripción documentada acerca de las interacciones sociales que podrían ser propiciadas a través del networking (trabajo en red) está contenida en una serie de memorandos escritos por J. C. R. Licklider, del Massachusetts Institute of Technology, en agosto de 1962, en los cuales Licklider discute sobre su concepto de Galactic Network (Red Galáctica).

En octubre de 1962, Licklider fue nombrado jefe de la oficina de procesado de información ARPA, y empezó a formar un grupo informal dentro del DARPA del Departamento de Defensa de los Estados Unidos para investigaciones sobre ordenadores más avanzadas. Como parte del papel de la oficina de procesado de información, se instalaron tres terminales de redes: una para la System Development Corporation en Santa Mónica, otra para el Proyecto Genie en la Universidad de California (Berkeley) y otra para el proyecto Multics en el Instituto Tecnológico de Massachusetts. La necesidad de Licklider de redes se haría evidente por los problemas que esto causó.



Reading Time:
Modulo 0 | La familia de Protocolos de Internet
julio 21, 20180 Comments
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.

En los siguiente enlaces se encuentra información especifica de los tipos de protocolos:



Reading Time:
Modulo 0 | Internet en el Mundo
julio 21, 20180 Comments
El acceso a Internet varía considerablemente de un país a otro. Y desgraciadamente, un mal acceso a Internet perjudica de forma sustancial la economía de un país.

En junio de 2014, la Internet Society publicó el Global Internet Report 2015. 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.

Actividad.

•¿Cuál es el porcentaje de penetración del acceso a Internet en tu país? 
México con el 50%
• ¿El acceso a Internet en tu país es barato o caro? 
1.69 USD aproximadamente por megabit de velocidad.
• ¿Cuál es la velocidad media de acceso a Internet en tu país? 
7.2 Mb/s aproximadamente.
• ¿Y qué posición ocupa tu país comparado con otros países? 
92 en penetración del acceso a internet y puesto 65 en velocidad. 
Reading Time:
Modulo 0 | Internet y la Web
julio 21, 20180 Comments
Desgraciadamente, mucha gente confunde Internet y la Web. ¿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.
Sin embargo, la Web es el sistema más famoso de todos ellos, y por eso mucha gente cree que Internet y la Web son lo mismo, pero no es así.

Reading Time:
Modulo 0 | ¿Cómo me ha cambiado la vida la Web?
julio 21, 20180 Comments
• ¿Crees que la Web (Internet) es el invento más importante del siglo XX?
Tal vez mencionarla como 'la más importante' caería en la exageración, si bien vino a cambiar muchos aspectos en la vida del ser humano, se necesita de los otros ámbitos para su desarrollo.

• ¿Crees que la Web (Internet) debería aparecer también en una lista de los inventos más importantes de la humanidad?
En efecto, ya que vino a cambiar la comunicación tanto en rapidez como calidad y otros procesos.

• ¿Cómo te ha cambiado la vida la Web?
Ofreciéndome un sin fin de recursos para el aprendizaje. Enlaces con comunidades con mis gustos a fin, entre otras cosas.

• ¿Qué cosas has dejado de hacer en el "mundo real" porque ahora las haces en el "mundo virtual" de la Web?
La compra de boletos para museos o conciertos, pedir un taxi, comida y sacar citas médicas.



Reading Time:
Modulo 0 | Los 25 años de la Web
julio 21, 20180 Comments
¿Realmente nació la Web hace 25 años? ¿Cuándo se empieza a contar la edad de una persona, desde que es concebida o desde que nace?

Sí, la Web fue concebida hace 25 años, en concreto el 12 de marzo de 1989. Ese día, Tim Berners-Lee finalizó su informe Information Management: A Proposal, pero era simplemente eso, un informe, todavía no existía el sistema que proponía desarrollar.



Reading Time:
Modulo 0 | La Web
julio 21, 20180 Comments
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.
Reading Time:
Modulo 0 | Historia de la Web
julio 21, 20180 Comments
Objetivos:

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

Reading Time:
Objetivos del Curso | Introducción al Desarrollo Web
julio 21, 20180 Comments
Aprender a crear propias páginas web profesionales adaptables a distintos dispositivos. Con un poco más de detalle, al finalizar este curso:

  • No pensarás que Internet y la Web son la misma cosa.
  • Sabrás algunas cosas que seguramente desconocías sobre el funcionamiento de Internet y la Web.
  • Podrás crear un sitio web con un sistema de gestión de contenidos llamado Blogger.
  • Sabrás para qué sirve el lenguaje HTML y serás capaz de utilizarlo para definir la estructura y el contenido de una página web (si vuelves a leer con cuidado esta frase ya sabrás para qué sirve HTML).
  • Sabrás para qué sirve el lenguaje CSS y serás capaz de utilizarlo para definir la presentación, el aspecto de una página web (¿ya sabes para qué sirve CSS?).
  • Serás capaz de crear un sitio web formado por varias páginas web desarrolladas con HTML y CSS.
  • Serás capaz de publicar el sitio web en Internet.
  • Tendrás algunas nociones sobre usabilidad y accesibilidad que te ayudarán a desarrollar sitios web de calidad.
  • Sabrás cómo mejorar el posicionamiento de tu sitio web en los resultados de los buscadores.



Google Actívate. (2018). Available at: https://cursos.formacionactivate.es/idesweb-parte-1/curso#course-content [Accessed 21 Jul. 2018].
Reading Time: