Ejemplos de Programacion

Entradas

Mostrando las entradas de enero, 2015

Ejemplo creando pagina con zen coding

- enero 24, 2015

En este ejemplo de programación crearemos una pagina web simple utilizando unos cuantos elementos que mostre en el transcurso de todos los ejemplos. aqui el codigo: html:5>div{Principal}>ul{nm $$}*3+article{article}>section{sec $$}*2>div{ingrese los datos $$}>form>label{nombre}>input:t>label{contra}>input:b>footer{foter}>iframe>video:src{https://www.youtube.com/watch?v=a3eG2evI9aU} ten en cuenta que esta pagina creada con el código no tiene tanto sentido solo la cree para mostrar lo largo que puede ser el codigo que puedes crear resumiendo todo, lo unico que tendrias que hacer es comprender bien el tema. Ejecutar Codigo: Page Zencoding Descargar Ejemplo: Page Zencoding Zen Coding Anterior ...

Ejemplo creando form / formulario con zen coding

- enero 24, 2015

En este ejemplo crearemos un formulario con sus los elementos como ser los label, input y button con zen coding: ten en cuenta en escribir el codigo y presionar control + e para efectuar la accion. form: < form action="" >< / form > input: < input type="" / > input:t: < input type="text" name="" id="" / > input:b: < input type="button" value="" / > input:h: < input type="hidden" name="" / > label: < label for="" > < / label > aqui un ejemplo utilizando los elementos mostrados anteriormente: html:5>form>label>input:t>br>label>input:b Nos da como reultado: < !DOCTYPE HTML> < html lang="en-US"> < head > < meta charset="UTF-8" > < title >< / title > < / head > < body > < form action="" >< label for=...

Ejemplo mostrando imagenes y videos con zen coding

- enero 24, 2015

En este ejemplo crearemos url y mostraremos imagenes utilizand los elementos a, img, figure, iframe, video, hgroup, con zen coding: ten en cuenta en escribir el codigo y presionar control + e para efectuar la accion. a: < a href="" >< /a > img: < img src="" alt="" / > figure: < figure >< / figure > iframe: < iframe src="" frameborder="0" >< / iframe > video: < video src="" >< / video > hgroup: < hgr oup >< / hgr oup > aqui un ejemplo utilizando los elementos mostrados anteriormente: html:5>hgroup>a>img Nos da como reultado: < !DOCTYPE HTML > < html lang="en-US" > < head > < title >< / title > < / head > < body > < hgroup > < a href="" >< img src="" alt="" / >< / a >< / hgroup > < / body > < / ht...

Ejemplo hide show Jquery

- enero 10, 2015

En este ejemplo de programación mostrare el uso de hide y show en jquery acciones que hacen que desaparezca algún elemento de la pagina web o aparezca dependiendo de la acción efectuada, por ejemplo: ejecuta el código: hide show Jquery como se puede ver con esa imagen al presionar el botón ocultar la imagen con el id imagen se esconde, pero al apretar el botón mostrar la misma imagen con el id: imagen se muestra de vuelta. Ya con los h1 y h2 se efectúan dos acciones al presionar el botón como ser en el boton3 ocultar h1 y mostrar 2 y en el boton4 al revés ocultar h2 y mostrar h1. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml</title> </head> <body> <script src="jquery-1.11.2.js"></script> <article> <section> <p>Imagen:</p> <img src="img.png" alt="" id="imagen" /><br /...

Ejemplo encadenado Jquery

- enero 10, 2015

En Jquery podemos asignar mas de una acción utilizando el encadenamiento de jquery. declarando todas las acciones que se tendría que efectuar . A continuación mostrare un ejemplo utilizando el encadenamiento. En este ejemplo efectuo diversos efecos seguidos sobre el H1. Encadenando efecto jquery en h1 aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml Chaining jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <div id="H1" style="display:none;">Hola mundo</div> <br><br><br><br /><button id="boton1">ejecutar</button> </section> </article> <script> $(document).ready(function(){ $("#boton1").click(function(){ $("#H1").slideUp().slideDown().fadeTo("fast...

Ejemplo callback Jquery

- enero 10, 2015

Con jquery podemos darnos cuenta cuando termina el proceso de alguna acción que este en ejecución utilizando el callback de jquery. con el callback podemos definir que accion efectuar despues de que termine x proceso. a continuación mostrare un ejemplo utilizando el callback.: CallBack Jquery En este ejemplo efectúo la acción de avisar por que animación se esta ejecutando la función del boton1. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml callback jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <div id="dv" style="width:107px;height:24px;background-color:yellow; position:absolute"></div> <br><br><br><br /><button id="boton1">Mover</button> </section> <div id="msj1"><...

Ejemplo stop Jquery

- enero 10, 2015

Con jquery podemos parar acciones que estén en ejecución en la pagina web, utilizando el stop de jquery. Pudiendo parar una o mas acciones. A continuación mostrare un ejemplo utilizando el stop: Stop Jquery En este ejemplo muestro la acción de mover el h1 hacia la izquierda 450 px lo cual se detendra en caso de presionar el boton parar aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml stop jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h1 id="H1" style="position:absolute;">Hola mundo</h1><br><br /> <button id="boton1">Mover</button> <button id="boton1P">Parar</button> <br><div id="msj1"></div> </section> <hr /> </article> ...

Ejemplo Animate Jquery

- enero 10, 2015

Con jquery podemos crear animaciones para algún elemento de la pagina web, utilizando animate de jquery. podiendo asignarle al elemento una o mas acciones hacia uno o mas elementos a continuacion mostrare un ejemplo utilizando animaciones: Animate Jquery Como puedes ver en el ejemplo muestro e secciones con e botones que ejecutan la funcion establecida funciones que utilizan la animacion siendo el primero un h1 que se mueve 250 px a la izquierda, el segundo boton ejecuta las dos imagenes( img1 e img2 ) efectuandoles movimientos de 320 px en direccion contraria, ya en el tercer boton se le asignan tres animacones a un div como ser cambios en movimiento tamaño y opacidad. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml animate jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h1 id...

Ejemplo slide Jquery

- enero 10, 2015

Con jquery podemos efectuar el deslizamiento de algun elemento de la pagina web , utilizando slide de jquery. slide tiene las siguientes funciones, funciones que desplazan un elemento para abajo arriba o arriba|abajo: slideDown () slideUp () slideToggle () a continuación mostrare un ejemplo utilizando las funciones: Slide Jquery Como puedes ver en el ejemplo muestro e secciones con e botones que ejecutan la funcion establecida funciones que utilizan el slide siendo el primero una imagen que se oculta al presionar el boton al reves el segundo boton muestra un formulario al presionar el boton ya con el tercer boton muestra u oculta la informacion que contiene el div al presionar el boton. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml slide jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <...

Ejemplo Fade jquery

- enero 10, 2015

Con jquery podemos efectuar la desaparición de algun elemento de la pagina web, utilizando fade de jquery. fade tiene las siguientes funciones: fadeIn( ) fadeOut () fadeToggle () fadeTo () funciones que podemos ejecutar automatico por metodo(slow,fast) o tiempo(1,2,300 etc) a continuacion mostrare un ejemplo utilizando las funciones. Fade Jquery Como puedes ver en el ejemplo muestro un h1, img, p y div seguidos de un boton el cual si lo presionan se ejecuta la funcion asignada a cada boton funcion que el fade_ asignado a cada elemento. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml jade jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h1 id="H1" style="display:none;">|_____H1_____|</h1> <button id="boton1">FadeIn h1</b...

Ejemplo Remove / Empty Jquery

- enero 10, 2015

En Jquery utilizando el remove o empty podemos eliminar o dejar vació cualquier elemento que forme parte de la pagina web ejecutando el remove/empty junto al id/clase del elemento deaseado, asi: remove () - Elimina el elemento seleccionado empty () - limpia el elemento selecionado Eliminando los elementos secundarios del elemento seleccionado a continuacion mostrare un ejemplo utilizando limpiesa. Ejemplo Remove / Empty Jquery En este ejemplo puedes ver como con el remove borramos especificamente la imagen mientras que con el empty vaciamos por completo el div texto utilizando las opciones que nos da jquery. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml get jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h1>Imagen:</h1> <img src="img.png" alt="" id...

Ejemplo add Jquery

- enero 10, 2015

En Jquery utilizando el add podemos añadir texto al contenido que tenga la pagina web ya sea por medio de texto o hasta el mismo codigo en html de este modo: append () - Inserta el contenido al final del elemento seleccionado prepend () - Inserta el contenido al principio del elemento selecionado after () - Inserta el contenido despues de los elementos seleccionados before () - Inserta el contenido antes del elemento seleccionado a continuacion mostrare un ejemplo utilizando el add: add Jquery En este ejemplo puedes ver como agrega texto utilizando las opciones que nos da jquery. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml get jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <article...

Ejemplo set Jquery

- enero 10, 2015

En Jquery utilizando el set podemos agregar texto al contenido que tenga la pagina web ya sea por medio de texto o hasta el mismo código en html de este modo: text : agrega el valor textual que agreguemos al elemento seleccionado html : agrega el código html que agreguemos al elemento seleccionado Ejecutar Codigo: set Jquery En este ejemplo por medio del set agrego el texto que quiero que contengan el titulo y el contenido Comentando es de gran utilidad utilizar el set con jquery dentro de un contenido común que todas las paginas tendrían como ser el menú, logo o pie de pagina, puesto que ya he experimentado lo feo que se siente el tener que hacer un simple cambio en el menú de la pagina si en total son mas de 100 paginas las cuales contienen el menu xd. aqui el codigo: <html> <head> <title>appletenhtml get jquery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min...

Ejemplo Get jquery

- enero 10, 2015

En Jquery utilizando el get podemos jalar el contenido que tenga algun elemento desde el texto hasta el mismo codigo en html de este modo: text : retorna el valor textual que contenga el elemento seleccionado html : retorna el codigo html que contenga el elemento seleccionado A continuacion mostrare un ejemplo utilizando el get. apletenhtml hola mundo get En este ejemplo por medio del text() se muestra exactamente el texto que contiene el h4 txt mientras que por medio del html se obtiene el codigo que hay dentro del h4 txt. aqui el codigo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>appletenhtml get jquery</title> <script src="jquery-1.11.2.js"></script> </head> <body> <article> <section> <h4 id="txt">apletenhtml <pre>hola mundo</pre></h4> <button id="boton1">get</button...

Tutorial Jquery

- enero 10, 2015

JQuery es una biblioteca de JavaScript, creada inicialmente, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Mas informacion: JQUERY wikipedia Para utilizar Jquery solo debes de agregar el archivo en la carpeta donde este la pagina donde ejecutaras sus acciones, o por medio de este link: Jquery quedando así el código dentro de la pagina web: <script src="jquery-1.11.2.js"></script> ó <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> Con Jquery podemos agregar, editar y hasta borrar textos o contenidos de la pagina web ademas de poder crear animaciones y efectos que podemos agregar a nuestra página web aqui una lista de ejemplos: Ejemplos Jquery: Ejemplo Get jquery Ejemplo Set jquery Ejemplo Add jquery Ejemplo Remove ...

Tutorial Zen Coding

- enero 09, 2015

En este tutorial de programación mostrare el uso que puedes dar a Zen coding el cual es un conjunto de plug-ins para los editores de texto que permiten la codificación de alta velocidad y la edición en HTML , XML , XSL , y otros formatos de códigos estructurados a través de ayuda de contenido. Zen Coding nos trae atajos útiles como ser lo que ganas escribiendo la simple acción de div>ul>li Presionando control + e daría como resultado el escribir el siguiente código: <div> <ul> <li></li> </ul> </div> Si quieres entender mas sobre el uso de Zen Coding Aquí una lista de ejemplos básicos: Nota: los ejemplos son echos en notepad++ Ejemplos ZenCoding: Como Instalar Zen Coding en Notepad++ Ejemplo armando cuerpo de una pagina web con Zen Coding Armando contenido con zen coding Ejemplo Creando elementos de texto (p h hr br pre) con Zen Coding Ejemplo creando elementos de texto ( table ul li ol ) con Z...

Como Instalar Zen Coding en notepad++

- enero 09, 2015

En esta ocasión mostrare como instalar el Zen Coding en notepad++, para lo cual solo necesitaras seguir los siguientes simples pasos: Abre el notepad++ Ve a plugins > Plugin Manager Ahí presionar Show Plugin Manager A continuación te aparecerán una lista de Plugins que puedes instalar entre los cuales deberás elegir el Python script y el Zen coding para descargarlos e instalarlos. Una vez cierres y abras el notepad++ ya podrás ver y utilizar el zen coding: De manera manual por decirlo así Abre el notepad++ Ve a plugins > Plugin Manager Ahí presionar Show Plugin Manager A continuación te aparecerán una lista de Plugins que puedes instalar entre los cuales deberás elegir el Python script para descargarlo e instalarlo. Luego deberás descargar el Zen coding...

Ejemplo creando elementos de texto ( table ul li ol ) con Zen Coding

- enero 07, 2015

En este ejemplo crearemos una tabla junto con sus elemento ul li y ol utilizando el zen coding: ten en cuenta en escribir el código y presionar control + e para efectuar la acción. table: <table></table> ul: <ul></ul> li: <li></li> ol: <ol></ol> aqui un ejemplo agregando elementos de texto en pagina web: html:5>div>table>ul>li Nos da como resultado: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> ...

Ejemplo switch case Calculando Grados Fahrenheit c++

- enero 07, 2015

En este ejemplo de c++ utilizaremos Las Formulas de conversión de incrementos de grados Fahrenheit Celsius y Kelvin para calcular el valor de temperatura Introducido utilizando el switch . Formulas: Fahrenheit a Celsius C =(F-32)*5/9 Fahrenheit a Kelvin K = (F-32)*5/9 +273 Celsius a Fahrenheit F =C*9/5+32 Celsius a Kelvin K=C+273 Kelvin a Fahrenheit F= (k-273)9/5+32 Kelvin a Celsius C=K-273 Código: #include <iostream> //diva♥ using namespace std; int main(){ double n,F,C,K; string result; int accion; accion=0; F =0; C=23; K=0; while(accion!=1 && accion!=2 && accion!=3 && accion!=4 && accion!=5 && accion!=6){ cout<<"Seleccione la conversion que quiere haser"<<endl; cout<<"1. Fa...

Ejemplo Creando elementos de texto (p h hr br pre) con Zen Coding

- enero 07, 2015

Una pagina web tiene varios formatos de texto contenido, en este ejemplo mostrare como crear los siguientes elementos de texto con zen coding : ten en cuenta en escribir el codigo y presionar control + e para efectuar la acción. p: <p>p</p> h1: <h1>h1</h1> h2: <h2></h2> h3: <h3></h3> h4: <h4></h4> h5: <h5></h5> h6: <h6></h6> hr: <p>p</p> <hr /> br: <br /> pre: <pre></pre> aqui un ejemplo agregando elementos de texto en pagina web: html:5>div>+p+h3+hr+br+pre Nos da como resultado: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p></p> <h3></h3> <hr /> <br /> <pre></pre> </div...

Armando contenido con zen coding

- enero 06, 2015

Una página web puede estar divida por contenido , en este ejemplo Mostrare como crear los siguientes elementos con zen coding: ten en cuenta en escribir el código y presionar control + e para efectuar la acción. nav: <nav></nav> article: <article></article> aside: <aside></aside> section: <section></section> footer: <footer></footer> div: <div></div> aquí un ejemplo armando pagina web: html:5>nav+article>section>div+aside+footer>div Nos da como resultado: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...

Ejemplo armando cuerpo de una pagina web con Zen Coding

- enero 06, 2015

Utilizando las herramientas de zen conding podemos armar el cuerpo de una página web con solo ejecutar: html>body lo cual daría como resultado el <html> <body></body> </html> Parece simple pero entrándole mas tenemos diversas opciones de cuerpo posibles como ser: html:xml El cual da como resultado: <html xmlns="http://www.w3.org/1999/xhtml"> <body></body> </html> html:4t El cual da como resultado: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;...