domingo, 24 de marzo de 2013

Validación web Internet explorer

Seguramente todos los que alguna vez hemos programado algo para web nos hemos encontrado mil problemas al intentar hacerlo funcionar en todos los navegadores (si sabéis por donde voy, funciona en todos "safari, chrome, firefox..." pero en IE falla), pues bien dejando a un lado de momento las hojas de estilo css, voy a hablaros de un problema que me encontré este mismo viernes, al hacer una aplicación HTML5 con canvas y java Script.
La programo y pruebo en local, pruebo en todos los navegadores de verdad y funciona a la perfección  la pruebo en IE y sorpresa, ni carga, abro la consola de errores y me encuentro con que Internet Explorer 9 me dice que no reconoce addEventListener para los mas novatos en JS (yo me incluyo) Internet explorer hasta su versión 9 no incluía dicho método de JS, pero hacia lo mismo, o por lo menos a su modo con el método attachEvent sabemos lo especialito que es y lo que le gusta ponernos las cosas sencillas por lo que siempre teníamos que hacer un JS para IE y otro para el resto del mundo, o usar JQuery; pero parece que se están dando cuenta de que así no se va a ningún lado y lo están unificando por esta razón a partir de la versión 9 de IE lo han incluido; el caso, Internet explorer me decía que no lo reconocía  mi primera impresión fue, que bien... IE no soporta HTML5 y empece a googlear, había quien daba unos códigos JS que añadían funcionalidad a versiones antiguas de IE, pero que en la versión 9 y posteriores funcionaba HTML5, incluso leí que el W3C dice que IE9 es el que mejor soporta HTML5 con una tabla comparativa con el resto de navegadores.
Lo cual me dejo claro que mi aplicación debía correr en IE9 y empece abusar sobre ese error, aunque sin fortuna, pensé en cambiar el método por el de toda la vida de IE, pero lo usaba principalmente en una librería ajena, que aunque disponía del código abierto, era muy grande como para recorrermela entera y cambiarlo haciéndolo valido en todos los navegadores, pensé que si los fabricantes de la librería decían que eran validos para aplicaciones en HTML5 para todos los navegadores y tenían ejemplos sus ejemplos fallarían al igual que el mio, pero fue así  por lo que si sus aplicaciones funcionaban y la mía fallaba estaba claro que era un problema en mi código, me lo recorrí entero buscando errores, no vi nada del otro mundo, y menos que pudiera originar ese curioso error, ¿¿por que Internet explorer me decía que no reconocía un método que si debe reconocer?? Apunto de desistir pensando que seria algo de configuración de mi ordenador, le pedí a un compañero que lo probara, y os garantizo que no usa nunca el IE por lo que lo tenia por defecto, y también le fallaba a el, así que mi gozo en un pozo era fallo mio en la programación  seguí probando; en la consola de errores de IE (eso que los de Microsoft llaman herramientas de desarrollo, eso mismo que aparece al pulsar F12) vi que te dejan seleccionar distintos modos de compatibilidad, para emular distintos navegadores, probé todos los disponibles, IE9  IE8, IE7, vista de compatibilidad de IE9  pero con todos ellos el mismo error, al cabo de un rato de comerme la cabeza volví a comparar mi código con el de los ejemplos de los fabricantes de la librería, y me di cuenta que justo al lado de donde seleccionas el modo de navegador

en los ejemplos de los fabricantes salia como en la imagen superior, es decir, modo documentos estándares IE9, en mi aplicación, me salia NO ESTÁNDAR así que por fin encontré una diferencia!! el problema tenia que estar hay, cambie esa opción a estándares de IE9 y sorpresa!! mi aplicación empezó a correr, ahora solo tenia que encontrar el modo de que eso me saliera por defecto, algún tipo de configuración debía haber para decirle a IE que cumplía sus estándares  o por lo menos que intentaba cumplirlos, una vez mas revise el código de ejemplo de esta gente, y no encontré nada, al cabo de un rato en la misma herramienta para desarrolladores cerré todos los nodos del código de mi aplicación e hice lo propio con el de la aplicación de ejemplo, vi una pequeña diferencia, ellos tenían una linea mas encima de todo el código de la aplicación la cual yo no tenia la puse y premio!! todo funcionando.

--SOLUCIÓN--
Esa linea es ni mas ni menos que <!DOCTYPE html> al copiar el código de la estructura principal de la web o no se en que momento, debí de eliminarlo accidentalmente  pero gracias a ello se que si no lo pones IE hace cosas raras, mientras que el resto de navegadores se comporta como si si estuviera, creo que no se me volverá a olvidar copiarlo, espero que esto le sirva a alguien que se olvide de escribirlo, o cometa el error de eliminarlo accidentalmente

sábado, 23 de marzo de 2013

Dejar una capa
siempre visible

En esta ocasión voy a explicar como dejar una capa o un div siempre visible en la web; es decir que al hacer scroll esa capa no se mueva esto puede hacerse para dejar siempre visible nuestro logo, o como en facebook, tuenti y muchas otras paginas, para dejar siempre visible el chat, en fin que los usos son tantos como limites tenga nuestra imaginación.

En la hoja de estilos tan solo deberemos escribir el siguiente código:

    position: fixed;
debiendo tanbién decirle donde queremos que aparezca claro esta, podemos teclear algo como lo siguiente

    left: 0px;
    top:0px;
para que aparezca en la esquina superior izquierda, podemos darle porcentajes, usar PT; al fin y al cabo es solo una etiqueta css mas.

Espero que os sea útil ;)

domingo, 3 de marzo de 2013

Ejecuta tu primer Programa Android

Una vez creado tu primer programa android deberemos ir al código,



y desde hay ir al menú Run>Run  allí nos preguntaran que en que plataforma queremos lanzarlo decimos Android aplication y nos saltara un aviso como el siguiente


Le diremos que si para dar paso a la siguiente ventana


seleccionaremos la 2 opción Launch a new Android Virtual Device de allí al botón Manager, y veremos lo siguiente:


Allí iremos a new


Rellenamos el nombre, sin espacios ni caracteres prohibidos, seleccionamos el dispositivo en Device, o cogemos uno genérico con la resolución y el tamaño de pantalla, en Target seleccionamos la versión de android, y es importante cambiar el Internal Storage, ya que el sistema creara un archivo vacío para reservar ese espacio y no quedara disponible en nuestro ordenador


Confirmaremos con Ok y cerraremos todo hasta llegar a


Donde daremos a Refresh para que nos aparezca nuestro terminal, lo seleccionaremos y daremos a Start


Le daremos a Launch, y paciencia, por que esto suele tardar bastante, esta primera vez tiene que crear la memoria del terminar, configurar todo para que el emulador funcione correctamente, compilar la aplicación, y montarla en el terminar, las sucesivas veces, seguirá tardando pero mucho menos


Este sera el resultado final




Tu primer Proyecto en Android

Hace algún tiempo publicamos un vídeo explicativo de nuestros amigos de DesarrolloWeb en el cual detallaban que hay que hacer para instalar todo lo necesario, por supuesto que es lo necesario, y como configurarlo.
Bien, esto sigue siendo valido a día de hoy, pero las cosas han cambiado, y estando detrás una compañía como google era de esperar que se hiciera todo mas fácil, cómodo y rápido, y es lo que os vengo a explicar

Desde http://developer.android.com/sdk/index.html podemos descargar todo lo necesario para trabajar con Android; es decir:

  • Eclipse
  • El plugin ADT para eclipse (Con esto emularemos un terminal en nuestro ordenador)
  • Las librerías de java necesarias para programar
Una vez descargado (unos 400MB) tan solo deberemos descomprimir


Es recomendable antes de empezar ejecutar el SDK Manager.exe el cual se encargara de darnos a elegir que apis queremos descargar e instalar en nuestro eclipse


Yo os recomiendo descargar la ultima disponible, hoy día es la 4.1.2 y la 2.1 que es la mas distribuida en la actualidad, mas adelante veremos que ventajas y desventajas puede tener esto, aunque recordar que siempre podéis volverlo a ejecutar y desinstalar las que hayáis bajado o instalar nuevas, pero bajando solo estas 2 podremos hacer todo, y tardara relativamente poco en descargar e instalar y podremos empezar con nuestro primer android.

Cuando haya terminado, iremos a la carpeta de eclipse y ejecutaremos eclipse.exe empezara a cargar enseguida, recordemos que ejecutar eclipse.exe no te instala nada en tu equipo, eclipse no requiere instalación, así que si no quieres ir cada vez a la carpeta a ejecutarlo puedes crear un acceso directo al escritorio. A media carga nos saltara un dialogo, en el que se nos pide el WorkSpace simplemente es la carpeta en la que guardaremos nuestros proyectos, elegir la ruta que mas os guste, o dejar la que viene por defecto, eclipse creara la carpeta si no existe; después de esto terminara de cargar y tendremos una ventana parecida a esta


en la esquina superior izquierda tenemos el menú File de allí a New y Android Application Project



Se nos abrirá la selección de los detalles de proyecto


En donde deberemos rellenar:
  • Applicatiob Name: El nombre de la  aplicación puede ser el que queramos.
  • Project Name: Por defecto nos lo rellena con el mismo nombre de la aplicación sin espacios, tiene alguna restricción.
  • Package Name: Debemos empezar siempre por com.(lo que sea). después de aquí no hay reglas, tan solo no tener puntos

Después deberemos dar a next para seguir seleccionando otras opciones, aquí vamos a dejar todo según viene por defecto, aunque ya iremos cambiando y jugueteando con distintas opciones; en este momento ya hemos creado nuestro primer proyecto android, y nuestro primer Activity, deberemos ver algo como esto




en caso de que no sea así, recuerda minimizar, o cerrar la ventana que tenias visible.
Por defecto tienes abierta la vista es decir el layout, para ver el codigo y empezar a programar deber ir a src>(paquete que hayas escogido)>MainActivity.Java

Y como supongo que estarás deseando ejecutarlo y verlo corriendo en Android, pásate por el siguiente articulo que explicamos como ejecutarlo y crear un dispositivo virtual ;)

Puedes descargarlo Funcionando desde http://adf.ly/KBRel

jueves, 24 de enero de 2013

#androidIO Aplicaciones nativas VS webapps

El ultimo android AndroidIO de nuestros amigos de desarrollo web hasta el momento, ya que desde hoy mismo comienzan un curso de android desde escuelaIT, pero prometen continuar con los AndroidIO gratuitos como hasta ahora. En este AndrioidIO nos hablaran de las diferencias entre aplicaciones nativas y las creadas con frameworks que trabajan con HTML5 ventajas y desventajas de cada uno.




Toda esta info y mas en: http://desarrolloweb.com/articulos/recopilatorio-androidio-enero-2013.html

martes, 22 de enero de 2013

Establecer pagina por defecto

aveces cambiamos de hosting por la razón que sea y tenemos una aplicación, o una pagina web ya hecha y nos encontramos con el problema de que nuestras paginas por defecto (la que se muestra sin escribirla en la URL) se llama defaul.php o index.php suelen ser las mas típicas así como las correspondientes con la extensión .html

el problema esta en que cambiamos de hosting, migramos nuestra aplicación y va todo genial, excepto que si escribimos www.nuestroDominio.es nos muestra una pagina de apache y no la nuestra aunque entrando a www.nuestroDominio.es/defaul.php si nos muestra nuestra pagina.

Es debido a la configuración de apache para buscar las paginas por defecto algunos servidores pueden tener el index, otros el defaul. otros alguna otra configuración menos estandar, y los mas completos tienen todas o casi todas las configuraciones, si podemos entrar al apache y configurarlo genial, pero eso no es posible en los hosting compartidos, que es el caso de la mayoría de nosotros ya que tener un servidor dedicado es muy caro y si estamos empezando no nos lo podemos costear; pero no hay que desesperarse, mediante el .htaccess podemos configurarlo para que nos coja nuestra pagina, tan solo debemos colocar el siguiente código en el.

DirectoryIndex default.php

Sustituyendo el default.php por la pagina de inicio que tengamos

Espero os sirva de ayuda

Forzar redicionamiento de un alias al dominio principal

Bueno lo prometido es deuda, esta vez no me voy a extender mucho ya que lo que vamos a hacer esta explicado en los post anteriores con la única diferencia de que esta vez vamos a redireccionar desde un alias o dominio secundario, al principal; es decir tenemos nuestro dominio ya correctamente configurado para que nos entren las visitas por
dominioPrincipal.com o www.dominioPrincipal.com
nos dirija siempre a www.dominioPrincipal.com
y nos queda que si entran por dominioSecundario.com o por www.dominioSecundario.com nos dirija a www.dominioPrincipal.com

Esto se usa mucho para cuando cogemos un nombre en Internet, y compramos todos los dominios disponibles, es decir el .com, .es, .eu, etc.....
Podeis ver un ejemplo en los siguientes enlaces
www.monologo.eu
www.poque.es

Si pincháis sobre cualquiera de ellos vereis que entra en la url que habéis clickao pero cambia a www.poque.es lo mismo ocurre con las www de delante de cada dominio.
para ello tan solo deberemos copiar este código en nuestro .htaccess

RewriteEngine On

RewriteCond %{HTTP_HOST} ^dominioSecundario\.eu[NC]
    RewriteRule ^(.*)$ http://www.dominioPrincipal.es/$1 [R=301,L]

RewriteCond %{HTTP_HOST} ^(www\.)?dominioSecundario\.eu$
    RewriteRule ^(.*)$ http://www.dominioPrincipal.es/$1 [R=301,L]

Este es solo el código para redireccionar de un alias al dominio principal, el del redirecionamiento para las www del dominio principal esta explicado en un post anterior

Un saludo

sábado, 19 de enero de 2013

Forzar el WWW en un dominio mediante Redirección


Es importante sobre todo en temas SEO que todas nuestras paginas entren por la misma URL es decir, si tenemos un Dominio, como por ejemplo:

dominioPrincipal.com
siempre podremos entrar desde dominioPrincipal.com y desde www.dominioPrincipal.com, si tenemos otros dominios funcionando como alias tambien entraremos a la misma web desde dominioSecundario.com, www.dominioSecundario.com, etc ...

Bien esto para Google y otros buscadores puede considerarse contenido duplicado y por lo tanto llevar a penalizacion, si habeis leido bien, a Google no le gusta que se pueda entrar desde mas de una URL a  la misma web, considera que hay mas de una web con el mismo contenido, y penaliza a ambas, en este caso seremos nosotros los penalizados, para que esto no ocurra debemos obligar que siempre se entre por la misma URL, asi que entren los usuarios por donde entren les mandamos a la que a nosotros nos interese mas, vamos a suponer que nuestro dominio es:

  • dominioPrincipal.com

y vamos a mandarle a

  • www.dominioPrincipal.com

Para ello solo tendremos que poner el sigueinte codigo en nuestro .htaccess
RewriteEngine On
RewriteCond %{HTTP_HOST} ^dominioPrincipal\.com[NC]
   RewriteRule ^(.*)$ http://www.dominioPrincipal.com/$1 [R=301,L]
Podeis ver un ejemplo en:
monologosymas.es
www.monologosymas.es

Para obligar a que nuestros subdominios tambien se redireccionen a nuestro dominio principal publicaremos otra entrada ;)

Forzar redirección de carpeta a subdominio desde el .htaccess

Ahora vamos a forzar la redirección de una carpeta hacia un subdominio por medio de un .htaccess con redirección 301.
En ocasiones podemos tener una o mas de nuestras carpetas alojadas de la siguiente manera:
www.nuestroDominio.com/carpeta/
y queremos que cuando entren ahí se les redireccione automáticamente al subdominio carpeta, quedando algo así:

carpeta.nuestroDominio.com

También añadiremos que cuando entren a alguna pagina de la carpeta se les redireccion a la misma pagina pero en el subdominio, como en este ejemplo:

www.nuestroDominio.com/carpeta/index.html  –> carpeta.nuestroDominio.com/index.html

Para hacerlo basta con poner el siguiente código en un archivo con el nombre “.htaccess” en la raíz del directorio (ejemp: /public_html/.htacess )#Forzar redireccion de carpeta hacia Subdominio
RewriteEngine On
RewriteCond %{HTTP_HOST} ^(www\.)?nuestroDominio\.com$ 
 RewriteRule ^carpeta(/.*)?$ http://carpeta.nuestroDominio.com$1 [R=301,L]
#FIN Forzar redireccion de carpeta hacia Subdominio