Trabajo final HTML

Un tema a elegir compuesto de 10 página. Que deberán cumplir las siguientes condiciones:

• Primera página (llamada OBLIGATORIAMENTE index.html, para que luego se pueda subir sin problemas de servidor) que será una portada, con el título, una foto y algo de fondo para que se vea bien el tema.
• Picando en la foto de la portada  se llegará a un índice en el que se enumeran los items en los cuales han dividido el tema.
• Picando sobre cada uno de ellos irán a una página con información multimedia sobre el item. 
• Cabe la posibilidad de que desde ese item vayan a otro más profundo...mejor.
• Todas las páginas menos la portada tendrán abajo en el centro un enlace para ir a la página anterior (sea cual sea) y a la derecha otro enlace para ir a la página inicial.

Para la calificación, se valorará:

• Buena información.
• Distintos colores e imágenes de fondo.
• Las fotos bien colocadas y de calidad.
• Sin faltas  de ortografía (incluido acentos, ñ...).
• Vídeos (sin saturar el website) e incluso sonidos.
• Los títulos bien centrados.
• La información justificada.
• Que sea amigable a la vista.
• Abuso del copy/paste dejando una página aburrida.
• Página trabajada.
• Buena impresión en general.

Un saludo

Texto y tablas

Para dar formato al texto, acompañando a la etiqueta <font></font>podemos utilizar:

• size: tamaño absoluto 1-7
• Face: tipo de letra, separandola por coma, podemos poner varios tipos, que se elegirán por orden de aparición.
• Etiqueta  para poner el texto como subindice

Para  crear tablas utilizamos:

• Etiqueta <table> </table> para definir las tablas.
• Etiqueta <tr> </tr> para definir las características de la fila.
• Etiqueta <td> </td> para definir las caraterísticas de la celda.
• Atributo WIDTH para el ancho
• Atributo BORDER para poner el borde
• Atributo CELLSPACING define la separación entre las celdas en pixeles.
• Atributo CELLPADDING número pixeles entre borde y contenido.
• Atributo WIDTH y HEIGHT, ancho y alto, en pixeles o porcentaje.
• Atributo ALIGN alineación right, left, center.
• Atributo VALIGN alineación en vertical, top, botton, middle.
• Atributo BGCOLOR, color de fondo.
• Atributo BACKGROUND, imagen de fondo de la tabla.

Para unir celdas utilizamos:

• COLSPAN, para unir columnas.
• ROWSPAN, para unir filas

EJERCICIO: 

Con todo esto crea una tabla, que ejerza de tablero de ajedrez, con las celdas en blanco y negro, poniendo el nombre de las figuras que deban aparecer en ella, con las siguientes características: 

• Peones, letra arial, tamaño 3

• Torres, caballos, alfiles, letra helvetica, tamaño 4

• Rey y reina, tamaño 6, letra times.

• La letras en color rojo.

Body, imágenes y listados

Hoy hemos visto las siguientes instrucciones que podemos utilizar dentro de la etiqueta body:

• bgcolor
• background
• text
• link
• vlink
• alink
• marginwidth
• marginheight

además la etiqueta  para meter una imagen y sus instrucciones:

• img scr
• alt
• height
• width
• align
• border
• hspace
• vspace

y cómo hacer que sea un enlace, al ponerla dentro de <a href="" ><img scr...></a>

con esto deberemos hacer el siguiente ejercicio:

En el ejercicio de enlaces, último realizado, poner color de fondo negro, letra en blanco, los enlaces en rojo, los usados en azul y los activos en amarillo

También hemos visto el modo de crear listas, mediante las instrucciones:

• <ul></ul> listas con puntos
• type para cambiar el tipo de punto
• <li> para crear un punto nuevo
• <ol></ol> listas con números
• type="1"   o  "i" o  "I" o  "a" o  "A"
• <dl></dl> listas especiales

con esto deberemos hacer el siguiente ejercicio:

Crea el siguiente listado:

1.  PRIMER ELEMENTO
• ELEMENTO 1
• ELEMENTO 2
2. SEGUNDO APARTADO
• ELEMENTO 3
• ELEMENTO 4

Enlaces: páginas en el ordenador y anclas

Hasta ahora hemos visto los enlaces para ir a páginas que se encuentran en otros ordenadores o servidores.
Tenemos otras posibilidades:

• Página que se encuentran en nuestro ordenador.
• Anclas

1.- Página que se encuentran en nuestro ordenador.
Para páginas que se encuentren en nuestro ordenador sería de la siguiente manera:
<a href= "capitulo1.html>ir al capitulo 1</a>
En el ejemplo de arriba, vemos que en vez de la url de la página, ponemos el nombre del archivo.

2.-Si la página es muy larga para evitar que la gente tenga que leer todo para llegar a la información que le interesa utilizamos anclas.

Las anclas se definen de la siguiente manera:

 <a name="capitulo1"> 

y para que en nuestra página se mueva hasta el punto indicado deberemos poner:

<a href="#capitulo1">Ir al capitulo1</a>

EJERCICIO:

haz el siguiente ejercicio utilizando las anclas y poniendo todos los textos en una sola página

Un saludo

Enlaces

Un enlace es una zona de texto o gráfico que si son pulsados nos envían a otra parte de la página o a una página diferente de internet. Esas páginas pueden estar en el ordenador o repartidas por internet.
Todo lo que encerremos con la etiqueta <a> </a> será considerado enlace. veamos un ejemplo:

<a href="www.google.com"> ir a google</a>

Href es necesario para indicar la página a la que enviaremos cuando se pinche en el enlace.

Teniendo en cuenta esto realiza los siguientes ejercicios:

Un saludo

Ejercicios: letras especiales

Las letras las podemos expresar en código ASCII, de manera que cualquier letra puede ser escrita utilizando este código, ejemplo la letra a es el 97, la b es la 98. El modo de escribirlos en lenguaje html es mediante los caracteres &#, así, para escribir la ñ pondríamos &#162 y para la Ñ-> &#165.
Aquí os dejo la tabla de código ascII.
Teniendo en cuenta esto y la tabla de sinónimos, deberemos realizar los siguientes ejercicios.

Un saludo

Ejercicios: Aspecto de las letras y caracteres extendidos

Buenos días,
en el primer ejercicio deberemos cambiar el formato de las letras y en el segundo ejercicio utilizaremos caracteres especiales para escribir las comillas y las eñes.

Aspecto de la letra

 

Ejercicio caracteres extendidos

Un saludo

Editor de páginas web

Un editor visual de archivos HTML nos vendrá muy bien para poder ver la apariencia que está tomando cada página y poder realizar las diferentes modificaciones, sin tener que recurrir al navegador permanentemente, aunque no es del todo imprescindible. En nuestro caso nos inclinaremos por emplear la aplicación BlueGriffon, que es gratuita, multiplataforma y de código abierto. Existen otras alternativas, pero ésta es la que más se ajusta a nuestras necesidades.


Os dejo en enlace para la descarga de la aplicación.
http://bluegriffon.org/freshmeat/1.5.1/setup-bluegriffon.exe


Podemos también descargarnos la versión portable:
http://bluegriffon.org/freshmeat/1.5.1/bluegriffon-win32.zip 
Es un archivo comprimido que tenemos que descomprimirlo en nuestro usb


Un saludo

HTML

Buenos días, comenzamos con la programación en html para la creación de páginas web. Para esto vamos a tener dos opciones:

• utilizar un editor on line de html:  http://htmledit.squarefree.com/
• Utilizar el blog de notas gedit y una navegador para ver cómo van quedando las páginas.

Recomiendo en principio para los primeros ejercicios la primera opción. Posteriormente cuando hagamos nuestra página web propia la segunda opción.

Primer ejercicio.

Un saludo

Otro Malware denominado 'DNS Changer'

Buenos días,
el nueve de julio, aquellos ordenadores que estén infectados por el Malware denominado 'DNS Changer',  dejarán de funcionar. 

Página del FBI avisando sobre el malware.

Para evitarlo podemos comprobar si nuestro ordenador está infectado, y si así fuera desinfectarlo mediante herramientas gratuitas.
Os dejo el enlace de la noticia:
 http://es.finance.yahoo.com/blogs/fintechnologiayredeses/d-juicio-final-tu-ordenador-virus-143655400.html
La página de inteco donde nos explican el malware y el modo de comprobar si está infectado nuestro ordenador:
http://cert.inteco.es/Actualidad/Actualidad_Virus/DNSChanger
Un saludo

Realidad aumentada y códigos QR

Buenos días,
Empezemos viendo el siguiente artículo
http://www.infobae.com/notas/640570-Como-seran-las-gafas-de-realidad-aumentada-en-las-que-trabaja-Google.html

veamos en que consiste al realidad aumentada (AR)

Realidad Aumentada y Códigos QR

View more PowerPoint from Raúl Reinoso

En esta otra presentación nos permite iniciarnos en la realidad aumentada.

Realidad aumentada y códigos qr v2

View more PowerPoint from Patrick Davenne

 

Los códigos QR tienen importancia en la Realidad Aumentada, ya que es lo mas parecido a Realidad Aumentada a la que el usuario normal puede tener acceso y cada vez son mas habiruales en todos los productos que utilizamos y están involucrados en nuestra vida diaria.

Las siglas QR hacen referencia al término Quick Response Barcode, pues permite que el contenido que almacenan se lea a alta velocidad. Los códigos QR, inventados por la compañía japonesa Denso-Wave en 1994, son libres y no están sujetos a ninguna patente. Al ser Open Source cualquiera puede utilizarlos. Tienen límite numérico en cuanto a su contenido:  numérico 7029 caracteres, alfanumérico 4296 caracteres, binario 2953 caracteres 

Ejemplos:

Tarjetas de presentación

Un teléfono


Un mensaje de texto


Direcciones de páginas web


Insertar mapas

Plataformas de Almacenamiento

Buenos días, son muchas las plataformas que nos permiten el almacenar documentos, simplemente dándonos de alta en la plataforma correspondiente.
El trabajo consiste en hacer una tabla orientativa sobre estas plataformas, donde informaremos sobre:

1. Capacidad de almacenamiento gratuito.
2. Tamaño máximo de archivo.
3. Facilidad de uso.
4. Ventajas.
5. Inconvenientes.

Para lo cual nos daremos de alta, en la plataforma correspondiente y nos tocará probarla.

Las plataformas sobre las que trabajaremos serán:

• Minus.
• Drive google.
• drop box.
• Sky drive microsoft.
• Cubby.
• Amazone cloud drive.
• Box.
• Every note.

Un saludo