Entradas etiquetadas ‘html
¿Qué es el index de una página web?
Para los que empezáis en la tarea de creación de una página web es importante saber que el fichero por defecto en la ruta inicial y carpetas de este nuevo sitio web siempre suele ser un index.html, index.htm o default.htm en sistemas con IIS.
Lo normal en la mayoría de servidores web es que el fichero de inicio sea index.html, y aunque escribimos por ejemplo http://carrero.es/ esto lo que hace es cargar nuestro index.
Si trabajamos con Apache podemos alterar el orden de carga de los diferentes tipos de index que nos podemos encontrar a través del .htaccess incluyendo la línea DirectoryIndex index.html index.htm index.php. Más en la documentación de Apache sobre DirectoryIndex
Recuerda que tu fichero index.html o index.htm contendrá tu página web en HTML o HTML5. Si es index.php puede incluir código PHP, si es index.pl interpretará Perl, index.py para programación Python, …
Os recomendamos más ayuda en documentación html, manual de PHP, documentación de Apache, un hosting web, …
HTML5, la web que quieres tener
HTML5 es la siguiente evolución de la red Internet, sin duda una revolución sin igual que podrá redefinir como vamos a usar las comunicaciones a partir de ahora, movilidad, el posible fin del flash, geoposicionamiento, …
Si nos remontamos a la versión anterior, HTML 4, que data de diciembre de 1997 ya han pasado casi 15 años sin un cambio grande en el estándar.
Creo que es vital que todos los desarrolladores y diseñadores nos adaptemos al HTML 5, para lo que tenemos que ir poco a poco convergiendo al nuevo estándar para programar páginas web.
HTML 5. Hacia la web semántica
El nuevo estándar de HTML hacer que todos los elementos del código HTML se describan a través de sus etiquetas, con significado y relación de los datos que se contienen. De esta forma se facilita la comprensión e interpretación tanto para nosotros como para los robots o buscadores. Más información sobre las nuevas etiquetas.
Evolución de los gráficos y el multimedia
HTML 5 es el “killer” flash, todo el mundo habla de que Adobe Flash dejará de ser necesario con la llegada de este, y hay grandes empresas que apuestas por HTML5 dejando de lado el formato propietario de Adobe. (Apple para no ir muy lejos). Creo que una de las mayores ventajas es el fin de los plugins para elementos multimedia, de interacción, vídeos, … HTML 5 puede ya reproducir vídeo, juegos online, elementos interactivos, … sin instalar nada adicional y eso creo que a todos nos gusta.
Geoposicionamiento y geolocalización
Si entrar en lo conveniente o no de revelar nuestra posición en cada momento, otra de las funciones que ya se aprovechan de HTML5 es su conexión con los elemento de GPS de nuestro terminales móviles para geoposicionar y utilizar esta información para determinar que mostrar en una web. De las cosas que más me gustan en este punto son FourSquare y Facebook Places para conocer lugares cercanos y además ahora encontrar ofertas y promociones.
Bases de datos locales en el cliente
Otro gran paso es la posibilidad de crear base de datos en local, ya no necesitamos Google Gears (en desuso) para almacenar y crear una base de datos local en el cliente que visita una web. HTML 5 Web Storage permite disponer de bases de datos en el usuario que nos visita y además hacer consultas SQL. Lo que no se los posibles problemas de seguridad o saturación. Pero vamos creo que son muchas más las ventajas.
Y muchas más cosas que nos trae HTML5 como Formularios enriquecidos, drap & drop (arrastrar y soltar elementos), visores para fórmulas matemáticas y SVG, API para trabajar Offline, posibilidad de trabajo en paralelo de múltiples procesos, … Más información sobre HTML5 en Wikipedia o en W3.
Más referencias a HTML 5: Demos HTML5, Hosting HTML5, Programación con HTML5, …
Convertir un página web html en pdf para imprimir bien
Muchas veces me encuentro con problemas a la hora de imprimir una página web de forma correcta, o incluso de guardar una página HTML en un formato de rápido acceso desde cualquier medio. La solución podría ser capturar la página en JPG, GIF o PNG, pero la pega es que no podemos buscar dentro del documento. Al final lo ideal es convertir el HTML en PDF de forma que este si será indexable y permitirá buscar dentro de su contenido.
Hay muchas soluciones para generar un PDF en base a una página web, aquí citamos algunas formas de hacerlo:
- Si tenemos Mac OS X solo tenemos que dar a imprimir (cmd+P) y tenemos por defecto un botón en el cuadro de impresión (abajo a la izquierda) que pone PDF y nos permitirá grabar en PDF. La pega que no siempre es 100% fiel al diseño y se descuadran cosas, pero es la solución rápida.
- iWeb2Print es una aplicación online que conocimos vía FeedMyApp y que nos ayuda a optimizar una página web para poder guardarla o imprimirla ahorrando dinero, ya que ajusta la misma al ancho del formato de papel que seleccionemos. Una interesante opción a probar que además tienes otras utilidades como pasar por un OCR, convertir formular a imagen, …
- Print What You Like es la solución para convertir una página web html a formato PDF que más me ha gustado de todas, no es la más rápida porque tiene que mostrar la publicidad, para eso es gratis, pero creo que es la mejor opción. Es la que estoy usando más ahora.
- ¿Qué otras opciones conocéis para convertir HTML/página web a PDF? Por favor que sean soluciones Online o código fuente para implantar en un servidor propio.
Comprueba tu web con varios navegadores
Entre tanto navegador y estándares web muchos diseñadores y programadores nos volvemos locos a la hora de hacer que una página web funcione bien en cualquier sistema operativo y navegador. Y es que quien no sufre cada día que una web se vea igual en Firefox, Internet Explorer, Chrome, Opera, Safari, ….
Para facilitarnos el trabajo hay una serie de herramientas o aplicaciones online que permite realizar pruebas de como se ven nuestras páginas webs en diferentes navegadores y versiones de los mismos.
Aquí os dejo una pequeña lista:
- BrowserLab de Adobe.
Actualmente es mi preferido, aunque no los tiene todos, tiene los principales desde Internet Explorer 6, 7, 8 y 9 beta, firefox 2, 3 y 4 beta, Safari 4 y 5, chrome 8 y 9, …. Carga casi en tiempo real. Funciona bien en Windows, Linux y Mac. - Browsershots
Otro servicio con una gran variedad de navegadores disponibles (algunos como Netscape, Flock, SeaMonkey, Konqueror, …), realmente completo. Es gratis pero igual desesperas con lo que tarda en generarse la captura. Siempre puede pagar 29,95 dólares para tener prioridad de carga. Además tienen parte de su código bajo licencia GPL para colaborar con las capturas. - Spoon
Este permite además visitas interactivas con algunos navegadores como Chrome, Firefox y Opera (parece que Explorer por petición de Microsoft no está soportado). Es totalmente gratis. Aunque desde mi Mac se niega funcionar. - Browserling
Ejecuta los navegadores en instancias virtuales para permitir interactividad. Ahora mismo es gratis durante el tiempo que dure su Beta pero necesitas registro para tener sesiones de 5 minutos si no quieres que tu sesión sea de poco más de 90 segundos. Tiene muy buena pinta y soporta Explorer, Firefox, Safari, Opera y Chrome. Y además funciona sin problemas en Mac. - Multi-Browser Viewer
Programa para windows que requiere suscripción y permite probar tu web en más de 20 navegadores. Además tiene soporte para navegadores móviles. Se puede probar gratis, pero después tendrás que pagar. Creo que no merece la pena con las opciones gratis que existen. - IETester
Para probar la compatibilidad de tus páginas webs con las antiguas versiones de Internet Explorer 5.5 hasta las nuevas, las 9.0. - BrowserSeal
Otra opción para instalar en Windows y probar la compatibilidad de tu web con navegadores explorer, firefox, chrome, opera y safari. Es comercial aunque podéis probarlo.
¿Conoces más opciones para probar la compatibilidad de tu web en múltiples navegadores web?
Tu logo es una imagen, no un <h1>
¿Deberíamos poner nuestro logotipo superior como una imagen o como un <h1>?
Este es un interesante debate que lleva mucho tiempo entre nosotros, y es que no sabemos si es mejor utilizar una imagen como logotipo o por el contrario utilizar un texto <h1> con el fin de mejorar nuestro SEO. Lo que está claro es que si nuestro logo es una imagen no puede ser un <h1>. Personalmente apuesto por la imagen con su correspondiente alt y title para el posicionamiento, sin forzar el <h1> con esa capa para mostrar luego la imagen por css. ¿Cual es vuestra elección?
Este el código ejemplo si utilizamos una imagen:
Leer el resto de la entrada »
