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

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

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

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

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

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

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

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

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

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. IMÁGENES Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Existen una serie de formatos de imagen más

Más detalles

Joomla!: La web en entornos educativos. Capítulos 7 y 8

Joomla!: La web en entornos educativos. Capítulos 7 y 8 Joomla!: La web en entornos educativos Capítulos 7 y 8 Material actualizado a septiembre de 2012 Índice Índice de contenido 7. Menús...109 7.1. Introducción...109 7.2. Gestión de menús...109 7.3. Gestión

Más detalles

SIMULADOR DE SISTEMAS DE EVENTOS DISCRETOS

SIMULADOR DE SISTEMAS DE EVENTOS DISCRETOS SIMULADOR DE SISTEMAS DE EVENTOS DISCRETOS MANUAL DE USUARIO 1.1 Introducción. El simulador de sistemas de eventos discretos está compuesto por dos aplicaciones: el Simulador de redes de Petri y el Simulador

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

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

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

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

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

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

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

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

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

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose

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

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

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

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

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

Manual del Usuario de correo Webmail Consejo General de Educación INDICE

Manual del Usuario de correo Webmail Consejo General de Educación INDICE INDICE INDICE... 1 WEBMAIL... 3 QUE ES EL WEBMAIL?...3 COMO INGRESAR AL WEBMAIL?...3 1º Paso:...3 2º Paso:...4 3º Paso:...5 Bandeja de Entrada...5 De:...6 Fecha:...6 Asunto:...6 Tamaño:...6 CÓMO ESCRIBIR

Más detalles

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver

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

Cómo empezar? Cyclope 2.0

Cómo empezar? Cyclope 2.0 Cómo empezar? Cyclope 2.0 Luego de ingresar a Cyclope 2.0 con tu usuario, contraseña y nombre de dominio, aparece un listado de las diferentes funcionalidades que ofrece el sistema. Para comenzar, las

Más detalles

C.F.G.S. DESARROLLO DE APLICACIONES INFORMÁTICAS. MÓDULO: Diseño y realización de servicios de presentación en entornos gráficos.

C.F.G.S. DESARROLLO DE APLICACIONES INFORMÁTICAS. MÓDULO: Diseño y realización de servicios de presentación en entornos gráficos. C.F.G.S. DESARROLLO DE APLICACIONES INFORMÁTICAS MÓDULO: Diseño y realización de servicios de presentación en entornos gráficos Unidad 1 Introducción Visual Basic.NET El objetivo de la unidad es conocer

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

MANUAL DE USUARIO SEGUIMIENTO DE TÍTULOS OFICIALES. 5 de febrero de 2010

MANUAL DE USUARIO SEGUIMIENTO DE TÍTULOS OFICIALES. 5 de febrero de 2010 MANUAL DE USUARIO SEGUIMIENTO DE TÍTULOS OFICIALES 5 de febrero de 2010 INDICE 1. CONFIGURACION DEL IDIOMA EN INTERNET EXPLORER... 3 2. GESTIÓN DE USUARIOS... 5 2.1. Modificaciones de las propiedades del

Más detalles

Tucan Manager. Guía de usuario

Tucan Manager. Guía de usuario Tucan Manager Guía de usuario Índice 1. Qué es Tucan? 2 2. Recursos 3 3. Instalación 5 3.1. MS Windows................................. 5 3.2. Código fuente................................. 8 4. Ejecutando

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

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

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

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

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

SISTEMA DE CONTROL DE PRESENCIA

SISTEMA DE CONTROL DE PRESENCIA SISTEMA DE CONTROL DE PRESENCIA 1 SISTEMA DE CONTROL DE PRESENCIA 1 1 GENERALIDADES DE LA APLICACIÓN 3 2 SEGURIDAD Y ACCESO AL PROGRAMA 7 2.1 Mantenimiento de usuarios 7 2.2 Perfiles 9 3 GESTIÓN DE EMPRESAS

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

Bloque 2 EL AULA MOODLE DESDE EL PUNTO DE VISTA DEL ALUMNO(I) Utilidades básicas y acceso a recursos de aprendizaje

Bloque 2 EL AULA MOODLE DESDE EL PUNTO DE VISTA DEL ALUMNO(I) Utilidades básicas y acceso a recursos de aprendizaje EL AULA MOODLE DESDE EL PUNTO DE VISTA DEL ALUMNO(I) Utilidades básicas y acceso a recursos de aprendizaje Cuando un alumno entra en su aula moodle, dispone de unas utilidades básicas, definidas por la

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

Tutorial de Moodle. Actividad Cuestionario

Tutorial de Moodle. Actividad Cuestionario Tutorial de Moodle Actividad Cuestionario Cuestionario Para qué sirve? El Cuestionario es una actividad autoevaluable, en la cual la nota se calcula automáticamente. Sirve al alumno como autoevaluación

Más detalles

Guadalinex Básico Impress

Guadalinex Básico Impress 1 IMPRESS: Editor de Presentaciones Impress es un programa con el que podemos crear diapositivas, transparencias y presentaciones con una variada gama de efectos sin demasiadas complicaciones. Objetivos:

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

Manual básico de utilización de Windows

Manual básico de utilización de Windows Manual básico de utilización de Windows INDICE 1. El escritorio de Windows 2. Ver icono Mi PC en el escritorio 3. Mi PC 4. Crear carpetas y accesos directos 5. Buscar archivos en el PC 6. Papelera de reciclaje

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

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

Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.

Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas. Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números

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

TIC s Módulo introductorio

TIC s Módulo introductorio TIC s Módulo introductorio PDF Portable Document Format o Formato de documento portable El PDF de las siglas en inglés Portable Document Format, en español Formato de documento portable, es un formato

Más detalles

Mini Curso Excel 1. HOJAS DE CÁLCULO

Mini Curso Excel 1. HOJAS DE CÁLCULO Mini Curso Excel El siguiente documento ha sido tomado con permiso desde GuillermoDiaz.com y adaptado para ser utilizado con Microsoft Excel 2003 y en coherencia con los contenidos expuestos en el laboratorio.

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

Manual de Formulario. www.sagasoluciones.com info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75

Manual de Formulario. www.sagasoluciones.com info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75 Manual de Formulario info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75 MANUAL DE FORMULARIO CONTROL DEL DOCUMENTOS Realizado (21/01/2010) Inmaculada Peña Ruiz Técnico Revisado

Más detalles

Taller 1. Creación una Página Web Personal

Taller 1. Creación una Página Web Personal Taller 1 Creación una Página Web Personal El objetivo de este taller es comenzar a trabajar los elementos básicos utilizados en HTML como imágenes, hipervínculos (links), listas, tablas, para crear una

Más detalles

LOS ELEMENTOS DE UN ESPACIO WEB:

LOS ELEMENTOS DE UN ESPACIO WEB: Ardora permite al docente crear un lugar en el que integrar y organizar cualquiera de las distintas páginas o grupo de páginas que crea el programa: actividades interactivas, paquetes de actividades, páginas

Más detalles

Dreamweaver CS5 Full. 01. Conociendo Adobe Dreamweaver CS5. 02. Creación de sitios y páginas Web

Dreamweaver CS5 Full. 01. Conociendo Adobe Dreamweaver CS5. 02. Creación de sitios y páginas Web 01. Conociendo Adobe Dreamweaver CS5 01.1. Introducción a Adobe Dreamweaver 01.2. Novedades de Dreamweaver CS5 01.3. Requerimientos técnicos 01.4. Editar páginas Web 01.5. Cómo tener una página en Internet

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

Módulo I - PowerPoint

Módulo I - PowerPoint Módulo I - PowerPoint Índice Conociendo la aplicación de PowerPoint... 2 Iniciando la aplicación de PowerPoint... 3 Abriendo una presentación existente... 4 Conociendo las partes del área de trabajo de

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

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

Tutorial 1 Mapas Mentales con Mindomo

Tutorial 1 Mapas Mentales con Mindomo Tutorial 1 Mapas Mentales con Mindomo Instalación y acceso online...2 Comenzando el mapa...3 Temas o categorías principales...4 Generación de subtemas...5 Grabación del mapa mental...6 Formateo del mapa...6

Más detalles

Curso POWERPOINT 97. Introducción

Curso POWERPOINT 97. Introducción Curso POWERPOINT 97 Introducción El curso PowerPoint 97 está destinado a aquellos alumnos que necesiten crear presentaciones que informen de la evolución de un proyecto. PowerPoint es un programa de edición

Más detalles

Uso de Visual C++ Pre-Practica No. 3

Uso de Visual C++ Pre-Practica No. 3 Pre-Practica No. 3 Uso de Visual C++ Microsoft Visual C++ 2010 es una versión de Visual Studio específica para el lenguaje de programación C++. Es un entorno de desarrollo muy completo y profesional. Por

Más detalles

Manual básico de administración de Joomla

Manual básico de administración de Joomla Manual básico de administración de Joomla INDICE ADMINISTRACIÓN DEL SITIO Ingresando al administrador Editar algún documento ya creado Crear documento nuevo Administrar menú Editar enlace existente Crear

Más detalles

MANUAL EASYWEB CORPORATIVA

MANUAL EASYWEB CORPORATIVA MANUAL EASYWEB CORPORATIVA - 1 - ÍNDICE Vision general...pag. 3 Utilidades...pag. 9 Subir imágenes...pag. 6 Compositor de imágenes...pag. 10 Configurador de la web...pag. 11 Listados de contenidos...pag.

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

GUÍA DEL USUARIO DE SOFTWARE

GUÍA DEL USUARIO DE SOFTWARE GUÍA DEL USUARIO DE SOFTWARE Serie RJ El contenido de esta guía y las especificaciones de este producto pueden cambiar sin notificación. Brother se reserva el derecho de modificar sin previo aviso las

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

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

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

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

DreamWeaver. CS5 y CS6. Cursosindustriales. Curso de DreamWeaver CS6 1

DreamWeaver. CS5 y CS6. Cursosindustriales. Curso de DreamWeaver CS6 1 DreamWeaver CS5 y CS6 Cursosindustriales. Curso de DreamWeaver CS6 1 DREAMWEAVER CS5. ENTORNO DE DESARROLLO. Dreamweaver es una aplicación propietario que facilita la labor del desarrollador Web y le permite

Más detalles

Microsoft Access. Microsoft Access es una herramienta de Microsoft para la definición y manipulación de bases de datos.

Microsoft Access. Microsoft Access es una herramienta de Microsoft para la definición y manipulación de bases de datos. Prácticas de Introducción al uso de Computadores Curso 2001-2002 1 Microsoft Access Introducción Microsoft Access es una herramienta de Microsoft para la definición y manipulación de bases de datos. Una

Más detalles

Tutorial de Wordpress para Editores de Sitios. Autora: Aylín Alvarez Martínez Dpto. Web

Tutorial de Wordpress para Editores de Sitios. Autora: Aylín Alvarez Martínez Dpto. Web Tutorial de Wordpress para Editores de Sitios Autora: Aylín Alvarez Martínez Dpto. Web 2011 ÍNDICE Blog -----------------------------------------------------------------------------------------------------------

Más detalles

La ventana de Microsoft Excel

La ventana de Microsoft Excel Actividad N 1 Conceptos básicos de Planilla de Cálculo La ventana del Microsoft Excel y sus partes. Movimiento del cursor. Tipos de datos. Metodología de trabajo con planillas. La ventana de Microsoft

Más detalles

Bootstrap: Introducción práctico en el Diseño Web

Bootstrap: Introducción práctico en el Diseño Web Bootstrap: Introducción práctico en el Diseño Web Originalmente creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web

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

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0 Manual de gestión de contenidos web en entorno Drupal Versión sitio maestro para servicios 1.0 Contenido Gestión de contenidos... 5 Crear contenidos... 5 Tipos de contenido... 5 Página básica o basic

Más detalles

Tablas de datos... 4. Insertar tablas rápidas basadas en plantillas... 4. Insertar tabla... 4 ... 5. Eliminar una tabla y su contenido...

Tablas de datos... 4. Insertar tablas rápidas basadas en plantillas... 4. Insertar tabla... 4 ... 5. Eliminar una tabla y su contenido... Contenido Tablas de datos... 4 Insertar tablas rápidas basadas en plantillas... 4 Insertar tabla... 4... 5 Eliminar una tabla y su contenido... 5 Borrar el contenido de una tabla... 5 Convertir tabla en

Más detalles

Curso XHTML/HTML/HTML5. Curso XHTML/HTML/HTML5

Curso XHTML/HTML/HTML5. Curso XHTML/HTML/HTML5 Curso XHTML/HTML/HTML5 Curso XHTML/HTML/HTML5 Página Web del curso Pagina del curso www.bbsoftpy.net/cursohtml2013 Repaso Clase Anterior Curso XHTML/HTML/HTML5-2013 Listas Curso XHTML/HTML/HTML5-2013 Listas

Más detalles

Efectos con JavaScript y jquery Validación de formulario

Efectos con JavaScript y jquery Validación de formulario Efectos con JavaScript y jquery Validación de formulario Los 5 campos del formulario son obligatorios y la validación consiste en exigir que ninguno de los 5 campos pueda estar en blanco. Para esto se

Más detalles

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar

Más detalles

Guía del usuario. Guía del usuario - Wordpress

Guía del usuario. Guía del usuario - Wordpress Guía del usuario Guía del usuario - Wordpress 1. Qué es Wordpress? Pag.3 1. 1 Cómo acceder al Escritorio Wordpress? Pag.4 1. 2 Elementos destacables del Panel de Control Pag.5 1. 3 Secciones del Escritorio

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

CURSO DE PROGRAMACIÓN PHP MySQL

CURSO DE PROGRAMACIÓN PHP MySQL CURSO DE PROGRAMACIÓN PHP MySQL MASTER EN PHP MÓDULO NIVEL BASICO PRIMER MES Aprende a crear Sitios Web Dinámicos con PHP y MySQL 1. Introducción Qué es PHP? Historia Por qué PHP? Temas de instalación

Más detalles

Moodle para administradores de centro. Administradores de centro

Moodle para administradores de centro. Administradores de centro Moodle para administradores de centro Administradores de centro INDICE 1. Acercamiento a la plataforma 2. Hojear lista de usuarios 3. Acciones masivas de usuario 4. Agregar usuario 5. Subir usuario 6.

Más detalles

El Entorno Integrado de Desarrollo Dev-C++ (Ayuda básica para las primeras sesiones de prácticas)

El Entorno Integrado de Desarrollo Dev-C++ (Ayuda básica para las primeras sesiones de prácticas) El Entorno Integrado de Desarrollo Dev-C++ (Ayuda básica para las primeras sesiones de prácticas) Sobre Dev-C++ Dev-C++ es un Entorno Integrado de Desarrollo para el lenguaje de programación C/C++ que

Más detalles

Introducción a los controles más usuales de Visual Basic 6.0

Introducción a los controles más usuales de Visual Basic 6.0 Introducción a los controles más usuales de 3.1 Los controles más usuales en Los controles más usuales son aquellos que usamos con mayor frecuencia al momento de crear una aplicación. Estos controles son

Más detalles

En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas.

En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas. 1 de 18 Inicio Qué es un foro En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas. En el campus virtual, el foro es una herramienta

Más detalles

Ahora, que pasa si tengo en un directorio 200 fotos en formato BMP y quiero elegir, mientras las voy viendo en pantalla, cuáles convertir...

Ahora, que pasa si tengo en un directorio 200 fotos en formato BMP y quiero elegir, mientras las voy viendo en pantalla, cuáles convertir... Prof. Mileti, P. Programando un front-end con Gambas Gambas es un excelente lenguaje y permite, entre tantas otras cosas, reutilizar aplicaciones de consola. A lo largo de este artículo veremos como programar

Más detalles

PASOS PARA CREAR UNA PÁGINA WEB

PASOS PARA CREAR UNA PÁGINA WEB http://www.rafatux.com PASOS PARA CREAR UNA PÁGINA WEB Con éste documento trato de orientar de una forma genérica los distintos pasos que deben de realizarse para crear una página web. PRIMER PASO: Estructura

Más detalles

Manual de usuario de Windows Live Writer

Manual de usuario de Windows Live Writer Manual de usuario de Windows Live Writer Índice 0.- Introducción. 3 1.- Descarga e Instalación. 4 2.- Conexión a un blog. 7 3.- Interfaz de Windows Live Writer. 12 4.- Creación de un Post. 13 5.- Creación

Más detalles

MANUAL DE USUARIO. Versión: 1.0.0. Desarrollado por AloOnline Alojamiento Web. http://www.aloonline.es. soporte@aloonline.es

MANUAL DE USUARIO. Versión: 1.0.0. Desarrollado por AloOnline Alojamiento Web. http://www.aloonline.es. soporte@aloonline.es MANUAL DE USUARIO Versión: 1.0.0 Desarrollado por AloOnline Alojamiento Web http://www.aloonline.es soporte@aloonline.es 1 ÍNDICE 1. ACCEDER AL PANEL DE PRESTASHOP. 3 2. ADMINISTRAR CATEGORÍAS: 4 2.1.Crear

Más detalles

DIRECCIÓN DE SISTEMAS DE INFORMACIÓN DEPARTAMENTO CERES

DIRECCIÓN DE SISTEMAS DE INFORMACIÓN DEPARTAMENTO CERES DIRECCIÓN DE SISTEMAS DE INFORMACIÓN DEPARTAMENTO CERES SERVICIO DE NOTIFICACIONES ELECTRÓNICAS Y DIRECCIÓN ELECTRÓNICA HABILITADA MANUAL DE CONFIGURACIÓN PARA SISTEMAS WINDOWS NOMBRE FECHA Elaborado por:

Más detalles

DATOS ESPECÍFICOS DEL CURSO

DATOS ESPECÍFICOS DEL CURSO DATOS ESPECÍFICOS DEL CURSO 14. Denominación del módulo: LA ESTRUCTURA DEL INTERFAZ Y LOS ELEMENTOS DE DISEÑO WEB Y MULTIMEDIA. 15. Objetivo del módulo: Diseñar la estructura del interfaz, identificando

Más detalles