Scribd Logo
Upload

Welcome to Scribd!

  • Desarollo Web

    Uploaded by

    Aldo Bueno
    29 views31 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    29 views31 pages

    Desarollo Web

    Uploaded by

    Aldo Bueno

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 31

    <!DOCTYPE html> <html> <head> <title>Modelo de caja</title> <link> rel="stylesheet" href="caja1.

    css" </link> <body> // hoja de estilo h1//margin { margin: 50px; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-color:rgb(255,0,0); border-color:#00ff00; border-width: 25px; border-color:blue border-width: 25px; border-width:medium; border-top-width: 50px; border-right-width: 100px; border-botton-width: 150px; border-left-width: 200px; border: 50px dotted red; padding: 300px; width: 200px; } header{

    } //guardar como caja1.css El modelo de caja (Box Model) *Todo elemento html puede ser considerado una caja Que es un elemento html? Algo q esta dentro de las etiquetas o para referirse a las partes que componen l os documentos HTML.

    Que es una etiqueta html?

    Es la parte q senala e identifica algo dentro de pagina web <body>-- el cuerpo o documento de la pagina web donde se encuentra el co ntenido. <div> <ul> <ol> <h1> <a>-- anchor <html> <canvas> <strong> <em> <article> <nav> <title> <footer> <header> <link> <meta> <!doctype> <> <> <> El modelo de caja esta formado por 4 partes 1. 2. 3. 4. Margen Border Relleno Contenido

    Lo anterior es parte de las hojas de estilo (CSS) Para definir las propedades de cada parte necesitamos definir las reglas de CSS para el modelo de caja. Margin Esta parte representa un claro alrededor del borde. Es completamente transparente. Con la propiedad margin: podemos definir todo el claro que queramos al rededor d el margen. Pero si queremos solo de alguna parte lo podemos hacer mediante las siguientes p ropiedades: margin-top: margin-right: margin-botton: margin-left: Hay otra manera de definir las propiedades: margin: 50px 150px 200px 250px; margin: 50px/top 150px/right-left 200px/botton margin: 50px/top-botton 150px/right-left

    margin: 50px/ todos los elementos Unidades de medida aceptadas Pixeles px Centimetros cm Porcentaje % (un porciento del ancho del contenido) inherit hereda el valor del padre Border Las propiedades de border permiten especificar el estilo y color del borde de un elemento. Estilos de Border dotted-Permite tener un borde punteado. dashed-Define un borde de linea discontinua. solid-Define una linea solida. double-Define una linea doble Color de Border border-color:rgb(255,0,0); border-color:#00ff00; border-color:blue; Tambien podemos modificar el ancho del borde. border-width: 25px; medium; Tambien podemos definir el borde por partes (top,right,botton,left) border-top-width: 50px; border-right-width: 100px; border-botton-width: 150px; border-left-width: 200px; border: 50px dotted red; Padding padding: 300px; pagina personal debe estar ahora con el modelo de caja, estos es definir el css, las cajas de cada elemento q tengan. Modelo de Cajas Posicionamiento de Cajas Para lo anterior: EJERCICIO: Crear tres cajas vacias de diferentes color y con dimensiones iguales de 400px X 300px. HTML <div id="caja1">

    </div> <div id="caja2"> </div> <div id="caja3"> </div> CSS #caja1{ background: red; width:400px; height:200p; } #caja2 {background: green; background: red; width:400px; height:200p; position:relative; left:800px } #caja3{ background: blue; background: red; width:400px; height:200p; position:static; } Existe tres diferentes maneras de posicionar las cajas *La primera es STATIC, esta forma de colocar las cajas es como lo hace el navega dor sin necesidad de indicar algo. *La segunda es RELATIVE,esta manera coloca la caja en su posicin normal, pero se puede desplazar relativamente de su psocin normal a lo que le indiquen sus variables:top,right,botton y left. *La tercera es ABSOLUTE, esta manera de colocar la caja, toma como punto de inic io la caja padre y desde ah se desplaza lo que indique: top,right,left, bottom. *La cuarta Otra manera de colocar las cajas es mediante FLOAT, esto es mediante la instrucc in que hace flotar las cajas de acuerdo a sus parametros de left y right. Vamos a iniciar nuestro diseo del nuevo elemento de HTML5 que es el header <header></header> Desde el punto de vista del modelo de cajas podemos crear otras cajas dentro de <header> y asi, disear nuestro encabezado de nuetsra pgina web.Ahorita solo con color y texto, la prxima semana ser con imgene

    s. TAREA: investigar las maneras actuales de definir el ancho de una pgina web, como ayuda hay las siguientes formas y que son: *fijas *liquidas *flexibles(elastico) IMAGENES EN HTML5 En 1992 se inicio la introduccion de imagenes digitales en un sitio web. La incorporacion de una imagen en una pagina web es muy simple, se utliza la eti queta <img> Ejemplo <img src="laimagen"> Basicamente tenemos 3 tipos de imageNes estandar en las paginas web: -jpg -png -gif JPG (Join Photographer Expert Group) Las imagenes tipo jpeg son archivos q se usan para fotografias, esto es para ima genes que tienen mucho detalle. GIF El formato GIF fue creado para el intercambio de imagenes con poco detalle y que se pudiera transmitir rapidamente en internet. Inicialmente fue el formato aceptado en las paginas web. Pero hoy en dia solo lo utilizamos para imagenes con poco detalle. Y tambien para imagenes animadas. PNG Nacio para sustituir al formato GIF, y actulmente se utiliza como un estandar pa ra imagenes que no sean fotografias. Hay q saber algo de imagen digital. Las propiedades de una imagen -Tipo de archivo JPG,GIF,PNG -Tamano de Archivo 1721 kb(kiloBytes) El tamano de la imagen es muy importante por la velocidad de carga de nuestra pa gina web, por la transmision de la misma, mientras menor tamano mejor comportamiento. La regla dice: "no usar imagenes de mas de 100 kb". Por lo tanto tenemos q reducir el tamano de la imagen que sea mayor de los 100kb .(pendiente)

    -Dimension de una imagen (3264x2448) Lo anterior tiene como unidad el pixel. El conjunto de pixeles son lo que forman la imagen. Navegadores modernos 1024x768 Hay q reducir la dimension de la imagen . Para modificar una imagen, generalmente se usa un editor de imagenes como: -Paint -Gim InkScape -Fspot -Powerpoint -word -Photoshop Pero usaremos uno profecional: GIMP (descargarlo) Reesolucion 72x72 ppp(pixeles por pulgada) La resolucion aceptada como estandar para una pagina web es de 72ppp. Banners en HTML5 Hechos con GIMP Lo primero q tenemos q hacer es definir el ancho y la altura del banner. Luego decidir si es solo texto o txto con color de fondo. Tambien podemos crear un banner con una fotografia. 20 de marzo primer examen parcial Suiguiente actividad: Dar los pasos detallados para crear de una manera diferente un banner con la her ramienta Gimp. Ejemplo Crear un banner con texto q incluya dentro del texto una o varias imagenes. 1. 2. 3. 4. 5. 6. 7. 8. 9. Crear el lienzo del tamano del banner q se necesite. Colocar la imagen y posicionarla al gusto Crear el texto (GRANDE) sobre la imagen (OTRA CAPA). Hacer transparente la capa de las letras CApas> Transparencia> Alfa A la seleccion Eliminar la capa de texto. Seleccionar > flotante Crear capa nueva (capa > nueva) Eliminar la capa de la imagen Guardar y listo.

    Etiqueta nav (<nav>) Crea barra de navegacion o menu de navegacio dentro del elemento nav. Para lo anterior ocuparemos las siguientes etiqutas y el respectivo archivo css. <ul> <li> <li> <li> <li> <li> <li> </ul> <a <a <a <a <a <a href="#"> href="#"> href="#"> href="#"> href="#"> href="#"> Inicio </a> </li> Dibujar </a> </li> Colorear </a> </li> Imagen </a> </li> Otros </a> </li> Referencias </a> </li>

    Ahora debemos aplicar estilos de css nav{ background-image: url("nombre.png"); height:40 px; width:1000px; margin: auto; } {font-family: Verdana,Arial,sans-serif;} ul { background-color: rgb(10,25,200); width: 1000px; height: 30px; list-style-type: none; } li { float: left; } ul a { padding-right:32px; padding-left:32px; font-family: Verdana,Arial,sans-serif; text-decoration:none; background-image: url("barra.png"); background-repeat: no-repeat; background-position: right; } Para Agregar un fondo a nuestra barra de navegacion, utilizaremos la propiedad: background-image La imagen suele ser un color o varios colores degradados. Para lo anterior usaremos nuestro editor gimp

    Creamos un liezo de 30px de ancho y el alto del tamano que debe tener nuestra ba rra de 40 px. Mas adelante reduciremos el ancho a 1px. font (w3schools) text (w3schools) Actividad \Dar los pasos para crear una barra de navegacion utlizando css JavaScript Que es Javscript? Es un lenguaje de proegramacion. Nacio en 1996 AJAX HTML5 <canvas> requiere JavaScript(de preferencia) www.zygotebody.com HTML5 Canvas element Utiliza el elemento Canvas de HTML5 y no requiere de FLASH, Java O de ninguno tipo de plugin grafico. Javascript ha tomado la fuerza y la importancia gracias a las nuevas experiencia s de HTML5 y su elemento canvas. Que compilador utlizaremos para JavaScript? NO HAY JavaScript es un lenguaje interpretado. Quien interpreta el luegaje JavaScript? El navegador (TODOS). Por lo tanto podemos ver aplicaciones hechas en JS en mobiles y no-mobiles. Y como incorpor el codigo JS en mi pag web? Hay 3 formas: 1) Dentro del codigo Html, con las etiquetas <script> 2) En un archivo externo con extension.js 3) Campechaneando de las 2 anteriores. JS tiene como antecesor a C,C++,Java y otros. Originalmente se llamaba Livescript. Tiene caracteristicas sintacticas de C,C++,Java.

    Hacer un Programa en Js Miprimer programa en JS <script> alert("hola mundo"); <\script> <script src="mijs.js"> </script> Js es un lenguaje de eventos.Porque puede responder a las acciones que el usuari o haga desde su computadora con los recursos que tenga (teclado,mause,microfono,webcam); Javascript es el lenguaje del lado del cliente q se encarga del comportamiento o la dinamica de las paginas web. Con javaScript podemos manipular los elementos de la pagina HTML atraves del DOM (document Object Model) El Dom es una estructura algebraica que se representa mediante un arbol. Los elementos de DOm, deben ser identificados para mayor facilidad de acceso a c ada elemento. Programacion en JavaScript Otra instruccion de escritura, ahora si dentro de la pagina web. document.write("<h1>"+"hola a todos"+"</h1>"); Js hace diferencia entre mayusculas y minusculas, al nombrar variables, funcione s, objetos y otros elementos. Comentarios en Js // de una lineas /* mas de una linea*/ Para documentar,para etiquetar,para depurar (debug). Valores en Js "hola mundo" "hola a todos" Lo anterior es una cadena de caracteres, Js puede manejar cadena de caracteres. document.write("3.14592657"); Js permite manejar valores numerico tanto con punto decimal como sin punto. document.write(true);

    Js permita el manejo de valores booleanos, esto es true y false. Otros valores en Js: undefined null NaN actividad 10 recurso en js En js podemos leer datos desde diferentes fuentes una de ellas es atravez de una ventana llamada prompt, con la siguiente sintaxis: nombre_variable=prompt("como te llamas:"); Ejercicio Hacer codigo Js que pida el nombre de la persona y la salude. nombre---> procesar--> Hola nombre Estructura de datos Estructuras de programacion 1. Secuenciales 2. 3. Repetitivas Funciones Eventos DOM Js y <canvas> Operadores en Js Existen diversos operadores en js como: Operadores Aritmeticos: + suma aritmetica y concatenacion de cadenas - resta * multiplicacion / % ++ -Operadores de asignacion = +=

    -= *= /= %= Operadores de comparacion === Igualdad de valor y de tipo de dato !== diferente que > < >= <= true==1 --> verdadero true=== --> falso Operadores Logicos && !! ! AND OR NOT

    Ejercicio Elaborar una codigo q muestre la tabla de verdad de 2 variables A y B En js existe un operador llamado de condicion ? Sintaxis condicion ? hacer_algo_verdadero: Hacer_esto_falso; Ejemplo var valor=prompt("dame un numero entero natural:") valor %2===0 ? document.write(""el valor es par):document.write("Es impar"); Estructuras de control = control de flujo if if..else if..else if..else switch IF SIMPLE if(condicion) { instrucciones } IF COMPUESTO if(condicion) { intrucciones para verdadero } else

    { instrucciones para falso } IF ELSE IF if(condicion 1) { instrucciones para condicon 1 } else if(condicion 2) { instruccion para condicion 2 } else { instrucciones para condicion 1 y 2 sean falsas } Ejecricio 1 Construya q permita simular la tirada de una moneda(SOL/AGUILA), para la cual habra un boton de tirar la moneda y una respuesta SOL/AGUILA. Para lo anterior podemos ocupar una funcion o un metodo de un objeto llamado Mat h. Math.random(), el cual devuelve un valor entre 0 y 1, lo demas es puro cerebro y codigo. <script> if(Math.random()<= 0.5) { document.write("SOL"); } else { document.write("AGUILA"); } </script> Switch switch(n) { case valor1: intrucciones de valor1 break; case valor2: intrucciones de valor2 break; case valorN intrucciones de valorN break; ........ default:

    intrucciones en caso diferente a las anteriores } Ejercicio 2 Utilizando la instruccion del switch cree una pagina q simule la tirada de undado, esto es que nos de un valor entre uno y 6 y ademas que indique si el valor es par o impar Estructuras de repeticion Con js tenemos 3 formas de crear un clico: a) for b) while c) do-while Introduccion for Sintaxis for(inicializacion; condicion; incremento;) { bloque de instrucciones } Ejemplo for <script> for(var i=0; i<=10; i++) { document.write(i); } Arreglos en Js Un arreglo permite asociar un conjunto de datos pertenecientes aun tipo de datos . Con jS podemos definir un arreglo en tres formas diferentes: En Js el arreglo es abierto. 1) var nombre_arreglo=new Array(); ejem <script> var edades = new Array(); edades[0]=19; edades[1]=20; edades[2]=19; document.write(edades); </script> Una variente es: var nombre_arreglo=new Array(valor entero); ejem

    var edades = new Arrary(40); 2) var nombre_arreglo=new Array(valor1,valor2,valor3,valorN); ejemplo var edades=new Array(19,20,19,...,21); 3) var nombre_arreglo=[valor1,valor2,valor3,...,valorN]; ejem var edades=[19,20,19]; Proyecto final desarrollar una aplicacion web que: 1. Almacene imagenes de los estados de la republica Mexicana con sus respectivos datos. Por lo menos 2 imagenes por estado. 2. Se pueda seleccionar una imagen de un determinado estado de la republica y mo strar la imagen dentro de canvas. 3. Se puedan realizar por lo menos 5 operaciones de procesmiento de imagen(no de manipulacion). 4. Formar equipos de maximo 5 integrantes. Los requisitos numericos anteriores aumentan en 2 por cada integrante. Presentar la ultima semana de clase Entregar en una sola carpeta Opcional: audio y video por estado. dudas: rubenr@unam.mx Funciones en Js Una funcion es un segmento de codigo que realiza una actividad bien definida y puede regresar un recultado. En Js podemos definir funciones dentro <head> y se definen con la palabra clave function(). Dentro de esos parentesis podremos tener parametros. <head> <script> function mifuncion() { //instrucciones

    } </script> </head> Las funciones on parte esencial e importante en JS,por muchas razones. 1. mejor control de codigo. 2. cuando tenemos muchas funciones podemos crear nuestra biblioteca personal. Se han creado muchas bibliotecas de funciones de JS, lo que ha dado un important e lugar en el desarrollo web. Ejemplo <html> <head> <title>saludo</title> <script> function saludar() { alert("hola"); } </script> </head> <body> <button onclick="saludar()">saludar</button> </body> </html> Ejercicio Elaborar el codigo necesario para q una funcion realize la suma de dos valores q ue recibe como parametros. los datos se encuentran dentro del codigo. y da como resultado la suma de los valores, para lo anterior con un boton para realizar la suma. <html> <head> <title>suma de dos numeros con funciones</title> <script> function suma(a,b) { document.write(a+b); } </script> <script> var a=1; function valores() { var b=2; suma(a,b); } </script> </head> <body>

    <button onclick="valores()">Sumar</button> </body> </html> Cuando utilizamos funciones las variables tienen un hambito de accion, ya sea lo cal o global. HOy construiremos un reloj y en tiempo real con que?\ Con Objetos, tanto de Js como los del navegador y del dom. Queremos un reloj digital que tenga segundos paranuestra pag web. Crear un reloj(hh:mm:ss) para la pag web, con el uso de objetos de Js (date), de l Browser(Window) y del Dom (Document) Del Objeto date Metodos del objeto Date: getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() <body onload="lahora()"> <script> function lahora() { var hoy=new date(); var h=hoy.getHours(); var m=hoy.getMinutes(); var s=hoy.getSeconds(); document.getElementById('reloj').innerHTML=h+":"+m":"=s; t=setTimeout('lahota()',5000); } </script> <body onload="lahora()"> <div id=""reloj">mireloj</div> </body>\ //document.write(h+":"+m+":"+s); //setTiemout("lahota()",999); setInterval()

    sintaxis de setTimeout setTimeout(code,millisec,lang); ejemplo var t=setTimeout("alert('salgo despues de 5 seg')",5000); Del obejteo WIndow el reloj en una caja <body onload="lahora()"> <div id="reloj">MI reloj</div> </body> Y como meto el reloj a la caja? Dle objeto document tiene un metodo: getElementById() Devuelve el elemento que tien el atributo id con el valor en especifico. sintaxis: document.getElemntById(id) Propiedad en innerHTML de HTMLElement la propiedad fija o regresa lo interno o el contenido de un elemento HTML Sintaxis HTMElementObject.InnerHTML=texto Ejemplo <script> function pureba() { var x=document.getElementById("reloj").innerHTML; document.write(x+"rrr"); } El objeto representa una ventana abierta en el navegador. Windows Object Methods alert() and an OK button clearIterval() setTimeout() Uso de los objetos de Js Clasificacion

    Objetos Objetos Objetos Objetos

    de Js de Browser del DOM de HTML Propios creados por el desarrollador

    OBjetos de Js Array object Boolean object Date object Math object Number object string object RegExp object Global Properties and functions Objetos de Browser windows object Navigator object Screen Object History object Location object El elemeto <canvas> de HTML5 Si algo hay realmente nuevo en HTML5 es <canvas>. Que es Canvas? Es un lienzo donde podemos trabajar graficamente. Podemos dibujar, colorear, crear graficos hasta manejo de imagenes. Es una nueva etiqueta de HTML5, que se desarrollo en apple y steve jobs la heredo a todo el mundo. En el 2004 apple lanzo canvas para un sistema operativo MAC os y su navegador Safari, porsteriormente se propuso como un estandar para la web. En el 2008 lo toma W3C.(Tim Berners-Lee). Actualmente encontramos canvas por donde quiera y existen muchos productos ya te rminados para canvas. Multimedia en canvas. Video, animacion, imagen, audio y texto. LA etiqueta canvas no contiene nada. <canvas></canvas> Primeros pasos para usar canvas. 1. Definir o declarar las etiquetas <canvas> dentro de HTML (<body>) <!DOCTYPE html> <html> <head>

    <title>plantilla canvas</title> </head> <head> <style> canvas { border: 2px solid black; } </style> </head> <body> <canvas id="miCanvas"> </canvas> </body> </html> 2. COn js y con el uso del DOM vamos a tomar nuestro canvas. document.getElementById("miCanvas"); 3. utilizar un nuevo objeto de HTML5 que se llama: getContext("2d"); El cual nos permite crear un contexto grafico en el cual podemos utilizar muchos metodos para trabajar con graficos. 4. Hacer lo que quieran o puedan con js y los metodos de getContext("2d").

    Lineas moveTo(x,y); lineTo(x,y); contexto.moveTo(20,10); contexto.lineTo(20,110); contexto.srtoke(); Ejemplo <!DOCTYPE html> <html> <head> <title>plantilla canvas</title> </head> <head> <style> canvas { border: 2px solid black;

    } </style> </head> <body> <canvas id="miCanvas"> </canvas> <script> var lienzo=document.getElementById("miCanvas"); var contexto=lienzo.getContext("2d"); contexto.moveTo(20,10); contexto.lineTo(5,110); contexto.strokeStyle="blue"; contexto.lineWidth=3; contexto.stroke(); </script> </body> </html> Mismo Ejemplo con funciones <!DOCTYPE html> <html> <head> <title>plantilla canvas</title> </head> <head> <script> function misdibujos() { var lienzo=document.getElementById("miCanvas"); var contexto=lienzo.getContext("2d"); contexto.moveTo(20,10); contexto.lineTo(5,110); contexto.strokeStyle="blue"; contexto.lineWidth=3; contexto.stroke(); } </script> <style> canvas { border: 2px solid black; } </style> </head> <body onload="misdibujos()"> <canvas id="miCanvas"></canvas> </body> </html> Circulos arc(x,y,

    arc(15,125,5 Ractangulo rect(x,y,ancho,alto); ctx.rect(200,20,80,100); ctx.stroke();

    Actividad en su pagina personal agregar un elemento canvas y hacer algun dibujo geometrico . Hacer que las cosas se muevan. Animacion: La animacion es una ilusion optica. Circulo con animacion. <!DOCTYPE html> <html> <head> <title>plantilla canvas</title> </head> <head> <script> var inc=0; function misdibujos() { var lienzo=document.getElementById("miCanvas"); var contexto=lienzo.getContext("2d"); contexto.beginPath(); contexto.arc(15+inc,135,15,2*Math.PI,0*Math.PI); contexto.fillStyle="red"; contexto.fill(); contexto.stroke(); ++inc; setTimeout("misdibujos()",500); } </script> <style> canvas { border: 2px solid black; } </style> </head> <body onload="misdibujos()"> <canvas id="miCanvas"></canvas> </body> </html>

    movimiento de pelota <html> <head> <title>plantilla canvas</title> </head> <head> <script> var inc=0; var dir=1; function misdibujos() { var lienzo=document.getElementById("miCanvas"); var contexto=lienzo.getContext("2d"); contexto.clearRect(0,0,300,150); contexto.beginPath(); contexto.arc(15+inc,135,15,2*Math.PI,0*Math.PI); contexto.fillStyle="blue"; contexto.fill(); contexto.stroke(); if((15+inc)==285) { dir=-1; } else if((15+inc)==10) { dir=1; } inc=(inc)+1*dir; setTimeout("misdibujos()",10); } </script> <style> canvas { border: 2px solid black; } </style> </head> <body onload="misdibujos()"> <canvas id="miCanvas"></canvas> </body> </html> TEAREA Hacer un script que genere curvas de bezier de manera aleatoria, esto es, que se muevan dichas curvas. Imagines y Pixeles en Canvas

    Metodos (4) y Atributos (3) 1. Como metemos una imagen en canvas. En una pagina web con Html usamos <img> Existen 4 metodos para trabajar con imagenes dentro de canvas: drawImage() createImageData() getImageData() putImageData() Para lo anterior primeramente necesitamos tener nuestro canvas. Luego crear un objeto de imagenes var objImagen=new Image(); Los parametros de drawImage() son los siguientes drawImage(imagen,posX,posY); <!DOCTYPE html> <html> <head> <title>plantilla canvas</title> </head> <head> <script> window.onload = function() { var lienzo=document.getElementById("miCanvas"); var contexto=lienzo.getContext("2d"); var objImagen = new Image(); objImagen.src = "aldo.png"; contexto.drawImage(objImagen,0,0); }; </script> <style> canvas { border: 2px solid black; position: absolute; left: 0px; top: 0px; } </style> </head> <body> <canvas id="miCanvas" width= "1000" height= "90"></canvas> </body> </html> Con lo anterior vemos que podemos colocar en cualquier posicion una imagen dentro de canvas.

    Con el parametro de posicion X y en de posicion Y podemos hacer que la imagen se mueva dentro de canvas. Imagenes en Canvas(cont.) Actividad Buscar y colocar en su pagina web una relacion 10 sitios o recursos sobre trabajo de canvas y 10 sobre manejo de imagenes sobre canvas Recortar un area de la imagen y colocar esa aerea con un ancho y alto especifico . sintaxis contexto.drawImage(img,sx,ay,swidth,sheight,dx,dy,dwiith,dheight); donde img es el objeto imagen para el proceso Metodo createImageData() 1.Este metodo permite crear un nuevo objeto imagedata en blanco. 2. Todos los pixeles del nuevo objeto tienen por default ek valor rgba(0,0,0,0) 3.puede tener parametros de ancho y largo. Para cada pixel en el objeto imagedata hay 4 partes de informacion, los valores rgba: 1. el color rojo,verde,azul y la intensidad alpha que van desde 0 hasta 255. Para crear un objeto imagedata indicando width y height: var imgData=contexto.createImagedata(width, height); Para crear un objeto imagedata como parametro Multimedia en HTML5 elementos de nultimedia son: Texto,imagen, viedo y animacion. con los ingredientes de interactividad y video. HTML5 introduce ademas del elemento canvas dos nuevas etiquetas para audio y vid eo. Hasta hoy cualquier esfuerzo de tener audio y video en una pag web, requiere de algun complemento o plug-in. Pero con HTML5 ya no se requiere. Audio con Html5

    El elemento de audio es: <audio> </audio> Permite reproducir 3 distintos formatos de audio: -MP3 -WAV -OGG Ejemplo <audio controls="controls"> <source src="Kalimba.mp3" type ="audio/mpeg"/> </audio> La recomendacion actual es colocar los tres formartos dentro de audio para mayor compatibilidad. Para lo cual requerimos los formatos de alguna manera. VIDEO DE HTML5 Otro de los grandes recursos actuales de la web es el video. Para el video tenemos la misma situacion del audio. HTML5 tiene el elemento <video> </video> Los formatos aceptados de video para HTML5 son: -mp4 -webm -Ogg Ejemplo <video controls="controls"> <source src="HTML5Video.mp4" type ="video/mp4"/> </video> Dentro de la etiqueta video podemos definir o establecer el ancho y la altura de visualizacion del video. <video width="720" height="480" controls="controls"> <source src="video.mp4" type="video/mp4"> </video> COnvertir una imagen de color a blanco y negro hay unas formulitas: R*0.3+G*0.59+B*0.11 R*0.2989+G*0.5870+B*0.1140 var gris=0;

    for(i=0;i<datosImagen.width*datosImagen.height*4;i+=4) { gris=datosImagen.data[i]*0.3+datosImagen.data[i+1]*0.59+datosImagen. data[i+2]*0.11; // for(i=0;i<datosImagen.width*datosImagen.height*4;i+=4) datosImagen.data[i]=gris; datosImagen.data[i+1]*=gris; datosImagen.data[i+2]*=gris; datosImagen.data[i+3]=255; } contexto.putImageData(datosImagen,500,50);

    PHP servidor web Es un lenguaje de programacion. Pero es un lenguaje dependiente de un servidor web, por lo tanto debemos tener i nstalado un software de servidor web en nuestra maquina. Primeramente debemos instalar el software de servidor web y despues el lenguaje PHP. Hay unos paquetes que incluyen el servidor web, PHP, Mysql y mas cosas. Para lo que vamos hacer lo anterior es suficiente. Ejemplos de estos paquetes son: -WAMP server -APPserver -XAMP PHP 1996 (Personal Home Page) PHP Hypertext Preprocessor Mi primer programa en PHP El codigo php va entre las etiquetas <?php // aqui va codigo PHP ?> Como el codigo lo interpreta el servicio del servidor web, debemos guardar el ar chivo con la extencion .php para que sepa que ahi hay codigo php. PHP puede estar incluido dentro de HTML5 Elementos de Programacion en PHP -Comentarios en PHP // , /* */ -Variables en PHP

    Toda variable empieza con un signo de $. ejem. $a,$nombre. Las variables son declaradas en el momento en que se usan. -Operadores Concatenacion . Aritmeticos +,-,/,*,%,++,-Asignacion +=,-=,*=,/=,.=,%= De comparacion ==,!=,<>,>,<,>=,<= Logicos o Booleanos &&,!,|| Estructuras de control -Condicional if(condicion){} Formularios Un frmulario es un elemento Html que permite la captura de datos en una pagina w eb y enviarlos al servidor. <form> </form> El servidor se encarga de recibir los datos y activar algun servico para el proc esamiento de los datos, en nuestro caso es PHP, pero puede ser Java,.Net y otros. Los elementos del formulario son los elementos que permiten al usuario introduci r informacion, como: text fields radio buttons Input La etiqueta input <input> El tipo de entrada se Texts Fields-campos de texto los campos de texto se utilizan como se desea que el usuario escriba: letras, nu meros etc. Nombre: - campos de texto -

    <input type= "nombre"/> <br/> Para enviar la informacion agregamos un boton. El boton se crea con otra etiqueta <input> pero ahora el tipo es "submit". <input type="submit" value="Ay te va"/> Para terminar de enviar y procesar los datos, debemos indicar en <form> que acci on se debe ejecutar en el servidor, esto lo hacemos con el parametro action="ruta/arcchivo.algo". <form action="recibe.php" method=> Existen 2 metodos para enviar los datos de un formulario al servidor y son: 1. get 2. post Primeramente usaremos el metodo get <form action="recibe.php" method="get"> Con el metodo Get la URL toms los datos y los envia al servidor. Ahora vamos a crear el archivo php que recibe los datos. Con PHP tenemos 2 variables que reciben los datos del formulario, y son: $_GET[] $_POST[] <?php echo $_GET["nombre"]; ?> Si el archivo php se encuentra en un servidor remoto, debemos indicar toda la ru ta. Ejemplo: action=""http://www.tecnologiasnet.com/recibeme.php" Ahora utilizamos el metodo POST para hacer exactamente los mismo, lo unico q cam bia es el metodo. action="post" La variable a utilizar en el codigo php es $_POST. COntrasenas <!DOCTYPE html> <html> <head> <title>Formularios</title>

    </head> <body> <form action="recibeme.php" method="post"> Usuario: <input type="text" name="Usuario"/> <br/> Contrasena: <input type="password" name="Contrasena"/> <input type="submit" value="Ay te va" /> </form> </body> </html> Radio Buttons - botones de opcion <input type="radio" name="sexo" value="masculino" /> Masculino <br/> <input type="radio" name="sexo" value="femenino"/>Femenino <br/> Checkboxes- Casillas de Verificacion Las casillas de verificacion se utiliza cuando se utilizan que selecciones una o mas opciones <form> transporte que utilizo <br/> Bicicleta <in LIsta despegable Textarea fields -campos del area de texto Base de Datos en la Web Conceptos: Que es? -Es un conjunto de datos organizados, estructurado,almacenado y relacion ados que cumplen un objetivo. -DBMS Sistema Manejador o Administrador de Base de Datos. Es el software que se encarga de todo lo relacionado con las bases de da tos. Ejemplos: MySQL, Oracle,PostgreSQL,DB2,SQLite Como se forman las bases de datos? -Relacionales *tablas

    *registros *Campos <los campos contienen datos de algun tipo> Normalizacion (1a,2a,3a,4a,5a,6a,7a) Lo importante hoy en dia es que los DBMS tienen un lenguaje comun que se llama S QL. Que es SQL? Es un lenguaje que nos permite trajar con las bases de datos y realizar operaciones sobre las bases de datos en 3 grandes subgrupos: *DDL Define todo lo de la base de Control de datos, de datos. suarios,privilegios etc. *DML Inserta,modifica y borra datos. *DCL Lenguaje define u

    Podemos utilizar bases de datos en la web. - PHP y los servidores de bases de datos. *PHP tiene mas de 700 funciones, entre ellas las funciones que permiten trabajar con una base de datos a traves de un DBMS. *En las aplicaciones web, PHP casi siempre aparece con su pareja que es MySQL. Interactuando con MySQL *Show databases; *CREATE DATABASE Jueves24; *USE jueves24 *CREATE TABLE mitabla(id varchar(4),nombre varchar(15)); *SHOW TABlEs; *DESCRIBE mitabla; -Lo primero que debemos hacer en PHP es conectarnos a la bases de datoss , con la funcion siguiente: mysql_connect() Ejemplo: <?php $con=mysql?conect("127.0.0.1","root,"""); if($con) { echo("ya la hiciste, estas conectado desde pho"); else echo("que triste no se pudo ingresar"; } if (mysql\_query(""CREATE DATABASE jueves24a,$con)) ?>

    Una vez conectadp podem os trbajar con el DMBS, para cualquiers cosa, como crear bases de datos. Para hacer que PHP ejecute la sentencia anterior sed // Crea una tabla mysql_select_db("jueves24a",$con); $consulta="CREATE TABLE personas(" Comunicsacion con base de datos php y formularios. Con las variables (arreglos) &_post[] y $_get[], podemos insertar datos en la ba se de datos. Tambien podemos consultar datos de la base de datos a partir del valor que tenga la variable $_post[] o la variable $_get[] y devolver la consulta al navegador, recordando q ue lo que devolvemos al navegador va en codigo HTML, por lo tanto sera parte del DOM y lo podemos trabajar con JAV Ascript.

    You might also like