viernes, 1 de diciembre de 2017

Tema 3. Diseño y edición de páginas web

Tipos de páginas Web
Es importante saber que existen varios tipos de páginas y dependiendo de para que vamos a crear una página web utilizaremos un tipo u otro de páginas web. Por ejemplo, si queremos crear una página en la que no va a haber interacción con el usuario y sólo vamos a mostrar información vamos a crea una Página estática. En este tipo de páginas solo el administrador de la misma puede modificar los contenidos y no es posible interaccionar con ella aunque si va a ofrecer la posibilidad de navegar, a través de enlaces, a otras páginas.
Si por el contrario queremos una página en la que el usuario pueda inter-actuar con la página más allá de un simple enlace, pueda modificar los contenidos, comparar productos, acceder mediante contraseña, filtrar contenido entonces tendremos que crear una Página dinámica. Este tipo de páginas van a exigir al creador un gran conocimiento de programación o de la utilización de algún gestor de contenidos que disponga de acciones predefinidas que se incluirán en la página.

Estándares de publicación y editores web
El desarrollo de las páginas web debe seguir unos estandarés o normas para que puedan ser visualizadas desde navegadores de todo tipo y de cualquier país. Estos estandandares, que están en constante evolución, son regulados desde diferentes organismos oficiales como World Wide Web Consortium (HTML, XML,CCS,SVG...), la Ecma International (Javascript) o el Unicode Consortium (estándar de codificación de caracteres Unicode)

Lenguajes para la creación de una página web
Como ya deberíamos saber las páginas web se almacenan en ordenadores, locales o de acceso público en Internet que reciben el nombre de servidores web. Para el usuario final el proceso que se sigue cuando conectamos con un servicio en Internet (por ejemplo el buscador google.es) es transparente. En realidad al pinchar sobre un enlace (URL) se lanza una petición de página web a un servidor en Internet que la procesa y devuelve el código de la página web solicitado. Más tarde es el navegador de Internet que estemos usando (iexplorer, chrome,....) el que se encarga de interpretar esa información y mostrársela correctamente al usuario que la solicito.
El servidor web va a emplear una serie de lenguajes de programación y de consulta de datos que le va a permitir generar la estructura de la página web solicitada y siempre codificada en lenguaje estándar HTML. Pero a parte de la información en formato HTML el servidor también puede mandarle al cliente otro tipo de información que va a permitir dotar de cierta flexibilidad o de un diseño concreto adecuado al usuario.
Podemos decir entonces que hay código relacionado con la página web que se ejecuta en el SERVIDOR web de Internet o código que se ejecuta en el CLIENTE (es decir el dispositivo del usuario). Entre los lenguajes más usados hoy en día podemos encontrarnos:

  • Que se ejecuta en el SERVIDOR:
    • PHP, Java, .NET, Ruby, Python. Estos lenguajes permiten programar el comportamiento del servidor web en el momento en que atienden la petición hecha por el usuario y generan el contenido HTML que corresponde. Entre medias se comunican con la base de datos, que reside en el servidor de páginas web, para obtener la información necesaria.
    • SQL. Este es el lenguaje que se utiliza en el servidor para interaccionar con la Base de Datos y realizar operaciones como consultas, inserciones o modificaciones de datos que ya estuviesen en la BBDD. Cuando nos conectamos a nuestro usuario de Google tendrá que consultar si el usuario y la contraseña que hemos introducido es correcta contra una BBDD y luego devolvernos la página con las características que hayamos configurado nosotros.
  • Que se ejecuta en el lado del CLIENTE:
    • HTML. Lenguaje de marcas compuesto por multitud de etiquetas que estructuran y dan forma a la página web. El formato más actual es el HTML5 aunque existen otros como XHTML.
    • CSS. Lenguaje que se utiliza para definir el estilo con el que se presenta la estructura HTML de la página web. La versión más actual es CSS3 que permite la inclusión de animaciones y la gestión de diferentes resoluciones lo cual va a favorecer la visualización de los contenidos en soportes como los smartphones o las tabletas.
    • JavaScript. Lenguaje de programación interpretado por el navegador del lado del Cliente. Este lenguaje añade dinamismo a la página pues permite la modificación de la estructura de la misma y de su estilo. Esto va a permitir que se modifique el aspecto de una página sin necesidad de volver a conectar con el Servidor.

Desarrollo de páginas web HTTP 5.
Como vimos en el tema anterior en la sección que hablaba del SEO es muy importante que nuestras páginas cumplan los entandares de HTTPS. Existen diferentes aplicaciones que podemos usar para crear páginas web que cumplirán o no los estadares establecidos y que nos asistirán más o menos en la creacción de una página web. En este curso vamos a afianzar el conocimiento del código HTML utilizando una herramienta llamada Notepad++


Instalación de un sistema de gestión de contenidos
La forma más sencilla de crear un sitio web es usar un CMS o también conocido como gestor de contenidos. Estas aplicaciones disponen de un formato predefinido sobre el que vamos a generar contenidos sin necesidad de conocer un lenguajes de programación web ni de diseñar la estructura básica de la página.
Algunos de los gestores de contenidos más utilizados son WordPress, Joomla! o Drupal aunque los hay más especializados como Magento especializados en la creación de webs de comercio electrónico.
En nuestro caso vamos a utilizar WordPress que cuenta además de la creación y gestión de blogs de otras funcionalidades que van a permitir, mediante el uso de pluggins, crear casi cualquier tipo de sitio web.
Para poder gestionar contenidos tendremos que descargar el programa WordPress desde la página de bitnami para que sea compatible con XAMPP. Pero este programa necesita un entorno que ejecute un servidor web y para ello vamos a necesitar una aplicación llamada XAMPP que integra: servidor web, PHP y MySQL para que pueda trabajar WordPress. En el enlace aparece una página que explica cómo instalar XAMP. Aun así los pasos a seguir son los siguientes:
  1. Descargar e instalar XAMPP. La carpeta en la que se debe instalar es c:\xampp.
  2. Una vez que termina la instalación hay que ejecutar xampp-control.exe con permisos de administrador para abrir el administrador de XAMMP. Es posible que hay servicios como Apache que se conecten al puerto 80 de la máquina con lo que habrá que revisar el fichero de httpd.conf de Apache y hacer algunos retoques tocando la configuración de XAMPP (buscar la palabra LISTEN para jugar con el puerto de escucha pudiendo cambiar de 80 a otro)
  3. Descargar e instalar la versión WordPress para XAMPP. Nos preguntará durante la instalación donde se instaló XAMPP, ya sabemos c:\xampp y se deberá especificar un usuario y una contraseña para administrar WordPress una vez instalado.
  4. A continuación habrá que completar la instalación con los siguientes datos. La comprobación de la correcta instalación se consigue accediendo a la dirección http://localhost/wordpress teniendo arrancados todos los servicios de XAMPP
    1. El Nombre del blog.
    2. El Soporte de correo necesario para el envio de notificaciones a los usuarios de la web y si elegimos Gmail como proveedor se configura con facilidad.
    3. El Tipo de instalación que habrá que elegir Ajustes para el desarrollo que nos va a permitir la instalación de pluggins aunque no incluye los mecanismos de seguridad que si integra Ajustes para producción para su publicación en Internet.

Configuración de la publicación de páginas en Filezila
Para ello hay que saber configurar una serie de parámetros fundamentales que se detallan en el documento que podrás ver en el siguiente enlace
Trabajar con código html Notepad++

Practica
Con los conocimientos adquiridos hasta este momento ya estamos listos para hacer la siguiente práctica  (enunciado)

miércoles, 1 de noviembre de 2017

Tema 2. Blogs


¿Qué es un blog?
Por todo el mundo es sabido que es un blog, a saber, un sitio web en el que los contenidos, que se van actualizando periódicamente, se presenta, ordenados de forma cronológica. Estos sitios web en un principio eran gestionados por un único usuario y versaban muchas veces sobre la vida del propietario. Hoy en día un blog puede estar gestionado por varias personas, se utiliza para cualquier propósito incluso con fines comerciales y vienen acompañados por una serie de gadgets que nos permiten su fácil seguimiento y que facilita la comunicación entre el usuario y la persona o entidad que los gestiona.

¿Qué tipos existen?
Como el propósito de los Blogs ha cambiado también podemos observar que han aparecido diferentes tipos de Blogs. Así por ejemplo, existen Blogs Colaborativos, en los que se trata un tema en concreto y varias personas publican entradas en el mismo blog. También existen los Blogs Corporativos que constituyen una plataforma de comunicación interactiva entre una empresa y sus posibles clientes. Blogs Personales, que utilizan usuarios particulares para publicar sus vivencias acompañados de fotos y vídeos, a veces personales. O también Fotologs o Vlogs en los que se publican sólo imágenes o vídeos incluso a veces solo links sobre algún tipo de contenido y en este caso se llaman Linklogs. Por último existen los Microblogs, plataformas en las que se publica contenidos muy breves, imágenes o fragmentos de vídeos y al ser tan breves su visita consume pocos recursos y se difunde de forma muy rápida.


¿Cómo puedo crear y gestionar un Blog?
Para crear y gestionar estos blogs vamos a contar con varios servicios que se podrán usar de forma gratuita, con ciertas limitaciones, o pagando una aportación anual si queremos contar con todas sus funcionalidades. Los dos servicios más importante podríamos decir que son WordPress y Blogger. En los dos casos habrá que darse de alta con usuario y contraseña para después crear y gestionar nuestro blog. En el caso de Blogger irá asociado a un usuario de Google con lo que si tenemos un correo de gmail tendremos asociado también el servicio de Blogs de Google.
Comencemos con la creación del Blog usando WordPress pinchando en su enlace. No pierdas detalle de los pasos para crear primero el usuario y luego elegir entre los productos que podemos desarrollar con WordPress (Blog, Sitio Web o Porfolio). En nuestro caso vamos a elegir la versión gratuita de creación de un Blog.
SLUG enlace
JETPACK

¿Respeto los derechos de autor de las obras en Internet?
Algo muy importante a la hora de crear un blog es saber que debemos respetar los derechos de autor de posibles contenidos que utilicemos en nuestro Sitio Web. Si el contenido procede de algún sitio con derechos de autor tipo Copyright deberemos saber que están registrados y protegidos por la ley y si queremos utilizarlos deberemos pedir permiso a su autor. Si por el contrario son contenidos que están publicados bajo licencia Creative Commons podremos utilizar el contenido pero siempre teniendo en cuenta las limitaciones que haya impuesto el autor de la obra. Por ejemplo en las líneas de más abajo he licenciado este blog con los permisos de No Comercial, de que se me mencione si se usa mi obra y que si se publica alguna obra conteniendo parte de mi obra o por completo que sea bajo la misma licencia. Pincha sobre el enlace de más abajo y podrás verlo.
Licencia Creative Commons
Blog ODGBlogTIC se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 3.0 Unported.


Otros contenidos
En los siguientes enlaces podemos ver contenidos complementarios que nos van a ayudar a responder algunas de las cuestiones de investigación.
- Blog sobre SEO
Añadir licencia creative commons a blogger
- Para añadir un formulario de contacto de google Drive enlace. Posteriormente habrá que ver las opciones de inserción del formulario para poder utilizarlo en Blogger.
- Para añadir pestañas en Blogger y otros trucos puedes utilizar el siguiente enlace 
- Para poder visualizar imágenes propias en gadget Slideshow de google mira en este enlace

Practica obligatoria
En el siguiente enlace practica se muestran los requisitos para hacer la practica obligatoria de creación de un blog profesional.


domingo, 3 de septiembre de 2017

Tema 1. La era digital

1. Tecnologías de la información y la comunicación.
Las TICs engloban todo tipo de dispositivos y aplicaciones comunicativas, como la radio, la televisión, los teléfonos móviles, los sistemas informáticos, las redes de comunicaciones, etc., así como los diferentes servicios y aplicaciones relacionadas con ellos, por ejemplo, las videoconferencias, las redes sociales, los foros de noticias o el correo instantáneo. Se puede decir que constituyen el conjunto de herramientas que posibilitan la búsqueda, la creación, el almacenamiento, el tratamiento, la comunicación y la presentación de información. Para llevar a cabo esta labor los usuarios cuentan con los ordenadores personales, portátiles, tabletas o smartphones y sobre todo un acceso casi ubicuo y sin horarios a las redes de telecomunicaciones que permiten el acceso a los servicios en Internet. Pero prácticamente todos los objetos pueden estar conectados y recoger información, procesarla y compartirla.

2. Internet de las cosas.
El acceso a las redes de objetos cotidianos como una TV, un electrodoméstico, un wearable o dispositivos deportivos inteligentes como un reloj de fitness es una realidad cada vez más presente. La información se recopila y se envía cuando la conexión lo permite para ser procesada mediante aplicaciones. Toda esta información puede ser utilizada para mejorar diferentes aspectos de nuestra vida.
En un futuro muy próximo estos dispositivos inteligentes se van a comunicar de forma continuada entre ellos mismos sin la intervención del ser humano usando los procolos M2M (máquina a máquina) y sistemas operativos como Google Brillo, Windows 10 IoT o Raspbia.


3. Servicios de Internet.
Conocemos de sobra toda la información que se puede encontrar en la red (arte, cultura, medicina, literatura, ingeniería...) y los diferentes formatos en que se encuentran como hipertexto, audios, vídeos, música o imágenes. Toda esta información, alojada en sitios web, nos permite como usuarios aprender, comunicarnos, divertirnos, crear, inter actuar o compartir. Estás acciones traspasan fronteras, eluden diferencias sociales y permiten expresarse de forma libre haciendo que Internet y las TIC se hayan convertido en la base de la sociedad del conocimiento.
Muchos de los servicios que permiten todas estás acciones son viejos conocidos. Así nos encontramos con la famosa WWW (World Wide Web), el correo electrónico, los foros de noticias, la telefonía VoIP (voz sobre protocolo de Internet), la videoconferencia, la mensajería instantánea, el almacenamiento en la nube y las redes sociales. Todos estos servicios necesitan emplear alguno de los múltiples protocolos TCP/IP de Internet.

4. Protocolos TCP/IP
Los protocolos de comunicaciones son lenguajes que permiten la comunicación entre los dispositivos de una red informática. El protocolo que se utiliza para la comunicación en Internet se conoce como TCP/IP y está compuesto por varias familias que en algunos casos nos son familiares y en otras no tanto. Por ejemplo, el famoso HTTP/HTTPS es el protocolo de transferencia de hipertexto que nos permite la navegación en páginas de Internet. Pero existen otros como el SMTP y POP3, que nos van a permitir el envío o la recepción de correos electrónicos desde un servidor remoto a través de un cliente de correos instalado en nuestro ordenador (por ejemplo: Outlook). Seguramente hayas oído hablar del FTP pero no sabrás que es un protocolo que nos permite hacer una transferencia de ficheros entre un cliente y un servidor. También tenemos el SSH, protocolo que nos permite acceder a máquinas remotas a través de una red informática.
Por último no podemos olvidar el propio protocolo IP (Internet Protocol) que se encarga de la transmisión de información, en forma de datagramas (paquete de datos que contiene una cabecera y unos datos), a través de la red. A estos datagramas se les añade la dirección IP de destino necesaria para que los routers la puedan encaminar hacia su destino. De ahí la importancia que tiene que el protocolo IP asigne una dirección única de IP a cada dispositivo en nuestra red .

5. Versiones del protocolo IP
Existen dos versiones del protocolo IPv4 e IPv6. Te preguntarás por qué existen dos versiones diferentes para un mismo protocolo. El problema está en la cantidad cada vez mayor de dispositivos que se conectan a Internet y que necesitan ser direccionados de forma única lo cual ha hecho que se pase de un IPv4 que usaba direcciones de 32 bits (4 secciones de 8 bits separadas por . expresadas en decimal) a un IPv6 que utiliza direcciones de 128 bits (8 secciones de 16 bits separados por : expresadas en hexadecimal).
TRABAJO COOPERATIVO: Dentro de tu grupo investiga y crea un esquema en el que se detallen las ventajas del protocolo IPv6 en términos de autoconfiguración de conexión en la red, de mecanismos de seguridad, de mejora de rendimiento y de movilidad de equipos entre diferentes redes. El siguiente enlace puedo ayudaros en vuestra tarea

6. Evolución de la Web.
Desde que nació la web en 1991 las cosas han cambiado mucho. En un principio se creo la Web 1.0 o web estática y luego se dió paso a la Web 2.0 o web social. Hoy en día y con la sobre saturación de información en Internet se está desarrollando la Web 3.0 o web semántica.
En el siguiente vídeo podrás ver está evolución de una forma gráfica y su por qué.
Pero no habla sobre la Web 4.0 o web total que deberás buscar tu por tu cuenta.
TRABAJO INDIVIDUAL: Investiga, reflexiona y genera un documento (aplicando las Reglas de Curación de la Información) sobre la Web 4.0 en el que detalles cual es su objetivo, en que se fundamenta y cuales van a ser sus ventajas y sus inconvenientes. Expresa tu opinión hacia este nuevo tipo de web.

Fiabilidad de las fuentes de información
La web es una fuente casi infinita de información con la que vamos a poder usar, interpretar, relacionar, compartir dicha información. El proceso de búsqueda de esta información se facilita mediante los servicios de buscadores como google, yahoo, boodigo, bing o de Metabuscadores ( Ixquick, MetaCrawler, IBoogie, etc...) que buscaran en varios buscadores simultáneamente. Pero hay que tener cuidado con fiabilidad de dicha información. Si se obtiene de enciclopedias digitales, diccionarios online, bibliotecas virtuales, portales educativos oficiales ,webs oficiales o tesis doctorales, etc...la información estará contrastada y podremos asumir que es cierta. Pero puede ser que la obtengamos de redes sociales, de redes colaborativas (wikipedia) o blogs privados donde la información no está contrastada.

Por eso a la hora de buscar información debemos identificar la veracidad de la información teniendo en cuenta:
  1. El tipo de publicación (páginas web oficiales, tesis doctorales, investigaciones cientificas....)
  2. El autor del texto (si el autor es un profesional del sector o acredita conocimientos sobre el tema).
  3. La procedencia de la información (publicaciones científicas, libros de texto, sitios web especializados).
  4. El contenido (analizar si la información es congruente, si tira de fuentes bibliográficas, si está bien argumentado...)
  5. La actualización (la información tiene una fecha de publicación que debe actualizarse para que no se quede obsoleto)
  6. El propósito (analizar si la información que se ofrece es objetiva) 
  7. La audiencia (analiza el publico al que va dirigido nos va a decir si es rigurosa o no la información)

En cualquier caso antes de difundir la información siempre hay que realizar un proceso de ¿curación de contenidos? (Recuperar, filtrar, revalorizar, organizar y difundir)

Curación de los datos
La palabra curación proviene del inglés y hace referencia al proceso que hay que realizar con los contenidos que búscamos en Internet a la hora de elaborar la información. En este proceso hay que:
  1. Recuperar. Buscar y recuperar información de diferentes fuentes.
  2. Filtrar. Seleccionar el contenido que consideramos relevante.
  3. Revalorizar. Aportar a la información valor añadido reflexiones propias, agradeciendo la información al autor o haciendo una critica constructiva a la misma.
  4. Organizar. Debemos etiquetar y clasificar la información por categorías.
  5. Difundir. Compartir el contenido a través de redes sociales, publicaciones en blogs o incluso a través de mensajería instantanea.
Para realizar esta labor de curación de la información podemos utizar herramientas como Evernote o feedly que nos ayudará a estar al día de la información que más nos interesa para elaborar contenidos.

Posicionamiento web de las publicaciones
El posicionamiento web o SEO hace referencia a las técnicas que se deben seguir para potenciar un mejor posicionamiento de una web en las búsquedas realizadas a través de buscardores como Google, Yahoo o Bing. Si una página está bien posicionada va a favorecer que tenga más visitas ya que se localiza con mayor facilidad y esto va a hacer que pueda difundir la información que le interesa o realizar más ventas.

TRABAJO COOPERATIVO: Investiga y elabora detalladamente un decálogo de las recomendaciones más importantes que se deben seguir en el posicionamiento WEB. Al final del documento detalla el proceso de verificación de la información que habeis seguido (tipo de publicaciones consultadas, autores del texto, procedencia de la información......)

sábado, 2 de septiembre de 2017

Punto de partida

Para continuar el curso TIC 1 Bachillerato 16/17 sería interesante seguir ahondando en la programación de app. Esta continuación de la programación nos va a servir para más adelante comenzar la programación Orientada a Objetos en lenguaje C++. Por ello será necesario recuperar el correo electrónico del curso pasado y con ello las primeras aplicaciones con AppInventor. Los alumnos que comienzan este año su andadura en las TIC necesitarán crear una cuenta en gmail siguiendo las especificaciones que se detallarán en clase. En el presente curso se van a valorar los conocimientos adquiridos, las habilidades pero también la capacidad del alumno para resolver problemas técnicos asociados a aplicaciones de forma independiente.

Las diferentes apps que se vayan desarrollando, tanto las del profesor como las de los alumnos, se irán colgando en esta sección para que el resto de los alumnos del centro puedan descargarse tanto el código como el resultado final.

Como recordareis del curso pasado muchas veces el emulador de AppInventor no nos funcionaba. Había un problema con el emulador Aistart en su proceso de carga de las piezas del programa desarrollado. Para resolver este problema se deben seguir las instruciones que se mencionan en el enlace. Resumiendo lo que hace es desinstalar la aplicacion de Mit Ai2 Compannion del movil simulado para instalar un versión más moderna la 2.40 que está disponible en la página de http:\\kio4.com\240.apk. También es interesante saber que algunos problemas con el emulador se pueden resolver cerrando el simulador con la combinación de tecla Ctrl + Z para posteriorme lanzar Emulator del AppInventor y al no estar en marcha volver a iniciarlo.


Vuelvo a compartir con vosotros ejercicios que vimos en clase el año pasado aunque ya los tendréis en vuestro repositorio de proyectos asociado a vuestra cuenta de correo.
  1. Ejercicio1 de calculadora. Se utilizan estructuras de control condicionales (Si---entonces) y se crea un procedimiento común. Se programan diferentes eventos y se cierra utilizando el acelerometro del móvil. 
  2. Ejercicio2 aplicación que repite lo escrito en un campo. Se usan variables globales, listas, estructuras de control (si entonces) y estructuras repetitivas (por cada elemento en la lista y repetir hasta).
  3. Ejercicio3 de dibujo en un canvas con puntos y lineas que varían su grosor.
  4. Ejercicio4 de utilización del componente speach
  5. Ejercicio5 de utilización de los nuevos eventos del canvas
EJERCICIO DE EXAMEN . AppInventor
Crea un juego/aplicación con AppInventor que utilice estructuras vistas en clase. Los requisitos mínimos que debe cumplir la aplicación/juego es que aparezcan algún componente de User Interface, junto a Layout (para ordenar los componentes), así como alguno de Media o Sensor o Drawing. Dentro del código deben usarse variables, listas (optativo), Procedimientos (obligatorio) y estructuras de control complejas (for each, while, if....). Sugerencias: Se puede desarrollar una aplicación Calculadora con memoria que muestre el resultado con números en formato imagen, una aplicación que contabilice los saltos que estoy dando y muestre por pantalla el número total en forma de imagen, una aplicación que muestre un objeto que se mueva a partir de dar a un botón.....