Blog de Diseño Web http://www.webserveis.com/blog Diseño, Maquetación, Programación Web Mon, 05 Jul 2010 11:46:40 +0000 en hourly 1 http://wordpress.org/?v=3.0 Indice XHTML http://www.webserveis.com/blog/indice-xhtml/ http://www.webserveis.com/blog/indice-xhtml/#comments Mon, 05 Jul 2010 11:46:40 +0000 neuronic http://www.webserveis.com/blog/?p=338 Tutorial básico de XHTML

Introducción al XHTML
Elementos web de XHTML
Reglas de marcado en XHTML
Entidades de carácteres en  XHTML
Definición del doctype en XHTML
Codificación de carácteres en XHTML
Metatags para el XHTML
Estructura inicial de un documento en XHTML
Hola Mundo en XHTML
Validar XHTML

XHTML Básico

Estilos CSS en XHTML
Insertar Scripts en XHTML
Elementos web de texto en XHTML
Elementos web para crear listas en XHTML
Enlaces web en XHTML
Imágenes en XHTML
Tablas en XHTML
Capas en XHTML
Applets y objectos en XHTML
Formularios en XHTML
Frames en XHTML
Atributos de elementos web en XHTML
Eventos de elementos web en XHTML

XHTML Avanzado

Insertar Flash válido en XHTML
Insertar video de youtube en XHTML
Insertar video streaming en XHTML
Insertar sonido mp3 en XHTML
Diseñar un layout básico en XHTML
Implementar google maps en XHTML
Insertar Skype Call en XHTML
Insertar Google Talk en XHTML
Widgets para webs en XHTML

]]> http://www.webserveis.com/blog/indice-xhtml/feed/ 0 Excluir páginas en wordpress, codex http://www.webserveis.com/blog/excluir-paginas-en-wordpress-codex/ http://www.webserveis.com/blog/excluir-paginas-en-wordpress-codex/#comments Mon, 31 May 2010 17:17:21 +0000 neuronic http://www.webserveis.com/blog/?p=328 Podemos excluir las páginas en wordpress con dos métodos, usando un pluguin para wordpress “exclude page” o bien usando codex

Primero de todo tenemos que obtener el id de la página a excluir, lo podemos conseguir en el panel bakend de administración sección “Paginas” editamos una pagina y en su url veremos el numero del id

Y en el código del theme tenemos que localizar donde se crea el menú, normalmente está en header.php

<?php wp_list_pages('title_li=&amp;depth=2&amp;sort_column=menu_order'); ?>

con el atributo exclude podemos decidir que páginas sea excluidas del menu

<?php wp_list_pages('title_li=&amp;depth=2&amp;sort_column=menu_order&amp;exclude=43,44'); ?>

Podemos poner mas de un id de página con , las separamos

]]> http://www.webserveis.com/blog/excluir-paginas-en-wordpress-codex/feed/ 0 Exclude Pages, plugin para wordpress http://www.webserveis.com/blog/exclude-pages-plugin-para-wordpress/ http://www.webserveis.com/blog/exclude-pages-plugin-para-wordpress/#comments Mon, 31 May 2010 17:00:26 +0000 neuronic http://www.webserveis.com/blog/?p=323 Este pluguin añade un checkbox en el apartado de creación de páginas “page” para decidir que páginas queremos que sean visibles en el sistema de navegación, las páginas excluidas se puede consultar con su dirección url directa, si queremos usar wordpress por crear páginas corporativas, nos viene de lujo ese pluguin

Instalación: Bajarlo, desempaquetar y volcarlo en el menú pluguin de nuestro wordpress, acceder el control de administración y activarlo

Descarregar Exclude Pages pluguin

]]> http://www.webserveis.com/blog/exclude-pages-plugin-para-wordpress/feed/ 1 Metatag description en XHTML http://www.webserveis.com/blog/metatag-description-en-xhtm/ http://www.webserveis.com/blog/metatag-description-en-xhtm/#comments Mon, 22 Mar 2010 19:32:00 +0000 neuronic http://www.webserveis.com/blog/?p=318 El metatag description es para especificar una descripción breve del documento web, principalmente también es la información que aparece en los resultados de los buscadores, debe ser breve entre unos 25 y 150 carácteres.

uso del metatag description

<meta name="description" content="descripción del sitio web 25 y 150 carácteres" />

* Si en la descripción usamos acentos variara la posición en los resultados de los buscadores, aquí debemos procurar que términos queremos posicionarnos en SEO


]]> http://www.webserveis.com/blog/metatag-description-en-xhtm/feed/ 0 Metatag author en XHTML http://www.webserveis.com/blog/metatag-author-en-xhtml/ http://www.webserveis.com/blog/metatag-author-en-xhtml/#comments Mon, 22 Mar 2010 19:22:48 +0000 neuronic http://www.webserveis.com/blog/?p=311 El metatag author es para especificar el autor del documento web

uso del metatag author

<head>
<meta name="author" content="autor de la página web" />
</head>

Otros metatags

title
keywords
description
robots
revisit-after

]]> http://www.webserveis.com/blog/metatag-author-en-xhtml/feed/ 0 Elemento web Title http://www.webserveis.com/blog/elemento-web-title/ http://www.webserveis.com/blog/elemento-web-title/#comments Mon, 22 Mar 2010 18:18:35 +0000 neuronic http://www.webserveis.com/blog/?p=288 XHTML Tag title: El elemento  web title sirve para definir el título de un documento web.
Se pone en la sección head del documento web, es decir despues de y antes del

Uso del elemento title

<head>
   <title>titulo de la página web</title>
</head>

Los navegadores usan el contenido del elemento title para

  • Mostrar el titulo de la página web en la barra superior
  • Valor por defecto que toma al agregar un marcador a favoritos “bookmark”
  • Se muestra como titulo en los resultados de los buscadores


* se recomienda cada documento web del sitio web tenga un titulo diferente, las arañas/robots de los buscadores indexan los documentos web por el titulo y su descripción.

Navegadores que lo soportan

alllwebrowser_yes es soportado por la mayoría de los navegadores web.

Diferencias entre html y xhtml

Ninguno, no existe diferencia entre versión de html y xhtml.

Atributos soportados

Eventos soportados

no soporta nigún evento



]]> http://www.webserveis.com/blog/elemento-web-title/feed/ 0 Metatags para el XHTML http://www.webserveis.com/blog/metatags-para-el-xhtml/ http://www.webserveis.com/blog/metatags-para-el-xhtml/#comments Mon, 22 Mar 2010 18:02:53 +0000 neuronic http://www.webserveis.com/blog/?p=283 Los metatags son etiquetas html que se insertan en la sección HEAD de un documento web, resultan invisibles para los visitantes, pero son de gran ayuda para las arañas de los buscadores y también por los navegadores, porque en los metatags es donde se hace referencia sobre la página web: titulo, autor, descripción, palabras claves, lenguaje etc..

Los podemos definir en dos tipos los metatags básicos y los metatags de control

Metatags básicos

Los metatags básicos sirven para dar información de la página web a los robots de búsqueda, usan esa información para indexar la página web en su base de datos.

Ver listado de los metatags básicos

Definición de un metatag básico

<meta name="" content="" />

El atributo name es donde indicaremos el tipo de etiqueta y en el atributo content su contenido

Tabla de los metatags básicos

name Content Descripción
title Título de la página web especificar un titulo en un documento web
author autor de la página web” especificar el autor del documento web
keywords palabra1, palabra2, palabara3 especificar las palabras clave que conforman el documento web
description descripción del sitio web… una descripción breve del documento web
robots index, follow especificar la acción de los robots de los buscadores
revisit-after index, follow especificar la frecuencia de las visitas de los robots

xhtml tag title
metatag author
metatag keywords
metatag description
metatag robots
metatag revisit-after

ss

]]> http://www.webserveis.com/blog/metatags-para-el-xhtml/feed/ 0 Codificación de carácteres en XHTML http://www.webserveis.com/blog/codificacion-de-caracteres-en-xhtml/ http://www.webserveis.com/blog/codificacion-de-caracteres-en-xhtml/#comments Mon, 22 Mar 2010 17:40:28 +0000 neuronic http://www.webserveis.com/blog/?p=275 La codificación de carácteres sirve para especificar que carácteres podemos usar directamente a la creación de la página web, como acentos de nuestro idioma,  propios del idioma “árabe, chino, japonés, coreano, ruso, griego etc.” , recordamos que las entidades html también nos ayudaban a eso, pero no son soportadas para todos los propósitos.

Si no especificamos bien la codificación de carácteres en el documento web, a la hora de visualizar la página web, se puede observar algunos caracteres mal representados.

es decir si especificamos una codificación de carácteres como por ejemplo utf-8, ese incluye el símbolo del euro, para mostrar el símbolo del euro podemos usar su entidad en html &euro; o bien poner €, si escojamos otra codificación que no incluye el símbolo €, solo tendríamos la oportunidad de usar su entidad en html para el euro

Definir la codifiación de carácteres

Para definir la codificación de caracteres dentro de un documento web, utilizaremos el siguiente metatag

Se debe poner dentro del bloque head del documento web, es decir entre <head> y </head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

En charset se define el  código de la codificación, se recomienda usar la codificación de carácteres en utf-8

Listado de codificación de caracteres:

Set carácter Descripción Cobertura
ISO-8859-1 Alfabeto latino parte 1 Norte América, Europa del Oeste, América latina, El Caribe, Canadá y áfrica.
ISO-8859-2 Alfabeto latino parte 2 Europa del este
ISO-8859-3 Alfabeto latino parte 3 Sud Este de Europa, Esperanto, y otros
ISO-8859-4 Alfabeto latino parte 4 Escandinavia / Bálticos y los del ISO-8859-18859-1
ISO-8859-5 Alfabeto latino parte 5 Idiomas que usan el alfabeto cirílico, Bulgaria, Bielorrusia y Macedonia
ISO-8859-6 Alfabeto latino y árabe parte 6 Idiomas que usan el alfabeto Árabe
ISO-8859-7 Alfabeto latino y griego parte 7 Idiomas modernos del Griego y para símbolos matemáticos derivados del Griego
ISO-8859-8 Alfabeto latino y hebreo parte 8 Idiomas que usan el alfabeto Hebreo
ISO-8859-9 Alfabeto latino y turco parte 9 Idioma Turco. Parecido al ISO-8859-1 excepto los caracteres Islandés
ISO-8859-10 Alfabeto latino y nórdico Idiomas Nórdicos
ISO-8859-15 Como el ISO-8859-1 Similar al ISO 8859- pero sustituye algunos símbolos poco comunes por el símbolo del euro y algunos otros caracteres que faltaban
ISO-2022-JP Alfabeto latino y japonés parte 1 Idioma Japonés
ISO-2022-JP-2 Alfabeto latino y japonés parte 2 Idioma Japonés
ISO-2022-KR Alfabeto latino y coreano parte 1 Idioma Coreano
UTF-8 Unicode Se puede mostrar todos los caracteres que están en el estándar de Unicode
UTF-16 Unicode completo Versión expendida de utf8 que podemos usar todo el repertorio del Unicode
]]> http://www.webserveis.com/blog/codificacion-de-caracteres-en-xhtml/feed/ 0 Entidades de carácteres en XHTML http://www.webserveis.com/blog/entidades-de-caracteres-en-xhtml/ http://www.webserveis.com/blog/entidades-de-caracteres-en-xhtml/#comments Mon, 22 Mar 2010 14:52:53 +0000 neuronic http://www.webserveis.com/blog/?p=247 El navegador para mostrar un documento web y tratar sus elementos que lo conforman, por eso algunos caracteres los interpreta como instrucciones < > & ‘ y “, si queremos mostrar esos caracteres dentro del navegador utilizaremos la entidad html de cada carácter.

Caracter Entidad en html Descripción
< &lt; inicio
> &gt; cierre
‘ &#39; comillas simples
“ &quot; comillas dobles

Otros caracteres como símbolos de moneda, acentos y puntuaciones especiales, también tienen sus entidades en htm

Caracter Entidad en html Descripción
€ &euro; Simbolo euro
£ &pound; Simbolo pound
¥ &yen; Simbolo Yen
á &aacute; acento a cerrado
Á &Aacute; acento A cerrado
é &eacute; acento e cerrado
É &Eacute; acento E cerrado
í &iacute; acento i cerrado
Í &Iacute; acento I cerrado
ó &oacute; acento o cerrado
Ó &Oacute; acento O cerrado
ú &uacute; acento u cerrado
Ú &Uacute; acento U cerrado
à &agrave; acento a abierto
À &Agrave; acento A abierto
è &egrave; acento e abierto
È &Egrave; acento E abierto
ì &igrave; acento i abierto
Ì &Igrave; acento I abierto
ò &ograve; acento o abierto
Ò &Ograve; acento O abierto
ù &ugrave; acento u abierto
Ù &Ugrave; acento U abierto
ñ &ntilde; eñe minúscula
Ñ &Ntilde; eñe mayúscula
]]> http://www.webserveis.com/blog/entidades-de-caracteres-en-xhtml/feed/ 0 Definición del doctype en XHTML http://www.webserveis.com/blog/xhtml-el-doctype/ http://www.webserveis.com/blog/xhtml-el-doctype/#comments Mon, 22 Mar 2010 10:35:51 +0000 neuronic http://www.webserveis.com/blog/?p=28 El DOCTYPE es la declaración de tipo de documento web, es parte fundamental de las páginas web que quieran cumplir con los estándares web, con el doctype se indica que versión de XHTML se usa en la página, así los navegadores pueden renderizar la página con más exactitud

Existen tres tipos de declaración de tipos en XHTML (Strict, Transitional y Frameset)


XHTML 1.0 Strict
Es la versión más estricta, que separa el contenido y la presentación del sitio web, se elimina los elementos en desuso font y center, utilizando strict se consigue un documento web bien estructurado y adaptable a la mayoría de dispositivos “navegadores web”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


XHTML 1.0 Transitional
Se usa para dar más compatibilidad con los navegadores, incluye todas la características de XHTML 1.0 Strict pero soporta las etiquetas en desuso (font, center …)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


XHTML 1.0 Frameset
Es la versión que usaremos si implementamos frames a la página web, hereda todo de la versión transitional.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">


*Antes de la declaración del Doctype no puede aparecer nada, ni comentario alguno, salvo de saltos de línea.

]]> http://www.webserveis.com/blog/xhtml-el-doctype/feed/ 2