Ejemplos de Programacion

Entradas

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> ...