HTML5 y CSS3

En este articulo veremos las ultimas versiones de HTML y CSS las versiones 5 y 3 respectivamente: Por una parte el CSS3 los primeros borradores fueron publicados en 1999, 9 años mas tarde, en el 2008 se publico el HTML5.

A diferencia de CSS2, que fue una única especificación que definía varias funcionalidades, CSS3 está dividida en varios documentos separados, llamados "módulos". El CSS3 trae novedades principalmente en las etiquetas de color pero también en otras relacionadas con los bordes, fondos, texto, interfaz, selectores y otros.

Por otra parte el HTML5 trae novedades en la inclusión de etiquetas de audio y video como se puede ver en el siguiente ejemplo:

<video id="video" width="640" height="480" volume=".7" controls autoplay>

   <source src="video.ogg" type="video/ogg"> </source> 

</video>

Los desarrolladores crearon una nueva estructura de elementos que cambiarán la manera de elaborar el contenido:

Gracias a la etiqueta <progress> podremos incluir el progreso de una tarea cualquiera que se esté ejecutando, mas trabajando en conjunto con JavaScript podremos incluir también una barra de progreso visual.

76%


Con <canvas>, implementado por primera vez por Apple para sus widgets, podremos dibujar gráficos dinámicos e interactivos.

Finalmente, la etiqueta <device> permitirá al cliente acceder a varios dispositivos, como puede ser una webcam, en tanto con <embed> podemos determinar contenido embebido, como por ejemplo un plug-in.

HTML y CSS

En esta entrada sobre el HTML y el CSS explicare como he creado un sitio web a partir de estos dos lenguajes, usando un documento para cada código.

Primeramente hay que crear los documentos en los que vamos a trabajar, en mi caso he creado uno calendario.html ya que lo que quiero hacer es un calendario y en el otro calendario1.css donde vamos a poner el estilo de la pagina pero al ser un documento a parte nos da la ventaja de que si queremos poner el mismo estilo a otra pagina de nuestro sitio solo tenemos que relacionar los documentos.

Ahora hay que ir escribiendo el código de la pagina, en mi caso he usado un generador de paginas "Table generator" del cual he sacado el html y el css para mi tabla. Esta pagina es bastante completa y aunque te ponga el código algo lioso solo es question de ordenarlo ya que el código que genera es correcto.

Así ha quedado el codigo de mi html:

Y el css me ha quedado así:

Como podemos ver en el código html hemos unido ambos archivos con la etiqueta <link. Ademas hemos hecho otro archivo css para enlazarlo con el mismo archivo html. 

Este ha sido el resultado:

La tabla sin ningun estilo

La tabla con el estilo 1

La tabla con el estilo 2 

JavaScript

¿Que es?

Es un lenguaje de programación interpretado, se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

¿Quien lo hizo?

JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el cual fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript.

¿Cuando empezó?

Apareció en 1995.

¿Como funciona?

Para entender lo que es JavaScript consideremos lo siguiente. Un usuario escribe una dirección web en su navegador, por ejemplo https://twimbo-info.blogspot.com.es. El servidor recibe la petición y como respuesta a esa petición envía al ordenador del usuario código HTML junto a código JavaScript. El código HTML se encarga de que en la pantalla se muestre algo, por ejemplo una imagen, un menú, etc. El código JavaScript se puede encargar de crear efectos dinámicos en respuesta a acciones del usuario, por ejemplo que se despliegue un menú tipo acordeón cuando el usuario pasa el ratón por encima de un elemento del menú.

La ventaja de JavaScript es que al estar alojado en el ordenador del usuario los efectos son muy rápidos y dinámicos. Al ser un lenguaje de programación permite toda la potencia de la programación como uso de variables, condicionales, bucles, etc. También podemos citar algún inconveniente: por ejemplo si el usuario tiene desactivado JavaScript en su navegador, no se mostrarán los efectos. No obstante, hoy día la mayoría de los usuarios navegan por la web con JavaScript activado.

Formas de usar javascript

La primera forma de usar JavaScript dentro de una página web es poniendo directamente el código JavaScript dentro del código HTML.


Ejemplo:

La segunda forma para usar JavaScript es definir JavaScript en un archivo externo. Los archivos de JavaScript son archivos de texto guardados con la extensión .js.

Ejemplo:

Editores de codigo

Lo único que necesitamos para crear páginas y aplicaciones web es un simple editor de texto plano y nuestra imaginación. El propio Bloc de notas o similar que viene con Windows nos sirve perfectamente. No obstante siempre viene bien contar con el soporte que nos brindan ciertas herramientas especializadas.

LLIUREX

En cuanto al lliurex el editor que viene por defecto es el gedit. Es un editor bastante simple pero que cumple bien sus funciones básicas que se pueden esperar de el. Aqui os dejo unas capturas: 

Windows

Por otra parte el windows utiliza como editor de código el bloc de notas, el cual en mi opinión es algo peor que el antes mencionado. Ofrece menos opciones todavía pero son ya os digo que se tratan de editores básico.

Por ultimo como recomendacion, Note pad++: Es gratuito y además Open Source aunque solo funciona bajo Windows. Dispone de multitud de plugins para extender su funcionalidad, y como es muy popular hay muchos donde elegir. Va mucho más allá que el bloc de notas ya que ofrece sintaxis coloreada, estructuración de código (para poder plegar y desplegar zonas cubiertas por etiquetas), soporte de otros muchos lenguajes de programación, etc... Está bien tenerlo a mano para pruebas o ediciones rápidas. Es uno de mis favoritos.

Codigo correcto

En esta entrada vamos a analizar la base de cualquier pagina programada con html. En octubre de 1994 fue creado el consorcio W3C en el cual se ocupa de crear el estándar de entre otros, el html. Actualmente es el primer referente a nivel mundial en cuanto se refiere a estándar de lenguajes informáticos o de la computación.

A continuación vamos a ver una ejemplo de modelo web analizando etiqueta por etiqueta:

En primer lugar la etiqueta doctype que sirve para indicar en base a que versión de html estamos escribiendo el código de la pagina. Esto principalmente es para que los navegadores sepan con que versión de html están tratando para interpretarla adecuadamente.

Por otra parte, se encuentra la estructura habitual de todo código html para que se pueda interpretar adecuadamente. Primero la etiqueta <html> </html> que cubre a todas las etiquetas de la pagina y sirve para delimitar el área con uso de código html y después la estructura que incluye <head> </head> y se refiere a la cabecera de la pagina web y por ultimo la etiqueta <body> </body> que es el código que ha de ir en el propio cuerpo del sitio web.

Otro aspecto importante es el de la etiqueta charset que sirve para indicar al navegador que tipo de símbolos estamos usando según nuestro idioma para que pueda identificar cada símbolo y no muestre otros erróneos. En este caso yo he utilizado el charset "UTF-8" que es el que mas caracteres del español comprende.

Para acabar vamos a hacer una lista de buenas costumbres a la hora de crear código html.
Lo primero que hay que tener en cuenta es que estas costumbres sirven para mejorar el trabajo en equipo y facilitar el entendimiento a través del código entre los miembros de la comunidad de programadores o del mismo equipo de programación.

* Lo primero es hacer una estructura clara que no deje lugar a equivocaciones, esto lo podemos hacer usando tabuladores según la subordinación de cada etiqueta a la anterior, también dejar solo una etiqueta por linea pude ayudar a la hora de leer el código.

* Usar letras minúsculas a la hora de escribir las etiquetas en mi opinión ayuda a no crear una sensación de agobio a la hora de ver el código, sensación que podría surgir si escribes todas las etiquetas en mayúscula.

* También es muy importante guardar constantemente lo que escribes, así evitaremos perdidas de nuestro trabajo y a la larga es un gran ahorro de tiempo. Por otra parte es muy importante guardar el trabajo tanto en la nube como puede ser drive y a la vez guardarlo también físicamente: en un usb, un disco duro externo...

* Por ultimo pero lo mas importante es consultar siempre la http://www.w3schools.com/ en caso de duda a la hora programar ya que es la encargada del estandard del HTML por lo tanto es el sitio oficial donde puedes resolver todas tus dudas, lo único negativo de la pagina es que esta en ingles.

Sitio web sencillo

Sitio web sencillo

En las ultimas clases hemos estando practicando con HTML básico para crear una web sencilla desde cero utilizando algunas etiquetas como <a href="enlace">aqui el texto</a> y otros. Aquí podéis ver los resultados:

Por ultimo como trabajo extra hemos hecho una pequeña pagina que consiste en un mapa interactivo donde si pinchas en la zona donde vive el koala te lleva a la pagina del koala y lo mismo con el oso panda.

La informatica en la CNP

En esta entrada voy a hablar sobre la función de la informática en las fuerzas de seguridad del estado, concretamente en la Policía Nacional.

En primer lugar, para acceder a la Policía tienes que estudiar tres temas relacionados con la informática. Dentro del bloque de Materias técnico Científicas: Tema 30 La electrónica Tema 31 Informática I y Tema 32 Informática II.

Por otra parte la informática en la policía es una parte fundamental para el trabajo diario que realizan: rastreo de información en discos duros, rastreo de imágenes para la identificación de delincuentes o sospechosos, procesamiento de imágenes de delitos de trafico para su posterior sanción...

También es una tema fundamental ya que la delincuencia en el siglo XXI también es por medio de internet mediante robo de cuentas, estafas etc... por lo que dentro del Cuerpo de Policía Nacional existe un cuerpo especial dedicado a luchar contra la ciber delincuencia.

Por lo que la informática forma parte de muchos tareas cotidianas de la Policía para poder hacer frente a los nuevos tiempos y no quedarse por detrás de los delincuentes.