Script Maker: 2013

miércoles, 9 de octubre de 2013

Ejercicio de formulario

<!DOCTYPE html>

<html>

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

    <title>Registro - iDESWEB</title>
</head>

<body>

<header>
    <h1>iDESWEB</h1>
</header>

<h2>Formulario de registro</h2>

<form method="post" action="documento.php">
    <fieldset>
        <legend>¿Quién eres?</legend>
        <p>
            <label for="idNombre">Nombre:</label><input type="text" id="idNombre" name="nombre"/>
            <label for="idApellidos">Apellidos:</label><input type="text" id="idApellidos" name="apellidos"/>
        </p>
        <p>
            <label for="idCorreo">Correo electrónico:</label><input type="text" id="idCorreo" name="apellidos"/>
        </p>
        <p>
            Fecha de Nacimiento:
                <select name="dia">
                    <option value="" selected="selected">Día</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>

                <select name="mes">
                    <option value="" selected="selected">Mes</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>

                <select id="anyo"><option selected="selected" value="">Año</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option></select>
        </p>

    </fieldset>

    <fieldset>
        <legend>¿De dónde eres?</legend>

        <p>
            <label for="idCiudad">Ciudad:</label><input type="text" id="idCiudad" name="ciudad"/>
        </p>

        <p>
            <label for="idCode">Código postal:</label><input type="text" id="idCode" name="code"/>
        </p>

        <p>
            País:
            <select name="pais">
                <option value="" selected="selected">País</option>
                <option value="uzbekistan">Uzbekistan</option>
                <option value="kazakistan">Kazakistan</option>
                <option value="spain">Españistán</option>
            </select>
        </p>
    </fieldset>

    <fieldset>
        <legend>¿Como quieres iniciar la sesión?</legend>

        <p>
            <label for="idUsuario">Nombre de usuario:</label><input type="text" id="idUsuario" name="usuario"/>
        </p>

        <p>
            <label for="idPassword">Contraseña:</label><input type="password" id="idPassword" name="password"/>
        </p>

        <p>
            <label for="idPassword2">Vuelve a escribir la contraseña:</label><input type="password" id="idPassword2" name="password2"/>
        </p>

    </fieldset>

    <fieldset>
        <legend>Condiciones de registro</legend>
        <p>
            Deseo recibir ofertas de iDESWEB
            <input type="radio" name="oferta" id="idOfDia">Una vez al día
            <input type="radio" name="oferta" id="idOfSemana">Una vez a la semana
            <input type="radio" name="oferta" id="idOfMes">Una vez al mes
        </p>

        <p>
            <input type="checkbox" name="acepto" id="idAcepto">Acepto el acuerdo de servicio, la declaración de privacidad y la declaración de uso de cookies.
        </p>

    </fieldset>
        <p>
            <input type="submit" value="Crear cuenta"/>
        </p>

</form>

<footer>

</footer>

</body>

</html>

martes, 8 de octubre de 2013

HTML: conceptos básicos: Una página web sencilla

<!DOCTYPE html>

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

    <title>HTML: conceptos básicos: Una página web sencilla</title>
</head>

<body>

<header>
    <h1>iDESWEB: Introducción al desarrollo web</h1>
</header>
<p>
Un curso nuevo de tipo MOOC, <b>totalmente gratuito</b> y disponible en la Web (<b>curso online</b>), con el que vas a aprender los conceptos básicos del desarrollo de aplicaciones web.</p>

<p>Aprende HTML, CSS, JavaScript, PHP... y los principios básicos del diseño, de la usabilidad y de la accesibilidad web.</p>

<p>La fecha de inicio de la tercera edición del curso es el 23/09/2013. El curso se desarrolla en la dirección <a href="http://ideswebcourse.appspot.com/">http://ideswebcourse.appspot.com/</a><p>

<iframe width="560" height="315" src="http://www.youtube.com/embed/TKfOc4EkiOE?rel=0" allowfullscreen></iframe>

<p><a href="http://ideswebcourse.appspot.com/">¡Apúntate y aprende!</a></p>

<h2>Temario</h2>

<p>En este curso aprenderás todo lo que necesitas saber para convertirte en un desarrollador web desde cero: HTML, CSS, JavaScript, DOM, DHTML, XAMPP, PHP, phpMyAdmin y MySQL.<p>

<p><a href="http://ideswebcourse.appspot.com/schedule">Temario »</a></p>

<h2>Calendario</h2>

<p>¿Cuándo empieza el curso? ¿Cuánto dura el curso?<p>

<p><a href="http://ideswebcourse.appspot.com/calendar">Calendario »</a></p>

<footer>

</footer>

</body>

</html>

lunes, 7 de octubre de 2013

Wireframe

He decidido continuar el curso de septiembre de 2012, un año después.
Quedó pendiente la realización de un Wireframe para la realización de una aplicación tipo Flickr "de juguete".

Para su realización he utilizado la herramienta online que se llama gliffty. Se puede utilizar registrándose en https://www.gliffy.com/

Los Wireframes son solamente una de las opciones disponibles. Con esta aplicación web pueden realizarse varios tipos de diagramas de flujo, decoración, etc.

He realizado los wireframes de la página principal de la aplicación y la de búsqueda. Han quedado de la siguiente forma.

Página principal:

Página de búsqueda:

jueves, 23 de mayo de 2013

HTML5: Nuevas funcionalidades en formularios parte 2.

En esta segunda parte vamos a ver los nuevos atributos de contenido que introduce HTML5. A parte de ver brevemento los Modernaizer y Polyfills.

Nuevos atributos de contenido.

autocomplete, autofocus, min, max, step, pattern, placeholder,required

Modernizr y Polyfills

Nuevos atributos para la etiqueta <input>

autocomplete: puede utilizarse con otras etiquetas como el elemento form. Especifica si un formulario completo o un campo de éste debe de tener la opción de autocompletado.
Ejemplo:
<form autocomplete="on">
<input type="email" name="email" autocomplete="off">

Con valor on se autocompletará el formulario con valores que el usuario haya introducido en ese campo en ocasiones anteriores. En el caso de desactivarlo con la opción off se previene que un campo se complete automáticamente, por motivos de seguridad por ejemplo.

Es posible que en un mismo formulario existan campos que se autocompleten y que no lo hagan.

Este atributo funciona con los siguiente tipos (type) de input:

text
search
url
tel
email
date pickers
password
range
color

autofocus: no permite indicar en qué campo de entrada se coloca el foco cuando se carga la página. Es un atributo de tipo booleano, por lo que no debemos definit más de uno en cada formulario.
Ejemplo:
<input type="text" name="nombre" autofocus>

Este atributo es muy útil para los usuarios de teléfonos móviles. Es importante asegurarse que el campo seleccionado para que sea el campo que empezarán a usar la mayoría de los usuario.

min y max se utilizan para delimitar el rango de los valores numéricos. Permiten especificar un máximo y un mínimo para un campo de entrada. No permite introducir un valor por encima del máximo y por debajo del mínimo.

Ejemplo:
<input type="number" name="cantidad" min="2" max="8" />

<input type="range" name="rango" min="2" max="8" />

Este atributo funciona con los siguiente tipos (type) de input:

number
range
date
datetime
datetime-local
month
time
week

step: nos indica la pauta que nos dará los valores válidos en un formulario, en el caso anterior serían válidos los valores 2,4,6,8

Ejemplo:
<input type="range" name="rango" min="2" max="8" step="2" value="2"/>

Este atributo funciona con los siguiente tipos (type) de input:

number
range
date
datetime
datetime-local
month
time
week

pattern: el atributo pattern permite especificar las expresiones regulares que pueden introducirse en un campo.

Ejemplo:
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

El atributo title nos ayuda a comprender que información espera el campo.

Este atributo funciona con los siguiente tipos (type) de input:

text
search
url
tel
email
password

placeholder: este atributo nos muestra el contenido que espera el campo.

Ejemplo:
<input type="text" name="nombre" placeholder="Fernando Haro" />

Esta pista se muestra en el campo cuando está vacío y desaparece cuando el campo recibe el foco.

Este atributo funciona con los siguiente tipos (type) de input:

text
search
url
tel
email
password

required: es un atributo booleano que indica que el campo que debe de rellenarse antes de enviar el formulario. Es el campo obligatorio que aparece señalado con un asterisco o en rojo.

Ejemplo:
<input type="text" name="nombre" required />

Este atributo funciona con los siguiente tipos (type) de input:

text
search
url
tel
email
password
number
checkbox
radio
file

Modernizr y Polyfills

Modernizr: es una librería de javascript que nos permite conocer la compatibilidad del navegador con las tecnologías HTML5 y CSS3. En el caso de encontrar elementos no compatibles ofrece medidas para solucionarlo.

Polyfills: librería de javascript que nos permiten cubrir los elementos no soportados por los navegadores.

Modernizr + polyfills ahorra trabajo a los desarrolladores.

Este post se ha creado a partir del video del curso idesweb.

miércoles, 22 de mayo de 2013

HTML5: Nuevas funcionalidades en formularios.

Una de las características más importantes del nuevo standar HTML5 son los nuevos elementos para el manejo de los formularios. Ya que nos permite gestionarlos de manera nativa, y por lo tanto podemos prescindir de javascript para realizar algunas validaciones del formulario por parte del cliente.

Los formularios no se enviarán si no son válidos y permitirá que el usuario vuelva a introducir los valores que no eran correctos.

Nuevas funcionalidades del atributo type en la etiqueta <input>:

url, tel, email, number, color, search, range, datetime, datetime-local, date, month, week, time.
vista de los tipos de input en los dispositivos móviles. Modificando la apariencia del interfaz táctil en función de los datos que tengamos que rellenar.

Ejemplos:

url: <input type="url" name="url">

tel: <input type="tel" name="telf" pattern="(+[0-9]{2})[0-9]{2}" />
La variedad de teléfonos es muy amplia por lo que debemos especificar un patrón determinado. En teléfono móviles podría mostrarse la agenda para seleccionar un teléfono.

number: <input type="number" name="number" min="1" max="5" value="2" />

Se pueden asignar restricciones de números mínimos y máximos así como un valor predeterminado value

color: <input type="color" name="favcolor" value="#123456" />
En teoría sirve para seleccionar colores. value nos indica el color seleccionado por defecto. (no me ha funcionado en firefox y safari).

search: <input type="search" name="buscador" />
Aparece una cruz que permite borrar la palabra de búsqueda.

range: <input type="range" name="rango" min="1" max="10"/>
Consta de una barra deslizable que asigna valores en un intervalo definido.

datetime: <input type="datetime" name="fechahora" />
Permite seleccionar hora completa además de dia, mes y año. Incluye la zona horaria.
(no me ha funcionado en firefox y safari).

datetime-local: <input type="datetime-local" name="fechahora" />
Igual que el anterior pero sin incluir la zona horaria.

date: <input type="date" name="fecha" />
Permite seleccionar el día mes y año.

month: <input type="month" name="mes" />
Permite seleccionar un mes y un año específicos.

week: <input type="week" name="semana" />
Permite seleccionar una semana y un año específicos.

time: <input type="time" name="hora" />
Permite seleccionar horas y minutos.

Los navegadores que actualmente no soportan estos valores tomán estos tipos por defecto como: <input type="text" />

En el año 2014 el HTML5 será recomendado oficialmente por W3C a partir de 2014.

La información de este post se ha extraido del video del curso idesweb.

martes, 21 de mayo de 2013

HTML conceptos avanzados: Formularios parte 2

Etiquetas de los elementos de un formulario

Las etiquetas de un formulario establecen una relación entre el control y el texto de la etiqueta.

La etiqueta <label></label> se asocian a los controles mediante el atributo for, que debe de coincidir con el valor del atributo id del control.

Agrupación de elementos

Los elementos de un formulario pueden agruparse por temas. El título de cada grupo de elementos se establece con la etiqueta <legend></legend>. La etiqueta <legend> debe definirse justo después de la etiqueta <fieldset>

Elementos desplegables

La etiqueta <select></select> define una lista desplegable.

La etiqueta <option></option> define las opciones de una lista desplegable.

La etiqueta <optgroup></optgroup> nos permite agrupar la información dentro de un elemento desplegable.

La etiqueta <textarea></textarea> define input / control de entrada multilinea:

Esta información se ha extraido de la página W3C Schools

lunes, 20 de mayo de 2013

HTML conceptos avanzados: Formularios parte 1

Segun la W3C un formulario es un documento que incluye:

Contenido normal
Código
Elementos especiales llamdos controles
Rótulos para los controles

Los formularios se utilizan para que los usuarios envíen información al servidor.

Ejemplos:

Formularios de registro
Acceso a sitios web
Comentarios en redes sociales

Etiquetas de los formularios:

<form></form> todos los datos que se quieran enviar deben encontrarse entre estas dos etiquetas. Esta etiqueta no tienen representación gráfica.

action

El único atributo requerido para la etiqueta form.
Espera una cadena de texto que especifique una URL o ruta a la acción de destino que procese los datos de la petición.
Es posible utilizar una ruta absoluto o relativa.

method

Indica la forma de enviar la información.
Acepta los valores GET y POST.
Método por defecto GET.

Métodos de envío.

Es preciso distinguir entre dos tipos de peticiones que un cliente realiza a un servidor: GET y POST.
GET es el método que utilizamos habitualmente al navegar.

GET

Al utilizarlo los datos son visibles en la URL como parejas nombre=valor
Limitada, el límite depende del navegador.
Lo utlilizaremos cuando el resultado sea siempre el mismo o pueda ser guardado como en un formulario de búsqueda.

POST

Más seguro al enviar información sensible, como contraseñas, los datos no son visibles.
No tiene límite en el envío.
Posibilita la subida de ficheros al servidor.

accept-charset

Espera una lista de juegos de caracteres separados por comas.
Normalmente utiliza UTF-8 y en ocasiones ISO-8859-1 (Latin 1).
No es muy común, casi nunca se utiliza.

enctype

Especifica el tipo de codificación. por defecto "aplication/x-www-form-urlencoded" convierte todos lo espacios en símbolos suma.
"multipart/form-data" se utiliza para subir ficheros mediante el formulario.
"text/plain" sólo convierte los espacios en símbolos de sumar, pero los caracteres speciales no son convertidos.

<input /> Es de las etiquetas más utilizadas en los formularios. Con ellas podemos definir gran parte de los contenidos típicos de los formularios.

Entradas de tipo texto.
Casillas de verificación.
Casillas de opción (tipo radio)
Archivos.
Contraseñas
Campos ocultos.
Botones varios.

No tiene etiqueta de cierre, por lo que es conveniente cerrarla para cumplir con los estándares.

name es un atributo común a todos los campos de un formulario. Espera una cadena de texto que especifica el nombre que recibirá el campo al ser enviado.

ejemplo: <input name="email" />

type define en que se convertirá el control, no es obligatorio pero sí muy recomendable.

"text", por defecto.
"checkbox" indica que el campo será una casilla de verificación.
"radio" casilla de opción (radio).
"file" muestra un botón que abrirá una ventana para seleccionar un archivo. Dependiendo del navegador también muestra el nombre o la ruta al archivo,
"password" genera un campo de texto enmascarado.
"hidden" es un campo oculto. Para incluir información que no rellena el usuario de forma activa como el tiempo que tardado en rellenar el formulario.
"button" mostrará un botón.
"submit" dibuja un botón enviar.
"image" utiliza una imagen con la misma función que un botón del tipo submit. Poco utilizado.
"reset" utiliza un botón que borrará el formulario.

disabled

Desabilita el campo para que no pueda ser utilizado. disabled = "disabled"

readonly

Opera de forma parecida a disabled, pero aplicado a un input de tipo "text" sería posible seleccionar el texto y copiarlo.

value

Ciertos campos necesitan de un atributo value para completar su funcionalidad.

Ejemplos con <input />

<input type="text" /> Los imput del tipo text son los más comunes. se utilizan por defecto.

Pueden limitar el número de caracteres que se insertan. Útil para controlar el tamaño de datos que están limitados en las bases de datos.
maxlegth es el atributo encargado de ello y el valor es un entero distinto de cero.

size

Se le atribuye un número y es la anchura del campo de texto en caracteres.
Está relacionado con el estilo por lo que se desaconseja el uso de este atributo.

value

En input de tipo texto nos indican el valor de ese campo por defecto. Ya no se utiliza, habría que borrarlo para poder escribir en su lugar.

<input type="checkbox" /> Insertan casillas de verificación.

name

Como las casillas se ordenan en grupo es importante que lleven el mismo nombre de modo que al recibirlas, el servicio de destino sepa que esos valores corresponden al mismo campo.

checked

Toma como valor el texto "checked" indica que la casilla aparece marcada por defecto.

value

Indica al formulario que valor debe enviar al formulario si la casilla está activada. Si no se declara el formulario enviará inforamación imposible de procesar.

<input type="radio" /> Insertan casillas de verificación tipo radio. Se diferencia de las casillas de verificación en que sólo es posible seleccionar una de las opciones.

name

Todos los elementos deben tener el mismo valor del atributo name.

checked

Toma como valor el texto "checked" indica que la casilla aparece marcada por defecto.

value

Se enviará junto con el formulario.

<input type="file" /> nos permiten adjuntar archivos al envío del formulario.

accept

En principo pensado para limitar el tipo de archivo que pueda ser subido, no está implentado por todos los navegadoresy siempre está activa la opción todos los archivos.

<input type="file" accept="image/gif" />

Recordar que para el envío de archivos es necesaria la etiqueta:

<form enctype="multipart/form/data">
<input type="file" ... />
<form />

Tipos de botones:

<input type="submit | reset | button | image" />

submit: envía en formulario
reset: reinicia el formulario.
otro tipo de botones type="button" Para dotar de acciones a este tipo de botones utlizamos eventos de javascript.

En intrusivo mediante onclick="javascript:function();"
No intrusivo, mediante el uso de librerías. <script src="myNonIntrusiveLibrary.js" /> <script>function();</script> no incrustados en el HTML.

value

Especifica el texto que aparece en los botones.

CONSEJOS

Si el formulario no está entre las etiquetas <form> </form> no será enviado, pero sí pueden existir campos fuera de ellas.
<input type="value" /> Especificar siempre el atributo type.
<input type="submit" /> Siempre necesitaremos un botón de envío del formulario.
Separa el contenido de los estilos. ~~size, cols, row~~ para eso está el CSS.

Más etiquetas en el próximo post

Post extraido del video del curso idesweb

martes, 14 de mayo de 2013

HTML conceptos avanzados: El juego de caracteres

En más ocasiones de ls que nos gustaría nos hemos encontrado con documentos en los que aparecían extraños símbolos a la hora de reproducir textos.
La razón de estos problemas radica en el juego de caracteres.

Consejo para evitar estos problemas:

Los documentos HTML, CSS, javascript, texto, PHP, datos de cualquier BD, conexión con la base de datos mediante servicios JSON y XML que utilicemos, deben compartir el mismo juego de caracteres.

Amenudo nos encontraremos que la decisión de utilizar un determinado juego de caracteres no depende de nosotros.

El juego de caracteres recomendado es el UTF-8 sin BOM este juego de caracteres permite combinar caracteres de cualquier alfabeto.
Si por alguna razón no podemos utilizarlo entonces es recomendable utilizar el ISO-8859-1 también conocido como Latin 1. Es el mejor juego de caracteres recomendado para Europa occidental.
En el caso de necesitar utilizar el símbolo de Euro, el juego recomendado es el ISO-8859-15 también llamado Latin 9.

Para indicar el juego de caracteres en un documento HTML se utiliza una etiqueta <meta> que se escribe en la cabecer >head> de la página web.

En HTML4

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

En XHTML 1

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

Si el juego de caracteres es diferente a UTF-8

<?xml version = "1.0" encoding="ISO-8859-1"?>

En HTML 5

<meta charset="utf-8">
<meta charset="utf-8" />

Mucho más sencillo.

Información extraida del video del curso idesweb

sábado, 11 de mayo de 2013

HTML Básico: Imágenes

Las imágenes con otra de las caracteríscicas del lenguaje HLTM que le confieren la característica de Hipermedia.

La etiqueta que se utiliza para las imágenes es <img />

Los atributos obligatorios en XHTML 1.0 (la versión "integrista" del HTML) son:

src, indica la ruta de la imagen
alt, muestra el texto alternativo cuando la imagen no se puede cargar.

Ejemplo:

Atributos opcionales:

width y height, definen las dimensiones de la imagen, el ancho y el alto
longdesc, url de la página en la que se proporciona una descripción larga de la imagen.
ismap y usemap, se usan para definir mapas de imágenes.

Atributos obsoletos:

align, border, hspace, vspace (desacondejados, utilizar CSS en su lugar)

Otros usos desaconsejados de las imágenes, por ser recomensable el uso de CSS.

imagen de fondo de una página, <body background="">
imagen de fondo de una tabla, <table background="">

Las imágenes se pueden encontrar en el mismo directorio que el documento html que la contiene o pueden encontrarse en una ubicación externa, en cuyo caso indicaremos la url.

Mismo directorio:, <img src = "mifoto.jpg" alt = "fotografía del autor" />
Otro directorio o externo, <img src ="http://www.fernandoharo.es/imagenes/mifoto.png" />

Formatos gráficos que se pueden emplear con la etiqueta <img>

El standard HTML no da una lista de formatos de imagenes soportadas, esto es competencia de los navegadores. Los más utilizados son:

JPG, GIF(incluidos gif animados) y PNG

GIF, es el formato más antiguo, sus características más importantes son:

soporta paletas de hasta 256 colores
permite transparencias de un solo color
permite realizar animaciones

Se puede utilizar la técnica de dithering para representar colores reales con una paleta de sólo 256.

aplicando dithering de 16 colores a la playmate Lenna

La tecnica consiste en combinar pequeños cuadros muy próximos de dos colores para simular un tercero.

JPG/JPEG, es el formato más popular en la red

permite trabajar hasta con 16 millones de colores.
archivos pequeños mediante algoritmos de compresión con pérdidas.
no permite transparencias

PNG, creado especificamente para la web.

máxima calidad sin perdidas
mayor tamaño que el formato JPG

Mapas de imagen

También conocidas como imágenes sensibles, contiene zonas activas que son enlaces.
se pueden procesar en el lado del cliente (usemap) o en el lado del servidor (ismap).

Mapa de imagen del cliente, el más utilizado:

map, define el mapa de imagen con sus distintas zonas activas.
el nombre se utilizará en la etiqueta <img> para relacionar el mapa de imagen con la imagen correspondiente.

En el atributo usemap se indica el nombre del mapa que se va a utilizar.

cada zona activa se define con una figura geométrica,
existen 3 figuras geométricas que se pueden utilizar

shape, indica la figura geométrica a utilizar.
coords, las coordenadas de la figura geométrica.
href, para indicar la url del destino del enlace.
alt, texto alternativo que representa a la figura geométrica en el caso de que no se pueda visualizar la imagen.

Tipos de áreas:

Rectángulo, shape="rect" coords="x1,y1,x2,y2" Atención !!! (x1,y1) son las coordenadas de la esquina superior izquierda y (x2,y2) son las coordenadas de la esquina inferior derecha. En HTML la esquina superior izquierda tiene coordenadas (0,0).
Círculo, shape="circle" coords="x,y,r" , x, y son las coordenadas del centro y r es el radio.
Polígono, shape="poly" coords="x1,y1,x2,y2,...,xn,yn2 las coordenadas son las de los vértices del polígono.

En la página de W3C schools podemos encontrar un ejemplo práctico de mapas.

código del ejemplo:

Hay que prestar atención al detalle del símbolo almohadilla al hacer referencia al mapa en usemap.

Algunos usos de los mapas:

en mapas geográficos.
en barras de navegación con iconos.
en imágenes de una página principal

La información se ha extraido de este video del curso idesweb

viernes, 10 de mayo de 2013

HTML Básico: Enlaces

Los enlaces son los elementos que confieren al leguaje HTML su característica de "hipertexto". Hipertexto significa que es posible leerlo de forma no secuencial y que está compuesto de nodos, secciones, de enlaces y anclajes.

Los nodos son las partes del hipertexto que tienen información accesible para el usuario, los enlaces o vínculos son las uniones que se establecen entre nodos. Los anclajes son los puntos de activación de los enlaces.

Las páginas web tienen dos tipos de enlaces:

Enlace intradocumental (dentro de la misma página)
Enlace extradocumental (a otras páginas del mismo servidor o externas)

Las etiqueta que se define en HTML para definir un enlace es <a></a>

Todo lo que haya entre estas dos etiquetas se considerará un enlace, normalmente texto o imágenes.

Enlace Intradocumental

Enlace a un punto en el mismo documento.

Enlace: <a href="#nombre">...</a>
Destino:

                   <a name="nombre>...</a>
                   <h1 id="nombre>...</h1>
                   <p name="nombre>...</p>
Es posible crear varios enlaces a un mismo nombre pero no es posible hacer un enlace a varios nombres. En nombre debe de ser único y siempre va precedido del símbolo almohadilla. Ojo, en el destino no se pone.

Enlace Extradocumental

Enlace a otro documento.

Enlace: <a href="pagina.html">...</a>

Enlace a un punto en otro documento.

Enlace: <a href="pagina.html#nombre">...</a>
Destino:

                   <a name="nombre>...</a>
                   <h1 id="nombre>...</h1>
                   <p name="nombre>...</p>

El valor del atributo href es la URL (Uniform Resource Locator), que es la forma estandarizada de hacer referencia a un recurso en la web.

<servicio>://<usuario>:<contraseña>@<host>:<puerto>/<ruta>/<recurso>

Una URL se compone de:

Protocolo o servicio que se está empleando.
De las credenciales, nombre de usuario y contraseña con la que se realiza la conexión al servicio.
El host o servidor al que se accede.
El puerto al que se realiza la conexión.
La ruta de acceso al recurso.
Nombre del recurso (una página web o cualquier tipo de documento).

Ejemplos de URL

De servivio web: http://scriptmaker.blogspot.com.es/
De servicio ftp: ftp://ftp.ua.es/pub/software/listado.txt
De email: mailto:ferhama@gmail.com

Consejos:

Utilizar siempre minúsculas en los enlaces a documentos.
Utilizar el alfabeto inglés, números y -_
Cuidado con hacer enlaces a documenos internos en nuestro ordenados.

Esta información se ha elaborado a partir del video del curso de idesweb.

jueves, 9 de mayo de 2013

HTML Básico: Tablas

En HTML las tablas se organizan filas y celdas.

Etiquetas más utilizadas:

<table></table> nos indican el inicio y el final de la tabla, el resto de etiquetas se encuentra en su interior.

<tr></tr> (Table Row) representa una fila de la tabla.

<td></td> (Data Table cell) representa a una celda de la tabla.

Ahora vamos a ver otras etiquetas que pueden ser de utilidad

<th></th> (Table Header cell) Representan a las celdas de la cabecera de la tabla
Estas etiquetas se pueden utilizar para definir estilos y los navegadores resaltan estas celdas en negrita

Se ha omitido el código de las celdas

<thead></thead> Agrupa una o más filas de cabecera.

<tbody></tbody> Agrupa una o más filas del cuerpo de la tabla.

<tfoot></tfoot> Agrupa una o más filas del pie de la tabla.

<caption></caption> nos permite separar el título de la tabla.

Tablas con celdas compuestas:

Los atributos colspan y rowspan nos especifican cuantas columnas o filas respectivamente ocupan las celdas. A estos atributos siempre se les asignará un valor entero.

Las etiquetas <colgroup></colgroup> y la etiqueta <col /> se utilizan para las agrupaciones de columnas. Con ellas también se pueden utilizar el atributo span para indicar el número de columnas que se agrupan.

Consejos:
Utilizar las tablas sólo para representar tablas, no utilizar para maquetación.
Cuidado con las combinaciones de filas y columnas.
Las agrupaciones facilitan aplicar los estilos con CSS

Esta información se ha elaborado a partir del video del curso de idesweb.

miércoles, 8 de mayo de 2013

HTML Básico: Listas

Las principales etiquetas que se utilizan para confeccionar listas en HTML son:

Listas <ul>

Listas no ordenadas
Cada objeto de la lista se define con la etiqueta <li>
Este listado es un ejemplo de lista

En lenguaje HTML quedaría como sigue:

<ul>

<li>Listas no ordenadas</li>

<li> Cada objeto de la lista se define con la etiqueta</li>

<li> Este listado es un ejemplo de lista</li>

</ul>

Listas <ol>, del inglés "Ordered list"

Listas ordenadas (o numeradas).
Cada objeto de las lista se define con la etiqueta <li>
Este listado es un ejemplo de lista

En lenguaje HTML quedaría como sigue:

<ol>

       <li>Listas ordenadas (o numeradas).</li>
       <li>Cada objeto de las lista se define con la etiqueta <li> </li>
       <li>Este listado es un ejemplo de lista</li>

</ol>

Listas <dl>, del inglés "definition list"

Listas de definiciones
Los diccionarios son un ejemplo de este tipo de listas
Se usa <dt> para añadir el término
Se usa <dd> para añadir la definición al término etiquetado con <dt>

Un ejemplo de este tipo de listas:

<dl>

<dt>perro</dt>

<dd>mamífero doméstico de la familia de los cánidos</dd>

</dl>

Quedaría como sigue:

perro

mamífero doméstico de la familia de los cánidos

Listas anidadas

Cualquier lista se puede anidar en listas <ul> y <ol>
Las listas <dl> pueden anidarse a otras pero no ser anidas por su estructura en parejas
Para anidar una lista, solo hay que crear otra nueva entre la etiqueta <li>