Crisdesignweb

Proyectos llenos de creatividad, calidad e innovación.

Las rutas o paths

Cada vez que insertamos en una de nuestras páginas un elemento externo a ellas (una imagen, un sonido, un enlace…) tenemos que definir claramente dónde se encuentra este, para que el navegador pueda encontrarlo e insertarlo.

Existen dos modos de definir las rutas de los archivos:

  1.  Rutas Absolutas.

    Las rutas absolutas son el camino que ha de seguir el navegador para encontrar el archivo, definidas desde el principio, como por ejemplo:

    http://www.crisdesignweb.es/carpeta/archivo.ext

    Esta es la ruta absoluta para un archivo llamado archivo.ext que está dentro de la carpeta llamada carpeta, estando ésta directamente dentro de mi dominio.

    Las rutas absolutas se suelen utilizar nada más para enlazar a archivos que están fuera del dominio de nuestra página web. De hecho es la única manera de hacerlo. Pero el inconveniente es que hay que escribir todo (http:www.midominio…..).

     

  2.  Rutas Relativas.

    Las rutas relativas son el camino a seguir DESDE la página HASTA el archivo. En este caso no hay que escribir http://www.midominio…., sino solo indicar los pasos que hay que dar para llegar desde la página en cuestión, hasta el archivo correspondiente.

    Por ejemplo, si tenemos nuestro dominio y dentro de el la página index.html y dos carpetas una llamada img y otra llamada slide que contiene otras paginas en html, la ruta relativa para llamar a una de las imagenes que tenemos en la carpeta img, sería: img/mifoto.jpg (porque para ir desde index.html hasta la foto, hemos de entrar primero en la carpeta img y dentro de ésta, buscar la imagen mifoto.jpg)

    Sin embargo, si queremos ir a una de las paginas en html que está en la carpeta slide y quisieramos insertar una foto, la ruta relativa sería: ../img/mifoto.jpg (los dos puntos y la barra ( ../ ) significan un paso atrás, es decir, salir de una carpeta. La explicación sería ../ para salir de la carpeta slide, luego img para entrar en esa carpeta y por último el nombre de la foto que queremos insertar, por eso tenemos que escribir en la ruta relativa ../img/mifoto.jpg)

     

    Mas información: Ver enlace de Adobe

Que es XHTML

XHTML es una familia de módulos y tipos de documentos que reproduce, engloba y extiende HTML 4.0. Los tipos de documentos de la familia XHTML están basados en XML, y diseñados fundamentalmente para trabajar en conjunto con aplicaciones de usuario basados en XML.

XHTML 1.0 (esta especificación) es el primer tipo de documento de la familia XHTML. Es una reformulación de las tres definiciones de tipo de documento HTML 4.0 como aplicaciones de XML 1.0. Su finalidad es ser usado como lenguaje de contenidos que es a la vez conforme a XML y, si se siguen algunas sencillas directrices, funciona en aplicaciones de usuario conformes con HTML 4.0. Los desarrolladores que migren aplicaciones hacia XHTML 1.0 apreciarán las siguientes mejoras:

  • Los documentos XHTML son conformes a XML. Como tales, son fácilmente visualizados, editados y validados con herramientas XML estándar.
  • Los documentos XHTML pueden escribirse para que funcionen igual o mejor que lo hacían antes tanto en las aplicaciones de usuario conformes a HTML 4.0 como en los nuevas aplicaciones conformes a XHTML 1.0.
  • Los documentos XHTML pueden usar aplicaciones (e.g. scripts y applets) que se basen ya sea en el Modelo del Objeto Documento de HTML o XML.
  • A medida que la familia XHTML evolucione, los documentos conformes a XHTML 1.0 estarán más preparados para interactuar dentro de y entre distintos entornos XHTML.

Que es el PHTML

Es una extensión para un tipo de páginasweb que llevan código PHP para ser generadas.

Cuando una página esta escrita en PHP podemos encontrarla con varios tipos de extensiones, como por ejemplo: .php, .php4, .php3, o .phtml

HTML5

Nos permite una mayor interacción entre nuestras páginas web y contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.

Esta nueva versión se basó en el diseño más común de las páginas web alrededor del mundo para llegar a un estándar de etiquetas que realicen las mismas tareas de manera más rápida y eficiente, he aquí algunos ejemplos:

  • Un nuevo diseño para páginas web, reflejado en las etiquetas <header>,<footer>, <nav>,<section>,<article> las cuales están destinadas a remplazar la necesidad de tener una <div> para cada parte de la página, y en cambio, tener etiquetas específicas para ello.
  • La nueva etiqueta <video> para insertar un reproductor de video, mejorando el reproductor antiguo utilizado por la etiqueta <embed> y evitándonos la pena de insertar el código de <object>, así como eliminar la necesidad del Flash Player para reproducir videos (lo que nos lleva a un ahorro en la cantidad de memoria utilizada).
  • Una nueva tag <audio> para insertar audio en nuestro sitio web, remplazando la vieja etiqueta <embed> con las mismas cualidades de la etiqueta anterior.
  • Una etiqueta <canvas> para manejo de gráficos en internet, sea para dibujar vectores o hacer animaciones.

Ejemplo HTML5?

 

Conclusiones

La nueva versión de HTML contiene elementos dedicados ampliamente a mejorar la experiencia del usuario en nuestra página web, haciendo más fácil al diseñador poder agregar elementos de audio, video y en general del web 2.0 así como organizar sus contenidos utilizando menos código.
La nueva versión es más eficiente y ocupa menos recursos en la computadora del cliente, en particular mediante el uso del nuevo reproductor que no requiere flash o adobe player para utilizarse, y siendo el HTML5 compatible con las versiones anteriores de HTML, utilizar la nueva versión en una página ya diseñada implica un menor trabajo que si fuera una colección completamente nueva.
Por el contrario, HTML5 radica fuertemente en las capacidades del explorador, por lo que en estos momentos no todos los exploradores lo soportan (actualmente sólo Chrome, Safari, Firefox y Opera soportan la mayoría de las características).

 


Bibliografía

http://www.trazos-web.com/2010/02/01/html5-que-es-y-como-usarlo/

 


Paginas de referencia donde explican las mejoras del HTML 5:

 

WEB Interesantes

  • PÁGINA CON LA EXPLICACIÓN DE LAS ETIQUETAS DE PROGRAMACIÓN WEB:
    1. http://dochub.io/#css/

Página muy interesante y útil, donde podrá encontrar toda la información de las etiquetas de distintos lenguajes de programación web (CSS, HTML, PHP, JAVASCRIPT…)


  • OTRAS WEB INTERESANTES:
    1. http://www.cristalab.com/
    2. http://www.desarrolloweb.com
    3. http://www.trazos-web.com/
    4. http://www.webestilo.com/
    5. http://www.webexperto.com/