FUNDAMENTOS DE ROBÓTICA. Maestro: Ing. Marco Antonio López Paredes REPORTE DE PROGRAMA: ANALIZAR LOS OBSTACULOS DE ROBOTS EN UN TABLERO

Documentos relacionados
Introducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1

Introducción al desarrollo web (idesweb) - 3 a ed.

En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea

Técnicas para la enseñanza de. Desarrollo Web. M is notas de CSS. Liliana Gutiérrez Flores. Enero de 2016

Conceptos Teóricos de HTML5 (material extra adicional libro):

<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>

DISABLED JAVASCRIPT EN INPUT TEXT, SUBMIT, BUTTON, SELECT, LINK, STYLE... IMPEDIR ENVÍO DUPLICADO FORM. DESACTIVAR CSS (CU01183E)

DPWEB I, Carrito de Compras Guardar, Ing. Tomas Urbina. Carrito de compras con PHP y MYSQL

Figura 1: página de la vivienda sin estilo

CSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...

UCEMA Ingeniería Informática Introducción a HTML y Javascript

En que nos ayuda las hojas de estilo cascada (css)?

Edición HTML. Estilos CSS MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL

Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D)

Diseño web. Fundamentos de CSS. Informática 4º ESO

BASE es un framework, el cual, podría definirse de manera muy sencilla como un esquema para el desarrollo y/o la implementación de una aplicación.

Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

Ejemplos-Capítulo-6 Ejemplo-1: Distintos tipos de sombras en el navegador Safari de Apple

HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO

MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D)

Maquetación con estilos

Manual de v2cms v2cms v1.01

DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D)

SWITCH JAVASCRIPT. SELECCIÓN ENTRE ALTERNATIVAS. DIAGRAMA DE FLUJO Y EJEMPLO DE APLICACIÓN. (CU01120E)

Listado de elementos o etiquetas HTML5

EL MODELO DE CAJA CSS

LABORATORIO 2. I. Desarrollo

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

Tutorial para la creación de un sitio Web con un formulario ASP.NET

QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un

EJERCICIO1.HTML <html> <head> <script language="javascript"> function procesar(){ var n = document.getelementbyid("nombre"); var e =

Hojas de estilo. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR

CSS: hojas de estilo en cascada. Visualización de una página I. Luis Fernando Llana Díaz. 21 de abril de 2008

CSS BÁSICO Hojas de Estilo. Iván Martínez Toro

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

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.

Técnicas de visualización

Etiquetas que no pueden contener otras etiquetas (se cierran sobre si mismas) <etiqueta />

HTML/CSS( Mi(primera(página(

Hojas de Estilo : CSS

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

IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM TRANSICIONES. Bernardo Chenlo

Dar formato a los documentos XML

CSS3. Tutor: Ignacio Pérez Martín. Índice. Curso: Programación Python y HTML-5. CEP Marbella-Coín.

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

Actividad 3: Codificación básica de un texto en HTML

PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)

Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un

Tema 2. I- Hojas de estilo CSS.

UNIVERSIDAD AUTÓNOMA DE NUEVO LEÓN DIRECCIÓN GENERAL DE INFORMÁTICA

CSS VERTICAL-ALIGN MIDDLE NO FUNCIONA? CENTRAR VERTICALMENTE UNA IMAGEN, TEXTO, DIV, ETC. EJEMPLOS (CU01043D)

CSS: Hojas de Estilo en Cascada. Didier Fabián Granados Muñoz

ETIQUETAS HTML 5 Diseño de Sitios Web TUW

Hojas de estilo (CSS)

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Diseño de columnas con CSS

LESS.JS. Haz más con menos

Formulario de Contacto

Fundamentos de Programación Visual Basic

ESTILIZANDO CON CSS. Sesión 08. By Ing. David Gil

Introducción al desarrollo web (idesweb)

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

Consejos para el correcto armado de HTML para s

CREACION DE INTERFACES GRAFICAS DE USUARIO (GUI) PARA LA WEB

Personalizando Plantillas

HOJAS DE ESTILO EN CASCADA

Resolución de la incompatibilidad entre los navegadores. Utilización de una vasta cantidad de plugins creados por otros desarrolladores.

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

Introducción. Requisitos para la creación de un Gadget. Creando un Gadget Paso a Paso. Tips. Radio Gadget: Un ejemplo Paso a Paso.

Proyectos Terminales y Descargas de Software

CAPTURAR EVENTOS DE TECLADO JAVASCRIPT. TECLA PULSADA. FROMCHARCODE. KEYCODE, WICH. (CU01161E)

Co mo incluir servicios WMTS y WMS en la API de Google

Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

Boletín I de ASP.Net. Conceptos básicos.

Librerías JavaScript Processing.js

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)

DreamWeaver CS5 PERTENECE A: TEORIAS Y SISTEMAS TECNICO- CIENTIFICOS

Contenedores. Elementos <div>

Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco

Roberto Gómez Cárdenas Qué es CSS? Cascading Style Sheets, hojas de estilo en

DISEÑO Y ELABORACIÓN DE PÁGINAS WEB

Guía paso a paso Por Víctor Manuel Rodríguez García

(*) Creo un directorio de trabajo llamado /bloggalpon/ en el directorio del usuario. (*) Inicializar el repositorio vacío.

Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

ESTRUCTURA DEL CÓDIGO HTML5

Tutorial de enlace entre Formulario Web y Servicio Web REST. Programación en Internet

La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente.

CÓMO CREAR EL MODULO DE LOGÍN

Curso de. HTML 5 y CSS 3. Por: Ing. Ubaldo Acosta.

La única regla que debe de tener presente siempre, es que cada etiqueta que abra <etiqueta> debe de cerrarla en el mismo orden < /etiqueta cerrada>.

CSS-Hojas de estilos en cascada

Introducción a Sencha Touch

Introducción a las aplicaciones WEB

EFECTO SOMBRA CSS CON BOX-SHADOW. SOMBRA INTERIOR INSET. BLUR O DIFUMINADO, SPREAD. EJEMPLOS Y EJERCICIOS RESUELTOS (CU01059D)

Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella

EJEMPLO RELOJ JAVASCRIPT. SETTIMEOUT, CLEARTIMEOUT, SETINTERVAL, REQUEST ANIMATIONFRAME. (CU01164E)

Universidad Autónoma de Baja California Escuela de Pedagogía Lenguaje de Programación Javascript Básico

III. Hojas de estilo en cascada (CSS)

SEGUNDA PARTE: DOM y jquery

Transcripción:

S UNIVERSIDAD AUTÓNOMA DEL ESTADO DE MÉXICO Centro Universitario UAEM Atlacomulco FUNDAMENTOS DE ROBÓTICA Maestro: Ing. Marco Antonio López Paredes REPORTE DE PROGRAMA: ANALIZAR LOS OBSTACULOS DE ROBOTS EN UN TABLERO INTEGRANTES DE EQUIPO: David González Segundo Nayeli González Quintana Alfredo Marcelo Hipólito Fecha: Marzo 2015 GRUPO: ICO16 GRADO: Octavo Semestre

Descripción El siguiente programa consiste en un tablero de 8x8 en el cual se le van a insertar 3 objetos que serán los robots y 6 objetos que serán los obstáculos. El recorrido se realiza de la siguiente manera. 8 1 2 7 R 3 6 5 4 Cuando el robot encuentre un obstáculo se agregara un 0 al recorrido, de lo contrario de agregará un 1, el obstáculo puede ser otro robot, el obstáculo generado por el usuario o si esta fuera de rango del tablero. Pseudocódigo Inicio: var robot:array var recorrido: string var recorrido_robot: array procedimiento creartablero: desde i = 0 hasta longitud tablero hacer desde j = 0 hasta longitud tablero.fila hacer var celda i, j procedimiento obstáculo_robot: caso robot: agregarobot(objeto); caso obstáculo: agregaobstaculo(objeto); función agregarobot(objeto) robot.push(objeto)

función agregaobstaculo(objeto) obstáculos.push(objeto) procedimiento iniciarrecorrido(robot) var x = robot.posicion_x var y = robot.posicion_y si obstáculo entonces recorrido = recorrido + 1 sino recorrido = recorrido + 0 recorrido_robot.push(recorrido) procedimiento mostrar_recorrido(robot) escribe robot_recorrido[robot_elegido] Código fuente Interfaz gráfica con html y css HTML <!DOCTYPE html> <html> <head> <title>posiciones de robots</title> <link rel="stylesheet" type="text/css" href="css/estilos.css"/> <script type="text/javascript" src="js/funciones.js"></script> </head> <body> <hr> <br> <center> <span class="titulo">posiciones ROBOTS</span>

<br> <div id="tablero" class="tablero"></div><br> <select id="tipo"> <option value="obstaculo">obstaculo</option> <option value="robot">robot</option> </select><br><br> Robot a Analizar Recorrido <select id="nrobot"> <option>1</option> <option>2</option> <option>3</option> </select><br> <button onclick="mostrar()">analizar</button><br><br> <div id="res"></div> </center> </body> </html> CSS body background-color: #A9F5F2;.cuadro margin: 0px; padding: 0px;.cuadro > li display: table-cell; font-family:arial; width: 50px; height: 50px; border-style: solid; border-width: 1px;.tablero top:90px; width: 415px; background-color: #FBF5EF; border:solid; max-height: 415px;.titulo color: red; font-size: 30px; font-family: georgia; position: relative; /*left: 200px;*/

.obstaculo background-color: blue; color: white; /*font-size: 35px;*/.robot background-color: red; Funciones con javascript //comprueba que la pagina este cargada window.onload = function() alert("listo"); creartablero(); ; //inicia un arreglo de objetos var posiciones = robots:array(), obstaculos:array(), recorridos:array(); //crea una celda al tablero como objeto, con un evento click y como identificador la posicion de la matriz del tablero function crearcelda(x, y) this.li = document.createelement('li'); this.li.id = x+''+y; this.x = x; this.y = y; this.setposicion = function(i,j) this.li.innerhtml = 'x'; ; this.getposicion = function() return this.li.innerhtml; ; this.li.addeventlistener('click', function() var tmp = document.getelementbyid(x+''+y); obstaculo_robot(tmp); //muestrarecorrido(); );

//crea un tablero en forma de una matriz cuadrada, la cual contendrá un objeto tipo celda function creartablero() this.tb = document.getelementbyid('tablero'); for(var i=0; i<8; i++) var ul = document.createelement('ul'); ul.setattribute('class','cuadro'); for(var j=0; j<8; j++) var li = new crearcelda(i, j); li.setposicion(i, j); ul.appendchild(li.li); this.tb.appendchild(ul); //aqui se elige si el objeto a introducir es robot u obstaculo function obstaculo_robot(obj) var index=document.getelementbyid('tipo').options.selectedindex; var tipo = document.getelementbyid('tipo').options[index].text; switch (tipo) case 'OBSTACULO': obj.classname='obstaculo'; obj.innerhtml='o'; agregaobstaculo(obj); break; case 'ROBOT': obj.classname='robot'; agregarobot(obj); obj.innerhtml='r'+posiciones.robots.length; for(var i =0; i<8; i++) for(var j =0; j<8; j++) var fila = obj.getattribute('id'); var x = parseint(fila.substring(0,1)); var y = parseint(fila.substring(1)); break; default: break;

//agrega un nuevo robot creado al arreglo function agregarobot(o) posiciones.robots.push(o); //agrega los obstaculos a un aggreglo function agregaobstaculo(o) posiciones.obstaculos.push(o); //muestra el recorrido de un robot function mostrar() var index=document.getelementbyid('nrobot').options.selectedindex; var robot = document.getelementbyid('nrobot').options[index].text; var nrobot = (parseint(robot))-1; var fila = posiciones.robots[nrobot].getattribute('id'); var x = parseint(fila.substring(0,1)); var y = parseint(fila.substring(1)); var r = ""; var rb = document.getelementbyid((x-1)+''+y); rb = document.getelementbyid((x-1)+''+(y+1)); rb = document.getelementbyid(x+''+(y+1)); rb = document.getelementbyid((x+1)+''+(y+1));

rb = document.getelementbyid((x+1)+''+y); rb = document.getelementbyid((x+1)+''+(y-1)); rb = document.getelementbyid(x+''+(y-1)); rb = document.getelementbyid((x-1)+''+(y-1)); var res = document.getelementbyid('res'); posiciones.recorridos[nrobot] = r; res.innerhtml = r+"<br>\ntodos los Robots creados: <br>"+posiciones.recorridos;

Pantallas de salida