HTML5 i CSS3

HTML5 es la quinta revisión importante del lenguaje básico de la Worls, Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML. Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.



-Mejor estructura

• section representa una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
• article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.
• aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.
• header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.
• footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
• nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

-Mejores formularios

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

• datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
• number para que el usuario indique un número.
• range para indicar un rango entre dos números.
• email para indicar un correo electrónico.
• url para indicar una dirección web.
• search para indicar una búsqueda.
• color para indicar un color.

-Elementos importantes 

• audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Sin duda uno de los añadidos más interesantes, ya que permite reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash. Se tratan de manera totalmente nativa como cualquier otro elemento, por ejemplo se pueden incluir enlaces o imágenes dentro de un vídeo. Aunque las implementaciones actuales son un tanto ineficientes, se espera que en un futuro próximo se optimicen. Portales de vídeo como Youtube o Dailymotion ya están empezando a mostrar que un futuro sin Flash es posible (¡y necesario!).
• embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo, es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.
• canvas es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él. Aunque nunca hayas oído hablar de él, seguro que lo has usado alguna vez, por ejemplo de Google Maps. Es un elemento muy potente que dará bastante que hablar en el futuro, y que será el culpable de aplicaciones web espectaculares.

-Más elementos

• dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat.
• figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.
• mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.
• meter representa una medida, como el número de KB. Tiene más sentido si lo unimos con…
• progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.
• time representa una fecha o una hora.
• command representa un comando que el usuario puede ejecutar en su navegador.
• output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.
• datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

¿Qué es CSS3?

Mientras que HTML nos permite definir la estructura una página web, las hojas de estilo en cascada (Cascading Style Sheets o CSS) son las que nos ofrecen la posibilidad de definir las reglas y estilos de representación en diferentes dispositivos, ya sean pantallas de equipos de escritorio, portátiles, móviles, impresoras u otros dispositivos capaces de mostrar contenidos web.

Las hojas de estilo nos permiten definir de manera eficiente la representación de nuestras páginas y es uno de los conocimientos fundamentales que todo diseñador web debe manejar a la perfección para realizar su trabajo.


La primera versión de CSS fue publicada a fines del año 1996 y fue logrando popularidad y aceptación hasta llegar a la versión 2.1, estándar actual que ofrece gran compatibilidad con la mayoría de los navegadores del mercado.

A partir del año 2005 se comenzó a definir el sucesor de esta versión, al cual se lo conoce como CSS3 o Cascading Style Sheets Level 3. Actualmente en definición, esta versión nos ofrece una gran variedad de opciones muy importantes para las necesidades del diseño web actual. Desde opciones de sombreado y redondeado, hasta funciones avanzadas de movimiento y transformación, CSS3 es el estándar que dominará la web por los siguientes años.

Las novedades que incorpora CSS3 prentenden que el diseñador tenga un mayor control sobre el diseño, dejando de recurrrir a trucos que normalmente complican el código. Para ello incorpora nuevas propiedades que permiten hacer algunas cosas que no podíamos con CSS2, estas son algunas:

Varias imágenes de fondo

CSS3 permite poner varias imágenes de fondo en un mismo elemento, sin tener que recurrir al truco de crear varios elementos superpuestos con una imagen cada uno. También incorpora nuevas propiedades para el fondo de los elementos.

Esquinas redondeadas

Una de las características más demandadas por los diseñadores es poder crear esquinas redondeadas sin tener que usar trucos o poner imágenes. CSS3 incorpora una nueva propiedad que permite redondear las esquinas de las áreas de la página.

Bordes con imágenes

Otra característica de CSS3 es poder poner imágenes en los bordes de los elementos. Podemos poner una imagen simple o repetida que se distribuye alrededor del elemento, ocupando todo el borde.

Sombras

La posibilidad de crear sombras en los elementos es otra característica de CSS3. Podemos poner una o varias sombras en un elemento. Además también podemos poner sombra a los textos.

Transparencias de color

Con CSS3 no sólo podemos poner elementos semitransparentes, sino que también podemos poner la transparencia en el color. Cada color y cada elemento puede adquirir un grado de transparencia que va desde el color sólido al transparente total.

Texto en varias columnas.

La posibilidad de poner el texto en varias columnas es un hecho con CSS3, el texto se distribuye en columnas sin necesidad de hacer más divisiones en la página.

Otras novedades en el texto

La posiblidad de partir las palabras con guiones, tal como ocurre en el texto de un libro es una posibilidad, que aunque todavía no adoptada por todos los navegadores está también en CSS3. Otra novedad es poder instalar el tipo de letra (fuente) que queremos que se vea en la propia página, de manera que aunque el usuario no la tenga instalada en su ordenador, éste la pueda ver.

Nuevo modelo de cajas flexibles

Además de los modelos de posicionamiento absoluto y relativo, y de cajas flotantes, aparece un nuevo modelo de estructurar los elementos: el modelo de cajas flexible. Éste todavía no está acabado de definir, pero algunos navegadores ya lo soportan de forma experimental.

Nuevos Selectores

En CSS3 también aparecen nuevos selectores, Estos selectores permiten seleccionar los elementos de una manera más específica, La mayoría de ellos indican la posición del elemento seleccionado respecto de su elemento padre.

Animaciones

Sin duda la gran novedad de CSS3 es la posibilidad de crear animaciones. Podemos crear animaciones para nuestras páginas con un resultado similar al que podemos tener con programas como "flash", y además sin necesidad de instalar plugins en el ordenador del usuario.
Las animaciones se crean enteramente desde CSS3. Es decir, no necesitamos saber javascript ni ningún otro lenguaje de programacion para crear animaciones, que con un poco de creatividad pueden resultar atractivas.
A esto dedicaremos otro manual, ya que una cosa es conseguir una animación simple, y otra ver las posibilidades que tienen las animaciones.

Ventajas e inconvenientes.

Las ventajas son obvias: CSS3 no elimina nada de lo que ya existía en CSS2, y además crea nuevas posibilidades para poder dar un aspecto más dinámico a la página. La sintaxis del lenguaje en sí no cambia, ya que se sigue basando en reglas compuestas de selectores y propiedades. Lo que hace es ampliarse, para dar cabida a nuevas tendencias de diseño que hay hoy en la web.
Como inconveniente tenemos que CSS3 se ha adelantado a las empresas, fundaciones, o entidades que diseñan los principales navegadores, de forma que primero sale la "idea" de una nueva estructura en CSS3 y después los diferentes navegadores en sus nuevas versiones tienen que introducirla en ella. Por lo tanto los navegadores tienen que adaptarse a las nuevas formas que se definen en CSS3.
Por suerte, parece que la mayoría de los navegadores están adoptando las nuevas formas que aparecen en CSS3, la mayoría de los principales navegadores en sus nuevas versiones se han adaptado para soportar gran parte del nuevo código que aparece en CSS3, sin embargo este es un problema temporal, ya que con el tiempo todos los navegadores tendrán que adaptarse para soportar CSS3.

Bibliografia: http://www.nobbot.com/personas/las-novedades-de-html5-i/
 http://aprende-web.net/NT/css3/css3_1.php

HTML amb CSS

Hola! En aquest post tractarem com fer un calendari amb HTML utilitzant CSS i dissenyant dos estils diferents. 

És important que el codi CSS el fem en un lloc web diferent a l'arxiu HTML on tenim el codi, ja que així ens permet modificar l'estil quan ho necessitem, incloure altres estils amb CSS, canviar un per altres fàcilment i, per últim, també ens permet tindre un model de codi HTML i CSS ja fet.

El procés que hem seguit per a fer un calendari és el següent:

• Primer, creem una carpeta on posarem l'arxiu HTML i els dos codis CSS que escriurem.
• En segon lloc, escribim el codi HTML definint una taula per a fer el calendari. Aquest és el resultat del codi, voreu que estan enllaçats dos arxius .css, açò serà els que ens permet definir l'estil del calendari, per això tenim dos, un actiu, "calendari2.css", i un altre inutilitzat temporalment mitjançant un comentari d'HTML, "calendari1.css". D'aquesta manera, en qualsevol moment podem canviar un estil per l'altre.

• Per últim, creem els full d’estils calendari1.css i calendari2.css, on definirem l'aparença del nostre calendari segons l'estil. Per tant, tindrem un arxiu HTML amb dos codis .css enllaçats, un actiu, que ens permetrá vore l'estil actiu i un inutilitzat, que no apareixerá al navegador. El resultat és el següent:

• Aquest és el primer estil de calendari.

• Aquest és el segon estil del calendari.

JavaScritp: llenguatge de programació per a la web

• Què és? Qui el va fer? Quan va nàixer?

Javascript és un llenguatge de programació que s'utilitza principalment del costat del client permetent crear efectes atractius i dinàmics en les pàgines web. Es defineix com orientat a objectes, basat en prototipus, imperatiu, dèbilment tipat i dinàmic.

Per a entendre el que es Javascript utilitzarem un exemple: un usuari escriu una direcció web en el seu navegador, per exemple http://mj-tic-bat2.blogspot.com.es/. El servidor rep la petició i com a resposta a aquesta envia a l'ordinador de l'usuari codi HTML junt al codi Javascript. El codi HTML s'encarrega de que en la pantalla es mostre alguna cosa, per exemple una imatge, un menú, etc. El codi Javascript es pot encarregar de crear efectes dinàmics en resposta a accions de l'usuari, per exemple que es desplegue un menú tipus acordeó quan l'usuari passa el ratolí per damunt d'un element del menú.

 Brendan Eich va desenvolupar en Netscape Corporation la primera versió d'este llenguatge sota el nom Mocha, rebatejat LiveScript i finalment Javascript. Aquest últim canvi de nom va coincidir amb la inclusió de la tecnologia Java per part del navegador web Netscape. La primera versió del llenguatge es va presentar el desembre de 1995 a la versió 2.0B3 del navegador Netscape. El 1997 els autors van proposar Javascript com a estàndard de l'European Computer Manufacturers Association (ECMA), tot i que el seu nom no és europeu, sinó internacional, amb la seu a Ginebra. El juny de 1997 va ser adoptat com un estàndard ECMA, amb el nom ECMAScript. Poc després també va ser un estàndard ISO (Organització Internacional per a l'Estandardització).

• Per a què el necessitem a una pàgina web del costat del client?

Javascript és principalment utilitzat per part de programadors web per donar respostes ràpides a les accions de l'usuari sense necessitat d'enviar la informació del que ha fet l'usuari al servidor i esperar resposta d'aquest (la qual cosa faria més lents els processos). El codi JavaScript es carrega alhora que el codi HTML al navegador, i resideix en el client (ordinador en el que ens trobem). JavaScript  suposa que les respostes del servidor siguen més completes i permet que es realitzen més processos al nostre ordinador, de manera que es redueix el nombre de peticions i respostes necessàries entre client i servidor.

Amb Javascript podem crear efectes especials a les pàgines i definir interactivitats amb l'usuari. El navegador del client és l'encarregat d'interpretar les instruccions Javascript i executar-les per realitzar aquests efectes i interactivitats, de manera que el recurs més important, amb que compta aquest llenguatge és el mateix navegador i tots els elements que hi ha dins d'una pàgina. .

• On podem ficar-lo?

S'acostuma a posar el codi JavaScript a la capçalera, entre l'etiqueta <head>,  ja que així el navegador pot emmagatzemar-lo en memòria abans que succeisca un esdeveniment que l'inicie i podem reutilitzar-lo.

 També podem posar el codi javascript entre l'etiqueta <body>, funcionaria  però no és el més recomanable, hem de buscar la millor opció, no la més ràpida. 

Per últim, podem situar el codi javascript fora del HTML, així podem reciclar el codi i no mesclem codi HTML i javascript. Aquest últim és més professional. En compte de posar el codi Javascript dins de l'etiqueta script, el que fem és incloure-li a aquesta etiqueta l'atribut src (source), donant-li com a valor una URL relativa al document, perquè carregue el seu contingut com si fóra javascript. Per descomptat, hem creat un fitxer anomenat javascript.js al mateix nivell del nostre HTML amb el codi javascript.

Ací deixe uns exemples, en la primera captura el codi javascript es troba en <body>, en la segona en <head> i en la tercera i la quarta fora del HTML.

Codi correcte!

En aquesta entrada explicaré quin és el model que hem de seguir per a crear una  pàgina web, diguent quines són les etiquetes que sempre han d'aparéixer i una llista de costums  correctes al escriure codi HTML. Veurem aquestes etiquetes en etiquetes.html .

Les etiquetes que sempre hem d'escriure són:

- És una bona costum escriure <! DOCTYPE> perquè és una instrucció per al navegador web sobre en quina versió d'HTML està escrita la pàgina. Especifica les regles per al llenguatge HTML, de manera que els navegadors mostren el contingut correctament. 

-També és interesant escriure <meta> charset perquè especifica la codificació de caràcters per al document HTML. La llista de bones costums per a escriure HTML és aquesta:

          -Tancar sempre totes les etiquetes és imprescindible.
          - Esciure totes les etiquetes en minúscula.
         - Escriure el  <! DOCTYPE> correcte que té el nostre document per a que el navegador puga mostrar bé la pàgina.
         - No donar estil en el document HTML, sinó utilitzar CSS o JavaScript.
       - I per últim validar el codi.

Editoris de codi!!

Hola! En aquesta entrada vos vaig a explicar  els editors de codi, els problemes que es presenten al editar arxius quan canvies de sistema operatiu i algunes solucions, prenent com a exemple l'arxiu index.html .

-Quan editem index.html amb el sistema operatiu Lliurex utilitzem l'aplicació Gedit, ja que no insereix cap format. El resultat seria:

Així, si necessitem editar index.html des d'un ordinador diferent amb el que hem creat l'arxiu i aquest té un sistema operatiu diferent a Lliurex, per exemple Windows, ens trobem amb el problema de que no apareix correctament el codi, no apareixen totes les etiquetes.

Per tant, la solució que podem trobar és descarregar un editor de codi que ens permeta editar index.html sense que desaparega el codi que hem escrit. Un dels millors editors és NotePad++, ja que reconeix el codi i és molt fàcil d'utilitzar.

Lloc web senzill!!!!

Hola!!! En aquest post vos vaig a explicar com crear un lloc web senzill, com el que he creat, amb links, imatges i un mapa d'imatge.

-Creem la carpeta weblinks

-Creem un arxiu index.html que posarem en la carpeta, en la imatge interior ja està dins. Li posem el títol index, insertem un enllaç al nostre blog i dues pàgines sobre dos animals a les quals accedim clicant un retall d'una foto de cada animal. Explicaré a continuació aquestes pàgines, a més d'un mapa d'imatges. Aquest seria el resultat final d'index.

 -En segon lloc, creem les dues pàgines nombrades anteriorment. En el meu cas foto-gran-koala.html i foto-gran-osop.html, les incloem dins la carpeta weblinks (veure imatge punt 1), posem un títol a cadascuna, inserim la foto de cada animal i posem un link a index per a tornar a la pàgina inicial.

-Per últim, creem la pàgina mapamundi.html on farem el mapa d’imatge sobre una imatge d'un mapamundi, on clicant al continent correcte et portarà a la pàgina web de cada animal. Aquesta web ha d'inseris-se també a index.html.

Espere que vos siga de utilitat!

El uso de las TIC en magisterio

La educación de los niños y niñas continúa basada en el libro de texto y en la palabra escrita. La utilización correcta de las TICs aportaría grandes avances en educación, con el consiguiente desarrollo de los alumnos.

Está demostrado que la utilización de estrategias educativas atractivas para el alumnado estimula a éste y consigue mayor implicación en las tareas escolares. Un alumnado estimulado en clase consigue mejores resultados, posee una visión mucho más positiva de la escuela, ve a ésta como un lugar para aprender, vivir nuevas experiencias. La escuela debe ser un lugar en el que niños y niñas desarrollen todo su potencial tanto físico como mental, debe propiciar el mayor aprendizaje posible y por consiguiente debemos obtener alumnos capaces de enfrentarse a la sociedad con las mejores garantías de éxito.

Con las TICs podemos acercarnos un poco más a la escuela que todos deseamos, una escuela actual, en constante evolución, dispuesta a proporcionar aprendizajes significativos, una escuela en la que todo niño o niña tiene cabida sin distinción ninguna.

Las TICs poseen numerosas ventajas para la formación como las siguientes:

•  Elimina barreras espacio-temporales entre el profesor y los alumnos y viceversa.
• Aumenta las posibilidades de información, es decir, no es lo mismo que la información provenga exclusivamente de un libro de texto a que encendamos el ordenador y encontremos un mundo de información.
• Crea escenarios mas atractivos, interesantes y flexibles para el aprendizaje.
• Potencia el autoaprendizaje. También proporciona un aprendizaje  independiente, colaborativo y en grupo.
• Facilita una formación permanente tanto por parte del alumnado como del docente.
• Deja atrás la idea de las instituciones escolares como único escenario formativo.
• Aporta nuevas formas para la tutorización de los estudiantes.
• Las TICs proporcionan nuevos y mejores aprendizajes a niños y niñas con necesidades educativas especiales.

Aunque también poseen inconvenientes:

• La existencia de tanta información provoca un exceso de ésta con lo que el alumno/a esta obligado a poseer criterios de selección. Aunque desde mi punto de vista este criterio de selección es necesario ya que así tendremos niños y niñas críticos y capaces de decidir por si mismos.
• La incorporación de estos avances en educación requiere un gran desembolso económico.
• No solo basta con incorporar las TICs a la educación sino que además debe existir un profesorado capaz de manejarlas con eficiencia y eficacia.

Teniendo en cuenta las ventajas e inconvenientes podemos decir que las TICs son beneficiosas y necesarias en la escuela de nuestros días.