CSS Vertical align

enero 14, 2010 Deja un comentario

En la etiqueta HTML td tiene un atributo llamado “valign”, que puede alinear el contenido verticalmente. CSS no tienen tal atributo, por lo que tiene que hacer un poco de magia para lograr tal resultado.  Utilizando el método descrito a continuación usted será capaz de alinear un elemento verticalmente en cualquier contenedor de altura.

Ejemplo:

<html>
<head>
    <title>DEMO: CSS vertical align</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
		.v-outer {
			display: table;
			#position: relative;
			overflow: hidden;
			height: 100px;
			background: black;
			color: white;
			width: 100%;
		}

			.v-middle {
				display: table-cell;
				#position: absolute;
				#top: 50%;
				vertical-align: middle;
			}

				.v-inner {
					#position: relative;
					#top: -50%;
				}
	</style>
</head>

<body>

	<div class="border v-outer">
	<div class="v-middle">
	<div class="v-inner">
	...content...
	</div>
	</div>
	</div>

</body>
</html>
Categorías:1

Los 50 mejores tutoriales de Photoshop

enero 12, 2010 Deja un comentario

Interesante el de crear un estilo web 2.0 limpio.

http://sixrevisions.com/photoshop/top-50-adobe-photoshop-tutorials-of-2009/

Ejemplo de un estilo limpio web 2.0

Skunky Form

enero 12, 2010 Deja un comentario

Despliega valida y procesa formularios HTML

http://www.phpclasses.org/browse/package/5869.html

Añadiendo información semántica sencilla para los robots de búsqueda

febrero 24, 2009 Deja un comentario

Uno de los problemas que tienen los metadatos es que no siempre pueden ayudar a los motores de búsqueda a identificar de forma precisa la información que contienen. ¿De qué me sirve indicar en etiquetas meta una información, si esta puede resultar ambigua? ¿Cómo puedo añadir información semántica de forma concisa y correcta en un documento web para que los robots de búsqueda entiendan su significado?

Para potenciar el aspecto semántico de una página web, contamos con:

  • Etiquetas de HTML con una función estructural (títulos, párrafos, listas,…).
  • Metadatos, ya sea en forma de etiquetas meta, o en ficheros externos (generalmente RDF). Y son bastante útiles, ya que puede presentar información que no siempre aparece en el contenido de una página web (como el autor o autora) y también puede abreviar el contenido de una página usando palabras clave o un pequeño resumen.

Facilitando mucho el trabajo a los motores de búsqueda.Pero para que la información sea realmente útil y accesible a los motores de búsqueda, para que simplifique su trabajo, debe tratarse de una información precisa, concreta, que no admita ambiguedades. En la web que todos conocemos, esto puede ocurrir de tres maneras:

  • Mediante una URI. En un ejemplo futurista, podríamos identificar la vivienda de una persona mediante una URI que formase parte de un estándar interplanetario, con la estructura “http://&#8221;, “planeta”, “continente”, “país” … y así hasta llegar al piso y la letra.
  • Usando estándares reconocidos internacionalmente, como por ejemplo loscódigos de paises que se rigen según la normativa ISO-3166-1.
  • Utilizando vocabularios controlados, taxonomías, tesauros,… que sirven para listar, organizar y relacionar términos, como podemos ver gráficamente explicado en el mapa conceptual de estructuras.

Concretando, para alcanzar todo el potencial de la web semántica, a la hora de usar metadatos (como ocurre al menos en parte en los ficheros RDF), la situación ideal sería:

  • Usar de forma correcta etiquetas formalmente definidas en un profile (perfil) ó esquema. Como por ejemplo los definidos por DublinCoretitle, creator, description, subject, languague,…
  • Que el valor de esta etiqueta sea fácilmente reconocido e identificado por los motores de búsqueda (mediante una URI, estándar o algún tipo de vocabulario controlado como la hemos dicho antes).

Un ejemplo de lo que difícilmente entendería un robot de búsqueda.Podría inventarme un metadato para intentar indicar a los buscadores que mi casa está en la localidad imaginaria «Sidaria» de la siguiente forma:

<head> [...] <meta name="localidad" content="Sidaria" /> [...] </head>

Pero un robot de búsqueda tendría que adivinar o deducir (con una incierta posibilidad de acierto) qué significa “localidad” y qué es “Sidaria”, porque no los puede asociar a ningún recurso conocido.

Ejemplo de lo que entendería hasta el robot de búsqueda “menos listo”.Entonces, ¿cómo conseguiríamos que hasta el robot de búsqueda “más torpe” de su clase del imaginario primer curso de “Búscadores semánticos” entendiése lo que queremos decirle? Mostramos un ejemplo:

<head> [...] <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" /> <meta name="DC.coverage" content="http://www.municipio-sidaria.net" /> [...] </head>

Dentro de la etiqueta head, de nuestra página XHTML, hemos colocado un vínculo a un esquema concretamente el de DublinCore, y que de forma resumida denominamos DC.

En la siguiente línea, usamos una etiqueta meta, con la intención de añadir metainformación sobre nuestra página. Esta etiqueta utiliza un nombre comprensible para los robots de búsqueda:DC.coverage. Con el prefijo DCindicamos que utilizamos un elemento de DublinCore (y además previamente le hemos dicho donde está). Esta etiqueta de DublinCorees concretamente coverage, que como podemos ver en la traducción de los elementos de DublinCore (realizada por Javi Masa), sirve para indicar la cobertura espacial o geográfica de un recurso.

Además, el contenido de esta etiqueta, es una ficticia dirección de internethttp://www.municipio-sidaria.net, y el robot de búsqueda tendría acceso a ella (si existiese...) por lo que fácilmente puede conocer todos y cada uno de los elementos de la etiqueta meta y catalogar mejor la información que le indicamos.

El robot semántico dice: Aunque suspendí en Buscadores Semánticos entiendo perfectamente tus metadatos si me das TODA la información necesaria.

Y esto es lo que nos dice nuestro pequeño aprendiz de buscador semántico, el Robot "Ruperto Lee" en la viñeta anterior. Si indicamos en nuestros metadatos insertados en documentos XHTMLHTML ó dentro de ficheros RDF toda la información necesaria, a los Buscadores Semánticos les será mucho más sencillo procesar la información, y esta será de muy buena calidad. Y por supuesto, ayudará a que la web semántica que un día imaginó Tim Berners-Lee, se vaya convirtiendo cada vez más en una realidad.

Aún así, el punto de vista que se expone aquí resulta demasiado rígido, complejo y no siempre intuitivo para las personas. Es cierto que se tiene que facilitar el trabajo a los robots de búsqueda, pero también es cierto que van mejorando y evolucionando día a día: Lo que hoy es complejo, mañana puede ser más intuitivo.

Además, como cuenta Emmanuelle en «Comer, amar, vivir... Las etiquetas de la gente», existen sitios webs en los que las personas, usan sus propias etiquetas para describir la información (fotografías, vínculos favoritos,...). Y funcionan, porque utilizan el mismo lenguaje que otras personas: se entienden, al utilizar una comunicación más natural.

Parece claro que el camino hacia la web semántica del futuo es un camino de doble dirección:
  • Uno, en el que los humanos facilitan el trabajo de las máquinas, como describimos aquí.
  • Otro, en el que las máquinas se tienen que adaptar al idioma natural de las personas, como cuenta Emmanuelle.
Y ambos son igualmente importantes. Descripción textual de la imagen: Aparece un robot, de color azul, con el logotipo de la web semántica en su pecho. Aunque no se indique, su nombre es Ruperto Lee. Ha suspendido la asignatura de "Buscadores Semánticos", como podemos ver en la calabaza que aparece a sus pies. Pero nos cuenta: «Aunque suspendí en "Buscadores Semánticos" entiendo perfectamente tus metadatos si me das TODA la información necesaria»

Poner una página web de fondo de escritorio

febrero 4, 2009 Deja un comentario

Hola a todos, les publico este tip de windows, consiste en poner una página web de fondo con un iframe, puedes dar clic en sus enlaces, introducir texto en los inputs. Es tan facil como en ves de poner una imagen ponemos el archivo html.

De esta forma:

Para hacerlo, lo primero que tenemos que hacer es crear un archivo .html con el siguiente contenido:

Código :

<html>
<body>
<iframe src=”http://www.algunaweb.com&#8221; height=”100%” width=”100%”></iframe>
</body>
</html>

Donde:

  • http://www.algunaweb.com será reemplazada por la web que queramos visualizar.
  • width indica el ancho al que será ajustada la web, puede ser un valor en porcentaje o en pixeles.
  • height indica el alto al que será ajustada la web, puede ser un valor en porcentaje o en pixeles.

 

Después de esto hacemos click derecho en el escritorio y nos vamos a properties > desktop > browse y seleccionamos el archivo html que creamos.

Ya que cualquier archivo html (que pueda leerse con Internet Explorer) puede colocarse como fondo de escritorio, tal vez quieras colocar un Lector de Feeds como fondo o un menú, aplicación o fondo dinámico en Flash. ¡Puedes experimentar!

Autor: Carlos Yanez

Desde webtaller..

 

Saludos Cordiales

Categorías:Six Revision-Gajupo

Nuevo servicio de Google ¨Google Sites¨

enero 27, 2009 Deja un comentario

Hola, hoy les comento de este nuevo servicio que ofrece el gran san Google, llamado “Google Sites”, este servicio nos permite crear sitios web, para la familia, para empresa, algun club etc.

De esta forma:

  • Creación de una página con un solo clic
  • No se requiere HTML
  • Apariencia personalizable
  • Configuración para acceder y compartir información
  • ¡Y además es gratis

Apurenle que se acaban jajaa.

Le puedes cambiar la apariencia, los estilos de las funetes, colores, layout etc. Compartir con tu amigos y creo que trae una opción de habilitar el Google Analytics para saber las estadisticas de nuestro sitio. Ha usa el protocolo seguro https.

Yo ya cree una prueba para ver si me gustaba y pues si me gusto.

Este es mi sitio:

https://sites.google.com/site/gajupo/

Y esta es la url para que ustedes creen en suyo, claro con una cuenta de Gmail.

http://sites.google.com

Saludos

Categorías:Sitio de Hoy

Atajos de Windows 7

enero 27, 2009 Deja un comentario

 

Windows 7

Windows 7

 

 

Windows 7 cómo todos los sistemas operativos también tiene atajos de teclado (combinaciones de teclas o Shortcuts) que te ayudarán a dejar de usar el Mouse y muchas tareas las podrás hacer más rápido, además de los clásicos atajos tenemos estos nuevos que en Lifehacker nos enseñan a través de un video, la mayoría de estos atajos usan latecla Win que es la tecla del logo de Windows omejor conocida cómo ventanida.

 

Win + Inicio Oculta todas las ventanas excepto la que se está usando
Win + Barra espaciadora Hace transparentes a todas las ventanas para ver el escritorio
Win + Flecha para arriba Maximiza la ventana activa
Win + Flecha para abajo Minimiza la activa (En caso de que esté maximizada deberás presionar esta combinación 2 veces)
Win + Flecha para la derecha/izquierda Cambia de posición a la ventana a los costados de la pantala
Win + T Selecciona y navega entre los archivos que están abiertos en la barra de tareas
Win + P Cambia las propiedades y ajustes de pantalla para proyector
Win + (+/-) Para hacer zoom
Shift + Click en un archivo de la barra de tareas Abre una ventana nueva de la misma aplicación

Fuente: Carlos Leopoldo

 

Saludos

Categorías:Windows