Por una Web con equidad...

Deja que tus ideas se vuelvan realidad a escala global, que tu horizonte laboral se extienda en un tiempo relativamente corto y con una inversión relativamente económica. En una emocionante y gratificante aventura por saber los lenguajes "de programación, ...", tan reales y útiles actualmente como un segundo idioma lo es a alguien "tradicionalmente" bilingüe. Con los contenidos temáticos que publicare, sobre HTML, CSS, Ruby, Java, PHP, SQL, C#, ... Novedades, noticias y tendencias.

lunes, 3 de abril de 2017

La Ventana Virtual y HTML - comentario

Tutorial de HTML y principalmente su version 5

Configurar la Ventana Virtual (Viewport en ingles)

Una ventana virtual es similar a una ventana real pero en su función, es decir, nos permite ver pero limita nuestra visión. No es el mismo concepto que describe por ejemplo, a la ventana del navegador, la del procesador de texto, o del reproductor de medios.

HTML5 introdujo un método, a través de la etiqueta <meta>, que permite a los diseñadores web tomar el control de la ventana virtual (viewport).

La ventana virtual es el área (de una página web) visible al usuario. Esta varia de dispositivo a dispositivo, siendo más pequeña en la pantalla de un teléfono móvil que en la de una computador.

Varía también la configuración que cada navegador utiliza de modo predeterminado para establecer la ventana virtual. Por esta razón, deberías incluir en todas tus páginas web, el elemento <meta> que a continuación se te presenta. Ya que proporciona buenos ajustes para la ventana virtual (viewport):

Un elemento <meta> destinado a la ventana virtual (viewport), le da al navegador instrucciones sobre cómo manejar las dimensiones y la escalada, escalamiento, o ajuste de la pagina.

Expliquemos esa linea de código:

La parte “width=device-width” establece el ancho (width) de la pagina para que iguale el ancho de la pantalla del dispositivo (device-width) (que variara según el dispositivo).

La parte “initial-scale=1.0” establece el nivel inicial de aumento/alejamiento o zoom de la pagina para cuando esta se cargue. En esta ocasión, el nivel inicial es 1.0 o 100%, lo que significa “ninguno”.

También debo mencionar que hay ciertas diferencias entre las especificaciones físicas y lógicas de la pantalla de un dispositivo.

Luego trataremos el resto de este subtema, importante para la versión móvil de tu sitio web. Por ahora basta con esta breve introducción.

Puedo omitir <html>, <head> y <body>?

De acuerdo al estándar HTML5; la etiqueta <html>, la etiqueta <body> y la etiqueta <head> se pueden omitir.

El siguiente código sería validado como HTML5:

<!DOCTYPE html>
<title>Titulo de Pagina</title>

<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>

Observación: no se recomienda omitir las etiquetas <html> y <body>, ya que puede hacer funcionar mal al software DOM o XML y producir errores en navegadores antiguos (IE9).

Sin embargo, el omitir la etiqueta <head> ha sido algo común desde hace ya algún tiempo.

Resumen de lo aprendido:

Etiqueta	Descripción
<head>	Contendrá los metadatos del documento
<title>	Define el titulo de un documento
<base>	Define una dirección por defecto o un receptor por defecto para todos los enlaces de una pagina
<link>	Define una relación entre un documento y un recurso externo
<meta>	Proporciona otros metadatos de un documento HTML
<script>	Define un guion a ejecutar en el lado del usuario
<style>	Define información de estilo para un documento

El elemento HTML <head>

Tutorial de HTML y principalmente su version 5

La cabecera de un archivo HTML

El elemento HTML <head>

El elemento <head> es un contenedor para los metadatos (la información acerca de la información) y se coloca entre la etiqueta <html> y la etiqueta <body>.

Los metadatos HTML son información acerca del documento HTML. Los metadatos no se muestran.

Típicamente los metadatos abarcan el titulo del documento, el juego de caracteres, los estilos, los enlaces, los guiones, y aun “información extra”.

Las siguientes etiquetas describen el tipo de metadatos dentro del elemento <head>:

<title>, <style>, <meta>, <link>, <script>, <base>.

El element HTML <title>

El elemento <title> define el titulo del documento, y se require en todos los documentos HTML y XHTML.

El elemento <title> provee dicho título a:

La pestaña del navegador web.
La nueva entrada o nuevo marcador agregado a la sección “favoritos” del navegador. Como valor por defecto para el nombre de esta.
El resultado correspondiente a nuestra página web en la lista presentada por un motor de búsqueda luego de consultarlo.

A continuación, un documento HTML sencillo:

<!DOCTYPE html>
<html>
 <head>
   <title>Titulo de Pagina</title>
 </head>
 <body>
   El contenido del documento......
 </body>
</html>

El elemento HTML <style>

El elemento <style> define información de estilo que será usada para solo una página HTML (quien la contiene):

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

El elemento HTML <link>

El elemento <link> se usa para enlazar a nuestra página web, hojas de estilo externas:

Aprenderás todo sobre CSS en una futura guía dedicada a este otro lenguaje.

El elemento HTML <meta>

El elemento <meta> se usa para especificar que juego de caracteres se está usando en el texto, también para especificar la descripción de página, las palabras claves, el autor, y otros metadatos.

Algunos ejemplos de uso de la etiqueta <meta>:

<head>
 <meta charset="UTF-8">
 <meta name="description" content="guias gratuitas por la fascinante web">
 <meta name="keywords" content="HTML,CSS,XML,JavaScript">
 <meta name="author" content="Jose Picapiedra">
</head>

Expliquemos el ejemplo:

Definir el juego de caracteres empleado:

Definir una descripción acerca de tu página web:

Definir palabras claves para los motores de búsqueda:

Definir al autor de una página web:

Refrescar el documento cada 30 segundos:

El atributo “http-equiv” de la etiqueta <meta>, permite simular uno de los campos de la cabecera de un mensaje de petición o respuesta del protocolo HTTP. Con la abreviación “equiv” para “equivalente”, el valor “refresh” como el campo de cabecera HTTP que se está simulando, y el valor “30” del atributo “content” vendría a ser en verdad el valor para el campo de cabecera, ya que “http-equiv” y “content” están relacionados al igual que “name” y “content” en los anteriores.

Los metadatos son usados por los navegadores (para tener certeza de cómo presentar el contenido), por los motores de búsqueda (para conocer el contenido rápidamente mediante las palabras claves), y por otros servicios web.

El elemento HTML <script>

El elemento <script> se usa para definir guiones JavaScript.

El guion JavaScript de abajo escribe “Hola JavaScript!” dentro de un elemento HTML con identificador “prueba”:

<script>
function unaFuncion {
    document.getElementById("prueba").innerHTML = "Hoja JavaScript!";
}
</script>

El elemento HTML <base>

El elemento <base> especifica la URL base para las URLs relativas de una página, o la URL por defecto para un enlace sin valor para su atributo href (<a href=“”>Un enlace</a>). Y especifica también el receptor (target) por defecto para todas las URLs de la misma página:

domingo, 19 de marzo de 2017

HTML y las rutas de archivo

Tutorial de HTML y principalmente su version 5

Rutas de archivo

Ruta	Descripcion
<img src="foto.jpg">	El archivo foto.jpg esta ubicado en la misma carpeta que la pagina web actual
<img src="imagenes/foto.jpg">	El archivo foto.jpg esta ubicado en la carpeta 'imagenes', la cual esta alojada en la carpeta actual
<img src="/imagenes/foto.jpg">	El archivo foto.jpg esta ubicado en la carpeta 'imagenes', la cual esta alojada en la raiz del sitio web actual
<img src="../foto.jpg">	El archivo foto.jpg esta ubicado en la carpeta que aloja a la carpeta actual

Rutas de archivo

Una ruta de archivo describe la ubicación de un archivo dentro de la estructura de carpetas de un sitio web.

Las rutas de archivo son usadas cuando se quieren enlazar archivos externos a la página, archivos como:

Otra página Web
Una imagen
Una hoja de estilo
Un guion JavaScript

Rutas de archivo absolutas

Una ruta de archivo absoluta es la URL completa hacia un archivo en la Internet:

Rutas de archivo relativas

Una ruta de archivo relativa toma en cuenta la ubicación de la página web actual para describir/trazar el camino hacia un archivo local.

Abajo, la ruta de archivo apunta a un archivo de la carpeta ‘ciencia’, que está ubicada en la raíz del presente sitio web:

En el siguiente ejemplo la ruta de archivo apunta a un archivo de la carpeta ‘reptiles’, que está ubicada en la carpeta actual:

A continuación, la ruta de archivo apunta a un archivo de la carpeta ‘espacio’, que está ubicada en la carpeta que aloja la carpeta actual:

Rutas de archivo absolutas o relativas?

Lo mejor es usar rutas de archivo relativas (siempre que sea posible).

Al usar rutas de archivo relativas, tus páginas web no estarán atadas a tu presente URL base (la parte constante en la barra de direcciones de tu navegador web).

Consideremos el área educativa del sitio web ficticio "www.ejemplo.com", específicamente su tutorial de HTML:

Al acceder dicho tutorial identificaremos en la barra de direcciones de nuestro navegador web "https://www.ejemplo.com/Capacitacion/HTML/" como sección base.

"CSS/introducción.html" o "JavaScript/introducción.html", dependiendo del subtema que estemos leyendo, como ruta luego de la base.

Ahora bien la base podría cambiar a "https://www.ejemplo.com/Fundacion/Capacitacion/HTML/". Dejando inservible cualquier enlace del tutorial que use una URL absoluta innecesariamente.

En resumen, evitar esta mala práctica hará que todos los enlaces funcionen. Pese a cambios en la estructura del sitio web.

Los enlaces funcionaran en tu dominio público actual (www.ejemplo.com) o en tus dominios públicos futuros (www.OtroMejor.com). Incluso en tu propio computador (que por cierto, su nombre de equipo es ‘localhost’ - nombre que se descompone al español como equipo local. Para probar internamente tu rol de servidor, cuando el mismo computador tiene instalado software de servidor, empleas este de la siguiente manera, ‘https://localhost’ en la barra de direcciones de tu navegador web).

viernes, 17 de marzo de 2017

Para el lenguaje HTML, está el lenguaje JavaScript

Tutorial de HTML y principalmente su version 5

Para el lenguaje HTML, está el lenguaje JavaScript

El lenguaje JavaScript hace que las paginas HTML sean más dinámicas e interactivas.

Ejemplo:

<!DOCTYPE html>
<html>
<body>

<h1>Mi Primer ejemplo con JavaScript</h1>

<button type="button"
onclick="document.getElementById('prueba').innerHTML = Date()">
Cliqueame para mostrar la Fecha y la Hora.</button>

<p id="prueba"></p>

</body>
</html>

Expliquemos parte del ejemplo de arriba:

La etiqueta HTML <button> se usa para definir un botón accionable, el atributo type indica el tipo de botón que se desea, el atributo onclick indica que hacer cuando el botón sea clicado, en este lo que se ha de hacer esta especificado por document.getElementById(‘prueba’).innerHTML=Date(), donde document es nuestro documento HTML, getElementById es la acción de llamar o traer un elemento HTML usando su identificador (que para el elemento del ejemplo es ‘prueba’), innerHTML nos permite acceder al interior del elemento HTML donde puede o no haber contenido (html interno), para realizar una operación de escritura o lectura. En este caso, para escribir/asignar texto, específicamente la fecha actual con la instrucción Date() que obtiene y devuelve el tiempo corriente.

Ahora el producto de la ejecución de este código:

Mi Primer ejemplo con JavaScript

La etiqueta HTML <script>

La etiqueta <script> se usa para definir un archivo de procesamiento por lotes o guion que se ejecutara en el lado del cliente o computador que accede la pagina web. (y para crear este archivo se usa precisamente JavaScript)

El elemento <script> o contiene declaraciones de guionización, o refiere un archivo/guion externo mediante el atributo src.

Los usos comunes que se le dan a JavaScript son: La manipulación de imágenes, la validación de formularios, y el cambio dinámico de contenido.

Para seleccionar un elemento HTML, en JavaScript se usa muy a menudo el método document.getElementById(id).

El siguiente ejemplo con JavaScript, coloca “Hola JavaScript!” adentro de un elemento HTML con identificador “prueba”:

<script>
document.getElementById("prueba").innerHTML = "Hola JavaScript!";
</script>

Nota: Podrás aprender mucho más de JavaScript en nuestra futura guía acerca de este otro lenguaje.

Una probadita de JavaScript

Acá tienes algunos ejemplos de lo que JavaScript puede hacer:

JavaScript puede hacer cambios al contenido HTML

document.getElementById("prueba").innerHTML = "Hola JavaScript!";

JavaScript puede hacer cambios a los estilos HTML

document.getElementById("prueba").style.fontSize = "25px";
document.getElementById("prueba ").style.color = "red";

Comentario: style en este ejemplo de JavaScript sigue siendo el atributo HTML style y fontSize la misma propiedad CSS usados en temas previos. Cada punto indica que el nivel de jerarquía cambia. Hacia la izquierda este es superior y hacia la derecha es inferior.

JavaScript puede hacer cambios a los atributos HTML

document.getElementById("imagen").src = "paisaje.gif";

La etiqueta HTML <noscript>

La etiqueta <noscript> se usa para proporcionar un contenido alterno a los usuarios que han deshabilitado los guiones o archivos de ejecución por lotes en sus navegadores web o que tienen un navegador que no soporta guiones ejecutados en el lado del cliente o computador del usuario:

<script>
document.getElementById("prueba").innerHTML = "Hola JavaScript!";
</script>

<noscript>Lamentablemente, tu navegador no soporta JavaScript!</noscript>

Etiquetas HTML para JavaScript

Etiqueta	Descripcion
<script>	Define un archivo de ejecución por lotes que se ejecutara en el lado del cliente o equipo del usuario
<noscript>	Define un contenido auxiliar que se mostrara cuando no se permitan guiones ejecutados en el lados del cliente o equipo local

miércoles, 15 de marzo de 2017

Los cuadros o marcos HTML

Tutorial de HTML y principalmente su version 5

Los cuadros o marcos HTML

Un cuadro o marco se usa para desplegar una página web, adentro de otra página web. Esta será un elemento html más en el flujo de contenido de su página anfitriona.

Sintaxis para establecer un marco

Un marco o cuadro HTML se define con la etiqueta <iframe>:

El atributo src específica la URL (dirección web) de la página enmarcada por <iframe>.

El significado de la palabra inglesa “frame” es “cuadro o marco” en español.

Establecer el alto y el ancho de un elemento <iframe>

Usa los atributos height y width para especificar el tamaño del cuadro.

Los valores de estos atributos se especifican en pixeles por defecto, pero también pueden asignarse como un porciento (sea “80%”, o “30%”, o “100%” etc).

Ejemplo:

Remover el borde a un elemento <iframe>

Por defecto, un marco tiene bordes, lo que acentúa su presencia en la página.

Para removérselos, agrega el atributo style y usa la propiedad CSS border de la siguiente manera:

Con CSS, también puedes cambiar el grosor, estilo y color del borde de tu marco HTML:

Utilizar un elemento <iframe> como receptor del contenido vinculado por un enlace

Un cuadro HTML puede ser usado por un enlace como lugar de apertura o despliegue.

El atributo target del enlace HTML debe referir el valor del atributo name del cuadro:

<iframe src="paginaDePruebaActual.htm" name="iframeTambienParaElEnlace"></iframe>

<p>
<a href="https://www.nuevasPaginas.com" target=" iframeTambienParaElEnlace ">Haga clic para ver esta página alterna</a>
</p>

Etiqueta	Descripcion
<iframe>	Define un cuadro o marco adentro de una página web

El atributo HTML class

Tutorial de HTML y principalmente su version 5

El atributo HTML class

El atributo HTML class hace posible definir estilos compartidos por elementos con el mismo nombre de clase.

Acá tenemos tres elementos <div> que hacen referencia al mismo nombre de clase:

<!DOCTYPE html>
<html>
 <head>
  <style>
  div.ciudades {
    background-color: brown;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
  }
  </style>
 </head>
 <body>
  <div class="ciudades">
   <h2>Guatemala</h2>
   <p>La Ciudad de Guatemala, cuyo nombre oficial es Nueva Guatemala de la Asunción, es la capital y sede de los poderes gubernamentales de la República de Guatemala, así como sede del Parlamento Centroamericano.</p>
  </div>
  <div class="ciudades">
   <h2>San Salvador</h2>
   <p>San Salvador es la capital de la República de El Salvador y la cabecera del departamento y municipio homónimos. Es la mayor ciudad del país desde el punto de vista económico y demográfico, y asiento de las principales industrias y empresas de servicios de El Salvador.</p>
  </div>
  <div class="ciudades">
   <h2>Distrito Central</h2>
   <p>El Distrito Central, es un municipio de Honduras. La ciudad, formada por los antiguos municipios de Tegucigalpa y Comayagüela, es la capital del país, según lo dispuesto en los artículos 8 y 295 de la Constitución. El Distrito Central es uno de los 28 municipios que forman el departamento de Francisco Morazán, uno de los 18 departamentos que juntos poseen los 298 municipios que conforman la República.</p>
  </div>
 </body>
</html>

Y acá el mismo código pero ahora ejecutado:

Guatemala

La Ciudad de Guatemala, cuyo nombre oficial es Nueva Guatemala de la Asunción, es la capital y sede de los poderes gubernamentales de la República de Guatemala, así como sede del Parlamento Centroamericano.

San Salvador

San Salvador es la capital de la República de El Salvador y la cabecera del departamento y municipio homónimos. Es la mayor ciudad del país desde el punto de vista económico y demográfico, y asiento de las principales industrias y empresas de servicios de El Salvador.

Distrito Central

El Distrito Central, es un municipio de Honduras. La ciudad, formada por los antiguos municipios de Tegucigalpa y Comayagüela, es la capital del país, según lo dispuesto en los artículos 8 y 295 de la Constitución. El Distrito Central es uno de los 28 municipios que forman el departamento de Francisco Morazán, uno de los 18 departamentos que juntos poseen los 298 municipios que conforman la República.

Usando el atributo class en elementos inline (en linea)

El atributo HTML class también puede ser usado para los elementos inline:

<!DOCTYPE html>
<html>
<head>
<style>
span.clave {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>

<h1>Mi <span class="clave">Mejor</span> Encabezado</h1>
<p>Este es un texto <span class="clave">importante</span>.</p>

</body>
</html>

martes, 14 de marzo de 2017

Elementos html de Bloque y en Linea

Tutorial de HTML y principalmente su version 5

Elementos HTML de bloque y en linea

Cada elemento HTML tiene un valor de visualización por defecto dependiendo su tipo. El valor de visualización por defecto para la mayoría de los elementos es "de bloque" (block) o "en línea" (inline). Vea el contenido extra del tema anterior.

Elementos a nivel de bloque

Un elemento a nivel de bloque siempre empieza en una línea nueva y ocupa todo el ancho disponible (se extiende a la izquierda y la derecha tanto como puede).

El elemento <div> es un elemento a nivel de bloque.

Ejemplos de elementos a nivel de bloque:

<div>
<h1> - <h6>
<p>
<form>

El elemento <div>

El elemento <div> se usa a menudo como un contenedor para otros elementos HTML.

El elemento <div> no requiere atributo alguno, sin embargo style y class le son comunes.

Cuando se usa en conjunto con CSS, el elemento <div> puede ser usado para estilizar bloques de contenido:

<div style="background-color:black;color:white;padding:20px;">
 <h2>Guatemala</h2>
 <p>La Ciudad de Guatemala, cuyo nombre oficial es Nueva Guatemala de la Asunción, es la capital y sede de los poderes gubernamentales de la República de Guatemala, así como sede del Parlamento Centroamericano.</p>
</div>

Elementos en linea

Un elemento en línea no empieza en una línea nueva y solo ocupa el ancho necesario.

Este es un elemento <span> en línea dentro de un párrafo.

Ejemplos de elementos en línea:

<span>
<a>
<img>

El elemento <span>

El elemento <span> se usa a menudo como un contenedor para parte de algún texto.

El elemento <span> no requiere atributo alguno, sin embargo style y class le son comunes.

Cuando se usa en conjunto con CSS, el elemento <span> puede usarse para estilizar partes del texto:

<h1>Mi <span style="color:red">Mas Importante</span> Encabezado</h1>

Resumen de lo aprendido:

Etiquetas HTML de agrupamiento

Etiqueta	Descripción
<div>	Define una sección (a nivel de bloque) en un documento
<span>	Define una sección (en linea) en un documento