Objetivo General. _vbietVve General a los estudiantes de herramientas tecnolégicas que _ in desarrollar habilidades y destrezas en ; de las TICS, componentes electrénicos y_ de programacién, supliendo asf la necesidad ket crarse en las nuevas _ vovkoay Instituci6n: ‘Nombre: ‘Grado: Seccién:INDICE UNIDAD 1. ANIMACIONES CREATIVAS. Introducei6n a la animacién E 5 Creacién de un plan para realizar una 9 ‘Conociendo el entorno del programa _ semen Mi primera animacién .. 19 Recopilando recursos para mi animacion. —— 27 EValuaci6n wnsunnsnn : ent 28 Proyecto Final... nen UNIDAD 2. ROBOTICA APLICADA Gonociendo Arduino Conceptos Basicos.. * Resistencias Ley de Ohm... Diagramas en Fritzing... Interfaz con LED. Sane Interfaz de Motores DC. 55 Interfaz LD a) Interfaz Pulsador iescuseanessees peemearer 2) Interfaz de Alimentacion Externa.. 65 Evaluacién = : 67 Proyecto Final. 69 UNIDAD 3. DISERO WEB Disetio web publicitario. Conceptos bASIC08 = 73 Gonociendo el entorne del programa. ni Disefio del esquema de un sitio web... Formato de texto y enlaces Manejo de imagenes Tablas en un sitio web... Diseio de formularios Evaluacién. Proyecto Final UNIDAD 4. ARTE VISUAL MULTIMEDIA Introducci6n al arte visual multimedia, Edicion de imagenes en linea. Ezitando videos en la nube Creando video tutoriales. a Creando un canal y publicando videos en mi canal de YouTube 127 Evaluacion 131 1133 Proyecto FinalUNIDAD (01 nisin) OBJETIVO@ Animaclonee Creatives INTRODUCCION A LA ANIMACION La animacion se refiere al proceso de generacién de imagenes donde cada imagen es una alteracién de la anterior. La presentacién de estas imégenes a una velocidad sufciente produce la sensacién de movimiento. ePor qué es posible? Se debe a la existencia de un fendmeno fisiolégico del sistema visual humano, llamado persistencia de la visi6n. Los fotones cuando impactan en la retina provocan una reaccién {que se mantiene durante un periodo de tiempo. Cuando el siguiente fotograma impacta en la retina se fusiona con el anterior, creando la sensacién de movimiento. La animacion digital es el conjunto de técnicas que emplea una computadora para la sgeneracién de escenas que produzcan la sensacién de movimiento, Tipos de Animacién Digital. La animacion digital a grandes rasgos, se divide en: 2) Animacién Bidimensional (2D) ') Animacién Tridimensional (3D) ‘+ Por fotogramas. Por sprites. ‘+ Por graficos vectoriales. + Por trayectoria,‘Animaciones Gretivas 6 | Procesos de Animacién. + Itepolacn = Warping. * Morphing. ‘+ Rendering. Técnicas de Creacién. Enumeramos a continuacién algunas técnicas: 9) Stop Motion. ») Pixilacién. ¢) Time Lapse. 4) Video Drawing. @) Animacién de Recortes. PRACTICA. Reconociendo los diferentes tipos de animacién. 1. Ingresa al navegador de internet. 2, Digita la url de youtube. www.youtube.com 3, En la caja de busqueda escribe y busca cada uno de los tipos de animacion estudiados (Stop Motion, Pisilacién, Time Lapse, Video Drawing y Cut Out o Animaciér de Recortes) Realiza un cuadro sinéptico 0 un mapa conceptual en el cual reflejes las caracteristicas propias de cada una de las técnicas de animacién observadas,[Bean encasa Busca en Intemet el procedimiento para la creacién de animaciones segiin las técnicas numeradas y resimelo en tu cuaderno. 41, Stop Motion. 2, Time Lapse. 3. Video Drawin. 2Qué es un Storyboard? El Storyboard es un conjunto de imagenes mostradas en secuencia, con el fin de previzualizar tuna animacion o cualquier otro medio grafico o interactivo. Basicamente el storyboard es un guion gréfico, que nos permite la previsualizacion de nuestra multimedia antes de que este terminada, En este se plantean las ideas principales de nuestro uion técnico y iterario, y se dejan en claro los detalles de cada escena. La forma de eleborar un storyboard varian, dependiendo de su uso 0 lo que vayamos a ejecutar, ya sea un video, un poster, una animacién o hasta una pagina web. También podemos encontrar storyboards llenos de color 0 en blanco y negro, lleno de detalles 0 simplemente trazos que esbozan una idea de figuras. Es comin la utlizacién del storyboard ‘en animaciones ya sea tradicionales 0 por computadoras, Como se debe hacer un Storyboard? La realizacion de un Storyboard te permitiré planticar mejor y sacarés mayor provecho al tiempo de produccién.+ Narracién: Antes de crear tu animacién has escrito el texto del narrador. Aqui tienes ‘que dlividir el texto en tantos fragmentos como desees. Recuerda que es importante su brevedad: el video debe inclursilencios que ayuden a resaltar las imagenes. La narracion ‘no debe contar lo que se ve en la pelicula, sino aportar informacién y explicar lo que + Tomas, tipo de plano, movimiento dela cémara: Una vez escrito el texto, piensa en las, imagenes que deseas tomar para mostrar y explicar lo que la voz est narrando, Combina planos generales con detalles a medida que son mencionados en la voz. Un texto debe ccontener multiples planos. A ser posible, as imagenes deben durar més tiempo que el texto, de modo que se produzcan frecuentes silencios de voz, + Dibujo o imagen: intenta dibujar algin fotograma del plano que has deserito en la ccolumna anterior. Ejemplos de Storyboard‘Animaciones Creatives CREACION DE UN PLAN PARA REALIZAR UNA ANIMACION. ‘StoryBoard That es una plataforma en la web que nos permite cumplircon una tarea que la ‘mayoria de personas desearian cumplir, poder crear una tra cémica sin necesidad de contar con grandes conocimientos en el mundo del disefio grafico o que seamos unos virtuosos en lo relacionado con el dibujo, pues al hacer uso de StoryBoard That el hecho de crear una historia con una tira eémica gerd on verdad un juego de nifios, asi de simple, pues la interfa funciones y posibilidades que esta aplicacién nos entrega son realmente muy agradables para usar, ademés cada una de ellas nos guiard en todo el proceso para que al momento de diseniar una tira c6mica en la nube los resultados sean en verdad lo que estamos esperando. Respecto a StoryBoard That vale la pena decir que al momento de crear una tira cémica ta misma estard compuesta por 3 0 6 vifletas de acuerdo a lo que nosotros necesitemos en ‘el momento, ademas contaremos con varios personajes en distintas posiciones, muchos ‘elementos para incluir, varios escenarios para hacer un poco més amena la vifeta en particular, entre otras funciones mas que nos faciltarén este proceso para personalizar la vineta y conseguir una tira c6mica de calidad eewaves STORYBOARD THAT The Wort ne Styboard Gear PRACTICA 1. Greando un storyboard. 1. Accede a la ur: wonw.storyboardthat.com >. da clic en el botén 3, Se mostraré la pantalla principal de la aplicacién: 2. Cuando aparezca la pantalla de lt‘Animaciones Craatvas 4, La primera decisién que debemos tomar es el niimero de celdas 0 cuadros de nuestro storyboard, lo podemos modificar dando clic en el botén Add Cells luego de lo cual aparece la ventana de seleccién: ‘change Your Layout Warning: This operation cannot be undone. 5. El agregar lineas guia puede ser muy atil para colocar los elementos necesarios en 4 justo sitio, esto se logra dando clic en el botén Add Grid Lines y nuestras celdas presentaran el siguiente aspecto: 6. Acontinuacién seleccionaremos el escenario, tendremos una amplia variedad dentro del apartado Scens; seleccionamos la categoria School y arrastramos a nuestra primer celda la quinta imagen y tendremos lo siguiente: Una escena y un mend que nos permit rotar, ‘ordenar, editar 0 aplicarie un fitro a la misma i)‘Arimaciones Creatives ‘Siguiendo el mismo proceso aplicaremos una escena a las celdas que tenemos en blanco yy las dejaremos de la siguiente manera: 7. Seleccionaremos los personajes que intervendran en nuestro storyboard dando clic en el apartado Characters elegimos el sexto de la lista Basics, al arrastrarloy colocarlo en su lugar podemos editar su posicién y sus caracteristicas fisicas, editalo y agraga los demas personajes para que quede como se muestra 8, Agrégale texto al storyboard usando para ello el apartado Textables dentro de la categoria Classic selecciona una de las formas que se adapte a la posici6n de las personajes, arréstrala y luego escribe ol texto usando para ello la caja de texto y formatéalo de‘Animaciones Crautves forma sencilla pero atractiva: 9. Alfinalizar no te olvides de guardar tu trabajo, dando clic en el bot6n Save & Continue al hacerto por primera vez aparecera la siguiente ventana: B New User Registration | w socultogn‘Aqui deberds crear una cuenta gratuita 0 puedes utilizar tu cuenta ce Gmail, luego accederas a la ventana en la cual escribiras el nombre y una pequefta descripcion de tu storyboard: [Bllernmoao en casa Croa un storyboard que cuente una historia corta que hayas vivido.e ‘Arimaciones Croatives, CONOCIENDO EL ENTORNO DEL PROGRAMA Una herramienta libre y muy potente para crear animaciones de aspecto profesional y muy sencilla de utlizar es Synfig Studio. Synfig es un editor de gréficos vectoriales y una herramienta libre de animacién por ‘computadora creada por Robert Quattlebaum con la ayuda adicional de Adrian Bentley, diseriado para producir peliculas animadas con pocas personas y recursos. Alser una verdadera aplicacién con front-end and back-end, es posible disefiar una animacién cen el software front-end, "Synfig Studio", y renderizarla posteriormente en el back-end, "Synfig Too! ulizando otra computadora que no requiera una pantalla gréfica conectada. La meta de los programadores es crear una herramienta capaz de producir una pelicula de animacién de calidad con menos gente y recursos. Al estar basado en vectores elimina la farea del tweening manual, produciendo una suave y fluida animacién sin que el animador vidualmente. tenga que dibujar cada cuad ‘También hay una amplia variedad de efectos en tiempo real que pueden ser aplicados en ‘capas 0 grupos de capas, como borroneado radial (blur) reformas de colores, los que son independientes de la resolucion de renderizado. Otras caracteristicas incluyen controlar y animar el ancho de las lineas con puntos de control individuales, y la habilidad de enlazar datos relacionar datos de un objeto con otro. En mayo de 2008 un grupo de voluntarios rusos inici6 un proyecto de pelicula de animacion llamado Morevna Project usando Synfig, basado en un cuento popular Marya Morevna, re- escrito como ciencia ficcién anime, Han realizado actualizaciones desde entonces en el sitio del proyecto Morevna incluyendo una video de demostracién Free Software Magazine ccontenia un articulo sobre el proyecto. Re‘Animaciones Creatives ‘Synfig, como la mayoria de ls otros programas gratficos competentes, rompe individualmente los elementos del lienzo en varias capas. De todas formas, diflere de los otros programas en dos grandes formas: ‘Una capa individual en Synfig usuaimente representa una “Primitiva” nica. Por ejemplo: Una region dnica, el delineado de una regién, un JPEG importado, etc. Esto le permitira tener un gran trato con la flexibilidad y con el control. No es muy inusual, ener para una ‘composicién cientos de capas (organizadas en la jerarquia de la cordura del artista). + Una capa no solo puede tener informacién en el tope de la imagen, debajo de ella, sino {que ademas modificara o distorsionarla de alguna forma. En este sentido, las capas en ‘Synfig actiian mas como fitros, a iqual que en Adobe Photoshop o en GIMP. Por ejemplo, sitenemos una capa con desenfoque, una capa con desenfoque radial, capa esferizada, capa con correccién de color, capa con bisel, etc. Cada capa tiene su serie de pardmetros, que determinan como se debe comportar. Cuando hhaces click en una capa (bien sea en la ventana del lenzo, o en el panel de Capas), verde sus pardmetros en el Panel de Parémetros. f}2NYNY rso_O Synfig Studio tiene una propiedad de auto-recuperacién. Si se bloquea, incluso si el archivo actual no se ha grabado, no se perderdn mas de 5 minutos de trabajo. Al reiniciar, automatica y répidamente alertard al usuario para que recupere los cambios no guardados. Desafortunadamente el historial aun no se recupera. Esa propiedad vendré mas adelante. La Interfaz del Usuario Cuando comienzas Synfig Studio, esto abriré un splash grafico y se levantard. Luego de ‘que termine de cargar, deberias ver un érbol de ventanas (estructurada). La ventana en la ‘esquina superior izquierda es la caja de herramientas. Aqui es donde puedes abrir archivos, cambiar de herramientas, etc. Te dards cuenta de que la mayoria de los botones estan coscurecidos, ya que no tienes ning archivo abierto aun, Las otras dos ventanas (una en la parte baja, y otra a la derecha) son muelles de dilogo configurables. Puedes reorganizar el contenido de estas en la forma que quieras solo arrastrando la tabla hacia donde quieras que se ubique, Puedes incluso crear un nuevo didlogo arrastrando una ventana fuera del didlogo en el que estaba insertado. Si accidentalmente cierras cualquier ventana de dialogo (arrastrandola fuera del dislogo, y ccerrando la nueva ventana en la que se creo), no te preocupes. Simplemente ve a la caja de herramientas y accede a “Archivo->Dialogos", y haz click sobre el dialogo que necesita. Existen muchos cuadros de dialogo. Sino tienes la mas minima idea de lo que hace un ccuadro de didlogo, simplemente mantén el puntero del ratén sobre su icono y un cuadro de ayuda saldré, describiendo el nombre de ese cuadro, ‘Aqui estan algunas de las mas importantes: + Panel de Capas - Este cuadro muestra lajerarquia de las capas para ellienzo seleccionado. Adicionalmente te permite manipular esas capas. + Panel de Parémetros - Este cuadro te mostraré los parametros de la capa seleccionada en ‘el momento, (0, sison seleccionadas varias capas, te mostraré Gnicamente los pardmetros ‘que las capas tengan en comin) (tr)© Panel de Herra seleccionada. tas - Te muestra cualquier opcién especifica de la herramienta * Navegador-- Muestra una miniatura de lo que esté seleccionado en ese momento sobre e! lienzo, mostrandote como se verd. Ademas, puedes hacerle acercamiento o alefamiento, 'y mover el foco por el lienzo. ‘© Panel del Historial - Muestra la lista del historial de la composicién actual. Puedes ‘modificar las acciones en el historia Sse) ‘Si haces click en en bot6n “Nueva Composicién’ que esta en la Caja de Herramientas, una nueva Area de Trabajo se abrira Haciendo click en el mend circunflejo (entre la regla horizontal y vertical que estan en la esquina superior izquierda del area de trabajo), luego en ‘Ver’, luego en "Propiedades',y el dialogo de propiedades del enzo aparecerd. SSi haces click en OK, el dialogo de propiedades del lienzo desaparecera y verds la Ventana del lienzo. Esta ventana representa el lienzo Raiz, eso no significa mucho en este ‘momento, pero eso esta BIEN-solo estoy tratando de mostrarte los alrededores. En la esquina superior izquierda de la ventana del lienzo, veras un botén con un simbolo de acénto circunflejo, Si haces click en este botén, la ventana del ment del lienzo se abrird (Como acotacién, si haces click en cualquier érea del lienzo que no sea parte de la capa, este ‘mend también aparecerd) Ahora, ya sabes donde esta el menu en la ventana del lierzo, Todo lo demas deberia ser bastante auto-explicativo en la ventana del lienzo. (La explicacion de las cosas en ese menu viene en un segundo). 1} Prt,‘Animaciones Croutvas PRACTICA 1. Conociendo la interfaz del programa. 1. Ingresa a Synfig Studio. 2, Dibuja en tu cuaderno la interfaz de la aplicacién. aaek pe VW oe ak rons 5 na = tz == fe S~ EL IP El leven 3. Enumera cada una de sus partes y escribe una breve descripcién de las mismas, [brmoacewcase Busca en Internet escrive en la tabla una lista de aplicaciones tanto yratuilos como de pago {que permitan realizar animaciones. ‘Aplicaciones Gratuitas ‘Aplicaciones de PagoAnimaciones Creatives 6 MI PRIMERA ANIMACION Crear una animacién en Synfig es realmente sencillo: Signiica bésicamente cambiar un dibujo - solo necesitas crear el primer estado y ol ultimo estado de un cambio, y Syntig se hharé cargo de los pasos entre ambos. Demos un vistazo a un ejemplo sencillo. Considera una luz en movimiento similar a la que cesta en frente del auto del Caballero Andante; deja el realismo y obtendras un circulo que se mueve de derecha a izquierda, y lo repite. En otras palabras, necesitards crear tres ‘pasos’ o‘etapas' 41. Elcirculo esté en la kzquierda. 2, Elcirculo esté en la Derecha. 3. Elcirculo esté de regreso en la Izquierda, Vamos a hacerlo. PRACTICA. Preparando el espacio de trabajo 1. Inicia Syniig Studio, y crea un nuevo archivo. 2. Haz click en el mend ‘Circunflejo! (entre la regla horizontal y vertical, en la esquina superior izquierda de! lien20), luego "Estar" y luego "Propiedades". Un dialogo llamado "Propiedades' aparecerd. Dale un nuevo nombre a tu archivo y agrégale una descripcion 3. Luego dale click a “Aplicar” (no hagas click en “guardar" aun no hemos terninado con la explicacion del dialogo de "propiedades"). 4. Asegirate de que editaste “tiempo de fin", La extrafia vista "Of cambiara hacia Una presentacién mas familiar en cuanto hagas click en *Aplicar". Establecerlo a 2 segundos, 2 J$@AAAMA it,tae teal LDeserpton Animation bases Image Tre [ote Time settings Barres per second statins snttine OK Somers x Repere '5. Ahora crea un simple rectangulo negro que servira como nuestro fondo. No es necesario ue cubra todo ellienzo. 6. Ahora necesitamos un circulo. Cambia el color de pintar a rojo, y dibuja un circulo, No importa si no es perfecto: Puedes editarlo. Activa la "Herramienta Normal’, y haz click en. el circulo. Esto te levard a varios modos de edicion los cuales son faciles de detectar por el pequefio punto verde en el medio del circulo y el recténgulo blanco al rededor de él.‘Animaciones Creatives 6 7. Puedes mover el circulo arrastrandolo por el punto verde en el medio. Epa a ero eT Estos son los primeros pasos para dibujar un objeto y moverto, pero aun no animardo, dlirds. Es mas; demos un vistazo a como esto funciona, PRACTICA 2. Agregando movimiento ‘AI principio, colocaste un valor de 2 segundos en el dialogo de “propiedades"; debido a ‘esto, tu ventana del lienzo (en la que haces tus dibujos) obtuvo capacidades adicionales. Hay un deslizador gris, por ejemplo. Puedes hacer click en el, y un pequefio indicador naranja aparecerd pero nada cambiara. Esto es porque necesitas cambiar primero al’Modo {de Edicion Animado' haciendo click en el punto verde justo a la derecha del deslizador ‘ris del tiempo. Notaras que tu ienzo tomaré un delineado rojo, esto te reco'daré que los ‘cambios que hagas a tus objetos, ahora afectarén la animacién,2. Anferiormente, tres “pasos” o “elapas” fueron mencionados. Estos son representados por los llamados "fotogramas claves" (solo en caso de que estes famiiarizado con la codificacién de video: No, no es lo mismo); un fotograma clave es una imagen en el tiempo donde algo importante pasa con tus objetos. Haz click en la ficha del Fotograma clave ~ esta es la que tiene la pequefia lave en la ventana de "Pardmetros, etc." ~ para ser capaz de editar los fotogramas. Ahora haz click en el pequetio signo de "més" y podrés obtener una nueva entrada en la lista de rmostrados "Of, Of, (JPM) Name @ oriein '0,000000px.0,000000R% ag wet 2.000000, @ stareroint —_-150.000000px.0.0000000x @ End Point 1150.000000px.0.0000000% > ver vertices ust > Bi vertex 001 Btine Point DBE vertex 002 BLine Point DR vertex 008 Line Point Fast fey3. Si esto no paso, hiciste algo que no se menciono hasta ahora. Cierra tus archivos y ‘empieza de nuevo. Sila entrada aparece, ve a la marca "1s Of en la barra del tiempo. El pequetio indicador naranja deberia moverse hasta ahi. Luego agrega otro fotograma clave haciendo click ‘en el pequerto simbolo de més. Repite el proceso con el indicador de la barra de tiempo puesta en "2s Of". Deberias tener tres fotogramas claves en la lista, ahore. Els"s y f's: Entondiendo la linea de tempo. Oye ahora, ya te habrés dado cuenta lo que esos misteriosos “1s OF -tipos de marcas representan. Ells indican un punto especifico en la linea de tiempo, expresando la ubicacion fen términos de segundos (s) y marcos (f). Cada segundo es dividido en 24 marcos, muy parecido a una métrica o cinta de medir dividida ‘en 100 centimetros. Las marcas del marco empiezan en cero (0) y suben hasta 24, en cuyo ‘caso un nuevo segundo es introducido y la cuenta de los marcos regresa a cer. Lallista de fotogramas claves. fa de fotogramas claves es bastante facil de entender: Ella muestra el "tiempo" lo *Saltos” que los lal ‘que es basicamente el inicio del tiempo, ‘Longitud' que es auto explicativ Ccubriremos luego, y "Descripcién” que es, nuevamente, auto explicativa, ‘Ahora, gte ests preguntando sobre las entradas llamadas “(JMP)"? De hecho, estos son ‘enlaces justo como lo son en la web: Haz click sobre ellos, y el indicador de tu Inea de tiempo saltaré hacia el tiempo exacto, Puedes usar esto para editar tu imagen para un momento dado en el tiempo. Por ejemplo, hora puedes saltar al primer segundo, y mover el circulo rojo a la derecha. Ahi hiciste tu primer movimiento; itu primera animacién con Synfig! 3 I$ $$ Ett,Te preguntards donde esta la animacién? Solo haz click en una posicién arbitraria en la linea de tiempo: Notards que el crculo rojo esta en posiciones donde tu no lo moviste ,Qué paso? Synfig se dio cuenta de lo que querias hacer, saber que querias mover el circulo, y libujar todas las imagenes entre estos estados. Cada imagen hard luego un fotograma en tu PRACTICA3. Renderizando la animacién | ans detect wand sts (oa as elds wanda ahr) oe prarana de ea de comando de syn. ara hacer eo 11, Clerra el modo de edicién de animacién haciendo click en el punto rojo en la pestafa del | editor de la linea de tiempo, y graba tu archivo; por instancia bajo el nombre de Caballero Andante Basico.sif. Luego presiona el simbolo > en la esquina superior izquierda de la ‘ventana del lienzo para abrir el mend, abre el menii de ‘archivo’ y haz click en el articulo ‘mostrar’, Cambia el nombre @ CaballeroAndanteBasico gif en la misma ubicacién donde ‘uardaste CaballeroAndanteBasico sif y escoje "gif" en vez del formato "Auto", luego haz click en "mostrar", Dependiendo de la velocidad de tu procesador esto solo deberia tomar un momento, pero finalmente una ventana con una barra de estado te diré “Archivo Renderizado Satisfactoriamente’, El atributo "magick" (si esta disponible) produce gis ‘mucho mejores que el ‘gi porque optimiza la paleta para las imagenes. 88 $$) animacién; y el circulo pareceré estarse moviendo.2. Abre CaballeroAndanteBasico.gif en Firefox o cualquier otra aplicacién que sea capdz de mostrar gifs animados. De todas formas, Firefox reproducira el gif todo el tiempo lo que hace que una animacién corta dure bastante tiempo. Si estas viendo un circulo rojo moverse de izquierda a derecha y regresarse: Felicitaciones! Haz hecho tu primera animacién! Nota: también puedes ver una vista previa de tu animacién. Presiona el simbolo > en la esquina superior izquierda de la ventana del lienzo para abrir el mend. Luego escoge Archivo Previsualizar, o| e(4} Q@ Gin @ (2 HO Hal HOO I i eo Reo 0 |_semere a [Aermoao ew casa Claro, la posicién de un objeto no es la nica cosa que puedes cambiar con Synfig Studi. tras posiblidades incluyen su tamafio, delineado, color, etc. Synfig viene con varios archivos de ejemplo que deberian dejarte indagar mas profundo en las posiblidades. 11, Explora ls diferentes ejemplos de Synfig Studio y modifica las animaciones. 2. Crea un listado de los ejemplos explorados, describe en qué consisten las enimaciones y también las modificaciones que realizaste.e ‘Arimacionoe Croatives, RECOPILANDO RECURSOS PARA MI ANIMACION Para crear tus animaciones puedes utilizar diversos recursos gratuitos disponibles en )» gsRobétioa Aplicada OO ‘CONOCIENDO ARDUINO {Qué es Arduino®? Arduino es una plataforma de prototipos electrénica de cédigo abierto (open-source) basada cen hardware y software flexibles y faciles de usar. Esta pensado para artistas, diseftadores, como hobby y para cualquiera interesado en crear objetos o entornos interactivos. | entomo mediante la recepcion de entradas desde una vatiedad ‘Arduino puede "sentir" de sensores y puede afectar a su alrededor mediante el control de luces, motores y otros artefactos. El microcontrolador de la placa se programa usando el Arduino Programming Language (basado en Wiring) y elArduino Development Environment (pasado en Processing) Los proyectos de Arduino pueden ser auténomos 0 se pueden comunicar con software en ejecucién en una computadora (por ejemplo con Flash, Processing, MaxMSP, etc.); las placas se pueden ensamblar a mano o encargarlas preensambladas; el software se puede descargar gratultamente. Los disefios de referencia del hardware (archivos CAD) estén disponibles bajo licencia open-source, por lo que eres libre de adaptarlas a tus necesidades. La Placa Arduino® sada aT Pn roca Ene tal RX use en sat Prograador se Fuente de “ vetador ttnrtacen anna Pe raogcoe ono. Detalle-de la placa de Arduino® Uno y sus partes Baobec Apa it Existe una amplia variedad de placas 0 plataformas Arduino® que se adaptan a las necesidades de disefio, funcién o aplicacién de la misma. Puedes acceder al catélogo oficial escaneando el cédigo QR proporcionado para tal efecto. Caracteristicas ‘Arduino es una placa con un microcontrolador de la marca Atmel y con toda Ia circuteria de soporte, que incluye: Reguladores de tensién, un puerto USB (En los ulimes modelos, ‘aunque el original utlizaba un puerto serie) conectado a un médulo adaptedor USB-Serie {que permite programar el microcontrolador desde cualquier PC de manera cémoda y también hacer pruebas de comunicacién con el propio chip. Un arduino dispone de 14 pines que pueden configurarse como entrada o saida y a los que puede conectarse cualquier dispositivo que sea capaz de transmit o recibir sefales digitales deoy5V. También dispone de entradas y salidas analégicas. Mediante las entradas analégicas podemos obtener datos de sensores en forma de varlaciones continuas de un voltaje. Las salidas analégicas suelen utlizarse para enviar sefiales de control en forma de softales PWM. ‘Arduino UNO es Ia lima version de la placa, existen dos variantes, la Arduino UNO convencional y la Arduino UNO SMD. La Gnica diferencia entre ambas es el tipo de rmicrocontrolador que montan: + La primera es un microcontrolador Atmega en formato DIP. + la segunda dispone de un microcontrolador en formato SMD. Nosotros nos inclinaremos por la primera porque nos permite programar el chip sobre la propia placa y después integrarlo en otros montajes.Robétion Aploade Arduino Uno con mirocntroledor en formato DIP ‘Ardin Une con mcroontoladren formato SMD Pines Digitales y Analégicos Cada uno de los 14 pines digitales se puede usar como entrada o como salida. Funcionan a 5, cada pin puede suministrar hasta 40 mA. La intensidad méxima de entrada también es de 40 mA. Cada uno de los pines digitales dispone de una resistencia de pull-up interna de entre 20K 1y 50 KO que esta desconectada, salvo que nosotros indiquemos lo contrario, Arduino también dispone de 6 pines de entrada analdgicos que trasladan las sefiales a un conversor analégicoldigital de 10 bits. Pines especiales de entrada y salida + RX TX: Se usan para transmisiones serie de sefiales TTL. + Interrupciones externas: Los pines 2 y 3 estén configurados para generar una interrupeién en el atmega. Las interrupciones pueden dispararse cuando se encuentra un valor bajo en estas entradas y con flancos de subida o bajada de la entrada, + PWM: Arduino dispone de 6 salidas destinadas a la generacién de sefiales PWM de hasta 8 bits ‘+ SPI: Los pines 10, 11, 12 13 pueden utlizarse para llevar a cabo comunicaciones SPI, {que permiten trasladar informacin full ddplex en un entomo Maestro/Esclavo,+ 2c: Permite establecer comunicaciones a través de un bus I2C. El bus I2C es un producto de Philips para interconexién de sistemas embebidos. Actualmente se puede encontrar una gran diversidad de dispositivos que utlizan esta interfaz, desde pantallas LCD, memorias EEPROM, sensores, etc. Alimentacién de Arduino. Puede alimentarse directamente a través del propio cable USB o mediante una fuente de alimentacién extema, como puede ser un pequefio transformador o, por ejemplo una pila de 9V. Los limites estan entre los 6 y los 12 V. Como tinica restricci6n hay que saber que sila placa se alimenta con menos de 7V, a salida del regulador de tension a SV puede dar menos ue este voltae y si sobrepasamos los 12V, probablemente dafiaremos la placa. La alimentacién puede conectarse mediante un conector de 2,1mm con el positive en el centro 0 directamente a los pines Vin y GND marcados sobre la placa, Hay que tener en cuenta que podemos medir el voltale presente en el jack directamente desde Vin. En el caso da que el Arduino esté siendo alimentado mediante el able USB, ese voltaje no podr monitorizarse desde aqul IDE Arduino® ‘Arduino también incluye un entome interactivo de desarrollo (IDE) que permite programar fcimente a tarjeta. El IDE (Integrated Development Environment) se basa en Processing y Wiring (open source ). EI Lenguaje de programacién Arduino se basa en C/C++, y se simplifica con el uso de la biblioteca Arduino.OY — Bota de scene rape esc code Area te ae! > contoa Descargar la IDE de Arduino de la pagina oficial segiin el sistema operatvo. Instalacién de Arduino en Windows. Tae — Contiene los drivers nevesarios A eurmptes para hacer funcionar la placa i" Arduino con nuestro PC he 1 eens nsec Leon Swaine — ———___» IDE de Arduino s oxcertal Soe = mwoen — as BengRobétie Aplcada — So — Instalacién del Driver. Vamos @ administrar dispositves (Inicio-clic derecho en equipo - administiar- administrar dispositives) buscamos en otros dispositive los elementos desconocidos y oon clic derecho sseleccionamos actualizar controlador, \raing Tu eisee |pmmmeneen rane ‘Ahora seleccionamos buscar software de controlador en el equipo y buscames la ubicacién de carpeta Drivers. [9 -tmmmnnannsenimnina + inanimateConfiguracién del IDE de Arduino. Lo primero que se debe realizar es seleccionar el tipo de tarjota que se esté trabajando y el puerto en el que esta conectada la tarjeta: CONGCEPTOS BASICOS Identificacién de Componentes Electrénicos Una parte fundamental al trabajar con los distintos componentes electronicos es su correcta ‘entificacién, raz6n por la cual a continuacién se presenta su apariencia fisica, el simbolo ue lo representa y la funcién basica del mismo.ASPECTO NOMBRE ‘SIMBOLO LETRA ENEL ESQUEMA FUNCION Bateria ‘Almacena energaeléctica para generar crinte de electrones en Tos eto, Capacitor 0 condensador de cerd Un condensatorc capaci acta ‘como uns bateria temporal, pues ‘lmacona elected durante. ‘ert lapso de tiempo. Condensador electrolitico at Los condensadores 0 capactores ‘lection almacanan contac relatvarente grandes e ener elécrica. Poseon polerdad, lo que significa que tienen un termina postive y uno ‘egtivo,porlo tant, se debe tener euldado a eonctarieg on un euro. Circuito integrado ‘Son pasilas qe contienen ‘muchos componentes Intemamenteconectados {ormando un deterninado crcuto Diodo sun dspostvo que permite o paso de coronte on une sola dteccion Poseen ds terminales Uno es el nodo y to et catodo. Eledtodo se indica con una banda ‘que rodea el cuerp del dodo, Diodo emisor de luz me Un LED e¢ una cate especial de lod, que emits lz cuando tye ‘una coment a aves de 6 ‘étodo ee ndicads por un lado piano en le cubes de pléstio 0 por un terminal mas cot,Robétion Ap LETRA AsPecTO | NOMBRE | simBoLO | ENEL FUNCION ESQUEMA rotoceao | tp espe oreo, folorest |< Fi ‘he vara ge acatoa : Intonsad dela uz que ncida on tencia a su superficie, a ceaneronm meer | | Tanase a | peaceterane ts 7 rege neeruace ane {tes terinaleslamados Emisor, Base y Colac Lima 0 control a crete Rasisbencias. que fuye através de un cco, Co resistores ‘breaentande una oposicign 0 resistencia al paso de la coments, Potencié- metro Un potenciomato es una R resistencia varable, co valor ‘depende de su sje mov Es un dispostvo que abre 0 Interruptoro | a cierra un create eléctca. Los ‘switch aS interruptores 0 svitches pueden = tener dos o ms terminales ISR también permite o paso de coriente on una sla creccén, ‘solo que para que esto suceda se ‘debe apicar momenténeamente ‘un voli postive aun tereer ‘terminal lamado Compuerta © Gale (@). El propdato del paiante 3 }} producir un sonido a partir de la Parlante gp _| sortente que ye através do 6. Convert ia coments eiéctca en ‘ondes sonora SCR SCR 5RESISTENCIAS Resistencias 0 Resistores. Las resistencias 0 resistores son uno de los componentes fundamentales dentro de un ircuito electrénico. ‘Como una resistencia se opone al paso de corriente, al usarlas podemos controlar ficilmente el paso de electrones a través de un conductor. Si hay mucha resistencia, circulardn pocos ‘lectrones y si hay poca resistencia cicularén muchos. Cada resistor posee cierta cantidad de resistencia. Esta se mide en Ohmios. Por ejemplo, un resistor de 100 ohmios opone mas resistencia al paso de la corriente, que un resistor de 10 ohmios. Cédigo de Colores. El cédigo de colores consiste en un conjunto de lineas pintadas alrededor de ls resistencias, on los colores de estas lineas podemos conocer el valor de la resistencia en ohmios, y qué tan exacto es ese valor (precisién). ‘Se dice que es un cédigo porque debemos descifrar el valor en ohmios de acuerdo al color y la posicién de cada una de las bandas. Este proceso es muy sencillo y basta con utilizar una pequerta tabla de colores. aOO zCémo se lee el codigo de colores? 1° La primer banda es ia primer cifra del valor. 2 La segunda banda es la segunda cia del valor total La torcer banda es el numero por el cual hay que multipicar los valores anteriores (agregar el numero de ceros correspondientes). 4° La cuarta banda representa el valor de la tolerancla, Esta banda establece la exacttud 0 precision en el valor de la resistencia. Ejemplo: NUMERO DE BANDA COLOR VALOR, a verde 5 2 Azul 6 3 (multipicadon) [Amarillo 10,000 [45 (Tolerancia) Plata 510% ‘VALOR TOTAL 1560 000%10%= 560 KO Los valores que sobrepasan los 1,000 Ohmios (1,0000) pueden abreviarse usando la letra K (KQ), de igual forma se puede proceder con los valores mayores de 1,000,000 de Ohmios usando la letra M (MQ), MALTIPLOS DE OHMIOS 1,000.0 = 1Ka 1,000,000 9 = 1 Ma.ACTIVIDAD EN CASA. Utiizando la tabla de colores proporcionada, determinar el valor te6rico de las siguientes resistencias: 4* BANDA |_2* BANDA Tolerancia | Valor Café Naranja Violeta Rojo Rojo Rojo Rojo Dorado Violeta Blanco Naranja Plata ‘Amarillo ‘Azul Café Sin Color Verde Azul Negro Rojo, Naranja Café ‘Amarillo Cate Blanco Verde Dorado Plata Gris Gris Gris Dorado Violeta Rojo Plata Dorado Cale ‘Amarillo Azul ‘AmarilloRobéilca Aplicada LEY DE OHM La corriente y el voltaje, asociados con una resistencia se relacionan entre si mediante una ‘ormula muy ati y sencilla lamada la ley de Ohm. Un circulto eléctrico, es una combinacién de componentes conectados de tal forma que proporcionen una trayectoria cerrada para la circulacién de la cortiente y permitan aprovechar la energia de los electrones en movimiento; para producir otras formas de energia, por ejemplo, luz, calor, sonido, movimiento. etc. Un circuilo eléctrico simple como el anterior se ‘compone, basicamente, de los siguientes elementos: + Una fuente de energia eléctrica: La cual suministra la fuerza necesaria para impulsar una corriente de electrones a través del crculto. Esta fuerza se expresa en voltios (V). La coniente producida se expresa en amperios (A). + Un conjunto de conductores: Los cuales proporcionan un camino de poca resistencia (R) para la circulacién de la corriente a través del circuito. ‘© Una carga: La cual convierte la energia de los electrones en movimiento en otras forma de la misma. En este caso la carga esta representada por una resistencia (R), la cual convierte energia eléctrica en calor. La resistencia se expresa en chmios (0). Asumiremos que fa carga o cargas de un circuito son resistencias. ‘+ Un interruptor (S): El cual acta como elemento de control de! circulto, regulando el paso de corriente hacia la carga, En un circuto resistivo. o sea que solo tione resistencias, ol voltae (V) la resistencia (R) y la corriente(!) estan relacionados entre si mediante una férmula muy util sencilla llamada la ley ‘de Ohm, descubierta por el fisio aleman Georg Simon Ohm (1789-1854) y dada a conocer publicamente en 1828. esta ley establece lo siguiente:‘Robison Aplicada Matematicamente, esta relacién se puede representar en forma resumida mediante la siguiente formula: vir Intensida aj/Resistoncia El significado de cada uno de los téminos de esta ecuacin es el siguiente: ‘Ve Es la tensién aplicada, expresada en votis (V) |FEs la cortente que circula por el ccuto, expresada en amperios (A). Re Es la resistencia u oposicién al paso de la cortiente, expresada en ohmios (0). El triéngulo de ta ley Ohm. Laley de ohm se puede recordar con faclidad utlizando el riangulo mostrado a continuacién, donde se encuentran representadas, en forma grafica, las tres magnitudes de cualquier Circuito, es decir el voltaje (V), la intensidad de la corriente (1) y la resistencia (R). AN ZiTR\ Para la utlizacin de este triéngulo, simplemente tapa con un dedo la magnitud de interés y cefectda la muitiplicacién o divisién que quede indicada. Esto es: 1. Siquiores calcula a intensad (1), apa con un dedo la letra |, Obtendré entonces VIR SeeRobétioe Aploada OO 2. Siquieres calcular el volte (V), tapa con un dedo la letra V. Obtendr entonces UR. 3. Si quieres encontrar la resistencia (R), tapa con un dedo la letra R. Obtendrés entonces va. Aplicando la Ley de Ohm Aplica la Ley de Ohm para calcular la resistencia correspondiente a cada caso, usando para clo la tabla de valores proporcionada. [vied [eomente [resistencia] fet Pomp | tipo de led Baul ) blanco aa luminosidad 1-9) 90 | 1 | alta huminosidad wD me | 12 | tipo indicatore verde F amanillo | 1.6¥ Sma tipo indicatorea ‘Colores correspondientes al valor PGR | watrcat | pant | are? [HO [meen | | mera | me Za = | mz Bm m7 ‘Colores correspondientes al var ‘dvmarle Set |v ctr tn Fa Randines sea = | me me | Fa Rojee 1800 | me | 7 Emenee 7600 Em Row 6800 = | mm | Za-.. see DIAGRAMAS EN FRITZING Fritzing Es un programa creado con la fnalidad de hacer disefios de circultos para breadboard o tarjetas perforadas y a partir de ello generar un plano para la creacin del circuto en fisico Fritzing permite @ los usuarios principiantes o avanzados crear sus prototipos electronicos basados en la placa arduino para su posterior impresin y creacién. Ejemplo 1: En el ejemplo podemos observar como los componentes electrénicos van entrelazados unos con otro logrando asi el circuit. (tp |obétion Aplicada ae en En primer lugar tenemos la placa arduino que interconecta cada uno de sus pines digitales al breadboard y estos a su vez pasan por las resistencias que luego llegan al lad, Ejemplo En este ejemplo podemos observar como de arduino hacemos conexiones ¢ la breadboard ya su vez también una bateria de Sv para alimentar Arduino y 4 baterias de 1.5V cada una para alimentar los motores DC y el sensor ultrasénico, De esta forma podemos probar que nuestros circuitos funcionan bien antes de ensamblarlos fisicamente y corregir errores antes de la soldadura, Qa] artINTERFAZ CON LED Un LED 0 (diodo emisor de luz) es un componente electrénico que como su nombre fo dice corriente eléctrica por él emite luz. Para conocer sobre cada componente electrénico basta con buscar las caracteristicas del mismo en intemet. A esto se le conoce como data sheet u hoja de datos, ahi aparecen las propiedades del mismo como: voltaje que necesita, cortiente, etc. DIAGRAMA Primero es importante recordar que para hacer que nuestro LED funcione o encienda tenemos que tener un diagrama elaborado en fritzing ‘CODIGO 0 SKETCH El codigo o sketch es la secuencia de instrucciones que le dards a arduino para que esté ejecute acciones; en este caso con 6! LED. fee irUllizaremos el IDE de arduino para crear nuestro sketch Int ledPin=2; 11 Dectaracién de la variable tamada ledPin 1Con valor de 2 void setup ( pinMMode(ledPin, OUTPUT); ‘Utiiza la funcién pinMode, la cual pide 2 pardmetros: IMEI nimero de pin y la funcién que realizara es decir OUTPUT (salida) o INFUT (entrada) ‘1Declara la variable ledPin como una salida en la placa Arduino void loop (1 digitalWrite(edPin, HIGH); ‘MUtliza la funcién digitalWiit, la cual pide 2 parémetros: 111- El ndmero de pin y 112-El tipo de sefial que emitiré HIGH (alto) LOW (bajo) o (encendido y apagado) delay(500); ‘La funcién delay permite realizar una pausa a intervalos de milisegundos es decir si ‘aumentas el delay aumentara el tiempo del intervalo entre encendido y apagado, digitalWrite(ledPin, LOW); ‘repite la funcién digitalwrite solo que en este momento estas dando la instruccion de que se apague ol led delay(500); >@—<$ reais,obétion Aploada PROTOTIPO Con el diagrama de fritzing terminado y el cédigo elaborado es momento de crear el prototipo para lo cual necesitaras lo siguiente: + Breadboard 0 protoboard + LED + Cable de conexion electronica. + Arduino + Cable USB ‘> Resistencia (realizar ejerccio para calcular la resistencia segun el color de! led) PROCEDIMIENTO 1. Une todos los componentes segtin tu diagrama de ftzing, 2. Carga el sketch con el IDE de arduino 3. Verica la funcionabiidad del proyecto. 4, Realiza cambios del tempo de os intrvaos. 5. Conecta més LEDs y modifica el sketch INTERFAZ DE MOTORES DC MOTOR DC Existen varios tipos de motores (servos, motores de paso, motor de,etc,) el motor que tenemos al alcance normalmente es un motor DC: Son los motores que encontramos en juguetes, reproductor de CD's y DVD's, etc. Al aplicarle un voltale el motor gira y en ausencia de éste, se detiene. Para cambiar la direccion solo hay que cambiar su polaridad. (eg [rlara controlar un motor de corriente continua se utiliza la técnica de puente en H. Si cerramos los interruptores $1 y $4 el motor gira en un sentido, si cerranos $3 y $2 el ‘motor gira en sentido contrari. +2 s1 s3 @ ‘CHIP L293D/B = velocidad y direccién de dos motores de continua (contiene dos puentes Hi. La diferencia centre el modelo L293D y 12938, es que el primero viene con diodos de proteccién que evita os darios producidos por los picos de voltaje que puede producir el motor. DIAGRAMA La opcién de regular la velocidad a la que giran los motores, solo puede estaiecerse entre los valores 0 y 255 y no funcionan en todos los pines de Arduino, solamente e1 3, 5, 6, 9, 10 11; esto se debe a que debe utiizarse la funcién analogWrit, 36Robétice Aploada CODIGo 0 SKETCH El cédigo o sketch para controlar la dreccién de giro y su velocidad es el siguiente: ‘define E211. Il Activar Pin para el motor 2 define 11 8 1/ Controlar pin 1 para motor 1 ‘define E1 10 //Activar Pin para el motor 1 define I2 9 1! Controlar pin 2 para motor 1 ‘define [3 12 1/ Controlar pin 1 para motor 2 define ld 13 1 Controlar pin 2 para motor 2 void setup0 { | pinMode(E1, OUTPUT); piniedolE2, OUTPUT (© erRobin Apleada pinMode(!1, OUTPUT); pinMode(I2, OUTPUT); pinMode(13, OUTPUT); pinMode(t4, OUTPUT}: ) void loop0) { analogwrite(E1, 153); Corre a velocidad media analogWite(E2, 255); !! Corre a maxima velocidad dligitalvite(t, HIGH); AigtarWite(i2, LOW); dligitanwite (ts, HIGH); Aigharwvte(4, Low); dtay(10000); I cambio de direccién digitalwite(E1, LOW); digitalWite(E2, LOW); delay(200); aqagIt _______@ tnti analogWrite(E1, 255); 1! Come a maxima velocidad analogWrite(E2, 153); /! Corre a velocidad media digitWnte(!1, LOW); dligitalWrte(i2, HIGH); digitavite(13, LOW): digitalWrte(t4, HIGH); detay(10000); } PROTOTIPO. Con el diagrama de fitzing terminado y el cédigo elaborado es momento de crear el prototipo para lo cual necesitaras lo siguiente: + Breadboard 0 protoboard + Cable de conexién electrénica, + Arduino, + Cable USB + Bateria 9V y conector ‘* 2motores DC (pueden ser reciclados) PROCEDIMIENTO. 1. Une todos os componentes segtin tu diagrama de fitzing, 2. Carga el sketch con el IDE de arduino 3. Verifialafuncionebiidad del proyecto. 4, Realiza cambios del tiempo de os intervaos. ee ir)INTERFAZ LDR Lor. Es un tipo especial de resistencia, que varia de acuerdo a la intensidad de a luz que incida en su superficie. En el siguiente ejemplo se ha hecho uso de un LDR coneciado a un LED y ‘controlado por Arduino con la finalidad de que el LDR, al detectar un nivel de luz ambiental ‘minima envie un pulso andlogo a la placa de Arduino y éste a su vez envle un pulso digital al LED, a través del pin 6 para que éste encienda, DIAGRAMA. copIGo 0 SKETCH. El bdigo o sketch para utiizar un LOR como sensor de luz es el siguiente: int LORval= 0; int uz; void setup ¢ pinMode(A0, INPUT); pinMode(7, OUTPUT); MR tr, JRobética Aplicada Serial.begin(9600); ) void loop() { LORval = analogRead(0); luz = constrain(LDRval, 0 , 700); luz = map(tuz, 0, 700, 0, 255); analogWrite(6, 255 - luz); delay(500); d PROTOTIPO. Con el diagrama de frtzing terminado y el cédigo elaborado es momento de crear el prototipo, para lo cual necesitaras lo siguionte: + Breadboard 0 protoboard + Cable de conexion eletrica, + Arduino + Cable USB + LOR + Le. PROCEDIMIENTO. 1. Une todos os componentes segtin tu diagrama de fitzing 2. Carga el sketch con el IDE de arduino 3. Veta la funconabiidad del proyecto. 4, Prueba con distintos periodos de tiempo para realizar la lectura de la intensidad de la uz. 8%Robétice Aplcada Os | q——. INTERFAZ PULSADOR PULSADOR (SWITCH). Es un dispositive que abre o cierra un circuit eléctrico. Los interruptores o switches pueden tener dos o mas terminales. DIAGRAMA. Se propone conseguir que pulsando un botén se encienda un LED que esté apagado. Se necesita instalar un LED (se usaré el LED indicador de encendido de Arduine) y por otro lado instalar un pulsador, que inicialmente se instalara en PULL UP (levantado o abierto). Elcircuito que se ensamblaré es tal como indica elesquema, pero se utlizaré el LED indicador i Arduino UNO asociado al PIN13, con lo que nos ahorramos instalar cables y componentes yy nos centramos en lo que es fundamental en esta gula, el funcionamiento del pulsador.OO CODIGO 0 SKETCH. El e6digo o sketch para utilizar un switch 0 pulsador y el led de Arduino es: 11 yg tats rec a ro he Me te weno st “Poms opti te mn neta.oto hen a PROTOTIPO. Con el diagrama de fitzing terminado y el cédigo elaborado es momento de crear el prototipo para lo cual necesitaras lo siguiente: * Breadboard o protoboard '* Cable de conexién electrénica Arduino. * Cable USB Resistencia 2200. + Pulsador o switch PROCEDIMIENTO: 1. Une fodos los components segin tu diagrama de fitzing 2. Carga el sketch con el IDE de arduin. 3. Vera la funcionabidad del proyecto 4. Prueba con dstintos peridos de tempo para realizar la lectura del esta del pulsador.| —_—$_$—$— rin, INTERFAZ DE ALIMENTACION EXTERNA. CHIPS 7805 Y 7808, La familia de circuitos integrados (IC) 78x y 78x son una gama de integrados dedicados a la regulacién de voltaje, hay muchas variables: regulables, jos, de tensién positiva o negativa, Pero el mas comin, y el que mayormente usaremos en el mundo de los PICs, es el famoso 7808, que es un regulador de tensién positiva de 5 Volts a 1A, la tensién justa y mucho mas corriente de la que necitan los PICs para funcionar. Se sabe que el buen funcionamiento del firmware que grabemos en el PIC esta sujeto, no sélo a la buena programacién que hayamos hecho a la hora de disearo, sino que también a una alimentacién fa, constante y regulada ala hora de ejecutart. Entonces la manera mas segura, econémica y sencilla de obtener ese voltaje, es la ulllzacion dde.un integrado regulador de voltae, y el 7805 es uno de los mas indicados ya que mantendra fija la tension en SV, siempre y cuando en su entrada sea desde 5V hasta 18V. Por lo tanto @ la entrada podremos despreocupamos de la alimentacién superando por mucho el voltaje de trabajo del PIC. Para trabajar con baterias sélo basta con conectar la entrada del IC (PIN 1) al terminal positivo de la misma y el comin (PIN 2) al negativo, a la salida tenemos SV que es la tension de trabajo del microcontrolador, podremos aftadir un capacitor entre GND y la salida, para eliminar cualquier fluctuacién de voltaje que pueda ocurrir, pero esto es siempre recomendable hacerlo con el microcontrolador independientemente del origen que tenga la alimentacién. uw7a0sAobln Apende eee a DIAGRAMA Se propone lograr el montaje de un regulador de voltaje que funcione convirtiendo una entrada de mas de 7V en una salida de 5V 6 6V segiin sea necesari. 0000000000 PROTOTIPO Con el diagrama de fritzing terminado es momento de crear el prototipo paralo cual necesitaras lo siguiente: Breadboard o protoboard Cable de conexién electrénica, Baterla de 9V. Conector de Bateria 9V. Chip 7805 Chip 7808 Diodo con polaridad 2 capacitores 0 con }?$ _ __—_$_$§— Sree,PROCEDIMIENTO. 41. Une todos los componentes segin tu diagrama de fitzing, 2. Verifca la funcionabilidad del proyecto. QDEVALUACION ‘MOTOR Dc. Existen varios tipos de motores (servos, motores de paso, etc.) el motor que tenemos al alcance normalmente es un motor DC. Son los motores que encontramos en juguetes, reproductor de CD's y DVD's, ete. Al aplicarle un voltae el motor gira y en ausencia de éste, ‘se detiene. Para cambiar la direccién solo hay que cambiar su polaridad. +1 sa s3 s2 s4 Segiin el diagrama mostrado, defina z.cuando los motores girarén hacia la izquierda y cuando lo haran hacia a derecha? Girardn hacia la izquierda: Girardn hacia ta derecha: Escriba, segtin esta plasmado en la imagen, qué nombre recibe el areglo de motores. mostrado: aLor. Es un tipo especial de resistencia, que varia de acuerdo a la intensidad de fa luz que incida en su superficie. Marca en la casilla correspondiente al LDR. LALEY DE OHM. Laley de ohm se puede recordar con faclidad utilzando el triéngulo mostradoa continuacion, donde se encuentran representadas, en forma gréfica, las tres magnitudes de cualquier Circuito, es decir el votaje (V), la intensidad de la corriente (I) y la resistencia (R), Usando como base el triéngulo de la Ley de Ohm, escriba las formulas para calcular el valor de:i QPProvecto FINAL Con cada una de las interfaces que se desarollaron el el transcurso de la unidad es momento de ser creatives y desarrollar nuestro proyecto final |. Crear el plan a seguir para la creacion de tu proyecto, Formar grupos de 5 0 6 integrantes. ‘Organizar y delegar las funciones que cada uno desempefiara dentro del equipo. Crear un prototipo que incluya al menos tres interfaces de las vistas en la unided. presentar documentacoin del desarollo del proyecto (trabajo escrito, fotos, actas, ect) presenta el proyecto terminado al docente el cual sera presentado en la exporobotica del colegio. oeOBJETIVO Introducir alos estudiantes en el manejo del programa Kompozer, las cistintas acciones y herramientas en su interfaz grfica para lograr la creacién de un sitio web localDiaato Web DISENO WEB PUBLICITARIO. CONCEPTOS BASICOS El disefio web publicitario comprende la creacién, maquetacién y diserio de publicaciones orientadas a dar a conocer un bien o servicio usando como plataforma el Internet. Entre las caracteristicas que debe reunir un sitio web orientado a la publicidad se pueden ‘mencionar: Tabla contenedora de categorias, tabla contenedora de mend, tabla contenedora de la publicidad que detalle con imagenes y textos llamativos los productos o servicios que promueve, dando al mismo tiempo una o varias opciones de compra o adquisicion. _Ejemplo de distribucion de los elementos de una pagina web publicitaria: PUBLICIDAD PRACTICA N° 1 Ientificando sitios web publicitarios. 1. Ingresa a Internet. 2. Visita los siguientes grupos de sitios web GRUPOT GRUPOZ [wwnvamazon.com wanufacabookcom www electronicaz001es.com | www.yahoo.es ]wwew,paginasamarilas.com.sv www.ebay.com |www.electronicajaponesasvcom — | wwwelsalvador.com 3. Crea una lista con cinco diferencias que encuentres entre los dos grupos de sitios web proporcionados. 4. Comparte con tus compatieros tus hallazgos. Bp]vat Wad - ete ey CONOCIENDO EL ENTORNO DEL PROGRAMA. INTRODUCCION A LA CREACION WEB. KompoZer es un editor de paginas web WYSIWYG (What you see is what you get — Lo que ves es lo que recibes). Su objetivo es facitar el desarrollo de paginas web. La ventana principal de KompoZer estéformada por varias barras, a continuacién se visualiza ta pantalla principal y sus partes: 1. Barra de Meni. 2. Barra de Redaccién 3. Barra de Formato. 4. Barra de Pestafas 5. Area de Trabajo 6. Barra de Modo de Edicién. 7. Bara de Estado 8. Panel de Administracién de Sitios. P@@$ A$ tert(ei Introduccién a la Creacién Web. La creacién web consiste en elaborar bocetos, plantilas 0 esquemas que serdn utilzados en las diferentes paginas que comprenderan el sitio web, las cuales deben reunir ciertas caracteristicas, entre las cuales se pueden mencionar: + Creacién de directorio ralz y subcarpetas (imagenes, videos, etc.) ‘+ Utiizacién y modificacién de plantilas. ‘+ Uso correcto de colores y fuentes. ‘* Distribucién adecuada de ls diferentes elementos y su contenido. untied) I | Z| Hota mundo PRACTICA. Explorando el entorno 4. Ingresa a Kompozer. 2. Dentro del dea de trabajo digita la frase: “Hola mundo’. 3. Utlizando fa barra de formato, modifica el color, tama alineactén ytipografa dela frase escita 4, Explora los diferentes aspectos del contenido de tu pagina usando la barra de modo de edicion 3} A](unt) = ola mundo a ea DISENO DEL ESQUEMA DE UN SITIO WEB. CONFIGURACION DE LA PAGINA. Cuando se habla del disefio de un sitio web, se refiere a la organizacién de las carpetas, imagenes, documentos htm, entre otros; para ello es necesario mantenerlos organizados en tun espacio local dentro de algin medio de almacenamiento, 6} ___$_$§_ $$ Genter,PRACTICA 1. (CREACION DE UN SITIO WEB LOCAL. 1. Ingresa a Kompozer. 2, Mend Editar > Configuracién de la publicacién, Aparecera la siguiente imagen. ‘Ala izqulerda, podemos observar los sitios ya definidos, y ala derecha las propiedades del sitio seleccionado. 3, Para crear un nuevo sitio, pero seleccionamos el botén Nuevo sitio. Nombre de sitio: Mi primer sito. Direcci6n de publicacién: D:IMi primer sitio. PRACTICA 2. ‘CONFIGURANDO MI PRIMER PAGINA 1. Para crear una pagina web pulsamos sobre el icono Nuevo en la barra de herramientas {de composicién. O desde el mend Archivo> Nuevo. Apareceré la siguiente ventana: = ue cate [newts ES]Dieato Wad 2. Seleccione la opcién un documento vacio y marque la casilla Strict DTD. 3. Presiona el botén Crear, Guardando tu primer pagina. 1. Archivo > Guardar como... (esta opoién preservaré el formato del documento, como estos del texto, imagenes, etc.) y aparecerd la siguiente ventana en la cual digkarés el nombre de tu pagina: Plantila, OD Beseeraieeter conto ‘Tesemefesene sage nine ince tteaedaccmas Ge) Geet) 2. Enla ventana que se muestra a continuacién elegirés la ubicacién de tu earpeta, la cual deberd ser la creada en tu dispositivo de almacenamiento: Vista preliminar en el navegador. ‘Siqueremos comprobar cémo quedaria nuestra pagina web en Intemet, podems reproducirla ‘con el navegador que tengamos instalado. Solo hemos de elegir Archivo > Visualizar Pagina ‘en el navegador o pulsar la tecla FS. PRACTICA 3. PROPIEDADES DE LA PAGINA 1. Formato > Titulo y propiedades de pagina, aparecera la siguiente imagen: Titulo Planta Autor Tunombre Descripcién : Plantila para generar las paginas web que formaréin el siti web. 8 }_$ a $5 arsGeren tocraten loctton teagan med Lie eaten 20 ecee E SINGER pm 2. Formato > Colores y fondo de pagina. Aparecerd la siguiente ventana, en la cual ‘moditicards los colores: Texto normal: Negro Texto de enlace: Naranja Texto de enlace activo: Verde medio Texto de enlace visitado: Rojo Fondo: Gris Actividad de Investigacion: Practica usando diferentes combinaciones de colores, sigue probando hasta encontrar las ccombinaciones que més te gusten.a Diao | Sere FORMATO DE TEXTO Y ENLACES Para modifcar las caractersticas de un texto, o cualquier otro elemento, se aplican desde la barra de Formato o desde el mend Formato. Sino lo tenemos visible seleccionamos Ver > Mostrar Ocular > Barra de Formato. Una vez seleccionado un texto el inspector de propiedades muestra este aspecto: Testo del cmp v) Gnd) vo IN JS wduavee vi Ms ge BI UEZIE En caso de que en la misma no encontremas la opcién deseada, dentro del meni Formato, ‘encontraremos las faltantes. PRACTICA. APLICANDO FORMATO AL TEXTO. 1. Ingresa a Kompozer. 2, Abra el documento creado anteriormente, llamado plantila. 3. Digtte el siguiente texto: “El principio de la sabiduria es el temor de Jehova los insensatos desprecian la sabiduria y la ensefianza." ~ Proverbios 1:7 4. Seleccione su texto y apliquele el siguiente formato: Fuente: Times New Roman Taman: Presiona 3 veces el icono: |g") Color: Purpura 5. Tendré que quedarte de la siguiente manera: “El principio de la sabiduria es el temor de Jehovd; Los insensatos desprecian (a sabiduria y la ensefanza,"~ Provertios 1:7o_o | PRACTICA 2. ALINEANDO PARRAFOS. 1. Digita el siguiente parrato: “Porque de tal manera amé Dios al mundo, que ha dado a su Hijo unigénito, para que todo ‘aquél que en El cree, no se plerda, mas tenga vida eterna”. Juan 3:16 2, Selecciénalo y aplicale alineacién Centrada, dando clic en el icono: | SE 3. Digita el texto: *Y aque! Verbo fue hecho carne, y habitd entre nosotros (y vimos Su gloria como gloria del Lunigénito del Padre), lleno de gracia y de verdad.” Juan 1:14 4. Selecciénalo y apicale alineacién Derecha, dando clic en el icono: | 38 | PRACTICA3. UTILIZANDO LISTAS. ‘Se ullizarén dos tipos de lstas: a) Listas sin ordenar, también llamadas vifletas y b) Listas cordenadas, también lamadas numeraciones. 1. Digita el siguiente texto: ‘Arduino UNO LeD RB Protoboard Cable USB tipo AB Resistencia 220 condos 2 saecena steer ction otis, EE Taniaino Seana aera! 2 teO Res | SESE ESS oo as Sea ee, cies 68 09¢§¢§$ $$ree a) Encender el CPU c) Escribir tu nombre de usuario -d) Escribir tu contrasefia A Siento be deta ar corer 7. Te quedara de la siguiente manera: ‘Los pasos para encender correctamente una computadora: Eseribietu contrasefia Enlaces. Los vinculos también llamados enlaces, links o hiper-enlaces son los que nos permiten ‘navegar, es decir, ir pasando de una pagina a otra. ‘Se puede usar como enlace un texto 0 una imagen, el procedimiento es sinilar en ambos casos, [Alleroan ew casa Defina los § tipos de enlace que pueden existir an una pagina web: + Inter. + Local + Extomo +De Correo *Aarchivos }$ $$ $e,Lato mob al PRACTICA4, GREANDO UN ENLACE EXTERNO. 1. Digita el siguiente texto y dale el formato que desees: Este es un enlace externo que me llevara al buscador de google. See Saeed = Lime Feeribe la dreccién 0 url de google: hti:/waw google.com sv : 3. Eltexto seleccionado cambiard y aparecerd con una linea indicando que es un enlace:MANEJO DE IMAGENES ‘Se pueden insertar imégenes GIF, JPEG, BMP y PNG en una pagina web. Cuando se inserta luna imagen, KompoZer guarda la referencia a la imagen en la pgina Una vez que insertamos una imagen en la pagina, podremos editar sus propiedades y personalizar su diseno, como la altura, anchura, espaciado y alineacién del texto ‘© Debemos analizar detalladamente el uso de Imagenes en nuestra pagina. Hemos de fjamos en su necesidad, resolucién, tamafio, formato, etc. El objetivo es lograr que la pagina se cargue lo mas rapidamente posible. ‘© Eltamafo del archivo de imagen depende de las dimensiones de la imagen y del niimero de colores que la forman, ‘+ Para colores puros con no més de 256 colores y graficos muy simples usaremos el formato GIF 0 PNG. ‘Para imagenes con mas de 256 colores usaremos el formato JPG 0 PNG24. ‘+ Usar las imagenes con su tamafio real, evitando que sea el navegador et encargado de reducirias. ‘No colocar demasiadas imagenes en una misma pagina, Si necesitamos mostrar un numero elevado de imagenes, lo mejor es usar una version muy reducida de las mismas (thumbnails © miniaturas) a modo de indice y enlazar con paginas individvales donde se ‘muestre cada imagen por separado. © Aldisefiar ta estructura del sitio utlizar una carpeta para las imagenes muy usadas a lo largo de las diferentes paginas del sitio. ‘© Usar el atributo ALT en las imagenes, para faciitar la comprensién del contenido a los, usuarios y alos robots usados por los buscadores para indexar nuestra pigina. BePRACTICA 1. INSERTANDO UNA IMAGEN Y USANDOLA COMO ENLACE 1. Abre la pagina web creada anteriormente y digita el siguiente texto en una linea nueva, le formato como se muestra: pods ae ees imapen ec 2. Para insertar la imagen, nos ubicamos una linea por debajo del texto anterior y damos clic ‘en el icone de imagen, aparecerd la siguiente ventana en la cual ubicaremos la imagen que insertaremos y llenaremos los campos como se muestra: 3. Para que se convierta en un vinculo, daremos clic en la pestatia Link y llenaremos el ‘campo con la direccién: htip:inww.qoogle.com.sy, nos quedara de la siguiente manera: Enera web agelcation loa, nei adds, rsdecta are chr oc Heading on the popup it hiponmgooglecomse é 4, Aldarle clic en OK nos apareceré el resultado final, sélofaltaré ver nuestra pagina en el navegador web. (Were a]Disoto Web _ 8h > G+ wy Pegs Saguidode Herons Qe $0 Bd {sles un onage exer que me lleva al buseador de goal PRACTICA 2. APLICANDO ATRIBUTOS DE LA IMAGEN. 1. Da clic derecho sobre la imagen y selecciona la opcién “Image and Link Properties" Remave Named Anchors Image and Link Properties. [_Eee Link in New window | 2. Emla ventana que aparece lo primero que haremos es activar la opcién “Custom Size” ppara poder establecer el ancho y el allo de nuestra imagen. La opcén *constrain" permite que nuestra imagen mantenga la relacion de aspecto por lo cual si esta activa no se nos deformard. Le aplicaremos los siguientes valores:€ Diaato Wob 2. Ademés del tamafo estableceremos el espacio antes y después de nuestra imagen y la forma en que se alineara en nuestra pagina en relacién con el texto, esto lo logramos desde la pestafia “Appearance’ y estableciendo los siguientes valores: 7) Align Textto Image Spacing LLefe and Right: poets | Top and Bottom: 28 | pbeels Solid Borden: Height: 255 4, Y obtendremos e! siguiente resultado: sadeo |] Seen emronnnns rslnets bade eae puedes dare clea esta imagen GRagleDloofo Web = PRACTICA 3. USANDO UNA IMAGEN COMO FONDO DE PAGINA. 1. Clic en Format > Page Color and Background, 2, En la ventana que aparece selecciona la imagen que deseas ullizar de fondo en tu pagina, desde la opcién: tackground image imagenes fiondo3png Selecciona una imagen que no posea muchos colores, ya que esto haria que tu pagina se viera muy recargada. 3. Alseleccionar la imagen deseada, da clic en OK y tu pagina se vera como esta:TABLAS EN UN SITIO WEB Las tablas no solo son alles para mostrar lstas de datos, son también un elemento primordial para maquelar las paginas web, o sea, para colocar con cierta libertad los elementos que forman la pagina web. Las tablas nos permiten organizar y distibuir los espacios de una manera éptima. Por ejemplo no permite poner el texto en columnas como en los periédicos, prefiiar los tamafios ocupados por distintas secciones de la pagina o poner de una manera sencilla un ple de foto a una imagen. En el momento en que queremos mostrar paginas webs atractivas y féciles de leer nos veremos en la necesidad de utilizar las tablas. Podemas definira una tabla como un conjunto de espacios organizados en filas y columnas. La interseccién de las fas se llama celdas. Una cuadricula es una tabla, en cuyas celdas podemos poner cualquier elemento HTML, desde texto hasta imdgenes y otros elementos multimedia, Algunos atributos propios de las tablas son: + Alto y ancho (helght y width): Pueden medirse en pixels 0 en porcentaje del elemento contenedor (width= "100%" indica que ocupa el ancho del elemento en el que esta colocada, ‘+ Border (borde): Anchura del borde que rodes a la tabla. Si-es 0 el borde no se ve ‘© Gellpadding (relleno): Margen del contenido de cada celda, Se mide en pixels. + Cellspacing (espaciado): Espacio entre las celdas. Se mide en pixels. T Relleno letta |. Borde| 1 +} Espaciado| S€olumnaDiaoto Web 3) INSERTANDO UNA TABLA DESDE EL BOTON “TABLE” PRACTICA 1. INSERTANDO UNA TABLA RAPIDA. 1. Crea un nuevo documento y aplicale formato a la pagina (colores de ‘uente, tamafo, tipo de fuente, fondo, ete.) 2. Da clic en el botén “Table” y selecciona las celdas necesarias para crear una tabla de 3x3, al soltar aparecerd la tabla insertada: PRACTICA 2. NSERTANDO UNA TABLA DEFINIENDO SUS ATRIBUTOS. 1. Dac en et boton “Table” 2. Selecciona la pestafia “Precisely’, aplica los atributos:Diooio Web MODIFICANDO TABLAS. Después de insertar la tabla en nuestra pagina podemos modiiicar sus caracteristicas mediante el cuadro de didlogo “propledades de tabla”; este cuadro nos permite por una parte modificar las propiedades generales de la tabla y por otra las propiedades de as celdas. Para usarlo la tabla o las celdas deben ser previamente seleccionadas. Seleccionar una tabla 0 sus elementos es tan sencillo como colocar el cursor dentro de la tabla (hacer click con el bot6n Izquierdo del ratén dentro de la tabla) y a continuacién desplegar el mend Tabla y elegir la opcién Seleccionar, dentro de ella tenemos todos los elementos de la tabla seleccionables: Tabla, Fila, Columna, Colda, Todas las coldas. ‘También podemos llevar a cabo esta operacién pulsando sobre la tabla con el bot6n derecho del ratén dentro de la tabla. Esto nos ofrecera la opcién Seleccionar Tabla. Us acl ela drecha Gene alr fondo do aba at. Propiedades de la tabla. Una vez seleccionada la tabla debernos abrir el didlogo de propiedades. Esto se consigue mediante cualquiera de los tres métodos: + Elbotén derecho det rat6n + Elmend Tabla. +E] botén tabla de la barra de menisCualquiera de estas opciones nos lleva al cuadro de dilogo propiedades de fa tabla en el que \vernos claramente diferenciados cuatro apartados: el tamafio, los bordes y el interineado, la alineacién, y el color de fondo. — i — Er thet 1 beeetiateyne ie 3) ee En el apartado Tamafio, podemos modificar tanto el numero de fllas como el de columnas introduciendo los valores en las casillas coespondientes. También es posisle modificar la altura y anchura de la tabla, especificando el valor absoluto en pixeles o el valor relativo en tanto por ciento de la ventana donde se mostrara la tabla. fhe 3 Aue pak ns: 2 han sik a 9Dinoto Wb ineacién de la tabla, que puede ser a la Izquierda, en el Centro, 0 a la Derecha del elemento o ventana donde tengamos la tabla. También podemos reservar un espacio encima, debalo, a la derecha o a la zquierda de la tabla para posteriormente, una vez cerrada la ventana de propiedades, ponerle un Titulo a la tabla. Aineadién delatable: Izquerda | Ikulct_Ninguno ‘Sobre la tabla olor foro: (—_] Peer aie #0 vee Bap taba El time de los apartados nos permite poner color al fondo de la tabla, para ello pulsamos en el rectangull y se nos abre la ventana donde elegir el color.‘Color de fonds de ts tabla PRACTICA 3. MODIFICANDO LOS ATRIBUTOS DE LA TABLA. 1. Selecciona la Segunda Tabla (Tabla>Seleccionar~Tabla) | 2. Da clic derecho sobre la tabla y luego elige en el menii contextual Propiededes de Tabla’. En la siguiente ventana aplica los siguiente valores ‘order ad pang owen 5 pis Sprcing: [7 pimls between cals nde: [7 pds oman ltd nd contre ThbleAigamere: [Commr =] Copson: [Tene =] 3. Da clic en el bot6n Aplicar para que veas los cambios efectuados y luego sida clic en el botén Aceptar. La tabla quedara como se muestra: nocturnal YaaPropiodades de De forma similar a como modificamos las propledades de las tablas podemos modificar las propiedades de celdas individuales. Se usa un cuadro de didlogo parecido al de las propiedades de tabla y al que se accede de manera similar. Picamos con el botén izquierdo ‘sobre la celda que vamos a modificar y luego seguimos uno de los siguientes métodos: + Elbotén derecho del raton en la celda. + En el meni Formato: Propiedades de Celda de Tabla. + El bot6n tabla de la barra de mends. ‘Sea cual sea el método usado llegaremos a un cuadro de dilogo con las propiedades que podemos modiicar en la celda seleccionada. El cuadro se parece bastante al usado en propiedades de Tabla. Aqui podemos modificar cinco apartados: La seleccién, el tamarto, la alineacién, el estilo y ajuste, y el color de fondo. ‘encontramos un meni desplegable para indicar silas modificaciones que vamos a realizar se van a aplicar sélo a la celda seleccionada, a la fila o a la columna donde a la que pertenece esa celda (como si hubiéramos seleccionado toda la fila 0 toda la colurna), (@o tp]Diaoto Web " El apartado Tamafio funciona igual que las propiedades de la tabla, pudiendo introducir en altura y anchura los valores de tamafio absoluto en pixeles o relatives en % sobre el tamario de la tabla, El alto de la celda afecta a toda la fila y el ancho a toda la columna. La Alineacién del contenido nos permite dos opciones: ‘+ Alineacién vertical: En la que el contenido de la celda puede situarse en la parte superior, cen el centro, o en la parte inferior de dicha celda, + Alineacién horizontal: En la que el contenido puede ser situado a la izquierda, en el centro, ala derecha, o justifeado por igual a ambos bordes laterales de Ia tabla. Alineaciomes [aguerda Centro Derecha bed ae Inferior En cuanto al estilo de celdas tenemos dos posiblidades, celdas normales, que seran la mayoria de lae celdae de Ia tabla, y coldas cabecera (euele aplicaree a la primera fla o la primera columna) cuyo contenido apareceré en mayor tamafio y en negrita El apartado Ajuste del texto ofrece dos opciones, una que el texto ocupe en la celda una sola linea, sin importar su longitud, 0 que ocupe varias lineas dentro de la misma celda de forma automatica, El Ultimo de los apartados corresponde a la posibilidad de cambiar los Colores do fondo do las coldas, ya sea de forma individual, o combindndolo con el apartado selecciin, hacerlo por filas 0 por columnas, segtin el disefio que hayamos pensado para nuestra tabla, Su uso es simiar al que hemos visto en propiedades de tabla. PRACTICA 4 APLICANDO FORMATO A LAS CELDAS 1. Selecciona todas las celdas de la tabla: Formato>Propiedades de Celda de Tabla IA]@ $$$ Rr,Dieoto Wab 2. Selecciona la opcién Filas y apical el siguiente formato: “ection ie = srrent changes will be applied peious | now | Seton emerging are stetion ‘Content Alignment 1 Yerticak — [Midas =] T Hodgonta [Eenter =] cen spe [Rade =] teewrp: [wor =I 7 Bectground Coton ‘Ure checkinones to determine which properties ore spplied je ee | ee) 3. Al final tendrés una tabla con el siguiente aspecto: DISENO DE FORMULARIOS Para crear formularios con KompoZer, abriremos el programa ¢ itemos a la opcién Insertar > Formulario > Definr formulario. Entonces aparecerd la ventana Propiedades del formulario: Rellenaremos los datos del Nombre de formulario; en el campo URL de la accién pondremos en principio: http:lforms.melodysoft.com y configuraremos el servicio para que envie las cencuestas que hagamos a los usuarios de nuestra web a un correo determinado; en método seleccionaremos la opcién POST, es decir, enviar; fnalmente, pulsamos Aceptar.Inmediatamente veremos que el programa ha creado un érea punteada, como una celda de tabla de color celeste. Esto nos indica que el formulario esta creado con el método de recogida de datos que le hemos especificado. Dentro de esa area comenzaremos a colocar los elementos que nos permitirin recopilar los datos que consideremos de interés para nosotros sobre os visitantes a nuestra web. (iecieeeeees | Para comenzar a crear los botones y los textos que nos servirin para recoplar informacién hharemos lo siguiente. Hacemos clic con el ratén dentro de ese area puntesda en celeste, escribimos por ejemplo Nombre y seleccionamos la opcién Insertar > Formulario > Campo de Formulario. Rellenaremos la ventana que nos salga con los siguientes datos: elegiremos lun campo de texto, lo nombraremos a efectos de poder reconocerlo posteriormente en el formulario y pulsaremos aceptar. Prepledades get campe det termatarte ES eo edteanen, ‘Nuestro formulario iré adquiriendo esta apariencia. 8—@ $A _§_§_§_§_$__$ Serres,Nombre: Escribe Aqui tu nombre | Posteriormente podemos repetir la operacién para agregar otro campo que sea apelidos y ireccién de email, Repetimos la misma operacién anterior y nombramos a cada una segin cel dato que queramos recopilar. ‘Nombre: Escibe Aqu tu nombre) Apelides: sxacyyy Correo Hlectrénico. elguno@exemple es | ‘Tras estos datos podremos colocar ites para que el visitante elja una entre varias opciones © varias a la vez; colocamos la pregunta ZQué te parece esta web? Y aftadiremos los sigulentes items, cada uno con su opcién: Para conseguir estos items, recurriremos a Insertar > Formulario > Campo de Formulario y en el tipo elegiremos casilla de verificacién. ‘Accada una de las casillas le asignamos el mismo nombre que pongamos en el formulario, en este caso son opiniones sobre nuestra web.Para acabar este sencillo formulario podemos colocar un cuadro de texto para que nuestro Visitante nos escriba libremente alguna sugerencia o cualquier otra cosa que le solicitemos, | cuadro de texto seria la siguiente: Insertar > Formulario > Area de La mecénica para Texto. Las propiedades de esta area de texto serén las siguientes: SS | PS Ss ——=D a Y lo que obtendremos seré algo parecido a esto: 101A i$ $$$ Serres,in posible que el visitante envie el Finalmente solo quedaré insertar los botones que hi formulario o limple la informacién del mismo por si se arrepiente de enviarlo 0 por si se equivoca en la consignacion de agin dato. Para insertar los botones haremos lo siguiente: Insertar > Formulario > Campo de Formulario; seleccionaremos la opcién botén de envio y botén de restablecimiento posteriormente, de forma que completemos el formulario. A cada uno de los botones pondremos sus propiedades.Elformulario quedara de esta manera: Nombre Eécibe\AquNinomire| Apelidos 00 Correo Electrénice: lguns@exsmple es | Qué te parece esta web? 102} $$$ ests,QDEVALUACION Lee e! enunciado y luego subraya la respuesta correcta, KompoZer es un editor de paginas web WYSIWYG (What you see is what you get), Su objetivo es faclitar el desarrollo de paginas web. {Cual es la traduccién al espafiol de WYSIWYG? a) Lo que ves es lo que recibes. b) Lo que insertas es lo que imprimes. ©) Lo que digitas es lo que obtienes, De acuerdo a lo estudiado, escribe los nombres de cada una de las partes de la ventana de Kompozer. 103Los vinculos también lamados enlaces, links © hiper-enlaces son los que nos permiten ‘navegar, es decir, ir pasando de una pagina a otra. Enumera algunos tipos de enlace que se pueden encontrar dentro de una pagina web. ‘I 2 Podemos definir a una tabla como un conjunto de espacios organizados en flls y columnas. La interseccién de las filas se llama celdas. Una cuadricula es una tabla, er cuyas celdas podemos poner cualquier elemento HTML, desde texto hasta imagenes y ofos elementos multimed Eseribe 5 usos que pueden darse a las tablas en un documento web.€ Dieoto Web i eoecre, FINAL rea un sitio web compuesto de por lo menos 5 paginas, entre las cuales deben contar: Pagina principal o indice. Pagina de contenido. Pagina con imagenes (galeria). Pagina de recursos (webgrafia). Pagina de contacto (formularo). El desarrollo del proyecto debe cubrir los siguientes aspectos: Definir of tema del sito web a crear. Establecer la estructura del sitio web. Recopilaridescargar los recursos necesarios para la creacién del sitio web, respetando los derechos de autor. ‘Asignar formato a las paginas web segin la estructura y temas presentados. Comprobar los enlaces externos (silos hubiese) Corregirfagregar 0 of inar elementos en caso de ser necesario Finalmente se debera presentar el proyecto terminado y corregido mediante una ‘exposicién, usando los recursos tecnoligicos necesarios para el mismo. 105UNIDAD Ci) Aa. ‘Ate Visual Mutimocia INTRODUCCION AL ARTE VISUAL MULTIMEDIA. Es bien conocido el impacto que tiene en la actualidad el desarrollo de las tecnologia de la informacién y el potencial creative que implican los programas de generacién, tratamiento y manipulacién técnica de la imagen-digital y que estos cambios estan transformando los ‘modos de produccién y difusin de las précticas artistcas, fusiondndose con otros sectores profesionales y econémicos del campo de la informacién, donde la imagen, lo visual, toma un papel relevante, cada vez més importante. El artista multimedia, en vista de lo anterior, es aquella persona que produce arte usando para ello los medias digitales. Pero a todo esto {Qué es o qué comprende la multimedia? Multimedia es un término muy utiizado desde comienzos de los 90, y esta relacionado ‘con: informatica, telecomunicaciones, edicién de documentos, electrénica de consumo, cine, television, etc. ‘Multimedia se compone de combinaciones entrelazadas de elementos de texto, arte grafico, sonido, animacién y video. Cuando usted permite a un usuario final controlar certos elementos ¥y cudndo deben presentarse, se le llama multimedia interactva, PRACTICA. ‘CONOCIENDO EL ARTE MULTIMEDIA. 1, Ingresa al navegador web y escrbe la siguiente url itp //artesvisualesaltamira,bligo0. 2, Observa cada uno de los trabajos mostrados y toma notas en tu cuaderno identificando los recursos utllzados en cada una de las obras presentadas. 2. Realiza un cuadro sinéptico agrupando bajo la categoria correspondiente las obras Vistas (Arte Digital Multimedia, Arte Plastico, Escultura con Material Reciclado, Fotomontaje, etc.) Gt 79]‘Ate Vieua Mulino a 4. Tomando como ejemplo una de las obras anteriores, realiza un esboz0 o bocato de tuna obra propia que deseas llevar a cabo, EDICION DE IMAGENES EN LINEA La mayoria de las personas no estén en posicién de comprar un software caro de edicion de imagenes. Si no tienes Photoshop o un editor bitmap competente a mano, Pilr te ofrece poder trabajar en linea con fotografias, de una forma cercana a como lo havta el programa de Adobe, PPixlr es un editor de imagenes online simple y sencillo de usar, ideal para realizar algunos retoques a nuestras imégenes como: cambiar tamafio, rotar, recortar, invertr, polerizar, cambiar brilo y saturacion, seleccién magica, y muchos mas efectos. La interfaz es amigable con el usuario, que hasta parece que esti trabajandoen el escritorio de tu computadora y no en el internet Pixir viene con algunas opciones de Photoshop, soporta capas, offece distinlos tamarios de pinceles y de las herramientas en general, y permite distintos modos de configurar cada una de elas, Las imagenes se pueden guardar en formatos en JPG y PNG con sus respectivas opciones. de calidad, y guardarias directamente en tu disco duro, usb, ete. Para empezar a trabajar lo primero que hacemos es ingresar a la pagina web ‘wunw-pixi.com y nos aparece la siguiente pantalla. eel a aa om the newest member of the Platr famlly.‘Auto Viual Mutimodia Existen 3 alternativas dentro de ptr, las cuales son: UR ano ne an (eq Pa one) 4 cen iv Nae Neer PRACTICA1. CONOCIENDO EL EDITOR DE PIXLR 1. Ingresa a pixir usando el navegador web. 2. Selecciona la opcién Esltor, dando clic enelbotén: QUENEIED 3. Aparecera la sigulente ventana, en la cual debes elegir el upo de accion a realizar, en esta ocasién selecclonaremos la primera opcién Crear una nueva imagen 4, Los parametros que le aplicaremos a este nuevo lienzo seran los siguientes:‘Arte Vieual Multimedia 5. Luego aparecera la venth = TRABAJO ELEMENTOS DE PIXLR EDITOR. 4) Barra 0 Caja de Herramientas: Esta ubicado por defecto a la izquierda de la ventana, Las herramientas son de mucha utilidad en el manejo de Pixlr ya que cen ellas podra controlar el color, las capas, canales, trazados, etc.i) La herramienta Recortar: Con esta herramienta podemos efectuar recortes en las imagenes, Una vez realizado el recorte de alguna imagen observamos que la parte contenida en el marco es lo que se conservaré, la otra parte de la imagen queda més oscurecid ‘Aunque el marco no se adapte a nuestras necesidades, no nos preocupemos, més tarde se puede ajustar. El marco no tiene que ser preciso. Podemos ajustarlo posteriormente. i) Herramienta Marco: Podemos realizar selecciones en forma de rectangulos, elipses, filas y columnas de un pixel |i) Herramienta Tampén de Clonar: Se utliza para clonar partes de la imagen, a aN as aa Lo cw RY ay BS > iz) ~~ A VQ ')— Herramienta Mover: Permite mover una seleccién que se haya realizado en la imagen. El area seleccionada se desplaza con este bbotén hasta el lugar indicado por nosotros, y en su lugar aparece un rectangulo, elipse o circulo blanco o del color que esta seleccionado como fondo. v) Herramienta Lazo: Se podra realizar selecciones mas precisas que las que se ha visto anteriormente, vv) Herramienta Varita.: Podemos seleccionar un rea coloreada de forma coherente. Por ejemplo, una imagen o parte de olla que tenga un coler igual 6 similar sin necesidad de trazar su contomo. En la barra de Opciones podré especiticar la ‘gama de colores o tolerancia para la seleccién de la Varita magica, vi) Herramienta Pincel: Permite realizar trazos cual los efectuados con un pincel, permitiendo elegir la forma y la intensidad del mismo. vil) Herramienta Lapiz: Se podré realizar lineas a mano alzada con borde irregular, |x) La herramienta Ojos rojos: Tiene la funcién de pintar sobre un color para transformarlo en otro a nuestra eleccién, Su uso es muy sencillo, s6lo tendremos que seleccionar fa herramienta y hacer clic sobre cada uno de los ojos que ‘queremos modifica. x) Herramienta Borrador: Elimina los pixeles cuando pasa el cursor sobre ellos (siempre manteniendo pulsado el bot6n izquierdo del ratén). Los pixeles que Get‘Ato Vial Mutimodia x) ») wi) il) elimina se cambian por el color que tenga seleccionado como color de fondo siempre y cuando trabaje con el fondo de la imagen o con una capa transparente previamente bloqueada, en otro caso seré la transparencia la que ocuparé el lugar de los pixeles borrados. Herramienta Bote de pintura: Permite rellenar los pixeles adyacentes que tienen valores de color similares a aquellos en los que se seleccionan haciendo clic. E! ‘color que se aplicard es el que tenga seleccionado como color frontal en fa barra de Herramientas Herramienta Degradado: Crea una fusién gradual entre varios colores. Pixir dispone de una serie de degradados preestablecidos pero es posible crearlos a gusto del usuario. Herramionta Desenfocar: Se utliza para suavizar las areas dofinidas de una imagen, el efecto que se consigue es disminuir el detalle de la misma, Herramienta Difuminar: Crea un efecto similar a cuando se pasa el dedo sobre la pintura hiimeda. Funciona copiando el color en el lugar donde se coloca el cursor, al presionar el botén izquierdo del ratén arrastrandolo sin soltarlo, se extiende e! color en el sentido en que se efectia el arrastr. Herramienta Enfocar: Permite aumentar la claridad o el enfoque suave en las 4roas 0 bordes. Herramienta Esponja: Se utiliza para cambiar sutimente la saturacion de color de un area. Cuantas mas veces pase el pincel por la misma area més se modifica la saturacién. Si trabaja en modo Escala de grises, al utlizar esta herramienta aumenta 0 disminuye el contraste desplazando niveles de gris desde o hacia el aris intermedio, Herramienta Texto: Es muy atil en la creacién de textos para introducirlos en las imagenes. Puede crear desde una simple linea de texto a parrafos completos. Herramienta Mano: En algunas ocasiones, la imagen puede ser mes grande que la ventana que la contiene, entonces aparecen las barras de desplazamiento, pero J] Es‘Ato Views! Mutinedia Pixir pone @ nuestra disposicion la herramionta Mano para que podamos desplazar, la imagen por el rea visual de la ventana. xix) Herramienta Zoom: Esta herramienta sirve para ampliar 0 reducir el tamafio de la imagen actual. Al pulsar en esta herramienta el cursor tomaré la forma de una lupa. Como podemos observar hay un signo mas (+) dentro de la lupa, to que significa que cada vez que hagamos clic en la imagen ésta se ira ampliando, b) Barra de Monds: Desde aqui podemos acceder a diferentes opciones del mend, como por ejemplo abrir una imagen, guardalo, cerrarto. ¢) Capas: Las capas permiten trabajar con un elemento de una imagen sin modificar los, otros. Las capas podrian considerarse como hojas transparentes, apiladas una encima de otra. A través de una zona de una capa donde no haya imagenes, puede ver las ccapas inferiores. Trabajar con capas permite modificar la composicién de una imagen si cambia el orden y os atributos de las capas. Ademés, podré crear efectos especiales y sofisticados utiizando las capas de ajuste, las capas de relleno y los estilos de capa. 44) Historia: En nuestro registro en el cual aparecen en orden cronolégico todas las acciones realizadas desde que se inicié la creacién 0 ediccién de l‘ta Vial Muted a USANDO PIXLR EXPRESS. El programa pixtl express es una herramienta de retoque fotogrifico de funcionalidades bésicas, como son la edicién, rotacién y recorte de imagenes y correcciones simples. Sus posibilidades se clasiican en tres categorias: basicas, alustes y efectos. La utiizacién de esta aplicacén ftogréfica se puede divdr en tres pasos prncipales 1. Seleccionar. 2. Editar. 3. Guardar. ‘Acontinuacién se verd cada una de elas. PRACTICA2. MODIFICANDO FOTOGRAFIA EN PIXLR EXPRESS. 1. Ingresa al navegador web y digita la ur: yew pil.com, selecciona la opeién Pix Express dando clicen el botén Launch Web App 2. Seleccionar foto. Al iniciar la aplicacién, debemos de seleccionar la fuente de la foto Existen cuatro posibles opciones. En nuestro caso seleccionamos la imagen mediante la pein Browse. ates ‘Aqui nuestra imagen de practica:‘Arte Vowel Muted, 3. Cuando aparezca nuestra imagen, realizaremos los ajustes necesarios para que luzca ‘mucho mejor, para lo cual damos clic en el botén @ ‘Se mostraré la cinta de opciones de ajuste, la cual presenta el siguiente aspecto: Dependerd de las necesidades de cada imagen, asi se aplicardn los efectos, por ejemplo ‘una imagen osoura necesitara que se le aplique més brio, una Imagen dafiada o con lineas indeseables tendr que ser “sanada’ con la opcién Heal 4, El primer paso para “retocar’ nuestra imagen seré eliminar las pequefias flores que aparecen sobre el rea de césped, lo que conseguiremos usando la herramienta Sanar (heal) elegimos la opcién Manchas (Spots) ajustamos el tamafio del pincel con la opcién ‘Tamafo de pincel y damos clic en las flores a eliminar, al terminar tendremos la siguiente imagen:Cuando estemos satisfechos con el esutado damos cic en EAI 5. Acontinuacin le apticaremos un flo que nos permit enfocar ls rst y étuminar el ret, toharmos con opcion ys parmtos serine sigue 6. ost sue pasos aa un fc cana epon EB ean ca poscons oe sioner al apa a tes lb Seleccionamos Vintage y luego la opcién Doris. damos clic en Aplicar y tendremos el siguiente resultado: 7. Le aplicaremos una Sobrecapa dol sta = | 6 }@$AARA@a$aam a) teers‘Arto Viual Multimedia Elegimos Light paint > , luego de aplicarlo seleccionamos nuevamente una sobrecapa en este caso sera Neon y después Love, obtendremos el siguiente resultado: 8. Para terminar le aplicaremos un marco usando la opcién Borders dentro de la cual seleccionamos Default y luego Nolaroi, ta reflejamos verticalmente con el botén , damos ‘en aplicar y obtendremos el resultado final: a 1. Damos alc ene! botsn EEEIEEEEIEe ponemos otro nombre y hemos finalizad. ACTIVIDAD EN CASA. + Ingrosa a Pink. + Sube una imagen propia al Editor. + Aplicale efectos, ajusta la calidad y colores de la imagen a tu gust. + Agrega un marco y luego siibela a tu perfil de facebook. 05 $ SS‘te Vin! Mutinecia a EDITANDO VIDEOS EN LA NUBE Con el Editor de video, puedes: ‘+ Combinar varios videos e imagenes que hayas subido para crear un video nuevo. ‘* Recortar tus lips para personalizar su duracion. ‘© Agregar misica a tu video a partir de una biblioteca de pistas aprobadas. + Personalizar clips con herramientas y efectos especiales. ‘© Puedes acceder al editor en hip:/wmmw youtube. comieditor Con estas herramientas, puedes combinar clips para crear nuevos videos y publicarlos en ‘YouTube con un solo clic. PRACTICA. Conociendo youtubeditor 11. Accede a tu cuenta de YouTube. (Si posees una de GMail automticamente tendrés una ‘en YouTube) 2. Haz clic en el bot6n Subir un video situado en la parte superior de la pagina, 3. Haz clicen Editar en la parte derecha de la pagina de subida, debajo del "Editor de video". 4. Aparecerd la ventana de Edicién:a ‘Ate Visual Muted ‘Todas tus subidas se agregan automaticamente al Editor de video y se pueden usar como Un cli. En un proyecto para crear un nuevo video puedes agregar hasta 50 clips y 500 imagenes, En el caso de que no hayas subido ningun video a tu cuenta de Youtube lo puedes hacer de forma sencilla dando clic en ta opcién Subir jleccionas tu archivo y te aparecera la siguiente ventana: i LLuego ya podrés editarlo como mejor te parezca. Cuando empieces un proyecto debes tener el cuidado de colocerie un nombre acorde al mismo, el cual se escrbe en la casila [jas > wpm oa 5. Entre los parémetros a editar tenemos los siguientes: Correcciones ripidas: Permite modificar de manera semi automatica los parémetros generales del video (brio, contraste, velocidad, et). Al activar la opcién “Ver efectos junto al video original” se muestra la pantalla dividida del video original y a su lado el video con las correcciones efectuadas. Filtros: Permite seleccionar diferentes fitros preestablecidos que hardn més llamativo nuestro video. Tar‘Ate Vowel Mutimedia 2 i eee nee ee Texto: Permite insertar texto estético dentro de nuestro video. ‘Audio: Dentro de este apartado se puede controlar lo minimo de un archivo de audio previamente seleccionado y agregado a nuestro proyecto, el cual est disponible dentro de la opcién Sonido, la que deberemos arrastrar al érea de audio de nuestro proyecto Para finalizar le damos clic al boton [ETE |CTIVIDAD EN CASA, + Sube tres videos mas. + agrégales fitros, + texto que describa acerca de la finalidad del mismo ‘+ Publica un vinculo a cada uno de tus videos en tu cuenta de facebook. CREANDO VIDEO TUTORIALES Para crear videotutoriales, necesitamos un software que permita captar lo que sucede en la pantalla y las instrucciones de la voz. Sies algo més sofisticado, puede marcat algunas areas de la pantalla con algin color y generar transiciones interesantes entre imagen e imagen El disefiar un videotutorial se llama screencasting o videocaptura ‘Screencastomatic: es una aplicacién online que permite grabar nuestra pantalla sin hnecesidad de descargar software alguno. Tras flmar el video, se puede subir a youtube y publicar como se requiera. Se puede usar de manera gratuita con varias limitaciones. Como por ejemplo: No permite administrar mas de un video a la vez. De todas formas vale la pena ‘conocer PRACTICA. Conociendo Screencast-O-Matic. 4. Ve a Screencast-O-Matic. Lo encontraras en: hitp:/wwww screencast-o-malie.com. i —‘to Vial Mutimedia a 2. Presiona el botén “Iniciar Grabacin’. [Bren seren cnn ecranpmVinorna oe [cerns wna waasio ER [Siemens ar Ssnesee set pis 3. Te aparecerd una caja con un borde punteado: 4. En el mend desplegable de la parte inferior del cuadro, selecciona "Pantalla Completa”. Alternativamente, puedes arrastrar los pequefios cuadrados en las esquinas para ajustar paca | 123‘ie View! Miedo a 5. Presiona el botén de grabar para iniciar la grabacién. El screencast grabara tu voz si quieres describ lo que ests haciendo, ian ie 6. Presiona Alt + D para detener la grabacién. 124a. ‘Ato Viaual Multimedia, 7. Mira la vista previa del screencast. 8. Ala derecha del video, elige .que quieres hacer? weearsage eCémo organizo un videotutorial? Crear un videotutorial puede parecer simple, pero como toda herramienta de aprendizaje, requiere objetivos definidos, estructura y organizacién de los contenidos. Un videotutorial: Es una gua pasoa paso que busca enseftar cbmo se realiza una determinada ‘area (BpEtapa 1: planificacién de la actividad. 2Qué voy a ensefiar? Esta etapa es previa al inicio de la grabacién. Implica revisar para qué, 2omo y porqué debemos disefiar un videotutoral. Sugerimos que te cuestiones si hay otras alternativas de ‘ensefiar lo mismo de manera que lo que crees sea efectivamente la herramienta indicada para lograr tus objetivos. Pensemos estas preguntas antes de partir: ‘= ¢Para qué necesito disefiar un videotutoria? © @Para qué serviré mi videotutorial? * 4Porqué un videotutorial yno otra estrategia? Etapa 2: definir el software y guién El software a seleccionar para esto es de vital importancia. Una vez que lo tangas hay que ‘trabajar un qui6n que contenga: Tituloy saludo, objetivos del tutorial, contenido y conclusiones. 1. Titulo y saludo: Presenta quien esta detras de la pantalla y el titulo de la actividad 2. Objetivos: Se determinan en este espacio los objetivos propuestos: para qué le va a servir ‘al espectador ver ese video tutorial. 3. Contenidos de! tutorial: Se desarrollan paso a paso las indicaciones para desarrollar una, determinada actividad, 4. Conclusiones: Se comentan qué se logré al terminar el videotutorial. En este espacio deja los contactos explicitados para que quien tenga dudas te escriba Lo que nunca debes hacer al editar un video tutorial: ‘© Dejar a interpretacién del espectador algin paso. © Saltarte etapas. 6} aaa Et‘Auto Vieual Mutinedia ‘Ser poco claro 0 ambiguo en el discurso. + Creer que el videotutorial esté terminado, Los errores son siempre varios, y vale la pena

You might also like

• Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space Race

  

  From Everand

  Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space Race

  Margot Lee Shetterly

  Rating: 4 out of 5 stars

  4/5 (895)
• B Watermarked PDF

  

  Document72 pages

  B Watermarked PDF

  angel017

  No ratings yet
• The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life

  

  From Everand

  The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life

  Mark Manson

  Rating: 4 out of 5 stars

  4/5 (5794)
• • Magazines
  • Podcasts
  • Sheet music
• Crystals and Minerals Kit Spice Up Your Science! Teacher Guide

  

  Document52 pages

  Crystals and Minerals Kit Spice Up Your Science! Teacher Guide

  Book Valencia

  No ratings yet
• The Yellow House: A Memoir (2019 National Book Award Winner)

  

  From Everand

  The Yellow House: A Memoir (2019 National Book Award Winner)

  Sarah M. Broom

  Rating: 4 out of 5 stars

  4/5 (98)
• Crystals and Minerals Kit Spice Up Your Science! Teacher Guide

  

  Document52 pages

  Crystals and Minerals Kit Spice Up Your Science! Teacher Guide

  Book Valencia

  No ratings yet
• Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future

  

  From Everand

  Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future

  Ashlee Vance

  Rating: 4.5 out of 5 stars

  4.5/5 (474)
• Crystals and Minerals Kit Spice Up Your Science! Teacher Guide

  

  Document52 pages

  Crystals and Minerals Kit Spice Up Your Science! Teacher Guide

  Book Valencia

  No ratings yet
• Shoe Dog: A Memoir by the Creator of Nike

  

  From Everand

  Shoe Dog: A Memoir by the Creator of Nike

  Phil Knight

  Rating: 4.5 out of 5 stars

  4.5/5 (537)
• Explanation of Engine High Idle RPM and Correct Adjustment of Engine Setpoint (1264)

  

  Document6 pages

  Explanation of Engine High Idle RPM and Correct Adjustment of Engine Setpoint (1264)

  Book Valencia

  No ratings yet
• The Little Book of Hygge: Danish Secrets to Happy Living

  

  From Everand

  The Little Book of Hygge: Danish Secrets to Happy Living

  Meik Wiking

  Rating: 3.5 out of 5 stars

  3.5/5 (399)
• Braden: 2Nd Generation "CH" Series Planetary Hoists

  

  Document44 pages

  Braden: 2Nd Generation "CH" Series Planetary Hoists

  Book Valencia

  100% (1)
• Yes Please

  

  From Everand

  Yes Please

  Amy Poehler

  Rating: 4 out of 5 stars

  4/5 (1891)
• 945P7AA Manual en V1.0 03 25 05

  

  Document91 pages

  945P7AA Manual en V1.0 03 25 05

  Book Valencia

  No ratings yet
• On Fire: The (Burning) Case for a Green New Deal

  

  From Everand

  On Fire: The (Burning) Case for a Green New Deal

  Naomi Klein

  Rating: 4 out of 5 stars

  4/5 (73)
• 2010-09-26 202624 NEHS0610-09 3100 Fuel Setting Tooling

  

  Document32 pages

  2010-09-26 202624 NEHS0610-09 3100 Fuel Setting Tooling

  Roberto Manriques Estrada

  100% (3)
• Never Split the Difference: Negotiating As If Your Life Depended On It

  

  From Everand

  Never Split the Difference: Negotiating As If Your Life Depended On It

  Chris Voss

  Rating: 4.5 out of 5 stars

  4.5/5 (838)
• Algebra Lineal

  

  Document308 pages

  Algebra Lineal

  Book Valencia

  100% (2)
• Grit: The Power of Passion and Perseverance

  

  From Everand

  Grit: The Power of Passion and Perseverance

  Angela Duckworth

  Rating: 4 out of 5 stars

  4/5 (588)
• F650-F750 Diagnostic Trouble Code Descriptions

  

  Document28 pages

  F650-F750 Diagnostic Trouble Code Descriptions

  Rogério Moreno

  No ratings yet
• A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True Story

  

  From Everand

  A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True Story

  Dave Eggers

  Rating: 3.5 out of 5 stars

  3.5/5 (231)
• A PDF

  

  Document54 pages

  A PDF

  Book Valencia

  No ratings yet
• Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New America

  

  From Everand

  Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New America

  Gilbert King

  Rating: 4.5 out of 5 stars

  4.5/5 (266)
• 2806C-E18+workshop+manual pdf+CATERPILLAR+C18

  

  Document192 pages

  2806C-E18+workshop+manual pdf+CATERPILLAR+C18

  Jhon Hever Benitez

  100% (27)
• Principles: Life and Work

  

  From Everand

  Principles: Life and Work

  Ray Dalio

  Rating: 4 out of 5 stars

  4/5 (599)
• D PDF

  

  Document16 pages

  D PDF

  Book Valencia

  No ratings yet
• The Hard Thing About Hard Things: Building a Business When There Are No Easy Answers

  

  From Everand

  The Hard Thing About Hard Things: Building a Business When There Are No Easy Answers

  Ben Horowitz

  Rating: 4.5 out of 5 stars

  4.5/5 (344)
• Arrangement 231-0178 Perkins Part Numbers For CAT 3054C

  

  Document133 pages

  Arrangement 231-0178 Perkins Part Numbers For CAT 3054C

  Jorge Miranda

  100% (1)
• The Emperor of All Maladies: A Biography of Cancer

  

  From Everand

  The Emperor of All Maladies: A Biography of Cancer

  Siddhartha Mukherjee

  Rating: 4.5 out of 5 stars

  4.5/5 (271)
• 3126B and 3126E Truck Engine Electrical System: ECM Connectors

  

  Document2 pages

  3126B and 3126E Truck Engine Electrical System: ECM Connectors

  hskv20025525

  100% (1)
• Fear: Trump in the White House

  

  From Everand

  Fear: Trump in the White House

  Bob Woodward

  Rating: 3.5 out of 5 stars

  3.5/5 (738)
• Battery Specs

  

  Document8 pages

  Battery Specs

  Ing Sergio J Poot Huitz

  No ratings yet
• Team of Rivals: The Political Genius of Abraham Lincoln

  

  From Everand

  Team of Rivals: The Political Genius of Abraham Lincoln

  Doris Kearns Goodwin

  Rating: 4.5 out of 5 stars

  4.5/5 (234)
• 2010-09-26 202624 NEHS0610-09 3100 Fuel Setting Tooling

  

  Document32 pages

  2010-09-26 202624 NEHS0610-09 3100 Fuel Setting Tooling

  Roberto Manriques Estrada

  100% (3)
• Rise of ISIS: A Threat We Can't Ignore

  

  From Everand

  Rise of ISIS: A Threat We Can't Ignore

  Jay Sekulow

  Rating: 3.5 out of 5 stars

  3.5/5 (137)
• The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You Are

  

  From Everand

  The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You Are

  Brene Brown

  Rating: 4 out of 5 stars

  4/5 (1090)
• The Unwinding: An Inner History of the New America

  

  From Everand

  The Unwinding: An Inner History of the New America

  George Packer

  Rating: 4 out of 5 stars

  4/5 (45)
• The World Is Flat 3.0: A Brief History of the Twenty-first Century

  

  From Everand

  The World Is Flat 3.0: A Brief History of the Twenty-first Century

  Thomas L. Friedman

  Rating: 3.5 out of 5 stars

  3.5/5 (2259)
• Steve Jobs

  

  From Everand

  Steve Jobs

  Walter Isaacson

  Rating: 4.5 out of 5 stars

  4.5/5 (806)
• Angela's Ashes: A Memoir

  

  From Everand

  Angela's Ashes: A Memoir

  Frank McCourt

  Rating: 4.5 out of 5 stars

  4.5/5 (440)
• Bad Feminist: Essays

  

  From Everand

  Bad Feminist: Essays

  Roxane Gay

  Rating: 4 out of 5 stars

  4/5 (1015)
• John Adams

  

  From Everand

  John Adams

  David McCullough

  Rating: 4.5 out of 5 stars

  4.5/5 (2409)
• The Glass Castle: A Memoir

  

  From Everand

  The Glass Castle: A Memoir

  Jeannette Walls

  Rating: 4.5 out of 5 stars

  4.5/5 (1712)
• The Outsider: A Novel

  

  From Everand

  The Outsider: A Novel

  Stephen King

  Rating: 4 out of 5 stars

  4/5 (1839)
• The Sympathizer: A Novel (Pulitzer Prize for Fiction)

  

  From Everand

  The Sympathizer: A Novel (Pulitzer Prize for Fiction)

  Viet Thanh Nguyen

  Rating: 4.5 out of 5 stars

  4.5/5 (120)
• The Light Between Oceans: A Novel

  

  From Everand

  The Light Between Oceans: A Novel

  M.L. Stedman

  Rating: 4.5 out of 5 stars

  4.5/5 (789)
• The Woman in Cabin 10

  

  From Everand

  The Woman in Cabin 10

  Ruth Ware

  Rating: 3.5 out of 5 stars

  3.5/5 (2322)
• A Man Called Ove: A Novel

  

  From Everand

  A Man Called Ove: A Novel

  Fredrik Backman

  Rating: 4.5 out of 5 stars

  4.5/5 (4609)
• Brooklyn: A Novel

  

  From Everand

  Brooklyn: A Novel

  Colm Tóibín

  Rating: 3.5 out of 5 stars

  3.5/5 (1937)
• Wolf Hall: A Novel

  

  From Everand

  Wolf Hall: A Novel

  Hilary Mantel

  Rating: 4 out of 5 stars

  4/5 (3811)
• The Perks of Being a Wallflower

  

  From Everand

  The Perks of Being a Wallflower

  Stephen Chbosky

  Rating: 4.5 out of 5 stars

  4.5/5 (2100)
• The Art of Racing in the Rain: A Novel

  

  From Everand

  The Art of Racing in the Rain: A Novel

  Garth Stein

  Rating: 4 out of 5 stars

  4/5 (4200)
• Manhattan Beach: A Novel

  

  From Everand

  Manhattan Beach: A Novel

  Jennifer Egan

  Rating: 3.5 out of 5 stars

  3.5/5 (792)
• Little Women

  

  From Everand

  Little Women

  Louisa May Alcott

  Rating: 4 out of 5 stars

  4/5 (104)
• Sing, Unburied, Sing: A Novel

  

  From Everand

  Sing, Unburied, Sing: A Novel

  Jesmyn Ward

  Rating: 4 out of 5 stars

  4/5 (1103)
• A Tree Grows in Brooklyn

  

  From Everand

  A Tree Grows in Brooklyn

  Betty Smith

  Rating: 4.5 out of 5 stars

  4.5/5 (1929)
• The Constant Gardener: A Novel

  

  From Everand

  The Constant Gardener: A Novel

  John le Carré

  Rating: 3.5 out of 5 stars

  3.5/5 (104)
• Her Body and Other Parties: Stories

  

  From Everand

  Her Body and Other Parties: Stories

  Carmen Maria Machado

  Rating: 4 out of 5 stars

  4/5 (821)