Haciendo Web » HTML http://www.haciendoweb.cult.cu Mejorando la Intranet Cubana Thu, 13 Jun 2013 15:15:19 +0000 es-ES hourly 1 http://wordpress.org/?v=3.5.1 Tutorial HTML5 en Español: Ejemplos Prácticos de HTML5 Canvas http://www.haciendoweb.cult.cu/tutorial-html5-en-espanol-ejemplos-practicos-de-html5-canvas/ http://www.haciendoweb.cult.cu/tutorial-html5-en-espanol-ejemplos-practicos-de-html5-canvas/#comments Fri, 24 May 2013 19:49:42 +0000 Jorge Enrique Dominguez http://www.haciendoweb.cult.cu/?p=11901 El lenguaje HTML es de gran importancia para el desarrollo web, recientemente salio la nueva versión de este importante lenguaje el cual con sus nuevos elementos promete revolucionar lo que hasta hace un tiempo conocíamos de la web y extender aun mas sus posibilidades y funcionalidades, es por esto que les traigo hoy este excelente tutorial del uso de canvas que tiene HTML5 y que harán de sus paginas un mundo nuevo, Espero que les sea de utilidad.

HTML5: Elemento Canvas

El elemento de HTML <canvas> permite la creación de gráficos, diagramas, juegos y otros elementos visuales. También permite renderizar en 2D y 3D figuras e imágenes, vía JavaScript.

Canvas es quizás la parte más visible del set de características de HTML5 con nuevos demos, proyectos, etc.

 

Soporte de los Navegadores y Aceleración por Hardware

Canvas es soportado a partir de FireFox 1.5, Opera 9, las nuevas versiones de Safari, Chrome e Internet Explorer 9. La aceleración por hardware es soportada con algunas variaciones por todos los navegadores.

 

Que puede hacer Canvas y que  No

La especificación advierte de no usar Canvas para renderizar contenido estático. Hay varias razones para no usar Canvas si una imagen o un elemento de texto tradicional son suficientes. Si el scripting está deshabilitado del lado del cliente, Canvas será inútil.  El texto dibujado en Canvasno puede ser seleccionado, buscado, o rastreado por las arañas de la web. Por esa misma razón,Canvas hace más difícil la accesibilidad. Por ejemplo, si buscamos redondear los bordes de un área de texto seguramente conviene utilizar CSS3 antes que Canvas.

 

La Performance de Canvas

Canvas puede ser muy rápido, pero está en manos del programador  que esto se cumpla. Muchas de las optimizaciones que deben ser tenidas en cuenta y llevadas adelante quedan también en responsabilidad del programador. La velocidad juega un papel importante, y cualquier desarrollador de Canvas serio debe familiarizarse con los conceptos básicos de performance de gráficos como invalidations y viewports.

 

Ejemplo Práctico: Creando un Canvas

El elemento <canvas> es similar a los tags <div>, <a> o <table>, con la excepción de que su contenido son renderizados con JavaScript. Para implementarlo, necesitamos escribir el tag <canvas> en algún lugar del código HTML y crear una función de JavaScript que acceda a dicho tag una vez que la página carga y luego utilizar las APIs de Canvas de HTML5 para que se puedan visualizar nuestros dibujos.

<body>
<canvas id="myCanvas"></canvas>
</body>

HTML5 Canvas Template

<!DOCTYPE HTML>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// sigue el código

};

</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

El código superior puede ser tomado como base de todos nuestros futuros proyectos de Canvas. Podemos definir el ancho y alto utilizando las propiedades width y height. En la función inicializadora podemos acceder al objeto canvas DOM através del id y obtener el contexto 2-d utilizando getContext(). 

Líneas

El método beginPath() define un nuevo path de dibujo. El método moveTo() podemos pensarlo como una forma de posicionar el cursor de dibujo. El método lineTo() dibuja una línea entre los puntos dados. El método stroke() asigna color a la línea y la hace visible. El color por default es negro.

<script>
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();
</script>

 

<!DOCTYPE HTML>
<head>
<style>

body {
margin: 0px;
padding: 0px;
}

#myCanvas {
border: 1px solid #9C9898;
}

</style>
<script>

window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
};

</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

Otros atributos:

lineWidth =  ancho de la línea.

strokeStyle = color de la línea.

 

Paths y Curvas

Para crear un path con HTML5 Canvas, podemos conectar multiples subpaths. El punto final de cada subpath será el nuevo punto de contexto. Podemos usar los métodos lineTo(), arcTo(), quadraticCurveTo() y bezierCurveTo() para construir cada subpath. Podemos usar el métodobeginPath() cada vez que deseemos crear un nuevo path.

<!DOCTYPE HTML>
<head>
<style>

body {
margin: 0px;
padding: 0px;
}

#myCanvas {
border: 1px solid #9C9898;
}
</style>

<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 20);

// linea 1
context.lineTo(200, 160);

// curva cuadratica
context.quadraticCurveTo(230, 200, 250, 120);

// curva bezier
context.bezierCurveTo(290, -40, 300, 200, 400, 150);

// linea 2
context.lineTo(500, 90);
context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

Formas

Para crear una forma customizada con HTML5 Canvas, podemos crear un path y luego cerrarlo utilizando el método closePath(). Podemos usar los métodos lineTo(), arcTo(), quadraticTo() o bezierCurveTo() para construir  cada subpath que necesitemos.

Con la propiedad fillStyle podemos setear el color de la forma.

<script>
context.closePath();
</script>


  




<!DOCTYPE HTML>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}

#myCanvas {
border: 1px solid #9C9898;
}
</style>

<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// comienza la figura customizada
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);

// se completa la figura customizada
context.closePath();
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>


Rectángulos


Para crear rectángulos podemos usar el método rect(). A este lo podemos posicionar con los parámetros x e y, y podemos setear su ancho y alto con width y height respectivamente. La posición es relativa al borde superior izquierdo del rectángulo.






<!DOCTYPE HTML>
<head>
<style>
#myCanvas {
border: 1px solid #9C9898;
}

body {
margin: 0px;
padding: 0px;
}
</style>

<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>




Círculo


Para dibujar un círculo en HTML5 Canvas podemos crear un arco usando el método arc() y definir como ángulo de comienzo 0 y el ángulo final como 2 * PI.




<script>
context.arc(x, y, radius, 0 , 2 * Math.PI, false);
</script>




  




<!DOCTYPE HTML>
<head>
<style>

body {
margin: 0px;
padding: 0px;
}

#myCanvas {
border: 1px solid #9C9898;
}
</style>

<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};

</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>


Imágenes


Para dibujar una imagen usando HTML5 Canvas,  podemos usar el método drawImage() que requiere un objeto imagen y un punto de destino. Este último es relativo al borde izquierdo superior de la imagen.




<script>
context.drawImage(imageObj, x, y);
</script>


<!DOCTYPE HTML>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();

imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
};

</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>


Texto: Fuentes, Tamaños y Estilos


Para setear la fuente, el tamaño y el estilo de un texto en HTML5 Canvas, podemos usar la propiedad font del contexto de canvas. El estilo puede ser normal, negrita o cursiva. Por default, el estilo es normal.




<script>
context.font = 'italic 40px Calibri';
</script>


<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>

<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 80;
var y = 110;

context.font = "60pt Calibri";
context.lineWidth = 3;
// stroke color
context.strokeStyle = "blue";
context.strokeText("Hola Mundo!", x, y);
};

</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>


Hasta aquí este tutorial de HTML5 pronto publicaremos mas tutoriales sobre este tema.


Descargar Ejemplos:


  4.7 kB Ejemplos HTML5 Canvas (91)  

]]>
			http://www.haciendoweb.cult.cu/tutorial-html5-en-espanol-ejemplos-practicos-de-html5-canvas/feed/
		0
		
		
		Joomla! 3.0.3
		http://www.haciendoweb.cult.cu/joomla-3-0-3/
		http://www.haciendoweb.cult.cu/joomla-3-0-3/#comments
		Fri, 24 May 2013 14:10:54 +0000
		Miriela Ramos Molina
				
		
		
		
		
		

		http://www.haciendoweb.cult.cu/?p=11882
		
				El proyecto Joomla! Spanish se complace en anunciar la inmediata disponibilidad de Joomla! 3.0.3- Spanish.




Esta es una versión de seguridad. Esta versión también corrige varios problemas.


El objetivo del Grupo de Desarrollo es continuar proporcionando actualizaciones regulares y frecuentes para la comunidad de Joomla!.


Para esta versión los requisitos del sistema son los siguientes:


PHP 5.3.1


register_globals debe estar apagado (Off)


magic_quotes_gpc debe estar apagado (Off)


Fuente:Joomla

]]>
			http://www.haciendoweb.cult.cu/joomla-3-0-3/feed/
		0
		
		
		Firefox OS en tu navegador
		http://www.haciendoweb.cult.cu/firefox-os-en-tu-navegador/
		http://www.haciendoweb.cult.cu/firefox-os-en-tu-navegador/#comments
		Wed, 28 Nov 2012 18:05:31 +0000
		Miriela Ramos Molina
				
		
		
		
		
		
		
		

		http://www.haciendoweb.cult.cu/?p=10577
		
				Desde hace un buen tiempo sabemos que Mozilla tiene la intención de ingresar al mercado de los dispositivos móviles por la puerta grande, gracias a su sistema operativo Firefox OS. Ya existen algunos convenios firmados, y las primeras unidades deberían estar disponibles en las estanterías el año próximo. Ahora, cualquiera que desee estudiar más de cerca a este sistema operativo lo puede hacer directamente desde el navegador de Mozilla con la ayuda de una extensión llamada Firefox OS Simulator, que está disponible para Windows, Linux y OS X.


A mediados de septiembre fue posible observar una demostración de Firefox OS sobre un teléfono ZTE. Los problemas más serios de esa demo se concentraban en su rendimiento, algo que tanto el tiempo como una buena optimización de código deberían corregir. Firefox OS no es solamente una de las cartas que tiene Mozilla para jugar en el mercado de los dispositivos móviles, sino también uno de los paladines de HTML5, que se ha encontrado un poco bajo fuego desde que Mark Zuckerberg declaró que fue “un error” por parte de Facebook apostar tanto al lenguaje de hipertexto. Más allá de lo que suceda en la red social o no, lo cierto es que Firefox OS busca ser una opción diferente a las que hoy dominan el mercado.


Ahora, si deseas darle una probada, lo único que debes hacer es descargar una extensión para Firefox llamada Firefox OS Simulator. Básicamente se trata de un archivo de casi 70 megabytes que contiene todo lo necesario para simular a Firefox OS directamente desde el interior del navegador Firefox sin requerir ninguna clase de configuración adicional. Los controles principales del simulador aparecen en una pestaña dedicada en Firefox (algunos atajos de teclado y el botón para activar la simulación), mientras que otros ajustes adicionales pueden realizarse en el interior del sistema operativo.


En lo poco que he podido observar sobre transiciones y animaciones, no he notado problemas de rendimiento, pero muchas de las aplicaciones presentes en el simulador no funcionan, y algunas de las que sí funcionan, tienen problemas con la resolución. Mozilla invita a todos los interesados a reportar bugs y recomendar modificaciones a través de su página dedicada en GitHub. El plan de Firefox OS es introducirse entre smartphones de bajo costo que resultan más tentadores en regiones como Latinoamérica. Y aunque algunos medios especializados no lo visualizan compitiendo con Android y/o iOS, un estudio de Strategy Analytics le asigna a Firefox OS el 1 por ciento del mercado para el año entrante. El sistema aún no está listo, pero ya nos gustaría ver algunos de los smartphones en los que estará disponible.


 


Fuente:Firefox

]]>
			http://www.haciendoweb.cult.cu/firefox-os-en-tu-navegador/feed/
		0
		
		
		PopCorn Maker: Lo nuevo de Mozilla para la creación de videos
		http://www.haciendoweb.cult.cu/popcorn-maker-lo-nuevo-de-mozilla-para-la-creacion-de-videos/
		http://www.haciendoweb.cult.cu/popcorn-maker-lo-nuevo-de-mozilla-para-la-creacion-de-videos/#comments
		Tue, 27 Nov 2012 20:31:06 +0000
		Miriela Ramos Molina
				
		
		
		
		
		
		
		

		http://www.haciendoweb.cult.cu/?p=10546
		
				El Mozilla Festival nunca nos deja indiferentes a su contenido y una de las principales atracciones de este fin de semana pasado fue la presentación mundial de Popcorn Maker, lo nuevo de Mozilla para crear videos. Con una aplicación que se ejecuta desde el navegador, los usuarios ahora podrán crear videos mezclando todo tipo de información multimedia existente en la red. Así que podrás mezclar videos con videos, videos con música, videos con texto, imágenes, mapas y hasta con tweets. Mozilla funda, tal vez, una nueva generación del video en internet.

Los videos que se cuelgan en línea son la causa de la distracción, entretenimiento, información y educación de la actual generación. YouTube supo explotar tempranamente en un fenómeno  que no está ni cerca de borrar a la televisión, pero sí que ha logrado que quienes ya no la mirábamos, tuviéramos un lugar en donde escoger el contenido que queríamos ver y adaptarlo a nuestros horarios. Además, la posibilidad de subir nuestros propios videos o ver los de aquellos que desde sus casas producen marcó a fuego esta etapa  e hizo de YouTube y de los videos en internet lo significantes que son hoy. Por más que detrás de YouTube esté Google, Mozilla ha demostrado otra vez que sus intereses son otros y ha presentado una herramienta llamada PopCorn Maker, especialmente diseñada para crear videos utilizando varias fuentes de información.


PopCorn Maker se presentó en Londres en el Mozilla Festival y las demostraciones que se hicieron del software hacían concluir que el objetivo era crear videos con contenido multimedia integrado de una forma más fácil y visual. El concepto está orientado a la recopilación de contenido y a la mezcla del mismo para contar una nueva historia. Por ejemplo, tomando varios videos en línea sobre determinado asunto y recortarlos y luego juntarlos para crear un nuevo video. A su vez, le puedes agregar información tomada de Wikipedia, Twitter, Google, Google Maps< y otros. También pueden ser videos de diferentes temas y hacer un buen remix de ellos, agregando texto, enlaces, música, tweets, alarmas y otros efectos de video. Para usarlo y guardarlo, sólo debes registrarte con Persona, un servicio que Mozilla asegura respetuoso sobre la privacidad.


 


Hasta ahora, el vídeo en la web estaba atrapado en un pequeño recuadro negro. Esto lo cambia Popcorn Maker, que lleva la edición de vídeo al resto de la web: enlazable, con contenidos que se entremezclan, abierto, y conectado a todo el mundo. Hasta ahora sólo estaba disponible para los desarrolladores, pero ahora está en las manos cualquier persona, a través de una intuitiva interfaz que cualquiera puede usar. Estas fueron las palabras de Brett Taylor, el director de Mozilla al presentar la herramienta que está escrita en HTML, Javascript y CSS, funcionando en todos los sistemas operativos a través del navegador. Ya en su interfaz, PopCorn Maker muestra una línea de tiempo que puedes ver en los videos elaborados para tutorial y que podrás modificar cuando quieras una vez hecho tu video. Los formatos de salida son varios  y la compatibilidad para compartir también. Como dijo Taylor: Estamos realmente excitados por ver qué hace el mundo con él.


Fuente:Mozilla

]]>
			http://www.haciendoweb.cult.cu/popcorn-maker-lo-nuevo-de-mozilla-para-la-creacion-de-videos/feed/
		1
		
		
		Curso de HTML para principiantes, parte II
		http://www.haciendoweb.cult.cu/curso-de-html-para-principiantes-parte-ii/
		http://www.haciendoweb.cult.cu/curso-de-html-para-principiantes-parte-ii/#comments
		Tue, 28 Aug 2012 04:20:49 +0000
		Juan Pablo Pérez Manes
				
		
		
		

		http://www.haciendoweb.cult.cu/?p=9526
		
				código htmlLa semana pasada comenzamos con nuestro curso de HTML para principiantes. Allí les explicamos los motivos para aprender HTML aún sin ser diseñadores o programadores web, además de contar un poco sobre el origen del lenguaje, la importancia de las etiquetas y la correcta nomenclatura de los archivos. Hoy vamos a avanzar un poco más con la estructura básica de un documento HTML, las etiquetas más importantes, y sus atributos.


Estructura de un documento


Para que un navegador pueda leer de forma correcta un documento HTML, por supuestotiene que tener un determinado orden, y la información tiene que estar encerrada en las etiquetas correctas. De nuevo, insistimos en la importancia de cerrar todas las etiquetas que se hayan abierto alguna vez.


Los documentos HTML se dividen en dos partes, el encabezado y el cuerpo. En la entrega anterior, les hablamos sobre la importancia que tenía la etiqueta <head> antes de que comience <body>. Ahora vamos a explicar un poco más al respecto. Pero antes, debemos aclarar que todos los documentos HTML se abren con la etiqueta <html> y finalizan con </html>. Puede que podamos ver el formato bien si lo probamos de forma local, pero es inaceptable -¡bajo ningún punto de vista!- comenzar un documento sin agregar esta etiqueta.


Como decíamos, la etiqueta <head> marca el comienzo del encabezado. En esta sección del documento encontraremos todos los elementos de la página que no van a ser visibles para el usuario pero que serán interpretados por el navegador. Por ejemplo, los scripts de JavaScript, la metadata, el título de la página, etc. Aquí también estará incluido el código CSS que le dará el diseño a la página. Lo que nos lleva a hacer una aclaración que profundizaremos en otra entrega: ya no son los ’90 y no estamos hosteando nuestras páginas en Geocities. No uses el HTML para intentar hacer un diseño “bonito”.


La segunda parte del documento es el cuerpo, cuyo comienzo está marcado por la etiqueta <body>. Aquí estarán todos los contenidos que serán visibles para el usuario. Por eso, todo lo que sea JavaScript, CSS, no puede estar incluido dentro del cuerpo –exceptuando enlace de los JavaScript externos antes de cerrar el cuerpo-. Las etiquetas están hechas para que podamos trabajar tranquilos y tener todos nuestros espacios bien estructurados.


Etiquetas importantes


Antes de comenzar a enumerar las etiquetas más populares tenemos que hacer una aclaración sobre los tipos de elementos que puede contener una etiqueta. Cada etiqueta puede contener dentro de sí otra etiqueta que marque determinadas características semánticas. Por ejemplo, dentro de la etiqueta <p> (de paragraph o párrafo) puedo sumar la etiqueta <font> para determinar la tipografía, la etiqueta <em> para enfatizar o <strong> para poner en negritas.


En el antiguo HTML, el más primitivo, estas dos últimas etiquetas que mencionamos estaban consideradas como un aspecto de diseño y se identificaban como <b> (de bold) e <i> (deitalic). Hoy en día esto se define a través de CSS y lo que nosotros hacemos con HTML es dar una explicación semántica a ese cambio en el formato del texto. Así es como enfatizamos, pero no ponemos en negrita, porque luego a través de CSS podemos crear una regla para que todas las negritas tengan una tipografía y color diferentes, por ejemplo.


Volviendo al tema principal, esto de etiquetas dentro de etiquetas sucede porque tenemos dos tipos de elementos que el navegador puede diferenciar. Se trata de los elementos en línea oinline elements y los elementos en bloque o block elements. La diferencia entre ambos es que los elementos en bloque siempre ocupan todo el espacio del bloque, hasta el final de la línea, mientras que los elementos en línea solamente ocupan el espacio que tienen determinado. La gran mayoría de los elementos en bloque pueden contener en su interior elementos en línea, pero no así al contrario. Así, yo puedo tener un <em> dentro de un <p>, pero no viceversa.


Pasamos entonces a enumerar y describir las etiquetas más importantes de un documento HTML:


    

  • <html>: esta etiqueta es la encargada de marcar el comienzo y el final del documento.
    • 

  • <head>: está encargada de delimitar el encabezado. Aquí encontraremos información sobre la página que es importante para el navegador y para el funcionamiento de la página, pero invisible para el usuario.
    • 

  • <title>: se incluye dentro del encabezado y es la encargada de titular la página. Nosotros podremos ver el nombre en la pestaña del navegador.
    • 

  • <body>: marca el comienzo del documento y del contenido que podrá ver el usuario. Dentro de la etiqueta del cuerpo se encuentran todas las etiquetas que marcan la estructura y el formato de la página.
    • 

  • <p>: etiqueta de párrafo. Esta etiqueta marca el comienzo y el final de un párrafo. Podemos hacer un texto continuo de varios párrafos sin usarla y veremos que el navegador no diferencia donde comienza uno y termina el otro. Esta etiqueta tiene varios atributos de formato que se pueden aplicar, como veremos más adelante.
    • 

  • <h1>, <h2>, etc: son las etiquetas de los encabezados. A no confundir con la etiqueta <head>, estas etiquetas están contenidas dentro del cuerpo y sirven para crear títulos y subtítulos. A través de CSS se les puede dar atributos diferenciados.
    • 

  • <table>: sirve para crear tablas dentro del documento. En los comienzos de internet, para poder darle un formato más atractivo a las páginas, se solía usar tablas HTML para crear las estructuras. Esto por supuesto le daba un peso impresionante a las páginas y era muy desprolijo, afortunadamente en el presente nos manejamos con DIV, aunque no corresponde a este curso. Las tablas, sorprendentemente, se siguen usando para crear páginas web, aunque no es recomendable.
    • 

  • <form>: es la etiqueta que marca la creación de un formulario. Ahora bien, hay muchas formas de crear formularios online, y si estamos recién comenzando con HTML solamente se debería usar para practicar y nada más. Esta etiqueta tiene muchas etiquetas propias como <input> que permiten al usuario completar campos.
    • 

  • <iframe>: con esta etiqueta podemos insertar páginas web completas dentro de otras páginas web. Puede servir para crear galerías de imágenes, entre otras cosas. Hoy en día su implementación máxima es en las pestañas de Facebook, con una versión mucho más moderna pero con el mismo espíritu.
    • 

  • <a>: esta es la etiqueta de los vínculos. Se puede enlazar a documentos HTML externos o a diferentes partes del mismo documento a través de anclas.  Por ejemplo, el menú de cada artículo de Wikipedia, cuando es muy extenso, se maneja con anclas. Cada vez que hacemos clic en uno de estos títulos el ancla nos llevará a la parte del documento a la que queremos ir.
    • 



Estas no son las únicas etiquetas HTML disponibles para un documento. A medida que vamos avanzando, vamos necesitando más etiquetas. Pero cuantas más sumamos, como por ejemplo en el caso de las tablas, más pesado será el documento y más tardará el navegador en abrirlo. La idea es hacer un sitio liviano y evitar el uso gratuito de etiquetas.


Atributos


Finalizaremos nuestra entrega de hoy con los atributos de las etiquetas. Ya se pueden ir imaginando por el nombre de qué se trata. Lo que hacen los atributos es darle al navegador información adicional sobre la etiqueta para que sea leída correctamente y nuestra página sea más completa. Los atributos son una forma de personalizar las etiquetas HTML.


Cada etiqueta HTML tiene una lista de atributos que puede ser usado. Generalmente se repiten de etiqueta a etiqueta pero algunos atributos no funcionarán en determinadas etiquetas. Los atributos que sirven para todas las etiquetas se denominan atributos comunes y en poco tiempo los tendremos memorizados. A su vez, estos atributos comunes se dividen en core, internationalization y scripting. En HTML Help pueden encontrar una lista completa con todos los atributos de este tipo.


Ahora bien, hoy en día los atributos más usados son id y class. El atributo id nos ayuda a crear un identificador único de la etiqueta, que la diferenciará del resto del documento. Con el atributo class estamos generando una clase de etiquetas, que se diferenciará del resto. La diferencia fundamental entre class y id es que varias etiquetas pueden tener la misma clase, pero el id será único de una etiqueta en particular.


¿Por qué son los más populares? Pues bien, son los más usados en CSS y en JavaScript. A través de id y class podemos crear diferentes reglas de CSS para crear formatos. Y debido a la existencia de estos dos atributos, los atributos que se solían aplicar a las etiquetas <body> o <p> ya no se usan más. Por ejemplo, si antes queríamos cambiar la tipografía de un único párrafo en todo el documento, teníamos que usar la etiqueta <font> dentro de <p> para poder hacerlo, y sumar varios atributos. Con CSS podemos crear en el HTML un id para el párrafo particular que queremos modificar, y nos estaremos ahorrando buenas líneas de código además de peso en el documento.


En la próxima entrega, estaremos hablando del DOCTYPE, los vínculos y las anclas, y el uso correcto de las imágenes en una página web. Nos estamos guardando la artillería pesada –tablas y formularios- para el final.


Fuente: Genbeta

]]>
			http://www.haciendoweb.cult.cu/curso-de-html-para-principiantes-parte-ii/feed/
		0
		
		
		Curso de HTML para principantes, parte I
		http://www.haciendoweb.cult.cu/curso-de-html-para-principantes-parte-i/
		http://www.haciendoweb.cult.cu/curso-de-html-para-principantes-parte-i/#comments
		Sat, 25 Aug 2012 04:10:13 +0000
		Juan Pablo Pérez Manes
				
		
		

		http://www.haciendoweb.cult.cu/?p=9511
		
				código htmlSi no somos diseñadores web o programadores, es posible que no encontremos una utilidad inmediata para el código HTML. Pero en marketing, periodismo, y otras profesiones relacionadas con la comunicación, saberlo se está volviendo casi una obligación. Aunque sean las cosas más básicas, nos encontramos necesitando cada vez más saber cómo usarlo. Y no es nada complicado, las apariencias engañan. Para facilitar la existencia de estas personas que recién se están metiendo al mundo de HTML, y que realmente no necesitan ser unos expertos para hacer lo que tienen que hacer, hemos realizado este breve curso en algunas entregas donde develaremos algunos secretos de HTML para principiantes.


Creo que comenzar a aprender HTML puede ser adictivo, y aunque en un primer momento solamente necesitemos tener un conocimiento básico, después vamos teniendo ansias de saber más. Si se sienten interesados por HTML, hay que entender que se trata de un lenguaje bastante anticuado, que tiene que ser complementado con otros recursos. Por eso, se puede recurrir a aprendizajes en las áreas de CSS, Dreamweaver, JavaScript, jQuery, y muchas cosas más que también son infinitamente interesantes. Pero, sin más, comenzamos con esta breve introducción al fascinante mundo del HTML.


Significado y origen del HTML


HTML es uno de esos acrónimos que con el correr del tiempo casi han perdido su totalidad. Si le preguntamos a muchas personas qué significa en realidad HTML, pues no sabrían respondernos con exactitud. HTML es Hyper Text Markup Language (o lenguaje de marcas de hipertexto) y no debe confundirse con un lenguaje de programación. Se trata más bien de una forma semántica de organizar una estructura, ya sea páginas web o aplicaciones, a través de marcas de sentido. Las marcas de sentido son otorgadas por las etiquetas, de las cuales hablaremos en algunas líneas.


Así como tenemos que agradecerle la creación de internet, también fue Sir Tim Berners-Leeel responsable, en parte, de la creación del HTML. En la década del ’80, cuando se encontraba trabajando para el CERN, el físico ideó un lenguaje de hipertexto que facilitaría compartir documentos con sus colegas. Aunque el sistema de hipertexto ya había sido desarrollado un tiempo antes, fue Berners-Lee quien lo perfeccionó y lo presentó para ser usado en internet. Junto con Robert Cailliau, presentaron la propuesta WorldWideWeb (W3). Durante la década del ’90 se fueron presentando otras versiones. Hoy en día, el lenguaje HTML puro y duro ha sido reemplazado por el XHTML, más completo, y últimamente por elHTML5, que se corresponde con los tiempos que corren.


Hoy estaremos hablando del lenguaje transicional, el XHTML, que aún se sigue implementando en una gran mayoría de sitios web, aunque lentamente se está dejando lugar al HTML5 y sus amplias ventajas.


Las etiquetas


Decíamos anteriormente que  el HTML funciona a través de marcas de sentido llamadasetiquetas. Estas etiquetas son interpretadas por el navegador: así es como podemos ver imágenes, texto, párrafos, en definitiva, estructuras, en una página web, y no el simple código. Por eso hablamos además de marcas de sentido. Sin HTML, no tendríamos la posibilidad de disfrutar internet hoy en día. Básicamente, los navegadores como Chrome o Firefox son “traductores” de HTML que digieren todo este código y lo convierten en algo visible para nosotros.


Etiquetas, marcas de sentido… ¿qué son verdaderamente? Cada etiqueta tiene un nombre y encierra en ella –literalmente, como veremos ahora- un determinado significado. Las etiquetas se escriben con los signos mayor y menor a. Por eso cuando abrimos un documento HTML veremos esto:


<html>

<head>

<title>Bienvenidos a Bitelia</title>

</head>

<body>


Por supuesto este es un comienzo de HTML muy burdo, pero se entiende la idea. La etiqueta<html> en este caso está indicando el inicio de un documento HTML, y esta información es leída por el navegador. Por otra parte, tenemos la etiqueta <head>, la cual merece su propio apartado por la importancia, y luego <body>, que contendrá todas las cosas que nosotros como usuarios podemos ver en pantalla.


Las etiquetas funcionan por partes, que se denominan etiquetas de apertura y etiquetas de cierre. Las etiquetas de apertura le indican al navegador dónde comenzar a interpretar algo de determinada forma, y las de cierre le indican dónde terminarlo. Por eso es fundamental que se cierren todas las etiquetas que se abren en un determinado documento: aunque se vea bien, nos puede traer problemas a largo plazo. La prolijidad nunca está de más.


Al ser un lenguaje de etiquetas, el HTML es por ende muy fácil de leer. Cualquiera puede aprender HTML, no requiere ser un genio, sino nada más tener algo de organización. En la segunda parte de este curso hablaremos sobre la estructura básica de un documento HTML, algo fundamental, además de las etiquetas más importantes y básicas que necesitamos saber. Por el resto de esta entrega, nos dedicaremos a entender otros datos importantes de HTML y, finalmente, por qué tenemos que saberlo si no nos dedicamos al diseño o programación web.


Los archivos en HTML


Los documentos HTML pueden incluir archivos como imágenes y animaciones en Flash que estarán alojados en el mismo servidor, para que el usuario pueda verlos. Pero para poder ser interpretados de forma correcta, la nomenclatura de estos archivos tiene que ser exacta. Es algo que es muy valorado por el W3 Consortium –entidad encargada de hacer las normas que deben seguir los diseñadores- y que no está de más saber.


Los archivos HTML y otros archivos que usemos en nuestra página tienen que estar nombrados de forma particular. Hay una serie de reglas básicas que compartiremos con ustedes, que sirven como puntapié inicial:


    

  • Los nombres de los archivos deben estar en minúsculas, para poder ser compatibles en todos los navegadores.
    • 

  • El archivo principal será index.html, dado que será el primer archivo que el navegador buscará cuando ingrese en nuestro servidor a través de la dirección IP. No se puede tener el archivo de la home llamado de forma diferente, tiene que sí o sí llamarse index.
    • 

  • No se pueden usar caracteres no válidos para la nomenclatura del archivo, por ejemplo, la letra ñ. Solamente se pueden usar el guión (-) y el guión bajo (_).
    • 

  • No importa si es una imagen o un archivo HTML, todos los documentos tienen que seguir estas reglas para poder ser interpretados de forma correcta por el navegador.
    • 



Por ejemplo, aunque nos veamos tentados de llamar Foto 22/08.jpg a un archivo, la nomenclatura correcta sería foto_22-08.jpg.


¿Por qué aprender HTML?


Si no somos diseñadores web, y por ejemplo tenemos un empleo relacionado con la comunicación, en algún momento nos hemos topado con el HTML. Aprenderlo nunca está de más, dado que es una habilidad que puede ser apreciada en el ámbito laboral.


Para los Community Managers, es una excelente posibilidad dado que permite jugar con las herramientas que nos proporciona, por ejemplo Facebook, para crear tabs personalizadas en las fanpages. Se puede crear algo básico e interesante con un conocimiento mínimo de HTML gracias a los iframes (de los cuales hablaremos en otra entrega, pero que permiten insertar una página web dentro de otra).


Para los periodistas y bloggers, saber de HTML nos permite poder jugar más con las plataformas y darle un formato diferente a nuestros textos. Además, nos permite resolver problemas de formato que muchas veces surgen en las plataformas más populares de blogging del mundo (no tengan miedo de entrar a la vista HTML a corregir, nos da una visión más clara de qué es lo que estamos haciendo).


Comprender HTML es comprender el idioma en el que se maneja internet. Cuando sabemos sus conceptos básicos, es como entender las primeras palabras cuando estamos mirando una película en otro idioma, un idioma que estamos estudiando.


Fuente: Bitelia

]]>
			http://www.haciendoweb.cult.cu/curso-de-html-para-principantes-parte-i/feed/
		1
		
		
		Usar geolocalización con Google Maps
		http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps-2/
		http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps-2/#comments
		Fri, 06 Jul 2012 15:45:23 +0000
		Juan Pablo Pérez Manes
				
		
		
		
		
		
		

		http://www.haciendoweb.cult.cu/?p=8991
		
				google map logoEste tutorial muestra cómo usar la API de geolocalización combinada con la API de Google Mapspara mostrar nuestra posición actual sobre un mapa con HTML5.


Nivel: Medio


¿Qué es la geolocalización?


Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador.


Conociendo nuestra posición


Esta API destaca por lo fácil que es usarla. Por ejemplo:


Código :


<script>
     function localizame() {
           navigator.geolocation.getCurrentPosition(coordenadas);
     }

     function coordenadas(){
           var latitud = position.coords.latitude;
           var longitud = position.coords.longitude;
     }
</script>


Con este código tan simple tenemos almacenados en las variables <em>latitud</em> y <em>longitud</em> <strong>la latitud y longitud de nuestra posición</strong>


Controlando errores


Es posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos:


Código :


<script>
function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
}
</script>


Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition:


Código :


<script>
        function localizame() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function errores(err) {
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }
</script>


Combinando la API de geolocalización con la API de Google Maps


Veamos los pasos directamente sobre los comentarios del código:


Código :


<!DOCTYPE html>
<html>
<head>
    <title>Localizador</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/
    <style>
        body{
            font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <header>
        <h1>Localizador mediante HTML5</h1>
    </header>
    <section>
        <article>
            <div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/
        </article>
    </section>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/

    <script type="text/javascript">
        var map;
        var latitud;
        var longitud;

        $(document).ready(function() {
            localizame(); /*Cuando cargue la página, cargamos nuestra posición*/   
        });

        function localizame() {
            if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }

        function coordenadas(position) {
            latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
            longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
            cargarMapa();
        }

        function errores(err) {
            /*Controlamos los posibles errores */
            if (err.code == 0) {
              alert("Oops! Algo ha salido mal");
            }
            if (err.code == 1) {
              alert("Oops! No has aceptado compartir tu posición");
            }
            if (err.code == 2) {
              alert("Oops! No se puede obtener la posición actual");
            }
            if (err.code == 3) {
              alert("Oops! Hemos superado el tiempo de espera");
            }
        }

        function cargarMapa() {
            var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */
            var myOptions = {
                zoom: 17,
                center: latlon, /* Definimos la posicion del mapa con el punto */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };/*Configuramos una serie de opciones como el zoom del mapa y el tipo.
            map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */

            var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */

            var marcador = new google.maps.Marker({
/*Creamos un marcador*/
                position: coorMarcador, /*Lo situamos en nuestro punto */
                map: map, /* Lo vinculamos a nuestro mapa */
                title: "Dónde estoy?" 
            });
        }
    </script>
</body>
</html>


Autor: Antonio Navajas



]]>
			http://www.haciendoweb.cult.cu/usar-geolocalizacion-con-google-maps-2/feed/
		1
		
		
		Thimble: el editor web de Mozilla
		http://www.haciendoweb.cult.cu/thimble-el-editor-web-de-mozilla/
		http://www.haciendoweb.cult.cu/thimble-el-editor-web-de-mozilla/#comments
		Wed, 20 Jun 2012 16:31:19 +0000
		Darkwin
				
		
		
		
		
		

		http://www.haciendoweb.cult.cu/?p=8748
		
				Thimble es un sencillo editor online con el que escribir código HTML y CSS que ha sido desarrollado recientemente por Mozilla.


Esta utilidad se enmarca dentro del programa Webmaker con el que la Fundación Mozilla reafirma su compromiso de ofrecer todo tipo de herramientas, consejos, y eventos dirigidos a mejorar las posibilidades de desarrolladores y diseñadores web y hacer más grande la World Wide Web.




Este editor en la nube de HTML y CSS dispone de una sencilla interfaz acompañada de varias ayudas sobre las etiquetas usadas y su función, con las que mejorar su usabilidad y que se convierte en especialmente interesante para aquellos con menos experiencia en este tipo de herramientas.


Entre las características de esta utilidad para desarrolladores destacamos la división del area de trabajo en dos espacios, la columna izquierda es la zona donde iremos escribiendo el código, mientras que la de la derecha permite previsualizar los resultados de forma instantanea.


Usuarios interesados tienen a su disposición Thimble sin necesidad de registro previo ni descargas y de forma completamente gratuita desde thimble.webmaker.org.


Fuente: DesarrolloWeb

]]>
			http://www.haciendoweb.cult.cu/thimble-el-editor-web-de-mozilla/feed/
		2
		
		
		Como insertar un favicon en tu web
		http://www.haciendoweb.cult.cu/como-insertar-un-favicon-en-tu-web/
		http://www.haciendoweb.cult.cu/como-insertar-un-favicon-en-tu-web/#comments
		Tue, 17 Apr 2012 04:18:41 +0000
		Juan Pablo Pérez Manes
				
		
		
		
		
		
		
		

		http://www.haciendoweb.cult.cu/?p=7222
		
				favicon haciendo webPuede ser que para muchos de ustedes la palabra favicon sea nueva y no conozcan su significado pero de seguro habrán visto que en la barra de dirección de sus navegadores se muestra un icono al lado de la dirección del sitio web que visitas y esto no es más que un favicon. Hoy aprenderemos como insertarlos en nuestro sitios web realizados con WordPress o desarrollados a la medida y daremos un toque más profesional a nuestras creaciones.


Como insertar un favicon en nuestro sitio a la medida:


Muy sencillo solo tienes que colocar dentro de las etiquetas <head> </head> el siguiente código.


<link rel="shortcut icon" href="http://www.haciendoweb.cult.cu/wp-content/themes/fusion/favicon.ico" />


Solo debes modificar la ruta que apunta al favicon a cargar, para crear un favicon puedes crear una imagen gif o png que tenga como resolución 16 x 16 guardarlo y cambiarle la extensión a .ico te recomiendo usar algún software para generar iconos.


Plugin para gestionar tus favicon en WordPress:


Bueno WordPress tiene plugins para hacer de todo y para trabajar con los favicon hay varios pero hoy les traigo All In One Favicon que te permitirá colocar tu favicon en cualquier sección de tu web.


Recomendaciones para todas las secciones la resolución del favicon debe ser 16 x 16 menos para Portada Apple Touch Icon que debe ser 57×57.


Descargar: All in one favicon 4.0 (99)


Bueno espero que les sea de utilidad.


Autor: Juan Pablo Pérez Manes

]]>
			http://www.haciendoweb.cult.cu/como-insertar-un-favicon-en-tu-web/feed/
		4
		
		
		Buscador de Ecured en tu Web
		http://www.haciendoweb.cult.cu/buscador-de-ecured-en-tu-web/
		http://www.haciendoweb.cult.cu/buscador-de-ecured-en-tu-web/#comments
		Mon, 12 Mar 2012 22:21:29 +0000
		Juan Pablo Pérez Manes
				
		
		
		
		
		
		
		

		http://www.haciendoweb.cult.cu/?p=6176
		
				Buscador Ecured ejemploNavegando en la tarde acabo de entrar a Ecured verificando el significado de una palabra que no encontré y para mi sorpresa me topo con un artículo donde te brinda un código para insertar el buscador de Ecured en tu Sitio Web.


A continuación comparto el código HTML que es muy sencillo de implementar ya que es un formulario con una tabla donde se carga el mismo junto con logotipo de Ecured que carga directamente desde el sitio de la Enciclopedia.


<form target="_blank" id="searchform" action="http://www.ecured.cu/index.php">
<div>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="74%" height="23">
<div align="center">
<input type="hidden" value="Especial:Buscar" name="title"><img title="EcuRed: Enciclopedia Cubana" style="width: 198px; height: 196px;" src="http://www.ecured.cu/images/4/47/200px_Logotipo.png" alt="EcuRed: Enciclopedia Cubana"></div>
</td>
</tr>
<tr>
<td height="28">
<div align="center">
<input type="text" title="Buscar en EcuRed" size="30" name="search" id="search" autocomplete="off" accesskey="f"></div>
</td>
</tr>
<tr>
<td>
<div align="center"><input type="submit" value="Buscar en Ecured" name="Submit"></div>
</td>
</tr>
</tbody>
</table>
</div>
</form>


Realmente es muy buena esta iniciativa de nuestra Enciclopedia Cubana Colaborativa ya que con este servicio se logra una mejor integración de los servicios con el resto de los Sitios Web que deseen hacer uso de el enorme potencial con que cuenta este proyecto.


Antes de terminar no puedo pasar por alto que ya han arreglado el problema de los links a las instalaciones de Firefox que se encontraban rotos en la portada de Ecured.


Con información de Ecured


Atte: Juan Pablo Pérez Manes

]]>
			http://www.haciendoweb.cult.cu/buscador-de-ecured-en-tu-web/feed/
		9
		
		
		Estilo y estructura de enlaces con XHTML y CSS
		http://www.haciendoweb.cult.cu/estilo-y-estructura-de-enlaces-con-xhtml-y-css/
		http://www.haciendoweb.cult.cu/estilo-y-estructura-de-enlaces-con-xhtml-y-css/#comments
		Sun, 25 Dec 2011 04:30:08 +0000
		Juan Pablo Pérez Manes
				
		
		
		
		
		

		http://www.haciendoweb.cult.cu/?p=3643
		
				texto editorHasta el momento hemos logrado analizar el diseño y estructura de los textos en nuestro documento XHTML, ahora iremos un poco más adelante y nos adentraremos en el estudio del hipertexto y sus máximos representantes, los enlaces o links.


El uso del hipertexto representa un método enfocado a proporcionar al usuario la capacidad de moverse de un sitio a otro al seleccionar elementos de enlace. El potencial de estos elementos le da al internet la capacidad de estar entrelazado, lo que le proporciona un alto grado de relevancia e importancia a esta clase de etiquetas dentro del lenguaje de marcado.


Elementos de anclaje


A diferencia de lo que la lógica pueda dar a entender, la etiqueta “link” no es la encargada de crear los enlaces en HTML. Como ya se mencionó en otras ocasiones, la etiqueta “a” que esta relacionada con anclajes, es quien establecerá los vínculos.


El simple hecho de crear un link no representa mayor reto, basta con envolver una cadena de texto con una etiqueta “a” de apertura y su contraparte de clausura, especificando la dirección de destino dentro del atributo “href” de la etiqueta, como se muestra en el ejemplo:


<a href="http://www.lawebera.es">La Webera</a>


El enlace se logra mediante una referencia de hipertexto, la cual es establecida gracias al atributo “href”, cuya función es contener el valor que se encargará de indicar al navegador la ruta hacia donde tiene que apuntar.


Esto no significa que los anclajes únicamente puedan redireccionar a otra página o a un sitio externo, por el contrario su función original consiste en establecer enlaces con partes internas de un documento, es decir, existe la posibilidad de utilizarlos como guía o puente entre partes de un texto o elementos que componen la misma página.


Para poder lograr esto basta con agregar el signo “#” antes de un fragmento de referencia, el cual puede ser un nombre o identificador del elemento al que queremos dirigirnos, y todo esto irá dentro del atributo “href”. En la actualidad los ID son los indicados para ser utilizados como referencia al momento de indicar una dirección interna, pero vale mencionar que en el pasado el nombre definido con el atributo “name” era lo más utilizado.


En base esto, podemos definir que para establecer un enlace interno hacia un elemento de capa cuyo identificador es “capaPrincipal”, podemos escribir un código como el siguiente:


<a href="#capaPrincipal">Principal</a>
<div id="capaPrincipal">Descripción principal de la página</div>


Con estos links internos se nos permitirá recorrer el documento de una parte a otra sin necesidad de usar las barras desplazadoras, siendo utilizados principalmente para crear una clase de índice.


También podemos aplicar esta funcionalidad para dirigir a partes específicas en sitios externos, por ejemplo si el sitio que vamos a visitar tiene una sección que lleva por ID “capaPrincipalExterna”, podemos estructurar nuestro enlace de la siguiente manera:


<a href="http://www.lawebera.es/index.html#capaPrincipalExterna">La Webera</a>


Estados de los enlaces


Existen cinco estados por los que un enlace puede pasar, nos estamos refiriendo al estado inicial, visitado, con el puntero encima, enfocado y activo. Con frecuencia dichos estados son utilizados para definir estilos únicos y distintos mediante CSS, y de esa manera asegurar que el usuario pueda identificar los links que han sido utilizados.


El primer estado es aquel en el que se encuentra el link que no ha sido visitado, el segundo es identificado por la palabra “visited” y se presenta cuando el enlace fue visitado, el tercero es “hover” y es cuando el puntero del mouse se encuentra sobre el link, después viene “focus” que es cuando el documento se enfoca sobre el link como cuando utilizamos la tecla tab para recorrerlo, y finalmente tenemos “active” que es cuando el link se encuentra seleccionado.


Por defecto los navegadores sólo toman en cuenta tres estados, los enlaces no visitados son colocados en color azul, los visitados en morado y los activos en rojo. Esto no añade estética al sitio, por lo que es común rediseñar su aspecto recurriendo a CSS.


Si utilizamos la etiqueta “a” como selector dentro de nuestro código CSS, entonces definiremos un estilo único para todos los cinco estados, lo cual es una práctica común si no queremos complicarnos la vida o simplemente así lo amerita el diseño. Pero si lo que queremos es manejar de manera independiente cada estado, debemos hacer uso de pseudo-clases, las cuales se llaman poniendo el signo de dos puntos “:” entre la etiqueta “a” y alguna de los estados mencionados, los cuales llevarán por nombre las palabras que se mencionaron en el párrafo anterior.


Supongamos que queremos definir que los links visitados sean de color naranja, en vez del morado por defecto, entonces simplemente haríamos algo como esto:


a:visited { color: orange; }


Y si quisiéramos definir los cinco estados por separado, basta con incluir el siguiente código:


a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: orange; }
a:focus { color: yellow; }
a:active { color: red; }


Para el estado normal del link, es común utilizar un color que vaya acorde al resto del sitio, un color que combine pero que permita identificar rápidamente los enlaces. Es necesario respetar el subrayado del texto, ya que aunque puede lucir estético el removerla, esto puede confundir a los usuarios e incluso resultar un impedimento para aquellos que no puedan distinguir una diferencia de color.


Por su parte el estado “visited” es cada vez menos recurrido para ser diferenciado, muchas veces se opta por utilizar el mismo color de letra que en el estado normal, todo para no estropear el diseño general del sitio. Si deseas apegarte a lo clásico puedes optar por un color un poco más claro que el color normal para que así el usuario pueda identificar los links ya visitados, y al mismo tiempo no estropear el diseño.


El estado “hover” entra en acción cuando ponemos el cursor sobre el enlace, esto lo ha convertido en uno de los más populares al momento de diseñar. Esta transición puede resultar muy útil para resaltar, por lo que los diseñadores generalmente hacen el cambio más radical de color en este estado, o incluso hacen algunos cambios como la omisión de decoración en las letras, por lo que común ver que en un código CSS se haga lo siguiente:


a:hover{ text-decoration: none; }


Mientras que “hover” resulta muy popular, “focus” no lo es tanto, este estado ha sido relegado por la falta de uso de la tecla tab, por lo que muchos le consideran la menos útil de todas las pseudo clases de links, la cual incluso no es compatible con Internet Explorer.


Finalmente el estado activo es ideal para dar un estilo que deseamos se muestre al momento de dar click en un enlace, también puede ser utilizado para dar una pequeña retroalimentación o respuesta al usuario.


Accesibilidad de los enlaces


Además de los estados, una cosa que debemos tener muy en cuenta al momento de estructurar enlaces, es la accesibilidad a ellos. Es importante prestar especial atención a la accesibilidad de los enlaces para asegurarse de que todos puedan utilizar las páginas web de manera eficaz, incluso si no usan dispositivos de señalización o si utilizan navegadores no visuales.


La tabulación es uno de estos aspectos a considerar, la medida en que lo tomes dependerá del mercado al que tu sitio vaya dirigido. Muchos usuarios no utilizan dispositivos de señalización, ya sea por decisión propia o por necesidad, si utilizamos un teclado para desplazarnos a través del sitio debemos garantizar que este nos guiará de manera adecuada.


Para establecer de forma explícita el orden de tabulación de los enlaces en una página, podemos utilizar el atributo “tabindex”, el cual tendrá como valor números que indicarán el orden de los vínculos, siendo 1 el primero.


<a href="index.html" tabindex="1">Inicio</ a>


Es posible que también desees hacer esto si crees que existen algunos enlaces que son de mayor importancia o interés para el usuario que otros, por lo tanto querrás hacer el proceso más centrado en ello.


Otro aspecto a considerar con las teclas de acceso, las cuales nos permiten llegar a links simplemente con introducirlas con el teclado. Estos atajos del teclado, remueven la necesidad de tabular hasta llegar al vínculo que deseamos, y para aplicarlos basta con realizar lo siguiente:


<a href=”index.html” accesskey=”i”>Inicio</a>


El atributo “accesskey” indicará la letra o combinación de letras que debemos utilizar para accesar al link, en el caso del ejemplo bastará con escribir Ctrl o Alt (dependiendo del navegador) seguido de i para que nos lleve a la posición del link de inicio.


Muchas veces es imposible tener una clave de acceso para todos los links, por lo que sugerimos añadir esto únicamente a los más importantes, o que más demanden su uso.


Fuente: lawebera

]]>
			http://www.haciendoweb.cult.cu/estilo-y-estructura-de-enlaces-con-xhtml-y-css/feed/
		0
		
		
		Manejo de imágenes con XHTML y CSS
		http://www.haciendoweb.cult.cu/manejo-de-imagenes-con-xhtml-y-css/
		http://www.haciendoweb.cult.cu/manejo-de-imagenes-con-xhtml-y-css/#comments
		Sat, 24 Dec 2011 04:30:58 +0000
		Juan Pablo Pérez Manes
				
		
		
		

		http://www.haciendoweb.cult.cu/?p=3640
		
				texto editorEl uso de imágenes dentro de documento XHTML será, por obvias razones, la mejor forma de presentar contenido visual en nuestra página web. Ya sea una foto. un botón o algún elemento de un layout, las imágenes están presentes en casi todos los sitios que se encuentran en la Web, excluyéndose únicamente en aquellos sitios extra minimalistas que sólo optan por utilizar texto y CSS para presentar información.


Hubo un período de tiempo donde la dependencia al uso de imágenes era aún más marcado, no podías dar paso sin utilizarlas, ya que su función fue malinterpretada y los nuevos layouts las aplicaban para dar forma a la estructura del sitio. Por ello, al momento de entrar a una página se nos cargaban imágenes transparentes, gifs espaciadores, incluso letras y menús hechos únicamente con imágenes, esto representaba hacer varias peticiones al servidor para descargar muchas imágenes que solo eran utilizadas en una ocasión y alentaban el tiempo de descarga del sitio.


En la actualidad gracias a CSS podemos omitir gran parte de esas locuras y suprimir el uso excesivo de imágenes, pero esto no demerita su importancia dentro del documento. Las imágenes siguen siendo una parte muy relevante al momento de planear un sitio, por lo que debemos clasificarlas en dos grandes tipos, aquellas que utilizaremos para mostrar o ejemplificar contenido, y las que utilizamos para mejorar la presentación.


Etiqueta img de HTML


La etiqueta “img” es la encargada de crear el elemento de imagen, es decir nos permitirá incrustar una imagen dentro de nuestro código y así mostrarla en la página.


<img src=”imagenes/webera.jpg” alt=”La Webera” />


Cuenta con varios atributos que se encargan de especificar aspectos relevantes sobre la incrustación de la imagen, el principal de ellos lleva por nombre “src” y se encarga de apuntar hacia la locación actual del archivo de la imagen, sin él la etiqueta pierde sentido de uso. Entre los atributos también encontramos “alt”, que por reglas XHTML es totalmente requerido, y se encarga de especificar un texto que describa o explique la imagen.


El hecho de que el atributo “alt” sea un elemento requerido por XHTML, se debe a que representa una alternativa para aquellos usuarios que por alguna razón no pueden observar la imagen, además aumenta el SEO del sitio permitiendo que los buscadores puedan obtener contenido legible sobre las imágenes que se están mostrando. Su contenido dará una idea de lo que la imagen representa y ayudará en caso de que esta sea retirada o el servidor no ofrezca una respuesta a la petición.


Por otro lado, también tenemos atributos, que en su tiempo se encargaron de dar forma al elemento de imagen pero ya no soy soportados por los navegadores. Tal es el caso del atributo “longdesc” que se encargaba de proveer la locación o dirección hacia un archivo que contenía una larga descripción de lo que se esta mostrando con la imagen.


Mapas de imágenes


Cuando utilizamos una sola imagen para establecer varios puntos o dividirla en partes mediante coordenadas, estamos estableciendo un mapa de imagen. Hablando en términos generales, podemos encontrar que existen dos tipos de mapas, aquellos que se encuentran del lado servidor y los que son realizados desde el lado cliente, estos últimos son los que vamos a realizar mediante las etiquetas “map” y “area”.


Supongamos que tenemos una imagen con un mapa mundial, y queremos señalar a dos o más países dentro de este mapa para redireccionar a otras páginas, entonces tendríamos que hacer algo como esto:


<img src="mapamundi.gif" alt="Mapa mundial" usemap="#mapamundi" />
<map name="mapamundi" id="mapamundi">
<area shape="rect" coords="0,0,115,90" href="america.html" alt="America" />
<area shape="poly" coords="113,39,187,21,180,72,141,77,117,86" href="europa.html" alt="Europa" />
</map>


En este ejemplo estamos definiendo una imagen que se relaciona a un mapa mediante el atributo “usemap”, el cual lleva el mismo valor que el atributo “id” del elemento “map”. En este caso nos estamos refiriendo a “id” y no a “name” ya que en eso radica la diferencia entre XHTML y HTML para este caso, XHTML considera deprecado el atributo “name” para la etiqueta “map”, por ello “id” se convierte en el atributo de uso común, aunque en este ejemplo utilizamos ambos para evitar problemas de compatibilidad.


Cada elemento de área del mapa es definido mediante la etiqueta del mismo nombre, el cual cuenta con atributos de forma y coordenadas. Para la primer área utilizamos una forma rectangular por lo que el atributo “shape” recibe el valor de “rect” y las coordenadas tienen que indicar los cuatro puntos de la figura por lo que el atributo “coords” indica los cuatro valores separados por coma; por su parte la segunda área utiliza una forma poligonal por lo que son necesarios más valores para indicar la forma.


La razón por la que estos mapas no son tan utilizados, es que su uso se limita únicamente a ciertas enseñanzas como el caso de temas geográficos como el que vimos, además del hecho de que no son de un uso amigable en la interfaz, en muchas ocasiones no podemos inferir que la imagen cuenta con divisiones o links internos.


Imágenes de fondo con CSS


Debido a que las imágenes son más utilizadas como elemento de presentación, que como un auténtico contenido, es común ver que su manejo se lleve a cabo por CSS en la mayoría de las ocasiones. El elemento “img” solía ser llevado al extremo para realizar toda clase de funciones relacionadas a las imágenes, en la actualidad esto se ve disminuido por el hecho de que CSS permite manejar imágenes mediante su propiedad “background-image”, apegándonos más a los estándares que predominan.


La propiedad background-image se pueden utilizar para especificar una imagen que se utilizará como fondo en cualquier elemento de tipo capa, desde el cuerpo de la página hasta un párrafo sencillo. Al utilizarlo estaremos llenando el elemento con una imagen que ira desde la esquina superior izquierda hasta el final, cubriendo todo el espacio y con la oportunidad de agregar otros elementos sobre la imagen.


body { background-image: url(imagenes/webera.jpg); }


Podemos controlar aspectos de la imagen de fondo mediante otras propiedades CSS, como background-attachment, background-repeat y background-position.


La propiedad background-attachment determina si la imagen de fondo se desplazará con el contenido de una caja. Puede ser utilizado para especificar si la imagen se desplazará con el resto de la página o si debe ser fijado a la vista, es decir el área de visualización de la ventana del navegador, en lugar de la página.


body {
background-image: url(imagenes/webera.jpg);
background-attachment: fixed;
}


En este ejemplo estamos estableciendo la imagen “webera.jpg” como fondo de página, y en vez de seguir el patrón común de desplazamiento, la imagen lucirá exactamente igual conforme nos desplacemos, lo único que se ira recorriendo es el resto del contenido de la página.


En caso de que la imagen que estas utilizando sea muy pequeña o simplemente no deseas que se repita, creando un efecto de mosaico, entonces la propiedad a la que debes recurrir es “background-repeat”. Al establecer esta propiedad con un valor de “no-repeat” nos ahorraremos el tener que desplegar la imagen varias veces y simplemente se mostrará en una ocasión.


body {
background-image: url(imagenes/webera.jpg);
background-repeat: no-repeat;
}


Esta propiedad también puede tener los valores de “repeat-x” para repetir la imagen únicamente de manera horizontal y “repeat-y” para hacer lo mismo pero de manera vertical. El resto del área que no sea cubierto por la imagen de fondo optará por un fondo transparente, que por lo general luce de color blanco por ser el patrón elegido para el navegador, al menos que elijamos un color de fondo mediante la propiedad “background-color” lo que cual combinaría los dos valores, mostrando la imagen y en el área restante el color elegido.


Las imágenes de fondos siempre inician en la esquina superior izquierda por default, en caso de que esto no cumpla con lo que requerimos, podemos cambiar esa posición mediane la propiedad “background-position”, que es generalmente utilizada en combinación con la propiedad de repetición. Los valores que recibe esta propiedad son los clásicos para definir una posición, nos referimos a “top”, “right”, “bottom”, “left”, “center”, alguna medida o un porcentaje, o incluso la combinación de alguno de estos valores.


body {
background-image: url(imagenes/webera.jpg);
background-repeat: no-repeat;
background-position: center;
}


Finalmente tenemos los ya famosos shorthands o también conocidos como atajos, es decir la propiedad que nos va a ayudar a representar todas estás propiedades en una sola línea, en este caso lleva por nombre “background” y nos ayudará a definir los valores de background-color, background-image, background-repeat, background-attachment y background-position.


body { background: #CCCCCC url(imagenes/webera.jpg) center fixed no-repeat; }


Aunque en los ejemplos de este artículo estuvimos utilizando el elemento “body”, ten en mente que estas propiedades puedes ser aplicadas para cualquier elemento visible en la página que tenga el tipo caja o capa, un párrafo, una tabla, un div, incluso algún elemento de imagen que luzca transparente.


Fuente: lawebera

]]>
			http://www.haciendoweb.cult.cu/manejo-de-imagenes-con-xhtml-y-css/feed/
		0
		
		
		Mejor accesibilidad para los enlaces de tu sitio web
		http://www.haciendoweb.cult.cu/mejor-accesibilidad-para-los-enlaces-de-tu-sitio-web/
		http://www.haciendoweb.cult.cu/mejor-accesibilidad-para-los-enlaces-de-tu-sitio-web/#comments
		Sat, 29 Oct 2011 17:51:42 +0000
		Juan Pablo Pérez Manes
				
		
		
		
		
		

		http://www.haciendoweb.cult.cu/?p=2352
		
				accesibilidad webPonerse en el lugar del usuario; es un principio básico que deberíamos adquirir si queremos que nuestro proyecto web tenga éxito no sólo para nuestros bolsillos, sino que perdure y tenga pregnancia en la experiencia del usuario.


¿Qué marcaría una diferencia? El diseño, obviamente es lo primero que encanta; contenido bien estructurado y ordenado, pensado hacia una mejor buscabilidad y encontrabilidad; funcionalidades útiles y no sólo efectistas, también. Pero insisto, ¿cómo lo llevamos aún más allá?


La accesibilidad es la capacidad de acceso a la web y sus contenidos por todos los usuarios, independiente de la discapacidad física, intelectual o técnica que tengan.


Si escribimos nuestro XHTML con una semántica correcta y con el diseño separado en su propia hoja de estilos, ya estamos aportando a una mejor acccesibilidad permitiendo a los ciegos leer el contenido a través de un lector de pantalla, además de independizar el dispositivo sobre el cual será vista la web (teléfonos celulares, laptops, computadores de escritorio, etc.). Si tenemos el tamaño de los textos de una dimensión considerable y ojalá en una unidad relativa que sea independiente de la resolución del usuario, estaremos garantizando mejor accesibilidad a usuarios con problemas visuales. Ahora, si le damos la posibilidad al usuario de escojer el tamaño te fuente que más le acomode, mejor aún.


Estas normas mínimas de accesibilidad pueden aumentarse con muy poco esfuerzo, y ahora me gustaría presentar uno que no es muy utilizado pero no por eso menos importante: el atributo accesskey. Con él, permitimos que el usuario navegue por enlaces sólo con el uso de teclas especificadas en el desarrollo del sitio. Su implementación es bastante rápida:


<a href="index.html" accesskey="i">Inicio</a>


Así, permitimos que se pueda ir a la página de inicio no sólo haciendo click en el enlace, sino que utilizando la combinación control+i del teclado. Lamentablemente esta combinación es arbitraria por plataforma:


    

  • Chrome: Alt+Accesskey
    • 

  • Firefox: Alt+Shift+Accesskey (Win) Ctrl+Accesskey (Mac)
    • 

  • IE: Alt+Accesskey
    • 

  • Opera: Shift+Esc+Accesskey
    • 

  • Safari: Ctrl+Accesskey
    • 



Además, deberías indicarle a tus usuarios la tecla correspondiente al accesskey, y los selectores avanzados de atributo son una gran ayuda:


a:after {
  content: " [" attr(accesskey) "] ";
}


Ver ejemplo


Fuente: csslab

]]>
			http://www.haciendoweb.cult.cu/mejor-accesibilidad-para-los-enlaces-de-tu-sitio-web/feed/
		0