Visor de Imágenes panorámicas con JQuery

Crear un visor de imágenes panorámicas con JQuery

Como les prometí continué mi búsqueda de distintas opciones para colocar imágenes o fotografías panorámicas en una web...
Fue entonces que encontré una buena opción usando JQuery (Ver Ejemplo) , aquí les dejo los pasos:

1. Descargar el archico jquery.panorama.zip y descomprimirlo. En él se ecuentran todos los archivos para lograr el efecto; esta carpeta deberá estar en tu sitio web contiene estilos css, scripts y una carpeta para las imágenes, en ella deberás colocar tú imagen panorámica.
Descargar aquí
2.Coloca en el head de tu página el siguiente código.

<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.panorama.js"></script>

3.Este otro código colócalo en el cuerpo de tu web (body) donde deberá aparecer el visor.

<img src="img/atelier.jpg" class="panorama" width="2642" height="375" />

Modifica donde dice img/atelier.jpg, por el nombre de tu archivo de imagen colocado en al carpeta img
Pruébalo se ve muy bien...
Si te queda una duda no dudes en dejarme un comentario...

Si te interesa el tema tienes más información y opciones en la siguiente web (muy recomendable)
Panorámicas 360º, 8 formas de incrustarlas

¿Cómo colocar una imagen panorámica o fotografía panorámica en tu web o blog?

Cargar fotografías panorámicas en un sitio web

Todos hemos visto el buen efecto que tiene entrar en una web y ver una imagen panorámica... Pues se me ocurrió que deberíamos saber como colocar una imagen panorámica en nuestro blog.
Lo primero a tener en cuenta es saber como hacer una imagen panóricamica. Para quienes manejan photoshop este puede ser una buena opción, para quienes prefieren un programa más sencillo y fácil para crear panorámicas, les digo que hay varios en la web, a mí me gustó este: (que además es free o gratis)
Microsoft ICE
Lo puden descargar en varios lugares, yo aquí les dejo una opción.
El proceso es muy sencillo luego de sacar varias fotografías de todos los planos de nuestra paisaje o lugar del que se quiere crear la panorámica, se abren dichos archicos de las distintas imágenes tomdas con este programa y él mismo se encarga de unirlas todas, luego realizamos el recorte deseado y listo , ya tienen la panorámica...
Ahora una vez que tenemos nuestra panorámica la pregunta es : ¿Cómo cargamos o subimos la fotografía panorámica el sitio web?
Encontre varías opciones, algunas más complejas como:
El Mundo de las panorámicas
con el beneficio de ser en español
Y otra más sencilla e intuitiva pero en inglés (no teman es fácil)
www.clevr.com
Una vez realizado el registro te permite subir tus fotos panorámicas y te da un código para poderlas pegar en tu web...
(Atención: cuando la intenten pegar un post o publicación de vuestro blog les dara que no acepta la etiqueta embed no hagan caso la publica igual y se ve muy bien)
Aquí les dejo el ejemplo:

Espero les guste y les sirva...
De todos modos vamos a seguir investigando sobre el tema pues hay mucho más al respecto por descubrir...
Astillero Gijón

Escribir entradas con un Software de edición

Para los que quieren escribir entradas en su blog sin tener que acceder a la página de blogger o wordpress les recomiendo Zoundry Raven una poderosa aplicación de edición, totalmente en español y gratuita.
La ventaja que presenta esta aplicación frente a otras del mismo estilo es la opción que ofrece de instalarlo de forma portable.

También permite visualizar y editar entradas escritas anteriormente.
Con este software se podrá manejar las entradas como si estuviéramos en la página.
Zoundry Raven permite además administrar más de un blog a la vez. Soporta Wordpress, Wordpress.com, Blogger, Windows Live Spaces, Moveable Type, TypePad y LiveJournal
Otra ventaja de este programa es que las imagenes las sube al servidor imageshack lo que permite ahorrar espacio del blog

El programa es muy recomendable, ahora mismo estoy escribiendo desde él
Descargar Zoundry Raven


Otra entradas que te pueden ser de interés
Dreamweaver 8 Portable en Español

Formulario en PHP

Como crear un formulario en php con validación de campos incluido

"Todos podemos aprender algo nuevo y necesitar ayuda para ello..."

He pasado buen tiempo en la web, entre programadores y en foros para poder lograr algo tan sencillo como un formulario en php, que realice la validación de los campos en php y no en otro lenguaje, que además lo haga en la misma página y que no borre los campos que están correctos dejando una advertencia para los que están en error...
En la web hay varias páginas que lo pueden hacer por nosotros, pero me gustan los desafíos y quería hacerla yo desde cero....
Me llevó varios días pero tengo la satisfacción de haber aprendido mucho y de alcanzar mi meta, por eso hoy lo quiero compartir con ustedes, tal vez le acorte el camino a alguien.
Además debo agradecer el foro CCTW y al habitante Alpolo que fue quien con paciencia me ayudó a resolverlo...

1
<body>
2
3 <p>
4 <!------- Comenzamos abriendo una etiqueta de php... ------>
5 <?php
6 //crearemos un if que la pulsar el boton enviar ejecute un else ok..
7 if(!$_POST['enviar']){
8 //Cerramos la etiquetas php y Empazamos con el codigo html que es lo más complicado..
9 ?>
10 <!------- El siguiente código es el del formulario -------->
11 <form action="contactar.php" method="post" name="basico">
12 <table border="0">
13 <tr>
14 <td>Nombre:</td>
15 <td><input name="nombre" type="text" /></td>
16 </tr>
17 <tr>
18 <td>Apellido:</td>
19 <td><input name="apellido" type="text" /></td>
20 </tr>
21 <tr>
22 <td>Email:</td>
23 <td><input name="email" type="text" /></td>
24 </tr>
25 <tr>
26 <td><input name="enviar" type="submit" value="Enviar"/></td>
27 <td><input name="" type="reset" value="Borrar"/></td>
28 </tr>
29 </table>
30 </form>
31 <!------- Fin del código html del formulario ---------->
32 <?php
33 //Abrimos las etiquetas de php y cerramos el if para empezar con el else, que es el que va a validar todo ok..
34 }else{
35 //Primero creamos la variables de cada campo del form y "pines" una función preconstruida de php para que no permita caracteres especiales ok......
36 $nombre = stripcslashes($_POST['nombre']);
37 $apellido = stripcslashes($_POST['apellido']);
38 $email = stripcslashes($_POST['email']);
39 //Creamos una varibles que va a contener la function array(), que es la que se va a encargar de ejecutar los errores ok..
40 //La llamamos $errores = array(); ....
41
42 $errores = array();
43
44 //Una vez tengamos definidas la variables $errores y las variables del campo del form entonces empezamos a crear los if de validación ok..
45
46 if(!$nombre){
47 $errores[] = "No ha definido el Nombre..!\n";
48 }
49
50 if(!$apellido){
51 $errores[] = "No ha definodo el Apellido..!\n";
52 }
53
54 if(!$email){
55 $errores[] = "No ha definido el mail..!\n";
56 }
57
58 //una ves tengamos definodo las validaciones al no ingresar ningún datos en el form se ejecutaría, pero falta para que se ejecuten ok..
59
60 //Hacemos la validación del form al no tener la palabra clave el arroba @, entonces ejecuta un error..
61
62 if($email){
63 $checkemail = "/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i\n";
64 if(!preg_match($checkemail,$email)){
65 $errores[] = "El E-Mail no es v&aacute;lido, deber ser ejemplo@ejemplo.com..!\n";
66 }
67 }
68
69 //podríamos seguir dándole validaciones pero creo que aquí acaba.. Sería validar que campo podría terner de 10 a 10000, pero dejemosla así te parace jaja..
70
71 // teniendo validado los campos del form entonces crearíamos un function preconstruida de php de esta forma, para que cuente lo errores que pueden haber ok..
72
73 if(count($errores) > 0){
74 foreach($errores AS $error)
75 //si encuentra algún error lo que hace el echo es imprimirla en pantalla ok..
76 echo $error."<br>\n";
77 form();
78 }else{
79 //En caso de no encontra error ejecuta el else..
80 // y entonce crearíamos la function mail de php para que envie los datos ok..
81 $TuMail = "Tumail@inf.com\n";
82 $asunto = "Pruba de mi web...\n";
83 $mensaje = "
84 Nombre: $nombre \n\n
85 Apellido: $apellido \n\n
86 E-Mail: $email \n\n";
87 if(mail($TuMail,$asunto,$mensaje)){
88 echo "Tu mensaje fue envia con Ex&iacute;to, muy pronto nos pondremos en contacto con $nombre $apellido \n\n";
89 }else{
90 echo "Tu mensaje no se a podido Enviar debido a un problema de la Function Mail.. Puedeser que este desahabilitada..!\n";
91 }
92 }
93 }
94 ?>
95
96 </body>
97
98 <?php
99 //Se vuelve a declarar el formulario dentro de la funcion form con el fin de que aparezca si hay errores
100 //Declaramos la funtion de esta form ok..
101 function form(){
102
103 //cerramos las etiquetas php y introducimos el codigo html ok..
104 //además colocaremos el siguiente código para cada input dentro de una etiqueta php : value="<?php echo $_POST['nombre del campo']; ?... como se muestra a continuación. Esto hará que no se borren los otros campos por el error de uno solamente, es decir no tener que volver a completar todos los campos por haber un error en uno , sino sólo el equivocado...
105 ?>
106 <form action="contactar.php" method="post" name="basico">
107 <table border="0">
108 <tr>
109 <td>Nombre:</td>
110 <td><input name="nombre" type="text" value="<?php echo $_POST['nombre']; ?>" /></td>
111 </tr>
112 <tr>
113 <td>Apellido:</td>
114 <td><input name="apellido" type="text" value="<?php echo $_POST['apellido']; ?>"/></td>
115 </tr>
116 <tr>
117 <td>Email:</td>
118 <td><input name="email" type="text" value="<?php echo $_POST['email']; ?>"/></td>
119 </tr>
120 <tr>
121 <td><input name="enviar" type="submit" value="Enviar"/></td>
122 <td><input name="" type="reset" value="Borrar"/></td>
123 </tr>
124 </table>
125 </form>
126 <?php
127 }
128 ?>


Funciona muy bien pueden probarlo en cuanto lo tenga en algún sitio les dejo un link para que vean el ejemplo

Publicaciónes relacionadas:
Agregar un formulario a tu web
Libro de PHP

Agregar un formulario a tu blog o página web

Como hacer para colocar un formulario de contacto en tu sitio web de forma sencilla sin saber nada de programación

Existe un sitio que nos brinda este servicio de un modo sencillo e intuitivo, es el siguiente:

www.emailmeform.com

Además nos permite personalizarlo y una vez que creamos nuestro formulario de contacto o envío nos da un código html para colocar en cualquier lugar de nuestro blog ya sea un post o un gadget.
Es decir, podemos crear un formulario para que nuestros visitantes nos envíen consultas y comentarios sobre nuestro sitio web a nuestro mail del modo más sencillo. Está todo en inglés pero no temas es más que sencillo... Sierve tanto para blogger como para cualquier sitio web.
Les indicaré como hacerlo paso a paso:
1- Entrar a la siguente página y registrarse www.emailmeform.com donde dice "Sign up for FREE" (Registrarse gratis)

2-Una vez que termine el proceso de registro se recibe un mail de confirmación con un link para activar la cuenta; luego se puede acceder al panel de control

3-Dentro del panel de control a la izquierda en un rectángulo azul se ve que dice “Create New Form" (Crear un Nuevo Formulario), hacer clik allí.

4- Un vez allí se requiere darle un nombre al formulario, el mail donde enviar la información, una posible página para cuando se envió con éxito o para confirmar que se envió correctamente( nosotros simplemente creamos un posto para ello y copiamos su link). Por último el número de campos a rellenar por el usuario, por defecto pone cuatro (nombre, mail, asunto y comentrio). Dar next (siguiente)

5- Aquí se indica el nombre de cada campo y el número de dígitos (es bueno dejarlo como aparece preestablecido)

6- El paso siguiente es recomendado para quienes manejan estilos CSS y HTML, dejar en blanco y seguir.

7- El úlitmo paso también se puede dejar en blanco.

8- Luego mostrará una vista previa del formulario pudiendo retroceder si se desea para cambiar algo del diseño.

9- Cuando esté terminado nos dará un link para verlo y pondrá “Get the HTML Code” se deberá pulsar en este último para de ese modo ver el código generado.

10- Copiar el código y colocarlo en un post o un gadget en modo edición HTML

11- Listo estará funcionando

Espero les guste pueden probar el que aparece a continuación:

Nombre:
Email:
Asunto:
Consulta o Comentario:
Image Verification Copie aquí el texto indicado el la imagen:

En el siguiente link les dejó un ejemplo de una utilidad que le di a este recurso, claro está que con un poco de conociemiento de html se puede variar más...
http://www.piartesano.com/contactar-joyas-plata-cuerno-astas.html

Iconos más pequeños

Post relacionados:
Colección de íconos web
Galería de íconos gratis para descargar

Iconos Web

Una sencilla y útil colección de íconos web que espero te gusten...

Retocada y diseñada por los hermanos carlos

Post relacionados:

Galería de íconos gratis para descargar