Introducción a HTML5. Qué es HTML5? Características que aporta HTML5. Etiquetas semánticas 2

Tamaño: px
Comenzar la demostración a partir de la página:

Download "Introducción a HTML5. Qué es HTML5? Características que aporta HTML5. Etiquetas semánticas www.nebaris.com 2"

Transcripción

1

2 Introducción a HTML5 Hablar de HTML5 es más bien hablar de una familia, la cual está constituida por HTML, CSS3 y JavaScript. En la versión anterior de HTML ya se podían utilizar estas otras dos tecnologías, pero ahora HTML5 las soporta de manera nativa, o sea, que al definir un script se sobreentiende que utilizaremos JavaScript, y lo mismo ocurre con los estilos, se toma CSS3 por defecto. Tampoco hace falta indicarle al navegador la versión de HTML que estamos utilizando, basta con sólo indicar que es HTML. Antes teníamos que escribir de la siguiente forma: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>hola Mundo!</title> <script type="text/javascript" src="script.js"></script> <link type="text/css" rel="stylesheet" href="styles.css"> </head> Ahora lo haremos de la siguiente manera: <!doctype html> <html> <head> <title>hola Mundo!</title> <script src="script.js"></script> <link rel="stylesheet" href="styles.css"> </head> Qué es HTML5? HTML5 es un lenguaje de marcado, sus siglas significan Lenguaje de Marcado de HiperTexto. Sirve para estructurar y presentar contenido para la web. Se trata de un sistema para darle formato al "layout" de nuestras páginas. La diferencia principal con su predecesor es el nivel de sofisticación del código que podemos construir usando HTML5. El lenguaje HTML funciona a través de marcas de sentido llamadas etiquetas, éstas son la herramienta fundamental para que los navegadores puedan interpretar el código y permitirnos ver imágenes, textos y estructuras. Los navegadores juegan el papel de traductores de etiquetas. Características que aporta HTML5 Contenido multimedia, audio y video sin la necesidad de plug-ins externos Almacenamiento de datos del lado del cliente Trazado de formas, figuras, colores, etc. Animaciones sin utilizar Flash ni Silverlight Geolocalización Etiquetas semánticas 2

3 Estas etiquetas no tienen una representación especial en pantalla, ya que todas se comportan como un div o un span, pero agregan un significado superior. Los divs se siguen utilizando para cuando se necesitan cajas con objetivos de diseño gráfico o cosas que no tengan significado semántico. <header>: Se creó para reemplazar divs del estilo <div id="header"> <nav>: Sólo se puede tener un <nav> por página y representa la botonera de navegación. Se recomienda utilizar listas <ul>, aunque se puede incluir cualquier cosa dentro. <section>: Representa una sección genérica de un documento. Agrupa un contenido temático. Pueden ser capítulos, páginas en tabs, las secciones de una tesis, etc. <article>: Representa una composición completa y autocontenida en una página. Puede ser un post en un foro, un artículo en una revista, una entrada de blog, un comentario de un usuario, un widget interactivo o cualquier otro contenido independiente. <aside> : Acá se coloca todo contenido que no esté relacionado con el objetivo primario de la página. <footer>: Se creó para reemplazar a divs del estilo <div id="footer"> Más etiquetas Estas son las etiquetas por las cuales todos se están volviendo locos por HTML5. <video> : Agrega video sin necesidad de plugins. Cada navegador soporta codecs diferentes, por lo cual es necesario recodificar el video en múltiples codecs. <audio> : Agrega audio. Permite múltiples formatos. <input *> : Se agregaron nuevos campos como cajas de auto validadoras, sliders, calendarios, etc. <canvas>: Es un API de dibujo para JavaScript. Otorga un área de dibujo vectorial y de bitmaps. <svg>: Es igual que <img>, pero sirve para insertar dibujos y animaciones vectoriales al estilo Flash, basado en el estándar SVG (Gráficos de vector escalable - deriva de XML). 3

4 Introducción a CSS CSS (Cascading Style Sheets u Hojas de Estilo en Cascada) es el responsable de describir la apariencia de los elementos HTML. Fue presentado junto a la versión 4 de HTML por el W3C para ayudar a solucionar los problemas que estaban teniendo los desarrolladores con la versión 3.2, la cual incluía muchas tag de presentación. Como HTML nunca fue pensado para incluir tags de presentación, el desarrollar y mantener páginas era bastante complicado. Al separar el contenido de la presentación, CSS hizo que HTML fuera más semántico y mantenible, además, hizo que fuera más simple el acceso a dispositivos como computadoras, impresoras, dispositivos móviles, etc. Estado actual Actualmente, CSS se encuentra en la versión 2.1 como estándar oficial, con partes de la versión 3 en estado de recomendación. Por suerte la W3C dividió las especificaciones de CSS3 en una serie de módulos a ser implementados de manera separada e independiente. Esto permitió que los navegadores pudieran implementar módulos sin tener que esperar a que toda la especificación esté finalizada. Conceptos fundamentales Cascada La cascada determina qué propiedades son asignadas a un elemento. Existen 3 conceptos principales que determinan qué propiedades se asignan a un elemento: importancia, especificidad y orden. Importancia La importancia depende del origen de la hoja de estilo. Las hojas de estilo pueden tener diferentes orígenes como: estilos de agente de usuario, estilos de usuario y estilos de autor. Estilos de agente de usuario: Son los estilos que aplica el navegador por defecto. Cada navegador tiene sus estilos y es por eso que existen diferencias visuales entre uno y otro. Estilos de usuario: Son los estilos especificados por el usuario. Generalmente son aplicados por usuarios con necesidades especiales (fuentes grandes, colores específicos, contraste, etc.) Estilos de autor: Son los estilos definidos por el diseñador del sitio. Son las reglas que más peso tienen. Especificidad La especificidad determina cuál de las reglas CSS es aplicada por el navegador. Una vez que se decidió la importancia de una regla, se asigna la especificidad. Si dos reglas se aplican sobre el mismo elemento, la regla con el selector más específico obtiene precedencia. Orden Se refiere al orden del código en el que los estilos son enlazados, incluidos o importados. Si hay dos hojas de estilo enlazadas, la última tiene precedencia sobre la primera. O si dos reglas afectan al mismo elemento y tienen la misma importancia y especificidad, la que aparezca última en la hoja de estilo, es la que será aplicada. 4

5 Herencia La herencia indica que el valor de una propiedad es copiada del valor de la misma propiedad del elemento padre. Por lo tanto, cuando se indica que una propiedad hereda, significa que el valor será determinado por la herencia, a menos que se especifique lo contrario. Por ejemplo, si en el elemento body se especifica que el color de la letra va a ser rojo, todos los elementos p van a tener el color rojo de letra, a menos que se especifique otra cosa. No todas las propiedades son heredadas, pero se puede forzar este comportamiento utilizando el valor inherit. Reglas Las reglas le dicen al navegador cómo debe mostrar los elementos. Una regla está compuesta por dos elementos: un selector y una o más declaraciones. Selector El selector es la parte que indica el elemento HTML al cual se le va a especificar un conjunto de propiedades. Los selectores pueden contener más de un elemento, pueden ser una combinación de elementos, clases, id; como así también utilizar combinadores que expliquen la relación entre ellos. Declaración Todo lo que está dentro de las llaves forma parte de la declaración. Consiste en 1 o más propiedades seguidas de dos puntos y un valor. Propiedad y valor Son un conjunto de parámetros que definen la forma en que se muestra un documento, indican que parte hay que modificar. Cada propiedad es seguida por un valor que especifica cómo debe estar determinada la propiedad. Modelo de cajas Una de las cosas básicas al empezar a estudiar CSS, es entender el modelo de cajas. Cada elemento HTML, puede ser pensado como una caja rectangular de contenido, relleno (padding), bordes (border) y márgenes (margin). 5

6 El área del centro es el contenido, el cual es el corazón del elemento. Puede contener texto, imágenes, etc. El área de padding rodea al contenido y la separa del borde. El área del borde es la parte más alejada del contenido y sirve para delimitarlo. Finalmente el área de margen existe por fuera de la caja y es el espacio al rededor del elemento que lo separa de los demás elementos. Agregar CSS Existen cuatro formas de agregar CSS a una página web. Estilos inline Los estilos inline mezclan el contenido con la presentación. Para agregarlos se utiliza el atributo style dentro de un elemento HTML. <p style="color: red">...</p> Estos estilos se encuentran en la parte más baja de la cascada, lo cual indica que sobrescribirán a cualquier otro estilo declarado. No es recomendable usarlos, ya que si necesitamos cambiarlos, deberemos modificar directamente el contenido (uno por uno). A pesar de eso, son buenos para crear prototipos o para utilizar estilos temporales que no se van a compartir con otros elementos de la página. Estilos internos 6

7 Se incluyen en la cabecera de la página y se definen utilizando la etiqueta <style>. Con este método se pueden escribir todas las reglas dentro del archivo HTML. <style> p { color: red; </style> Son útiles para uso temporal o para testing; para otro uso no están indicados, ya que si tenemos una web grande, con muchas páginas, tendremos que estar repitiendo el estilo en cada una de ellas, lo cual haría del mantenimiento una tarea imposible. Estilos enlazados (o externos) Con un estilo externo podemos cambiar el diseño de un website entero con un solo archivo. Para utilizarlo se lo define en la cabecera de las páginas utilizando el elemento <link>. <link rel="stylesheet" href="styles.css"> El atributo rel indica la relación entre el documento actual y el documento que está siendo enlazado, que en este caso es una hoja de estilo. El atributo href hace referencia a la ruta donde se encuentra el archivo a enlazar. Una de las ventajas de esta forma, es que una vez descargada la hoja de estilos, esta queda almacenada en el navegador y no se vuelve a descargar en cuanto navegamos a otra página de la misma web. Esto reduce considerablemente el tiempo de carga de nuestras páginas. Este es el método más utilizado a la hora de agregar CSS a una página. Estilos importados Este método nos permite importar CSS desde otros archivos, con lo cual comparte algunas de las ventajas de los estilos externos. La se puede utilizar en páginas o en hojas de estilo. Con este método podemos hacer que nuestras hojas de estilo sean más modulares, separando el código en diferentes 'imagenes.css'; La contra, es que cada es un nuevo HTTP request, lo cual hace que nuestra web tarde más en cargar. 7

8 Introducción a jquery Aunque ya hemos hablado en muchas ocasiones sobre jquery, varias personas me preguntaron si podía hacer un artículo introductorio. Así que para ayudar a todos los que todavía no saben jquery, hoy vamos a empezar por el principio. JavaScript es un lenguaje de programación del lado del cliente, utilizado para añadirle interactividad (o comportamiento) a una página. jquery es una librería JavaScript que incluye muchísimas funcionalidades como: manejo de eventos, navegación del DOM, animaciones, interacción Ajax, etc. jquery realmente simplifica la programación JavaScript. Para incluir jquery en tu proyecto lo único que necesitás es descargarlo desde la página jquery.com y hacer una llamada en tu página al archivo jquery.js. <script src="jquery.js"></script> La función jquery Lo más importante es saber cómo seleccionar elementos HTML con jquery. jquery es una función a la que se le pueden pasar argumentos, del cual el más común es un string con un selector CSS. Estos selectores permiten indicar cuáles son los elementos HTML deseados para aplicarles un comportamiento. Si queremos seleccionar todos los párrafos lo haríamos de la siguiente manera: jquery('p'); Por suerte, como jquery utiliza los selectores de la misma forma que CSS, el llegar a los elementos es realmente simple, si ya tenemos conocimientos de CSS. Para agilizar las cosas, cuando trabajamos con jquery, existe una forma abreviada de llamar al método jquery: utilizando el símbolo "$". Por lo tanto la anterior línea de código la haríamos de la siguiente forma: 8

9 $('p'); Para obtener la misma funcionalidad con JavaScript tendríamos que hacer lo siguiente: document.getelementsbytagname('p'); Formas de selección: Elemento: $('tag html') - ejemplo $('blockquote'); ID: $('#id') - ejemplo $('#contenedor'); Clase: $('.clase') - ejemplo $('.importante'); También podemos hacer una conjunción de varias de estas formas, para lograr un selector realmente complejo: // selecciona el span marcado con clase actual, // dentro de una etiqueta a // dentro de un div con ID navegación $('div#navegacion a span.actual'); Para asegurarnos que el código se ejecute una vez que la página esté correctamente cargada, podemos hacer uso del evento ready (esto nos puede evitar muchos problemas a futuro): $( document ).ready(function() { ); // código Propiedades y atributos Ahora que ya sabemos seleccionar elementos, es momento de hacer algo con ellos. Hay varias funciones que podemos aplicar y la forma de utilizarlas es agregándolas al final del elemento seleccionado. Por ejemplo, para cambiar el color del texto de los elementos "p", tenemos que hacer lo siguiente: // todos los elementos p tendrán el texto en color rojo $('p').css('color', 'red'); Si en cambio queremos modificar la clase de un elemento, podemos utilizar la función addclass() (removeclass nos permite quitar una clase): $('a').addclass('importante'); Si queremos saber la clase de un elemento obtenido por ID: $('#divcontenedor').attr('class'); Para manipular textos podemos hacerlo a través de la función text() $('p span').text('hola mundo'); 9

10 O a través de la función html() que además acepta código html. $('p span').html('<strong>hola mundo</strong>'); Eventos Hasta ahora, las cosas son bastante estáticas. Para interacutar con los elementos se utilizan los manejadores de eventos. Por ejemplo, cuando se haga click sobre un enlace, ocultaremos un texto: $('a #ocultar').click(function() { $('span #aocultar').hide(); ); Es interesante observar que como parámetro, la función click recibe una función anónima (sin nombre), en la cual indicamos lo que va a ocurrir cuando se de dicho evento. Existe una gran cantidad de eventos que nos proporciona jquery, para poder verlos todos, podés consultar la página de eventos de jquery. Animaciones Otra cosa interesante que podemos hacer con jquery, es animar elementos. Para ello, sólo tenemos que indicarle a la función animate() cuáles son las propiedades CSS que van a cambiar del elemento y la velocidad de la animación. $("#divanimado").animate( { width: "500px", height: "700px", 2000); También podemos hacer uso de las funciones slide, que nos permiten mover los elementos por la pantalla. $("#divanimado").slidedown("fast", function() { // código $("#divanimado").slideup("slow", function() { // código 10

11 Introducción a Google Chrome Developer Tools Cuando comenzamos a desarrollar páginas web, identificar errores de manera simple y rápida se convierte en una necesidad. La mayoría de los navegadores modernos poseen herramientas de desarrollo para inspeccionar la página, el diseño y el código JavaScript. En este artículo, vamos a ver las funcionalidades que Google Chrome Developer Tools nos provee para agilizar nuestro tiempo de desarrollo web. Invocar las herramientas del desarrollador Existen varias formas de abrir la venta de las Developer Tools: apretando la tecla F12 botón derecho > Inspeccionar elemento desde el menú > Herramientas > Herramientas del desarrollador Anatomía Developer Tools contiene varios elementos de los cuales podemos hacer uso. Vamos a enumerarlos para entender mejor su función. Nota: si al abrir las herramientas, estas aparecen adosadas a la ventana, utilizando el ícono que se encuentra en la esquina inferior izquierda, podés hacer que se muestre en una ventana nueva. 1. Elemento que está siendo inspeccionado 2. Tabs que nos ofrecen acceso a los diferentes recursos 3. Panel de propiedades 4. Modificar las configuraciones 5. Árbol DOM desde la raíz hasta el elemento inspeccionado 11

12 6. Volver a mostar las herramientas dentro de la ventana de la página 7. Mostar consola JavaScript 8. Herramienta para inspeccionar elementos Manipulando el CSS Tenemos seleccionada la tag h1 y podemos ver en el Panel de propiedades todos los estilos que se le aplican a ese elemento. 1. Nos indica cómo se llama el archivo CSS donde está incluida la regla, junto con la línea de dicho archivo 2. Nos indica la regla exacta 3. Nos permite activar/desactivar una propiedad Haciendo click sobre el nombre de la propiedad o el valor, podemos modificarlos y ver automáticamente este cambio reflejado en la página. También es posible, haciendo un click en la llave de cierre, agregar una nueva propiedad. Consola Supongamos que tenemos un error en nuestro script y no sabemos donde. Al abrir la consola, podremos ver algo como lo siguiente: Nos indica cuál es el error, en dónde está (archivo y línea) y en la esquina derecha inferior nos muestra un ícono con la cantidad de errores encontrados. Si hacemos un click en el nombre del script, pasaremos a la ventana Sources, donde podremos ver claramente 12

13 dónde está el error en nuestro código. También podemos agregar código a la página. Por ejemplo, hacemos por jquery que cada vez que se hace click en un elemento h1, este cambie su color por el rojo. Hacemos click sobre el título y comprobamos, que a pesar de no estar en el código original, al agregar nuestro código jquery la página funciona como esperamos. Esto nos permite hacer pruebas de manera real antes de agregar nuestro código al archivo. 13

14 Debug Cuando necesitamos hacer un seguimiento paso a paso del código para verificar una condición o error, tenemos que agregar al código JavaScript la siguiente sentencia: debugger; Con eso, mientras tengamos las herramientas activas, al llegar a esa parte del código la página dejará de cargarse y las Developer Tools tomarán el control del flujo. Acá podemos ver varias cosas interesantes: 1. Indica el archivo en el cual estamos parados 2. Pausa o reinicia la ejecución 3. Control de la ejecución 4. Activar/Desactivar los breakpoints (o puntos de interrupción) 5. Al hacer click en el margen podemos agregar breakpoints 6. Si dejamos el mouse sobre una variable unos segundos nos mostrará el valor de la misma 14

15 7. Los checkboxes nos permiten activar/desactivar breakpoints Si necesitamos agregar watch expressions (expresiones a observar) para ver cómo se van modificando, tenemos que apretar el botón de "+" que tenemos en la esquina superior derecha del Panel de propiedades. Si estás trabajando con un archivo minificado, podés utilizar el botón de Pretty print para que sea fácil leerlo. Resources 15

16 La vista de recursos básicamente muestra todos los recursos que son utilizados por la página, incluyendo almacenamiento de sesión, cookies, almacenamiento local, imágenes, scripts, estilos, etc. Desde esta ventana se pueden eliminar cookies, añadir valores al almacenamiento local, etc. Network Esta ventana muestra con mucho detalle los tiempos de carga de cada uno de los recursos que utiliza la página. Esto nos sirve para hacer diagnósticos sobre problemas que tengamos con la lentitud de nuestro proyecto. 16

17 17

18 Introducción a los prepocesadores CSS Los preprocesadores CSS toman código escrito en un lenguaje de preproceso y lo convierten a código CSS. Debido a que en realidad no son CSS, no están atados a sus limitaciones. El lenguaje de preproceso puede darte más funcionalidad que la que otorga CSS, al mismo tiempo que verifica que todo funcione perfecto con los navegadores. Existen varios lenguajes (siendo LESS y Sass los más utilizados), los cuales intentan dotar a CSS de características de los lenguajes de programación, como: funciones, anidamiento, variables y mixins. Cómo funcionan? Básicamente, el flujo de trabajo es el siguiente: Se escribe código en un lenguaje de preproceso Mediante un cliente, se compilan los archivos de código Se obtiene una hoja de estilos en CSS Inconvenientes de utilizar un preprocesador Existen algunas cosas a tener en cuenta con respecto al uso de preprocesadores: Todo el equipo debe utilizar el mismo preprocesador. No es posible que unos utilicen Sass y otros LESS, por ejemplo. Una vez modificado el CSS a mano, se debe seguir ese camino. Se debe trabajar de manera local, en vez de editar los archivos en producción. Sintaxis Veamos algunos ejemplos básicos escritos en Sass, LESS y el resultado que producen en CSS; para ver las diferencias. Variables: Los preprocesadores permiten definir variables, lo que hace al código más mantenible. Modificar un sólo valor, es mucho más fácil que modificar varios en toda la hoja de estilo. /* sass */ $colorblanco: #fff; body {background: $colorblanco; /* less #fff; body /* resultado */ body {background: #fff; Las variables no sólo se pueden usar como valor, sino que también se pueden concatenar con strings o con las propiedades de CSS. /* sass */ 18

19 $lado: top; border-#{$lado): 1px solid #000; /* resultado */ border-top: 1px solid #000; /* less "http://www.nebaris.com"; background-image: /* resultado */ background-image: url("http://www.nebaris.com/imagenes/bg.png"); Anidamiento: El anidamiento viene a solucionar el problema de tener que escribir muchas veces el mismo padre para muchos elementos. /* sass y less */ section { margin: 10px; nav { height: 25px; a { color: #0982C1; &:hover { text-decoration: underline; /* resultado */ section { margin: 10px; section nav { height: 25px; section nav a { color: #0982C1; section nav a:hover { text-decoration: underline; Mixins: Los mixins son funciones que permiten reusar propiedades en la hoja de estilo. /* sass - mixin error con argumento opcional */ /* en caso de no pasarle argumentos, por defecto es 2px error($anchoborde: 2px) { border: $anchoborde solid #F00; 19

20 color: #F00;.error-generico { padding: 20px; margin: error();.error-login { left: 12px; position: absolute; top: error(5px); /* less - mixin error con argumento opcional */ /* en caso de no pasarle argumentos, por defecto es 2px 2px) { solid #F00; color: #F00;.error-generico { padding: 20px; margin: 4px;.error();.error-login { left: 12px; position: absolute; top: 20px;.error(5px); /* resultado */.error-generico { padding: 20px; margin: 4px; border: 2px solid #f00; color: #f00;.error-login { left: 12px; position: absolute; top: 20px; border: 5px solid #f00; color: #f00; Herencia: La herencia es la habilidad de los selectores de poseer las propiedades de un selector padre. En este caso, solo veremos el ejemplo para Sass, ya que Less no soporta la herencia. /* sass */ 20

21 .block { margin: 10px 5px; padding: 2px; p /* hereda los estilos de ".block" */ border: 1px solid #EEE; ul, ol /* hereda los estilos de ".block" */ color: #333; text-transform: uppercase; /* resultado */.block, p, ul, ol { margin: 10px 5px; padding: 2px; p { border: 1px solid #EEE; ul, ol { color: #333; text-transform: uppercase; Importación: En la comunidad CSS la importación no está bien vista, ya que requiere múltiples pedidos HTTP. Con los preprocesadores, al importar un archivo, éste se incluye durante la fase de compilación, creando un sólo archivo CSS. /* sass y less */ /* tipo debe reemplazarse por la extensión del preprocesador,.less o.scss */ /* estilo.{tipo */ body { background: "estilo.{tipo"; p { background: #0982C1; /* resultado "reset.css"; body { background: #EEE; p { background: #0982C1; 21

22 Principales preprocesadores A la hora de elegir, existen varios preprocesadores CSS. Básicamente todos tienen la misma funcionalidad, agilizan la creación de archivos CSS. La elección de uno sobre otro es más una cuestión de gustos. Te dejo una lista de los principales preprocesadores, para que puedas elegir cuál utilizar. Less Sass Switch CSS More CSS CSS Cacheer CSS Preprocessor Stylus DtCSS 22

23 Casos de prueba reducidos en desarrollo frontend Hoy vamos a hablar sobre cómo resolver problemas que nos aparezcan al desarrollar la interfaz de usuario de una página web. Cuando tenemos problemas con el código y no encontramos por dónde viene el error, lo mejor que podemos hacer es crear un caso de prueba reducido. Al crear un caso de prueba reducido podemos: aislar el problema y resolverlo, o pasar el bug a la gente responsable Qué es un caso de prueba reducido? Básicamente, es una página de ejemplo que creamos para reproducir un problema que estamos teniendo, tratando de poner en ella el menor código posible: sólo el HTML, CSS y JavaScript realmente necesario. Los casos de prueba reducidos se utilizan mucho tanto en el desarrollo backend como en el frontend. El aislamiento que obtenemos al utilizarlos nos permite centrarnos en lo que realmente está causando el error y focalizarnos para solucionarlo. Pasos para encontrar y resolver problemas 1 - Identificar el problema El primer paso para resolver un problema es identificarlo correctamente. Tenemos que estar seguros que el error que se produce no proviene de código de backend, sino que es algo que no está correcto en el frontend. 2 - Hacer la página estática Ya sabemos que tenemos un problema en el frontend, entonces lo mejor es separar el frontend del backend, o sea, hacer que la página pase de ser dinámica a estática. Para eso, vemos el código fuente de la página y lo copiamos a un nuevo documento. Con esto podremos empezar nuestro caso reducido. También tenemos que poner este nuevo documento en una carpeta aparte, especial para nuestras pruebas. 3 - Aislamiento Ya tenemos la página de prueba, ahora tenemos que copiar todos los recursos necesarios (imágenes, archivos CSS y JavaScript externos, etc.) en el nuevo directorio que creamos. Ya tenemos creado un pequeño entorno de pruebas que nos va a permitir tocar por aquí y por allá sin que nada de lo importante se rompa. Al trabajar de estar forma, no sólo podemos estar tranquilos de los cambios, sino que hacemos que el caso de prueba sea portable, para poder replicarlo en otro lado. 4 - Trabajar de arriba a abajo En general es mejor empezar a trabajar desde el inicio del documento, o sea, por el head y finalmente ir al body. Si trabajamos de esta forma podemos ir reduciendo un elemento a la vez. Empezamos entonces por la etiqueta head que contiene enlaces a archivos CSS, JavaScript y demás. Quitamos un elemento, guardamos y verificamos en el navegador que el problema sigue persistiendo. Si al quitar un bloque de código el problema desaparece, ya habremos encontrado la causa. Volvemos a colocarlo para verificar que el problema se vuelve a dar y 23

24 continuamos. 5 - Archivos externos Si utilizamos archivos externos y detectamos que al agregarlos tenemos un problema, lo mejor es tratar de poner estos archivos en el documento de prueba que estamos utilizando. Remplazar las tags link por style, poniendo los selectores en la página Reemplazar los enlaces de script por código embebido Reemplazar los enlaces de las imágenes por la dirección equivalente en la carpeta para el test 6 - Reducir Una vez que terminamos con la etiqueta head, tenemos que empezar a reducir el código de la etiqueta body. Este va a ser el lugar donde más pasemos el tiempo, ya que podemos tener muchísimas líneas de código para analizar. La regla general es ir eliminando etiquetas de forma entera (desde la apertura hasta el cierre). Teniendo en cuenta que cada vez que eliminemos un elemento, debemos guardar y volver a refrescar el navegador para constatar los cambios. 7 - Documentar Si existen partes del código que suponemos que pueden ser el problema, deberíamos indicarlo poniendo comentarios en el código. Esto va a ayudar a la tarea de los que sean responsables de solucionar dicho error. 8 - Poner el material en línea Si estuvimos trabajando de manera local y no pudimos resolver el problema, tenemos que subir los archivos a un repositorio (Git, SVN, Mercurial, etc.) o una carpeta compartida (Dropbox, SugarSync, etc.) para que otro equipo pueda observar lo que hicimos e intentar solucionar el problema. Herramientas Existen varias herramientas que nos pueden ayudar al momento de tener que lidiar con bugs en el frontend. La siguiente es una pequeña lista de ellas: Editores de texto con sintáxis coloreada: Notepad++ Sublime Text Analizadores del DOM. Permiten hacer modificaciones en vivo sobre el documento, así como también jugar con los estilos y scripts Firebug Google Chrome Developer Tools DOM Inspector permite inspeccionar y editar JSFiddle nos permite hacer un pequeño caso de prueba sin tener que implementarlo de forma local Validadores The W3C HTML Validator The W3C CSS Validator JSLint JSHInt 24

25 Introducción a CoffeeScript CoffeeScript es un lenguaje que se compila a JavaScript y que se ha vuelto muy popular dentro de la comunidad Node.js y Rails. Si la sintáxis de JavaScript (llena de llaves, paréntesis y puntos y comas) no termina de gustarte; quizás CoffeeScript sea lo que estés necesitando. Qué es CooffeeScript? Básicamente es una reescritura sintáctica de JavaScript. La sintaxis que utiliza CoffeeScript es muy parecida a Ruby o Python. El código en archivos.coffee no se interpreta como JavaScript, sino que se compila a archivos.js. Por qué utilizar CoffeScript? Así como los preprocesadores CSS nos ayudan a escribir CSS de forma más simple, CoffeeScript nos permite trabajar de forma más sencilla con el código JavaScript. Podemos escribir menos código, sabiendo que además vamos a estar siguiendo buenas prácticas y nuestro proyecto será más legible. Es una buena idea leer el resultado compilado de nuestro código, ya que como CoffeeScript sigue patrones establecidos, podemos aprender varias cosas nuevas. Instalación Para poder trabajar, es necesario instalar CoffeeScript en nuestra computadora. Windows Hay que visitar el sitio descargar el instalador y seguir los pasos que éste nos indique. Una vez instalado Node.js, abrir una consola y tipear el siguiente comando: npm install -g coffee-script Verificamos que se haya instalado correctamente: coffee -v OS X Podemos instalar CoffeeScript utilizando Homebrew, que es un administrador de paquetes de código abierto para OS X. Verificamos que Homebrew esté actualizado ejecutando en la terminal el siguiente comando: brew update Primero tenemos que instalar Node.js, ejecutando en la terminal: brew install node 26

Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web

Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web La Web 1. Qué es la Web? 7 1.1 Lado servidor: HTTP, FTP, lenguajes, SQL 7 1.2 Lado cliente: HTML, CSS, JavaScript 10 2. Los lenguajes y su utilidad 10 2.1 HTML 10 2.2 CSS 14 2.3 JavaScript 17 2.4 Ejemplo

Más detalles

Eficienta tu codificación en HTML com Emmet (nivel básico) Luis Eduardo Espinosa

Eficienta tu codificación en HTML com Emmet (nivel básico) Luis Eduardo Espinosa Eficienta tu codificación en HTML com Emmet (nivel básico) Luis Eduardo Espinosa A01201439 Emmet es uno de los plugins más útiles a la hora de desarrollar sistemas o plataformas web directamente desde

Más detalles

Taller de Paginas Web

Taller de Paginas Web Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion

Más detalles

FORMACIÓN ESPECIALIZADA EN HERRAMIENTAS Y LENGUAJES DE PROGRAMACIÓN WEB

FORMACIÓN ESPECIALIZADA EN HERRAMIENTAS Y LENGUAJES DE PROGRAMACIÓN WEB HERRAMIENTAS Y LENGUAJES DE PROGRAMACIÓN WEB La consolidación de los medios online como soporte principal de comunicación, así como la coyuntura económica, que relega a los soportes publicitarios convencionales

Más detalles

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto

Más detalles

Tema: Estructura de HTML5 y optimización de imágenes.

Tema: Estructura de HTML5 y optimización de imágenes. Diseño Digital V. Guía 3 1 Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V Tema: Estructura de HTML5 y optimización de imágenes. Objetivos Contenidos Introducir al

Más detalles

UF1303 Elaboración de hojas de estilo

UF1303 Elaboración de hojas de estilo UF1303 Elaboración de hojas de estilo TEMA 1. Hojas de estilo en la construcción de páginas web TEMA 2. Diseño, ubicación y optimización de los contenidos de una página web OBJETIVOS: - Describir las características

Más detalles

SEGUNDA PARTE: DOM y jquery

SEGUNDA PARTE: DOM y jquery SEGUNDA PARTE: DOM y jquery 1. Conoce a jquery jquery jquery: Una librería javascript MUY popular Colección de utilidades y herramientas Para manipular los elementos de la página - Contenido - Atributos

Más detalles

Máster en DISEÑO Y DESARROLLO DE PROYECTOS WEB

Máster en DISEÑO Y DESARROLLO DE PROYECTOS WEB Máster en DISEÑO Y DESARROLLO DE PROYECTOS WEB OBJETIVOS El máster está compuesto por los módulos de Diseño de páginas Web profesionales y Desarrollo de sitios Web con PHP y Javascript. Al finalizar el

Más detalles

UF1302 Creación de páginas web con lenguajes de marcas

UF1302 Creación de páginas web con lenguajes de marcas UF1302 Creación de páginas web con lenguajes de marcas TEMA 1. Los lenguajes de marcas TEMA 2. Imágenes y elementos multimedia TEMA 3. Técnicas de accesibilidad y usabilidad TEMA 4. Herramientas de edición

Más detalles

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho

Más detalles

Diseño de páginas web 2011

Diseño de páginas web 2011 Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero

Más detalles

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Índice Conceptos básicos En este capítulo se enseñan los conceptos básicos de trabajo en Adobe Dreamveaver CS3. También se describen

Más detalles

5.- Crear páginas web con Nvu

5.- Crear páginas web con Nvu 5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas

Más detalles

Vamos a crear un EPUB desde cero

Vamos a crear un EPUB desde cero Vamos a crear un EPUB desde cero Qué es un EPUB? El EPUB es un formato abierto de libro digital desarrollado por el IDPF. Tiene vocación de ser formato estándar. EPUB es una especificación abierta para

Más detalles

Wenceslao Zavala. www.producciondigitalup.com.ar

Wenceslao Zavala. www.producciondigitalup.com.ar Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña:

Más detalles

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto) HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional

Más detalles

Antes de comenzar un sitio. Empezar un sitio web

Antes de comenzar un sitio. Empezar un sitio web Antes de comenzar un sitio Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web, para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228 Empezar

Más detalles

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES Objetivos Dotar al interesado de conocimientos teóricos y prácticos para poder desarrollar un sitio Web con HTML y aplicar

Más detalles

Este taller estará orientado a aquellas personas que no han visto jamás Python y también a aquellos que quieran pasar de Python 2 al 3

Este taller estará orientado a aquellas personas que no han visto jamás Python y también a aquellos que quieran pasar de Python 2 al 3 Introducción En este taller veremos las novedades sobre Python 3, que cosas nuevas e interesantes trae, que lo diferencia con Python 2, a demás conoceremos los depuradores que trae. Miraremos por arriba

Más detalles

Dreamweaver CS6 para PC/Mac Sitios completamente CSS conforme a los estándares del W3C

Dreamweaver CS6 para PC/Mac Sitios completamente CSS conforme a los estándares del W3C Introducción Internet en la actualidad 7 El World Wide Web Consortium y los estándares 7 Los programas de creación de sitios web 7 Objetivo del libro 8 Interfaz de creación El entorno del sistema 9 La

Más detalles

Scripting en el cliente: Javascript. Tecnologías Web

Scripting en el cliente: Javascript. Tecnologías Web Scripting en el cliente: Javascript Tecnologías Web Motivación Por qué usar JavaScript? Permite crear efectos atractivos visualmente Permite crear sitios WEB que se visualicen de la misma manera en distintos

Más detalles

Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 9: Hojas de estilo.

Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 9: Hojas de estilo. Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 9: Hojas de estilo. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Hojas de estilo Atrás quedaron

Más detalles

Cómo crear tu primer blog

Cómo crear tu primer blog Introducción a WordPress Alicia García Holgado GRupo de Investigación en interacción y elearning (GRIAL) Universidad de Salamanca http://grial.usal.es Tabla de contenido 1. WordPress.com... 2 2. Conceptos

Más detalles

HTML Guía de trabajo para 3º ESO

HTML Guía de trabajo para 3º ESO HTML Guía de trabajo para 3º ESO Página 2 Índice 1. Qué es HTML?... 3 2. Cómo son las páginas Web?... 3 3. Qué es un sitio Web?... 3 4. Práctica 1. Crear un sitio web local... 4 5. Primera página HTML...

Más detalles

Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO

Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO CONTENIDO TEMATICO: HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO Presentación de la formación y del formador INSTALACIÓN DE NAVEGADORES Y HERRAMIENTAS Descarga e instalación de Mozilla Firefox Descarga e instalación

Más detalles

PROGRAMA DE DISEÑO WEB

PROGRAMA DE DISEÑO WEB Objetivo PROGRAMA DE DISEÑO WEB El objetivo de esta capacitación es que el alumno adquiera los conocimientos necesarios para poder Diseñar y Maquetar una Página Web optimizando al máximo la escritura de

Más detalles

Introducción. Qué es CSS? Historia de las CSS

Introducción. Qué es CSS? Historia de las CSS Introducción En esta sección intentaremos iniciarnos en el uso de las Hojas de Estilo en Cascada o CSS, que se utilizan para dar estilo a documentos HTML y XML, separando el contenido de la presentación.

Más detalles

Diseño de Páginas Web 2011

Diseño de Páginas Web 2011 Diseño de Páginas Web 2011 PRESENTACIÓN Proporciona ejemplos de páginas web reales, disponibles en Internet; se presenta el lenguaje HTML y las hojas de estilo en cascada (CSS), enfatizando la utilización

Más detalles

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 2: Aspectos básicos.

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 2: Aspectos básicos. Ministerio de Educación, Cultura y Deporte. HTML5 en la educación Módulo 2: Aspectos básicos. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Aspectos básicos del lenguaje

Más detalles

DISEÑO WEB MÓDULO II PROGRAMACIÓN CON HTML MÓDULO I GESTIÓN DE UN PROYECTO WEB CURSO TÉCNICO SUPERIOR

DISEÑO WEB MÓDULO II PROGRAMACIÓN CON HTML MÓDULO I GESTIÓN DE UN PROYECTO WEB CURSO TÉCNICO SUPERIOR MÓDULO I GESTIÓN DE UN PROYECTO WEB MÓDULO II PROGRAMACIÓN CON HTML 01. PLANIFICACIÓN Y DESARROLLO DE UN PROYECTO WEB 02. EL DISEÑO GRAFICO APLICADO A WEB Definicion de un sitio web Planificación de un

Más detalles

Firebug. Manual de usuario

Firebug. Manual de usuario Firebug Manual de usuario Fecha: 24/07/2008 Referencia: EJIE S.A. Mediterráneo, 3 Tel. 945 01 73 00* Fax. 945 01 73 01 01010 Vitoria-Gasteiz Posta-kutxatila / Apartado: 809 01080 Vitoria-Gasteiz www.ejie.es

Más detalles

ACCIÓN FORMATIVA FINANCIADA POR EL SERVICIO PÚBLICO DE EMPLEO ESTATAL

ACCIÓN FORMATIVA FINANCIADA POR EL SERVICIO PÚBLICO DE EMPLEO ESTATAL MF0491_3: PROGRAMACIÓN WEB EN EL ENTORNO CLIENTE. (IFCD0210: DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB) 180 HORAS PRESENCIALES Nº DE EXPEDIENTE: FC/2013/0064 ACCION 141 GRUPO 1 ACCIÓN FORMATIVA FINANCIADA

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 3 Horas Objetivo General: Construir páginas Web en base

Más detalles

Manual de Uso XML-Whois de Neubox. Manual del Sistema de XML Whois de Neubox Versión 9.12.4

Manual de Uso XML-Whois de Neubox. Manual del Sistema de XML Whois de Neubox Versión 9.12.4 Manual del Sistema de XML Whois de Neubox Versión 9.12.4 1 Índice Sección Página I. Introducción........ 3 II. Contenido del paquete............ 4 III. Instalación y uso....... 5 1. Cómo comprobar la plantilla......

Más detalles

CREIX AMB INTERNET ILLUSTRATOR: INTRODUCCIÓN AL DISEÑO VECTORIAL

CREIX AMB INTERNET ILLUSTRATOR: INTRODUCCIÓN AL DISEÑO VECTORIAL CREIX AMB INTERNET ILLUSTRATOR: INTRODUCCIÓN AL DISEÑO VECTORIAL Índice: Introducción...pág. 03 1. Entorno de Illustrator...pág:04 2. Creación de un nuevo documento...pág: 07 3. Uso de capas...pág: 10

Más detalles

HTML5 y V. Studio 2012. Sitios y aplicaciones Web con los nuevos estándares HTML5, CSS 3 y Javascript 5 manejados desde Visual Studio 2012

HTML5 y V. Studio 2012. Sitios y aplicaciones Web con los nuevos estándares HTML5, CSS 3 y Javascript 5 manejados desde Visual Studio 2012 Duración El curso tendrá una duración de 40 horas Modalidad Presencial, L - J (18:30 21:30) del 15-01-2013 al 06-02-2013 Precio 480 euros Objetivos Conocer las nuevas etiquetas HTML del estándar y sus

Más detalles

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Modalidad: Distancia, On-Line Duración: 154 horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos

Más detalles

CREACION DE PÁGINAS WEB

CREACION DE PÁGINAS WEB PRESENTA: CREACION DE PÁGINAS WEB OBJETIVO Conocer la aplicación de los paquetes mas utilizados para la implementación t diseño de una pagina Web. DIRIGIDO A: Estudiantes de informática, Ofimática y Personas

Más detalles

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 Modalidad Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 cod / EU 0518 A Distancia Duración 300 Horas Objetivos Aportar al alumno todas las competencias y conocimientos necesarios

Más detalles

DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB

DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB DENOMINACIÓN: CON TECNOLOGÍAS WEB Código: IFCD0210 Familia profesional: Informática y Comunicaciones Área profesional: Desarrollo Nivel de cualificación profesional: 3 Cualificación profesional de referencia:

Más detalles

Prólogo 3. Convenciones Tipográficas... 3 Sugerencias... 4. Introducción 5. Familiarizándose con el interfaz de SiteBuilder 6

Prólogo 3. Convenciones Tipográficas... 3 Sugerencias... 4. Introducción 5. Familiarizándose con el interfaz de SiteBuilder 6 Parallels Panel Contenidos Prólogo 3 Convenciones Tipográficas... 3 Sugerencias... 4 Introducción 5 Familiarizándose con el interfaz de SiteBuilder 6 Creación de un sitio web 8 Edición de un sitio web

Más detalles

Paso 1 de 10. Paso 2 de 10. Guía de aprendizaje de Flash CS5 Tutorial 13 - Publicación y exportación

Paso 1 de 10. Paso 2 de 10. Guía de aprendizaje de Flash CS5 Tutorial 13 - Publicación y exportación Guía de aprendizaje de Flash CS5 Tutorial 13 - Publicación y exportación Paso 1 de 10 Una vez que hemos creado una película Flash, sea una animación, un juego, un recurso educativo, etc., el último paso

Más detalles

PROGRAMA: Diseño y desarrollo Web con HTML 5,

PROGRAMA: Diseño y desarrollo Web con HTML 5, PROGRAMA: Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos para poder desarrollar un

Más detalles

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales. 1 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio

Más detalles

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite

Más detalles

Prácticas de Programación Multimedia.

Prácticas de Programación Multimedia. Prácticas de Programación Multimedia. Las prácticas de la asignatura Programación Multimedia van a consistir en el diseño de un sitio web con distintos contenidos multimedia sobre el que se irán añadiendo

Más detalles

EJERCICIOS HTML BÁSICOS

EJERCICIOS HTML BÁSICOS EJERCICIOS HTML BÁSICOS Ejercicio 1 Crear un documento HTML desde cero Crea la estructura de carpetas del sitio (carpeta raíz, carpeta de imágenes y de scripts). Dentro de la carpeta de scripts crea un

Más detalles

Elaboración de un Formulario Web utilizando ASP.NET desde cero.

Elaboración de un Formulario Web utilizando ASP.NET desde cero. Elaboración de un Formulario Web utilizando ASP.NET desde cero. Realizado por: Fabricio.A.Santillana.V. 2-718-1147 TABLA DE CONTENIDO Pág. Introducción...3 Objetivos...4 Contenido...5 1. Introducción a

Más detalles

PROGRAMA FORMATIVO. Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes

PROGRAMA FORMATIVO. Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes PROGRAMA FORMATIVO Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes Sector: Desarrollo Web Multimedia Modalidad: Distancia Duración: Objetivos: Código: 4356 Dotar

Más detalles

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML?

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML? Diseño de Sitios Web 5 (I) Qué es? Es un lenguaje descriptivo con el cual se describe la estructura del texto y todos los elementos que se muestran en la página. Es el método más usado para publicar documentos

Más detalles

HTML & Fila Zilla. Temario:

HTML & Fila Zilla. Temario: HTML & Fila Zilla Conocer la estructura de tus páginas te permite tener un control total sobre estas, sin mencionar, que también te permite modificar la apariencia de tus sitios con CSS y mejorar tu presencia

Más detalles

Capítulo 5. Implementación y Tecnologías Utilizadas

Capítulo 5. Implementación y Tecnologías Utilizadas Capítulo 5. Implementación y Tecnologías Utilizadas Cada vez más, se está utilizando Flash para desarrollar aplicaciones basadas en Web, pues permite la construcción de ambientes con mayor interacción.

Más detalles

Versión: 1.0.0. Desarrollado por AloOnline Alojamiento Web. http://www.aloonline.es. soporte@aloonline.es -1-

Versión: 1.0.0. Desarrollado por AloOnline Alojamiento Web. http://www.aloonline.es. soporte@aloonline.es -1- Versión: 1.0.0 Desarrollado por AloOnline Alojamiento Web http://www.aloonline.es soporte@aloonline.es -1- INDICE 1. Acceder al panel de WordPress... 3 2. Crear entradas en el Blog y páginas... 4 2.1.

Más detalles

HOJA DE CALCULO EXCEL NIVEL II

HOJA DE CALCULO EXCEL NIVEL II HOJA DE CALCULO EXCEL NIVEL II DURACION: 30 HORAS Los participantes al finalizar la acción formativa serán capaces de utilizar la hoja de cálculo EXCEL, adquiriendo los conocimientos teóricos y prácticos

Más detalles

Diseño Web. Temario. www.capacitaciongrafica.com

Diseño Web. Temario. www.capacitaciongrafica.com Diseño Web Temario Diseño Web Temario Objetivos: Que el alumno aprenda a Diseñar y Desarrollar sitios web informativos, dinámicos e interactivos cumpliendo con los estandares del diseño web mundial. Al

Más detalles

HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe

HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe HTML para E-mail Guía de Buenas prácticas Less ys More Ludwig Mies van der Rohe Ejemplo de un e-mail sin buenas prácticas Textos degradados Los textos están sobre un fondo degradado Newsletter Septiembre

Más detalles

PLAN DE SESIÓN. 1.1 Determina la estructura del sitio web con base en las necesidades del usuario

PLAN DE SESIÓN. 1.1 Determina la estructura del sitio web con base en las necesidades del usuario DATOS GENERALES: Nombre del Módulo: Diseño y elaboración de páginas web Sesión No. 1 Duración 2 horas 1.1 Determina la estructura del sitio web con base en las necesidades del usuario Estructura y compara

Más detalles

BASE DE DATOS ACCESS INICIACION

BASE DE DATOS ACCESS INICIACION BASE DE DATOS ACCESS INICIACION DURACION: 24 HORAS Los participantes al finalizar la acción formativa serán capaces de gestionar las bases de datos, adquiriendo los conocimientos teóricos y prácticos necesarios

Más detalles

3.4. Reload Editor ( Guía de Uso).

3.4. Reload Editor ( Guía de Uso). 3.4. Reload Editor ( Guía de Uso). Anterior 3. Lors Management Siguiente 3.4. Reload Editor ( Guía de Uso). 3.4.1. Preguntas básicas sobre Reload Editor. - Qué hace el programa Reload Editor? RELOAD Editor

Más detalles

c/ Ausias March 5, Bloque 7, 5C Denia, C.P. 03700 Alicante, España 644 317 266 info@soluciones4web.com

c/ Ausias March 5, Bloque 7, 5C Denia, C.P. 03700 Alicante, España 644 317 266 info@soluciones4web.com Manual de Buenas Prácticas de maquetación en html Una buena maquetación es fundamental para obtener un diseño elegante, compatible con todos los navegadores y que cumpla las normas de accesibilidad establecidas.

Más detalles

Widget de catálogos. Manual de Usuario. Versión 2. Madrid 13/08/2015

Widget de catálogos. Manual de Usuario. Versión 2. Madrid 13/08/2015 Widget de catálogos Manual de Usuario Madrid 13/08/2015 Versión 2 Contenidos 1 Introducción... 3 2 Alta de conjuntos de datos en datos.gob.es... 7 3 Descripción del widget... 12 3.1 Widget, versión sencilla...

Más detalles

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3 ver. 3 Diseño de cajas de esquinas redondeadas y ancho fijo para Diseño WEB _TICO 1º Bachillerato página 1/10 CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3...1 Procedimiento 1: Diseño con Gimp de una

Más detalles

Gestores de Contenidos (CMS)

Gestores de Contenidos (CMS) Joomla Gestores de Contenidos (CMS) Sistema de Gestión de Contenidos o Content Managment System (CMS) Aplicación informática para crear, editar, manejar y publicar contenidos de una forma organizada y

Más detalles

UNIDAD 2 CONFIGURACIÓN DE UN SITIO LOCAL

UNIDAD 2 CONFIGURACIÓN DE UN SITIO LOCAL UNIDAD 2 CONFIGURACIÓN DE UN SITIO LOCAL OBJETIVO El alumno aprenderá a configurar un servidor local para realizar diferentes pruebas de la página hasta publicar el sitio web en Internet. TEMARIO 2.1 INTRODUCCIÓN

Más detalles

CS3. Jorge A. Villa Saravia 2011. www.jalbertovsa.net 1

CS3. Jorge A. Villa Saravia 2011. www.jalbertovsa.net 1 DREAMWEAVER CS3 Jorge A. Villa Saravia 2011 www.jalbertovsa.net www.jalbertovsa.net 1 1. INTRODUCCIÓN A DREAMWEAVER CS 3... 2 1.1. FLUJO DE TRABAJO DE DREAMWEAVER PARA LA CREACIÓN DE SITIOS WEB... 2 1.2.

Más detalles

TEMA 9 CREACIÓN DE PÁGINAS WEB

TEMA 9 CREACIÓN DE PÁGINAS WEB TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio

Más detalles

Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015

Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015 Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015 Modalidad de realización del curso: Número de Horas: Titulación: Online 140 Horas Diploma acreditativo con las horas del curso OBJETIVOS Este

Más detalles

ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: domingo, 15 de febrero de 2009)

ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: domingo, 15 de febrero de 2009) JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO () (Última revisión: domingo, 15 de febrero de 2009) Cuando nos introducimos en el mundo de las páginas Web nuestro objetivo fundamental es poder comunicarnos

Más detalles

Lic. Mariano Pistone Front-end developer +54-261-155015062 Mendoza Argentina

Lic. Mariano Pistone Front-end developer +54-261-155015062 Mendoza Argentina Te apasiona el diseño/desarrollo web y no sabés por dónde empezar? Entonces este curso es para vos, pues está pensado para personas que no se quedan quietas, que tienen ganas de superarse y de enfrentar

Más detalles

JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: miércoles, 2 de marzo de 2011)

JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: miércoles, 2 de marzo de 2011) JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO () (Última revisión: miércoles, 2 de marzo de 2011) Cuando nos introducimos en el mundo de las páginas Web nuestro objetivo fundamental es poder comunicarnos con

Más detalles

Aplicaciones didácticas en Internet: DREAMWEAVER Bloque 2

Aplicaciones didácticas en Internet: DREAMWEAVER Bloque 2 Aplicaciones didácticas en Internet: DREAMWEAVER Bloque 2 1. Celdas y tablas, propiedades Dibujando celdas y tablas de disposición, podemos verificar las propiedades cambiando los datos en el panel que

Más detalles

Documento de actualización de contenidos del sitio web graphoscc.com

Documento de actualización de contenidos del sitio web graphoscc.com Documento de actualización de contenidos del sitio web graphoscc.com Preparado por Emiliano Rodríguez Documento de actualización de de sitio web. v3.0 para Wordpress 4.3.1 con template Divi 2.5.3 1 Índice

Más detalles

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6 Modalidad: Distancia Duración: 77 Horas Objetivos: En la actualidad Dreamweaver es uno de los principales programas utilizados por los profesionales para el diseño y maquetación de páginas web. Estos materiales

Más detalles

DISEÑO WEB (I y II) CONTENIDO TEMÁTICO

DISEÑO WEB (I y II) CONTENIDO TEMÁTICO DISEÑO WEB (I y II) CONTENIDO TEMÁTICO 1. Historia de internet 2. Introducción a las aplicaciones web 3. Estructura de un sitio web 4. Accesibilidad web a. Normas de accesibilidad del World Wide Web Consortium

Más detalles

Curso Diseño Web con Software libre, VNU

Curso Diseño Web con Software libre, VNU 1. - QUE ES VNU? NVU (se pronuncia N-view, por "new view") es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source, o sea que cualquiera está autorizado para bajarlo sin

Más detalles

DIPLOMADO Desarrollo de Aplicaciones para Web y Móviles con HTML5

DIPLOMADO Desarrollo de Aplicaciones para Web y Móviles con HTML5 Objetivos El curso de Desarrollo de Aplicaciones para Web y Móviles permite al estudiante conocer en detalle las tecnologías necesarias para crear aplicaciones de alto impacto. Además que profundizará

Más detalles

> Temario Curso de Diseño Web <

> Temario Curso de Diseño Web < le ayuda a crear hermosos diseños para sitios web y aplicaciones móviles en un instante, sin necesidad de programación. Brinda imágenes vectoriales y de mapa de bits, maquetas, gráficos 3D, y contenido

Más detalles

Manual de NVU Capítulo 5: Las hojas de estilo

Manual de NVU Capítulo 5: Las hojas de estilo Manual de NVU Capítulo 5: Las hojas de estilo Pág. 1 Manual de NVU Capítulo 5: Las hojas de estilo Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de

Más detalles

JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal.

JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal. 1 JavaScript 1.1 Qué es JavaScript? JavaScript es un lenguaje interpretado. Es idóneo para trabajar en Web, ya que son los navegadores que utilizamos los que interpretan (y por tanto ejecutan) los programas

Más detalles

Confección y publicación de páginas Web

Confección y publicación de páginas Web 2014 Confección y publicación de páginas Web Docente: Manuel Fernández Catalán 0 ÍNDICE 1 Presentación... 2 2 Objetivos... 2 3 Tecnología... 2 4 Metodología y evaluación... 3 5 Material didáctico... 3

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 10 Nombre de la práctica: Maquetación de páginas web Lugar de ejecución: Laboratorio

Más detalles

I: Formación complementaria en TI

I: Formación complementaria en TI I: Formación complementaria en TI DESARROLLO WEB - MULTIMEDIA FCDW01 Adobe Premiere Pro CS4 FCDW02 Crea tu sitio web con Joomla! FCDW03 Diseño y desarrollo web con HTML 5 y CSS2 FCDW04 DreamWeaver CS4

Más detalles

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUIA DISPONIBLE EN: http://preparadorivan.blogspot.com/ - http://preparadormssi.50webs.com/inicio.html La World Wide Web o la Web, es una de las múltiples

Más detalles

TU NEGOCIO EN INTERNET

TU NEGOCIO EN INTERNET Dr.TIC Tractament tecnològic per al teu negoci TU NEGOCIO EN INTERNET WordPress Nivel Medio LAS WEBS SON COMO UNA FÁBRICA WEB DOMINIO HTTP:// ESTRUCTURA PHP O HTML SERVIDOR FTP ESTRUCTURA INDEX.PHP CONTENIDO

Más detalles

JavaScript en HTML 5

JavaScript en HTML 5 JavaScript en HTML 5 HTML5 puede ser imaginado como un edificio soportado por tres grandes columnas: HTML, CSS y JavaScript. Ya hemos estudiado los elementos incorporados en HTML y las nuevas propiedades

Más detalles

1. Temario Curso Web Design 2014

1. Temario Curso Web Design 2014 1. Temario Curso Web Design 2014 FIREWORKS Diseño profesional de interfaces web Nociones generales para qué sirve?, diferencia con Photoshop Espacio de trabajo - Barras de menú, herramientas y paletas

Más detalles

Introducción a RIA. Andrés Pastorini. TRIA Tecnólogo Informático

Introducción a RIA. Andrés Pastorini. TRIA Tecnólogo Informático a RIA Andrés Pastorini TRIA Tecnólogo Informático El objetivo principal de la asignatura es forma al estudiante en el diseño y desarrollo de aplicaciones web ricas. Los objetivos de la asignatura son:

Más detalles

Paso 1 de 18. Paso 2 de 18. Guía de aprendizaje de Flash CS5 Tutorial 12 - Vídeo y TLF

Paso 1 de 18. Paso 2 de 18. Guía de aprendizaje de Flash CS5 Tutorial 12 - Vídeo y TLF Guía de aprendizaje de Flash CS5 Tutorial 12 - Vídeo y TLF Paso 1 de 18 En este tutorial vamos a experimentar con las nuevas posibilidades que ofrece el trabajo con vídeo en Flash y el nuevo motor de texto

Más detalles

CREIX AMB INTERNET. Crear Widgets para la web 2.0

CREIX AMB INTERNET. Crear Widgets para la web 2.0 CREIX AMB INTERNET Crear Widgets para la web 2.0 2 1. Widgets. 1.1. Qué son los Widgets. Esencialmente un widget es un conjunto de documentos HTML/CSS/JavaScript locales. Decimos locales, por que una vez

Más detalles

Creación de una página web accesible sencilla

Creación de una página web accesible sencilla Unidad 2: Las hojas de estilo en cascada Creación de una página web accesible sencilla Objetivos: -Agregar formato a la página creada, a través de una hoja de estilo. Contenidos: -Incorporación de una

Más detalles

604 wifi. Entre en www.archos.com/manuals para descargar la versión más reciente de este manual.

604 wifi. Entre en www.archos.com/manuals para descargar la versión más reciente de este manual. 604 wifi FUNCIONES WIFI e Internet Complemento del manual de usuario de ARCHOS 504/604 Versión 1.0 Entre en www.archos.com/manuals para descargar la versión más reciente de este manual. Este manual contiene

Más detalles

Guía del Lenguaje de Programación PHP - CEF NAC

Guía del Lenguaje de Programación PHP - CEF NAC 1 Índice Prefacio... 4 Qué significa y cómo funciona PHP?... 5 Como instalar PHP en nuestra computadora.... 5 Capítulos de contenidos de la Guía... 10 1. Ejemplo de un programa básico de PHP para comenzar

Más detalles

Páginas Web Barcelona

Páginas Web Barcelona Páginas Web Barcelona Requisito previo: Todos los asistentes deben de tener previo conocimiento de las plataformas Macintosh o Windows. Se prefiere que los delegados tengan una experiencia básica en HTML

Más detalles

Curso de Visual Basic 6.0 - Lección 1 Area Interactiva - www.areaint.com. www.areaint.com CURSO DE. Visual Basic 6.0 WWW.AREAINT.

Curso de Visual Basic 6.0 - Lección 1 Area Interactiva - www.areaint.com. www.areaint.com CURSO DE. Visual Basic 6.0 WWW.AREAINT. www.areaint.com CURSO DE Visual Basic 6.0 Pág. 1 LECCIÓN 1 En esta lección de introducción aprenderemos las principales características de un lenguaje de programación para crear aplicaciones bajo Windows.

Más detalles