Introducción a HTML5. Qué es HTML5? Características que aporta HTML5. Etiquetas semánticas 2
|
|
|
- María Jesús de la Fuente Aguirre
- hace 8 años
- Vistas:
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" " <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 " background-image: /* resultado */ background-image: url(" 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 */.error(@borderwidth: 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
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
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
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
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
Manual de operación Tausend Monitor
Manual de operación Tausend Monitor Luego de haber realizado satisfactoriamente el proceso de instalación, al iniciar el programa le aparecerá la siguiente ventana: El usuario principal y con el primero
AGREGAR UN EQUIPO A UNA RED Y COMPARTIR ARCHIVOS CON WINDOWS 7
Tutoriales de ayuda e información para todos los niveles AGREGAR UN EQUIPO A UNA RED Y COMPARTIR ARCHIVOS CON WINDOWS 7 Como agregar a una red existente un equipo con Windows 7 y compartir sus archivos
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
Manual de uso de la plataforma para monitores. CENTRO DE APOYO TECNOLÓGICO A EMPRENDEDORES -bilib
Manual de uso de la plataforma para monitores CENTRO DE APOYO TECNOLÓGICO A EMPRENDEDORES -bilib [Manual de uso de la plataforma para monitores] 1. Licencia Autor del documento: Centro de Apoyo Tecnológico
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
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
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
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
Plataforma e-ducativa Aragonesa. Manual de Administración. Bitácora
Plataforma e-ducativa Aragonesa Manual de Administración Bitácora ÍNDICE Acceso a la administración de la Bitácora...3 Interfaz Gráfica...3 Publicaciones...4 Cómo Agregar una Publicación...4 Cómo Modificar
Capítulo 1 Documentos HTML5
Capítulo 1 Documentos HTML5 1.1 Componentes básicos HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs
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
Manual para usuarios USO DE ONEDRIVE. Universidad Central del Este
Manual para usuarios USO DE ONEDRIVE Universidad Central del Este Contenido 1. QUÉ ES Y PARA QUÉ SIRVE OFFICE 365?... 3 1.1 CÓMO ENTRAR A LA PLATAFORMA DE OFFICE 365 DE LA UCE?... 3 ONEDRIVE... 5 2. QUÉ
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
GUÍA PARA LA INSTALACIÓN Y USO DE WORDPRESS BY MASTERHACKS. www.masterhacks.net. Guía de instalación y uso de Wordpress Página 1
GUÍA PARA LA INSTALACIÓN Y USO DE WORDPRESS BY MASTERHACKS www.masterhacks.net Guía de instalación y uso de Wordpress Página 1 Wordpress es un sistema muy utilizado para la creación de blogs. Este se puede
Programa diseñado y creado por 2014 - Art-Tronic Promotora Audiovisual, S.L.
Manual de Usuario Programa diseñado y creado por Contenido 1. Acceso al programa... 3 2. Opciones del programa... 3 3. Inicio... 4 4. Empresa... 4 4.2. Impuestos... 5 4.3. Series de facturación... 5 4.4.
Curso de PHP con MySQL Gratis
Curso de PHP con MySQL Gratis Introducción Este mini curso o mini tutorial de PHP le ayudará a realizar cualquier sistema para que pueda insertar uno o varios registros a una base de datos con MySQL, este
CONCEPTOS BASICOS. Febrero 2003 Página - 1/10
CONCEPTOS BASICOS Febrero 2003 Página - 1/10 EL ESCRITORIO DE WINDOWS Se conoce como escritorio la zona habitual de trabajo con windows, cuando iniciamos windows entramos directamente dentro del escritorio,
COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER
2011 2012 COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER WWW.FAUBELL.COM vicente@faubell.com Hasta ahora hemos visto una pequeña introducción a la creación de las páginas web. No te preocupes por
Proceso de cifrado. La fortaleza de los algoritmos es que son públicos, es decir, se conocen todas las transformaciones que se aplican al documento
Qué es AT-Encrypt nos permitirá dotar de contraseña a cualquier documento o carpeta. Este documento o carpeta sólo será legible por aquel que conozca la contraseña El funcionamiento del cifrado (o encriptación)
Manual hosting acens
Manual hosting acens Contenido Acceso al panel de control de cliente... 3 Asociar un dominio a mi Hosting... 5 Acceso al panel de administración del hosting... 7 INICIO - Visión general del estado de nuestro
Guía de uso del Cloud Datacenter de acens
guíasdeuso Guía de uso del Cloud Datacenter de Calle San Rafael, 14 28108 Alcobendas (Madrid) 902 90 10 20 www..com Introducción Un Data Center o centro de datos físico es un espacio utilizado para alojar
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
Operación Microsoft Access 97
Trabajar con Controles Características de los controles Un control es un objeto gráfico, como por ejemplo un cuadro de texto, un botón de comando o un rectángulo que se coloca en un formulario o informe
Creación y administración de grupos de dominio
Creación y administración de grupos de dominio Contenido Descripción general 1 a los grupos de Windows 2000 2 Tipos y ámbitos de los grupos 5 Grupos integrados y predefinidos en un dominio 7 Estrategia
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
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
Guía de uso del sistema CV-Online
Guía de uso del sistema CV-Online 1.- Registro. a.- Pasos para completar el formulario. 2.- Ingreso al sistema. a.- Olvidó su Usuario o contraseña? b.- Consulta. c.- Crear nueva cuenta. 3.- Administrador
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
MACROS. Automatizar tareas a través del uso de las macros.
OBJETIVOS MACROS Definiciones Automatizar tareas a través del uso de las macros. Grabar Ejecutar Manipular macros. Tipos de Macros en Excel Introducción Las operaciones tradicionales que se pueden realizar
Tutorial de herramientas de Google
Tutorial de herramientas de Google Elizabeth Fons y Maximiliano Geier 1. Introducción En este tutorial les vamos a contar cómo utilizar algunas de las herramientas de trabajo colaborativo que ofrece gratuitamente
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
PLANTILLAS DE DOCUMENTOS EN WORD 2007
1 PLANTILLAS DE DOCUMENTOS EN WORD 2007 Introducción Una plantilla es un modelo o patrón para crear nuevos documentos. En una plantilla se guarda internamente el formato utilizado, es decir, el estilo
Crear la base de datos antes de la instalación de Wordpress.
Introducción En este tutorial básico sobre instalar Wordpress en tu propio hosting mediante un panel de control cpanel y aprenderás como personalizar las bases de datos MySQL que utiliza Wordpress. Para
Diseño de páginas web
Diseño de páginas web Capas. Objetos en movimiento Ricardo Esteban Alonso Creación de capas en la página web Las capas son rectángulos transparentes, donde podemos insertar datos y hacer que éstos aparezcan
Apuntes de ACCESS. Apuntes de Access. Campos de Búsqueda:
Apuntes de ACCESS Campos de Búsqueda: Los campos de búsqueda permiten seleccionar el valor de un campo de una lista desplegable en lugar de tener que escribirlos. El usuario sólo tiene que elegir un valor
... Formas alternativas de escribir un texto. Columnas. anfora CAPÍTULO 4
CAPÍTULO 4. Formas alternativas de escribir un texto........ Columnas Para fijar columnas se posiciona el Punto de Inserción donde se desee que comiencen las columnas, o bien se selecciona el texto que
INSTALACIÓN DE MEDPRO
1 Estimado Cliente: Uno de los objetivos que nos hemos marcado con nuestra nueva plataforma de gestión, es que un cliente pueda instalar MedPro y realizar su puesta en marcha de forma autónoma. Siga paso
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
UNIVERSIDAD DE MEDELLÍN NUEVO PORTAL WEB MANUAL DE USUARIO GESTOR DE CONTENIDOS
UNIVERSIDAD DE MEDELLÍN MANUAL DE USUARIO GESTOR DE CONTENIDOS NUEVO PORTAL WEB TABLA DE CONTENIDO Tabla de Contenido 2 Consideraciones Iniciales 3 Ingreso al Sistema 4 Opciones de Gestor de contenidos
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
DOCUMENTOS COMPARTIDOS CON GOOGLE DOCS
DOCUMENTOS COMPARTIDOS CON GOOGLE DOCS 1. Introducción Los ambientes de aprendizaje acompañados de trabajos colaborativos como estrategia se revierten en actividades de diferente índole (análisis de videos,
Módulo I - Word. Iniciar Word... 2. Finalizar Word... 3. Definición de elementos de pantalla... 4. Escribir texto en un documento... 5. El cursor...
Módulo I - Word Índice Iniciar Word... 2 Finalizar Word... 3 Definición de elementos de pantalla... 4 Escribir texto en un documento... 5 El cursor... 5 Control de párrafos... 5 Nuevos párrafos... 5 Abrir
Manual para la utilización de PrestaShop
Manual para la utilización de PrestaShop En este manual mostraremos de forma sencilla y práctica la utilización del Gestor de su Tienda Online mediante Prestashop 1.6, explicaremos todo lo necesario para
TPV Táctil. Configuración y Uso. Rev. 1.2 21/01/09
Configuración y Uso Rev. 1.2 21/01/09 Rev. 2.0 20100616 1.- Ruta de Acceso a Imágenes. 2.- Estructuración de los Artículos. 3.- Creación de Grupos de Familias. 4.- Creación de Familias de Ventas. 5.- Creación
Administración de portales Joomla (II) antonio.duran.terres@gmail.com
Administración de portales Joomla (II) antonio.duran.terres@gmail.com Módulos Con la instalación base de Joomla vienen varios módulos Algunos ya los vimos, como encuestas o Quien está en línea? Hay otros
PLANTILLAS EN MICROSOFT WORD
PLANTILLAS EN MICROSOFT WORD Una plantilla es un modelo o patrón para crear nuevos documentos. En una plantilla se guarda internamente el formato utilizado, es decir, el estilo de la fuente, el tamaño,
TEMA 4: EMPEZANDO A NAVEGAR ESCUELA UNIVERSITARIA DE INFORMÁTICA. Raúl Martín Martín
TEMA 4: EMPEZANDO A ESCUELA UNIVERSITARIA DE INFORMÁTICA NAVEGAR Raúl Martín Martín SERVICIOS DE INTERNET SERVICIOS DE INTERNET Las posibilidades que ofrece Internet se denominan servicios. Hoy en día,
MANUAL COPIAS DE SEGURIDAD
MANUAL COPIAS DE SEGURIDAD Índice de contenido Ventajas del nuevo sistema de copia de seguridad...2 Actualización de la configuración...2 Pantalla de configuración...3 Configuración de las rutas...4 Carpeta
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
La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente.
PLANTILLAS EN PHP El concepto de plantilla, es un criterio del desarrollo web que propone optimizar la cantidad de documentos HTML que se usan en el desarrollo de un sitio web. A lo largo de la navegación
CÓMO CREAR NUESTRO CATÁLOGO
CÓMO CREAR NUESTRO CATÁLOGO Mediante la aplicación (http://www.prensasoft.com/programas/conline) podemos crear nuestros propios catálogos. Para crear un catálogo necesitamos: - Varios productos que mostrar,
2_trabajar con calc I
Al igual que en las Tablas vistas en el procesador de texto, la interseccción de una columna y una fila se denomina Celda. Dentro de una celda, podemos encontrar diferentes tipos de datos: textos, números,
Microsoft Access proporciona dos métodos para crear una Base de datos.
Operaciones básicas con Base de datos Crear una Base de datos Microsoft Access proporciona dos métodos para crear una Base de datos. Se puede crear una base de datos en blanco y agregarle más tarde las
19 4.1.1.0 4 04/05/2009
Soluciones Informáticas Descripción: Como utilizar la Agenda de Visitas Objetivos: Al finalizar este tutorial el usuario será capaz de utilizar la Agenda de Visitas con sus diferentes opciones: asignar
Instalar y configurar W3 Total Cache
Instalar y configurar W3 Total Cache en WordPress Cardenal Gardoki, 1 48008 BILBAO (Vizcaya) Teléfono: 902 012 199 www.hostalia.com La velocidad de carga de una web influye mucho a la hora de mejorar el
para jóvenes programadores
Manual de Kompozer para jóvenes programadores Por Angel Pablo Hinojosa Gutiérrez Para la Oficina de Software Libre de la Universidad de Granada Copyright 2010: Angel Pablo Hinojosa Gutiérrez El Manual
Capítulo 9. Archivos de sintaxis
Capítulo 9 Archivos de sintaxis El SPSS permite generar y editar archivos de texto con sintaxis SPSS, es decir, archivos de texto con instrucciones de programación en un lenguaje propio del SPSS. Esta
Instrucciones de instalación de TrueCode
Gracias por su compra y las instrucciones que le guiara a través del proceso de instalación y puesta en marcha de su nuevo software. Se recomienda la lectura y las discusiones de los usuarios por favor
Nuevo diseño de Google Apps Gmail, Calendar, Docs y Sites 28/11/11
Nuevo diseño de Google Apps Gmail, Calendar, Docs y Sites 28/11/11 Te damos la bienvenida al nuevo diseño de Google Apps Motivos del cambio: Ofrecer un diseño uniforme en todas las aplicaciones de Google
BASES DE DATOS - Microsoft ACCESS 2007-
BASES DE DATOS - Microsoft ACCESS 2007- Una base de datos es un archivo estructurado de datos que nos permite almacenarlos, modificarlos, ordenarlos, generar informes etc., de manera rápida. Un listín
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
Tutorial básico. Apunte creado por imedia Creativa www.imediacreativa.com
Tutorial básico Apunte creado por imedia Creativa www.imediacreativa.com Introducción Joomla CMS Su sitio Web está creado bajo un Sistema de gestión de contenidos CMS (Content Management Systems) Joomla.
GVisualPDA Módulo de Almacén
GVisualPDA Módulo de Almacén GVisualPDA es una aplicación para Windows Mobile 5/6 que amplía más aún las posibilidades de integración del software de gestión GVisualRec permitiendo estar conectados en
Creando una webquests
Creando una webquests 1. LO PRIMERO EL PROGRAMA Para crear paginas web necesitamos el software apropiado. Hay muchas formas y programas para hacerlo, pero por su facilidad de uso y por ser software libre
REDES DE ÁREA LOCAL. APLICACIONES Y SERVICIOS EN WINDOWS
REDES DE ÁREA LOCAL. APLICACIONES Y SERVICIOS EN WINDOWS Servicio DNS - 1 - Servicio DNS...- 3 - Definición... - 3 - Instalación... - 5 - Configuración del Servidor DNS...- 10 - - 2 - Servicio DNS Definición
MANUAL DE USUARIO DE LA APLICACIÓN DE ACREDITACION DE ACTIVIDADES DE FORMACION CONTINUADA. Perfil Entidad Proveedora
MANUAL DE USUARIO DE LA APLICACIÓN DE ACREDITACION DE ACTIVIDADES DE FORMACION CONTINUADA Perfil Entidad Proveedora El objetivo del módulo de Gestión de Solicitudes vía Internet es facilitar el trabajo
UNIDAD DIDÁCTICA Nº 7 USO DE LOS RECURSOS EN MOODLE
PROGRAMA: TUTORÍA VIRTUAL EN AMBIENTES DE APRENDIZAJE UNIDAD DIDÁCTICA Nº 7 USO DE LOS RECURSOS EN MOODLE 1 USO DE LOS RECURSOS EN MOODLE 1. Tipos de Recursos 2. Editar Páginas de Texto o Web 3. Enlazar
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:
Base de datos en Excel
Base de datos en Excel Una base datos es un conjunto de información que ha sido organizado bajo un mismo contexto y se encuentra almacenada y lista para ser utilizada en cualquier momento. Las bases de
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS 1) EL PEQUEÑO EDITOR El Bloc de notas de Windows XP es un básico editor de texto con el que podemos escribir anotaciones, de hasta 1024 caracteres por línea y
CUADERNIA 2.0. CÓMO INSTALAR CUADERNIA 2.0 Para instalar Cuadernia debemos seguir los siguientes pasos:
CUADERNIA 2.0 Se trata de una herramienta fácil y funcional que nos permite crear de forma dinámica ebooks o libros digitales en forma de cuadernos compuestos por contenidos multimedia y actividades educativas
La compresión de Flash ayudará a que la presentación pese menos Los dibujos se comprimen de manera vectorial para no perder calidad
Tutoriial de iispriing Free Bienvenidos al tutorial de ispring Free, este tutorial trata acerca de cómo podemos transformar nuestras presentaciones de Power Point a Presentaciones Flash, para mejor efecto
Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE
. Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE El entorno de trabajo La página tiene como base una plantilla
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
WINDOWS 2008 5: TERMINAL SERVER
WINDOWS 2008 5: TERMINAL SERVER 1.- INTRODUCCION: Terminal Server proporciona una interfaz de usuario gráfica de Windows a equipos remotos a través de conexiones en una red local o a través de Internet.
Tutorial: Primeros Pasos con Subversion
Tutorial: Primeros Pasos con Subversion Introducción Subversion es un sistema de control de versiones open source. Corre en distintos sistemas operativos y su principal interfaz con el usuario es a través
ENTORNO DE DESARROLLO MICROSOFT.NET 2010
ENTORNO DE DESARROLLO MICROSOFT.NET 2010 UNIDAD 2 Estructura de contenidos: 1. Conociendo ASP 2. Sitio Web y Proyecto Web 3. WebForm 4. Características de los webforms 5. Entorno del.net 6. Controles básicos
Manual CMS Mobincube
Manual CMS Mobincube CMS Mobincube Qué es? El CMS (Sistema de Gestión de Contenidos) es un completo website que permite la creación y actualización de contenido remoto. De esta forma, una vez creada una
Manual de usuario. Autor: Oriol Borrás Gené. Oriol.borras@upm.es
Manual de usuario Autor: Oriol Borrás Gené Oriol.borras@upm.es Índice 1. Qué es Pinterest 2. Crear una cuenta 3. Entorno o Inicio o Estructura de un pin o Perfiles 4. Cómo trabajar con Pinterest o Crear
Cómo sabes si tus esfuerzos en Social Media te están dando resultados? Para eso hay que medir, y Google Analytics ha venido a ayudarnos.
Cómo sabes si tus esfuerzos en Social Media te están dando resultados? Para eso hay que medir, y Google Analytics ha venido a ayudarnos. Hoy en día, las piedras angulares de los negocios son las páginas
Tutorial DC++ Usarlo es muy sencillo y configurarlo también, aunque tiene algunos trucos importentes.
Tutorial DC++ Para compartir, lo mejor es usar el DC++, que es un programa de intercambio P2P (como el emule) pero optimizado para usarlo en redes locales. Usarlo es muy sencillo y configurarlo también,
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.
App para realizar consultas al Sistema de Información Estadística de Castilla y León
App para realizar consultas al Sistema de Información Estadística de Castilla y León Jesús M. Rodríguez Rodríguez rodrodje@jcyl.es Dirección General de Presupuestos y Estadística Consejería de Hacienda
Edición de Ofertas Excel Manual de Usuario
Edición de Ofertas Excel Manual de Usuario Alfonso XI, 6 28014 Madrid F(+34) 91 524 03 96 www.omie.es Ref. MU_OfertasExcel.docx Versión 4.0 Fecha: 2012-11-26 ÍNDICE 1 INTRODUCCIÓN 3 2 CONSIDERACIONES DE
Accede a su DISCO Virtual del mismo modo como lo Hace a su disco duro, a través de:
Gemelo Backup Online DESKTOP Manual DISCO VIRTUAL Es un Disco que se encuentra en su PC junto a las unidades de discos locales. La información aquí existente es la misma que usted ha respaldado con su
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
01 Índice. GESTOR DE CONTENIDOS Manual de uso 01 ÍNDICE... 1 02 OBJETO DEL DOCUMENTO... 2 03 ESTRUCTURA GRÁFICA DEL SISTEMA... 3
01 Índice 01 ÍNDICE..... 1 02 OBJETO DEL DOCUMENTO..... 2 03 ESTRUCTURA GRÁFICA DEL SISTEMA..... 3 04 GESTIÓN DE TABLAS..... 5 05 USO DE TABLAS EN ENVIDUR..... 15 06 GESTIÓN DE FUNCIONALIDAD ADICIONAL.
Módulo II - PowerPoint
Módulo II - PowerPoint Índice Copiando diapositivas Menú Edición... 2 Copiando diapositivas utilizando la barra de herramientas... 3 Copiando diapositivas utilizando el menú contextual... 3 Copiando diapositivas
La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.
Microsoft Word Microsoft Word es actualmente (2009) el procesador de textos líder en el mundo gracias a sus 500 millones de usuarios y sus 25 años de edad. Pero hoy en día, otras soluciones basadas en
Presentaciones compartidas con Google Docs (tutorial)
Presentaciones compartidas con Google Docs (tutorial) G oogle Docs es una muy sencilla suite ofimática online que nos permite crear nuevos documentos, planillas de cálculo y presentaciones multimedia,
Accesibilidad web GUÍA FUNCIONAL
Accesibilidad web GUÍA FUNCIONAL 0 _ ÍNDICE 01_Introducción 02_Primeros pasos 03_Conceptos 04_Navegación por voz 05_Navegación por teclado 06_Navegación por sonido 07_Compatibilidad con lectores de pantalla
Cómo instalar fácilmente tu WordPress tras contratar un hosting en Hostalia
Cómo instalar fácilmente tu WordPress tras contratar un hosting en Hostalia Cardenal Gardoki, 1 48008 BILBAO (Vizcaya) Teléfono: 902 012 199 www.hostalia.com La puesta en marcha de WordPress es muy sencilla,
WINDOWS. Iniciando Windows. El mouse
Windows es un sistema operativo, cuyo nombre lo debe al principal elemento de trabajo, la ventana - en inglés window -. Este tiene características como: Multitarea: durante una sesión de trabajo, es posible
MANUAL TECNICO DE EMAILING BIZBOX
MANUAL TECNICO DE EMAILING BIZBOX 1.- Verificar Registro SPF El dominio desde el que envía su coreo no puede ser cualquier dominio, debe ser un dominio aprobado y verificado para enviar correos, estos
MANUAL DE LA APLICACIÓN HELP DESK
CASAMOTOR MANUAL DE LA APLICACIÓN HELP DESK Desarrollado por: NOVIEMBRE, 2012 BOGOTÁ D.C. - COLOMBIA INTRODUCCIÓN Este documento es el manual de la aplicación de Help Desk de Casamotor, producto desarrollado
CURSOS PRÁCTICOS SEDEN SEDEN
6 CURSOS PRÁCTICOS SEDEN SEDEN C U R S O S P R Á C T I C O S S E D E N CREACIÓN DE REGLAS DE MESAJES PARA OUTLOOK EXPRESS SEDEN C/ Dr. Esquerdo nº 157, portal 30 C, 1º F Teléfono (91) 409 37 37 Fax (91)