DISEÑO Y SERVICIO WEB, RECURSOS EN LINEA, TUTORIALES, PROGRAMAS Y MÁS...

Mostrando entradas con la etiqueta diseño web. Mostrar todas las entradas
Mostrando entradas con la etiqueta diseño web. Mostrar todas las entradas

martes, 30 de noviembre de 2010

¿Cuáles son los indicadores más importantes de Google analytics?



Reflexionando un poco sobre las estadísticas de Google Analyticis me puse a pensar cuales son los indicadores más importantes de un sitio web. ¿Son las visitas mensuales, las diarias, el tiempo en el sitio, el lugar de donde provienen, los artículos más visitados, las palabras claves de entrada? Sin duda que dependerá de lo que cada uno busque con su sitio.

Para mi uno de los que más importa es el tiempo de permanencia en el sitio. Me da una idea de la aceptación que tuvo la página. No solo alcanza con ver el promedio ya que por ejemplo alguien puede visitar tu página y al mismo tiempo recibir una llamada telefónica que lo hace alejarse del ordenador, cuando vuelve ni siquiera lee tu página, pero en las estadísticas aparecerá como una visita larga, lo que aumentará el promedio. Me parece mucho mejor fijarse el porcentaje de visitantes que están menos de 10 segundos, entre 10 segundos y 30, un minutos, más de un minuto, es decir en los diferentes intervalos. Eso me dará una mejor idea de cuantos son lectores y cuantos entraron y no encontraron lo que buscaban.
Por ejemplo si el 80 % de tus visitantes está menos de 10 segundos significa que la mayoría no encuentra lo que buscaba y por más cantidad de vistas diarias que tengas estas perdiendo el tiempo.

¿Para ustedes cuales son los indicadores más importantes?

El valor de la perseverancia en todo emprendimiento web


Son miles y miles los que dicen que lograr el éxito en Internet es fácil y posible y eso es cierto. Pero los miles y miles que dicen que será rápido y sin esfuerzo mienten. Las probabilidades de que solo teniendo una idea genial se logre tener éxito en la web son como las de  ganar la Lotería. Hay casos que lo lograron pero son una excepción no la regla.


Todo esto no significa que no se pueda lograr el éxito con un sitio web, con un negocio por Internet, con el marketing de afiliados y  con todas las posibilidades que brinda la red, siendo éxito una palabra muy relativa.
Para lograrlo se necesita tiempo y mucho esfuerzo, tal vez menos que para lograr buenos resultados en otros ámbitos pero sigue siendo necesario.
La clave de todo éxito en Internet es la perseverancia. Mi experiencia personal me lo ha enseñado. La marca loshermanoscarlos fue poco a poco y  aún le falta mucho pero la esperanza es mayor
Hay que crear mucho contenido de calidad y original que sea constante en su publicación. Tal vez te desanime saber que uno de tus trabajos lo lee una persona por día, pero si amplias la visión te darás cuenta de que son 30 personas al mes. Y si publicas un artículo diario pronto tendrás casi mil visitas por mes, y en un año serán 12000 visitas mensuales. Y eso es mucho más que aceptable. Pero si realmente sigues ese ritmo y sos  perseverante al año no serán 12000 sino 30000 o más. Y esto es porque generaste confianza y las personas ya te conocen, saben que estás constantemente dándoles contenido, lo saben también los buscadores y te posicionan mejor
Cuando el contenido y el tiempo jugaron su papel empieza a verse tu talento para escribir, el diseño de tu sitio, el nicho al cual apuntas, el intercambio con tus visitantes como los factores que  generan el crecimiento rápido.
Persevera, persevera y verás
Persevera, persevera y triunfarás

lunes, 22 de febrero de 2010

Ocultar el título de los gadgets

Cuando agregamos un gadgets y le ponemos un título, por defecto blogger lo muestra cuando uno lo visualiza con el navegador.
Pero en muchos casos uno quiere que no se vea el título Ej: uno copia el código de google analytics para llevar estadísticas y lo agrega en la plantilla como  un gadget, este gadget es para uso de los administradores del blog por lo tanto no tiene sentido que los visitantes vean un título.
Ahora para este caso y muchos otros en que no queremos ver el título del gadget doy dos soluciónes

  • La primera es optar por no poner ningun título es decir dejar el campo de título en  blanco. Está solución presenta el inconveniente que no nos permite identificar a los administradores los gadget en la opción de elementos de gadget
  • La segunda es un poquitito más compleja pero mucho mejor porque permite ver el nombre del gadget en los elementos de página. Consiste en lo siguiente:

1. Darle un  título al gadget , luego  ir a Edición de HTML y   tildar la opción "Expandir plantillas de artilugios"
2. Buscar un código similar al siguiente en donde en title este el título que le diste al gadget


<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>


3. Agregar  al principio del código en rojo


<!

4. Agregar al final del código en rojo

  -->


Si más adelante quieres mostrar el código alcanza con sacar lo que agregaste

miércoles, 17 de febrero de 2010

Paginá tu blog

Cuando uno empieza a tener muchas entradas en su blog se vuelve fundamental el organizar de forma clara y sencilla la información de un blog para una mejor navegación por parte de los lectores. Un elemento que colabora con esto es paginar el blog. Para los que no saben aún que es esto miren la imagen y se darán cuenta enseguida.


Como paginar tu blog


1. Primero inicias sesión en Blogger y luego vas a diseño-> edición de HTML
No olvidar descargar la plantilla como respaldo

2. Luego buscas la siguiente etiqueta en la plantilla


</body>


3. Inmediatamente después pega este código


<!--PAGINATION-STARTS-->

<script type='text/javascript'>

var pageCount=10;

var displayPageNum=3;

var upPageWord ='Anterior';

var downPageWord ='Siguiente';

</script>

<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js' type='text/javascript'/>

<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.js' type='text/javascript'/>

<!--PAGINATION-STOPS-->


var pageCount=10 es el número de entradas por página y se puede variar a conveniencia
var displayPageNum=3 es el número de páginas que se mostrarán en el botón


4. Ahora hay que darle formato, para eso hay que buscar la siguiente etiqueta


</head>
5. Antes de la etiqueta pegar el siguiente código


<!--PAGINATION-STARTS-->

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css' rel='stylesheet' type='text/css'/>

<style type='text/css'>

.showpage a:hover {

color: #FFFFFF;

background-color: #92416C;

}

// ESTILO DE  DEL SELECTOR

.showpagePoint {

color: #FFFFFF;

background: #92416C;

border: 1px solid #92416C;

}

// ESTILO DE LOS NÚMEROS

.showpageNum a:link,.showpage a:link {

color: #000000 !important;

background-color: #92416C;

border: 1px solid #92416C;

}

// ESTILO HOVER DE LOS NÚMEROS

.showpageNum a:hover {

color: #FFFFFF !important;

background: #92416C !important;

border: 1px solid #92416C;

}

// ESTILO DEL BOTÓN DE PREV Y NEXT

.showpageArea a {

border: 1px solid #92416C;

}

// ESTILO HOVER DE LOS BOTONES DE PREV Y NEXT

.showpageArea a:hover {

border: 1px solid #92416C;

color: #FFFFFF !important;

background: #92416C !important;

}

</style>

<!--PAGINATION-STOPS-http://bloggerstop.net-->


el número #92416C es el color de fondo de los recuadros en sistema hexadecimal y se puede cambiar y los mismo con el resto de los colores


7. Guardar los cambios

viernes, 1 de enero de 2010

PageRank por página individual

Google no descansa ni el 31 de diciembre y el pasado día el gigante de la red actualizó el PageRamk de los sitios web. Para los que no saben que es el PageRank se podría decir que es un valor númerico que Google asigna a una página según su relevancia, la escala va desde el 0 al 10.
La verdadera importancia de este indicador es muy discutida entre los expertos en la materia.
Existen variadas formas de conocer el PageRank, desde sitios online, aplicaciones y barras para instalar en los navegadores. Para los que quieran conocer su PageRank pueden instalar estas barras o toolbar si tienen firefox:

toolbars para concer el PageRank


Seo Profesional Toolbar Es muy sencilla pero a mi juicio su principal virtud está en que se agrega a la barra de estado no como otras barras que al instalarlas reducen el espacio para visualizar la página en el navegador
Google Toolbar Para los fanáticos de los productos google

Ahora les dejo mi opción favorita pues permite conocer el pagerank de cada página individual del sitio además de ser muy completa
SeoQuake SEO

como conocer el PageRank por página individual con SeoQuake


lo que deben hacer es ir a la página de búsqueda de Google y poner los siguiente:
site:tusitio

Remplazando tusitio por su dirección obtendrán al dar buscar las diferentes páginas que componen su sitio y les indicará el PageRank de cada una debajo de cada resultado.

Fíjense cuanto ha cambiado su PR desde fines de octubre momento en que fue la última actualización.
En nuestros principales sitios quedó así
los hermanos carlos: pasó de 1 a 2
para qué futuro educamos : pasó de 0 a 1

también te puede interesar
Como verificar enlaces rotos rápidamente

Como registrarse en Google Analytics
Llevar Estadisticas web con Google Analytics

jueves, 31 de diciembre de 2009

Colección de sitios útiles para un blogger

Les dejo un resumen de sitios útiles para cualquiera que tiene un sitio web o un blog, hay de todo tipo y todos fueron publicados anteriormente por nosotros  y son gratuitos

Sitios útiles para...

verificar enlaces rotos

Broken link checker muestra todos los enlaces que tiene la web y su estado.

verificar la velocidad de carga de tu página

Pingdom Tools Nos indica detalladamente cuanto demora en cargar cada uno de los elementos que componen tu página

analizar como está optimizado tu sitio

http://websitegrader.com 
Permite conocer datos sobre las páginas que te indexó google, el uso del atributo alt, las etiquetas h1 y mucho más

publicar cualquier contenido

Embedit.in Publica pdf, documentos de word, excel, de power point, etc

conocer la velocidad de nuestra conexión a internet

www.pingtest.net Podrás ver si tu proveedor de internet es bueno o no

descargar fuentes de letras

www.fontreactor.com para los que están aburridos de arial, time new roman y todas esas que vienen con tu sistema operativo

conocer como está funcionamiento tu blog

http://www.ismyblogworking.com

crear una serch tab

www.pax.com 

crear un formulario

www.emailmeform.com muy fácil de hacer y es totalmente personalizable

crear un foro

foroactivo.com,

crear un contador de visitas

flagcounter existen muchas alternativas para esto, pero flagcounter nos permite conocer los visitantes por país

subir una imagen y después utilizarla en nuestro sitio

www.imageshack.us/

Agregar una sala chat

cbox

Llevar estadisticas sobre el sitio web

google analytics

Subir archivos (no requiere registrarse)

http://depositfiles.com/es/

Colocar un slideshow

www.imageloop.com

miércoles, 30 de diciembre de 2009

Como verificar enlaces rotos rápidamente

Dentro de las cosas molestas que puede tener navegar por internet está la de encontrarse con un enlace roto.
Las consecuencias de esto son altamente perjudiciales, genera una mala imagen frente a los lectores y es tomado de forma negativa por los buscadores entre otras cosas.
Por eso es de muy importante verificar el estado de los enlaces. Cuando uno tiene muchos enlaces en su sitio se hace casi imposible comprobarlos manualmente  pero existen herramientas que nos facilitan la tarea.
En  kabytes comentaron sobre un software que lo hacía pero era de pago y bastante caro por cierto.
Esto me motivo a buscar opciones gratuitas

Sitios para verificar enlaces rotos

Broken link checker Enumera los enlaces y su estado. Es muy rápido

links-rotos Similar al anterior pero tiene es  limitado
W3C Link Checker Permite además válidar un sitio y contiene otras opciones. No lo recomiendo para los blogs

Programas para verificar enlaces rotos

xenulink Es programa muy liviano y sencillo además proporciona algunos datos extras para encontrar el link roto. Esta es mi opción favorita
linkchecker  Se puede descargar desde la página igual que el anterior

Toolbar para verificar enlaces rotos


Otra opción para los que tiene firefox es instalar la extención para webmasters webdeveloper


Ahora no hay motivos para no verificar el estado de los enlaces. Que ya lo hayas hecho una vez no significa que no debas volver a hacerlo pues algunos enlaces puede que hayan dejado de funcionar desde la última vez. La comprobación de enlaces debe ser periódica

viernes, 11 de diciembre de 2009

45 sitios para subir videos

Ya estuvo en anteriores entradas brindando mi opininón sobre lo importante que es subir video en diferentes sitios.
En el blog pospost publicaron una lista muy interesante con 45 sitios para subir videos de forma gratuita.

45 sitios para subir videos


youtube
video google
metacafe
soapbox
revver
blip.tv
brightcove
myheavy
vimeo

myspace
stage6
kewego
yahoo
vidilife
dailymotion
ning

youare.tv
break
onetrumedia

flixya

vopdpod
jumpcut

castpost
clipshack
grouper
ourmedia
vsocial
twango
barrio305
stickam
pickle
motionbox
getdemocracy
videobomb
pixpo
gotuit
videojug
myvideo.es
nowpublic
toptvbytes

jueves, 26 de noviembre de 2009

Conocer fácilmente cada parte de la plantilla de un blog

conocer la plantilla de tu blog
En esta entrada voy a presentar una solución para conocer cada una de las partes que compone una plantilla.
Header, sidebar, footer son partes que se repiten en casi todas las plantillas, pero muchas veces hay partes que no son tan fáciles de identificar. Lo que propongo hacer es lo siguiente:

Tomar una hoja y anotar 30 o 40 colores en código hexadecimal ayudandose con un programa como Photoshop o Dreamweaver y darle un nombre a cada color. Asi por ejemplo: #AE3DD2 Verde Oscuro. Un consejo que se tomen colores diversos y bien diferenciables uno de otro ya que esto nos será de provecho en el siguiente paso.

Luego de preparada la lista vamos a la plantilla de nuestro blog y primero que nada la descargamos (esto es obligatorio) porque le haremos algunas modificaciones.
Cuando ya este la plantilla descargada lo que hay que hacer es: cada vez que encontremos un color en formato hexadecimal cambiarlo por uno de los de nuestra lista y anotar en ella junto al nombre del color a que se le puso el mismo
Así por ejemplo si en la plantilla aparece esto
cuerpo{ background:#AAAAAA}

yo cambio el color por verde oscuro quedando asi

cuerpo{ background:#AE3DD2}

y luego en mi lista de colores escribo verde oscuro=cuerpo


Una vez terminado el cambio de todo los colores hay que guardar los cambios de la plantilla y visualizarla. Nuestra plantilla tendrá mútliples colores que nos permitirán conocer todas las partes que conforman la plantilla asi como el nombre de cada una de ellas.

Después de tener una idea clara de la misma (sería bueno hacer un boceto) cargamos la plantilla descargada para que todo vuelva a como estaba antes




Si te gustó también te invito a leer:

¿Cómo colocar una imagen de cabecera en un blog?
¿Cómo cambiar la plantilla del blog?

miércoles, 25 de noviembre de 2009

Redimensionar de forma manual los videos de youtube

Es un recurso muy común publicar videos de youtube  sin embargo muchas veces las dimensiones que tiene el objeto video  no son las que sirven cuando lo publicamos en un blog o una página
Puede ocurrir que el video se escape de la zona de publicación por ejemplo.
Para solucionarlo alcanza con editar el código del objeto, reudiciendo o aumentando los pixeles.

Aquí les dejo una demostración
Tomaré un video  cualquiera de youtube en este caso elegí el títulado  "La historia de Internet en 8 minutos (subtítulos en Español)

Su código para visualizarlos en otra web es:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

y el video se ve así


Pero como yo deseo que se vea más pequeño tendré que cambiar el width(ancho) y el height(alto)
Para eso busco los valores width="425" y heigh="344" y los remplazo por el número de pixeles que quiero que tengan. Para mantener la proporción se recomienod que restemos o sumemos el mismo número de pixeles al widh y al height. Para este ejemplo restaré 200 a cada uno.

Asi que el codigo se verá así:

<object width="225" height="144"><param name="movie" value="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="225" height="144"></embed></object>


y el video queda de este tamaño




martes, 17 de noviembre de 2009

Conocer la calidad y la velocidad de nuestra conexión a Internet

Hay muchísimas páginas que ofrecen de forma gratuita testear la velocidad de una conexión a internet. Pero una conexión rápida no significa que la conexión sea buena. Para calificarla hay que tomar en cuenta otros factores. Por ejemplo podemos tener un buena velocidad de descargar pero que sea muy inestable, es decir que la velocidad por momentos sea rápida y por momentos baje a una muy lenta.
Páginas que nos permitan conocer estos datos hay menos. Pero navegando por la dichosa red encontre una que permite obtener numerosos datos de la conexión.  Así también se encarga de calificar la conexión en una escala que va desde una A (excelente) hasta una F(muy pobre)
Dentro de los datos que nos permite comprobar son el ping :que es el tiempo que demora en conectarse un servidor con un cliente.
También permite saber el jitter :que son esos cambios o saltos de velocidad de un momento a otro

El sitio web es www.pingtest.net . La forma en que presenta los datos es muy recomendable, la página esta en inglés pero todo se puede entender por medio de las ilustraciones

Para conocer la velocidad de subida y bajada www.speedtest.net

Discurso de Steve Jobs en Stanford

Este es un video muy conocido y difundido por la web el cual quiero compartir los lectores de este blog que aún no lo han visto.
Steve Jobs es el co-fundador de Apple y una de las personas más conocidas del mundo de la Tecnología. En esta oportunidad se dirige a los graduados de Stanford con un discurso motivador con muchos relatos de su propia vida. El video está muy bueno. Hay que mirarlo

El video esta en inglés con subtitulos en español

miércoles, 4 de noviembre de 2009

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

viernes, 30 de octubre de 2009

Agregar nuevos formatos o fuentes de letras

Como hacer para agregar un nuevo tipo de letra

Como agregar fuentes


Es muy sencillo, aquí dejo los pasos:

1. Clic en Inicio y, a continuación, haga clic en Ejecutar.
2. Escriba %windir%\fonts y haga clic en Aceptar.
3. En el menú Archivo, haga clic en Instalar nueva fuente.
4. Se abrirá una carpeta que contiene todo las fuentes actuales en ella pegar el archivo de la nueva fuente bajada
7. Haga clic en Aceptar.
8. Listo

A continuación dejo un muy buen sitio donde se pueden descargar fácilmente varias fuentes:
www.fontreactor.com

viernes, 23 de octubre de 2009

Escribir entradas con un Software de edición

edición de entradas con Raven

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


miércoles, 21 de octubre de 2009

¿Cómo subir un archivo en Google site?

Para subir un archivo a google site hay que hacer lo siguiente:

1. Ingresar al sitio
2. Más acciones/administar sitio/ archivos adjuntos
3. Luego en la ventana de la derecha en la parte superior dar clic en subir
4. Indicar donde esta alojado el archivo, y a que página se quiere subir

Este archivo se podrá descargar desde la página en que se subió como un archivo adjunto

Post Relacionados


La solución para subir archivos a mi blog
¿Cómo crear una página con google sites?
Llevar Estadisticas web con Google Analytics

¿Cómo crear una página con google sites?

Para los que quieren tener una página, pero no tienen conocimientos de diseño, les recomiendo que utilicen este magnifico servicio de google.
Con google sites podrán tener una página totalmente personalizable, donde publicar contenido de forma sencilla, el servicio ofrece además la posibilidad de que la página se asemeje a un blog y también la posibilidad de subir archivos.
Pero seguro que ya conoces este servicio por lo que paso directamente a explicar como crear la página.

1. Ir a la página de site googles
2. Eliges la opción crear nuevo sitio ( deberás tener una cuenta de google previo a la creación)
3. Luego completas el formulario con tus datos, el nombre que quieres para tu sitio, etc
4. Eliges una plantilla
5. Escribes el código de verificación mostrado, y das aceptar y listo

Post Relacionados

10 Errores de Diseño Comunes
¿Cómo subir un archivo en Google site?

martes, 20 de octubre de 2009

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

viernes, 16 de octubre de 2009

La solución para subir archivos a mi blog

Muchas veces puedes necesitar publicar un archivo de word o un PDF en tu blog, también pueden ser algún MP3 o archivo comprimido, o de cualquier otro formato. Pero como sabemos blogger no nos permite subir esa clase de archivos. Para poder hacer esto es necesario crear una cuenta en algún servidor que nos permita subir archivos y luego publicar la ruta del archivo en nuestro blog. Pero yo te voy a dar otra solución, que desde mi punto de vista es mucho mejor.
La forma es crear una página web con google site, lo cual es muy fácil. Si necesitas ayuda con eso accede a nuestra entrada en que lo explicamos ¿Cómo crear una página con google sites?
Cuando hayas creado el sitio subes el archivo a nuestro sitio de google, pegamos el enlace en nuestro blog y listo.
La solución me parece mucho mejor que recurrir a otra clase de servidores,
Primero porque las descargas se hacen directamente desde el blog si la necesidad de ir a otra página
Segundo porque los sitios de google nos permiten cambiarle el diseño, y modificarlos a gusto con lo que podrás hacer que tu blog y el sito de google funcionen coordinadamente tal como muchos hacen cuando agregan foros externos. Los visitantes sentirán que todo es el mismo sitio
Además en el sitio de google puedes organizar todo los archivos que maneja tu blog
¡pruébalo!

los hermanos carlos en google site

Post Relacionados

Agregar un formulario a tu blog o página web
¿Cómo crear un foro?
Agregar Música al blog o página con eSnips
Subir archivos doc o pdf al blog con Scribd