Taller de Videojuegos con HTML 5 Creación del Videojuego Memoria
|
|
|
- Tomás Revuelta Maidana
- hace 6 años
- Vistas:
Transcripción
1 Taller de Videojuegos con HTML 5 Creación del Videojuego Memoria Rogelio Ferreira Escutia
2 HTML Básico 2
3 HTML Básico <!DOCTYPE html> <html> <head> <title>memoria</title> <meta charset="utf-8" /> </head> </html> 3
4 CSS 4
5 CSS body Anchura de 960 pixeles Margen 0. h1 centrado. micanvas Borde de 2pixeles punteado color amarillo. Color del fondo verde. 5
6 CSS /* memoria.css */ body{ width:960px; margin:0 auto; h1{ text-align:center; #micanvas{ border:dotted 2px yellow; background:green; 6
7 CSS Agregar a nuestro html el CSS. <link rel="stylesheet" href="memoria.css" /> 7
8 Canvas 8
9 Canvas Agregar el Canvas al HTML y definimos su tamaño: <body> <h1>memoria CANVAS</h1> <canvas id="micanvas" width="960px" height="450px"> Tu navegador no soporta CANVAS </canvas> </body> 9
10 10
11 JavaScript 11
12 JavaScript Creamos nuestro archivo JavaScript (memoria.js) con variables globales para nuestro programa. 12
13 JavaScript // // memoria.js // /*** Variables ****/ var ctx, canvas; var coloratras = "blue"; var iniciox = 45; var inicioy = 50; var cartamargen = 30; var cartalon = 30; var cartaancho = cartalon * 4; var cartalargo = cartalon * 4; var cartas_array = new Array(); 13
14 JavaScript Hacemos referencia al archivo JavaScript desde nuestro código html: <script language="javascript" src="memoria.js"></script> 14
15 JavaScript Declaramos los objetos que necesitaremos en nuestro código JavaScript: /***** Objetos ****/ function Carta(x, y, ancho, largo, info){ this.x = x; this.y = y; this.ancho = ancho; this.largo = largo; this.info = info; this.dibuja = dibujacarta; 15
16 JavaScript Creamos la función dibujacarta: function dibujacarta(){ ctx.fillstyle = coloratras; ctx.fillrect(this.x, this.y, this.ancho, this.largo); 16
17 Arranque del Canvas 17
18 JavaScript Arrancamos el Canvas dentro de nuestro JavaScript:: window.onload = arrancarcanvas; function arrancarcanvas(){ canvas=document.getelementbyid('micanvas'); if(canvas&&canvas.getcontext){ ctx=canvas.getcontext("2d"); if (ctx) { //Aqui va a ir el código else { alert("error al crear el contexto"); 18
19 Dibujar Tablero 19
20 JavaScript Agregamos la función para dibujar el tablero: function tablero(){ var i; var carta; var x = iniciox; var y = inicioy; for(i=0; i<6; i++){ carta = new Carta(x, y, cartaancho, cartalargo, i); cartas_array.push(carta); carta.dibuja(); //Creamos la segunda carta carta = new Carta(x, y+cartaancho+cartamargen, cartaancho, cartalargo, i); cartas_array.push(carta); carta.dibuja(); //Aumentamos el valos de x x += cartaancho + cartamargen; 20
21 21
22 Barajear Cartas 22
23 JavaScript Agregamos la función para barajear las cartas y la mandamos llamar después de llamar a la función tablero : function barajear(){ var i, j, k; var temporal; var lon = cartas_array.length; for(j=0; j<lon*3; j++){ i = Math.floor(Math.random()*lon); k = Math.floor(Math.random()*lon); // temporal = cartas_array[i].info; // cartas_array[i].info = cartas_array[k].info; cartas_array[k].info = temporal; 23
24 Manejo del click 24
25 JavaScript Detectamos el evento click y mandamos llamar a la función selecciona : canvas.addeventlistener("click",selecciona,false); 25
26 JavaScript El código de detección se coloca en nuestro arranque de Canvas y queda así: function arrancarcanvas(){ canvas=document.getelementbyid('micanvas'); if(canvas&&canvas.getcontext){ ctx=canvas.getcontext("2d"); if (ctx) { //Aqui va a ir el código canvas.addeventlistener("click",selecciona,false); tablero(); barajear(); else { alert("error al crear el contexto"); 26
27 JavaScript Creamos la función selecciona la cual extrae los valores x,y de donde hicimos click, y se los envía a la función ajusta : function selecciona(e){ var pos = ajusta(e.clientx, e.clienty); alert(pos.x+", "+pos.y); 27
28 JavaScript La función ajusta los valores x,y a la esquina superior del rectángulo donde se hizo click, esto con el objeto de dibujar en esa posición la carta: function ajusta(xx, yy){ var poscanvas = canvas.getboundingclientrect(); var x = xx - poscanvas.left; var y = yy - poscanvas.top; return {x:x, y:y 28
29 29
30 Detectar en que carta se hizo click 30
31 JavaScript Modificamos la función selecciona para detectar en qué carta se hizo click: function selecciona(e){ var pos = ajusta(e.clientx, e.clienty); //alert(pos.x+", "+pos.y); for(var i=0; i<cartas_array.length; i++){ var carta = cartas_array[i]; if(carta.x > 0){ if( (pos.x > carta.x) && (pos.x < carta.x+carta.ancho) && (pos.y > carta.y) && (pos.y < carta.y+carta.largo)){ break; if(i<cartas_array.length){ alert(i); 31
32 32
33 Variables globales para Manipular cartas 33
34 JavaScript Se agregan variables globales, para detectar si es la primera carta (primercarta) y para hacer referencia a la primera y segunda carta: /*** Variables ****/ var ctx, canvas; var primercarta = true; var cartaprimera, cartasegunda; var colordelante = "yellow"; var coloratras = "blue"; var colorcanvas = "green"; var iniciox = 45; var inicioy = 50; var cartamargen = 30; var cartalon = 30; var cartaancho = cartalon * 4; var cartalargo = cartalon * 4; var cartas_array = new Array(); 34
35 Detectar doble click Sobre la misma carta 35
36 JavaScript Modificamos selecciona para detectar si se hizo click 2 veces sobre la misma carta y pintamos la carta: function selecciona(e){ var pos = ajusta(e.clientx, e.clienty); //alert(pos.x+", "+pos.y); for(var i=0; i<cartas_array.length; i++){ var carta = cartas_array[i]; if(carta.x > 0){ if( (pos.x > carta.x) && (pos.x < carta.x+carta.ancho) && (pos.y > carta.y) && (pos.y < carta.y+carta.largo)){ if((primercarta) (i!=cartaprimera)) break; //Encontramos la carta if(i<cartas_array.length){ cartaprimera = i; primercarta = false; pinta(carta); 36
37 JavaScript Modificamos selecciona para detectar si se hizo click 2 veces sobre la misma carta y pintamos la carta: function selecciona(e){ var pos = ajusta(e.clientx, e.clienty); //alert(pos.x+", "+pos.y); for(var i=0; i<cartas_array.length; i++){ var carta = cartas_array[i]; if(carta.x > 0){ if( (pos.x > carta.x) && (pos.x < carta.x+carta.ancho) && (pos.y > carta.y) && (pos.y < carta.y+carta.largo)){ if((primercarta) (i!=cartaprimera)) break; //Encontramos la carta if(i<cartas_array.length){ cartaprimera = i; primercarta = false; pinta(carta); 37
38 JavaScript Creamos la función pinta para pintar la carta donde se hizo click: function pinta(carta){ ctx.fillstyle = colordelante; ctx.fillrect(carta.x, carta.y, carta.ancho, carta.largo); ctx.font = "bold 40px Comic"; ctx.fillstyle = "black"; ctx.filltext(string(carta.info), carta.x+carta.ancho/2-10, carta.y+carta.largo/2+10); 38
39 39
40 Seleccionar segunda carta 40
41 JavaScript Modificamos selecciona para poder seleccionar la segunda carta, y cuando eso suceda, dejar pasar un tiempo (settimeout) y manda llamar a una nueva función volteacarta : 41
42 function selecciona(e){ var pos = ajusta(e.clientx, e.clienty); //alert(pos.x+", "+pos.y); for(var i=0; i<cartas_array.length; i++){ var carta = cartas_array[i]; if(carta.x > 0){ if( (pos.x > carta.x) && (pos.x < carta.x+carta.ancho) && (pos.y > carta.y) && (pos.y < carta.y+carta.largo)){ if((primercarta) (i!=cartaprimera)) break; //Encontramos la carta if(i<cartas_array.length){ if(primercarta){ cartaprimera = i; primercarta = false; pinta(carta); else { cartasegunda = i; pinta(carta); primercarta = true; settimeout(volteacarta,1000); 42
43 JavaScript Creamos la función volteacarta : function volteacarta(){ cartas_array[cartaprimera].dibuja(); cartas_array[cartasegunda].dibuja(); 43
44 44
45 Determinar si son iguales las cartas seleccionadas 45
46 JavaScript Agregamos 2 variables globales para detectar si son iguales la cartas seleccionadas: var cartas_array = new Array(); var iguales = false; 46
47 JavaScript Dentro de la función selecciona tenemos el siguiente código: else { cartasegunda = i; pinta(carta); primercarta = true; settimeout(volteacarta,10000); 47
48 JavaScript El código anterior lo cambiamos por este, esto nos permitirá determinar si las cartas son iguales: else { cartasegunda = i; pinta(carta); primercarta = true; if(cartas_array[cartaprimera].info==cartas_array[cartasegunda].info){ iguales = true; else { iguales = false; settimeout(volteacarta,1000); 48
49 JavaScript Modificamos la función volteacarta para pintar las cartas que son iguales, que da el efecto de borrar function volteacarta(){ if(iguales==false){ cartas_array[cartaprimera].dibuja(); cartas_array[cartasegunda].dibuja(); else { ctx.clearrect(cartas_array[cartaprimera].x, cartas_array[cartaprimera].y, cartas_array[cartaprimera].ancho, cartas_array[cartaprimera].largo); // ctx.clearrect(cartas_array[cartasegunda].x, cartas_array[cartasegunda].y, cartas_array[cartasegunda].ancho, cartas_array[cartasegunda].largo); // cartas_array[cartaprimera].x = -1; cartas_array[cartasegunda].x = -1; 49
50 50
51 Creando un marcador 51
52 JavaScript Agregamos la variable global cartas para llevar el control de las cartas: var cartas = 0; 52
53 JavaScript Mandamos llamar a la función aciertos que vamos a crear para controlar el número de aciertos, y nuestra función arrancarcanvas queda así: function arrancarcanvas(){ canvas=document.getelementbyid('micanvas'); if(canvas&&canvas.getcontext){ ctx=canvas.getcontext("2d"); if (ctx) { //Aqui va a ir el código canvas.addeventlistener("click",selecciona,false); tablero(); barajear(); aciertos(); else { alert("error al crear el contexto"); 53
54 JavaScript Creamos la función aciertos para llevar el marcador: function aciertos(){ ctx.fillstyle = "black"; if(cartas==6){ ctx.font = "bold 80px Comic"; ctx.clearrect(0,0, canvas.width, canvas.height); ctx.filltext("muy bien, eres un genio!", 60, 220); else { ctx.save(); ctx.clearrect(0,340, canvas.width/2, 100); ctx.font = "bold 40px Comic"; ctx.filltext("aciertos: "+String(cartas), 30, 380); ctx.restore(); 54
55 JavaScript En la función aciertos se guarda y se reestablece el contexto para poder ir pintando los elementos que van cambiando, en este caso el marcador 55
56 JavaScript En la función selecciona tenemos el siguiente código: else { cartasegunda = i; pinta(carta); primercarta = true; if(cartas_array[cartaprimera].info==cartas_array[cartasegunda].info){ iguales = true; else { iguales = false; settimeout(volteacarta,1000); 56
57 JavaScript Lo cambiamos por el siguiente, que incrementa las cartas y los aciertos cuando el usuario le atina: else { cartasegunda = i; pinta(carta); primercarta = true; if(cartas_array[cartaprimera].info==cartas_array[cartasegunda].info){ iguales = true; cartas++; aciertos(); else { iguales = false; settimeout(volteacarta,1000); 57
58 JavaScript Cuando se tienen los 6 pares de cartas, finaliza el juego e imprime el mensaje que viene dentro de la función aciertos que se hizo anteriormente: if(cartas==6){ ctx.font = "bold 80px Comic"; ctx.clearrect(0,0, canvas.width, canvas.height); ctx.filltext("muy bien, eres un genio!", 60, 220); 58
59 59
60 Y nuestro juego finaliza!!!! 60
61 Rogelio Ferreira Escutia Instituto Tecnológico de Morelia Departamento de Sistemas y Computación Correo: rogelio@itmorelia.edu.mx rogeplus@gmail.com Página Web: Twitter: Facebook:
Taller de Videojuegos con HTML 5 Animación de objetos con HTML 5
Taller de Videojuegos con HTML 5 Animación de objetos con HTML 5 Rogelio Ferreira Escutia Animación de una pelotita (estructura inicial) 2 Estructura La estructura de nuestro proyecto queda de la siguiente
Taller de Videojuegos con HTML 5 Creación del Videojuego Space Invaders
Taller de Videojuegos con HTML 5 Creación del Videojuego Space Invaders Rogelio Ferreira Escutia Estructura Básica 2 Archivos Básicos marcianos.htm Estructura de la página Web. marcianos.css Diseño de
Taller de Videojuegos con HTML 5 Dibujando en el Canvas del HTML 5
Taller de Videojuegos con HTML 5 Dibujando en el Canvas del HTML 5 Rogelio Ferreira Escutia Dibujar Rectángulos 2 JavaScript (1) Agregamos la siguiente línea para accesar a nuestra biblioteca de funciones
FUNDAMENTOS DE ROBÓTICA. Maestro: Ing. Marco Antonio López Paredes REPORTE DE PROGRAMA: ANALIZAR LOS OBSTACULOS DE ROBOTS EN UN TABLERO
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
Rogelio Ferreira Escutia
Rogelio Ferreira Escutia Qué es HTML 5? HTML 5 HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes
EFECTOS JAVASCRIPT VISUALES, DE IMÁGENES, TEXTO... RECURSIÓN. SETTIMEOUT NO FUNCIONA EN BUCLES FOR, WHILE,? (CU01166E)
APRENDERAPROGRAMAR.COM EFECTOS JAVASCRIPT VISUALES, DE IMÁGENES, TEXTO... RECURSIÓN. SETTIMEOUT NO FUNCIONA EN BUCLES FOR, WHILE,? (CU01166E) Sección: Cursos Categoría: Tutorial básico del programador
Creación del Hola Mundo en Android Studio. Rogelio Ferreira Escutia
Creación del Hola Mundo en Android Studio Rogelio Ferreira Escutia Creación del Proyecto 2 Creación del Proyecto 3 Creación del Proyecto (1) Hacemos click encima del ícono del Android Studio: 4 Creación
Tema 3, parte 5. Estilos dinámicos. Texto. Cambio de estilos. Animaciones.
Tema 3, parte 5 Estilos dinámicos Texto Cambio de estilos http://www.optimum7.com/css3-man/ Animaciones. Javascript, parte 5 Javascript: estilos dinámicos Animaciones con Javascript y CSS3 2 Acceso a estilos
JAVASCRIPT CREATEELEMENT, CREATETEXTNODE, APPENDCHILD. MODIFICAR PROPIEDAD ONCLICK CON JAVASCRIPT (CU01140E)
APRENDERAPROGRAMAR.COM JAVASCRIPT CREATEELEMENT, CREATETEXTNODE, APPENDCHILD. MODIFICAR PROPIEDAD ONCLICK CON JAVASCRIPT (CU01140E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
JavaScript. Rogelio Ferreira Escutia
JavaScript Rogelio Ferreira Escutia Características JavaScript es un lenguaje de scripting basado en Objetos, utilizado para acceder a objetos en aplicaciones. Es utilizado, principalmente, integrado en
Introducción al desarrollo web (idesweb) - 3 a ed.
Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 7: JavaScript, Modelo de Objetos de Documento y cookies 1. Objetivos Aprender a manejar el DOM de una página web para manipular su contenido.
JavaScript. PDF created with pdffactory trial version (c) Juan Carlos Cano Todos los derechos reservados
JavaScript Sintaxis de JavaScript (1) instrucciones q La etiqueta script se utiliza para definir un script de navegador (client-side script). q El atributo type
WHILE JAVASCRIPT. DO WHILE. CONTINUE PARA SALTAR BUCLE. BUCLES CON LABEL (ETIQUETA O NOMBRE). EJEMPLOS (CU01132E)
APRENDERAPROGRAMAR.COM WHILE JAVASCRIPT. DO WHILE. CONTINUE PARA SALTAR BUCLE. BUCLES CON LABEL (ETIQUETA O NOMBRE). EJEMPLOS (CU01132E) Sección: Cursos Categoría: Tutorial básico del programador web:
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2.
Barra de navegación vertical con Botones rollovers ver. 2_TIC 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2
DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D)
APRENDERAPROGRAMAR.COM DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D) Sección: Cursos Categoría: Tutorial básico del programador
Programación Web. Presentación del Curso. Rogelio Ferreira Escutia
Programación Web Presentación del Curso Rogelio Ferreira Escutia Bienvenido!!! 2 1) Objetivo General Desarrollar aplicaciones web que involucre lenguajes de marcas, de presentación, del lado del cliente,
FOR JAVASCRIPT (BUCLES) CONOCER TAMAÑO DE UN ARRAY CON LENGTH. BREAK PARA DETENER EJECUCIÓN. EJEMPLOS Y EJERCICIOS (CU01131E)
APRENDERAPROGRAMAR.COM FOR JAVASCRIPT (BUCLES) CONOCER TAMAÑO DE UN ARRAY CON LENGTH. BREAK PARA DETENER EJECUCIÓN. EJEMPLOS Y EJERCICIOS (CU01131E) Sección: Cursos Categoría: Tutorial básico del programador
Programación Multimedia. Examen Primera Convocatoria. Junio2013
1. (4 puntos) Escribe el código HTML/CSS/ Javascript necesario para hacer un juego del Tres en Raya sobre un canvas con un formulario de configuración. 1.a) En la parte de la izquierda habrá un formulario
FUNCIÓN EVAL JAVASCRIPT. GETELEMENTSBY CLASSNAME. EJEMPLO CÓDIGO CALCULADORA SIMPLE (CU01133E)
APRENDERAPROGRAMAR.COM FUNCIÓN EVAL JAVASCRIPT. GETELEMENTSBY CLASSNAME. EJEMPLO CÓDIGO CALCULADORA SIMPLE (CU01133E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript desde cero
HTML. Rogelio Ferreira Escutia
HTML Rogelio Ferreira Escutia Características Básicas 2 Estructura HTML es un lenguaje basado en etiquetas. Cada etiqueta tiene un inicio y fin. Las etiquetas se identifican por los símbolos < y > 3 Inicio
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Estructura en HTML (0.6 puntos)... 2 2 Ejercicio 2 - Terminando la Web de ejemplo (0.6 puntos)... 2 3 Ejercicio 3 - Estructura
Sintaxis de CSS CSS ({ })
Qué es CSS? CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe como se va a presentar un documento en la pantalla. CSS nos permite controlar el estilo y el
QUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E)
APRENDERAPROGRAMAR.COM QUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
CLOSURES JAVASCRIPT. EJEMPLOS. CONCEPTO: QUÉ SON Y PARA QUÉ SIRVEN. RETARDO DE EJECUCIÓN CON SETTIMEOUT Y CLOSURES. (CU01169E)
APRENDERAPROGRAMAR.COM CLOSURES JAVASCRIPT. EJEMPLOS. CONCEPTO: QUÉ SON Y PARA QUÉ SIRVEN. RETARDO DE EJECUCIÓN CON SETTIMEOUT Y CLOSURES. (CU01169E) Sección: Cursos Categoría: Tutorial básico del programador
SOLUCION EJERCICIOS VALIDACION DE FORMULARIOS
SOLUCION EJERCICIOS VALIDACION DE FORMULARIOS Vamos a crear con formulario con los componentes más usuales, editor de texto, área de texto, un conjunto de radio botones, un par de checkbox, y una lista
Three.js-ESP Documentation. Versión latest
Three.js-ESP Documentation Versión latest 08 de marzo de 2017 Índice general 1. Presentación 3 2. Preparando el terreno 5 3. Conceptos básicos 7 4. Creando una escena 9 5. Añadiendo objetos 13 6. Movimiento
Estructura General y Estilos Propios
Estructura General y Estilos Propios En esta práctica se creará una estructura general para un sitio web utilizando lo aprendido en el manejo del Grid de Bootstrap además de comenzar a utilizar estilos
ESTRUCTURAS DE CONTROL REPETITIVAS
ESTRUCTURAS DE CONTROL REPETITIVAS Lenguajes de Programación III Estructuras de repetición.- Las estructuras de control repetitivas son aquellas en las que una sentencia o grupos de sentencias se repiten
PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D)
APRENDERAPROGRAMAR.COM PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D) Sección: Cursos Categoría: Tutorial básico del programador
Desarrollo de Aplicaciones Web con PHP. Javier Enciso
Desarrollo de Aplicaciones Web con PHP Javier Enciso Agenda Hojas de Estilos Qué es CSS? Para qué sirve? Cómo funciona? Ejemplos Validación de Formularios Fundamentos de JavaScript Utilización de JavaScript
CONSTRUCTORES JAVASCRIPT. CREAR OBJETOS VACÍOS. AÑADIR PROPIEDADES Y MÉTODOS. OBJETOS ÚNICOS O SINGLETON. EJEMPLOS (CU01145E)
APRENDERAPROGRAMAR.COM CONSTRUCTORES JAVASCRIPT. CREAR OBJETOS VACÍOS. AÑADIR PROPIEDADES Y MÉTODOS. OBJETOS ÚNICOS O SINGLETON. EJEMPLOS (CU01145E) Sección: Cursos Categoría: Tutorial básico del programador
Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior.
Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior. 1. Lo que va siempre Ejemplo con todo lo básico-minimo obligatorio que irá siempre:
Dibujar con HTML5 y JavaIO y PostrgreSQL JDBC
Licenciatura en Ciencias de la Computación, Facultad de Ciencias, UNAM. Riesgo tecnológico. Profesor: Karla Ramirez Pulido. Dibujar con HTML5 y JavaIO y PostrgreSQL JDBC Despliegue de imágenes en páginas
CSS. Añadir estilos a las páginas web
CSS Añadir estilos a las páginas web Qué es CSS? CSS (Cascade Style Sheets) es un tipo de archivo que permite añadir estilos a páginas web (colores de texto, bordes, separaciones, etc.) Son archivos de
Ejercicios - HTML5 y CSS3
Índice 1 Ejercicio 1 - Estructura...2 2 Ejercicio 2 - Canvas... 2 3 Ejercicio 3 - Multimedia...2 4 Ejercicio 4 - Geolocalización... 3 5 Ejercicio 5 - Almacenamiento Offline... 3 6 Ejercicio 6 - CSS3...
HTMLELEMENT JAVASCRIPT. MÉTODOS FOCUS, BLUR. SUBMIT FORMULARIOS: DETENER ENVÍO. ONSUBMIT RETURN. EJEMPLOS. (CU01181E)
APRENDERAPROGRAMAR.COM HTMLELEMENT JAVASCRIPT. MÉTODOS FOCUS, BLUR. SUBMIT FORMULARIOS: DETENER ENVÍO. ONSUBMIT RETURN. EJEMPLOS. (CU01181E) Sección: Cursos Categoría: Tutorial básico del programador web:
Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella
Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella Contenido Objetivo Introducción Operadores Tipos de datos Funciones Networking armpower.blogs.upv.es 2 Objetivo Aprender a instalar Node.js Conocer
Qué es CSS. Si necesitamos hacer modificaciones lo hacemos en un sólo lugar y no tenemos que editar todos los documentos HTML por separado.
Qué es HTML y CSS Una página web es un documento de texto el cual se escribe en lenguaje HTML, con el que se que crea el contenido de una web. Aquí se manejan los contenidos. Por otro lado, existe el código
DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D)
APRENDERAPROGRAMAR.COM DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D) Sección: Cursos Categoría: Tutorial básico del programador
API CANVAS HTML Y JAVASCRIPT. EJEMPLOS. DIBUJAR CÍRCULOS, FORMAS, GRÁFICOS, ANIMACIONES, JUEGOS, ETC. (CU01195E)
APRENDERAPROGRAMAR.COM API CANVAS HTML Y JAVASCRIPT. EJEMPLOS. DIBUJAR CÍRCULOS, FORMAS, GRÁFICOS, ANIMACIONES, JUEGOS, ETC. (CU01195E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web
La Web 1. Qué es la Web? 7 1.1 Lado servidor: HTTP, FTP, lenguajes, SQL 7 1.2 Lado cliente: HTML, CSS, JavaScript 10 2. Los lenguajes y su utilidad 10 2.1 HTML 10 2.2 CSS 14 2.3 JavaScript 17 2.4 Ejemplo
Manual de uso para desarrolladores Módulo generador de mapas dinámicos de multipuntos
Gobierno de Santa Fe Ministerio de Gobierno y Reforma del Estado Secretaría de Tecnologías para la Gestión IDESF Manual de uso para desarrolladores Módulo generador de mapas dinámicos de multipuntos Autores:
Formularios. Botón. Cuadros de texto
Formularios Los formularios son los elementos que permiten la entrada de datos. Llevan cuadros de texto, botones, etc. Podemos acceder a estos elementos como a cualquier otro de la página, por sus atributos,
Localizar direcciones en Google Maps con PHP
Localizar direcciones en Google Maps con Teléfono: 900 103 253 www.hostalia.com WHITEPAPERS: Localizar direcciones en Google Maps con Hoy en día es muy habitual que cualquier página web cuente con un mapa
Resumen PDF de ejercicios Dentro de los recursos están videos y archivos HTML, JavaScript y PHP comentados
Resumen PDF de ejercicios Dentro de los recursos están videos y archivos HTML, JavaScript y PHP comentados Actividad 2.1: Crear un sitio para trabajar en local y probar en local nuestra web Se denomina
Roatan Bilingual School
Roatan Bilingual School Evaluación final de Informática Grado: Noveno Valor: 15% Primer paso: Crear una carpeta con su nombre en documentos de la computadora. Segundo paso: Copia y pega el código en el
Programa Saiotek 2006 SMARTLAB. Entorno de Trabajo Inteligente Colaborativo y Programable
Programa Saiotek 2006 SMARTLAB Entorno de Trabajo Inteligente Colaborativo y Programable Manual del Programador de Gadgets correspondientes a Servicios Avanzados en SmartLab Manual del Programador de
Herramientas para construcción y prueba de sitios Web. Rogelio Ferreira Escutia
Herramientas para construcción y prueba de sitios Web Rogelio Ferreira Escutia Control de Versiones GitHub", https://github.com/, noviembre 2013 3 Kenai", https://kenai.com/, noviembre 2013 4 Diseño de
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
IF ELSE, IF ELSE IF JAVASCRIPT. CONDICIONALES DEL FLUJO O ESTRUCTURAS DE DECISIÓN. EJEMPLOS. EJERCICIOS. (CU01119E)
APRENDERAPROGRAMAR.COM IF ELSE, IF ELSE IF JAVASCRIPT. CONDICIONALES DEL FLUJO O ESTRUCTURAS DE DECISIÓN. EJEMPLOS. EJERCICIOS. (CU01119E) Sección: Cursos Categoría: Tutorial básico del programador web:
Gráficos con Funciones y Matrices
Gráficos con Funciones y Matrices El objetivo de esta Unidad es generar gráficos y juegos en PythonG mediante el uso de las herramientas aprendidas en las Unidades 1 y 2. Para ello vamos a trabajar en
MÉTODOS DE WINDOW JAVASCRIPT. EFECTOS. CONFIRM, PROMPT, OPEN, MOVEBY, MOVETO, FOCUS, RESIZETO, CLOSE (CU01174E)
APRENDERAPROGRAMAR.COM MÉTODOS DE WINDOW JAVASCRIPT. EFECTOS. CONFIRM, PROMPT, OPEN, MOVEBY, MOVETO, FOCUS, RESIZETO, CLOSE (CU01174E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
OBJETO WINDOW JAVASCRIPT. PROPIEDADES: NAME, INNERWIDTH, LENGTH,, OPENER, OUTERHEIGHT, PAGEXOFFSET, SCREENX (CU01173E)
APRENDERAPROGRAMAR.COM OBJETO WINDOW JAVASCRIPT. PROPIEDADES: NAME, INNERWIDTH, LENGTH,, OPENER, OUTERHEIGHT, PAGEXOFFSET, SCREENX (CU01173E) Sección: Cursos Categoría: Tutorial básico del programador
CAPTURAR EVENTOS DE TECLADO JAVASCRIPT. TECLA PULSADA. FROMCHARCODE. KEYCODE, WICH. (CU01161E)
APRENDERAPROGRAMAR.COM CAPTURAR EVENTOS DE TECLADO JAVASCRIPT. TECLA PULSADA. FROMCHARCODE. KEYCODE, WICH. (CU01161E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript desde cero
Programando con J2ME. Rogelio Ferreira Escutia
Programando con J2ME Rogelio Ferreira Escutia MIDlet mínimo 2 Primer MIDlet Todos los MIDlets deben tener una clase principal que herede de la clase javax.microedition.midlet", contenida en el API MIDP
CSS. Página 1/16. Atributo id #texto1 {font-size: 20px;} <p id= texto1 >Texto</p> p:nth-child(2) { background: # }
CSS. Página 1/16 Introducción CSS p, span{ color: #FF0000; font-size:24px; Pseudoclases
Hojas de estilo. Ejemplo
Hojas de estilo CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página
Condicionales. Comparación. Combinación
Condicionales Cuando hay que tomar una decisión aparecen las estructuras condicionales. En nuestra vida diaria se nos presentan situaciones donde debemos decidir: Entro al sitio A o al sitio B?, etc. Cuando
La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente.
PLANTILLAS EN PHP El concepto de plantilla, es un criterio del desarrollo web que propone optimizar la cantidad de documentos HTML que se usan en el desarrollo de un sitio web. A lo largo de la navegación
Social Media. Rogelio Ferreira Escutia
Social Media Rogelio Ferreira Escutia Social Media El mundo nunca volverá a ser igual... 2 Qué es Social Media? 3 Medios sociales ( Social media en inglés) son medios de comunicación social donde la información
Ganancia y Polarización. Rogelio Ferreira Escutia
Ganancia y Polarización Rogelio Ferreira Escutia PARAMETROS DE UNA ANTENA 2 Diagrama de Radiación 3 Diagrama de Radiación Es la representación gráfica de las características de radiación de una antena,
DHTML: Parte 2 DOM. Introducción al desarrollo web. Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España)
DHTML: Parte 2 Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España) IDW-DOM-DHTML-2 Contacto http://www.7-days.es laurasirco@gmail.com DHTML Dynamic HTML (HTML Dinámico)
Producción Digital I. Lic. Wenceslao Zavala 7 de Junio 2018
Producción Digital I Lic. Wenceslao Zavala 7 de Junio 2018 Trabajo Cierre de Cursada Sitio HTML COMPLETO online Adaptable para: Tabletas hasta 768px; Móviles hasta 480px. Debe tener: Slider en alguno de
SOMBRAS CON CSS ver. 2
Sombras con CSS para Diseño WEB ver. 2_TICO 1º Bachillerato página 1/6 SOMBRAS CON CSS ver. 2...1 Procedimiento 1: Diseño con Gimp 2.6 de una sombra...2 Procedimiento 2: Diseño Web con Kompozer...3 Código
Práctica No. 6. Manejo de Eventos con Javascript
Práctica No. 6. Manejo de Eventos con Javascript Preparación del Entorno Descargar de la página web http://academicos.azc.uam.mx/jfg/pags/tarea_taller_web.html los archivos del Servidor Apache Tomcat Instalar,
MEDIA TÉCNICA DESARROLLO DE SOFTWARE GUIA DE APRENDIZAJE # 1 MODULO PÁGINAS WEB TEMA: FRAMES. DOCENTE: Juan Carlos Pérez Pérez ESTUDIANTE : FECHA: / /
MEDIA TÉCNICA DESARROLLO DE SOFTWARE GUIA DE APRENDIZAJE # 1 MODULO PÁGINAS WEB TEMA: FRAMES DOCENTE: Juan Carlos Pérez Pérez ESTUDIANTE : FECHA: / / SON EFECTIVOS LOS FRAMES EN UNA SOLUCIÓN WEB? JUSTIFICACIÓN:
CODIGOS AMAWEBS HTML & CSS. </style>
CODIGOS AMAWEBS HTML & CSS Hola Colega Amarillo!, En este documento encontraras una serie de Códigos en lenguaje Html & CSS, los cuales te ayudaran a poder profesionalizar tu Amawebs e incluso puedas darles
TIC II Tema 2: Programación Web
TIC II Tema 2: Programación Web REFERENCIAS Existen varios métodos para seleccionar qué elementos HTML serán afectados por las reglas CSS: Referencia por la palabra clave del elemento. Referencia por el
EJEMPLOS JAVASCRIPT OPERADORES INCREMENTO Y DECREMENTO. ASIGNACIÓN Y ASIGNACIÓN COMPUESTA. (CU01118E)
APRENDERAPROGRAMAR.COM EJEMPLOS JAVASCRIPT OPERADORES INCREMENTO Y DECREMENTO. ASIGNACIÓN Y ASIGNACIÓN COMPUESTA. (CU01118E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript desde
El programa en JavaScript debe ir encerrado entre la marca script e inicializada la propiedad type con la cadena text/javascript:
Javascript Qué es JavaScript? Es un lenguaje de scripting (Código interno en las páginas HTML) necesario para los elaboradores de sitios Web, mediante el cual se puede hacer que las páginas sean activas
IMAGE JAVASCRIPT. NEW IMAGE. COMPLETE, NATURALWIDTH. OBTENER TODAS LAS IMÁGENES DE UNA WEB CON DOCUMENT.IMAGES (CU01186E)
APRENDERAPROGRAMAR.COM IMAGE JAVASCRIPT. NEW IMAGE. COMPLETE, NATURALWIDTH. OBTENER TODAS LAS IMÁGENES DE UNA WEB CON DOCUMENT.IMAGES (CU01186E) Sección: Cursos Categoría: Tutorial básico del programador
FotoToon 5. Actividad para crear historietas
FotoToon 5 Actividad para crear historietas Índice Introducción... 3 Interfaz... 3 Herramientas... 4 Pestaña Globos... 4 Agregar foto... 4 Agregar globos... 6 Girar... 9 Borrar... 9 Pestaña Texto... 9
CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D)
APRENDERAPROGRAMAR.COM CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
DISEÑO WEB AVANZADO CON HTML 5 Y CSS3
Ficha 257 DISEÑO WEB AVANZADO CON HTML 5 Y CSS3 Duración: 40 horas OBJETIVOS Planificar y diseñar páginas y sitios web mediante el lenguaje de programación HTML. Conocer e interpretar las etiquetas del
DISABLED JAVASCRIPT EN INPUT TEXT, SUBMIT, BUTTON, SELECT, LINK, STYLE... IMPEDIR ENVÍO DUPLICADO FORM. DESACTIVAR CSS (CU01183E)
APRENDERAPROGRAMAR.COM DISABLED JAVASCRIPT EN INPUT TEXT, SUBMIT, BUTTON, SELECT, LINK, STYLE... IMPEDIR ENVÍO DUPLICADO FORM. DESACTIVAR CSS (CU01183E) Sección: Cursos Categoría: Tutorial básico del programador
DISEÑO WEB AVANZADO CON HTML5 Y CSS3 MODALIDAD TELEFORMACIÓN HORAS: 40
DISEÑO WEB AVANZADO CON HTML5 Y CSS3 MODALIDAD TELEFORMACIÓN HORAS: 40 Planificar y diseñar páginas y sitios web mediante el lenguaje de programación HTML. Objetivos Conocer e interpretar las etiquetas
Codificación de animaciones Trabajo con imágenes, figuras y otros tipos de gráficos Gestión de datos usando LocalStorage
Tema. JavaScript: gráficos y acceso a datos Objetivos. Codificación de animaciones Trabajo con imágenes, figuras y otros tipos de gráficos Gestión de datos usando LocalStorage Material a utilizar. Editor
Manejo de eventos en JavaScript WEB-TECHNOLOGIES
Manejo de eventos en JavaScript JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES Objetivos Entender el uso de Formularios y Eventos con JavaScript. Visualizar la importancia de delegar el manejo de eventos al
Lo básico de Javascript
Lo básico de Javascript ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Javascript Permite extender las capacidades de HTML Se utiliza principalmente del lado del cliente para
Telecomunicaciones. Presentación del Curso. Rogelio Ferreira Escutia
Telecomunicaciones Presentación del Curso Rogelio Ferreira Escutia Bienvenido!!! 2 1) Objetivo General Identificar las funciones principales de un sistema electrónico de comunicaciones, la modulación,
API GEOLOCATION Y API GOOGLE MAPS JAVASCRIPT. EJEMPLOS. INSERTAR MAPAS INTERACTIVOS, SATÉLITE, ETC. EN WEBS. EFECTOS. (CU01197E)
APRENDERAPROGRAMAR.COM API GEOLOCATION Y API GOOGLE MAPS JAVASCRIPT. EJEMPLOS. INSERTAR MAPAS INTERACTIVOS, SATÉLITE, ETC. EN WEBS. EFECTOS. (CU01197E) Sección: Cursos Categoría: Tutorial básico del programador
Curso de. HTML 5 y CSS 3. Por: Ing. Ubaldo Acosta. www.globalmentoring.com.mx
Curso de HTML 5 y CSS 3 Por: Ing. Ubaldo Acosta www.globalmentoring.com.mx Ejercicio: Manejo de Local Storage 12 en HTML5 www.globalmentoring.com.mx Objetivo del Ejercicio El objetivo del ejercicio es
TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D)
APRENDERAPROGRAMAR.COM TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D) Sección: Cursos Categoría: Tutorial básico del programador web:
Contenido. Introducción CSS dinámico Ejemplos. Programación en Internet DLSI - Universidad de Alicante 1
Departamento de Lenguajes y Sistemas Informáticos DHTML Programación en Internet Curso 2009-2010 Introducción CSS dinámico Contenido DLSI - Universidad de Alicante 1 Introducción Dynamic HTML no es una
Patrones de Radiación. Rogelio Ferreira Escutia
Patrones de Radiación Rogelio Ferreira Escutia Diagrama de Radiación 2 Diagrama de Radiación Es la representación gráfica de las características de radiación de una antena, en función de la dirección (coordenadas
A continuación el código del formulario Registro.html y del archivo validar.js de javascript:
Examen Parcial II- Programación III 1. Dado el siguiente formulario de registro modifique la manera en que se muestran los mensajes de error de validación para cada uno de los campos. Sustituya los mensajes
CSS. Rogelio Ferreira Escutia
CSS Rogelio Ferreira Escutia Definición La hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML
Catedra de Base de Datos
Catedra de Base de Datos Facultad de Ciencias Exactas y Tecnología Universidad Nacional de Tucumán Ciclo Lectivo 2017 Diseño en HTML y CSS Tipología de los sitios web. La estructura de las paginas. Etiquetas
SUBRAYAR CON MARCATEXTO EL PARRAFO DONDE ENCONTRÓ LA PREGUNTA LAS RESPUESTAS LAS ENCUENTRAS DE LA PAG 26 A LA 96 DEBE COPIAR PREGUNTA Y RESPUESTA
TAREA NO 1 INTRODUCCIÓN A HTML5 Y CSS3 PRIMERO BÁSICO PROF. VICTOR AQUINO URRUTIA CURSO: TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN (TICS) CICLO: 2017 ------------------------------------------------------------------------------------------
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
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 determinado elemento de una página web. Siglas CCS significa "Cascading
GUÍA N 5 PROGRAMACIÓN WEB - GRADO 11. Ing. Néstor Raúl Suarez Perpiñan Página 1 de 10
Página 1 de 10 GUIA N 5 FUNCIONES Y VALIDACIÓN DE CAMPOS EN PHP I. FUNCIONES PHP (DEFINIDAS POR EL PROGRAMADOR) Una función es un conjunto de instrucciones agrupadas bajo un mismo nombre que puede ser
DRUIDA OPAC MOVIL MULTILENGUAJE
DRUIDA OPAC MOVIL MULTILENGUAJE Diseño Rápido de Una Interfaz PAra Dispositivos Adaptable Eduardo Sainz-Ezquerra Foces, geresf@unileon.es Innovative permite diseños diferentes de OPAC (html, css, wwwoptions,
Figura 1: página de la vivienda sin estilo
Diseño de Interfaces Hombre Máquina Prácticas de laboratorio Curso 2009/10 Práctica 2 Interacción con hojas de estilo en cascada 1 Objetivo 1.1 Creación de una hoja de estilo La figura 1 muestra una página
JAVASCRIPT VALIDAR CAMPO TEXTO NO VACÍO. QUE VALOR SEA NUMÉRICO. O CORREO ELECTRÓNICO EN FORMULARIOS. EJEMPLOS (CU01182E)
APRENDERAPROGRAMAR.COM JAVASCRIPT VALIDAR CAMPO TEXTO NO VACÍO. QUE VALOR SEA NUMÉRICO. EMAIL O CORREO ELECTRÓNICO EN FORMULARIOS. EJEMPLOS (CU01182E) Sección: Cursos Categoría: Tutorial básico del programador
Taller de Programación II J2EE
ᄎ INACAP Universidad Tecnológica de Chile Sede Santiago Centro Taller de Programación II J2EE Tema 02 Cascading Style Sheets (CSS) Ing. Manuel López R. Qué es CSS? La tecnología CSS (Cascading Style Sheets
Feliz cumpleaños. Introducción HTML & CSS
HTML & CSS 1 Feliz cumpleaños All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.