Bueno aqui con una nueva serie de videos sobe HTML, los videos son muy sencillos y no contienen muchas explicaciones asi que cualquier duda por favor directamente sobre este medio, un saludote y nos estamos viendo...
Saludos a todos despues de una realmente laaarrrrgaaaa temporada de estar sin hacer nada(por falta de tiempo, no por flojera), parece que los animos me estan volviendo asi que sin mas empiezo con este post en el que veremos algunas etiquetas xhtml muy utiles y un tanto desconocidas.
INTRO
Para los mas inexpertos decir etiquetas XHTML no quiere decir que no sirvan para el HTML, el XHTML es en su forma mas sencilla HTML con un formato estricto que hay que cumplir.
nota: Esta info la saque despues de leer el manual de XHTML que pueden encontrar en librosweb.es, esto por si algun lector curioso desea ahondar mas sobre una etiqueta o conocer mejor lo que es el lenguaje XHTML.
Antes de pasar de lleno a lo de las etiquetas me gustaria mencionar que HTML y por ende XHTML clasifica a todos sus elementos (etiquetas) en dos grupos:
Elementos de linea y Elementos de bloque
Esta clasificacion puede que sin conocerla ya la habran deducido, los elementos de bloque son tales como las etiquetas div las cuales cuando las declaramos podemos observar que ocupan todo el espacio disponible hasta el final de linea aunque su contenido no llegue al final de esta, por otro lado los elementos de linea solo ocupan el espacio necesario para mostrar su contenido, un ejemplo de este tipo de elemento es la etiqueta span.
SINTAXIS
Este es el formato que debe de cumplir un docuemnto XHTML como se menciono anteriormente y es lo que diferencia el HTML del XHTML ya que el primero no es tan riguroso cuando se trata de cumplir sus reglas de formato como lo es el segundo.
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Valido para HTML y XHTML: <p>Hola <a> esto es un link<a> dentro de un parrafo <p>
Valido para HTML pero incorrecto en XHTML: <p>Hola <a> esto es un link<p> dentro de un parrafo <a>
2) Los nombres de las etiquetas y atributos siempre se escriben en minusculas.
3) El valor de los atribustos siempre se encierra con comillas
Valido para HTML y XHTML: <a href="www.google.com">google<a>
Valido para HTML incorrecto en XHTML: <a href=www.google.com>google<a>
4) Los atributos no se pueden comprimir
Valido para HTML y XHTML: <dl compact="compact"> ... <dl>
Valido para HTML incorrecto en XHTML: <dl compact> ... <dl>
5) Toda etiqueta que se abre siempre debera cerrarse
Ahora bien ya terminadas estas aclaraciones preliminares vamosnos de lleno con las etiquetas. TEXTO
<em> Etiqueta de enfasis generalmente pone el texto en cursiva
<blockquote>
Aumenta la sangria al texto que contiene, es una de las etiquetas mas utilez en lo que a presentacion consierne
<abbr> Muestra un borde inferior punteado
<code> Se usa para resaltar con otro tipo de letra el codigo fuente que agregamos a una pagina, es simplemente un detalle estetico :)
ENLACES
<a href="/">inicio<a> Este es un truco muy sencillo que usa direcciones relativas para volver a la pagina de inicio.
//Enlace directo a la segunda seccion de la pagina <a href="http://www.ejemplo.com/pagina1.html#segunda_seccion"> Enlace a la segunda seccion de la pagina 1 </a>
Los enlaces directos a secciones tambien funcionan con el atributo id de cualquier elemento, esto quiere decir que si un elemento digamos un parrafo tiene como id la palabra inicio podemos referenciarlo desde un enlace.
< p id="inicio">parrafo inicio ... texto ...</p> ... texto ... <a href="#inicio">volver a parrafo inicial<a>
se recomienda usar los atributos id de los elementos existentes a crear secciones dentro de la pagina xhtml.
Otro tipo de enlaces que define xhtml son <script> y <link>, estos sonusados para enlazar los recursos que se deben de cargar automaticamente.
Aunque la etiqueta <script> permite enlazar varios lenguajes de programacion, el uso mas comun es para enlazar un archivo javascript, a diferencia de html en xhtml cuando se incluye codigo javascript en la propia pagina, se debe de insertar dentro de una seccion llamada CDATA. Para ello el codigo JS se debe de encerrar entre <![CDATA[ y ]]> como vemos a continuacion:
<script type="text/javascript"> //<![CDATA[ window.onload=function(){alert ("la pagina se a cargado completamente")} //]]> </script>
La etiqueta <link> solamente se puede incluir dentro de la cabecera del documento.
Enlaces e-Mail
Envio de correo electronico a varias direcciones: <a href="mailto:nom@direccion.com, otro_nom@direccion.com">correo</a>
Añadir asunto inicial al corro electronico: <a href="mailto:nom@direccion.com?subject=Pedir informes">mas informacion</a>
Añadir un texto inicial en el cuerpo dl correo electronico:<a href="mailto:nom@direccion.com?body=Quisiera pedir informes sobre sus productos">mas informacion</a>
Aunque mailtopueda parecer una ventaja su uso esta descontinuado.
Enlazar a un archivo FTP: < a href="ftp://ftp.ejem.com/ruta/archivo.rar" title="Archivo de las canciones de chicachu">
Elazar el favicon, el favicon o icono para favoritos es el pequeño icono que muestran las paginas en varias partes del navegador: <link rel="shortcut icon" href="/favicon.ico" type="image/ico"/>
Enlazar un archivo RSS: <link rel="alternate" type="application/rss+xml" title="Resumen de todos los articulos del blog" href="/feed.xml">
indicar que existe una version de la pagina en otro idioma: <link lang="es" xml:lang="es" title="El tutorial en español" type="text/html" rel="alternate" hreflang="es" href="http://www.ejemplo.com/tutorial/espanol.html"/> recordar que todo este codigo debera ir dentro de las etiquetas de cabecera.
Indicar que existe una pagina que es indice de la pagina actual: <link rel="start" title="El indice del tutoeial" type="text/html" href="http://www.ejemplo.com/tutorial/indice.html" />
Existen muchas y distintas maneras de agregar un menu a tu blog la mas sencilla es a traves de enlaces, si estoy hablando de las etiquetas de tipo <a href="URL">link</a>, ahora la pregunta del millon como agregar esas etiquetas en la cabecera para que los enlaces se vean como menu.
Pues muy sencillo simplemente dirigete a la pestaña de "Personalizar", despues seleciona "Edicion html" y presiona ctrl+f para buscar la palabra showaddelement=’no’una ves localizada cambia el no a yes de tal manera que showaddelement=’yes’.
Ahora dirigete a la pestaña "Elementos de pagina" ahi veras que la estructura a cambiado y ahora bajo el elemento cabecera tienes otro que te dice añadir gadget, pues bien presionalo, añade un elemento HTML/JavaScript.
Ahora unicamente falta que agregues los enlaces que formaran tu menu, como tip si no tienes idea de como formar tus enlaces te puedes observar que si presionas alguna etiqueta veras que en la barra de direcciones de navegador aparece algo como:
Siguiendo esa idea puedes hacer tus enlaces basandote en las etiquetas que pones a tu post, luego entonces si tienes varios post etiquetados con la palabra diseño y otros tantos con la palabra humor etc, entonces un ejemplo de como quedaria tu menu seria el siguiente:
Otra manera de poder crear tu menu es usando la busqueda, si tu realizas una busqueda en tu blog puedes ver en la barra de direcciones que aparece algo como esto:
http://avlprogrammer.blogspot.com/search?q=mysql
"q" es la variable que utiliza blogger para localizar una palabra en su base de datos, si tu conoces algo de base de datos es similar a una consulta como "SELECT * FROM POST WHERE LIKE (%mysql%);" si no conoces nada de BD o SQL simplemente ignora lo anterior me quice ver inteligente :P.
Bueno el caso es que cambiando la ultima palabra en este caso "mysql" podremos obtener como resultado todos los post que contenga dicha palabra hay que tener cuidado con esto por que puede que un post que habla de un tema de diseño en algun momento dado referencie a la palabra "mysql" sin que esta tenga una gran importancia sobre el post en general entonces si buscamos esta palabra obtendremos dentro de los resultado dicho post, el cual en realidad no tiene nada que ver con lo que el usuario quiere es por eso que recomiendo que usen la primera forma mostrada es decir establecer su menu a traves de etiquetas.
EXTRA
Si quieres saber mas del tema checa estos post son muy buenos y claros: Activar mas elementos bloqueados por Blogger en este post explican lo del showaddelement mas detalladamente y con imagenes.
Para pasar las variables de una página a otra lo podemos hacer introduciendo dicha variable dentro del enlace hipertexto de la página destino. La sintaxis sería la siguiente:
Podéis observar que estas variables no poseen el símbolo $ delante. Esto es debido a que en realidad este modo de pasar variables no es específico de PHP sino que es utilizado por otros lenguajes.
Ahora nuestra variable pertenece también al entorno de la página destino.php y está lista para su explotación.
Nota: No siempre se definen automáticamente las variables recibidas por parámetro en las páginas web, depende de una variable de configuración de PHP: register_globals, que tiene que estar activada.
Para aclarar posibles dudas, veamos esto en forma de ejemplo. Tendremos pues dos páginas, origen.html (no es necesario darle extensión PHP puesto que no hay ningún tipo de código) y destino.php:
<a href="destino.php?saludo=$dato&texto=Esto es una variable texto">Paso variables saludo y texto a la página destino.php</a> //creamos el link que enviara los valores, si observamos bien estos valores pueden ser fijos como la cadena de texto o bien variables como $dato.
//o bien si la forma anterior no funciona, tendremos que obtener dichas variables explicitamente, esto a traves del metodo get como se ilustra a continuacion: //reciviendo las variables url $var1=$_GET[saludo]; $var2=$_GET['texto']; //imprimimos los valores echo "Variable saludo:$var1, variable texto:$texto ambas fueron recividas via url";
Muchas veces queremos insertar codigo html en nuestros blogs con fines demostrativos, sin embargo en la mayoria de los blogs (creo que la unica exepcion es myspace para variar) el codigo html es interpretado, esto nos pone a pensar un rato y comenzamos a probar soluciones extrañas, por ejemplo es comun intentar poner el codigo dentro de etiquetas pre o no??? :) pero poco despues decepcionados descubrimos que nuevamente esta siendo interpretado, que podemos hacer entonces???, pues bien existen paginas que se ocupan de convertir nuestro codigo en otro igual pero con la diferencia de que este no es interpretado por el navegador, hasta ahora yo usaba una pagina que se llama simplecode, sin embargo hoy que entre a ella descubri que ya no existia, inmediantamente me puse a buscar un remplazo y no pude encontrar una pagina similar, que hacer entonces???, la solucion me vino de golpe y resulto tan sencilla y obvia que hirio un poco mi orgullo de ingeniero :P, los blogs regularmente interpretan todo lo que este encerrado en <> entonces la solucion es cambiar esos simbolos y ponerlos como caracter es especiales donde:
< = & lt; > = & gt;
Sabiendo esto ya muchos habran dado con la solucion, usando cualquier editor de texto capaz de soportar la funcion de buscar y remplazar, introducimos el codigo y luego remplazamos todas las < por & lt; y las > por & gt; despues copian ese nuevo codigo a su editor de entradas de su blog y si publican o hacen una vista previa veran que el codigo aparece justo como queremos.
Ahora bien aqui podemos observar claramente el uso de 2 etiquetas conocidas <object> y <embed> ambas sirven para lo mismo, es decir indican la ruta del video.
<object> a traves del parametro value="aqui va la direccion del video en cuestion" y <embed> a traves del parametro src="aqui va la direccion del video en cuestion", asi que si queremos insertar un video en nuestro blog lo unico es utilizar esta misma sentencia poniendo en los parametros value y src la direccion del video que nosotros queremos mostrar(aunque no sea de youtube o google esto funciona para cualquier video del que conoscan su direccion).
La pregunta ahora es para que usar object y embed si sirven para lo mismo???
La respuesta esta en la eterna rivalidad entre navegadores, si quitamos el embed el video no sera vidualizado en firefox (prueben esto y veran que no miento), por otro lado si quitamos el object el video no podra ser visualizado en IE, dicho sea de paso que el elemento embed no existe en las especificaciones de la W3.
Bueno pues resulta que navegando me encontre en el blog de vagabundia una manera de simplificar este codigo en una sola etiqueta, eh aqui lo que dice:
La solución para simplificar nuestro codigo es utilizar OBJECT pero especificando un atributo fundamental:
type="application/x-shockwave-flash".
El código válido quedaría de esta forma: <object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/PsRkU7FV4aw"> <param name="movie" value="http://www.youtube.com/v/PsRkU7FV4aw" /> <param name="wmode" value="transparent" /> </object> De esta manera, el tag EMBED, desaparece de una vez por todas y pasa al salón de los recuerdos.
Los Resultados son:
Con el primer tipo de insercion:
Con la version resumida:
Como podran observar los resultados son identicos y si no es asi entonces usen la opcion que visualice correctamente el video en su computador ;)
PARA INSERTAR SWF (FLASH)
Pues al igual que los video encontre 2 formas de hacer esto:
El caso es identico al anterior por lo que solo dire que la direccion de nuestro archivo swf debe de ir los parametros value y src, el resultado es el siguiente:
Para finalizar ... Existen muchos sitios gratuitos para subir nuestros archivos swf, pero la mayoria requiere crear una cuenta o bajar algun programita por lo que yo recomiendo http://www.theimagehosting.com sitio que no pide registro ni que descargues nada, la limitante es que solo acepta archivos de maximo un mega, si lo se!!! muy limitado, pero si lo que quieren es hacer alguna prueba rapida o su archivo no pesa mas de 1M (que ah de ser el caso de muchos) este sitio seguro es para ustedes, sino googleen un rato seguro que encontraran el espacio que necesitan para su swf.
Bueno aqui un flash de unas buenas costumbres que no esta de mas aplicar al momento de programar para la web:
Usar siempre la etiqueta Doctype: donde se define el tipo de lenguaje que esta utilizando la pagina.mas info sobre el doctype en: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Que las etiquetas siempre esten anidadas y no superpuestas, es decir la primera etiqueta que se habre sera la ultima que se cierra.pe:<head><p><img src="d.jpg"/>hola</p></head>.
Toda etiqueta que se habre debera ser cerrada incluso algunas que en html no es necesario cerrarlas como<hr>,<img>,<br> ya que cuando nos mudemos a xhtml esto nos generara error, por eso estando en html o en xhtml siempre es recomendable cerrar las etiquetasya sea dentro de la misma como:<hr/> o en una nueva tal como: <hr></hr>
XHTML es un leguaje case sensitiv como ya sabemos esto es que reconoce entre mayusculas y minusculas y no sera lo mismo para el usar la etiqueta h1 que la H1 por lo que debemos acostumbrarnos a trabajar en minusculas.
Todos los atributos deben tener un valor añadido p.e: <input name="fecha" type="text" value="2008/08/08"/>
por lo que seria incorrecto dejar algo como: <input name="fecha" type="text" >
Los valores de los atributos siempre deberan ir entre comillas p.e aling="center"
Es muy recomendable siempre ir comentando nuestro codigo para saber que estamos haciendo en cada bloque.
Al comenzar una nueva pagina siempre hay que comenzar formando nuestra estructra basica: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Es una buena practica valernos de las etiquetas meta para que nuestros sitios sean mas facilmente localizables por los buscadores aunque no solo se limitan a eso si no que tienen muchas funciones mas. checar: http://www.w3.org/Protocols/rfc2616/rfc2616.txt
Una buena pratica a la hora del diseño es usar porcentajes como medidas para que nuestra pagina sea vista correctamente a cualquier resolucion, aunque esto aveces es tedioso.
Siempre sera mejor usar estilos css a ocupar etiquetas como strong o italic
tener presente a que tipo de equipos va dirigido su trabajo, es decir si quieren llegar a todo el mundo o estan enfocados a cierto grupo de los cuales saben que caracteristicas tiene en sus equipos.
La primera pagina del sitio (index) siempre debera ser la mas ligera ya que es de la cual dependera que el usuario se interese por el contenido de su sitio y decida que vale la pena esperar a que se carguen otras paginas del mismo o simplemente se aburra de esperar y se pase su website por alto.
Si nuestro sitio esta dirigido a toda la comunidad web y no se desean usar porcentajes como medida (ya que estos aveces nos dan un diseño un tanto inestable), lo mejor sera usar resoluciones de 770px o 760px de ancho y bueno lo alto no creo que sea un problema pero de establecer uno de tal forma que no aparescan las barras de desplazamiento diria que seria bueno usar 560px de alto.
Si nuestro sitio por x causa o motivo necesita ser de mayores dimenciones es muy recomendable que el bloque o columna principal no exeda las recomendaciones anteriormente mencionadas ya que seria demasiado fastidioso para alguien con una resolucion de 800x600 leer lo que usted esta escribiendo ya que tendria que desplazarce con las barras continuamente.
Bueno por el momento creo que es todo, si tienen un truco o algun habito que sea de utilidad y pueda encajar aqui ya saben que siempre se agradece.
Muchas veces tenemos la necesidad de realizar un redireccionamiento entre una y otra página. Si el servidor contaba con soporte para lenguajes como ASP, CGI o PHP esto era muy fácil, pero para aquellos que no lo tienen, pueden utilizar alguno de los siguientes métodos.
1- Inserta el siguiente script entre las etiquetas <head> y </head>:
<head>
<script languaje="JavaScript">
location.href='direccion.html';
</script>
</head>
2 - Otro método puede ser agregando la acción OnLoad dentro del Body:
