thefantasticfour
Usuario (Argentina)
Bienvenidos otra vez a un nuevo post. En este post les enseñare como crear una sencilla pagina web aplicando los llamados frames y ademas indicare algunas cosas de la etiqueta <body> . Lo que me interesaba del lenguaje html era como hacer para dividir una pagina en varias partes o secciones y eso se puede hacer con las siguientes etiquetas <frameset> y <frame> y otra cosa si queremos hacer una pagina con 3 secciones deberemos hacer 4 documentos html. Pero la estructura de la pagina principal es decir donde haremos las divisiones en marcos tiene la siguiente forma <html> <head> codigos <head> <frameset> <frame src=..> </frameset> </html> es decir se reemplaza la etiqueta <body> por <frameset> y la etiqueta <frame> es para incluir el archivo que pondremos en el o los frame La etiqueta <frameset> tiene varios atributos pero mencionaremos 2 nada mas que son cols y rows. <frameset cols=10%,30%,*> divide la pagina en tres columnas una con un ancho del 20% de la pagina, otra con un ancho del 30% de la pagina y con * otra columna con el ancho restante.(El ancho de las columnas tambien se puede indicar en pixeles) Ejemplo supongamos un hipotetico monitor con resolucion 1000 x 750 el ancho de la primera columna sera 100 pixeles, de la segunda 300 pixeles y de la ultima columna el espacio que sobra es decir 600 pixeles. <frameset rows=100,300,*> divide la pagina en tres filas, una con una altura de 100 pixeles, la del medio con altura de 300 pixeles y la de abajo con la altura restante es decir 350 pixeles suponiendo que trabajamos con el mismo hipotetico monitor. Veamos el siguiente ejemplo haremos una pagina dividida en 3 columnas y en cada una insertaremos otras paginas. <html> <head><title>pagina de pueba</title></head> <frameset cols=30%,30%,*> <frame src=http://www.***> <frame src=http://www.taringa.net> <frame src=http://www.lagaceta.com.ar> </frameset> </html> Ese es para insertar paginas web externas pero si las paginas o archivos tienen la misma ubicacion que la pagina principal es suficiente con poner <frame src=nombredearchivo.jpg> si fuera una imagen en jpg <frame src=nombredepagina.html> si fuera un archivo html Veamos el ejemplo http://potrosalta.minus.com/mlbyQdJZT/1g Ahora veamos este codigo <html> <head><title>pagina de pueba</title></head> <frameset rows=200,200,*> <frame src=http://www.***> <frame src=http://www.taringa.net> <frame src=http://www.lagaceta.com.ar> </frameset> </html> Esta pagina se puede ver en el ejemplo siguiente http://potrosalta.minus.com/mJaJUg3Pf/1g Bueno ahora veamos si hacemos algo un poquito mas serio.jeje. codigo de la pagina <html> <head><title>paginola</title></head> <frameset cols=200,*> <frame src=uno.html name=frameuno> <frameset rows=150,*> <frame src=dos.html name=framedos> <frame src=paginaprincipal.html name=frametres> </frameset> </frameset> </html> Explicacion este es un ejempo de uso de anidamiento de frames. primero dividimos la pagina en dos columnas con <frameset cols=200,*> con <frame src=pagina1.html> introducimos en la columna de la izquierda la pagina 1. Y ahora cuando ponemos <frameset rows=150,*> dividimos la columna de la derecha en dos filas. con <frame src..> introducimos las dos paginas (pagina 2 y pagina 3) en las filas que habiamos obtenidos respectivamente. </frameset> etiqueta de cierre del segundo frameset y finalmente </frameset> para cerrar el primer frameset. Lo que yo quiero hacer es una pagina donde en la columna izquierda pondre algunas opciones y al hacer click en algunas opciones aparecera una nueva pagina en la fila de abajo de la columna de la derecha. Otro atributo de la etiqueta <frame> es name como se ve en el codigo anterior <frame src=uno.html name=frameuno> Su uso es para darle un nombre al frame o seccion, esdecir la columna de la izquierda se llamara frameuno La dos filas que iran a a la par de la columna seran la de arriba framedos y la de abajo frametres codigo de la pagina que ira en frameuno <html> <head> <title>pagina1</title> </head> <body bgcolor=#AAAAAA> <font color=ffffff> <h2> <a href=nuestrafuncion.html target=frametres>nuestra funcion[br /] <a href=quienesomos.html target=frametres>quienes somos[br /] <a href=comocontactarse.html target=frametres>como contactarse[br /] <a href=paginaprincipal.html target=frametres>pagina principal[br /] </h2> </font> </body> </html> Esta se debe guardar con nombre "uno.html" explicacion href y target son atributos de la etiqueta <a> que sirve para crear enlaces a otras paginas <a href=www.google.com.ar> click <a> al clickear en la palabra "click" ira a www.google.com.ar. <a href=nuestrafuncion.html target=frametres>nuestra funcion</a> con el atributo target indicamos donde se abrira la pagina enlazada en este caso se abrira en el frame de nombre "frametres" codigo de la segunda pagina <html> <head> <title>pagina1</title> </head> <body background=fondo.jpg> <center> <span style=font-size: 90px>Bienvenidos a mi pagina</span> </center> </body> </html> Esta se debe guardar con nombre "dos.html" Con el atributo background=fondo.jpg, ponemos una imagen de fondo, en mi caso tengo la imagen y los archivos en el escritorio por lo que no hace falta poner la direccion de la imagen pero si estuviera en otra ubicacion distinta hay que poner la ubicacion completa. supongamos que esta en el disco f seria asi background=f://fondo.jpg Y esta ira en la cabecera o en el "framedos" que sera el titulo de la pagina. Habia limitaciones en el tamaño del texto con html asi que tuve que introducir la etiqueta <span style> que sirve para definir estilos en algunas partes del documento y con font-size indicar el tamaño del texto de 90 pixeles. tercera pagina <html> <head> <title>pagina principal</title> </head> <body bgcolor=green> <center> <font color=white> <h2> <p> En esta pagina encontraran todas las herramientas necesarias para aprender a programar </br> Manuales, tutoriales, videos gratis para que entres en este mundo de la programacion y </br> totalemente gratis. Tu aprendizaje esta garantizado.</br> </p> <h2> </font> </center> </body> </html> Este se debe guardar con nombre "paginaprincipal.html" Esta pagina es la que aparecera por defecto al abrir la pagina pero obviamente al clickear en algun enlace de la columna la pagina de ese enlace aparecera en este frame y podemos volver ckickeando en "paginaprincipal". codigo de la cuarta pagina <html> <head> <title>pagina1</title> </head> <body bgcolor=black> <center> <font color=white> <h2> Somos una empresa dedicada a la formacion de personas</br> en el ambito informatico, con sede en Salta, Republica de Argentina,</br> nuestros manuales y tutoriales son preparados por personas</br> con conocimientos idoneos en la materia.</br> </h2> </font> </center> </body> </html> Este se debe guardar con nombre "nuestrafuncion.html" codigo de la quinta pagina <html> <head> <title>pagina1</title> </head> <body bgcolor=black> <font color=white> <center> <h2> Nuestra organizacion nacio hace unos cincos años </br> Al principio se trataba de una sola persona con muchas </br> ambiciones, pero luego se junto con otras con intereses </br> compartidos en la enseñaza y preparacion de gente </br> que muestre deseos de aprender. </br> </h2> </center> </font> </body> </html> Este se debe guardar con nombre "quienesomos.html" Codigo de la ultima pagina <html> <head> <title>pagina1</title> </head> <body> </body> </html> Esta no tiene importancia, se debe guardar con nombre "comocontactarse.html" Esta en blanco pero a los efectos sirve igual.para el ejemplo. Finalmente puede verse en el video siguiente la funcionalidad de la pagina. link: http://www.youtube.com/watch?v=t7TlNzXMGAI Espero que les haya gustado.
Les dejo el codigo de un div animado en javascript, no en el sentido de moverse sino en el sentido de la forma de aparecer en la pagina, abajo el video. link: http://www.youtube.com/watch?feature=player_embedded&v=Vtipz8brlPg Como se ve en el video uso el div de abajo como boton y tal que al clickear en el aparecen y desaparecen lentamente los div de arriba. abajo el codigo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <style type="text/css"> body {background-color:white; background-image:url(file:/programatodo/imagenes/fondo.jpg)} .uno {position:absolute; top:100px; left:100px; background-color:red; width:250px; height:300px; opacity:0; } .dos {position:absolute; top:100px; left:400px; background-color:blue; width:250px; height:300px; opacity:0; } .tres {position:absolute; top:100px; left:700px; background-color:blue; width:250px; height:300px; opacity:0; } .boton {position:absolute; top:500px; left:300px; height:50px; width:50px; background-color:#FF8040; } </style> </head> <body> <div class="uno" id="uno"> </div> <div class="dos" id="dos"> </div> <div class="tres" id="tres"> </div> <div class="boton" id="boton"> </div> <script type="text/javascript"> var uno=document.getElementById('uno'); var dos=document.getElementById('dos'); var tres=document.getElementById('tres'); var boton=document.getElementById('boton'); var opafin=0.7900000000000005; var a=0.00; var aa=0.80; function aparecer(param1) { var par1 par1=param1 par1.style.opacity=a; a=a+0.01; var b=a.toFixed(2); if (b==0.80) { clearInterval(tiempo); a=0.00; c=uno.style.opacity; uno.innerHTML=c; } } function llamar1() { tiempo=setInterval('aparecer(uno)',40); } function llamar2() { tiempo=setInterval('aparecer(dos)',40); } function llamar3() { tiempo=setInterval('aparecer(tres)',40); } function desaparecer(param1) { var par1; par1=param1; par1.style.opacity=aa; aa=aa-0.01; var bb=aa.toFixed(2); if (bb==0.00) { clearInterval(tiempo1) aa=0.80; } } function comprobar() { if(uno.style.opacity==opafin || dos.style.opacity==opafin || tres.style.opacity==opafin) { if (uno.style.opacity==opafin) { tiempo1=setInterval('desaparecer(uno)',40) llamar2(); } else if(dos.style.opacity==opafin) { tiempo1=setInterval('desaparecer(dos)',40) llamar3(); } else if(tres.style.opacity==opafin) { tiempo1=setInterval('desaparecer(tres)',40); llamar1(); } } else { llamar1(); } } document.getElementById('boton').addEventListener('click',comprobar,false); </script> </body> </html> La explicacion del codigo la pueden encontrar en mi blog http://programacomoyo.blogspot.com.ar/2013/03/div-animado-buenas-gente-en-este.html
Hola gente hermosa les dejo este codigo de una simple calculadora que hice en javascript <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>calculadora</title> <style type="text/css"> .res{position:absolute; top:100px; left:100px; width:auto; height:auto; } </style> </head> <body> <form id=form1 name="formulario1" class="form"> <input type="text" id="num1" name="num1"/> <input type="text" id="ope" name="ope"/> <input type="text" id="num2" name="num2" /> <input type="button" id="boton" name="boton" value="operar" /> </form> <div class="res" id="res"> </div> </body> <script type="text/javascript"> function operar(){ var dive=document.getElementById('res'); var numero1=document.forms["formulario1"].elements["num1"].value; var numero2=document.forms["formulario1"].elements["num2"].value; var operador=document.forms["formulario1"].elements["ope"].value; if(operador=="+"){ var res=eval(numero1)+eval(numero2); dive.innerHTML=res; } else if(operador=="-"){ var res=eval(numero1)-eval(numero2); dive.innerHTML=res; } else if(operador=="*"){ var res=eval(numero1)*eval(numero2); dive.innerHTML=res; } else if(operador=="/"){ var res=eval(numero1)/eval(numero2); dive.innerHTML=res; } } document.getElementById('boton').addEventListener('click',operar,false); </script> </html> Explicacion Primero creamos la clase res que corresponde al div donde aparecera el resultado de la operacion dinamicamente. Luego creamos un formulario con 4 elementos, 3 input text, donde se introduciran el primer operador, el signo de la operacion, y el segundo operador respectivamente y un botton normal, prestenle atencion a la propiedad name y value de los imput. O para los que no saben value es el contenido del campo o lo que se escribe. Codigo javascript: var dive=document.getElementById('res'); creamos una referencia al div id=res, y la guardamos en la variable dive. var numero1=document.forms["formulario1"].elements["num1"].value; guardamos en la variable numero1 el valor del campo de nombre num1. Con document.forms["algo"] accedemos al formulario de nombre algo, y con document.forms["algo"].elements["campo1"].value accedemos al texto que contiene el input de nombre campo1 del formulario de nombre algo. los operadores condicionales disctinguen cada caso el simbolo ingresado en el campo para el operador y de acuerdo a esto realizan la operacion correspondiente al simbolo ingresado, la funcion eval trasforma a numero cualquier string que tenga como argumento. dive.innerHTML=res; Este codigo escribe en el div apuntado por dive el valor de la variable res que es el resultado de operar. Finalemente document.getElementById('boton').addEventListener('click',operar,false); lo que hace es asigna al elemento de id=boton, el evento click y al detectar este click en ese elemento llama a la funcion operar. Si ya es muy sencillo pero es que tenia poco tiempo, y esto salio bastante rapido. y estoy haciendo un tutorial que usa muchas mas funciones en javascript que todavia no termino. chaito donde aparece carita es )
Hola muchachos y muchachas de taringa seguro ustedes a la hora de sacar la raiz cuadrada de un numero agarran al toque la calculadora, o la del celular o la de la pc. Pero hay formas para aproximar la raiz cuadrada de un numero sin necesidad de usar calculadora, la que me enseñaron en matematica no me acuerdo pero les dejo esta que se me ocurrio hace unos años y hoy justo me estaba acordando. Sea b el numero natural cuya raiz cuadrada quieran calcular y tal que a^2 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; b &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; c^2. Entonces establecemos la siguiente igualdad aproximada. (b-a^2)/(c+a)=(x-a)/(c-a) donde x es la raiz cuadrada aproximada de b que calcularemos despejando x quedaria x= a +[ (c-a)*(b-a^2)/(c+a)] ejemplo sea b=8 queremos queremos encontrar x tal que x^2=8 ahora 4 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; 8 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; 9 por lo tanto 2 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; x &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; 3 y como 3-2=1 la formula quedaria x=2+ (4/5) x=2,8 o sea es el primer valor aproximado para la raiz cuadrada de 8 2,8*2,8= 7,84 Bien nos estamos aproximando ahora 7,84 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; 8 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; 9 y 2,8 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; x &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; 3 aplicando la misma formula x= 2,8 +(8-7,84)/5,84 x= 2,8 + 0,16/5,84 x= 2,8 + 0,027397 x= 2,827397 otro valor mas aproximado a la raiz cuadrada de 8 como veremos (2,827397)^2=7,994117 y si quieren mas decimales exactos siguen aplicando la formula espero que les haya servido y para salvar el post
En el siguiente Blog encontraran todos los libros de C de la lista de abajo. 1)Algoritmo y lenguaje C 2)Aprenda lenguaje ANSI C como si estuviera en primero 3)Curso basico de programacion en C 4)Curso de iniciacion al lenguaje C 5)EL lenguaje de programacion C 6)Programacion en C 7)Programacion en C-J Carlos Lopez Ardao 8)C en poco tiempo y en poco espacio 9)Curso C-Antonio Lebron Bocanegra 10)Fundamentos de programacion en C 11)Fundamentos de programacion en C-Luis Joyanes Aguilar 3ed 12)Ejemplos C 13)Curso del Lenguaje C-Angel Salas 14)Fundamentos de programacion en C-Piensa en C.