IguannaWeb http://www.iguannaweb.com Diseño web, redes sociales, logotipos, si no está en internet... a qué espera! Wed, 11 Jan 2012 00:37:13 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Pestañas con bordes redondeados http://www.iguannaweb.com/2012/01/11/pestanas-con-bordes-redondeados.html?utm_source=rss&utm_medium=rss&utm_campaign=pestanas-con-bordes-redondeados http://www.iguannaweb.com/2012/01/11/pestanas-con-bordes-redondeados.html#comments Wed, 11 Jan 2012 00:34:09 +0000 IguannaWeb http://www.iguannaweb.com/?p=291

(Better) Tabs with Round Out Borders

A good-looking tab control usually has one feature that I’ve always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images.

URL: http://css-tricks.com/better-tabs-with-round-out-borders/

]]> http://www.iguannaweb.com/2012/01/11/pestanas-con-bordes-redondeados.html/feed 0 <a> http://www.iguannaweb.com/2012/01/09/a.html?utm_source=rss&utm_medium=rss&utm_campaign=a http://www.iguannaweb.com/2012/01/09/a.html#comments Mon, 09 Jan 2012 17:00:23 +0000 IguannaWeb http://www.iguannaweb.com/?p=263

Enlaces HTML

<a title="¿Quiéres una web?" href="http://www.iguannaweb.com">I guanna Web!</a>

Entre las etiquetas de aperturas <a [modificadores aquí] > puedes usar diferentes modificadores que afectan a la etiqueta, en este caso el más importante es href que sirve para indicar la URL destino del enlace. Por defecto los exploradores usan azul y subrayado para el enlace no visitado, morado y sin subrayar para el visitado y rojo y sin subrayar para el enlace activo.

Modificadores

- Modificador valor(es) Definición
- href (URL) Indica la URL destino http://blablabla.com
- hreflang código de lengua Indica lenguaje del documento enlazado
- media medio Especifica qué medio/dispositivo el enlace está optimizado
- rel alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag Especifica la relación entre el documento actual y el enlazado
- target _blank, _parent, _self, _top, nombre de marco Indica dónde abrir el documento
- type Tipo de archivo Tipo de archivo enlazado

]]> http://www.iguannaweb.com/2012/01/09/a.html/feed 0 www.floravascular.com http://www.iguannaweb.com/2012/01/09/www-floravascular-com.html?utm_source=rss&utm_medium=rss&utm_campaign=www-floravascular-com http://www.iguannaweb.com/2012/01/09/www-floravascular-com.html#comments Mon, 09 Jan 2012 12:51:55 +0000 IguannaWeb http://www.iguannaweb.com/?p=280

]]> http://www.iguannaweb.com/2012/01/09/www-floravascular-com.html/feed 0 Herbario Virtual http://www.iguannaweb.com/2012/01/09/herbario-virtual.html?utm_source=rss&utm_medium=rss&utm_campaign=herbario-virtual http://www.iguannaweb.com/2012/01/09/herbario-virtual.html#comments Mon, 09 Jan 2012 12:39:30 +0000 IguannaWeb http://www.iguannaweb.com/?p=276

]]> http://www.iguannaweb.com/2012/01/09/herbario-virtual.html/feed 0 <!DOCTYPE> http://www.iguannaweb.com/2012/01/08/doctype.html?utm_source=rss&utm_medium=rss&utm_campaign=doctype http://www.iguannaweb.com/2012/01/08/doctype.html#comments Sun, 08 Jan 2012 22:50:10 +0000 IguannaWeb http://www.iguannaweb.com/?p=258

Declaración <!DOCTYPE>

En HTML 4.01 hay muchos tipos de declaraciones DOCTYPE pero en HTML 5 sólo habrá una. Y sirve básicamente para decirle al explorador qué tipo de archivo está abriendo. 

<!DOCTYPE html>
]]> http://www.iguannaweb.com/2012/01/08/doctype.html/feed 0 HTML 5 Test http://www.iguannaweb.com/2012/01/08/html-5-test.html?utm_source=rss&utm_medium=rss&utm_campaign=html-5-test http://www.iguannaweb.com/2012/01/08/html-5-test.html#comments Sun, 08 Jan 2012 15:30:38 +0000 IguannaWeb http://www.iguannaweb.com/?p=268 Comprueba cuan preparado está tu explorador para HTML 5 en http://html5test.com/

]]> http://www.iguannaweb.com/2012/01/08/html-5-test.html/feed 0 Comentario HTML http://www.iguannaweb.com/2012/01/07/comentario-html.html?utm_source=rss&utm_medium=rss&utm_campaign=comentario-html http://www.iguannaweb.com/2012/01/07/comentario-html.html#comments Sat, 07 Jan 2012 22:43:15 +0000 IguannaWeb http://www.iguannaweb.com/?p=253

Comentario HTML

<!-- Esto es un comentario. Los comentarios no se muestran en el explorador -->
]]> http://www.iguannaweb.com/2012/01/07/comentario-html.html/feed 0 HTML – Estructura base http://www.iguannaweb.com/2012/01/07/html-estructura-base.html?utm_source=rss&utm_medium=rss&utm_campaign=html-estructura-base http://www.iguannaweb.com/2012/01/07/html-estructura-base.html#comments Sat, 07 Jan 2012 00:42:11 +0000 IguannaWeb http://www.iguannaweb.com/?p=244 Muchos de vosotros queréis iniciaros en este mundo del código, de las páginas webs, y de internet. Muchos os gustaría ver matrix… pero seguramente muchos de vosotros no estéis preparados para leer todo ese código sin amargaros. De todos modos para aquellos que sigan con el gusanillo y quieran probar, voy a intentar ir recopilando una serie de posts dedicados a unos primeros pasos para hacer una web.

Muchos me preguntan muchas veces cómo logro entender todas esas letras cuando miran mi pantalla… bueno, yo siempre les digo que todo lo que ven por una pantalla digamos que es lo bonito que se muestra, que lo que yo veo es el código que genera lo que el usuario ve. Ya no vemos el color negro, sino que vemos #000000 y el blanco es #ffffff, incluso sabes que el gris es #CCCCCC… termina siendo algo que usas a diario. De todos modos, esto es como el que sabe todas las piezas de un coche, muchos nos limitamos a ver sólo un resultado, el coche, pero los mecánicos se dedican a ver todo lo necesario para que ese coche arranque con sólo girar la llave de contacto o pulsar un botón.

Por ello, igual que una web, al fin y al cabo, sólo es código, el código al fin y al cabo sólo son ceros y unos. Pues bien, entonces ¿qué necesitas en principio para crear una página web? Pues es sencillo, tan sólo necesitas un editor de texto plano: el bloc de notas (windows), no sé si el textedit (mac os x) servirá, o el html-kit (windows) o el coda (mac os x) o el gedit (linux), el que más coraje te dé y si puede colorear código, mejor que mejor.

Empezemos por lo básico

Extensión de archivo. Para que un programa entienda qué lenguaje de programación estamos usando en un archivo, tiene aparte de una estructura en el código determinada, una extensión de archivo. En el caso de una página web, lo más común será el .HTML o .HTM aunque hay otras muchas a las que no voy a entrar ahora. Y la página por defecto que un directorio carga, es llamada index.html.

Lo primero que vamos a hacer es crear un archivo de texto plano (.txt) vacío y abrirlo con el editor elegido.. Si quieres lo puedes llamar “index” pero realmente en este punto da igual.

Código básico de una página HTML

Después, igual que una carta un cuento o lo que sea que vayamos a escribir se puede definir una estructura, en código es igual, tiene una estructura báse que le indica al programa, aparte de la extensión, que está ante un archivo HTML. Por lo tanto voy a pasar a explicar paso a paso para tener una estructura base.

1. Etiquetas En HTML el lenguaje es mediante etiquetas que encierran contenido que es afectado por esas etiquetas. Las que vamos a ver aquí son HTML, HEAD, TITLE y BODY; y tal vez la más importante de todas es aquella que nos sirve para hacer comentarios, y poder tener anotaciones en nuestro código. Por supuesto esta notación es para hacer comentarios no sale en el resultado final.

Código con notas:

<html>
<!-- Esto es un comentario y como vez está abierto por una etiqueta y cerrado por otra, lo que esté en medio no aparecerá en la web, por tanto, esto, no aparecerá en el resultado. -->
<!-- Esto es la primera etiqueta que verás en casi toda web y es de apertura del documento HTML, la de cierre es igual pero con un / despues del primer < -->

<!-- Después tenemos dos partes en el documento que es la cabeza, tampoco es visible y el cuerpo, que aquí sí será visible todo aquello que escribamos como ves, tiene una etiqueta de apertura y otra de cierre para ambos casos -->
<head>
<!-- Contenido del head -->
<!-- Normalmente después en la cabecera hay distintas llamadas y códigos específicos que explicaré más adelante, pero aquí por ahora sólo voy a explicar un par-->
<title>Título del documento de prueba</title> <!-- Con esto harás que en la ventana del explorador salga un título que es aquel que escribas entre las etiquetas "title" -->
</head>

<body>
<!-- Contenido del cuerpo -->
Un texto que vas a ver aparecer
<body>

</html><!-- Etiqueta de cierre de HTML -->

Código sin notas.

<html>
<head>
     <title>Título</title>
</head>
<body>
     <!-- Un comentario -->
     <p>Un <strong>texto</strong> que <em>vas</em> a <u>ver</u> aparecer</p>
</body>
</html>

Como podéis ver, el código no es más que etiquetas que serán interpretadas y que afectarán a aquello que esté entre esas etiquetas. Casi todas las etiquetas están en inglés y casi son explicativas por si mismas. Por ejemplo, en la parte sin notas os he puesto las etiquetas strong, em y u, la primera sirve para poner en negrita (strong=fuerte), la seguna en cursiva (de empathize) y la tercera es de subrayado (underline). Y todas el texto está entre las etiquetas p, que simbolizan un párrafo (del inglés paragraphs).

Por tanto espero que con esto, tengáis una visión muy básica de este mundillo del código.

]]> http://www.iguannaweb.com/2012/01/07/html-estructura-base.html/feed 0 Top fixed bar http://www.iguannaweb.com/2012/01/04/top-fixed-bar.html?utm_source=rss&utm_medium=rss&utm_campaign=top-fixed-bar http://www.iguannaweb.com/2012/01/04/top-fixed-bar.html#comments Wed, 04 Jan 2012 20:20:37 +0000 IguannaWeb http://iguannaweb.com/?p=181 Parece que hoy día están de moda las barras superiores. En su tiempo fueron las inferiores pero ya muchos de los grandes están dejando una barra superior en ocasiones fija (fixed). Algunos de los ejemplos los puedes ver en:

Y muchas más, que seguro verás todos los días. ¿Por qué se usa ahora arriba? Aparte de que molesta menos, es una buena forma de tener siempre a mano todo lo que necesites para navegar dentro de una web. En ocasiones la he usado en varios de mis proyectos o incluso en alguna que otra página. La razón, porque era la mejor forma de organizar el contenido y tener más espacio libre, sin necesidad de un sidebar o un menú horizontal estático que se perdía en cuanto el usuario bajaba el scroll un poco.

Por ejemplo, en twotwitter.com la uso similar a twitter, en este caso para algunos enlaces tal que inicio, perfil, opciones, o logout.

 

Pero en el caso de misreflexiones.net creo que es más interesante dar un acceso a las publicaciones del mes, y por eso tengo un calendario que acompaña al hacer scroll.

 

En este caso lo que hago es, hacerla algo transparente para que no moleste mucho al lector ahí arriba. Y al pasar el ratón por encima la vuelvo opaca para mejorar la visualización.

Aunque antes de poner una barra superior pregúntate  si va a ser más útil que molesta para el usuario, antes de ponerla, para seguir un poco la moda.

De todos modos a continuación voy a darte unas pequeñas directrices para crear tu barra superior de forma fácil, que se quede fija siempre en la parte superior, y una parte opcional es, hacerla translúcida al bajar el scroll y ocapa al pasar el ratón por encima. Vamos a ello.

Aquí tenemos el archivo HTML con el código javascript top-bar-fixed.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Top bar fixed</title>
<!-- Hoja de estilos -->
<link href="css.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Llamamos librerias jquery para efecto transparente -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(function() {

/*Función scroll*/
jQuery(window).scroll(function(){
var scrollTop = jQuery(window).scrollTop();
if(scrollTop != 0){
jQuery('#top-bar-bg').stop().animate({'opacity':'0.2'},400);
}else{	
jQuery('#top-bar-bg').stop().animate({'opacity':'1'},400);
}
});

/*Función opacidad al pasar ratón por encima*/
jQuery('#top-bar-bg').hover(
function (e) {
var scrollTop = jQuery(window).scrollTop();
if(scrollTop != 0){
jQuery('#top-bar-bg').stop().animate({'opacity':'1'},400);

}
},
function (e) {
var scrollTop = jQuery(window).scrollTop();
if(scrollTop != 0){
jQuery('#top-bar-bg').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>

<div id="top-bar-bg">Texto</div>

Cuerpo de la web
</body>
</html>

Al que acompañamos la siguiente hoja de estilo css.css

body {
padding-top:50px;
}

#top-bar-bg {
/*Sombra*/
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
/*Fondo en gradiente*/	
background:-moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, center top, center bottom, from(#333333), to(#111111), color-stop(0.5, #111111), color-stop(0.5, #111111));
/*Altura y margen interno*/
height:20px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
text-align: left;
/*Fija*/
position: fixed;
top:0px;
left:0px;
right:0px;
color: #b5c0c0;
font-size: 14px;
/*Capa, sobre todo*/
z-index:999999;
}

Con esto tendrás una barra superior oscura, con sombrita y que se vuelve translúcida al bajar la página, aparte si pasas el ratón por encima se vuelve opaca.

Si quieres descargarte los archivos de este pequeño post.

Clica aquí y podrás bajarte un ejemplo funcional.

Espero que os haya gustado (;

]]> http://www.iguannaweb.com/2012/01/04/top-fixed-bar.html/feed 0 Mashi-kuna http://www.iguannaweb.com/2011/12/28/mashi-kuna.html?utm_source=rss&utm_medium=rss&utm_campaign=mashi-kuna http://www.iguannaweb.com/2011/12/28/mashi-kuna.html#comments Tue, 27 Dec 2011 23:36:46 +0000 IguannaWeb http://iguannaweb.com/b/?p=146

]]> http://www.iguannaweb.com/2011/12/28/mashi-kuna.html/feed 0