TIC II: Proyecto Diseño Web

Tras aprender a utilizar los lenguajes HTML5 y CSS3, vamos a realizar el diseño de una página web utilizando el software libre Bluegriffon.

Bluegriffon es un editor WYSIWYG (en ingles, el acrónimo de "lo que ves es lo que obtienes"), lo que permite al usuario realizar páginas web de forma sencilla sin apenas usar código. Sin embargo, utilizaremos Bluegriffon como base y retocaremos lo que necesitemos usando el código HTML y CSS aprendido. 

Puedes descargar la última versión estable (2.1.1) desde su página web o la versión 1.7.2, que usaremos en clase, desde la barra de software del blog.

En el siguiente enlace podéis descargar la carpeta del proyecto con todas las imágenes necesarias para crear nuestra página web.

Carpeta del proyecto           Download

¿Te interesa? sigue leyendo

TIC II: Hojas de estilo en cascada. Primeros pasos con CSS3

Aquí os dejo un pequeño manual que he ido realizando sobre CSS3. Está incompleto, pero podéis descargarlo para ir echándole un vistazo en clase. No os preocupéis que no hay que sabérselo de memoria, con tenerlo al lado para el examen basta...
Cuando lo tenga terminado os aviso

Download

Práctica CSS3

Práctica CSS3 Selectores

¿Te interesa? sigue leyendo

TIC II: Resumen de HTML5

Descargad las imágenes para analizar el funcionamiento y la estructura de un documento HTML5 y sus principales etiquetas.
El documento html que contiene toda esta información el el siguiente:

Download index.html

Podéis descargar la estructura de carpetas de la web con algunos archivos incluidos (pdf, zip, imágenes, vídeos, audios, etc) desde aquí

El software con el que lo he escrito no es el bloc de notas, sino que he utilizado un editor de código gratuito llamado brackets. Podéis descargarlo haciendo clic en el enlace que hay a continuación o en la barra lateral del blog, en la sección de software TIC. 
AVISO: No es compatible con Windows XP

Download Brackets

¿Te interesa? sigue leyendo

Comparador de imágenes

En esta entrada os dejo una pequeña aplicación que he encontrado en Internet y que quizá hayáis visto en alguna ocasión en algún periódico online cuando nos quieren mostrar el aspecto de una zona antes y después de una catástrofe o para comparar el aspecto de una actor o actriz antes y después del paso del tiempo o del paso por el quirófano.
El servicio online que nos permite hacer esto se llama JustaposeJS.
Sin más, os dejo el efecto 
La forma de incrustarlo en nuestro blog es la de siempre. JustaposeJS nos pedirá la dirección web de 2 imágenes o el enlace a Dropbox de dichas imágenes.
Lo más importante es que dichas imágenes tengan un enfoque, encuadre, tamaño y relación de aspecto similar. Si no las tienen originalmente se pueden modificar con nuestro editor de imágenes favorito (Gimp, Photoshop, etc).
Después nos generará un código <iframe> que deberemos copiar en la parte HTML de una de nuestras entradas.
Tras el salto os dejo un ejemplo que he creado con el aspecto del conocidísimo fondo de pantalla de XP tras el paso de los años. 

¿Te interesa? sigue leyendo

Prácticas de QCAD

En este enlace os dejo unos PDF´s con las prácticas a realizar. Guardadlas en vuestro ordenador en la partición D del disco duro, que no está congelada.

Práctica QCAD
Práctica QCAD 2
Práctica QCAD 3
Práctica QCAD 4

Para realizar las prácticas que vienen a continuación, usaremos AutoCad. La forma de trabajo no es idéntica al QCAD pero no creo que os resulte dificil. Además dispone de una herramienta de recorte que funciona mucho mejor y que nos va a servir para hacer las piezas mucho más fácilmente.

También podéis intentarlas en QCAD y pedir ayuda cuando no sepáis continuar.

Práctica final

¿Te interesa? sigue leyendo

Realiza capturas de pantalla para ilustrar tus explicaciones

Cuando nos disponemos a realizar un tutorial o una explicación sobre algo que realicemos con nuestro ordenador (por ejemplo, paso a paso que  ilustre un determinado retoque fotográfico), es muy interesante acompañarlo de imágenes que nos muestren los diferentes puntos del proceso.
Estas imágenes de lo que ocurre en la pantalla de nuestro ordenador se denominan "capturas de pantalla" o en inglés "screenshot".
Si habitualmente recurres al método de la imagen que acompaña a este post o fotografías a escondidas con tu móvil la pantalla del ordenador, hoy estás de enhorabuena.

Generalmente, los sistemas operativos nos proporcionan algún tipo de opción o aplicación para realizar estas capturas, aunque en función del sistema, pueden tener más o menos opciones.

También podemos utilizar alguna aplicación específica que nos ayude a realizar este proceso y que, generalmente, nos ofrece más posibilidades de captura e incluso de edición posterior. 

Es posible capturar una imagen de toda la pantalla, de una determinada región o de una ventana cualquiera del sistema operativo o de un programa que esté en ejecución.

A continuación, tras el salto, vamos a ver distintas posibilidades

1) Capturas de pantalla mediante atajos del sistema operativo:

Windows XP Windows 7 Windows 8

Para hacer una captura de toda la pantalla, pulsaremos la tecla Impr Pant. Aparentemente no ocurre nada, pero la captura se ha realizado y está copiada en el portapapeles.

Para hacer una captura de pantalla de una ventana en concreto, debemos en primer lugar tenerla activa, para lo cual pulsaremos sobre ella. Después, pulsaremos la combinación de teclas Alt+Impr Pant. La imagen de la ventana se copiará al portapapeles.

El paso posterior es pegar el contenido del portapapeles con la captura en la aplicación que queramos.

Mediante estos métodos, obtenemos una imagen de toda la pantalla o de una ventana entera. Si nuestro objetivo era una región concreta, nos veremos obligados a recortarla para quedarnos sólo con la zona que nos interesaba.

Esta operación se puede llevar a cabo pegando la captura en Paint u otro editor de imágenes sencillo y utilizando la opción Recortar o en el mismo Word, usando la barra de herramientas de imagen. Si no se activa al hacer doble clic sobre la imagen, puedes hacerla visible a través del menú Ver/Barras de herramientas/Imagen.

Windows 8

La última versión del sistema operativo de Microsoft nos permite realizar una captura de toda la pantalla y guardarla directamente como un archivo de imagen.
Para hacer una captura de pantalla y guardarla como un archivo, se debe 

presionar tecla del logo de Windows y a continuación la tecla de imprimir pantalla (+ Impr Pant). El archivo resultante se guardará en la carpeta Capturas de pantalla, que se encuentra dentro de la carpeta Imágenes.

Como no tengo Windows 8, os dejo una imagen sacada de la web de Microsoft.

2) Capturas de pantalla mediante utilidades del sistema operativo:

Windows 7 Windows 8

En las últimas versiones de Windows se incluye una pequeña herramienta para realizar capturas de pantalla llamada Recortes.
Con esta aplicación podremos hacer varios tipos de capturas:

• Recorte de forma libre. Dibuje una forma libre alrededor de un objeto.
• Recorte rectangular. Arrastre el cursor para formar un rectángulo.
• Recorte de ventana. Seleccione la ventana que desee capturar.
• Recorte de pantalla completa. Capture la pantalla entera.

Una vez seleccionado el tipo de recorte que queremos utilizar, la pantalla se difumina y la aplicación nos muestra información de cómo realizar el recorte o captura. 

Después de capturar el recorte, éste se copia automáticamente al portapapeles y el resultado se nos muestra en la ventana de la aplicación, permitiéndonos realizar unas anotaciones muy simples y guardar o compartir el recorte. 

3) Capturas de pantalla mediante aplicaciones de terceros:

Existen un montón de aplicaciones dedicadas a la captura de pantalla. Generalmente, estas aplicaciones nos permiten gestionar las imágenes obtenidas y realizar una posterior edición (incluir textos, flechas, objetos, recortar, girar, redimensionar, etc). Una simple búsqueda en Google nos permitirá encontrar muchas de estas aplicaciones y comentarios sobre su funcionamiento y características. 
Software de captura de pantalla

En la siguiente imagen podéis ver un ejemplo sencillo de captura de pantalla editada con este tipo de software.

En función de nuestras necesidades podemos elegir herramientas más simples o con opciones más avanzadas. Os dejo un par de herramientas gratuitas para que les echéis un vistazo:

GreenShot, para un uso habitual (recomendado)

SnapDrawFree, para un uso más avanzado

¿Te interesa? sigue leyendo

Ejemplo de Entrada a realizar para las prácticas de Gimp

NOTA: Esta es una entrada con la estructura que deben tener las entradas que debéis realizar para calificar los contenidos impartidos sobre Blogs y Retoque de Imágenes. En color rojo y negro os indico las secciones y explicaciones del formato de vuestras entradas. En color azul va el texto de ejemplo de una entrada que haríamos para explicar la práctica del blanqueamiento de dientes que vimos en clase.

Título: "Retoque Digital: Blanqueando los dientes con Gimp" (este sería el título de la entrada, no lo pongas aquí)
Imagen
Pon una imagen de la práctica que vas a realizar. Puede ser la imagen de partida, el resultado final o una comparativa "antes y después"

Introducción: (explícale a la gente lo que van a ver)
En esta entrada vamos a ver como realizar una de las operaciones más habituales que podemos llevar a cabo con nuestras fotografías para darles un mejor aspecto: blanquear nuestros dientes.
Después del salto tenéis el proceso explicado con claridad. Espero que os resulte interesante. Vamos alla!!
Salto de Línea  (aquí debes introducir un salto de línea)


Desarrollo de la práctica 
(aquí debes poner una pequeña explicación de lo que fuiste haciendo. Indica los pasos de forma clara y ordenada. Puedes acompañar tus explicaciones con imágenes del proceso. Ayúdate de los Paso a Paso que tienes)

1. En primer lugar, abrimos la imagen de partida de la chica con los dientes amarillentos.
2. Seleccionamos la zona de los dientes mediante la varíta mágica. 
3. Una vez seleccionada toda la dentadura, vamos a Colores / Tono y Saturación y modificamos los siguientes parámetros: Solapar = 100; Saturación = -50 y Luminosidad = 20. Estos parámetros dependerán un poco de la imagen de partida.
4. Ya tenemos nuestro efecto conseguido

Aquí tenéis el resultado final. Espero que os guste

Despedida
Si tenéis cualquier duda, intentaré resolvérosla en los comentarios
Ahh, y acuérdate de poner estas 2 etiquetas: Gimp, Prácticas

¿Te interesa? sigue leyendo

Blogs: usando plantillas personalizadas

Blogger nos ofrece una serie de plantillas básicas con las que podemos empezar a dar forma a nuestro blog. Sin embargo, tenemos a nuestra disposición multitud de páginas que nos ofrecen plantillas de aspecto más atractivo y profesional, aunque no siempre de forma gratuita. 
Realizando una sencilla búsqueda mediante Google usando términos como "free template", "plantillas blogger" o algo similar, se nos mostraran cientos de sitios donde poder visualizar y descargar estas plantillas.

¿Te interesa? sigue leyendo

VirtualDub Portable

En vista de los problemas que tenemos en el aula de informática para poder instalar los programas y códecs necesarios para la edición de vídeo, os dejo un enlace para que descarguéis un software portable en el que he incluido los códecs más habituales de audio y vídeo.

Podemos crear este portable "vitaminado" en clase, a partir de la aplicación portable más los plugins y codecs necesarios,

VirtualDub Portable                    Download
Plugins                                     Download
Códecs imprescindibles               Download

o bien, descargarla directamente y descomprimir la carpeta en nuestro lápiz USB

Virtual Dub Portable Vitaminado              Download

¿Te interesa? sigue leyendo