WEB

GOOGLE AMP

Google AMP es una plataforma dirigida a que los medios puedan mejorar el rendimiento en sus páginas webs móviles. Se trata de una oportunidad nueva para los medios de comunicación, como alternativa a los contenidos nativos y lo que ofrecen otras plataformas como Facebook Instant Articles o LinkedIn Pulse.

Accelerated Mobile Pages es una iniciativa de código abierto que tiene como objetivo que las páginas web que cuentan con una gran cantidad de contenidos, como vídeos, imágenes, animaciones, gráficos, anuncios publicitarios, etc., se carguen de forma instantánea en el móvil. Además, también se pretende que el mismo código funcione de la misma manera en cualquier dispositivo. Este proyecto de Google está basado en AMP HTML, lo que sería un nuevo formato abierto, que nace de tecnología web ya existente, y que permite a las páginas web crear unas versiones ligeras de las web estándar.

Hay que tener en cuenta que este proyecto de Google surge después de que la compañía se pusiera en contacto con medios, editores y compañías tecnológicas de todo el mundo para conocer los problemas con los que se encuentran a la hora de acceder a una web en el móvil, y forma parte de la Digital News Initiative (DNI).

La idea de Google, es que otros de sus productos, como es el caso de Google News, o el buscador de Google, que en dispositivos iOS ya se ha actualizado en este sentido, por ejemplo, adopten este nuevo formato AMP HTML. Por otra parte, ya son más de 30 editores a nivel global los que forman parte del proyecto de Google AMP. De esta forma, el buscador quiere colaborar con diferentes medios, editores y compañías tecnológicas para mejorar la experiencia móvil de los usuarios en todo el mundo. Firmas como Twitter, Pinterest, WordPress o LinkedIn, entre otras, ya están entre los primeros socios tecnológicos comprometidos en adoptar este formato.

descarga.png

INGENIERÍA Y SERVICIOS IT

GUI

El termino GUI hace referencia a Interfaz gráfica de usuario, En el contexto del proceso de interacción persona -ordenador, la interfaz gráfica de usuario, es el artefacto tecnológico de un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático. Es un tipo de interfaz de usuario que utiliza un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Habitualmente las acciones se real izan mediante manipulación directa para facilitar la interacción del usuario con la computadora.

Surge como evolución de la línea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno gráfico. Como ejemplo de interfaz gráfica de usuario podemos citar el escritorio o desktop del sistema operativo Windows y el entorno X -Window de Linux.

Las interfaces gráficas surgen de la necesidad de hacer los ordenadores más accesibles para el uso de los usuarios comunes. La mayoría de ordena dores domésticos o requerían conocimientos de BASIC (el 95% de ellos mostraban el intérprete BASIC al encenderse) u ofrecían una interfaz de línea de comandos (como los sistemas operativos CP/M o los diferentes OS del Apple II), lo que requería conocimientos por encima de la media si se deseaba hacer algo más que usarlo como consola de videojuegos. Esta limitación fue salvada gracias al desarrollo de los entornos gráficos, que permitieron que las personas pudieran acceder a un ordenador sin tener que pasar por el tortuoso proceso de tener que aprender a manejar un entorno bajo línea de comandos.

ELEMENTOS INTERACTIVOS EN LA INTERFAZ GRÁFICA

Dispositivos De Interfaz Humana

Los dispositivos de interfaz humana son los diseñados para conectar alguna parte del cuerpo del ser humano con la interfaz gráfica de modo que puedan ser introducidos datos en el sistema. Normalmente son dispositivos que permiten introducir directamente, y en tiempo real, información de “orientación” y “acción” al ordenador sincronizado simultáneamente con una interfaz gráfica.

Los dispositivos de interfaz humana como el ratón pueden representar en la interfaz gráfica gestos físicos y movimientos, como “apuntar”, “pulsar”, “arrastrar”, “trasladar”, “mover” de forma metafórica que de otro modo sería muy complejo simular.

La interfaz humana forma actualmente, una parte indisoluble respecto a la interfaz gráfica de usuario. Son partes interconectadas de un mismo paradigma de interacción, donde se necesitan uno al otro indispensablemente para que la interacción con el sistema se realice adecuadamente.

Existen diferentes tipos de interfaces humanas los cuales han sido desarrollados paralelamente a lo largo de la historia de la interfaz gráfica. Los más importantes han sido, el teclado, el ratón de ordenador, el trackball (bola), el cursor táctil (touchpad), la tableta gráfica y el Joystick.

Cada uno de estos dispositivos sirven para introducir un tipo de información específica en el sistema a través de la interfaz gráfica.

Ventanas

Las ventanas son recursos interactivos usadas para la visualización, jerarquización y navegación de la información en un interfaz gráfico de usuario. A través de las ventanas, pueden ser visualizados un conjunto de documentos, aplicaciones e icono s, sobre los cuales es posible realizar diversas acciones.

Las ventanas permiten una forma relativamente fácil de interacción con la información. Su comportamiento es como el de un objeto, y pueden ser abiertas, cerradas, movidas, escaladas, ampliadas (zoom) y navegadas (scrolling).

Las ventanas fueron uno de los primeros recursos interactivos desarrollados en el contexto de la interfaz WIMP en el PARC. Constituye un marco, a través del cual es posible visualizar y manipular información del sistema.

Han sido definidas dos tipos generales de ventanas. Las ventanas de aplicación y las ventanas de ficheros. Ambas atienden a una diferenciación semántica, esto es relacionado con el contenido de la ventana y no de la ventana en sí misma.

Las ventanas de aplicación son aquellas que surgen para representar las variables de una aplicación concreta en el sistema. En el paradigma WIMP cada una de las aplicaciones se representa en un espacio delimitado por una ventana. Es una forma de establecer niveles jerárquicos dentro de la interfaz y de posibilitar la representación y manipulación independiente de aplicaciones.

Las ventanas de ficheros son normalmente usadas por los gestores de archivos en el sistema y sirven para visualizar un conjunto de documentos, aplicaciones, iconos posibilitando diversas acciones sobre estos elementos.

Anatomía general de una ventana

Las ventanas se han ido definiendo a lo largo del tiempo, de modo que el día de hoy, podríamos hablar de una anatomía de las ventanas, formada principalmente por cinco elementos básicos: Marco, cabecera de ventana, área de contenido, barra de scroll, y pie de ventana.

El marco lo forman el conjunto de recursos gráficos que ayudan a marcar el límite visual entre la ventana y el resto del interfaz. Normalmente sobre ciertas partes del marco se posibilitan acciones de redimensionamiento de la ventana por parte del usuario. Ha variado estilísticamente y está sujeto a las modificaciones de customización por parte del usuario.

La cabecera de ventana es un área dispuesta de forma horizontal que sirve para posicionar los iconos que representan y ejecutan acciones generales sobre el comportamiento de la ventana. Actualmente han sido estandarizadas tres acciones básicas: maximizar, minimizar y cerrar. Hay una cuarta aún no estandarizada pero que es usada por algunos softwares, y consiste en ocultar la ventana, sin cerrar la aplicación, pero sin ser minimizada en la barra de tareas.

El espacio de contenido está sujeto al tamaño de la ventana normalmente. Hay ventanas que se adaptan al contenido, y si el contenido de la información representada supera el tamaño de la ventana, entonces la ventana muestra la barra de scroll, que servirá para movernos por el contenido.

La barra de scroll de las ventanas ha tenido varios posicionamientos a lo largo de la historia, pero actualmente los sistemas operativos más importantes la localizan en la vertical derecha, para mover el contenido en dirección vertical, y en lado horizontal inferior para posicionar el menú de scroll horizontal. Normalmente está formado por un conjunto de cuatro elementos. Dos flechas – botones situadas a los dos lados de la barra, y un elemento deslizador el cual puede ser arrastrado y actualmente muy usado en navegadores Web.

El pie de ventana es usado para visualizar información básica de la aplicación o del contenido de esa ventana.

Tipos de ventanas

Podemos hacer una catalogación de ciertos tipos de ventanas, desde un punto de vista semántico, esto es, atendiendo al tipo de significados asociados a la ventana:

Ventana Modal

Las ventanas modales son aquellas ventanas específicas que han sido diseñadas como medio de prevención de alguna acción del usuario sobre el sistema. Surgen allí donde el sistema prevé algún error por parte del usuario. Suelen contener un mensaje de advertencia y un botón de confirmación de la acción a realizar.

Ventana de Confirmación

Las ventanas de confirmación son aquellas que surgen de modo preventivo igualmente, pero esta vez dan al usuario una serie de posibilidades de acción. La ventana de confirmación más habitual es aquella que surge cuando intentamos guardar un documento que ya tenemos creado en el sistema. Suelen contener el mensaje de advertencia, un icono indicando la gravedad del asunto, y una serie de botones donde se le pide al usuario una decisión al respecto.

Menús

Los menús son listas de comandos, atributos, o cualquier tipo de elementos, agrupados de forma estructurada normalmente inscritos dentro de una barra de menús o de un área específica en la interfaz, los cuales pueden ser activados y posibilitan la ejecución de los ítems que contienen obteniendo una respuesta inmediata al respecto.

Los ítems del menú normalmente constituyen descripciones textuales, aunque también incluye en ocasiones signos adicionales que dan información sobre la posibilidad de ser ejecutado (apagado -encendido), el estado del ítem (activado desactivado) o el tipo o clase a la que pertenece siendo acompañada de un icono.

Normalmente los menús sintetizan una estructura de elementos de forma jerárquica por niveles, representados de modo que se muestra una lista, tanto de forma horizontal como vertical de los elementos de un menú, y a continuación, se accede a cada uno de los subelementos de cada elemento del menú.

Estados de un Menú

Los items de un menú suelen tener estados. Los estados son los posibles comportamientos que dispone un ítem del menú en relación a la interacción por parte del usuario. Los estados habituales de un ítem de un menú suelen ser:

Activo: Es el estado normal de un ítem sin que el usuario interactúe con él, aunque debe mostrar claramente la posibilidad de poder hacerlo.

Inactivo: El ítem muestra una apariencia difusa indicando que no puede ser seleccionado por el usuario en ese momento, pero que puede hacerlo bajo otras condiciones de selección de parámetros en el sistema.

Seleccionado (rollover): Cuando el usuario ha posicionado o elegido esa opción, sin haberlo activado, el ítem suele cambiar de estado, normalmente indicando que está seleccionado en ese momento.

Activado: El estado corresponde al momento en que el ítem seleccionado es activado, normalmente ocurre cuando el usuario indica que ha seleccionado cliqueando sobre él o pulsando una tecla que haga esta indicación al sistema (intro).

Pulsado: Cuando el ítem ha sido activado con posterioridad. En una página Web suele mostrar un color diferente para indicar que el ítem ha sido pulsado con anterioridad.

Tipos de Menús

Existen varias tipologías de menús, según el contexto en el que se ubiquen, conteniendo una gramática particular y un objeto concreto dentro de la interacción con el usuario. Se comentan a continuación los tipos de menús más habituales en la interacción con ordenadores:

Menús contextuales

Menú contextual, es aquel que muestra una lista de ítems posible de ejecutar sobre un objeto concreto en el contexto definido. Un objeto o icono en el interfaz, puede tener varios estados y diferentes contextos. Los menús contextuales normalmente están ocultos, y son activados por el usuario sobre un objeto en concreto. Éste muestra las opciones que se pueden aplicar sobre el objeto en ese preciso momento. En el sistema Windows son activados con el botón derecho del ratón, y son representados de forma flotante al lado del objeto interrogado.

Menús de navegación (scroll)

Un menú de scroll, es un menú que combina en su interior la posibilidad de realizar movimientos de navegación sobre sus ítems. Cuando las opciones de un menú son demasiadas para mostrar de una sola vez en la interfaz, s e usan diversos recursos de navegación con los ítems, uno de ellos es posicionar una barra en el interior del menú de modo que se pueda navegar usando la barra adecuada. No son muy habituales estos menús, Apple los usó en su sistema operativo y Windows lo usa en su menú de inicio cuando las aplicaciones instaladas son demasiadas para mostrar.

Menús jerárquicos

Un menú Jerárquico es un menú representado en forma de árbol, cuyos ítems de un mismo nivel, abren un nuevo menú con nuevas opciones correspondientes a un siguiente nivel. Son usados con frecuencia para sintetizar un árbol amplio de ítems, sin perder la jerarquía de su organización. Este menú es el usado por Windows en su menú de inicio.

Menú de inicio

Un menú de inicio es un tipo de menú jerárquico desarrollado inicialmente por Microsoft para Windows y actualmente implementado en las interfaces de los sistemas operativos GNU/LINUX. Es un menú jerárquico que intenta recoger un acceso global a todas las variables y elementos y aplicaciones del sistema.

Iconos

Los iconos en el contexto de las interfaces gráficas son signos esquemáticos que representan algún tipo de fichero, carpeta, aplicación, o dispositivos de un sistema informático. Los iconos, son signos interactivos y por lo tanto inscritos en una gramática especial que debe ser aprendida por el usuario.

Los iconos usados en la interfaz provienen principalmente de la representación metafórica realizada en el PARC inscritos dentro de la metáfora del escritorio. A su vez éstos se inspiran en los signos desarrollados en la comunicación gráfica de las señales viales y demás signos codificados por la cultura occidental hasta hoy.

Los iconos son importantes y uno de los elementos fundamentales en el desarrollo de las interfaces gráficas por varias razones:

  • Las personas reconocen iconos e imágenes más rápido de lo que tardarían en comprender el mismo concepto a través de la representación verbal. A ciertas distancias pueden ser mejor reconocidos que signos textuales.
  • Los iconos cruzan la barrera de la cultura de mejor modo que el lenguaje verbal. Existen algunos signos que tienen reconocimiento internacional.
  • Los iconos son capaces de trasmitir conceptos en menos espacio que en lo que lo describiría una palabra a través del lenguaje verbal.
  • El icono como imagen, tiene la capacidad de trasmitir información espacial, relacional, multivariable y representar objetos del mundo real.

Botones

Un botón es un objeto de control sobre la interfaz que posibilita introducir un dato de confirmación al sistema. Actúa como metáfora visual y funcional de los botones incluidos en los dispositivos tecnológicos. Su gramática visual tiene ya un recorrido histórico con posibilidad de ser estudiada.

Han sido catalogados varios tipos de botones en relación a sus formas:

Botón en Relieve

Es el más común y el más usado en los sistemas operativos. Imita la gramática visual de un botón de un dispositivo físico, por lo que se suele usar un tratamiento cuidado de los bordes, de modo que simule volumen. Suele incluir una descripción breve en el interior, y suele soportar diversos estados al igual que el comportamiento de las ventanas.

Botones en forma de radio

Son botones redondos que posibilitan ser señalados a través de la acción del usuario. Normalmente son usados e n formularios o menús, para dar elección a elegir un ítem de una lista. El interfaz de Mac lo usó con frecuencia en su sistema operativo.

Botones de confirmación (checkbox)

Son botones similares a los botones de radio, pero con forma cuadrada. Se representan de forma hueca, y suelen ser usados para seleccionar ítems en una lista.

Elementos de entrada de texto

Los elementos de entrada de texto nos indican en qué lugar del interfaz puede ser usado el teclado. Cuando todo el interfaz se convierte en escritorio, surgen las aplicaciones específicas que permiten introducir texto. Pero existen partes de ciertas aplicaciones que requieren un área que posibilite la introducción de información textual por parte del usuario. En este contexto es en el que los campos de texto cobran sentido.

Campo de texto

El campo de texto ha desarrollado también su propia gramática visual. Normalmente delimita un área en blanco, e indica a través del borde la posibilidad de introducir texto en la misma.

Elementos De Información De Salida

Los elementos de salida tienen que ver con elementos que se han ido configurando para dar información de estado del sistema al usuario en un momento dado. Normalmente las aplicaciones reservan un área de la ventana, donde posicionan estos datos. Existen varios elementos de información de salida, que vale la pena mencionar:

Barra de progreso

La barra de progreso es un elemento que indica al usuario el progreso de la acción que realiza el sistema. Todas las acciones del sistema, n o son realizadas de forma instantánea. Cuando el sistema requiere tiempo para realizar una acción, es fundamental dar feedback al usuario a través de la representación del proceso y por lo tanto del progreso de la acción.

Cuadro de consejo [tip box]

Es un recurso gráfico inspirado en los bocadillos de los cómics, que surge en ciertos elementos de la interfaz para indicar información adicional sobre algún elemento u acción del usuario sobre el sistema.

Barra de estado [Status Bar]

La barra de estado ofrece información variada al usuario sobre diferentes variables de la aplicación o del sistema. Normalmente es posicionada en la parte inferior de la ventana de aplicación. Suele estar divida en varias áreas de modo que en una misma horizontal se muestran varios campos con diferentes informaciones. Suelen ofrecer información técnica específica, muy útil cuando el usuario la necesita.

SEGURIDAD, WEB

VULNERABILIDADES EN UN SITIO WEB

El grado de inseguridad que puede presentar un sitio web depende directamente de las funcionalidades que el mismo tenga instaladas. Si el sitio está creado usando simplemente HTML (y en nuestras carpetas sólo tenemos archivos .htm, .html, .css, .jpg y .gif) entonces el peligro será mínimo, y las posibles vulnerabilidades estarán completamente del lado del lado que le toca atender a nuestro proveedor de hosting.

Si nuestro sitio web está creado usando un sistema de Server Side Scripting (como lo son PHP, ASP, JSP, etc) entonces ya existe la posibilidad de que en nuestros scripts aparezcan potenciales fallos de seguridad. Sobre todo, si en uno o más lugares del sitio hay formularios que permitan al usuario enviarnos datos (un formulario de contacto, o un formulario de suscripción a un boletín, por ejemplo).

Si además de usar un lenguaje como PHP o ASP, nuestro sitio usa bases de datos (como MySQL, Oracle, SQL-Server, etc) entonces las posibilidades de ataques se multiplican por diez.

Y si además de usar PHP (o ASP) y bases de datos, utilizamos scripts y programas estándar dentro de nuestro sitio (como ser scripts de administración de contenidos, foros, galerías de fotos, programas de intercambios de enlaces, etc) las posibilidades de resultar vulnerables y ser atacados por intrusos son mucho mayores. Lo mismo ocurre en caso de que usemos scripts o programas CGI.

RECOMENDACIONES:

Mantener los scripts y programas web actualizados y cambiarlos o parcharlos inmediatamente cuando se descubra un bug o un problema de inseguridad en los mismos. Ahora vale la pregunta: ¿y cómo hago para informarme inmediatamente cuando se descubre una vulnerabilidad en los scripts que tengo instalados? Hay varias formas de informarse:

El método “paranoico”

Muchos administradores de sistemas visitan diariamente sitios especializados que publican reportes de vulnerabilidades. Algunos de ellos son: securityfocus.com, secunia.com, us-cert.com. El problema de este método es que requiere de una gran dosis de disciplina y constancia: hay que consultar las listas de vulnerabilidades todos los días, revisando una por una a ver si hallamos alguna que afecte a nuestros sistemas. Personalmente tuve que hacerlo durante varios años, y confieso que es aburridor y tedioso.

El método automatizado

Consiste en crear una cuenta en Alertahacker.com (o HackerWarnings.com), ingresar al panel de control del servicio y configurar en nuestra cuenta cuáles son los productos que queremos monitorizar: si en algún momento se reporta alguna vulnerabilidad en alguno de nuestros scripts y programas, el sistema nos hará llegar un e-mail inmediatamente alertándonos y adjuntando la dirección de la página web donde se describe el problema descubierto.

Estos servicios son gratuitos y de libre acceso, y no compiten con los sitios que se dedican a registrar y documentar reportes de vulnerabilidades, tal cual lo hacen SecurityFocus (también conocido como BugTraq) o Secunia. AlertaHacker.com se limita a rastrear en la web y hallar reportes de seguridad recientes que se ajusten a las preferencias que le hemos configurado, entonces sólo nos enviará el aviso conteniendo las referencias al sitio del autor original del reporte. Y esto nos resuelve el problema de estar informados de los fallos de seguridad en nuestro software sin tener que invertir ni un minuto en leer largas listas de reportes de seguridad referentes a programas que ni usamos ni nos interesan.

Una vez enterados de un problema de seguridad en alguno de los softwares que tengamos instalados, el próximo paso será visitar el sitio web original del software en cuestión. Allí buscaremos cuál es la nueva versión del programa. En otros casos hallaremos un “parche” o “actualización” que solucione el problema. Estos parches suelen estar acompañados de instrucciones detalladas que explican cómo instalarlos. También existe la posibilidad de que los autores del programa se estén enterando de la existencia de la vulnerabilidad al mismo tiempo que nosotros… entonces deberemos aguardar a que creen el parche o la actualización, y lo publiquen en su web. En estos casos también es recomendable usar algún buscador para encontrar si en algún otro sitio web o foro alguien describe un método para “parchar” el problema de seguridad por nuestra cuenta (siempre y cuando no resulte muy difícil).

Usar un esquema seguro de nombres de usuario y passwords. Origen del 11% de los ataques exitosos contra sitios web

Muchos artículos escritos por expertos recomiendan usar nombres difíciles, donde se combinen letras mayúsculas, minúsculas, signos de puntuación y números. Por ejemplo: “R47n!Y2a5Mm”. No voy a discutir que esto es un password seguro… pero también es horrible para escribirlo cada vez que voy a usar el FTP. Además, es difícil, o imposible de memorizar. Y si además en cada sitio web y en cada programa tengo que poner uno diferente… sin duda estaré complicando mi trabajo.

En la práctica resultan buenos passwords aquellos conformados por breves frases como “quebuenaestalavecina” o “mevoyajugaralcounter”. Estos no contienen cifras, ni mayúsculas, ni signos de puntuación (por lo que no cumplen con las recomendaciones de mis colegas), y sin embargo son muy difíciles de crackear, aún usando programas automatizados (fundamentalmente debido a su longitud). Y tienen la enorme ventaja de que son fáciles de recordar y de escribir.

Y no olvidemos usar un password diferente en cada uno de los programas, en cada uno de los sitios web. Si vamos a escribir los passwords para no olvidarlos, nunca debe hacerse en un archivo en la PC. Si alguien pudiera penetrar en nuestra PC, se encontraría “de obsequio” con una hermosa lista de direcciones y passwords para divertirse en grande! En este caso es mejor anotar esta información en una tarjeta, y llevarla en la billetera. Al anotar los passwords no es conveniente aclarar completamente a qué corresponden: si alguien encontrase nuestra tarjeta de passwords tendría sólo eso: una tarjeta con passwords (no sabrá de qué cosa o de qué lugar son).

Borrar los scripts de instalación de los productos

Cuando instalamos un script, por ejemplo basado en PHP/MySQL, es habitual que durante el proceso de instalación debamos invocar un script que cree las tablas y las estructuras necesarias en las bases de datos. Este script puede llamarse install.php, ó /admin/configure.php, etc. Cada producto tiene su propio procedimiento de instalación, los archivos de creación inicial de tablas tendrán ubicaciones distintas, con nombres distintos.

Una vez que un atacante identificó que en nuestra web estamos usando un producto específico, entonces estará en condiciones de ir al sitio web del producto, leer los manuales de instalación, y luego volver a nuestro sitio y probar con (por ejemplo):

http://www.sitio-victima.com/admin/install/installdb.php

Recordemos que la misión de este script es crear las tablas de la base de datos, y si en este momento nuestra base de datos contiene información, entonces muy probablemente se esté borrando absolutamente todo el contenido actual (aunque este comportamiento puede variar de producto en producto).

Los manuales de instalación de los scripts normalmente indican cuáles son los ficheros que conviene borrar luego de completada la instalación, luego que el sistema queda funcionando. El problema es que luego de quedar funcionando, muchos webmasters simplemente ponen punto final a la instalación, y dejan funcionando el sitio web sin haber borrado nunca estos scripts que ahora no sólo son innecesarios sino que además resultan peligrosos. Una buena medida de seguridad sería revisar sitio por sitio a ver si hemos olvidado borrar alguno de estos scripts de instalación. Piensa que tal vez en este mismo momento alguno de tus enemigos esté leyendo este artículo, y sea él quien se tome el trabajo de revisar a ver si olvidaste borrar alguna de estas “bombas de tiempo”.

PROGRAMACIÓN

SINTAXIS PARA COMENTAR EN HTML

Para comentar dentro del lenguaje de Html, tenemos que escribir los siguientes caracteres: <!–     –>

Dentro del espacio que se encuentra entre <!–  y  –> tendrá que ir todo lo que queramos que sea comentario. A parte, este tipo de comentario acepta comentarios multilinea.

Ejemplo:

<!--Comentario en html-->
<!-- Comentario
multilinea en html.-->
PROGRAMACIÓN

ETIQUETAS HTML 5.2

Etiqueta Descripción Atributos principales
html engloba todo el documento lang
head delimita el encabezado del documento
title título del documento (se muestra en la pestaña del navegador)
base / URI base para direcciones relativas href, target
link / enlace a otros archivos (hoja de estilo, etc.) href, rel, media, type, title
meta / metainformación sobre el documento name, content, charset
style hoja de estilo incluida en el documento type, title
body delimita el cuerpo del documento
article artículo
section sección
nav navegación
aside lateral
h1 a h6 encabezado (de nivel 1 a 6)
header cabecera
footer pie
address dirección (información sobre el autor)
p párrafo
hr / separador
div división
blockquote cita larga (que incluye varios párrafos) cite
pre texto preformateado
main principal
figure ilustración
figcaption pie de ilustración
br / salto de línea
wbr posible salto de línea
a hiperenlace href, target, download, rel, type
span contenedor de texto genérico
strong importante
em énfasis
sub subíndice
sup superíndice
abbr abreviatura title
b atención
cite obra
data datos value
dfn definición title
kbd teclado
i tecnicismo
mark resaltado añadido posteriormente, no en el original
q cita cite
s incorrecto
small comentario
time fecha y hora datetime
u sonido inarticulado
code código (de programa de ordenador)
samp salida (de programa de ordenador)
var variable (de programa de ordenador)
bdo dirección de escritura dir
bdi ignorar dirección de escritura dir
ins texto insertado cite, datetime
del texto borrado cite, datetime
picture imagen múltiple para diferentes resoluciones o densidades
img / imagen alt, src, usemap, ismap, width, height
iframe marco incrustado en el documento src, srcdoc, name, sandbox, width, height
embed src, type, width, height
object objeto data, type, width, height
param / parametro para <objeto> name, value
video src, poster, preload, autoplay, loop, muted, controls, width, height
audio src, preload, autoplay, loop, muted, controls
source origen de <img>, <audio> o <video> src, type
track kind, src, srclang, label, default
map mapa de imagen name
area / área en mapa de imagen alt, coords, href, hreflang, rel, shape, target, type
ol lista ordenada reversed, start, type
ul lista no ordenada
li elemento de lista (ordenada o no ordenada) value
dl lista de definición
dt término en lista de definición
dd definición en lista de definición
table tabla border
caption leyenda de tabla
colgroup grupo de columnas span
tbody cuerpo de tabla (grupo de filas)
thead cabecera de tabla (grupo de filas)
tfoot pie de tabla (grupo de filas)
tr fila
td celda colspan, rowspan, headers
th celda de cabecera colspan, rowspan, headers, scope, abbr
col columna span
form formulario accept-charset, action, autocomplete, enctype, method, target
label etiqueta de un control form, for
input / control (hay varios tipos) type (submit, reset, button, text …)
button botón name, type, value, form
select caja de lista name, multiple, size, …
datalist
optgroup grupo de opciones en una caja de lista label
option opción de caja de lista label, selected, value
textarea área de texto name, cols, rows, …
output cálculo name, for
progress barra de progreso value, max
meter indicador value, min, max, low, high, optimum
fieldset grupo de controles name, disabled
legend leyenda de grupo de controles
details desplegable
summary leyenda para <details>
dialog cuadro de diálogo de una aplicación
script script src, type, charset, async, defer
noscript contenido a mostrar en navegadores que no admiten <script>
template plantillas utilizables por scripts
canvas zona de dibujo utilizable por script width, height
ruby notación ruby
rb elemento de notación ruby (base)
rt elemento de notación ruby (texto)
rtc elemento de notación ruby (contenedor)
rp elemento de notación ruby (paréntesis)
!DOCTYPE tipo de documento (versión de html empleada)
<!– … –> comentario (sólo visible en el código fuente)
PROGRAMACIÓN

QUÉ ES CSS

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores…

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.

Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.

EJEMPLO:

<p style="color:green;font-weight:bold">El párrafo saldrá con color verde y en negrita</p>

Dentro del atributo style se deben indicar los atributos de estilos CSS separados por punto y coma (;). Durante este artículo vamos a conocer muchos atributos de CSS, los dos primeros que hemos visto aquí son:

Color: indica el color del contenido la etiqueta donde estemos utilizándolo, generalmente indica el color del texto.

Font-weight: indica el grosor del texto. Bold sirve para poner en negrita.

COLOR EN LOS ENLACES

Con HTML definimos el color de los enlaces en la etiqueta <body>, con lo atributos link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo el documento, pero ¿Y si queremos cambiar el color de un enlace en concreto, para que tenga otro color que el definido en la etiqueta <body>?

Para hacer esto utilizaremos el atributo style dentro del enlace:

<a href="mienlace.html" style="color:red">

Así saldrá el enlace en color rojo, independientemente de lo definido para todo el documento. Espaciado entre líneas

Con CSS podemos definir el espacio que hay entre cada línea del documento, utilizando el atributo line-height. Por ejemplo, podemos definir que para todo un párrafo el espacio entre cada una de sus líneas sea 25 pixels:

<p style="line-height: 25px;">

Un párrafo normal en el que cada una de las líneas está separada 25 pixels de la otra. Hay que poner suficiente texto como para que se vean 2 líneas, así saldrán separadas

</p>

ESPACIADO ENTRE CARACTERES

Se puede definir también el espacio entre cada carácter. Esto se hace con el atributo de CSS letter-spacing. Veamos un ejemplo:

<p style="letter-spacing:12cm">

Este párrafo tiene las letras espaciadas por 1 centímetro.

</p>

Este atributo, al igual que ocurre con muchos otros de CSS, no está soportado por todos los navegadores. En concreto Netscape, en su versión 4 todavía no lo incluye.

ENLACES SIN SUBRAYADO

Uno de los efectos más significativos y fáciles de realizar con CSS es eliminar el subrayado de los enlaces de una página web. Existe un atributo que sirve para definir la decoración de un texto, si está subrayado, tachado, o si no tiene ninguna de estas “decoraciones”. Es el atributo text-decoration, en este caso indicaremos en un enlace que no queremos decoración:

<a href="mipagina.html" style="text-decoration:none">

INCLUIR ESTILOS PARA TODO UN SITIO WEB

Una de las características más potentes de la programación con hojas de estilo consiste en definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas.

Veamos ahora todo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos

Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es un poco distinta que la sintaxis que utilizamos dentro del atributo style. Sería erróneo incluir código HTML en este archivo: etiquetas y demás. Podemos ver un ejemplo a continuación.

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2- Enlazamos la página web con la hoja de estilos

Para ello vamos a colocar la etiqueta <LINK> con los atributos

rel=”STYLESHEET” indicando que el enlace es con una hoja de estilo.

type=”text/css” porque el archivo es de texto, en sintaxis CSS.

href=”estilos.css” indica el nombre del fichero fuente de los estilos.

Veamos una página web entera que enlaza con la declaración de estilos anterior:

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
<p>

Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil. </p>

</body>
</html>
PROGRAMACIÓN

INTRODUCCIÓN A HTML

Una página web la vemos en nuestro navegador, o cliente web, y parece una sola entidad, pero no es así, está compuesta por multitud de diferentes ficheros, como son las imágenes, los posibles vídeos y lo más importante: el código fuente.

El código de las páginas está escrito en un lenguaje llamado HTML, que indica básicamente donde colocar cada texto, cada imagen o cada video y la forma que tendrán estos al ser colocados en la página.

El HTML se creó en un principio con objetivos divulgativos. No se pensó que la web llegara a ser un área de ocio con carácter multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro.

El lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o <P> significa un párrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. Así que el HTML no es más que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro documento. <B>Esto está en negrita</B>.

PARTES DE UN DOCUMENTO HTML

Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:

<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes </body>
</html>