revista inerxia//desarrollo web

1

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml).1 , 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.El desarrollo de este código es regulado por el Consorcio W3C.

Nuevos elementos

HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios tweb mod-ernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionali-dades a través de una interfaz estandarizada, como los elementos <audio> y <video>.

Mejoras en el elemento <canvas>, capaz de renderizar en algunos navegadores elementos 3D

Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como <font> y <center>, cuyos efectos son manejados por el CSS. También hay un renovado enfasis en la importancia del scripting DOM para el comportamiento de la web.

Novedades

Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs gratuitos (WebM + VP8) o de pago (H.264/MPEG-4 AVC).Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, menu y Command. Permiten generar tablas dinámi-cas que pueden filtrar, ordenar y ocultar contenido en cliente.Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

Novedades

Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs gratuitos (WebM + VP8) o de pago (H.264/MPEG-4 AVC). Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, menu y Command. Permiten generar tablas dinámi-cas que pueden filtrar, ordenar y ocultar contenido en cliente.Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML. Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

INTRODUCCION

¿QUE ES EL HTML? Revista inerxia

2

Ejemplos de códigos HTML 5

Código HTML 5 para reproducir audio sin la necesidad de plugins.Para video es algo similar.

<html> <head> <title>fuente de múltiples elementos</title> </head> <body> <audio id=”audioTestElem” autobuffer controls > <source src=”test.m4a”> <source src=”test.ogg” type=”audio/ogg; codecs=vorbis”> <source src=”url”> no audio for you </audio> </body></html>

Ejemplo de Consulta SQL a una Base de Datos en el Navegador.

// CREAR BBDDfunction prepareDatabase(ready, error) { return openDatabase(‘documents’, ‘1.0’, ‘Offline document storage’, 5*1024*1024, function (db) { db.changeVersion(‘’, ‘1.0’, function (t) { t.executeSql(‘CREATE TABLE docids (id, name)’); }, error); }); } // CONSULTAR BBDDfunction showDocCount(db, span) { db.readTransaction(function (t) { t.executeSql(‘SELECT COUNT(*) AS c FROM docids’, [], function (t, r) { span.textContent = r.rows[0].c; }, function (t, e) { // couldn’t read database span.textContent = ‘(unknown: ‘ + e.message + ‘)’; }); });}

Revista inerxia

3

Ejemplo de WebWorker (Hilo de ejecución en paralelo)Es necesario el uso de javascript.

// Prueba.html

<html> <head> <title>Worker example: One-core com-putation</title> </head> <body> <p>The highest prime number discov-ered so far is: <output id=”result”></output></p> <script> var worker = new Worker(‘worker.js’); worker.onmessage = function (event) { document.getElementById(‘result’).textContent = event.data; }; </script> </body></html> // worker.js (fichero con la tarea del nuevo hilo de ejecución infinito) var n = 1;search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n);}

Ejemplo de Canvas 2D utilizando el API de dibujo

<html> <head> <title>HTML 5 Canvas example</ti-tle> <script> function drawPicture(){

// Primero se recupera el obje-to canvas a modificar var canvas = document.getElementById(‘example’); // Luego se le indicar la forma de trabajar 2D o 3D var context = canvas.getContext(‘2d’); // Se comienza a dibujar en el lienzo utilizando objetos // gráficos context.fillStyle = “rgb(0,255,0)”; context.fillRect (25, 25, 100, 100); context.fillStyle = “rgba(255,0,0, 0.6)”; context.beginPath(); context.arc(125,100,50,0,Math.PI*2,true); context.fill(); context.fillStyle = “rgba(0,0,255,0.6)”; context.beginPath(); context.moveTo(125,100); context.lineTo(175,50); context.lineTo(225,150); context.fill(); } </script> <style type=”text/css”> canvas { border: 2px solid black; } </style> </head> <body onload=”drawPicture();”> <canvas id=”example” width=”260” height=”200”> There is supposed to be an example drawing here, but it’s not important. </canvas> </body></html>

Revista inerxia

4

Ejemplo de un formulario con nuevos tipos de datos.

Elimina muchas validaciones en javascript.La clave esta en el atributo Type de dato.

<html> <body> <form> <input name=”form_number” id=”form_number” type=”number” min=”1” max=”10” > <input name=”form_date” id=”form_date” type=”date”> <input name=”form_month” id=”form_month” type=”month”> <input name=”form_week” id=”form_week” type=”week”> <input name=”form_time” id=”form_time” type=”time”> <input name=”form_url” id=”form_url” type=”url” list=”url_list”> <datalist id=”url_list”> <option value=”http://www.google.com” label=”Google”> <option value=”http://net.tutsplus.com” label=”NetTuts+”> </datalist> <input name=”form_email” id=”form_email” type=”email” list=”email_list” multiple> <datalist id=”email_list”> <option value=”[email protected]” label=”Jane Doe”> <option value=”[email protected]” label=”John Doe”> </datalist> <input name=”form_telephone” id=”form_telephone” type=”tel”> <input name=”form_color” id=”form_color” type=”color”> <label> Attachments: <input type=”file” multiple name=”att”> </label> <input name=”x” type=”range” min=”100” max=”700” step=”9.09090909” val-ue=”509.090909”> </form> </body></html>

Revista inerxia

5

¿Que es HTML?

HTML es un lenguaje de programación estático para crear páginas Web, cuando surgió inter-net, lo único que se utilizaba era código HTML. Es muy fácil crear una página web utilizando HTML, solo debemos sabe la sintaxis básica y la etiquetas (tags) mas importantes.

Conceptos básicos

Un archivo HTML debe tener la extensión “htm” o “html”, no podemos utilizar código dinámico dentro de un archivo HTML porque no funcion-ará. Cuando vamos a crear una página web siempre es necesario que la página principal de nuestro sitio se llame “index”. Nuestro código HTML se ejecutará en el navegador (Internet Explorer, Firefox, etc), sabiendo esto podemos seguir adelante.

Primeros pasos

HTML hace uso de etiqueta o tags para dar un aspecto visual a nuestra página web, las eti-quetas son como instrucciones que le indican al navegador como mostrar la información. El formato de una etiqueta es el siguiente:

<etiqueta>

Hay algunas etiquetas que son simples, es decir que no necesitan ser cerradas y otras llamadas “contenedoras” que encierran un texto para darle un formato determinado, de esta forma:

<etiqueta>Texto para dar formato</etiqueta>

todas las etiquetas contenedoras terminan igual pero con una barra diagonal “/” antes del nom-bre.

Estructura inicial

Todo archivo HTML tiene una estructura a seguir para que se visualice correctamente, para indi-

carle al navegador que comenzaremos a escri-bir código HTML utilizaremos la etiqueta <html>.

<html></html>

En toda página web hay cosas que vemos como el texto, imágenes, videos, etc, pero también hay cosas que no podemos ver como el titulo, descripción y demás, todo lo que no se ve debe ir en la cabecera encerrado entre las etiquetas <head> (cabecera en inglés) y todo el contenido visible lo pondremos entre las etiquetas <body> (cuerpo en inglés), todo esto quedaría así:

<html>

<head><title>Titulo de mi página Web</ti-tle></head>

<body>

Este es el contenido de mi pagina web.

</body>

</html>

Esta es la estructura que debe seguir cualquier sitio web, como vemos, dentro de <head> utilizamos una nueva etiqueta para definir el titulo de nuestra página web, su nombre es muy intuitivo si sabemos algo de inglés, nada mas ni nada menos que <title> (título en inglés).

CONSEPTOS BASICOS AL HTML Revista inerxia

6

FORMULARIOS HTML

Las páginas webs no son solo permiten presentar documentos de forma más o menos atractiva al destinatario final, sino que también proporcionan elementos para interactuar con él. De esta manera el usuario final puede enviar su opinión de la página al autor, o realizar una compra en línea. Estos elementos se cono-cen como formularios y seguro que todos los habéis visto y utilizado alguna vez. Por ejemplo este sencillo formulario.

<FORM ACTION=”” METHOD=”POST” name=”formul”>Tu nombre:<BR><INPUT NAME=”nombre” TYPE=”TEXT” SIZE=”32”/><BR>¿Estás registrado?<br><label><input type=”radio” name=”Si” value=”1”>Si</label><br><label><input type=”radio” name=”Si” value=”0”>No</label><br><BR><INPUT TYPE=”Submit” VALUE=”Enviar”><input name=”Reset” type=”reset” id=”Reset” value=”Borrar”></FORM>

El formulario está formado por una serie de elementos (cajas de texto, casillas de verificación, botones...) encerrados entre las etiquetas <FORM> </FORM>. Como verás en esta etiqueta existen varios parámetros como son:

ACTION la acción que se ejecutará al pulsar el botón de enviar. Habitualmente será una URL a un programa CGI encargado de procesar los datos del formu-lario. Puede ser también mailto: seguido de una dirección de correo electróni-co, en este caso el formulario se enviará por correo, en cuyo es recomendable añadir el parámetro ENCTYPE=”text/plain” para que el mensaje sea fácil de leer.

METHOD indica como se enviarán losa datos del formulario al programa que los procese: POST de forma interna (oculta) y GET añadido a la dirección URL del programa. Si usas el formulario para un mailto: debes usr el método POST

NAME es el nombre que identifica al formulario, útil si se usan scripts dentro de la página.

Revista inerxia

7

Introducción a los aspectos técnicos de los estilos CSS, como crear una hoja de estilos y relacion-arla con nuestra pagina web.

Muchas veces nos vemos un poco limitados al trabajar solo con HTML, aplicar colores, tamaño de fuentes y demás puede ser casi imposible si nuestra pagina web tiene mucho contenido.

Para eso usaremos los estilos CSS, con ellos podemos aplicar cambios de colores, fuentes, margenes, espacios, etc. a la web mucho mas fácil.

Crear la hoja de estilos CSS

La hoja de estilos CSS no contiene código HTML, por lo tanto no deberemos escribir etiquetas HTML en el, para crear la hoja de estilos vamos a:

Abrir el bloc de notas (NOTA: con NVU no funciona) Clic en Archivo -> Guardar Como... se nos abrirá una ventana donde tendremos que decirle en que ubicación queremos guardar la hoja de estilos, nosotros los haremos en la carpeta ejem-plo-ccusw donde estan los demas archivos de este curso. Guardamos el archivo con el nombre: “estilos.css”, recuerda, debe terminar en “.css” sin más.

Muy bien, una vez que tengamos el archivo estilos.css vacio tenemos que lograr, de alguna for-ma, que los estilos que escribamos en ese archivo sean tomados en cuenta por el archivo HTML.

Nota: recuerda que NO hay que escribir código HTML en la hoja de estilos.

Relacionar la hoja de estilos CSS con nuestra pagina web

Para relacionar la hoja de estilos CSS utilizaremos la etiqueta <link>, en ella deberemos especifi-car la ubicación, tipo de archivo y la relación entre la hoja de estilos y la pagina web, debes acordarte SIEMPRE, que la etiqueta <link> va dentro de la etiqueta <head>, de esta forma:<link href=”estilos.css” rel=”stylesheet” type=”text/css” />

Ahí vemos que se especifican varios atributos, cada uno sirve para:

href: busca la hoja de estilos rel: le dice la relación type: le dice que tipo de archivo es, o mejor dicho, que contenido llevará dentro.

Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y escribimos esto:body{background-color:black;}

Guardamos y abrimos el archivo index.html con nuestro navegador (Internet Explorer, Firefox, Op-era, etc), si todo fue bien tendriamos que ver el fondo de nuestra página de color negro.

HOJA DE ESTILOS Revista inerxia

8

BOTONES DE FORMULARIOS

FORMULARIOS HTML//Botones de formularios

Existen dos clases e botones: uno que se utiliza para poner en marcha la operación indi-cada por ACTION (botones submit) y otro que sirve para resetear el formulario borrando el contenido de todos los controles:En ambos casos su puede usar el parámetro VALUE para el texto que aparece dentro del botón. El botón de submit puede ser una imagen, por ejemplo

<input name=”imageField” type=”image” src=”/imgs/botonel.gif” width=”85” height=”46” border=”0”>

Este botón actua como un botón tipo SUBMIT, pero envía con los datos del formulario las coordenadas X Y del punto de la imagen donde pulsó el usuario.

LISTAS DE OPCIONESHay una alternativa al control de selección de alternativas: las listas desplegables. Mediante este control el usuasrio puede seleccionar una opción de entre un grupo que aparece en una lista desplegable. La lista se encierra en etiquetas <SELECT></SELECT>, y las opciones se poenen en etiquetas <OPTION></OPTION>:

<SELECT NAME=”Idioma”> <OPTION>Español</OPTION> <OPTION>Inglés</OPTION> <OPTION>Francés</OPTION> <OPTION>Alemán</OPTION></SELECT>

Los parámetros que admite SELECT son las siguientes:Parámetro SignificadoSIZE El número de opciones que podremos ver. Si es mayor que 1 ver-emos una lista de selección con un scroll y, si no, veremos una lista desplegable.MULTIPLE Si lo indicamos podremos elegir más de una opción, para ello el usuario utilizará la tecla CTRL y el botón activo del ratón.

Y OPTION estos:Parámetro SignificadoVALUE Este es el valor que asignará a la variable.SELECTED La opción con esta propiedad será la que aparezca seleccionada por defecto.

Revista inerxia

9

Tutorial Photoshop // Tratamiento de los ojos

.conectatutoriales.com. Recursos exclusivos para usuarios registrados, Registro gratuito!!! ... conectatutoriales conecta tutoriales tutorial ...

de ConectaTutoriales | hace 6 días | 2030 reproducciones

Tutorial Adobe Photoshop // Efecto Dave Hill simulado

.conectatutoriales.com. Recursos exclusivos para usuarios registrados, Registro gratuito!!! ... conectatutoriales conecta tutoriales tutorial ...

de ConectaTutoriales | hace 5 meses | 37445 reproducciones

JSTuts: Presentación - Introducción a Javascript

En esta serie de tutoriales estaré mostrando casos prácticos del uso de Javascript. Usando sus librerías como JQuery, Mootools, así como fun-ciones ...

de str0ngbacker | hace 2 meses | 2159 reproducciones

JSTuts: + Conceptos básicos de programación

En este tutorial seguiremos con lo básico de programación en Javascript, aprenderás lo siguiente: -Variables -Como nombrarlas -Tipos de variables ...

de str0ngbacker | hace 2 meses | 3558 reproducciones

CSS // Generar degradados con Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator es una herramienta de uso libre que nos permite crear degradados o gradientes para nuestros diseños con CSS, esta ...

de FalconMasters | hace 3 semanas | 827 reproducciones

CSS3 // Sombras en los elementos

En este videotutorial aprenderemos como aplicar sombras a nuestros el-ementos web como tablas, DIVs, imagenes, entre algunos otros elementos. Esta ...

de FalconMasters | hace 1 mes | 1059 reproducciones

TUTORIALES RECOMENDADOS DE YOUTUBE

10

PAGINAS WEB DE EXELENTE CONTENIDO

13

3 WEBS DE DISEÑO DE PAGINA EXELENTE

16

3 WEBS DE DISEÑO

18

Revista inerxia

19

Las Mejores Universidades en México en Diseño Gráfico

Hace algunos años, en el año 2009 se publico un estudio realizado por el periódico El Univer-sal sobre las mejores universidades en México, en un ranking que hace cada año, categori-zando las diferentes carreras que se imparten en la mayoría de las universidades.

Hace algunos días, el periódico Reforma publicó un Rankin de Universidades a nivel na-cional, donde se evaluaron 20 programas distintos ofrecidos por más de 150 universidades distribuidas en las Ciudades de México, Guadalajara y Puebla.

Unas de las carreras tomadas en cuenta dentro del Rankin son Administración, Arquitectu-ra, Comunicación, Contaduría, Derecho, Diseño Gráfico, Economía, Gastronomía, Ingeniería Electrónica, Ingeniería Industrial, Ingeniería Mecánica, Licenciatura en Sistemas, Medicina, Mercadotecnia, Psicología y Relaciones Internacionales.

Revista inerxia

20

En fin, aquí a continuación la tabla de las mejores universidades en la carrera de Dis-eño Gráfico , quizá puedan compararla con la que se publico hace algunos años y verán los cambios que han sufrido las instituciones.

Universidad Iberoamericana 8.69

UAM Azcapotzalco 8.67

Universidad La Salle 8.62

UNAM ENAP 8.48

Universidad Marista 8.47

UAM Xochimilco 8.46

INBA 8.44

Universidad Anahuac Norte 8.41

Universidad Anahuac Sur 8.34

UNAM FES Acatlan 8.28

Universidad Intercontinental 8.20

Universidad Justo Sierra 8.12

Revista inerxia

21

Revista inerxia

revista inerxia//desarrollo web

Documents