Respira Web

10 - URL

2020-04-18T00:01:00.001+02:00

URL

Hemos visto lo que es URI, pues bien, ahora veremos que es la ton sonada URL.

URL es la sigla de Localizador Uniforme de Recursos (Uniform Resource Locator).

Suena importante, pero se preguntarán ¿qué significa esto?

Un URL es una cadena de caracteres con la que se asigna una dirección única a cada uno de los recursos de información disponibles en Internet.

Cada recurso tiene un URL único en la Web. El URL de un recurso de información es su dirección en Internet. Esta dirección permite que el navegador encuentre de forma precisa el recurso en la Web, para poder realizar la petición de este.

El URL combina el nombre del ordenador que proporciona la información, junto con el directorio donde se encuentra, el nombre del fichero y el protocolo a usar para recuperar los datos.

Un URL es un URI que además indica como localizar el objeto en cuestión. El conjunto de los URLs es por tanto un subconjunto de los URIs.

Los URLs se componen normalmente de tres partes:

Tomaremos como ejemplo el URL que designa el blog "Respira Web" con la entrada:

https://respiraweb.blogspot.com/2011/01/10-url.html

Este URL puede interpretarse de la siguiente manera:

Hay un documento disponible a través del protocolo HTTP, que se encuentra en la máquina “respiraweb.blogspot.com” accesible a través de la ruta /2011/01/10-url.html”.

Entre otros esquemas que pueden encontrarse en documentos HTML se incluyen "mailto" (mail=correo, to=a) para correo electrónico y "ftp" para FTP[1].

Pongamos ahora otro ejemplo de URL. Éste referido al buzón de correo electrónico de un usuario:

---------------------------------------------------------------

...aquí por ejemplo podría ir el texto de una página web ...
* Para cualquier comentario, envíe un mensaje a <a href="mailto:pepe@midomino.com">Jose Chachi</a>

---------------------------------------------------------------

Resumiendo, el formato general de un URL es el siguiente:

protocolo://máquina/directorio/fichero

El formato extendido de un URL puede también incluir, el nombre y contraseña de un usuario, y el puerto de conexión al servidor.

Lo vemos esquemáticamente a continuación:

protocolo://usuario:contraseña@máquina:puerto/directorio/fichero

Y ahora un ejemplo: http://juan:micontraseña@dondelopuse.eu.mkk.es:8080/modera/precios.txt

La especificación detallada del URL se encuentra en la RFC 1738 (Uniform Resource Locators).
https://www.rfc-es.org/rfc/rfc1738-es.txt

Ya hemos visto URL, URI, y poco a poco estamos familiarizándonos con la web y sus tecnicismos.

Todos estamos impacientes por empezar rápidamente a realizar programas que funcionen. Pero les pido un poco de calma, y aunque se haga pesado al principio tratad de entender estos términos, ya que todo es información muy útil y necesaria para lo que viene más adelante.

[1] FTP protocolo de transferencia de archivos.

6 - Como comenzó Internet

2020-04-18T00:01:00.000+02:00

Como comenzó Internet

Aunque para muchos esta es la parte aburrida, esto es solo una breve descripción de los orígenes, pero siempre podéis saltar la sección.

Internet comenzó como un experimento militar, y después fue un juego de académicos, ahora es una comunidad de usuarios de ordenador y distribuidores de información con un crecimiento cada vez más rápido.

A finales de los 70 se experimentó con diseñar una red de ordenadores que resistiese cualquier situación. El objetivo principal era construir una red de ordenadores que no perdiese la conexión con otros ordenadores, aunque uno de ellos sufriese una desconexión de la red, de forma que todos estaban conectados con todos.

La provisión de fondos para este desarrollo la proveía el departamento de Defensa de los EEUU quien suministraba el dinero necesario, con el fin de resistir un ataque nuclear sin perder la red de conexiones.

La red Internet que conocemos hoy dista muchos de aquellos días y cuenta con millones de equipos interconectados entre sí, donde los usuarios no tienen por qué ser especialistas en tecnología como sucedía al principio.

COBOL - Codificación

2020-04-17T19:20:00.003+02:00

Codificación

Hasta COBOL 2002, el código debía escribirse en un formato fijo, es decir que debía escribirse respetando su lugar según en qué columnas se encuentra. Cada parte del código debía estar en la columna que le correspondía.

A partir del COBOL 2002 también es posible escribir código en formato libre como en lenguajes tipo C.

En el formato fijo el código se aloja en las columnas más o menos como se describe a continuación.

Columnas 1 a 6, esta área es ignorada por el compilador y es donde se escriben los números de sentencia o número de línea.

Columna 7, es donde se escribe el indicador de comentario o continuación, el “ * ” (asterisco) para comentar una línea, o el “ – “ (guion medio) para continuar una línea.

Columna 8 a 11, que podemos llamar el área “A”, donde se utiliza para otros elementos que comentaremos más adelante.

Columna 12 a 72, que asumimos como área “B”, que contienen los códigos que no se permiten en el área el área “A” y que también explicaremos más adelante.

Y por ultimo la columna 73 a 80 que puede quedar en blanco

COBOL - Introducción al lenguaje - Estructura

2020-04-16T12:59:00.005+02:00

Introducción al lenguaje

Estructura

En cuanto a cómo se organiza un programa de COBOL, debemos saber que su estructura está basada en cuatro divisiones o secciones, y que son las siguientes:

· IDENTIFICATION DIVISION (SECCION DE IDENTIFICACIÓN)
· ENVIRONMENT DIVISION (SECCION DE
· DATA DIVISION (SECCION DE DATOS)
· PROCEDURE DIVISION (SECCION DE PROCEDIMIENTO)

Dentro de cada una de estas divisiones o áreas se agrupan diferentes procesos o información.

En la IDENTIFICACION DIVISION, es donde se asigna el nombre al programa y el nombre del programador.

En la ENVIRONMENT DIVISION es donde se configuran los enlaces con los recursos físicos donde estarán los datos.

Las áreas especificas de trabajo y la definición del mapa o “diccionario de datos” a ser procesados se realiza en la DATA DIVISION.

Y por último la codificación de procedimientos o instrucciones para el procesamiento de los datos se aloja en la PROCEDURE DIVISION.

COBOL - Introduccion e historia

2020-04-15T11:21:00.001+02:00

Cobol

Introducción e historia

El lenguaje tuvo sus primeras implementaciones publicadas en 1960, aunque ya se venia trabajando en su desarrollo a finales de la década de 1950.

Aunque hubo muchas personas involucradas, se asocia a la norteamericana Grace Hopper como la madre[1] de COBOL.

COBOL es un lenguaje de programación orientado a negocios (COmmon Business Oriented Language).

Este lenguaje se utiliza generalmente para el procesamiento de transacciones como ser operaciones bancarias, agencias de gobierno, hospitales, aeropuertos, etc.

Los mainframes[2] de IBM casi siempre tienen un compilador COBOL instalado.

Hay muchas versiones y variaciones de COBOL, pero se puede decir que es un lenguaje compilado y a partir de la versión COBOL 2002 asume características de programación orientada a objetos[3].

En el desarrollo de su diseño, una de las intenciones era que fuese un lenguaje muy detallado, aunque se permitiese la formulación algebraica. Se intento que se utilizasen en las descripciones y manipulación de datos palabras completas para facilitar su comprensión.

Como en todos los casos esta decisión tiene los que alaban esta estructura y los que están en contra. Están los que piensan que es demasiado detallado y otros que este detalle facilita una mayor legibilidad con mínima documentación.

[1] En algunos textos también se puede ver como la “Abuela”

[2] Pensado básicamente para el tratamiento de grandes volúmenes de datos, un mainframe es un ordenador muy grande.

[3] En la programación orientada a objetos, los objetos operan con los datos de entrada para obtener datos de salida concretos y donde cada objeto realiza una funcionalidad especifica.

5 - Introducción a la WEB

2020-04-12T00:01:00.000+02:00

Introducción a la WEB

Antes de seguir profundizando en cuestiones técnicas y complejas, y aunque la ansiedad nos lleve a querer hacer desde el principio un programa que funciona, primero debemos hacernos una idea de que es la Web. Si ya lo sabes puedes saltarte esta sección.

La World Wide Web, la Web, o WWW (en castellano “Tela de Araña Mundial”), es una red de recursos de información, estructurada en forma de hipertexto[1] y que funciona sobre la red Internet.

Hay aplicaciones que utiliza el usuario llamadas navegadores para poder acceder a los elementos de información que se llaman Páginas Web y mostrarlos en pantalla. Estas páginas web están almacenadas en ordenadores llamados Servidores o también Sitios Web.

Se puede acceder a nuevas páginas web haciendo “click” en los enlaces de la página que está visualizando en su navegador. A este proceso se le suele llamar Navegación Web.

También se puede enviar información al servidor web a través de estas páginas con la finalidad de interactuar con el servidor.

Funcionalidades en que se basa la web

Podriamos decir que laa web se basa en tres funcionalidades

URI (Identificador Uniforme de Recursos), especifica como se le asigna un único nombre a cada página de información.

HTTP (protocolo de transferencia de Hipertexto), especifica en forma de peticiones y respuestas como el navegador y el servidor intercambian información.

HTML (Lenguaje de marcas de Hipertexto), es la definición del método para codificar la información de los documentos y sus enlaces en forma de hipertexto.

[1] Hipertexto es la estructura que forman las distintas páginas web enlazadas.

4 - Como empezar con PHP y MySQL

2020-04-11T00:01:00.000+02:00

Como empezar con PHP y MySQL

Toda la teoría está muy bien, pero ¿cómo hago para poder hacer real la utilización de PHP y MySQL?

Pues bien, para poder probar nuestros códigos PHP, necesitamos un servidor web con PHP instalado.

La pregunta ahora es ¿Y donde consigo un servidor web con PHP, tengo que comprarlo?

No temáis, esto que parece complicado es muy simple. El servidor web con PHP podemos instarlo gratis en nuestro ordenador con “xamppp”.

Para instalar xampp primero deberéis descargar el archivo de instalación que se encuentra en el siguiente link https://www.apachefriends.org/es/index.html seleccionando la instalación adecuada para el sistema operativo del que disponéis.

Ilustración 1 Opciones de descarga de “xampp” en www.apachefriends.org

Una vez hemos descargado el archivo de instalación, solo nos queda instalarlo siguiendo las instrucciones que nos va dando, y listo, ya tendréis instalado un servidor apache con PHP y base de datos MySQL.

3 - PHP y MySQL

2020-04-10T00:01:00.000+02:00

PHP y MySQL

Ventajas de PHP y MySQL

Entre las principales ventajas para utilizar lenguaje PHP, está que es un lenguaje libre y abierto, con una curva de aprendizaje baja y además fácil de instalar, ya que existen paquetes autoinstalables que nos permiten integrar PHP muy rápidamente.

PHP tiene una conexión propia a todos los sistemas de bases de datos. Usa ODBC[1] (estándar de conectividad abierta de base de datos), lo que le permite establecer una conexión a cualquier base de datos que suministre un controlador ODBC. Es decir, una fácil integración y acceso a bases de datos.

PHP además incorpora gran cantidad de funciones. Funciones completas orientadas a objetos, como los lenguajes Java o C++.

MySQL además de ser muy rápido es gratuito. (Se pueden ver las condiciones de la licencia en el siguiente enlace: https://dev.mysql.com/doc/refman/8.0/en/preface.html).

[1] Open DataBase Connectivity.

***********

Filatelia y sellos on-line con informacion de cada pieza en

https://www.sooluciones.com

**************

2 - MySQL, ¿Que es?

2020-04-09T00:01:00.000+02:00

MySQL ¿Qué es?

MySQL para empezar podemos decir que es un sistema que permite la administración de bases de datos relacionales[i].

Este sistema es un servidor multiusuario, es decir que permite el acceso simultaneo a varios usuarios y es de código abierto[ii]

MySQL utiliza un lenguaje de consultas estructurado (Structured Query Languaje).

MySQL basa su arquitectura del tipo Cliente Servidor[iii].

Resumiendo, si utilizamos MySQL podemos almacenar y administrar datos en una base de datos relacional.

[i] Una base de datos relacional es una serie de elementos de datos con relaciones predefinidas entre ellos. Estos elementos están organizados en un conjunto de tablas con columnas y filas.

[ii] El Open Source o código abierto se utiliza para la identificación de software con una licencia que permite el acceso al código fuente, el cual puede ser modificado sin ninguna restricción en el uso.

[iii] Cliente-servidor es un modelo donde los clientes (demandantes) realiza peticiones a otro programa (servidor) quien se ocupa de dar la respuesta.

Wordpress 5

2018-12-16T19:01:00.000+01:00

Finalmente ya esta aqui Wordpress 5.

Parece que por el momento funciona todo bien a pesar de los retrasos y no se escuchan muchos comentarios de graves problemas de compatibilidad al migrar las versiones anteriores.

Como sabeis esta version tiene integrado en su core el editor Guttenberg.

Os dejo el enlace donde podeis descargar la última version

Wordpress 5

Ya contareis como les ha ido

Copiar textos en una web sin que Google te penalize con -blockquote-

2018-12-01T20:10:00.005+01:00

Evitar penalizaciones por contenido duplicado

Muchas veces es necesario citar texto de otras webs en nuestra propia web.

Cuando hacemos esto si no queremos ser penalizados por Google, debemos indicar que el texto citado es de otra web.

Para esto insertamos el texto citado utilizando las etiquetas

<blockquote> </blockquote>

Pongamos un ejemplo:

Tenemos que citar el texto de este mismo post "Copiar textos en una web sin que Google te penalize con -blockquote-"

Si copiamos este texto tal cual y lo insertamos en nuestra web, Google sabrá que es un parrafo copiado de otra web y penalizara el post o articulo. Si son muchos o trozos mas grandes de textos copiados toda la web perdera posicionamiento.

Para evitar esto utilizamos -blockquote- como en el siguiente ejemplo:

<blockquote>

Copiar textos en una web sin que Google te penalize con -blockquote- (Ref.: https://respiraweb.blogspot.com)

</blockquote>

Y además agregamos un link a la web de la cita si es posible o escribimos el nombre de la informacion de origen.

Haciendo esto Google sabrá que es una cita o mención de otra web y no penalizara la tuya por contenido duplicado.

WP GDPR con problemas de seguridad

2018-11-13T17:49:00.000+01:00

Les informamos de un importante problema de seguridad encontrado en en el plugin de Wordpress WP GDR

Ponemos aqui el enlace a la noticia.

El famoso plugin WP GDPR, con graves problemas de seguridad

Via / wwwhatsnew

En Ingles:

Articulo en ingles en zdnet.com/

Porque es importante optimizar tu web ?

2013-10-14T21:22:00.001+02:00

Tu web aparece en los buscadores?

Imagen: Suriel Ramzal

Muchas personas de pequeños comercios, con una web al estilo clásico/estático, con sus datos de empresa, preguntan. ¿Porque tengo que optimizar mi pagina web?, o, ¿Porque me tienen que encontrar los buscadores.

La respuesta es muy simple, y llevándolo al plano analógico, si su comercio tiene un numero de teléfono donde le pueden llamar sus clientes, lo lógico es que figure en la guía telefónica. Y si estuviese con letras destacadas mejor.

Por poner un ejemplo, si vende zapatos, querrá estar en las paginas amarillas en las secciones, zapatos, zapatería, botas, y todo lo que tenga que ver con lo que vende.

Pues bien, este concepto aplicado a internet es similar, con la diferencia que son miles de potenciales clientes que pueden encontrar su comercio, escribiendo por ejemplo “zapatería en Mojácar”, por ejemplo, y usted querrá que su comercio aparezca por “primero en los resultados de los buscadores” (cuando decimos su comercio, nos referimos a su pagina web).

Los que buscan en internet generalmente solo prestan atención a la primer pagina de resultados (los 10 primeros), por eso es tan importante estar “primeros en los buscadores”.

Si su web aparece en la segunda o mas paginas de resultados es muy probable que el que buscaba una zapatería en Mojácar no tome los datos de la suya, y si de alguna de las que aparecía en la primer pagina, o los diez primeros resultados.

Invertir en posicionar su web, es lo mejor que puede hacer por su negocio y aumentar los clientes. Somos expertos en marketing digital y podemos ayudarle. Se reirá de los precios.

Como dice Suriel Ramzal en su blog:

“… El objetivo principal de tener presencia en línea es que la gente te vea, lea y tenga idea de tu existencia. La mayoría empieza siempre por un buscador cuando necesita enterarse de algo o buscar algún producto o servicio, generalmente sólo ponen atención a la primera página de los resultados de búsqueda, si no apareces ahí, estás perdiendo presencia en internet. … “

Déjenos su pregunta con mucho gusto contestaremos a todas sus consultas. “ Primero en los buscadores “

97 - HTML - El elemento <img>

2012-10-31T07:18:00.001+01:00

Para incluir una imagen en nuestro documento utilizamos el elemento “img”, este elemento solo tiene etiqueta de inicio. No tiene etiqueta de fin <img …>.
Este elemento necesita del uso del atributo src, cuyo valor será la URL de la imagen que queremos incluir.
<img src= “columbia.jpg” />
La imagen es un recurso que se incluye en el documento HTML, por lo tanto, se puede incluir con un path absoluto o relativo. O una URL del tipo http a un servidor externo.
<html>
<head>
<title>Imágenes</title>
</head>
<body>
<img width="288" height="51" src="http://www.nasa.gov/templateimages/template/header/logo_nasa.gif">
<br>
img src="http://www.nasa.gov/templateimages/template/header/logo_nasa.gif"
<br>
<p><img src="images/columbia.jpg"> </p>
<p>img src="images/columbia.jpg"</p>
</body>
</html>
Programa 80
img src="http://www.nasa.gov/templateimages/template/header/logo_nasa.gif"
img src="images/columbia.jpg"
Ilustración 20 – Uso del elemento <img>.

96 - HTML - Imágenes

2012-04-18T08:00:00.000+02:00

La inclusión de imágenes en nuestros documentos, son el siguiente paso hacia el concepto de Hipermedia. Con las imágenes podremos completar de forma gráfica la información que contienen nuestros documentos, dar una mejor presentación, e incluso expresar ideas que antes solo se expresaban en formato texto. Como dicen “una imagen es mejor que mil palabras”.

Para completar el aspecto gráfico de un documento podremos añadir imágenes dentro de los textos, o como fondo de un documento.

En la siguiente ilustración, se puede observar un ejemplo de documento combinado con imágenes.

Ilustración 19 - Texto con imágenes.

95 - HTML - Color de los vinculos, atributos de "body"

2012-04-17T08:02:00.000+02:00

Los colores con los que se muestran los vínculos pueden ser definidos en la etiqueta <body>. Estos colores vienen definidos por defecto, pero mediante estos atributos de <body> se pueden variar según los criterios o necesidades del documento para un caso u otro. Los colores nos permiten identificar fácilmente los vínculos dentro de nuestra página, así como saber el estado del mismo (visitado, no visitado, etc.).

Los atributos son:

· link="color" indica el color de un texto con vinculo.

· vlink="color" indica el color de un vínculo que ya ha sido visitado.

· alink="color" indica el color de un vínculo activo, sólo se visualiza el color al mantener pulsado el enlace, sin llegar a realizar la petición de ir a donde señala el vínculo.

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

<html>

<head>

<title>Ejemplo de colores de Vinculos con "body"</title>

</head>

<a name="principio"></a> Principio <br>

<a name="2dodestino"></a> 2do. destino <br>

<a name="3erdestino"></a> 3er. destino <br> <br>

<a href="#principio">Vinculo visitado (link)</a> <br>

<a href="#2dodestino">Vinculo activo (vlink)</a> <br>

<a href="#principio">Vinculo (alink)</a>

</body>

</html>

Programa 79

Ejemplo en el navegador, (solo ha funcionado con I. Explorer).

Ilustración 18 - colores en los vínculos.

En la imagen (Ilustración 18 - colores en los vínculos.) podemos ver en color rojo un vínculo ya visitado, en color verde, el vínculo activo, sobre el que aún no se ha hecho “click” y un vínculo sobre el que hacemos “click” sin soltar el botón, es decir que aún no hemos ido al vínculo.

Estos atributos están desaprobados en favor de las hojas de estilo, y si lo probáis, podréis comprobar que no tienen los mismos efectos en un navegador que en otro.

94 - HTML - Enlaces a un determinado lugar de otro documento “href”

2012-04-16T08:00:00.000+02:00

Igual que veíamos como usar los enlaces dentro del mismo documento html, también podemos acceder a un lugar en concreto de otro documento distinto al actual.

Para lograr esto utilizamos el atributo “href”, el documento que contiene el ancla seguido del carácter # y del identificador del ancla.

La sentencia quedaría redactada como sigue:

<a href="documentohtml.html#parrafoX"> ... </a>

En documentohtml.html, tendremos un “ancla” llamada “parrafoX”, que puede indicarse por cualquiera de las dos formas ya vistas “id” o “name”.

Así de esta manera el código dirigirá la acción a la página html indicada y dentro de esta al ancla especifica.

Código de Ejemplo aplicando las características vistas anteriormente:

Documento “principal.html”, (desde donde enviamos el enlace)

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

<html>

<head>

<title>Ejemplo de enlaces dentro de otro documento html</title>

</head>

<body>

SEMANAL PRENSA</font></strong><br>

</h3>

<hr>

<a href="documentohtml.html#eeuu"> desde aqui nos vamos a otra pagina y punto de enlace. </a>

</strong></font>

</h2>

<a href="#principio">Volver</a>

</strong></font>

</body>

</html>

Programa 77

Ilustración 16 - Documento principal.

Documento “documentohtml.html”, es la página html a donde enviamos el enlace anterior.

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

<html>

<head>

<title>Ejemplo de enlaces dentro de otro documento html</title>

</head>

<body>

SEMANAL PRENSA</font></strong><br> </h3> <hr>

Union Europea (UE):</strong></font></h2>

<h2><font size="2" face="Verdana">página y punto ha donde nos ha dirigido el enlace del documento principal, para volver hemos insertado un enlace hacia atrás.

</font> </h2>

<a href="principal.html#principio">Volver</a>

</strong></font>

</body>

</html>

Programa 78

Ilustración 17 - Destino del enlace.

93 - HTML - Enlaces “name” “id”

2012-04-15T13:58:00.001+02:00

Con los atributos “name” o ”id”, podemos crear enlaces dentro del mismo documento.

De esta manera podemos vincular diferentes recursos dentro de un documento, o accesos rápidos.

Para poder dirigirnos a un sitio determinado debemos definir las anclas de destino, para ello es que utilizamos los atributos “name” o “id”

El formato para el caso de utilizar “name” es el siguiente:

<a name="destino" />
Y en caso de utilizar “id”, el formato seria el siguiente:

<etiqueta id="destino"> ... </etiqueta>

El atributo “id” puede ser incluido en todas las etiquetas que admitan este atributo.

Una vez definidos los anclajes podemos acceder a este punto (el punto marcado con “id” o “name”) con la siguiente sentencia. El nombre del destino se debe indicar precedido del signo #.

<a href="#destino"> ... </a>

La acción que se efectúe sobre el vínculo con el valor ‘#destino’ del atributo ‘href’, llevara al destino indicado del documento html en la parte superior del navegador.

El ejemplo de código parece un poco más complicado, pero si lo observáis con detenimiento, os daréis cuenta que con los conocimientos adquiridos hasta ahora podéis entenderlo o hacerlo vosotros mismos. Se trata de una supuesta hoja de noticias internacionales, donde haciendo <click> en los diferentes países el cursor se ubica en las noticias de ese país.

Código de Ejemplo aplicando las características vistas anteriormente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Ejemplo de enlaces dentro de un documento html - Noticias Internacionales</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
        <h3 align="center"><font face="Verdana"><strong><font size="2"><a name="principio"></a>SEMANAL PRENSA</font></strong><br>
      <font size="5">NOTICIAS INTERNACIONALES</font><br>
      <font size="1">INFORMACION INTERNACIONAL</font></font><br>
      <font size="3" face="Verdana">Regiones: <a href="#eeuu">EEUU</a> - <a href="#cee">CEE</a> - <a href="#japon">Japón</a> - <a href="#restodelmundo">Resto del Mundo</a></font></h3>
        <hr>
        <h2><font color="red" size="4" face="Verdana"><strong><a name="eeuu" id="eeuu"></a>Estados Unidos (EEUU):</strong></font></h2>
        <h2><font size="2" face="Verdana">Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... </font> </h2>
        <font size="1" face="Verdana"><strong><a href="#principio">Volver</a></strong></font>
        <h2><font color="red" size="4" face="Verdana"><strong><a name="cee" id="cee"></a>Comunidad Económica Europea (CEE):</strong></font></h2>
        <h2><font size="2" face="Verdana">Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información....Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... </font></h2>
        <font size="1" face="Verdana"><strong><a href="#principio">Volver</a></strong></font>
        <h2><font color="red" size="4" face="Verdana"><strong><a name="japon" id="japon"></a>Japón :</strong></font></h2>
        <h2><font size="2" face="Verdana">Japón logra construir el primer robot capaz de escribir programas en html sin ayuda humana, este sensacional proyecto fue desarrollado en este pais, a raiz de que los estudiantes se negaban a escribir codigo. Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... </font> </h2>
        <font size="1" face="Verdana"><strong><a href="#principio">Volver</a></strong></font>
        <h2><font color="red" size="4" face="Verdana"><strong><a name="restodelmundo" id="restodelmundo"></a>Resto del Mundo:</strong></font></h2>
        <h2><font size="2" face="Verdana">Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información....Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... Información.... </font> </h2>
        <font size="1" face="Verdana"><strong><a href="#principio">Volver</a></strong></font>
    </body>
</html>

Programa 76

Representación en el navegador:

Ilustración 11 - Ejemplo enlaces 'name' e 'id'

1 - PHP, MySQL, XML, CSS, HTML, Java script

2012-01-11T16:03:00.000+01:00

PHP, MySQL, XML, CSS, HTML, Java script

Los no iniciados en la programación web se preguntaran que quieren decir los jeroglíficos del título.

Pues son lenguajes y herramientas de programación para crear sitios web interactivos.

Con estas herramientas se pueden crear desde los formularios más sencillos a los sitios de comercio electrónico más complejos, y lo que es mejor, que se trata de tecnologías de código abierto.

Recomendamos para el que lea esta información una cierta experiencia en HTML y lenguajes de programación, y no estaría demás tener alguna noción de bases de datos relacionales.

De todas maneras todos nuestros artículos trataran de ser claros, sencillos y cortos. Con ejemplos que ayuden a la comprensión.

Si conoce, o alguna vez ha creado una página web con HTML, sabrá que tiene sus limitaciones, con HTML se crean sitios estáticos, fijos. Los usuarios no pueden ínter-actuar con el sitio de forma significativa.

Sin embargo con PHP y MySQL, se pueden crear sitios Web dinámicos, donde se muestre información en tiempo real y que el usuario pueda ínter-actuar con ella.

PHP es concebido por Rasmus Lendorf en 1994. Este lenguaje (PHP) de secuencia de comando de servidor diseñado específicamente para la web, puede incrustar código dentro de una página, que se ejecutará, será interpretado en el servidor Web y generará código HTML y otros contenidos.

PHP es un lenguaje de código abierto, lo que significa que puede ser modificado y redistribuido sin coste alguno.

PHP ahora significa “Hipertext Preprocessor”, antes significaba “Personal Home Page”.

Nosotros nos enfocaremos básicamente en la confección de páginas web con html, ya que es la base para el desarrollo del resto de las herramientas.

92 - HTML - Vínculos <a></a>

2011-12-07T22:00:00.000+01:00

HTML nos ofrece muchas de las posibilidades de publicación convencionales para la creación de documentos estructurados y textos enriquecidos.

La principal diferencia entre HTML y la mayoría de los otros lenguajes en cuanto al formato de documentos, es sus características para confeccionar documentos interactivos y formatos de hipertexto.

Aunque el “vinculo” es algo simple, es una de las principales características que ha hecho de la Web un éxito.

Un vínculo tiene dos “anclas” (en inglés: “anchors”), dos extremos, y una dirección.

Un vínculo comienza en el ancla de origen y apunta al ancla destino, que puede ser cualquier recurso de la web o de la propia página HTML.

Por defecto un vínculo está asociado a la redirección hacia otro recurso de la web. Normalmente se accede a este recurso buscado, seleccionando el vínculo (ya sea haciendo clic con el ratón, a través del teclado u otros métodos).

Cuando se activa este vínculo aplicando alguno de los métodos listados anteriormente (clic u otro), los usuarios acceden a los recursos a los que apunta el vínculo (ancla de destino).

En resumen podemos decir que un “vinculo”, permite conectar o acceder a otro recurso en cualquier otra web de cualquier parte del mundo o incluso nuestra propia web.

Los vínculos se crean con el elemento <a></a>

El elemento <a> </a> tiene las siguientes características:

Tiene etiqueta de inicio <a> y etiqueta de fin </a>.
El contenido del elemento se denomina ancla. (Si se trata de un texto, por defecto viene en color azul).
El atributo ‘href’ indica el ancla de destino, que puede ser cualquier tipo de recurso web.
El recurso de destino viene expresado por su URL (Localizador Universal de Recursos).

Ejemplo:

<a href="http://bobuu.blogspot.com">Este otro vinculo apunta a la página del blog bobuu</a>

Explicación del ejemplo:

<a : (Etiqueta de inicio)
</a> : (Etiqueta de fin)
href : (atributo href)
http://bobuu.blogspot.com : (URI destino: valor de href)
Este otro vínculo apunta a la página del blog bobuu (texto, imagen, etc)
Código de Ejemplo aplicando las características vistas anteriormente:

<html>
    <head>
        <title>Ejemplo de vinculo</title>
    </head>
    <body>
        <p>
          ejemplo de vinculo incompleto y completo: <br>
          <a>Aqui un enlace incompleto, porque no tiene dirección de destino</a>. <br>
          <a href="http://bobuu.blogspot.com">Este otro vinculo apunta a la página del blog bobuu</a>.
        </p>
    </body>
</html>

Programa 75

Ilustración 10 - Vinculos.

91 - HTML - Tablas - Agrupamientos lógicos “colgroup" y "col”

2011-12-05T22:00:00.000+01:00

Así cómo es posible agrupar lógicamente filas en las tablas, también podemos realizar agrupaciones lógicas de columnas verticales. Para esta tarea utilizamos los elementos <colgroup> y <col> indicando las columnas que forman parte del grupo.

Cuando no se encuentra la etiqueta <colgroup> el navegador entiende que todo forma parte de un solo grupo. Las propiedades definidas para un grupo solo afectaran a las columnas del grupo.

La etiqueta <colgroup> tiene los siguientes atributos:

span : Con este atributo especificamos el número de columnas que componen el grupo. Si no definiéramos este atributo el grupo contendría una sola columna. Para el caso de definirse uno o más elementos <col>, los navegadores ignoraran el atributo span.

width : Con este atributo podemos definir un ancho de columna por defecto, para el grupo. Además de los valores normales (pixel, porcentaje, etc.), este atributo permite el valor especial “ 0* ” (es un cero y un asterisco), esto le indica que el ancho de cada columna del grupo debe ser la mínima para alojar los contenidos de las columnas. O sea que antes de calcular el ancho de la columna se deben conocer los contenidos para que entren en ella. Al igual que con el atributo “span”, en caso de especificarse el ancho mediante un elemento <col>, será este el que determine el tamaño (el <col>).

Para definir un grupo de columnas utilizamos <colgroup span=”n”>, donde “n” es el número de columnas que forman el grupo (Ej: <colgroup span=”4”, esto determinaría un grupo de 4 columnas).

No es posible utilizar las dos formas de definir columnas (span y col) ya que en caso de utilizarse las dos, siempre <col> prevalecerá sobre “span”.

La ventaja de span sobre col es que con col debemos definir columna por columna, mientras que con span podemos por ejemplo definir 50 columnas de un ancho determinado de una sola vez, mientras que con “col” debemos hacerlo columna a columna (50 veces).

Es más fácil escribir:

<!--el ancho de las 50 columnas es de 15 px -->

    <colgroup span="50" width="15">

    </colgroup>

que:

    <colgroup> grupo de 50 columnas con ancho de 15 px...

       <col width="15">  primer columna, ancho 15 píxeles

       <col width="15">  segunda columna, ancho 15 píxeles

       . . . . . .

       repitiendo 50 veces las líneas hasta definir todas las columnas

      <col>... 

     </colgroup>

repitiendo 50 veces las líneas hasta definir todas las columnas

      <col>... 

     </colgroup>

Si necesitamos diferenciar una columna de las del resto del grupo, debemos identificar el ancho de esa columna con un elemento <col>.

<colgroup width="20">
<col span="20" align="center">
<col id="formato diferente"> “id = número de la columna con formato diferente”
</colgroup>

El atributo width="20" del elemento <colgroup> se aplica a las veinte columnas.

El primer elemento <col> se refiere a las primeras 20 columnas, y alinea su contenido a la derecha, y el segundo asigna un identificador a la columna número “formato diferente” de modo que podemos hacer que una hoja de estilo haga referencia a ella.

Con el elemento <col> podemos compartir atributos entre varias columnas sin que ello implique ningún tipo de agrupamiento estructural.

El "campo de acción" del elemento <col> es el número de columnas que compartirán los atributos del elemento.

Los atributos disponibles del elemento <col> son:

span : El valor de este atributo debe ser un entero mayor que cero, especifica el número de columnas que "abarca". <col> comparte sus atributos con todas las columnas que abarca. De no aparecer este atributo <col> solo se refiere a una columna.

width : Especifica el ancho por defecto para todas las columnas abarcadas por el elemento <col>. Tiene el mismo significado que el atributo ‘width’ del elemento <colgroup> y prevalece sobre él.

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
<head>
    <title>Tabla - Ejemplo de Agrupamientos lógicos</title>
</head>
<body>
    <table border="1" bordercolorlight="red" bordercolordark="maroon" >
      <caption>Tabla - Ejemplo de Agrupamientos lógicos</caption>
        <colgroup span="1" width="30" bgcolor="green" </colgroup>
        <colgroup span="2" width="40" bgcolor="yellow" </colgroup>
        <colgroup span="1" width="50" bgcolor="red" </colgroup>
        <tr>
         <th>Nombre</th>
         <th>Telefono</th>
         <th>Otros</th>
         <th>Comentarios</th>
        </tr>
        <tbody>
      <tr>
         <td>Expansion hacia abajo</td>
         <td>derecha</td>
         <td>centro</td>
         <td>texto justificado izq. y derecha</td>
      </tr>
      <tr>
         <td>Izquierda</td>
         <td>derecha</td>
         <td>centro</td>
         <td>texto justificado izq. y derecha</td>
      </tr>
      <tr>
         <td>Expansion hacia la derecha</td>
         <td>derecha</td>
         <td>centro</td>
         <td>texto justificado izq. y derecha</td>
      </tr>
        </tbody>
   </table>
</body>
</html>

Programa 74

En ejemplo hemos definido tres grupos de columnas la primer color verde, las 2 siguientes amarillas y la tercera roja.

Ilustración 9 - Agrupamientos Lógicos en columnas.

Una forma muy común de agrupamientos que se pueden ver en las páginas web que se visitan, es insertar una tabla dentro de otra o una al lado de otra. Con esto logramos ubicar en nuestra página los diferentes elementos que la componen. Aunque se utiliza, el consorcio W3C, recomienda utilizar hojas de estilo para conseguir este resultado.

90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”

2011-12-03T22:00:00.000+01:00

Podemos mediante la formación de grupos lógicos de filas, asignarles propiedades o cumplir una determinada función específica que solo afectaran a esas filas. Como ejemplo podría ser la composición de una cabecera o un pie de tabla.

Para estas funciones utilizamos los atributos “thead”, “tfoot” y “tbody”.

<thead>: Con “thead” podemos especificar un encabezado (head) en una tabla. Las filas que se incluyan entre las etiquetas de inicio y de fin de “thead”, aparecerán siempre como encabezado en la tabla. Solo se define un encabezado por tabla.

<tfoot> : Al igual que con “thead”, “tfoot” nos permite especificar el pie (foot) de la tabla. También al igual que en el encabezado las filas que se incluyen entre las etiquetas de inicio y de fin aparecerán siempre al final de la tabla. Sólo se define una vez por tabla.

<tbody> : Con esta etiqueta podemos agrupar la zona que falta, el cuerpo (body) de la tabla. Las filas que se incluyen entre las etiquetas de inicio y fin de esta etiqueta delimitan un grupo de filas con características comunes en cuanto a su contenido, esto nos permite atribuirles propiedades comunes para esas filas. A diferencia de “thead” y “tfoot”, con “tbody”, podemos definir todos los grupos de filas que consideremos necesarios.

Estas etiquetas son útiles para varias situaciones, que ya a cada uno se le ocurrirá, a modo de ejemplo podemos decir que se pueden aplicar para los casos donde se imprimen tablas largas y debemos repetir la información de la cabecera y el pie en todas las páginas que contengan datos de la tabla.

Es recomendable que en el pie (tfoot) y en el encabezado (thead), se incluya información relativa a las columnas de la tabla. Y el cuerpo de la tabla (tbody) debería contener filas de datos.

En el caso de estar presentes las tres etiquetas, cada elemento contiene un grupo de filas, y cada grupo debe tener como mínimo una fila.

Como nota cabe indicar que “tfoot” debe aparecer antes de “tbody” para que los navegadores puedan representar el pie antes de recibir todos los datos del cuerpo de la tabla.

<tbody> es siempre obligatoria, excepto cuando la tabla no tenga sección de cabecera ni de pie.

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
<head>
    <title>Tabla - Ejemplo de Agrupamientos lógicos</title>
</head>
    <body>
       <table width="50" height="50" border="1" bordercolorlight="red" bordercolordark="maroon" >
       <caption>Tabla - Ejemplo de Agrupamientos lógicos</caption>
                    <thead bgcolor="yellow">
                        <tr>
                     <th width="20%" >Nombre</th>
                     <th width="20%" >Telefono</th>
                     <th width="20%" >Otros</th>
                     <th width="20%">Comentarios</th>
                  </tr>
                    </thead>

                    <tfoot bgcolor="green">
                   <tr>
                     <td colspan="4" align="center">Pie de tabla de ejemplo</td>
                   </tr>
                    </tfoot>

                    <tbody>
                        <tr>
                            <td width="20%" align="left">Expansion hacia abajo</td>
                            <td width="20%" align="right">derecha</td>
                            <td width="20%" align="center">centro</td>
                            <td width="20%" align="justify">texto justificado izq. y derecha</td>
                        </tr>
                        <tr>
                            <td width="20%" align="left">Izquierda</td>
                            <td width="20%" align="right">derecha</td>
                            <td width="10%" align="center">centro</td>
                            <td width="20%" align="justify">texto justificado izq. y derecha</td>
                        </tr>
                        <tr>
                         <td width="20%" >Expansion hacia la derecha</td>
                         <td width="20%" align="right">derecha</td>
                         <td width="20%" align="center">centro</td>
                         <td width="20%" align="justify">texto justificado izq. y derecha</td>
                        </tr>
                </tbody>
   </table>
</body>
</html>

Programa 73

En ejemplo hemos pintado de amarillo la cabecera, hemos dejado de blanco el cuerpo y pintado de verde el pie.

Ilustración 8 - Tabla utilizando agrupamientos lógicos.

Como ejercicio práctico podríais, por ejemplo, intentar insertar uno o más agrupamientos lógicos <tbody> con otro color en el cuerpo de la tabla.

89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”

2011-12-01T22:00:00.000+01:00

Podemos indicar al contenido de una celda que se expanda en su columna o en su fila. Esto lo logramos con los atributos “colspan” (para columnas) y “rowspan” para expandir en la fila.

Los valores de estos atributos es un valor numérico que indica el número de columnas que se expande hacia la derecha para el caso de “colspan”, y para el caso de “rowspan”, el valor indica el número de filas que se expande hacia abajo.

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
<head>
    <title>Tabla - Ejemplo de combinación de celdas</title>
</head>
<body>
      <table width="50" height="50" border="1" bordercolorlight="red" bordercolordark="maroon" >
            <caption>Tabla - Ejemplo de combinación de celdas</caption>
                <tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th width="20%" >Otros</th>
         <th width="20%">Comentarios</th>
      </tr>
      <tr>
         <td rowspan="2" bgcolor="yellow" width="20%" align="left">Expansion hacia abajo - rowspan</td>
         <td width="20%" align="right">derecha</td>
         <td width="20%" align="center">centro</td>
         <td width="20%" align="justify">texto justificado izq. y derecha</td>
      </tr>
      <tr>
         <td width="20%" align="left">Izquierda</td>
         <td width="20%" align="right">derecha</td>
         <td width="10%" align="center">centro</td>
         <td width="20%" align="justify">texto justificado izq. y derecha</td>
      </tr>
      <tr>
         <td colspan="2" bgcolor="red" width="20%" >Expansion hacia la derecha - colspan</td>
         <td width="20%" align="right">derecha</td>
         <td width="20%" align="center">centro</td>
         <td width="20%" align="justify">texto justificado izq. y derecha</td>
      </tr>
   </table>
</body>
</html>

Programa 72

Representación en el navegador: Hay que tener un poco de cuidado ya que los diferentes navegadores pueden representar de diferentes maneras estos atributos.

Ilustración 7 - Ejemplo de combinación de Celdas

88 - HTML - Tablas - Alineación de tablas “left, center, right”

2011-11-29T22:00:00.000+01:00

Las tablas pueden ser alineadas horizontalmente dentro de un documento, de acuerdo a nuestros requerimientos. El atributo “align” nos permite especificar la posición de la tabla respecto al documento. Este atributo esta desaprobado en favor de las hojas de estilo.

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
<head>
    <title>Tabla - Ejemplo de alineación de tablas</title>
</head>
<body>
       <table align="right" width="50" height="50" border="1" bordercolorlight="red" bordercolordark="maroon" >
                <caption>Tabla de ejemplo de alineación derecha</caption>
                <tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th width="20%" >Otros</th>
         <th width="20%">Comentarios</th>
      </tr>
      <tr>
         <td width="20%" align="left">Izquierda</td>
         <td width="20%" align="right">derecha</td>
         <td width="20%" align="center">centro</td>
         <td width="20%" align="justify">texto justificado izq. y derecha</td>
      </tr>
      <tr>
         <td width="20%" align="left">Izquierda</td>
         <td width="20%" align="right">derecha</td>
         <td width="10%" align="center">centro</td>
         <td width="20%" align="justify">texto justificado izq. y derecha</td>
      </tr>
      <tr>
         <td width="20%" align="left">Izquierda</td>
         <td width="20%" align="right">derecha</td>
         <td width="20%" align="center">centro</td>
         <td width="20%" align="justify">texto justificado izq. y derecha</td>
      </tr>
   </table>
</body>
</html>

Programa 71

Representación en el navegador: Cambiando los valores de “align” por ‘center’ o ‘left’, podemos alinear la tabla en el centro o a la izquierda respectivamente.

Ilustración 6 - Uso del atributo 'align' en tablas.

87 - HTML - Tablas - Atributo “summary”

2011-11-27T22:00:00.000+01:00

Con este atributo (summary) podemos definir de qué trata la tabla (propósito, objeto, función, etc.), en teoría en navegadores que utilicen sintetizadores de voz, debería tener algún efecto. Se aplica para navegadores no visuales (Braile, voz, etc.)

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
<head>
    <title>Tabla - Ejemplo de "summary"</title>
</head>
<body>
       <table width="100" height="50" border="1" bordercolorlight="red" bordercolordark="maroon" cellspacing="50" cellpadding="50%" summary="Esta es una tabla de prueba para ver el efecto de diferentes etiquetas y atributos">
            <caption>Tabla de ejemplo</caption>
            <tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th width="20%" >Otros</th>
         <th width="20%">Comentarios</th>
      </tr>
      <tr>
         <td width="20%" align="left">Izquierda</td>
         <td width="20%" align="right">derecha</td>
         <td width="20%" align="center">centro</td>
         <td width="20%" align="justify">texto justificado izq. y derecha</td>
      </tr>
      <tr>
         <td width="20%" align="left">Izquierda</td>
         <td width="20%" align="right">derecha</td>
         <td width="10%" align="center">centro</td>
         <td width="20%" align="justify">texto justificado izq. y derecha</td>
      </tr>
      <tr>
         <td width="20%" align="left">Izquierda</td>
         <td width="20%" align="right">derecha</td>
         <td width="20%" align="center">centro</td>
         <td width="20%" align="justify">texto justificado izq. y derecha</td>
      </tr>
   </table>
</body>
</html>

Programa 70

Hemos probado el código en Chrome, IE, IE 64 bits, y no hemos visto ninguna diferencia, seguramente porque no utilizan ningún sintetizador de voz.