Google Fonts

Excelente artículo de Joaquín Bastarós, quien nos explica como usar google web fonts para utilizar tipografías personalizadas en tu web y mantener el aspecto original de las mismas sin que los navegadores puedan cambiarlas por las tipografías genéricas. 

Este es el enlace de la web http://www.google.com/fonts/ si quieres darle una mirada

Google Web Fonts: ampliando las tipografías web







Google Fonts
Tradicionalmente, a la hora de crear páginas web, sólo podían utilizarse unas pocas tipografías genéricas que todos los navegadores leían bien. Si usábamos una tipografía no genérica, sólo la vería bien aquel usuario que la tuviese instalada en su ordenador; en caso contrario, se mostraría otra genérica que cambiaría el aspecto que se le quería dar.

La “colección” de tipografías genéricas es limitada, y suelen repetirse las mismas: Arial, Verdana, Georgia, Tahoma, Times New Roman, etc… ahora, gracias a (como no) Google, podemos ampliar esa colección con varias fuentes más.


Son fuentes Open Source, que podemos integrar en nuestra web con la seguridad de que se va a ver en todos los ordenadores, sin necesidad de que el usuario tenga que instarla. Para ello, sólo tenemos que ir a la web de Google Web Fonts, http://www.google.com/webfonts , elegir la tipografía que queramos usar, y seguir las sencillas instrucciones de uso, que se resumen en 2 pasos muy fáciles:

1. “Llamar” a la tipografía, que está dentro de la colección de fuentes de Google, añadiendo una línea en el de nuestra web. En la web de Google Web Fonts, al pulsar en cada tipografía, muestran este código.

2. En nuestra hoja de estilos CSS, establecer el atributo “font-family” indicando la tipografía que vamos a usar. Además, podemos usar otros atributos para modificar el texto: negrita, espacio entre letras, tamaño, etc.

Desde la propia web de Google Web Fonts podemos escribir textos y cambiar sus estilos, para tener una vista previa de cómo va a quedar exactamente.

El título principal de mi web, www.joaquinbastaros.com , es un ejemplo de cómo usar Google Web Fonts en una web.

Tutorial de Google Fonts

 

 Insertar Google fonts en Blogger

 

MAQUETAR UNA PLANTILLA WEB CON CSS

Excelente tutorial para reforzar nuestras clases telemáticas de Multimedia.

Aprenderemos a maquetar una web con capas utilzando css

Papel, amigo mío, no te extingas…

Este fue un artículo que escribí hace un año, lo encontré en el baúl de los recuerdos y lo he rescatado para volverlo a publicar pero esta vez a través de este blog. Cuando redacté esta nota quise transmitir la inusual, para la época en que vivimos, convivencia del papel con la vorágine aparición de productos digitales como tablets, smartphones, ordenadores cada vez más inteligentes, intuitivos e interactivos y demás "cacharritos" de este tipo. Sí, es verdad, quienes usamos esta tecnología nos volvemos cada día más autómatas, adictos y dependientes. En ocasiones forzados por cuestiones profesionales pero que son necesarias para continuar en el circuito y competitivo mundo que nos impone esta sociedad global. Porque si no cuentas, no consumes y no estas actualizado con lo "ultimito", simplemente no existes. La tecnología para quien escribe y para muchos se ha vuelto una forma de vida, una manera de ganarse el pan. No obstante, dentro de este desarrollo, hay quienes seguimos disfrutando la lectura de un buen libro, si a la antigua, pero mucho más íntimo y placentero. Acariciamos y olemos la tapa, las hojas y lo mejor  releemos cuando se nos da la gana. Imaginamos y nos volvemos por instantes protagonistas de estas historias. El papel sobrevive con clase, hidalguía y elegancia a toda esta tecnología. Muchos lo dieron por extinguido hace más de 20 años con el boom de la internet,  pero,  por suerte,  se equivocaron con su alegre y descabellada premonición. Lo único cierto es que el papel sigue con nosotros, y quizás nos deje algún día, pero lo mejor es que cuando esto pase ud amigo lector y quien escribe no estaremos en este mundo, por ahora solo queda decir: "Larga vida al rey Papel"

Papel, amigo mío,  no te extingas…

Por: Kingsley Bonilla Herrera

Mg. en Periodismo de Agencia Universidad Rey Juan Carlos, España

Especialista en diseño, animación y multimedia

Siempre me sorprende la constante mutación que realiza la tecnología en todos los campos, y claro no está excepto de ello el diseño y la animación digital. Nuevas versiones en aplicaciones como Maya, 3dmax y el paquete de Adobe Creative Suite lo hacen más interactivo, más dinámico con nuevos paneles, con distintas vistas de diseño y de trabajo, y por supuesto también se adaptan a emergentes soportes como los móviles y las tabletas digitales.

No obstante pese a la vorágine de cambios tecnológicos aún se mantiene vigente como soporte el papel. Hace 20 años con la difusión, y digo difusión y no aparición de Internet, porque cabe recalcar que este medio existía ya en la década de los 60 en los Estados Unidos pero su uso era restringido solamente al área militar. Por aquél tiempo se debatía la probable, en pocos años, extinción del papel tras la explosión de Internet y su también comentada “democratización de los medios”.  Han transcurrido 20 años de aquel polémico debate y vemos que esto no se ha producido. El papel se resiste a desaparecer, porque creo que para el lector no hay éxtasis más delicioso que pasar con la yema de los dedos las hojas, sentir la textura, y acariciar suavemente la tapa de su libro favorito. Además los libros siempre están ahí para volverlos a releer cuantas veces queramos.

En Europa es normal ver en los metros a los viajeros leer un libro pero también, en el Perú en contadas ocasiones, he visto, en su mayoría,  jóvenes con libros digitales que para pasar a la siguiente página “virtual” solo deben pulsar un botón. Quien escribe no lo ha experimentado aún, sigo siendo el de la vieja escuela prefiero tener un buen libro y devorármelo página a página, aunque debo reconocer que leo mucho en Internet. Creo que no me atrevo a experimentar con libros virtuales porque cuando lo veo a otra gente hacerlo me parece muy frío, muy calculador, incluso práctico y soso, es como preparar un ceviche pero sin limón, y eso es inaceptable. Y claro, ante todo soy peruano y latinoamericano, y como todos los latinos siempre que hacemos algo, lo hacemos con pasión y mucho amor. En conclusión leer digitalmente en mi humilde opinión carece de pasión y fuerza.

Sin embargo llegará algún momento en que tendré que hacerlo, así como también  espero que pasen muchos años para que el papel se extinga. Estoy casi convencido que el papel estará en algún museo de la gran Lima al lado del papiro. Lo que  no sé si es que este cambio lo veré en vida, pero estoy seguro que generaciones posteriores lo podrán experimentar.

La tecnología seguirá ganando posiciones paso a paso y quedarán cosas obsoletas como soporte, y también como medio, en este caso el papel. Toca adaptarnos como dije al principio a este bombardeo y vorágine de productos informáticos, pero lo que jamás podrá cambiar es mi afición por la lectura eso es algo en que la tecnología nunca me podrá vencer.

El gran desafío, para quienes somos docentes universitarios, es cultivar y motivar el hábito por la lectura a los jóvenes peruanos que cada día leen menos, pese a que enseñó cursos de multimedia,  diseño y  animación digital casi siempre les digo a mis estimados alumnos que refuercen lo aprendido con la lectura de algún libro, no lo puedo evitar, y claro es así porque sigo siendo de la vieja escuela. Para mí la tecnología solo es un instrumento que debemos utilizar con inteligencia, pero no lo es todo.

FORMULARIOS SENCILLO CON HTML HECHO EN DREAMWEAVER

Un formulario, permite interactuar con los usuarios que visitan nuestro sitio. 

Un formulario consta de tres partes:

-El código HTML, con la etiqueta form, abarcando todo el formulario.

-Secuencias de comandos CGI (Common Gateway Interface), una aplicación que se ejecuta en el servidor y que procesa la información enviada por el usuario.

-Elementos del formulario, así como campos de texto, casillas de verificación, listas, etc...

En este tutorial vamos a hacer un formulario simple de contacto.

Lo haremos a través de la barra de Insertar > Formulario


VER TUTORIAL

POSICIONAMIENTO EN GOOGLE

Por Kingsley Bonilla

Una de las interrogantes  que casi todos nos hacemos cuando comenzamos a trabajar en el mundo fascinante del diseño web es cómo posicionar mi página en Google sin pagar un solo centavo. Pues existen básicamente dos maneras de hacerlo: la forma natural, que es la que realmente nos interesa y la otra es utilizando cualquier plataforma web 2.0, como pueden ser las redes sociales, los blogs, los servidores de video o audio (los tan ya mentados y populares PODCAST). Es decir basta que se tenga una cuenta en Face o Twitter y casi automáticamente Google nos rastrea. Así, solo toca esperar unos días para figurar en las primeras listas de este potente buscador.

Hasta aquí todo bien, pero que pasa si un cliente al que le vamos a diseñar su web quiere que su página figure en las primeras listas de Google y no quiere pagar por posicionamiento. ¿Qué hacemos? La mejor opción para que el cliente esté contento y así fidelizarlo es hacerlo de manera natural con código puro y duro (hard), empleando las famosas etiquetas meta en el código HTML.

Aquí hago un punto a parte y creo que la comparación, aunque odiosa, es necesaria. No hay mejor forma que trabajar con el código que hacerlo a mano ya sea con css, php, java script, html, etc; es preferible maquetar conociendo el código, que manipular e improvisar, aunque sirve y es necesario en este trabajo. También es verdad que crear una maqueta desde cero a los diseñadores nos toma más tiempo pero el resultado a nivel profesional es sobresaliente, así diseñamos y creamos webs más personalizadas a gusto del cliente.

No pretendo cuestionar el uso de excelentes plataformas cono Joomla, Drupal o mi favorita Wordpress, que con sus plantillas y con editores intuitivos facilita la vida a los diseñadores webs ahorrándonos  tiempo y trabajo, pero lo malo radica en que así cambiemos colores, tamaños, botoneras y contenidos al final una plantilla queda como una de las tantas que existe en la red de redes, particularmente cuando uso estas plataformas me deja una extraña sensación, es como si le faltase la cereza al pastel

Por eso el debate constante y eterno con mis alumnos, que es mejor ¿usar plantillas o maquetar a mano? Siempre les diré lo mismo, para trabajar con plantillas debes aprender a PROGRAMAR, y da lo mismo ser doctor, comunicador, arquitecto, etc. El aprender a programar y a diseñar es un complemento indispensable, hoy por hoy, para cualquier profesional que entienda y use correctamente las nuevas tecnologías en aras de su desarrollo y del bienestar común.

Pero volvamos a las etiquetas meta, que como dije antes irán en nuestro código HTML. Estas etiquetas son abiertas

Sintaxis

<meta name="autor" content="Aquí irá el nombre del que diseño la web">

<meta name="description" content="Aquí irá una descripción sencilla de la web, por ejemplo el nombre de la empresa a qué se dedica y el tiempo que tiene en el mercado">

<meta name="keywords" content="vivienda, edificios, constructora">

De las tres etiquetas metas, quizás la más importante sea la de KEYWORDS porque permite a Google buscar puntualmente, como se lee en el ejemplo de arriba, las tres palabras en el content (contenido) siempre separadas por comas y entre comillas, hacen referencia a una inmobiliaria

Así como estos meta datos (meta-tags) existen muchos otros, por ejemplo se puede especificar el idioma original de la página y la fecha en formato GMT en la que se creó la web, además ya existe un protocolo especial de metaetiquetas diseñadas para las redes sociales. Pero por ahora tomemos una pausa con una Coca Cola bien al "polo" y en nuestra próxima parada aprenderemos más sobre POSICIONAMIENTO WEB.

CSS (HOJAS DE ESTILO EN CASCADA)

En este tutorial podemos despejar las dudas sobre los códigos aplicados a cada regla de estilo para editar nuestra web. Por ejemplo: los enlances, el texto, el tamaño de las capas o cajas ( (Divs)), los elementos flotantes (float). Se los recomiendo. Haga clic en el enlace de abajo. Saludos y espero sus comentarios

http://es.html.net/tutorials/css/

TRABAJANDO CON DREAMWEAVER. 

ÁREA DE TRABAJO