• Página 1 de 4
  • 1
  • 2
  • 3
  • 4
  • »
Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Fundamentos de HTML
Fundamentos de HTML
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 3:55 PM 2009-03-18
En este tema voy a tratar de explicar lo más esencial y necesario que debe saber cualquier novato empezando a ir creando su web. Pero de todo modo yo invito a todos que dejen sus comentarios acerca del tema, su experiencia, puntos de vista etc.


  • Adición de un elemento HTML
    Elemento HTMLse considera el elemento raíz del cualquier documento HTML. Recuerden: la declaración DOCTYPE no es elemento del lenguaje HTML.
    Elemento raíz del lenguaje HTML
    <html>
    </html>
    Es muy simple, ¿no es así?

  • Elementos head y title
    Así que tenemos el fundamento con el elemento raíz. Ahora añadimos el elemento head. Este elemento contiene todos los elementos que son necesarios para la exposición y realización de un documento, pero no se exponen en la ventana del navegador. Para crear un documento head hace falta simplemente añadir los tags head en la parte superior de la plantilla directamente después del tag de apertura <html>

    <html>
    <head>
    </head>
    </html>

  • Elementos en la sección del documento head
    title – este elemento permite crear el título del documento. El título se expondrá en la línea del encabezado del navegador. El elemento title es obligatorio.
    meta – se utiliza para muchos fines, inclusive para indicar las palabras clave y descripciones, codificación de los caracteres y autor del documento. El elemento meta no es obligatorio y su utilización puede variarse según las tareas planteadas.
    script – este elemento permite insertar los scripts (secuencias de comandos) inmediatamente en el documento o, que es más importante, con su ayuda se indica el enlace al script necesario para utilizar. El elemento se utiliza cuando sea necesario.
    style – el elemento permite situar la información sobre el estilo inmediatamente en la página. El estilo la información del cual está situada de esta manera, se llama interpuesto. El elemento se utiliza cuando sea necesario.
    link – el elemento se utiliza con más frecuencia para realizar el enlace con la tabla de estilos exterior, aunque puede aplicarse para otros fines también.

  • Elemento body
    Ese es aquel lugar donde se realizan todas las acciones. Es el elemento donde se pondrá el contenido y se realizará el trazado de la página.
    El elemento body está en el elemento HTML, directamente después del elemento head.

    <html>
    <head>
    <title>Aquí se sitúa el texto del título </title>
    </head>
    <body>
    </body>
    </html>

    Al ver la página en el navegador la información situada dentro del elemento body, se expondrá en la ventana del navegador.


  • Comentarios del lenguaje HTML
    Los comentarios son un componente importante del lenguaje HTML. Ellos permiten provisionalmente ocultar el contenido o trazado, situar el contenido de los elementos de una manera especial para su compatibilidad inversa, determinar las partes dentro de los documentos y crear las explicaciones para otras personas que tal vez, vayan a trabajar con la página.

    El sisntaxis de un comentario del lenguaje HTML tiene el siguiente aspecto:
    <!-- -->

    Lo que hace falta ocultar, denominar o exponer en forma de una guía, se pone entre las partes de apertura y cierre del comentario.
    Ejemplo:

    Code
    <body>
    <!--

    Este contenido no se verá pues está entre los comentarios</p>
    -->

    Este contenido se verá pues está fuera del campo de los comentarios</p>
    </body>

    Se puede marcar las secciones del documento:

    Code
    <body>
    <!—Comienzo del contenido principal -->
    <!—Fin del contenido principal -->
    </body>

    He aquí un buen código de uCoz:

    Code
    <!--uCoz Counter-->
    <script type="text/javascript"><!--
    document.write('<a href="http://www.ucoz.com/main/?a=ustat;u=ucoz;d=0" target=_blank title="uCoz Counter"><img border="0" width="88" height="31" src="http://ucoz.ucoz.com/stat/'+Math.random()+'?03'+escape(document.referrer)+'"></a>');//--></script><noscript><a href="http://www.ucoz.com/main/?a=ustat;u=ucoz;d=0" target=_blank title="uCoz Counter"><img border="0" width="88" height="31" src="http://ucoz.ucoz.com/stat?02"></a></noscript>
    <!--/uCoz Counter-->

    Es muy cómodo utilizar los comentarios para las indicaciones.


  • Más concreto sobre el elemento title

    El elemento title es el único elemento obligatorio de la sección head. En la línea del título del navegador se expone cualquier texto que se contiene en este elemento, junto con el nombre del navegador que se añade al fin del texto.

    Además de que el elemento title siempre debe estar presente en el documento, la creación de un título bueno es una tarea primordial que tiene 3 fines:

  • Indicación del título de la página;
  • Prestación de una orientación a los usuarios, o sea, información a los usuarios acerca de dónde están ellos en el Internet y en la web;
  • Prestación de una información adicional sobre la página del sitio web.

    Creación de un título efectivo prevé el cumplimiento de todos estos puntos.

    He aquí el ejemplo de un título efectivo:

    Code
    <title> Foro de uCoz – Cuestiones acerca de los servicios – Cuestiones generales – Fundamentos de HTML </title>

Finalizando la parte principal, todo esto ha de verse de manera siguiente:

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Sitio web : situación en la web : título del tema</title>

<meta name="author" content="Aquí está tu nombre">

</head>

<body>

<!-- Área de contenido principal-->

</body>
</html>

Ahora quiero contar un poco sobre el texto.

Utilización correcta de los títulos.
Los títulos en los lenguajes HTML & XHTML son los tags. Existen 6 niveles de los títulos, a partir de <h1>....</h1> hasta <h6>....</h6>.
El título <h1></h1> se considera de máxima importancia, y h2 es subtítulo etc.
Ejemplo de la adición de un título:

Code
<h1>Ucoz Web-Services</h1>
<h2>Una nueva mirada a la creación de las webs</h2>

Adición de los párrafos.

Control de los párrafos se realiza con ayuda del elemento de párrafo,

</p>.

Code

<p>Sistema de gestión del sitio web
El único sistema de gestión del sitio web, que permite crear tanto una web estática como la dinámica.</p>

<p>Una nueva generación de servicios Web. Al fin y al cabo la creación de una web es un proceso fácil y fascinante...</p>

Tag de brecha de la línea
Este tag se utiliza para hacer una brecha de las líneas del párrafo. Es útil para el diseño, por ejemplo, el texto de un verso. En el lenguaje XHTML este tag se designa como <br />.

Code

<p>Por una mirada – un mundo,<br />
Por una sonrisa – un cielo.<br />
Por un beso – yo no sé,<br />
Que te diera por un beso.</p>

Lista ordenada.
La lista ordenada es una lista donde los elementos están situados en un orden determinado. Las listas ordenadas se llaman también listas numeradas.

Para crear una lista ordenada se requieren dos elementos:
<ol></ol> – (ordered list – lista ordenada)

  • </li> – (list item – elemento de la lista)

    Code
    <ol>
    <li>Regístrate en el sistema UCOZ</>
    <li>Estudia el sistema con toda la escrupulosisdad</li>
    <li>Crea tu sitio web</li>
    </ol>

    Lista desordenada.
    Aquí el orden de la situación no es tan importante. Generalmente tales listas se llaman listas con viñetas. Su estructura es casi igual, solamente en vez del elemento <ol></ol> se utiliza el elemento <ul></ul>:

    Code


    Lista de servicios en el sistema UCOZ</p>
    <ul>
    <li>Editor del sitio</li>
    <li>Libro de visitas</li>
    <li>Foro</li>
    <li>Catálogo de artículos</li>
    <li>Blog</li>
    <li>Álbumes de fotos</li>
    <li>Noticias del sitio</li>
    <li>Catálogo de archivos</li>
    <li>FAQ</li>
    <li>Encuestas</li>
    <li>Formularios de correo</li>
    </ul>

    Elemento TABLE

    La creación de las tablas se empieza desde el elemento table. Este element se considera no vacío, por eso se escribe con la aplicación de los tags de apertura y cierre:

    Code
    <table></table>

    Ancho de la tabla.

    El ancho de una tabla se configura de 2 métodos: en pixels y en %.
    El valor expuesto en pixels se considera fijado, pues el ancho de la tabla siempre corresponderá a este valor.

    Code
    <table width="250">
    </table>

    Mirar aquí para ver el ejemplo

    El valor expuesto en % se considera dinámico, pues la tabla ocupará el espacio expuesto en por ciento respecto el espacio libre de la pantalla del navegador.

    Code
    <table width="90%">
    </table>

    Mirar aquí para ver el ejemplo

    Límites de la tabla e intervalos.

    Lenguaje HTML permite activar la exposición (visualización) de los límites de las tablas:

    Code
    <table width="250" border="1">

    Por resultas del cumplimiento de esta línea alrededor de la tabla y todas sus líneas y celdas se expondrá un límite con el ancho de 1 pixel.

    Para añadir un intervalo entre las celdas se utiliza el atributo cellspacing.
    Para añadir un intervalo entre el contenido de una celda y la misma celda se utiliza el atributo cellpadding:

    Code
    <table width="90%" border="1" cellspacing="5" cellpadding="5">

    Mirar aquí para ver el ejemplo

    Adición de las líneas de la tabla.

    Se añade una línea en la tabla con ayuda del elemento tr:

    Code
    <table width="90%" border="1" cellspacing="10" cellpadding="10">
    <tr>
    Datos
    </tr>
    </table>

    Puede contener la tabla cualquier número de líneas que sea necesario.

    Adición de las celdas de la tabla.

    Las celdas forman las columnas verticales con ayuda de los tags <td></td>.
    Los elementos table, tr, td son los componentes obligatorios de cada tabla:

    Code
    <table width="90%" border="1" cellspacing="10" cellpadding="10">
    <tr>
    <td>Datos</td>
    <td>Datos</td>
    <td>Datos</td>
    </tr>
    </table>

    Mirar aquí para ver el ejemplo

    Adición de los títulos de las tablas.

    El título de la tabla quiere decir el título de una columna o una línea de la tabla.

    Code
    <th>
    </th>

    Para que los títulos describan las columnas que están bajo de éstos, sitúa todos los títulos en una línea, luego añade las columnas que estarán bajo los títulos en las líneas posteriores.

    Code
    <table width="90%" border="1" cellspacing="10" cellpadding="10">          
    <tr>          
    <th>Ubicación</th>          
    <th>Tiempo (atmosférico)</th>          
    <th>Huso horario</th>          
    </tr>
    <tr>
    <td>España, Маdrid</td>
    <td>Caliente</td>
    <td>Día es largo</td>
    </tr>
    </table>

    Mirar aquí para ver el ejemplo

    Los títulos también pueden utilizarse para describir los títulos de las líneas.

    Code
    <table width="90%" border="1" cellspacing="10" cellpadding="10">          
    <tr>          
    <th>Ubicación</th>          
    <td>España, Маdrid</td>          
    </tr>
    <tr>
    <th>Tiempo (atmosférico)</th>
    <td>Caliente</td>
    </tr>
    <tr>
    <th>Huso horario</th>
    <td>Día es largo</td>
    </tr>
    </table>

    Mirar aquí para ver el ejemplo

    Unificación de las líneas.

    En el proceso de crear tablas puede surgir la necesidad de extender una columna a costa de varias líneas, pa’ esto existe un atributo rowspan, cuyo valor determina el número de líneas.

    Code
    <table width="90%" border="1" cellspacing="10" cellpadding="10">          
    <tr>          
    <th rowspan="2">Título (unificadas 2 líneas)</th>          
    <td>Datos</td>
    <td>Datos</td>
    </tr>
    <tr>
    <td>Datos</td>
    <td>Datos</td>
    </tr>
    <tr>
    <th>Título (sin unificación)</th>
    <td>Datos</td>
    <td>Datos</td>
    </tr>
    </table>

    Mirar aquí para ver el ejemplo

    También es posible unir las líneas dentro de las celdas.

    Code
    <table width="90%" border="1" cellspacing="10" cellpadding="10">          
    <tr>          
    <th rowspan="2">Título (unificadas 2 líneas)</th>          
    <td rowspan="3">Datos (unificadas 3 líneas)</td>
    <td>Datos</td>
    </tr>
    <tr>
    <td>Datos</td>
    </tr>
    <tr>
    <th>Título (sin unificación)</th>
    <td>Datos</td>
    </tr>
    </table>

    Mirar aquí para ver el ejemplo

    Unificación de las columnas.

    Igualmente como la unificación de las líneas, se puede unir las columnas.

    Para esto aplicamos el atributo colspan.

    Code
    <table width="90%" border="1" cellspacing="10" cellpadding="10">          
    <tr>          
    <th colspan="2">Título (unificadas 2 líneas)</th>          
    <th>Título (sin unificación)</th>
    </tr>
    <tr>
    <td>Datos</td>
    <td>Datos</td>
    <td>Datos</td>
    </tr>
    <tr>
    <td>Datos</td>
    <td>Datos</td>
    <td>Datos</td>
    </tr>
    </table>

    Mirar aquí para ver el ejemplo

    De la misma manera se puede unir las celdas de la tabla.

    Code
    <table width="90%" border="1" cellspacing="10" cellpadding="10">          
    <tr>          
    <th colspan="2">Título (unificadas 2 columnas)</th>          
    <th>Título (sin unificación)</th>
    </tr>
    <tr>
    <td>Datos</td>
    <td>Datos</td>
    <td>Datos</td>
    </tr>
    <tr>
    <td colspan="3">Título (unificadas 3 columnas)</td>
    </tr>
    </table>

    Mirar aquí para ver el ejemplo

    ADVERTENCIA: tengan cuidado y estén atentos cuando utilizan los atributos colspan y rowspan, pues éstos les pueden embrollar. Recuerden que la unificación de las líneas significa unificación vertical, y la unificación de las columnas significa unificación horizontal.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 2 | 5:51 PM 2009-03-18
    ELEMENTOS EN HTML

    Elemento <IMG>

    Se utiliza para poner una imagen gráfica en el cuerpo del documento. Imagen gráfica quiere decir pequeños pictogramas, dibujos, objetos gráficos y mapas que ocupan mayor parte de la pantalla del navegador. Además, el <IMG> mantiene distintos atributos.
    Ejemplo: <IMG src="URL" atributos>


    • src

      Este atributo indica al archivo del gráfico dando su URL.
      Ejemplo: <img src="http://ucoz.com/img/image.jpg">

    • alt

      En algunas ocasiones, cuando el navegador no puede cargar un archivo con la imagen, con el fin de economizar el tiempo y moneda en la pantalla desactiva la subida de las imágenes, y en la pantalla se expone un texto alternativo, por ejemplo Aquí se expone el logotipo de la empresa .

      Ejemplo: <img src="http://ucoz.com/img/image.jpg" alt="Aquí se expone el logotipo de uCoz">

    • width

      Este atributo configura el ancho del área en pixels que se da en la pantalla para situar una imagen.

      Ejemplo: <img src="http://ucoz.com/img/image.jpg" alt="Aquí se expone el logotipo de uCoz" width="100">

    • height

      Este atributo configura el alto del área en pixels que se da en la pantalla para situar una imagen.

      Ejemplo: <img src="http://ucoz.com/img/image.jpg" alt="Aquí se expone el logotipo de uCoz" width="100" height="50">

    Introducción a los elementos y etiquetas de HTML

    ¿Qué es el HTML?
    HTML es un lenguaje de marcado, y es por mucho el lenguaje más comúnmente utilizado en la Web. Los lenguajes de marcado dan forma a un documento HTML. Determinan qué partes son encabezados, qué partes párrafos, qué partes listas, qué partes enlaces, etc. HTML significa Lenguaje de Marcas de Hipertexto (Hyper Text Markup Language). El HTML fue desarrollado por el científico Tim Berners-Lee en 1990.

    Un archivo HTML es un archivo de texto normal, salvo por el hecho de que contiene etiquetas de formato o marcaje. En HTML, usamos "etiquetas" (tags) para crear la estructura de una página web. Estas etiquetas indican al navegador cómo mostrar el texto y las imágenes en el documento. Los archivos HTML deben tener la extensión .htm o .html para que se interpreten correctamente por un navegador como Internet Explorer. Al ser un archivo de texto, se puede crear un archivo HTML utilizando cualquier editor de texto corriente, como el Bloc de notas, WordPad o MSWord, etc.

    Etiquetas lógicas en HTML (logical inline tags)
    Las etiquetas lógicas HTML están diseñadas para describir (en el explorador) el significado del texto que encierran. Esto tiene un impacto importante en los motores de búsqueda como Google (y en el SEO), puesto que los buscadores analizan esas "etiquetas" para intentar averiguar de qué trata una página web. Hay muchas etiquetas lógicas en HTML, entre otras:

    • <strong>: marca un texto en negrita, denota importancia.
    • <em>: destaca un texto – por lo general hace que los navegadores muestren el texto en cursiva.
    • <span>: una etiqueta de línea neutral. – Para darle un aspecto diferente se usa CSS.
    • <div>: un elemento de bloque neutral. – Para darle un aspecto diferente también se usa CSS.

    Aunque estas etiquetas lógicas tienen una forma predeterminada de mostrarse en los navegadores (como Internet Explorer o Firefox), se entiende que el CSS se debería utilizar para darles la apariencia deseada y crear así el diseño de una página web.

    Etiquetas de bloque vs etiquetas de línea
    En HTML, las etiquetas son "de línea" o "elementos de bloque".

    Elementos de bloque en HTML (block elements)
    Un elemento de bloque digamos que existe en su propia caja virtual y está siempre seguido por un salto de línea (un Enter). En otras palabras, un elemento en bloque rompe el flujo del texto para crear un espacio propio alrededor de sí mismo que ningún otro elemento puede invadir.

    Elementos de línea en HTML (inline elements)
    Las etiquetas de línea (o elementos de línea), en cambio, sí forman parte del "flujo" del texto en el que se insertan y no forman esa caja virtual de la que hablábamos, ni tienen saltos de línea. Los elementos de línea siguen el flujo normal del texto. Por ejemplo en el siguiente texto:

    Quote
    Este es un ejemplo de un elemento de línea en HTML.

    El texto en negrita está contenido dentro de un elemento de línea o inline tag, en este caso <strong>. Aquí el código:

    Quote
    <p>Este es un ejemplo de un <strong>elemento de línea</strong> en HTML.</p>

    Así, un ejemplo de una etiqueta de bloque es un <div> (caja) ó un <p> (párrafo) y un ejemplo de una etiqueta de línea es la <b> (negrita). Para entender este concepto lo más sencillo es probar lo que sucede en un texto cuando se introducen ambos, haz la prueba.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 3 | 6:19 PM 2009-05-14
    Conceptos básicos de HTML

    HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una página web. Para toda persona interesada en crear páginas web es importante conocer al menos nociones básicas de este lenguaje, de esta forma podemos comprender como están hechas las páginas web, desarrollar sitios con más flexibilidad y mejor construidos.
    Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas web, mejor dicho imprescindible.

    Etiquetas básicas
    • <HTML>: indica el comienzo del documento HTML.
    • <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
    • <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.
    • <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.
    • <A>: define los enlaces.
    • <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.
    • <P>: el texto dentro de esta etiqueta forma un párrafo.
    • <IMG>: imágenes.
    • <BR>: salto de línea.
    • <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas.
    • <B> y <STRONG>: se utilizan para resaltar el texto.
    • <U>: texto subrayado.
    • <I>: texto en cursiva.

    Ejemplo de página básica

    Quote
    <html> <head>

    <title>Título de la página</title>

    </head>

    <body>

    <h1>Encabezado de la página</h2>

    <h3>Encabezado de menor tamaño</h3>

    Este es el texto de un párrafo.</p>

    Este es el texto de otro párrafo. Dentro de este párrafo,

    pueden ir palabras en negrita, en cursiva o lo

    que quieras.</p>

    También podemos poner listas como la siguiente:</p>

    • Guión número uno.</li>

    • Guión número dos.</li>

    • Guión número tres.</li>

    </body>

    </html>

    Y para que lo entiendas mejor, una página básica con su correspondiente código HTML:

    Ejemplo de estructura de una página HTML

    Introducción
    Cada página HTML debe constar de dos secciones:

    1. El HEAD o cabecera, donde está la información sobre la página web, como el título, una breve descripción y algunas palabras clave. También puede contener información de estilos (CSS) y librerías JavaScript.
    2. El BODY o cuerpo, donde está todo el contenido que el usuario va a ver en su navegador.

    Las siguientes etiquetas HTML se utilizan para construir la estructura básica de una web:
    • <html> significa el inicio (y final) del documento.
    • <head> significa el inicio (y final) de la sección de cabecera del documento.
    • <title> es el título del documento. Esto se muestra por la mayoría de los navegadores como título de la ventana, cuando agregas una web a favoritos, etc. Los motores de búsqueda como Google suelen utilizarlo también como título en los resultados de búsqueda, por lo que es muy importante para la optimización de la página web y el SEO en general. Por todo esto, debes escoger muy bien el título de cada página de tu sitio web y procurar que todos sean únicos y descriptivos.
    • <body> significa el inicio (y final) del contenido visible del documento (lo que ve el usuario final).

    Estructura básica en HTML
    Un ejemplo completo de un documento HTML sería (ojo, sólo la estructura básica):

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

    <html>
    <head>
    <title>Título de ejemplo</title>
    </head>
    <body>
    <p>¡Esta es mi web!</p>
    </body>
    </html>

    Como hacer buenas páginas en HTML

    No existen directivas definitivas para un “buen” HTML. Sin embargo existen normas sobre el aspecto que debe tener un documento HTML. En todo caso es recomendable orientarse lo más posible a las normas del lenguaje según el Consorcio(W3C). Entretanto, el Consorcio(W3C) ha reconocido que su tarea no sólo es la elaboración de prescripciones técnicas, sino también la mediación a los usuarios “comunes” que no poseen un estudio informático acabado. En caso de que se ocupe de la creación de páginas web de una manera intensiva y duradera, le recomendamos visitar regularmente las páginas del Consorcio (W3C) y ver las novedades, tendencias y directivas.

    El Consorcio (W3C) ofrece además para autores de HTML un servicio, para examinar la exactitud sintáctica de archivos: el llamado validador. De esta forma puede examinar sus páginas en busca de errores para corregirlos.

    Indicaciones generales para hacer buen HTML

    No codificar para un determinado navegador
    En caso de que desee publicar en Internet, entonces debe probar como se ven los archivos en los diferentes navegadores. Lo mejor es usar los productos más difundidos como Firefox e Internet Explorer, siendo muy recomendable ver las páginas tanto en varias versiones de los navegadores, como también en otros navegadores como Opera. Si tiene la posibilidad de hacer las pruebas en varios entornos (MS-Windows, Macintosh, Linux etc.), entonces no deje de hacerlo.

    Nadie le puede prohibir que escriba sus archivos HTML para un navegador determinado, por ejemplo Netscape (como muchas personas lo hacen). En tal caso es recomendable informar en la página de entrada que las páginas han sido desarrolladas para un determinado navegador. Nosotros aconsejamos buscar un compromiso para que las páginas puedan ser visualizadas por todos los navegadores.

    No codificar para determinadas resoluciones de pantalla
    El forzamiento de anchuras fijas con el uso de tablas anidadas y “píxeles invisibles” se ha extendido tanto en la web, que muchos autores ya no saben que HTML simple general un texto corrido normal, que se adapta al tamaño de la ventana del navegador. No tiene sentido tampoco despreciar completamente el forzamiento de anchuras mínimas. Tablas con varias columnas y contenido correspondiente requieren de una cierta anchura y HTML tampoco es WML (un lenguaje especial para la creación de páginas para teléfonos móvil). Pero si tiene que decidir si sus páginas deben ser optimizadas para una resolución de pantalla de 1024 o de 800 píxeles- entonces se enfrenta a una mala decisión. Pues muchos usuarios navegan con varias instancias de navegador y abren enlaces a otras páginas muchas veces en otras ventanas del navegador. Esas ventanas a menudo no son visualizadas en el modo de pantalla entera o máxima. Existen también muchos programas para usuarios que se toman en principio una parte de la pantalla y siempre son visualizados – por ejemplo programas de mensajes instantáneos como ICQ. Todos estos usuarios no le dan el placer de agrandar la ventana del navegador solamente para ver su página. No se rompa la cabeza demasiado por los valores medios que hay me tomar para la dimensión de las pantallas. Un par de cientos de píxeles (o sea una indicación muy indeterminada) se pueden suponer para la anchura, pero eso es todo.

    Utilice indicaciones de altura y anchura en porcentajes, para las tablas y marcos. Indicaciones absolutas de píxeles tienen un sentido allí, en donde la primera columna de una tabla invisible se debe encontrar sobre una imagen de fondo coloreada partida en dos. Por lo demás debe abandonar la idea de que por ejemplo una imagen o un párrafo deben comenzar exactamente 10,8 cm del borde izquierdo de cada navegador. Si la página se ve bien en su navegador, eso no significa que en los navegadores de los usuarios también se vea bien, en algunos casos es de esperar que la visualización sea realmente mala.

    No utilizar los elementos HTML para otros fines
    No es recomendable utilizar los elementos lógico-semánticos de HTML, para lograr determinados efectos de formato. Algunas personas utilizan por ejemplo el elemento blockquote para lograr sangrías de párrafos, y esto tan sólo porque la mayoría de los navegadores interpretan el texto encerrado en <blockquote> … </blockquote> como un párrafo con sangría. El elemento blockquote existe sin embargo para especificar citas y debe ser usado sólo para eso.

    Pero aun mucho peor es la utilización incorrecta de cabeceras. Las cabeceras no existen para hacer que los textos sean más grande y estén en negrita, sino para marcar las relaciones jerárquicas lógicas entre los diferente párrafos. Si desea hacer formatos sobresalientes, utilice para ello las hojas de estilo en cascada.

    Utilizar textos de enlaces honestos y explícitos
    Generalmente es válido lo siguiente: el fin de un enlace debe cumplir lo que promete. Eso significa que el texto del enlace no debe prometer mucho, ni tampoco muy poco. Si por ejemplo, se ofrece información sobre un programa determinado, sin ofrecer bajarlo, entonces no sería bueno poner un un enlace sugiriendo que el producto puede ser bajado en la página.

    Enlaces pueden ser puestos en cualquier lugar del texto. Pero si lee un texto, en el cual cada segunda palabra es un enlace, entonces se podrá dar cuenta que eso molesta definitivamente la lectura. El motivo de esto, es que uno siempre pone atención a los enlaces, y eso nos molesta al leer. Por esta razón es de suma importancia que los enlaces en los textos no se conviertan en adivinanzas, sino al contrario, al leerlos, el usuario debe darse una idea de lo que se esconde detrás de ellos.

    Utilice siempre un enlace dentro del texto, siempre y cuando el texto del enlace sea razonable. Formule oraciones, en donde aparezca el texto del enlace, de tal manera que se pueda comprender de lo que se trata.

    No escriba por ejemplo:

    Quote
    Más información aquí.

    sino:

    Quote
    Información adicional sobre el tema.

    Utilizar imágenes correctamente
    A menos que usted haya decidido publicar una exposición de arte en la red, es aconsejable mantener las imágenes web pequeñas. Tenga en cuenta al crear las imágenes, que muchos usuarios tienen una conexión a Internet que depende del volumen de transferencia de datos, o sea que ellos pagan por la cantidad de datos que son transferidos a sus ordenadores. Aunque la mayoría de los navegadores poseen una función que permite no cargar los gráficos, muchos usuarios no la utilizan y eso no significa que están dispuestos a recibir gráficos de un tamaño mayor a 1MB.

    Por tal razón le aconsejamos que utilice imágenes web pequeñas bien posicionadas. Muchas veces basta tener imágenes con 16 colores en lugar de 256 o hasta de 16,7 millones. Esto hace que las imágenes sean más pequeñas y carguen más rápido las páginas web.

    Por otro lado no hay que prescindir de gráficos. Leer sólo texto en la pantalla cansa mucho más que por ejemplo en un libro. Por tal razón es recomendable estructurar los textos largos. La utilización de imágenes también forma parte de ello.

    Las imágenes pequeñas en forma de iconos son ideales. Ellos se cargan bien rápido y se pueden utilizar varias veces en un mismo archivo HTML.
    Gráficos pequeños pueden también tomar determinadas funciones de identidad corporativa, o funciones de orientación. La ventaja de usar estos gráficos en varias lugares, es que la mayoría de los navegadores los cargan tan sólo una vez y luego los mantienen en la memoria.

    (Tomado de http://lawebera.es )
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    sorin
    Mensajes: 442
    Reputación: 6
    Mensaje Nº 4 | 7:51 PM 2009-05-14
    Un verdadero curso sobre HTML.
    En mi opinion todo lo que se dedica a estos tipos de trabajo, no importa si es SEO, diseño Web o otras cosas que tiene que ver con la Web en general, deberia tener concimientos sobre HTML.
    Posicionamiento Web
    Directorio
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 5 | 2:30 PM 2009-05-21
    CÓMO CREAR ENLACES HIPERTEXTO

    Para ser capaces de crear una página Web bastante completa tenemos que aprender a crear enlaces hipertexto. Con ellos se pueden activar frases o palabras de la página para que al pulsar sobre ellas se salte a cualquier otra página de Internet que decidamos.

    Estos enlaces hipertexto (en inglés links) no son más que unas zonas (habitualmente palabras o frases) especiales de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas. El concepto del hipertexto no es nuevo, la mayoría de los lectores lo habrán usado ya en la ayuda de Windows™ o en otros muchos sistemas, lo realmente novedoso que ofrecen estos enlaces en el WWW es la posibilidad de pulsar y navegar hasta páginas que se encuentren en el otro extremo de la tierra. El navegante puede moverse de España a Japón con una única pulsación sobre el texto adecuado. En seguida se verá lo sencillo que es incluir esta impresionante tecnología en una página web.

    Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos:

    1. Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web (web site). Todas estas páginas estarán (generalmente) en el mismo servidor WWW, y por tanto estarán también en el mismo ordenador. Por esta razón sólo será necesario indicar en nuestro código el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentra. Un ejemplo dirección de un enlace interno es:

    Quote
    /hobbies/index.html

    2. Los enlaces externos permiten saltar desde una página hasta otra puede estar en cualquier otro lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la dirección completa de Internet (la URL) de la página que queremos enlazar. Por ejemplo:

    Quote
    http://www.otroservidor.com/hobbies/index.html

    Por último, cabe resaltar que aunque la mayoría de las veces los links se usan para enlazar una página con otras también pueden usarse con imágenes, sonido, vídeo y prácticamente cualquier tipo de fichero.

    La etiqueta <a>… </a>
    Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas enlaces hipertexto. Su atributo ‘href‘ permite indicar cual es la página a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él. La estructura de un link es:

    Quote
    <a href="dirección_URL">Hipertexto</a>

    Los navegadores gráficos como Netscape Navigator y Microsoft Internet Explorer resaltan este texto mostrándolo de un color diferente y subrayándolo, además el cursor cambiará al situarlo sobre el texto. Los navegadores que funcionan en modo texto como Lynx resaltan los enlaces hipertexto cambiando el color del texto y de su fondo.

    Veamos un ejemplo sencillo del uso de enlaces. Se ha creado un sitio web personal con 2 páginas. La página principal se encuentra en el archivo index.html y se quiere que en ella haya un enlace a otra página donde se han escrito sobre los hobbies del creador del sitio web y que se encuentra en el archivo hobbies.html. El enlace podría ser algo así:

    Quote
    Puedes conocer mis <a href="hobbies.html">hobbies</a>

    Si no funciona un link conviene comprobar la sintaxis del código HTML. Un error común es no cerrar las comillas que tras poner la dirección de la página enlazada. Si se comete este error, además de no funcionar el enlace, es posible que desaparezcan otros elementos de la página al visualizarla.

    Páginas en otros directorios
    Si la página a la que queremos crear el enlace no se encuentra en el mismo directorio que la actual es necesario indicar el directorio (o ruta de directorios, path) donde está. Si en el ejemplo anterior la página hobbies.html estuviese en el directorio varios el ejemplo anterior debería sustituirse por:

    Quote
    Puedes conocer mis <a href="varios/hobbies.html">hobbies</a>

    vemos, para separar el nombre del directorio del nombre del archivo se usa el símbolo “/”. También se usaría, si fuese necesario, para separar varios directorios.

    Enlaces externos
    La verdadera fuerza de Internet estriba en la posibilidad de navegar con una sola pulsación por información que se encuentre en cualquier lugar del mundo. Para convertir esto en realidad existen los enlaces externos.

    Algunos diseñadores web recomiendan que no se creen enlaces externos desde la página principal o home page de nuestro sitio Web para no incitar al visitante a que se vaya de la página.

    La creación de uno de estos enlaces es muy similar a la creación de los enlaces locales. El único cambio radica en que el valor dado al atributo ‘href’ es la dirección completa de Internet, sea otra página web, una imagen o cualquier otro archivo. Por ejemplo, para incluir un enlace desde cualquier página a la de DMOZ (Open Directory Project). Para ello puede emplearse:

    Quote
    Enlace a <a href="http://www.dmoz.org">DMOZ</a>

    Así de fácil. Para referirse a un archivo específico del servidor de DMOZ hay que especificar la ruta de directorios y el nombre del archivo. Un ejemplo de uso podría consistir en construir un enlace a la sección sobre Internet de este buscador. Para ello hay que incluir el siguiente link:

    Quote
    <a href="http://www.dmoz.org/Computers/">Computers</a>

    Un aspecto destacable de este ejemplo es que se ha especificado la ruta de directorios pero no el nombre del archivo. Con ello se consigue acceder al archivo por defecto de ese directorio. Todos los servidores web tienen un archivo por defecto de manera que si no se introduce el nombre ninguno ese archivo será el mostrado. En la mayoría de servidores el nombre elegido es index.html por lo que la dirección usada antes sería equivalente a:

    Quote
    http://www.yahoo.com/computers/internet/index.html

    (Tomado de http://lawebera.es )
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 6 | 4:45 PM 2009-05-25
    CSS para principiantes

    Para este y tutorial sólo necesitas un navegador y un editor de texto. Si el editor tiene resaltado de sintaxis CSS pues mucho mejor. Si usted está acostumbrado a usar Dreamweaver déjelo un momento aparte pues nada se compara a controlar el código de manera directa.

    Cascading Styling Sheets (Hojas de Estilos en Cascada) es uno de los grandes avances en la creación de páginas y programas Web. Uno de los aspectos más importantes de CSS es que no sólo maneja los estilos y tipografía sino también la distribución espacial del contenido de las páginas. Si durante años ha usado HTML y el tag table y siente que no hay necesidad de cambiar debo decirle que está en un error. En cuanto pruebe la potencia y sencillez de CSS se convertirá en un entusiasta. Además, las páginas hechas en CSS son más rápidas y ligeras, y se colocan mejor en los buscadores pues a Google y a Yahoo! les gusta lo hecho con CSS. Además, ahorrará muchas horas de trabajo, su jefe creerá que usted tardo días para cambiar el diseño de un sitio pero en realidad solo fue necesario hacer algunos pases mágicos por la hoja de estilos a la hora de la comida.

    Lo primero en CSS
    Lo primero que debe tener en claro es que el tag font está terminantemente prohibido en CSS. Esto es así porque en CSS todo se maneja a través de “clases” o estilos. Existen algunas clases predefinidas por el navegador que usted conoce y ha usado cientos de veces: H1, H2, P, HR, TR, etcétera, estas clases son las que hemos usado siempre. La magia de CSS radica en que podemos crear nuevas clases y modificar las existentes. Los primero es crear la página primer-css.html.

    Quote
    <html><head>

    <title> :: Mi primer CSS :: </title>

    <meta http-equiv="Content-Style-Type" content="text/css" />

    <link rel="stylesheet" href="estilos.css" type="text/css" />

    </head>

    <body>

    <p><span class="slogan">Parrafo sin acentos</span></p>

    <p><span class="titulo">Otro parrafo sin acentos</span></p>

    <p><span class="titulo">Este es un

    <span class="slogan">tercer parrafo</span>

    sin acentos</span></p>

    <h1>Este es el tag h1</h1>

    </body>

    </html>

    Note que después del tag </title> están las indicaciones para que la página HTML “jale” el diseño CSS. A continuación, cree un archivo en blanco y guárdelo en el mismo directorio con el nombre estilos.css.

    Comentar la hoja de estilos
    Es una buena costumbre que las clases que se crean en los archivos CSS estén comentadas para saber en que y en donde las usamos, los comentarios se colocan entre un /* y un */. Las primeras clases (o estilos) que crearemos serán las clases “slogan” y “titulo”, que se usan para darle diseño al slogan y al titulo de la página, coloque este código en el archivo estilos.css.

    Quote
    /* Clase para el slogan */

    .slogan {

    color: #097a19;

    font-size: 14pt;

    font-weight: bold;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    text-align: center;

    background-color: #b4b4b4;

    }

    /* Clase para los titulos */

    .titulo {

    color: #d3a900;

    font-size: 11pt;

    font-family: Arial, sans-serif;

    text-align: left;

    }

    /* Mi versión de h1 */

    h1 {

    color: #dd1010;

    font-size: 18pt;

    font-family: Arial, sans-serif;

    text-align: center;

    }

    Las clases que uno crea comienzan con un punto (.) mientras las predefinidas (como h1) no lo tienen. Note además que el código CSS se escribe con minúscula pues así lo exige el estándar.

    El tag SPAN sirve para marcar bloques de texto. Un bloque span, como vemos en el tercer párrafo, puede colocarse dentro de otro bloque SPAN.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 7 | 5:24 PM 2009-06-05
    Gestión de Contenidos en Portales Web
    1-ra parte

    Información
    Uno de los objetivos principales de los portales web es distribuir información, publicarla, ponerla a disposición de los internautas interesados en ella.
    En muchos portales parte de esta información es generada por personas, es decir, escrita e hilada por gente.

    Def. Portal web: Pero, ¿qué es un Portal Internet? Podemos entenderlo como una aplicación web que gestiona de forma uniforme y centralizada, contenidos provenientes de diversas fuentes, implementa mecanismos de navegación sobre los contenidos, integra aplicaciones e incluye mecanismos de colaboración para el conjunto de usuarios (comunidad) a los que sirve de marco de trabajo. Todo esto en un entorno web.

    Al principio de la era internet era muy frecuente que los propios gestores de los portales (los famosos WebMasters) fuesen los que las alimentaban de información.

    Conforme la red ha ido evolucionando, ésta se ha convertido en un elemento cada vez más importante para todo tipo de organizaciones (algo estratégico para muchísimas de ellas), y el esquema del WebMaster-EncargadodeContenidos ha ido dejando de ser útil, o más bien se demostró que no era un mecanismo adecuado para la gestión de contenidos, pero ¿por qué?

    Muy sencillo, la cantidad de datos a publicar y gestionar ha crecido tanto (se habla de la explosión de los datos) que el anterior modelo se convirtió en un cuello de botella, y no sólo por la velocidad de incorporación de información a los portales sino porque los datos empezaban a requerir cada vez más atención (mantenimiento).

    ¿La solución a esto? Distribuir la redacción o gestión de contenidos entre varias personas y habilitar mecanismos para que éstos puedan incluirlos en el portal mediante Flujos de Publicación.

    Los portales web han ido evolucionando no sólo por la cantidad de datos que contienen. Poco a poco se ha pasado de modelos basados en páginas estáticas a aplicaciones web de alta complejidad que gestionan contenidos en múltiples idiomas, integran aplicaciones de colaboración entre los usuarios, proporcionan contenidos en diversos formatos para diferentes dispositivos, y un largo etcétera. Todos estos requisitos nos llevan a que los contenidos que gestiona un portal deban de ir acompañados de una gran cantidad de información de control que nos ayude a gestionarla de forma correcta. Esto lo veremos con más detenimiento en la sección de Caracteres de Control.

    Flujos de publicación
    Como ya he comentado, actualmente es frecuente que los contenidos publicados en cualquier portal hayan sido redactados, revisados y publicados por varias personas.

    De hecho un típico esquema para este trabajo es el que se da en la llamada ‘publicación en dos pasos’ en los que tenemos varios perfiles de usuarios:
    • Redactores. Son usuarios que se encargan de redactar contenidos, incluyendo no sólo fuentes escritos, sino añadiendo imágenes, archivos adjuntos para ser descargados, etc.

    • Publicadores o Supervisores. Es frecuente en muchos portales que antes de publicar contenidos en un portal, éstos sean revisados por personas de cierta responsabilidad en la organización que se encargan de revisar que la información a publicar es correcta, tanto en contenido como en forma, y que es adecuada para la organización.

    Esto nos lleva a necesitar entornos de gestión de contenidos, de los que se muestran algunas pantallas esquemáticas a continuación, en las que se gestionan los flujos de publicación: redactar, guardar lo redactado para ir seguir trabajando en ello más adelante, finalizar la redacción de un documento y solicitar su publicación, revisar, volver a redactar aquellos contenidos que no hayan sido aprobados, publicar, etc.

    Pongamos un ejemplo, en un portal con este mecanismo ya no es el administrador del portal el que se encarga de añadir contenidos, sino que son los redactores los que asumen ese trabajo que es completado mediante el visto bueno de los Supervisores, que son en definitiva los que publican la información para que sea accesible al usuario.

    Caracteres de Control
    Con la gestión de flujos de publicación podemos ver claramente que por cada elemento dinámico, digamos una noticia, tendremos que guardar información adicional sobre el estado de publicación en el que se encuentra, es decir asociarle características externas a dicho elemento (digo externas, ya que no es precisamente información que podamos considerar como parte del contenido).

    En cualquier portal de mediana complejidad existe toda una serie de caracteres externos que nos ayudan a gestionar los contenidos de una forma eficaz, como por ejemplo:

    • Idioma en el que se encuentra dicho contenido.

    • Fecha de caducidad. Una forma fácil de gestionar de forma automática la información que ‘caduca’ es decir aquello que al llegar a cierta fecha deja de tener validez o interés para el usuario consiste en asignar a cada contenido que sea caducable (por ejemplo la información de un evento) una fecha de caducidad, de tal forma que el portal no muestre al usuario ningún contenido cuya fecha de caducidad sea menor o igual a la actual. Los contenidos caducables podrán por tanto estar ‘Caducados’ o ‘NoCaducados’.

    • Temáticas o áreas asociadas al mismo. Todos los portales suelen categorizar su información, siendo este un mecanismo que ayuda a presentar al usuario la información que le es más pertinente. Un ejemplo para las normativas: locales, autonómicas, nacionales, europeas e internacionales.
    • Y el ya susodicho Estado de Publicación: ‘En Redacción’, ‘Redactado’, ‘Aprobado’, ‘Rechazado’, ‘Descatalogado’, etc.

    Es más, estos caracteres de control, pueden aplicarse a cualquier contenido de un portal.

    Como hemos modelado en el diagrama anterior, podemos diferenciar básicamente entre dos tipos de contenidos:
    • Contenidos estructurados. Son aquellos que tienen un conjunto de campos bien definidos, y que por lo general son gestionados en bases de datos. Por ejemplo una noticia, que tendrá titular, autor, fecha, contenido, etc.
    • Contenidos no estructurados. Es aquella información que tiene una difícil organización en campos, es decir, a la que es difícil asociarle un tipo. Suelen grabarse directamente en páginas estáticas. Por ejemplo: Una página de sugerencias de un portal. Tendrá un párrafo introductorio en el que la organización explique para qué pone a disposición de los clientes dicho servicio, así mismo por lo general adjuntará un formulario para que pueda ser rellenado y enviado por los usuarios, así como otros medios para ponerse en contacto con la organización, como teléfonos, e-mails, etc.

    Bueno, pues debemos también tener claro que no sólo los contenidos estructurados tienen asociados caracteres de Control, los contenidos no estructurados también los pueden tener. Esta cuestión la analizaremos en el siguiente punto.

    Espacios de Contenidos
    Gestionar portales web con miles de recursos, tanto en páginas como en registros de bases de datos, no es una labor fácil.

    Conceptualmente se llega a un punto en el que es necesario fragmentar ese todo, y hacerlo más manejable.

    En el contexto de la base de datos, ya contamos con diversos mecanismos para realizar esta tarea de forma natural. Lo habitual es tener varias tablas de base de datos y usar una (o más) para cada tipo de información. Sin embargo, ¿qué podemos hacer con los contenidos estáticos y la relación entre estos y los dinámicos?

    El concepto que podemos desarrollar aquí es el de ‘Espacio de Contenidos’ entendiéndolo como: un conjunto de contenidos (por simplificar sólo consideremos las páginas estáticas) que comparten características comunes como el rol que desempeñan en el portal, su temática, idioma, configuración visual, ubicación física, etc.

    Los Espacios de Contenidos nos facilitan dos cosas:
    • Simplifican conceptualmente la gestión de información estática, ya que pasamos de tener miles de páginas, a unos cuantos de espacios de contenidos.
    • Nos permiten gestionar información de control para estos contenidos de una forma sencilla, ya que no tenemos que gestionar esta información para cada uno de los ficheros por separado. De esta forma pasamos a tener información de control respecto a los contenidos estáticos y por tanto podemos introducirlos en toda la dinámica de lógica y proceso del portal (característica que se puede aprovechar sobre todo en arquitecturas web MVC).

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 8 | 5:39 PM 2009-06-05
    Gestión de Contenidos, un enfoque independiente
    2-da parte

    Definición de Gestión de Contenidos
    Cuando se habla de gestión de contenidos, existe una gran confusión porque el término es bastante ambiguo y "todo cabe" en esta definición.

    En el siguiente artículo os voy a comentar en qué creo que consiste la gestión de contenidos y cómo las empresas se pueden favorecer de ello, comentando también los que considero "grandes errores de las empresas, en la implantación de soluciones de gestión de contenidos".

    Definir gestión de contenidos, puede ser un poco pretencioso por mi parte pero vamos a ver si entre todos los conseguimos:

    "Todos los procedimientos y procesos involucrados en el agregación, transformación, catalogación, agrupación, autorización, presentación y distribución de información útil para nuestros propósitos"

    Bueno, como podemos observar dentro de esta definición todo cabe y cuando vemos las distintas herramientas, cada una de ellas se puede centrar en distintas problemáticas:

    • Gestión documental: Más orientado a la catalogación y recuperación de contenidos grandes (documentos)
    • Gestores de presentación Web/Herramientas de Portal: Más orientado a la construcción rápida de Sites.
    • Gestores de conocimiento: Más orientado a la estructuración y correlación de datos.
    • Herramientas de composición de publicaciones en papel (que intentar adaptar sus aplicaciones para crear con facilidad la versión Web)
    • Herramientas de gestión departamental: Orientado al trabajo en equipo
    Y seguro que encontramos numerosas catalogaciones más.

    Nosotros vamos a analizar, de un modo simplista, cuales son los procesos asociados a esta tecnología. Reduciremos a tres, las capacidades de los sistemas de gestión de contenidos:

    • Adquisición de Contenidos
    • Manipulación de Contenidos
    • Entrega de Contenidos

    El elemento vital y núcleo del sistema será el almacén o repositorio de contenidos (considerando, a partir de ahora, un contenido como cualquier información que queremos almacenar de modo estructurado), donde la información se encuentra estructurada de tal modo que permita ser manipulada y explotada con facilidad. Este repositorio será normalmente una base de datos y tal como evoluciona la tecnología, lo ideal sería una base de datos nativa XML.

    Normalmente, un problema complejo es la suma de muchos problemas simples. Vamos a analizar cada problema por separado y tratar a su vez de sub-dividirlo.

    Adquisición de Contenidos
    Un repositorio de contenidos tiene que tener la capacidad de albergar las estructuras de datos necesarias para tratar nuestra problemática concreta.
    Normalmente, no habrá definido ningún tipo de estructura pero sí nos permitirá hacerlo con facilidad. Los arquitectos de información deberán analizar las estructuras de datos y procesos de mi sistema y mapearlas (a partir de la obtención de factores comunes) a las herramientas.

    Es posible que algunas herramientas ya integren ciertas estructuras que son bastante comunes en cualquier sistema: Noticias, encuestas, productos, etc.. pero en este caso, si no entendemos bien el concepto, es posible que caigamos en un error bastante común y es decir: "como no nos gusta cómo realizamos las tareas hasta ahora, compramos una herramienta y nos adaptamos a ella". NO, "las herramientas deben permitir optimizar los procesos de negocio y adaptarse a ellos y no al revés", nuestra empresa no debería adaptarse a una herramienta de propósito general (aunque sí podría ayudarnos a organizar ideas). Este error se comete con mucha frecuencia con las herramientas de CRM.

    Es evidente que posteriormente hay que alimentar de datos estas estructuras. Ya podemos hablar entonces de:
    • Metadatos: Definición de las estructuras de datos (y otros elementos esenciales para manipularlos)
    • Datos: Contenidos en sí.

    Agregación
    Debemos tener capacidad de aprovisionar nuestro sistema con contenidos:
    • De propia creación: A través de autores
    • De otras fuentes externas.

    Si los contenidos son propios, debemos tener en cuenta algunos temas:
    • Quién puede introducirlos: Autentificación
    • Qué revisiones requiere:
    o Morfología (sintaxis, tamaño, formato)
    o Seguridad de acceso y protección del propio sistema (ataques directos por entrada de datos).

    Si los contenidos son de terceros, debemos tener en cuenta:
    • Origen de los datos (contemplar copyright)
    o Fuentes públicas o privadas.
    • Procedimiento de extracción
    o Agregación de sistemas en vivo bajo demanda (ir a por los datos)
    o Alimentación periódica de servicios contratados (recepción de datos)
    • Volumen

    En cualquiera de los casos, tenemos que conocer el ciclo de vida de la información:
    • Categorización inicial, posiblemente realizada por la fuente de datos para su manipulación interna.
    • Definición del público objetivo (por edad, por privilegios dentro del sistema, etc..)

    Algunos Ejemplos:

    • Web financiero de información sobre cotizaciones: Sistemas centrados en la adquisición de contenidos de recepción contratada:
    En este caso, la presentación está completamente vinculada con la adquisición de datos. Ahora bien ¿y si lo que nos interesa es fidelizar a nuestros clientes ofreciéndoles personalización? Ahora el problema no es tan sencillo.... requerimos que la información esté categorizada pero no como la obtuvimos de la fuente, sino de tal modo que sea explotable por nuestro sistema de un modo integral. Necesitamos entonces mapear las categorización de la fuente a la categorización de nuestro sistema en particular.

    • Agregador de ofertas: Sistema centrado en la adquisición de datos de distintas fuentes en función de peticiones:
    Es posible que nos interese construir un sistema que proporcione al usuario la capacidad de, bajo algunos parámetros, localizarle en otros Webs la mejor oferta sobre un producto concreto. Aquí el problema es que la información posee estructuras distintas en origen (html con distintos formatos), que pueden cambiar sin previo aviso y que posiblemente el contenido no tenga el mismo nivel de detalle en cada fuente.

    Transformación
    Cuando adquirimos los contenidos, normalmente no tienen la estructura ni los atributos obligatorios para el correcto funcionamiento del sistema. Es por lo tanto necesario transformar los datos del modo más eficiente posible.

    Si los contenidos son de propia creación, esto puede no ser un problema cuando el usuario introduce los datos por el propio sistema pero ¿y si nos envía un documento Excel, Word, etc.? Es evidente que hay que extraer la información y mapearla a nuestras estructuras nativas. Realizar esta labor de un modo manual, tendría un coste operativo insostenible.

    Si los contenidos son adquiridos de sistemas externos, por ejemplo, otros Webs (pensad en un agregador financiero donde se puede consultar nuestras cuentas en distintos bancos, centralizadamente desde un soloWeb) cualquier cambio en la estructura de origen debe ser identificado y adaptado, independientemente de tener que adaptar las estructuras de información de las distintas fuentes. La programación manual de cada transformación obligará a tener un equipo sólo dedicado a esta tarea.

    Existen productos que gráficamente nos permiten conectarnos a distintos sistemas y programar las transformaciones y validaciones básicas (y a veces, no tan básicas).

    Manipulación de Contenidos
    Hasta ahora nos hemos encargado de acercar los contenidos a nuestro repositorio y adaptar su forma. Cuando adquirimos datos, por sí mismos es posible que no nos valgan para nada, también hay que adaptar el contenido.

    Imaginad que adquirimos de proveedores de noticias los textos (en chino), sólo los textos, pero somos famosos por tener el Web con las noticias y fotos más impactantes....

    Obviamente necesitamos:
    • Traducir los contenidos (a nuestro lenguaje) sin perder el original.
    • Certificar la traducción (Workflow opcional)
    • Asociarle otros contenido (que hay que localizar por sus categorías originales o las de nuestro sistema)
    • Categorizar el nuevo contenido que hemos creado (como suma de otros) Definir quién es el público objetivo de este nuevo contenido.

    Pero también podemos poner otro escenario, imaginad que el CEO de una empresa quiere introducir la nota de prensa que posteriormente se mostrará por distintos canales cuando se hagan públicos los resultados de la empresa. En este caso, necesitamos algunas cosas más:
    • Restringir el acceso de esa información (nivel de acceso)
    • Validar tanto la forma como el contenido (Workflow obligatorio)
    • Planificar su liberación (coordinado con otros eventos o por una fecha)

    Resumiendo necesitamos ciertas capacidades:
    • Seguridad
    • Workflow
    • Categorización (o re-categorización)
    • Planificadores de actividades

    Tened en cuenta que hasta ahora no hemos hablado absolutamente nada de presentación de la información. La tratamos como algo abstracto. Será la base de nuestros sistemas de presentación.

    Aquí es donde difieren las distintas herramientas y donde se producen las confusiones sobre las capacidades de los gestores de contenidos.

    Entrega
    Cuando utilizamos un gestor de contenidos nuestros objetivos pueden estar centrados en intereses distintos:
    • Construir un Web rápidamente y a bajo coste: Orientación a presentación (ejemplo: Web de tecnología)

    Seleccionar los contenidos de un modo sencillo ( o introducirlos directamente) y proporcionar servicios básicos (chats, foros, encuestas)
    • Controlar la información publicada: Orientación a contenido (ejemplo: Web Institucional)

    Nos interesa menos la capacidad de presentar contenidos y más la de estar seguro que ha seguido un Workflow
    • Publicar contenidos en distintos Web de modo simultáneo: Orientado a difusión (ejemplo: Gran empresa)
    Nos interesa la capacidad de difundir en muchos sites una misma información. Piense en empresa muy grande (o grupo de empresas) que tiene muchas divisiones (donde cada una tiene su propia Web) y quiere que cierta información esté presente en todos.

    • Fomentar el consumo de productos (Compra): Orientado a fidelización (ejemplo: Web de venta directa)
    Nos interesa capturar los hábitos del usuario en nuestro sistema y facilitarle el consumo. La personalización será uno de los puntos claves del sistema (juntos a una correcta categorización e indexación de contenidos)

    • Reaprovechar los contenidos en múltiples canales: Orientado a reutilización (ejemplo: Periódico con versión electrónica y el papel)

    Nos interesa que los mismos contenidos sean publicados en distintos medios, con el mínimo esfuerzo.

    Bueno, está claro que no todos los sistemas son iguales por los que tampoco podemos pretender que todas las herramientas puedan ser igual de provechosas para todos los clientes.

    Cualquiera que sea nuestro objetivo, siempre deberíamos poder controlar:
    • Workflow de publicación multi-rol.
    • Qué publicamos en un momento determinado (la foto del sistema en un momento determinado).
    • Debemos tener capacidad de encontrar los contenidos publicados y proporcionar esta capacidad a nuestros usuarios (motor de búsqueda).
    • Capacidad de integración con sistemas transaccionales.
    • Previsualización interna de contenidos anterior a su publicación a público en general.
    • Existencia de enlaces rotos.

    Tampoco debemos olvidar que hay veces que los contenidos que poseemos no queremos entregarlos cuando el cliente accede al sistema sino que queremos realizar una entrega pro-activa, es decir, le enviamos contenidos de reciente publicación. Normalmente se habla de entrega multi-canal: Wap, e-mail, sms, etc

    Presentación
    Los sistemas de presentación deben ser capaces de recuperar los contenidos y presentarlos de un modo eficiente (rápido y claro). Un mismo contenido debe tener la capacidad de ser mostrado de distintos modos por lo que se habla de plantillas de presentación.

    Los sistemas de presentación suelen funcionar del siguiente modo:
    • Un Web es un conjunto de páginas organizadas jerárquicamente.
    • Una página posee una plantilla (definición de estructura y tipo de contenidos a mostrar).
    • Una plantilla de página incluye varias plantillas de componente (definición de como mostrar un contenido concreto).
    • Un editor decide introducir una página (con una plantilla concreta y las plantillas de componente asociadas) y los contenidos concretos (seleccionados del repositorio existente).

    Está claro que necesitamos poder definir las plantillas de página y de componente, así como de poder localizar y asociar los componentes.

    Esto podría ser el primer paso pero no debemos olvidar que cuando definimos una inversión tecnológica, esta debería estar motivada por la reducción del coste, la mejora del tiempo de explotación (time-to-market) y la mejora de servicio a cliente. Para que estos tres puntos puedan cubrirse se requiere una correcta explotación de los sistemas para conocer a nuestros clientes y ofrecerles un trato personal. Requerimos de personalización ....

    La personalización puede ser explícita o implícita, es decir, en base a datos sobre preferencias indicadas por el usuario o en base a nuestro análisis de sus hábitos de navegación y consumos. En este caso necesitamos registrar (trazar) el comportamiento del usuario y ser capaz de ofrecer dinámicamente contenidos de categorías concretas.

    Pero nunca se puede olvidar una cosa, el perfil del cliente cambia con el tiempo por lo que nuestros sistemas deben ser sensibles a estos comportamientos. Aquí entran en juego otros elementos como son el análisis de datos y la definición de contenidos asociados a segmentos de usuario, es decir, CRM analítico y CRM operacional.

    Cuando los Webs tienen un número alto de visitas, los problemas con los que nos enfrentamos son más complejos. Un sistema de presentación como el que hemos comentado con unas pocas tablas de base de datos y un poco de imaginación, lo podríamos resolver pero .... funcionaría con 100.000 peticiones diarias. ¿Qué infraestructura necesitaríamos para dar soporte a este sistema?. Es posible que necesitemos un mecanismo un poco más complejo de composición dinámica de sistemas de presentación pero que se comporte en ciertos casos como si fuera estático.

    Para esto hay algunas opciones:
    • Mecanismos de caché.
    • Generación de árboles estáticos a través de sistemas dinámicos.

    Para que estos mecanismos sean efectivos, debemos conocer muy bien el ciclo de vida de todos los contenidos presentados en una página así como los mecanismos tecnológicos de los que disponemos.

    Distribución
    Si nuestra corporación es grande, puede que tengamos versiones de nuestras publicaciones en varios idiomas o que participemos de empresas (de modo mayoritario o no) y nos interese que parte de nuestros contenidos se publiquen automáticamente en el resto de los subsistemas. En este caso, hablamos de la publicación multi-site.

    Los contenidos, pueden ser mostrados en nuestro sistema o entregados a otros sistemas (bajo demanda o de modo pro-activo).

    Es posible que nuestro sistema tenga la capacidad de agregar, transformar, categorizar y empaquetar los contenidos y que otras empresas quieran centrarse en su negocio y olvidarse de estas tareas y simplemente agregarlos a sus sistemas de presentación. Un ejemplo pueden ser las grandes proveedoras de noticias que se encargan de recopilar datos de multitud de fuentes y proporcionarlas a multitud de destinos (que no tienen interés ni recursos en hacerlo).

    Se suele hablar de sindicación de contenidos.

    Plan de implantación de soluciones de Gestión de Contenidos
    Motivación
    Cuando una empresa se plantea la posibilidad de implantar un producto de gestión de contenidos normalmente es porque se encuentra en una situación incómoda y desea solucionarla:
    • Demasiados Webs en su sistema con contenidos desactualizados o difícilmente gestionables.
    • Imposibilidad de encontrar una información concreta en nuestro propios sistemas.
    • Falta de homogeneidad en la presentación de datos (navegabilidad, formato y actualidad de la información).
    • Costes elevados en sistemas que aportan poco valor al negocio (internos).
    • Falta de coordinación y mínima reutilización de los desarrollos.
    • Poca capacidad de análisis de hábitos de los usuarios y bajo nivel de retención de clientes.
    • Han creado divisiones tecnológicas tan pesadas y complejas que éstas realmente no llegan a comprender cuál es su función (aportar valor al negocio principal de la empresa).

    Errores comunes
    Cuando una situación es incómoda, muchas veces nos precipitamos....

    Comprar una herramienta (de cualquier tipo) y pretender que en pocos meses esa solución habrá resuelto todos nuestros problemas puede parecer cuanto menos que:
    • No somos conscientes de nuestra problemática
    • Nos queremos engañar a nosotros mismos (por si acaso)
    • Nos han hecho una buena labor comercial.

    Si una gran organización (empresa) tiene 20 Webs y queremos unificar criterios .... hay que arreglar algo más que la tecnología. Probablemente halla que modificar muchos procesos internos así como reeducar a mucha gente.

    La consolidación de estrategias de gestión de contenidos, requiere la madurez e involucración de distintas áreas de la empresa:
    • Negocio (comercial)
    • Marketing
    • Legal
    • Tecnología

    Los proyectos de gestión de contenidos, para mi gusto, no se deben abordar a lo ancho, es decir, tratar de resolver 20 problemas grandes al mismo tiempo.
    Todavía lo podemos hacer peor (esto seguro que no le gusta a algunos comerciales con cultura de tierra quemada) y es comprar una licencia corporativa de un producto cuando todavía no hemos implantado ningún proyecto con éxito y cuando no tenemos ninguna referencia fiable de lo mismo.

    Implantación de solución:
    Los proyecto de gestión de contenidos deberían (repito que para mi gusto) abordarse en profundidad:
    • Identificar cuales son elementos prioritarios en nuestro sistema.
    • Seleccionar un producto que creemos que puede cubrir nuestras necesidades a un coste reducido.
    • Subcontratar los servicios de empresas especializadas (el vendedor, socio tecnológico o empresas con probada capacidad) para ayudarnos a adquirir las capacidades necesarias en poco tiempo, en un proyecto vital para la empresa (para nuestro negocio principal)
    • Crear una primera fase del proyecto, corta y poco ambiciosa, tratando de analizar la idoneidad de la solución para la empresa y capacitando a nuestro personal sobre el producto elegido.
    • Continuar el desarrollo sobre ese proyecto aumentando las capacidades del sistema: Nuevos contenidos, Wokflows y capacidades de personalización.
    • Una vez ratificado que el beneficio compensa el coste, elegir otro proyecto e integrarlo en nuestra solución.
    • Si en este momento estamos contentos... a lo mejor debemos plantearnos la compra de una licencia corporativa .......
    Leyendo entre líneas, lo que queremos comprobar:
    • Que el producto nos compensa
    • Que el comercial no nos ha vendido un concepto muy bonito pero difícil de alcanzar a un coste razonable (ha pasado y seguirá pasando).
    • Que tenemos soporte local de la empresa en nuestro país (a un coste razonable).
    • Que varias empresas de servicios tienen personal cualificado para que no estemos atados con un único proveedor. Hay veces que las políticas de formación de la empresas de productos son tan tiránicas que impiden que otras empresas de servicios se formen adecuadamente sobre los productos. Esto es un circulo vicioso porque cuando las empresas implantan soluciones, lo suelen hacer de un modo mediocre, lo que perjudica seriamente a la imagen de la empresa de productos (¿os suena?).
    • Que es factible reutilizar los esfuerzos (código, workflows, etc..) y conocimientos adquiridos en otros proyectos.

    Riesgos a Evitar
    Sería triste que después de finalizar un proyecto de gestión de contenidos, llegásemos a las siguientes conclusiones:
    • Que hemos reconstruido un proyecto con un gestor de contenidos para no obtener ningún beneficio para el negocio.
    • Que hubiera sido lo mismo haciendo el proyectos con tecnologías base (asp, jsp) y nos hubiera costado 10 veces menos.
    • Que como nos hemos gastado tanto dinero en el producto, para no tener problemas internos, defendemos una tecnología o productos con el cual estamos descontentos o frustrados (somos cautivos de nuestra elección).
    • Que hemos definido unos Workflows durante semanas y luego siempre la misma persona (casi siempre) realiza todas las tareas.

    Otras consideraciones
    Cuando se abordan soluciones, hay otras consideraciones que condicionan la elección de herramientas:
    • La tecnología condiciona la herramienta a utilizar.
    • La tecnología debe ser un medio para alcanzar un fin, "mejorar nuestra capacidad de generar negocio".
    • Sin inversión no hay beneficio. Hay que planificar con cabeza y preparar nuestros sistemas para el futuro.
    • Hay que confiar en los recursos internos y apoyarlos con recursos externos para no caer en organizaciones endogámicas.

    Comentario final
    Debemos aprender de los errores (y hablo en primera persona de muchos de los mencionados con anterioridad), tratar de no volverlos a cometer (aunque cometeremos otros esperemos que no tan graves) y adelantarnos al futuro (que es lo que garantizará la diferenciación respecto a la competencia).

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 9 | 6:04 PM 2009-06-19
    Comandos útiles en línea de comandos

    Lista de comandos útiles que podemos utilizar en nuestro PC.

    En Windows XP hay muchisimos comandos útiles, pero lo malo de todo esto es su gran desconocimiento. Para poder utilizarlos, debemos abrir la consola de comandos, o la ventanita de MS-dos. En Windows XP, por ejemplo, podemos acceder a ella clickeando en:

    Inicio –> Ejecutar –> cmd o bien pulsando la tecla “Windows + R”

    Con todos estos comandos, también podemos solicitar una ayuda, añadiendo uno de los siguiente parámetros: /? - /h a nuestra llamada.

    Comandos de Archivos y sistemas de ficheros
    cacls - Permite modificar los permisos de lectura y escritura en ficheros y carpetas
    chkdsk - Comprueba el estado de una partición y repara los daños en caso de que encuentre alguno. Sin parámetros simplemente escanea e informa de errores. Para que además repare, añadimos el parámetro /F: chkdsk /F
    cipher - Cifrado de datos en particiones NTFS
    comp - Compara archivos o carpetas y muestra las diferencias existentes entre ellos
    compact - Compresor de archivos. El parámetro para la compresión es /C, el parámetro para descomprimir es /U
    convert - Conversor de particiones, convierte particiones FAT16 o FAT32 en particiones NTFS sin perdida de datos
    defrag - Defragmentador de archivos
    diskpart - Permite crear, eliminar y administrar particiones. Este programa en modo consola debemos utilizarlo con cuidado puesto que es fácil que eliminemos sin darnos cuenta todo el contenido del disco duro o de la partición activa
    find y findstr - Comandos de búsqueda de ficheros. findstr permite buscar cadenas de caracteres dentro de los archivos
    iexpress - Asistente para crear comprimidos .CAB
    openfiles - Muestra a un administrador los archivos abiertos en un sistema y permite desconectarlos si se han abierto a través de re

    Comandos de Configuración e información del sistema
    bootcfg - Configurador de arranque. Simplemente modfica el archivo boot.ini para indicar opciones de arranque
    control userpasswords2 - Permite modificar las claves y los permisos de los diferentes usuarios, así como requerir la pulsación de control+alt+suprimir para poder iniciar sesión, haciendo el inicio de sesión más seguro
    driverquery - Crea un informe sobre los dirvers instalados en el sistema. Muestra además información detallada de cada uno
    dxdiag - Herramenta de diagnóstico de DirectX
    gpresult - Información de las políticas de grupo aplicadas a un usuario
    gpupdate - Actualizar las politicas de grupo
    pagefileconfig - Configuración de la memoria virtual de Windows
    prncnfg - Información sobre las impresoras instaladas
    prnjobs - Información sobre los trabajos de impresión en cola
    reg - Permite ver y modificar valores del registro de Windows. Opciones posibles:
    • reg query: consulta en el registro
    • reg add: añadir entrada
    • reg delete: eliminar entrada
    • reg copy: copiar clave en otro lugar del registro
    • reg save: guardar parte del registro
    • reg restore: restaura el registro
    • reg load: cargar valor o clave desde un archivo .reg
    • reg unload: descargar valor o clave
    • reg compare: comparar valores de registro
    • reg export: exportar registro a un archivo
    • reg import: importar registro a un archivo
    sc - Administrador de servicios, podemos detenerlos, ejecutarlos, etc
    sfc - Este comando permite buscar archivos del sistema dañados y recuperarlos en caso de que estén defectuosos (es necesario el CD de instalación del sistema operativo para utilizarlo). Para realizar una comprobación inmediata, deberemos ejecutar la orden sfc /scannow
    systeminfo - Muestra información sobre nuestro equipo y nuestro sistema operativo: número de procesadores, tipo de sistema, actualizaciones instaladas, etc
    taskkill - Permite matar procesos conociendo su nombre o su numero de proceso (PID)
    Tasklist - Informe sobre los procesos ejecutados en el sistema

    Comandos de Redes
    arp - Muestra y permite modificar las tablas del protocolo ARP, encargado de convertir las direcciones IP de cada ordenador en direcciones MAC (dirección física única de cada tarjeta de red)
    ftp - Cliente FTP en modo consola de comandos
    getmac - Muestra las direcciones MAC de los adaptadores de red que tengamos instalados en el sistema
    ipconfig - Muestra y permite renovar la configuración de todos los interfaces de red
    nbtstat - Muestra las estadísticas y las conexiones actuales del protocolo NetBIOS sobre TCP/IP, los recursos compartidos y los recursos que son accesibles
    net - Permite administrar usuarios, carpetas compartidas, servicios, etc. Para un listado completo de todas las opciones, escribir net sin ningún argumento. Para obtener ayuda sobre alguna opción en concreto, escribir net help opción
    netsh - Programa en modo consola permite ver, modificar y diagnosticar la configuración de la red
    netstat - Información sobre las conexiones de red de nuestro equipo
    nslookup - Aplicación de red orientada a obtener información en los servidores DNS sobre un host en concreto
    pathping - Muestra la ruta que sigue cada paquete para llegar a una IP determinada, el tiempo de respuesta de cada uno de los nodos por los que pasa y las estadísticas de cada uno de ellos
    ping - Comando para comprobar si una máquina está en red o no
    rasdial - Permite establecer o finalizar una conexión telefónica
    route - Permite ver o modificar las tablas de enrutamiento de red
    tracert - Informa sobre el camino que siguen los paquetes IP desde que sale de nuestra máquina hasta que llega a su destino

    Comandos Miscelánea
    at - Permite programar tareas para que nuestro ordenador las ejecute en una fecha o en un momento determinado
    logoff - Comando para cerrar sesiones, incluso en equipos remotos
    msg - Envía mensajes por la red a otros equipos
    msiexec - Comando para ejecutar archivos de instalación .MSI
    runas - Ejecución de programas como si fueras otro usuario
    shctasks - Administrador de tareas programadas
    shutdown - Comando para apagar, reiniciar el equipo. Es especialmente útil si hemos sido infectado con el virus Blaster o una de sus variantes para cancelar la cuenta atrás. Para ello, tan sólo tendremos que utilizar la sintaxis shutdown –a

    Comandos de Microsoft Management Console (MMC)
    Los siguientes comandos no son más que los accesos a cada sección de la MMC, que lanzarán una interfaz gráfica.
    ciadv.msc - Permite configurar el servicio de indexado, que acelera las búsquedas en el disco duro
    compmgmt.msc - Da acceso a la Administración de equipos, desde donde podemos configurar nuestro ordenador y acceder a otras partes de la MMC
    devmgmt.msc - Administrador de dispositivos
    dfrg.msc - Defragmentador de disco
    diskmgmt.msc - Administrador de discos
    fsmgmt.msc - Monitorización y Administración de los recursos compartidos
    gpedit.msc - Políticas de grupo
    lusrmgr.msc - Administración de usuarios
    ntmsmgr.msc - Administración de dispositivos de almacenamiento extraíbles
    ntmsoprq.msc - Monitorización de las solicitudes de operador de medios extraíbles
    perfmon.msc - Monitor de sistema
    secpol.msc - Configuración de seguridad local
    services.msc - Administrador de servicios
    wmimgmt.msc - Administrador de WMI

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 10 | 2:28 PM 2009-07-10
    Las etiquetas HTML más raras

    Disponemos de un gran número de etiquetas HTML pero a menudo utilizamos sólo un pequeño porcentaje, no siempre con un "<div>" o con un "<span>" podemos solucionar todos nuestros pequeños problemas de HTML.

    Vamos a ver 10 etiquetas raras, algunas de estas etiquetas no las conoceréis pero otra seguro que las usaт a menudo, personalmente no conocía algunas... <abbr>, <address>, <acronym>.

    Las 10 etiquetas más raras

    1. <wbr>
    Ajuste de línea condicional, es muy desconocida y su nombre es debido a la palabra "word break" o "word wrap", es muy útil cuando un texto es demasiado largo, esta etiqueta romperá la línea si lo considera necesario y añadirá un salto de línea, evitando el incómodo scroll horizontal.

    2. <abbr>
    Nos permite mostrar algún texto de manera abreviada, de tal modo que al aplicarle un "title" podremos ver su nombre completo al pasar el ratón por encima.

    3. <label>
    Debería acompañar a cada uno de los campos de un formulario, son muy útiles de cara a la accesibilidad de los mismos y en el caso de los "checkbox" y "radio buttons" son fundamentales.

    4. <ins><del>
    Suelen utilizarse juntas y su objetivo es remarcar las posibles revisiones de un texto tachando la palabra a omitir y subrayando la nueva palabra.

    5. <address>
    Esta etiqueta permite marcar direcciones en el HTML y ademas estilizarlas fácilmente con un simple CSS.

    6. <acronym>
    Parecida a <abbr>, nos permite definir la palabra/s etiquetada/s al pasar el ratón por encima.

    7. <optgroup>
    Permite agrupar opciones dentro de un "select".

    8. <cite>
    Contiene una cita o referencia a otro recurso.

    9. <fieldset>
    Agrupa controles en un formulario. Esto permite agrupar temáticamente los controles de un formulario, haciéndolo más fácil de entender y rellenar para el usuario.

    10. rel
    El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 11 | 11:55 AM 2009-07-14
    13 leyes de oro para dar el gran paso a XHTML

    Amigos, aquellos que están decididos pero no saben cómo entrar en el mundo XHTML, este post quizás les aclare algunas cosas. El gran paso al mundo XHTML es simple: las reglas.

    En todo lenguaje encontraréis reglas básicas. XHTML no es un lenguaje distinto a HTML, para nada, sólo tiene unas reglas básicas que lo hacen especial. Esas reglas te permiten hacer páginas válidas. Que una página sea válida no asegura que sea buena o que solucione todos los problemas. Para ello, lo mejor es estudiar el propósito de cada etiqueta. Esto nos permite discernir que etiquetas debemos utilizar. Esto (las reglas y los propósitos) nos permitirán no sólo crear estupendos ejemplos de código (simple, semántico y accesible) sino también páginas que validan, son fáciles de mantener y re-utilizar.

    Volviendo al primer escalón de nuestro gran paso… las reglas, ¿Dónde están las reglas? En cualquier lenguaje pueden averiguar comprando un manual, o bien, yendo a la página oficial. Para XHTML basta con acercarse a la web de W3C y buscar dicha especificación.

    W3C te ofrece muchas especificaciones de XHTML. Tanto de las versiones 1.0 como 1.1, 2, básicas, por módulos, etc. No hay motivos para asustarse al ver tantas opciones. Les explicaré la razón de ello. XHTML no es un invento nuevo del HTML. Es una mejora, una revisión de lo que se hizo en el pasado. Los científicos y desarrolladores que colaboran en estos proyectos van mirando las necesidades y las nuevas posibilidades de estos lenguajes, creando así nuevas versiones con reglas cambiadas. Como HTML no satisfacía dichas condiciones, se creó XHTML, que es HTML pero con reglas principales de XML. XML es un lenguaje tan abierto y mutante que necesita reglas. Esas reglas básicas se aplicaron a HTML dando por creado XHTML. XHTML no deja de ser un HTML con unas reglas más estrictas que permiten una cierta uniformidad a la hora de hacer cosas. Esta uniformidad asegura a cualquier fabricante un margen o unos límites para sus herramientas (Ej. Un navegador). Imagínense que HTML siga siendo un lenguaje anárquico, que existan miles de etiquetas provenientes de muchos lados en donde existen reglas. En estas condiciones, no habría uniformidad, no existirían patrones de los cuales los fabricantes se puedan coger para hacer una herramienta que muestre, analice y aproveche el HTML, sino que sería el caos (muy lejos de eso no estamos todavía).

    Entonces, primero las reglas. XHTML tiene unas reglas muy básicas. Citaré paso a paso las reglas del XHTML:

    Regla 1: Todos los documentos XHTML necesitan especificarse con un DTD
    No es válido, bajo ninguna circunstancia un documento sin un DTD. Un DTD es un Document Type Declaration. Es otro documento que especifica la naturaleza del nuestro. Por eso, todos los documento tienen que llevar por cojones esta instrucción. Esa instrucción, sirve para diferenciar el tipo de XHTML, o sea, si el documento es estricto tendrá un DTD estricto, si el documento es transitorio (que está pasando una transición a un lenguaje estricto) llevará un DTD Transitional y si el documento tiene frames o es modular llevará el que le corresponda.

    Metáfora aplicable:
    De la misma forma que un agente de la policía necesita una tarjeta que lo acredite como tal, un documento de XHTML necesita un DTD para presentarse ante el navegador y responder como tal.

    Sin DTD, la página no valida. El navegador no sabe que tipo de documento mostrará al usuario, por lo que estará a la expectativa poniendo todo su motor y esfuerzo para mostrar el documento bien… eso lo podemos traducir en: más trabajo para el navegador.

    Regla 2: El elemento raíz de cada documento deberá ser la etiqueta <html>
    Si no se encuentra esta etiqueta no hay documento de XHTML. Además esta etiqueta tiene que especificar una cosa importante: el namespace. El namespace es una dirección donde se justifican los tags que utilizaremos. Sin esto, es como si un agente de policía te mostrara su identificación y tú no veas de qué central de policía es, cómo se llama o a quién reclamarle algo.

    Además, la etiqueta <html> requiere de dos atributos importantes: los idiomas. Como todos los documentos tienen que llevar un idioma especificado, éstos deben anunciarse en la primera etiqueta utilizando los atributos xml:lang="…" y lang="…" a la vez. xml:lang="…" servirá para aquellos navegadores o dispositivos (Ej. Un teléfono móvil) que soporten atributos en XML (recuerden que, XHTML es básicamente el HTML que se quiere convertir en XML).

    Entonces, hemos de poner este atributo que no existe en el mundo HTML pero si en XML. Luego, debemos invertir golpes de tecla en otro atributo que sí pertenece al mundo HTML y es el atributo lang="…". Este atributo ayuda a especificar en qué idioma estará escrito el documento, de la misma forma que lo hace xmlang pero escrito a la HTML.

    Regla 3: Los documentos deben ser gramaticalmente correctos
    Aquí viene una regla fácil de conseguir. La gramaticalidad en HTML, XML, XHTML o cualquier documento de la web la relacionaremos con la ortografía que escribiremos las etiquetas y ciertos atributos. Si escribimos mal las etiquetas o nos olvidamos de ciertos detalles, lo que ocurrirá será en forma incierta que nuestro documento no valide o el mismo navegador obvie mostrarlo.

    Por ello, aplicaremos una política kosher para hacer nuestros documentos XHTML. Debemos tener en cuenta muchas cosas al escribir XHTML porque como había comentado anteriormente, los documentos son más estrictos que HTML y no nos dejan por ejemplo pasar siquiera la utilización de mayúsculas en las etiquetas de XHTML.

    Los documentos tendrán que tener una característica de escritura y estar bien anidados. Anidados es otro término que confunde hasta el más experimentado en el tema. Creedme que hasta el más entrenado a veces se olvida de cerrar elementos de HTML o XHTML. Para ello, en XHTML esta regla es la más estricta de todas, no se puede uno pasar por alto nada, si empieza con una etiqueta, se debe cerrar al terminar de utilizar. Esto en HTML no es problema porque muchas equiquetas permiten el no cierre (Ej. <p>) pero en XHTML no.

    Un ejemplo correcto:

    Quote
    <p>he aquí un <em>párrafo</em> enfatizado.</p>

    Como vemos en el ejemplo, hemos comenzado con la etiqueta <p> luego en medio con <em>, terminamos de usar <em> y lo cerramos con su correspondiente </em> que luego terminamos cerrando todo con la etiqueta </p> que antes habíamos usado con <p>.

    Un ejemplo mal hecho:

    Quote
    <p>he aquí un <em>párrafo</p> enfatizado</em>

    Aquí notarán que algo no cuadra, si empezamos con <p> y luego abrimos otra etiqueta <em>, para cerrar bien debemos primero cerrar la segunda (la <em>) y no la primera. Usando </em> antes que </p> y luego sí </p>.

    Otro caso común y que a cualquiera le puede pasar:

    Quote
    <p>he aquí un <i><b>párrafo</i></b> enfatizado</p>

    Aquí el error está dentro del mismo texto. Hemos hecho bien la primera parte (abrir y terminar el párrafo con <p> y </p> pero dentro hemos abierto con <i> y cerramos con </b>. Ahí está el problema. Debería ser:

    Quote
    ...un <b><i>párrafo</i></b> enfatizado...

    Abrimos con un <b> y cerramos con un </b>. Dentro de <b>...</b> lo mismo, abrimos un <i> y cerramos con un </i>.

    Debido a la naturaleza de <b> e <i> éstos pueden ir en el orden que queramos: primero el <b> o el <i>. El resultado será siempre el mismo siempre y cuando se encuentren bien anidados.

    Ojo con anidar elementos que no son propios de su naturaleza o los resultados serán desastrosos. Más adelante hablaré de la naturaleza de cada etiqueta.

    Regla 4: Los nombres de elementos y atributos deben escribirse en minúscula
    Los documentos XHTML deben usar minúsculas para los nombres de todos los elementos y atributos HTML. Esta diferencia es necesaria porque XML es sensible a minúsculas y mayúsculas Ej. <li> e <LI> son etiquetas diferentes aunque se escriban igual. Por eso recuerden las mayúsculas para escribir XHTML no están permitidas bajo ninguna circunstancia.

    Regla 5: Todas etiquetas que no sean vacías deberán cerrarse
    Con HTML 4.0, basado en SGML, en algunos elementos podía omitirse la etiqueta de cierre, de tal manera que la apertura de los elementos que les sucedían implicaba dicho cierre. Esta omisión no está permitida en XHTML, basado en XML. Todos los elementos que no estén declarados en la DTD como EMPTY deben tener una etiqueta de cierre.

    Ejemplo:
    La etiqueta <p> como no es una etiqueta vacía como <img> requiere de una misma etiqueta <p> adaptada de cierre: </p>.

    Regla 6: Los valores de los atributos deben ir entre comillas dobles (importante)
    Todos los atributos usados en XHTML deben llevar comillas dobles: lang="...". Las comillas simples pueden funcionar en otros tipos de documentos, la ausencia de las comillas también, pero en XHTML es importante que cada atributo tenga comillas dobles. Sin estas, el documento nunca validará y las cosas pueden ir a mal.

    Antes podíamos escribir cosas como estas:

    Quote
    <table cellspacing=2 cellpadding=5>
    o <table cellspacing='2' cellpadding='5'>

    Ahora debería ser así:

    Quote
    <table cellspacing="2" cellpadding="5">

    Regla 7: Minimización de atributos
    HTML soportaba la minimización de los atributos. Por ejemplo, nowrap era un atributo que se utilizaba en las celdas (<td>) de las tablas (<table>) para que no rompieran las líneas de textos o contenidos dependiendo el ancho natural de la página. Antes podían verse cosas como:

    Quote
    <td nowarp>Texto</td>

    Esto no funciona en XHTML, deberías escribirlo como:

    Quote
    <td nowrap=""> o <td nowrap="nowrap">

    Regla 8: Elementos vacíos deben llevar una barra de cierre
    ¿Recuerdan todas esas etiquetas que no llevan una misma etiqueta de cierre? Ej.: <img>, <hr>, <input>. Bueno, todas estas etiquetas se llaman “elementos vacíos” porque no encierran contenidos sino que los referencian. Estos si o sí tienen que tener una barra de cierre /, sino el documento no valida y en algunos casos pueden obtenerse resultados no deseados:

    Bien hecho:

    Quote
    <p>Esta es una imagen de mis vacaciones en Granada: <img src="granada.jpg" alt="foto" /></p>

    Mal hecho:

    Quote
    <p>Esta es una imagen de mis vacaciones en Granada: <img src="granada.jpg" alt="foto" ></p>

    Nótese la barra al final de la etiqueta "/>". También podemos verla en la etiqueta <hr> de esta forma <hr />. ¿Por qué el espacio entre la barra y el nombre de etiqueta? Por motivos de compatibilidad con navegadores viejos. En un futuro, no hará falta.

    Regla 9: Elementos con atributos id y name
    En HTML se utilizan atributos que tienen una función muy específica: definir identificadores o nombres que señalan algo. En HTML utilizábamos name y id para especificar muchas cosas. En XHTML el uso de name está restringido tal es que sólo está permitido en la versión XHTML 1.0 transitional, o sea que si nuestro documento no tiene una DTD transiotional cualquier uso de name hará que nuestro documento no valide.

    Otro factor importante que siempre se me pregunta en las charlas, curso que imparto son, ¿qué diferencias hay entre name y id? Bueno, name especifica lo mismo que id solo que id es único en todo el documento. Es una forma de decir este es la única etiqueta con este valor sirve para diferenciar una etiqueta de otras iguales.

    En XHTML 1.0 transitional los valores que tengan name deberán incluirse un id:

    Quote
    <td name="nombre" id="nombre">

    En XHTML 1.0 estricto o XHTML 1.1 los valores que tengan name deberán ser id:

    Quote
    <td id="nombre">

    Bajo ninguna causa pueden llevar name. id al ser único, no puede repetirse este valor, o sea:

    Quote
    <td id="nombre"><a id="nombre">Enlace</a></td>

    Los name pueden llevar números y letras indistintamente. Los id también pero deberán comenzar con una letra de la a - z ó de la z - a y luego números. Si esto se olvida el documento no valida y los resultados pueden ser no deseados.

    Regla 10: Conocer los elementos de bloque, linea y reemplazados
    Cada elemento o etiqueta de XHTML y HTML tienen una naturaleza. Esta naturaleza se traduce en 3 estados conocidos como: elementos de bloque, elementos de línea y elementos reemplazados.

    Los elementos de bloque son todos aquellos que en su estado natural ocupan toda una línea de pantalla, y desplazan hacia abajo a otros elementos de bloque, linea o reemplazados.

    Los elementos de linea son todos aquellos que puestos en su estado natural se agolpan uno al lado del otro y se desplazan hacia abajo cuando el ancho de la pantalla no les deja hueco donde acomodarse.

    Los elementos reemplazados son todos aquellos que un día fueron algo y hoy por determinada causa no lo son. Si una imagen (elemento en linea) gracias a una propiedad escrita en CSS pasa a ser un elemento en bloque, este no es un elemento en bloque sino un elemento reemplazado que cumple las características de un elemento en bloque.

    Aprenderse qué elementos son de linea o bloque es una tarea esencial para no cometer errores. En la siguente regla explico porqué es importante.

    Regla 11: No todos los elementos pueden ser anidados por otros elementos y viceversa
    Tanto en HTML como XHTML se dan los casos que encerramos etiquetas dentro de otras etiquetas. Esto sirve para definir capas y ciertas cosas propias del documento. Ejemplo, todas las etiquetas de una página están encerradas por la etiqueta raíz <html> dada que ésta tiene esa peculiar función se le permite todas las excepciones. Pero hay casos que no, incluso por más que el navegador respete nuestra decisión de anidado de etiquetas, éstas no cumplirán ciertas reglas básicas:

  • a
    No puede contener otros elementos a.

  • pre
    No puede contener los elementos img, object, big, small, sub o sup.

  • button
    No puede contener los elementos input, select, textarea, label, button, form, fieldset, iframe o isindex.

  • label
    No puede contener otros elementos label.

  • form
    No puede contener otros elementos form.

    Por decirlo así, no debemos caer en ciertas irregularidades como:

    Un elemento de línea que encierre a un elemento de bloque:

    Quote
    <em><p>Este es un párrafo con énfasis.</p></em>

    Mejor así:

    Quote
    <p><em>Este es un párrafo con énfasis.</em></p>

    Debéis tener sumo cuidado con el anidado. Esto se puede solucionar sabiendo qué elementos estáis usando, si son de línea, si son de bloque, etc.

    Regla 12: Aprenderse para qué sirve cada etiqueta
    Es común entre los pasantes de HTML a XHTML que comentan la típica atrocidad de utilizar etiquetas que cumplen una función básica por otra que no la cumple. Un ejemplo claro que todos pueden ver en el diario Clarín (aviso: no tengo nada contra esta gente), que utiliza HTML y CSS pero lo realiza con prácticas erróneas:

    Quote
    <!--/VOLANTA-->
    <!--TITULO--><span class="tu1">
    El básquet juega
    con Italia por el oro</span>
    <br clear="all">
    <span class="sep"><br>
    <br><br><br>
    <br><br></span>
    <!--/TITULO-->

    Como podrán observar, quieren reemplazar a una etiqueta importante como lo es <h1> por una de menos importancia como lo es <span>.

    <h1> sería la etiqueta correcta para aplicar a un título en una página y, con el uso debido de CSS se puede obtener el mismo resultado y con mejores prestaciones que usando <span>. <span> es una etiqueta muda e invisible en el mundo HTML, sirve para crear elementos de línea con determinada </p> función de CSS pero no para definir la estructura de un documento.

    Otro caso me lo ha enviado una lectora que está trabajando en un proyecto que requiere el traspaso del antiguo HTML a XHTML:

    Quote
    Muchas gracias,
    He visto la luz. Ahora lo entiendo !!!!
    Es decir, mi editor, en vez de meter una <b> puede meter un <div id="negrita"> y ese id esta recogido en una CSS estandar q le aplicará el estilo apropiado.
    Ya se por donde tengo q seguir mirando.

    Aquí está claro, quieren reemplazar el viejo <b> (que sigue siendo válido pero a futuro no lo será) por una etiqueta <div id="negrita"> que tiene como intenciones reemplazar a la etiqueta <b>. En este caso lo correcto sería utilizar la etiqueta <strong>, porque es buena para marcar palabras y resaltarlas, tanto visualmente como auditivamente. <strong> cumple más funciones adecuadas para este caso que utilizando <span>, <div> u otra etiqueta que visualmente no se delate.

    Sumo cuidado con estos cambios.

    Regla 13: Que una página valide no significa que ¡ya está todo dicho!
    ¡No! Equivocación número uno de todos los principiantes. No se asusten, pero es fácil hacer validar una página, ¡pero eso no quita que esté mal programada!. Comprobarlo con cualquier página bien programada. Puedo hacer un documento que valide pero que por dentro utilice métodos anticuados como el caso que hemos visto del Diario Clarín. Hay que tener mano y conocimientos para hacer una página que valide y esté bien estructurada. Por ello les recomiendo las reglas anteriores y por sobretodo saber discernir para que sirve cada etiqueta y utilizarlas para su función y no para su visualización. Para la visualización utilicen CSS.

    Un caso válido pero mal aplicado:

    Quote
    <p>Este es un párrafo y esta es una <span class="negrita">negrita</span>.</p>

    Esto puede validar perfectamente pero:
    • Se está empleando el tag <span> por otro que tiene más relevancia en estos casos como lo es <strong>.
    • Se está escribiendo un atributo para luego en una plantilla de CSS seguir definiendo propiedades de grosor de letra, color, etc. Cuando el tag <strong> por naturaleza no necesita definición alguna.
    • Se está llenando el código de etiquetas con fines visuales y no estructurales.
    • Un lector de pantalla o un dispositivo que no entienda de CSS mostrará las etiquetas mal empleadas a su manera y no a la correcta.
    Bueno, estas 13 reglas de oro son simples. Saltarlas no les hará más que un daño que no tiene porqué. Se pueden obtener iguales resultados y escribir menos sabiendo qué usar y cómo. Los cambios en el futuro podrían ser menos dolorosos y no requerirán de tener que hacerlo todo de nuevo.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    • narupiece
    Mensajes: 3
    Reputación: 0
    Mensaje Nº 12 | 8:47 AM 2009-07-17
    hola, disculpen mi ignorancia pero en donde puedo modificar el codigo fuente de mi pag?? osea el codigo html :S

    espero que me puedan decir en donde, gracias xD

    Saludos!!

    sorin
    Mensajes: 442
    Reputación: 6
    Mensaje Nº 13 | 8:56 AM 2009-07-17
    Hola y bienvenido al foro de uCoz.

    Para modificar tu codigo tienes que ir a Inicio » Gestión de diseño

    Posicionamiento Web
    Directorio
    Post editado por sorin - Viernes, 2009-07-17, 11:42 PM
    narupiece
    Mensajes: 3
    Reputación: 0
    Mensaje Nº 14 | 9:08 AM 2009-07-17
    ya gracias, ya encontre en donde xD

    Saludos!!

    sorin
    Mensajes: 442
    Reputación: 6
    Mensaje Nº 15 | 11:43 PM 2009-07-17
    Me alegro de poder solucionar tu problema.
    Posicionamiento Web
    Directorio
    Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Fundamentos de HTML
    • Página 1 de 4
    • 1
    • 2
    • 3
    • 4
    • »
    Búscar: