HTML5 y CC3

Buenos días amigos! La entrada de hoy tratara sobre el HTML5 Y CSS3.

La primera aparición pública disponible de HTML fue un documento llamado "HTML Tags", mencionado por primera vez en internet por Berners-Lee en los finales de 1991. A partir de entonces, la especificación de HTML ha estado en continua evolución. Desde 1996, las especificaciones de HTML se han mantenido, con la participación de proveedores de software comercial, por el W3C. Por otra parte, en el año 2000, HTML también se comvirtió en un estándar internacional.

En cuanto al HTML5 (HYper Text Markup Language, version 5) este es la quinta gran versión del lenguaje básico de la World Wide Web, HTML, algunas empresas comenzaron a trabajar para lograr una mejor compatibilidad con las tecnologías de la actualidad. Fue en 2006 cuando W3C volvió a interesarse en HTML5 y finalmente en 2007 se unio al grupo que se encontraba trabajando en esta versión. Sin embargo, en la W3C todavía existía rechazo hacia esta versión. Finalmente en 2010 apareció públicamente HTML5

Seguidamente tenemos "Hojas de Estilo en Cascada" (CSS) es un lenguaje de estilo de hojas usado para describir la presentación de las páginas web. CSS permite la separación del contenido del documento de la presentación del documento (disposición, colores, fuentes, etcétera).

La Especificación de Hojas de Estilo en Cascada nivel 2 Revisión 1 (CSS3) fue  publicada en junio de 2011. Según esta especificación:

<<CSS3 es un lenguaje de estilo de hojas que permite al autor y a los usuarios adjuntar estilo (ej., fuentes y espaciado) a documentos estructurados (ej., documentos HTML y aplicaciones XML). Separando el estilo de presentación del documento del contenido del documento, CSS3 simplifica la creación de páginas web y el mantenimiento del sitio>>

 

En cuanto a las novedades de HTML5 podemos destacar las siguientes:

• Incorpora etiquetas (canvas 2D i 3D, audio, vídeo) con códecs para mostrar los contenidos multimédia. Actualment hay una lucha entre imponer códecs libres (WebM+VP8) o privados (H.264/MPEG-4 AVC).

• Etiquetas para manejar grandes conjuntos de datos: DataGrid, Details, Menu y Command. Permiten generar taublas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.

• Mejoras en los formularios. Nuevo tipus de dades (eMail, number, url, datetime ...) y facilidades para validar el contenido sin Javascript.

• Visors: MathML (fórmulas matemáticas) y SVG (gràfics vectoriales). En general se deja obierto a poder interpretar otros lenguages XML.

• Drag & Drop. Nueva funcionalidad para arrastrar objectos como images.

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, pero hay muchas más:

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.

Y aqui finaliza esta entrada deseo que os sirva. Abajo os dejare las direcciones de las páginas web que he utilizado para sacar la información anterior.

http://aprende-web.net/NT/css3/css3_1.php
http://www.w3schools.com/html/html5_intro.asp
https://ca.wikipedia.org/wiki/HTML_5

HTML con CSS

Buenos dias! Durante este curso hemos trabajado con el HTML, pero durante este segundo trimestre hemos avanzado y estamos utilizando el CSS asi para darle un estilo diferente a nuestras paginas web. 

El código CSS lo pondremos en un sitio web diferente al archivo HTML donde tengamos el código, ya que así podremos modificar diversas cosas, como el tipo de letra, el fondo, tamano de letra, los colores, etc...y, por último, también nos permite tener un modelo de código HTML y CSS ya hecho. Ahora os ire ensenando paso a paso como poder hacer el calendario.

1. En primer lugar, creamos una carpeta donde vamos a poner nuestros dos archivos de HTML y los dos códigos CSS.

2. Seguidamente, escribimos el código HTML creando una tabla para hacer el calendario. El resultado del código, sera  ver que los dos archivos enlazados dos archivos .css, esto será los que nos permite definir el estilo del calendario, por eso tenemos dos, uno activo, "calendari2.css", y otro inutilizado temporalmente mediante un comentario de HTML, "calendari1.css". De esta manera, en cualquier momento podemos cambiar un estilo por el otro. 

3. Finalmente, creamos los dos estilos,calendari1.css y calendari2.css, donde podremos definir de que manera aparecera nuestro calendario dependiedo del estilo que nosotros le escojamos. Con esto, tendremos un archivo HTML con dos códigos .css enlazados, uno activo, que nos permitirá ver el estilo dinamico y otro que sera invalido, que no aparecerá en el navegador. Ahora voy a poner unas capturas para que veais como es el resultado final:

    En esta captura podemos ver el primer estilo del calendario.

   Y esta es la segunda captura en la que podemos ver el segundo estilo del calendario.

Javascript:lenguaje de programación para la web

Holaa! En esta entrada trataremos el lenguaje de programación Javascript, su origen, uso y algunos ejemplos.

1. ¿Qué es? ¿Quien lo hizo? ¿Cuando nació? 

JavaScript es un lenguaje de programación, al igual que PHP, si bien tiene diferencias importantes con éste. JavaScript se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo crear efectos atractivos y dinámicos en las páginas web. Los navegadores modernos interpretan el código JavaScript integrado en las páginas web.

Para entender lo que es JavaScript consideremos lo siguiente. Un usuario escribe una dirección web en su navegador, por ejemplo http://www.aprenderaprogramar.com. 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ú.

A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse las primeras aplicaciones web y por tanto, las páginas web comenzaban a incluir formularios complejos.

Con unas aplicaciones web cada vez más complejas y una velocidad de navegación tan lenta, surgió la necesidad de un lenguaje de programación que se ejecutara en el navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un formulario, no se le hacía esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los errores existentes.

Brendan Eich, un programador que trabajaba en Netscape, pensó que podría solucionar este problema adaptando otras tecnologías existentes (como ScriptEase) al navegador Netscape Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denominó a su lenguaje LiveScript.

Posteriormente, Netscape firmó una alianza con Sun Microsystems para el desarrollo del nuevo lenguaje de programación. Además, justo antes del lanzamiento Netscape decidió cambiar el nombre por el de JavaScript. La razón del cambio de nombre fue exclusivamente por marketing, ya que Java era la palabra de moda en el mundo informático y de Internet de la época.

La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0 ya incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo, Microsoft lanzó JScript con su navegador Internet Explorer 3. JScript era una copia de JavaScript al que le cambiaron el nombre para evitar problemas legales.

Para evitar una guerra de tecnologías, Netscape decidió que lo mejor sería estandarizar el lenguaje JavaScript. De esta forma, en 1997 se envió la especificación JavaScript 1.1 al organismo ECMA European Computer Manufacturers Association). ECMA creó el comité TC39 con el objetivo de "estandarizar de un lenguaje de script multiplataforma e independiente de cualquier empresa". El primer estándar que creó el comité TC39 se denominó ECMA-262, en el que se definió por primera vez el lenguaje ECMAScript.

       2.  ¿Para que necesitamos una pagina web del lado del cliente?

Javascript es principalmente utilizado por parte de programadores web para dar respuestas rápidas a las acciones del usuario sin necesidad de enviar la información del que tiene hecho el usuario al servidor y esperar respuesta de este. El código Javascript se carga a la hora que el código HTML al navegador, i reside en el cliente. Javascript supone que las respuestas del servidor siguen mas completas y permite que se realicen mas procesos en nuestro ordenador, de manera que se reduce al nombre de peticiones y respuestas necesarias entre el cliente y servidor.

Con Javascript podemos crear efectos especiales en las paginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones de Javascript y ejecutarlas para realizar estos efectos y interactivitats, de manera que el factor mes important, con el que cuenta este lenguaje es el mismo navegador y todos los elementos que hay dentro de una pagina.

        3.  ¿Donde podemos ponerlo?

Se acostumbra a poner el código Javascript a la entrada, entre la etiqueta <head>, ya que así el navegador puede guardarlo en la memoria antes de que suceda un hecho que inicie y podemos reutilizarlo. Tambien podemos poner el código Javascript entre la etiqueta <body>, funcionara pero no es el mas aconsejable, tenemos que buscar la mejor opcion, no la mas rápida.

Finalmente, podemos situar el código Javascript fuera de HTML, así podemos reciclar el código y no mesclar el código HTML y Javascript. Este ultimo es mas profesional. En vez de poner el codigo Javascript dentro de la etiqueta script, lo que hacemos es incluirlo a esta etiqueta el atributo src (source), dándole como valor una URL relative documento, porque cargue su contenido como si fuese Javascript.

Os dejo algunas capturas para que tengáis un representación mas visual. En la primera y segunda captura el codigo Javascript se encuentra en <body> y en la tercera en <head>.

 

Código correcto

Hola amigos, hoy en mi blog os voy a ensenar como validar un código fuente, como poner un doctype y charset siguiendo mis pasos veréis que es muy fácil. Hay varias herramientas gratuitas online, pero la que mi profesora se informática me ha ensenado    me parece la mas adecuada y de fácil manejo y es la W3C, organismo internacional por el correcto desarrollo de la web. Su servicio de validación es muy fácil. Empezamos:

En primer lugar veremos en la siguiente imagen las etiquetas que siempre tiene que estar escritas:

1. Primero ponemos en nuestros buscador "Markup validation service" y nos saldrá la siguiente pagina. En donde pone adress ponesmos nuestra dirección y después pulsamos en "Click".

2. Después de ello nos saldrá un mensaje en color verde que significara que nuestra validación es correcta. En algunas ocasiones nos puede aparecer alguna advertencia y saldrá como "Warning", pero se pueden arreglar ya que esta pagina nos indica el sitio del fallo y así nos permite su modificación.

Ahora pasamos a ver como ponemos un doctype y charset. Es muy sencillo, primero tenemos que saber que existen diversa versiones de HTML. La versión que utilizamos nosotros nos implicara que al principio de la creación de nuestra pagina web pongamos "<!DOCTYPE HTML>" y asi esta hecho todo. En cuanto al charset lo que tendremos que poner tendremos que introducirlo después del TITTLE y sera lo siguiente "<meta charset=UTF-8>"

Para escribir el HTML hay que tener en cuenta unas buenas costumbres, para ello voy a dejaros aquí unas cuantas de ellas:

1. Escribir las etiquetas en minúscula SIEMPRE.

1. Cerrar las etiquetas.

1. Validar el código.

1. Escribir el <! Doctype> correcto que tiene nuestro documento para que asi el navegador pueda mostrarnos la pagina.

1. Utilizar CSS o JavaScript (no dar nunca estilo en el documento HTML).

Así ya tendremos todo listo.

Y así  habremos validado nuestra pagina web. Deseo que os haya servido mi ayuda!!!

Lloc web sencill

Hola amics! En aquesta entrada vaig a contar-vos el que hem fet fins ara en la clase d'informàtica. Hem treballat programació basica en html, i l'ultim treball que hem fet ha sigut una pàgina web on introduiem un tros d'una imatge de un animal i tenies que endevinar quin animal era.

Açi vos deixe unes quantes captures del treball que he fet jo per a que vetjau en que consisteix, com m'ha quedat i com és l'estructura per a arrivar a montar la pàgina web.

En primer lloc crem una carpeta weblinks.

                                  

Aquesta és la programació de la pàgina principal, crearem l`arxiu anomenat index.html en el qual ficarem els enllacos i tambe ficarem les fotos retallades dels animals que tenim que esdevinar fent click damunt d`elles. Aixo seria el nostre codi:

                                  

En segon lloc crearem arxius en el noms que vetgeu en les imatges de baix aixina crearem tambe un codi per a cada foto aixi quan ascam adivinat el animal tambe tindre unes quantes caracteristiques d`aquestos. I aci teniu com seria el codi de les dues pagines dels dos animals:

                     

                             

Finalment aquest seria el resultat del arxiu index.html del que varem parlar en el principi:

                                      

I aquesta és com ha quedat la pàgina web. Desitge que vos servisca com ha ajuda.

Editores del codigo

Hola amigos, hoy os voy a explicar los editores de los cogidos y algunos de los problemas que se podrían provocar y sus soluciones. Como ejemplo tenemos el arxivo de curriculum.html.

En primer lugar cuando editamos el arxivo de curriculum.html con el sistema operativo que tenemos en clase, lliurex, y utilizamos la aplicación Gredit. Este seria el resultado:

Y esta seria nuestra pagina web del curriculum.

Por si el sistema operativo que estamos utilizando es Windows por ejemplo y queremos editar el arxivo curriculum.html  nos encontraremos con un problema y es que al ser diferente hace que aparezcan todas las etiquetas, es decir, el código no parece correctamente. Nos sale algo así:

En el caso de que no nos funcione en otro editor de  código, lo que a mi me recomendo mi profesora de TIC es descargar un editor muy bueno llamado Notepad++, ya que reconoce el código y es muy eficaz a la hora de utilizarlo. El resultado seria el siguiente:

Programacion para la Web

La web actual se basa en el estándar HTML5, que incorpora muchas funcionalidades que la version anterior html 4.01 no tubo como por ejemplo: audios, vídeos, herramientas de dibujo, validación,etc. Estas novedades hacen que la web sea mas accesible y comprensible.

Tambien  encontramos lenguajes como:

• ·        HTML 4
• ·        XHTML
• ·        XML

Tenemos que tener en cuenta que no en todos estos lenguajes no definiremos la estética de la pagina, esto lo hará otros lenguajes llamados CSS3 y JavaScript la parte del cliente.