• Wordpress.com
• Blogger.com
• blogspot.com

Para crear auténticos blogs, hacer un blog es gratuito pero algunos servicios pueden requerir un pago.

Si le pillas el truco, ahora solo será cuestión de aprender todo lo necesario: HTML y CSS como mínimo. Visita Cristalab.com donde hay unos cursos muy claros  que pueden servir para iniciarte.

Otra página con bastante nivel es la webera.es, aquí podrás empaparte de todo lo necesario, desde los primeros pasos hasta artículos con las últimas novedades tecnológicas.

Si ya has invertido un numero de horas considerable y ves que necesitas información técnica pura y dura, puedes visitar webestilo.com donde tienes enlaces a los manuales de Html, Php, Javascript, Flash, Asp.net…  Y busca en foros para dudas más concretas, la gente suele ser amable y responder si haces preguntas claras.

Eso si, no comiences nunca un proyecto desde cero, antes infórmate de lo que otros  han hecho y trata de utilizarlo, en Internet hay multitud de páginas donde puedes encontrar código, para que lo puedas utilizar en tus proyectos, sin tener que volver a inventar la rueda.

Normalmente las páginas web se hacen sobre una aplicación específica para eso, para hacer webs (un nombre común es CMS o sistema de gestión de contenidos), hay CMS de pago, seguramente adecuados para grandes proyectos para empresas, que no sera tu caso, claro. Lo mejor es utilizar una aplicación de código abierto como Wordpress, Joomla, Drupal y otras mil que ya están hechas, a estas aplicaciones solo les falta adecuar su “look”, cómo se ven, y llenarlas con información para publicar.

También te pueden interesar:

Según consta en la nota francesa, todas las versiones del navegador IE están afectadas por el fallo de seguridad. Si a esto añadimos los problemas de compatibilidad con los estándares de Internet (CSS,HTML) que son característicos de los productos de la citada empresa, nuestra recomendación es que utilices otro navegador, preferiblemente Firefox, y mejor si utilizas más de uno. Prueba nuevas experiencias.

Puedes encontrar información adicional sobre navegadores en otros post de este blog.

También te pueden interesar:

También te pueden interesar:

Ptotodesigners
Es el blog personal de Samuel Bran, un joven estudiante de Ingeniería de El Savador. Ofrece unos buenos tutoriales en Castellano en una web elegante y fácil de usar.

My Open Studio
Un blog escrito por Isabel Luini, de Argentina. Bien presentado con numerosas traducciones de tutoriales de web en Inglés. Muy recomendable para todos los niveles.

Teo Atienza
Otro blog con traducciones interesantes de tutoriales. Teo Atienza es un blog sobre Photoshop y Diseño Gráfico en el que encontrarás recursos para Photoshop, información y portafolios de grandes diseñadores, trabajos que te servirán como inspiración, tutoriales de Photoshop y todo lo que tenga que ver con este mundo.

PSD Creativo
Un excelente blog, dirigido por Darío Pineda, un joven diseñador mexicano, con otros colaboradores, la presentación es muy buena, unos menús claros y mucho contenido, conviene explorarlo.

Todo Photoshop
Un proyecto de Factoría de Internet (no da ninguna explicación de quienes son), bastante pobre en su presentación pero supongo que puede se eficaz para aprender, los tutoriales está explicados de forma bastante detallada con una letra grande, quizá demasiado grande, pero puede resultar útil. Recomendado para principiantes.

Creativos Online
Un blog producido por Actualidad Blog, bien presentado y bastante interesante, aunque no aporta mucho de nuevo tiene una enorme lista de recursos como pinceles, iconos o imágenes vectoriales disponibles en la red para descargar. No he revisado todos los tutoriales que firma G.Berio pero la mayoría son copias de otras web.

Luis Alarcón
Un blog muy interesante del peruano diseñador gráfco del mismo nombre, incluye sus post personales, artículos de opinión y tutoriales de temas diversos, entre ellos sobre Photoshop.

También te pueden interesar:

Lo mejor para saber cual nos conviene es probarlos –afortunadamente son gratis– y utilizar el que mejor nos funcione. Siempre puede haber una página que no podamos ver bien por una razón u otra o puede que simplemente nos “guste” más como funciona un navegador determinado.

Mozilla Firefox

Uno de los navegadores más populares es Firefox. Se trata de un navegador de código abierto, esto significa que el programa está disponible para cualquiera que quiera modificarlo o mejorarlo. Existen muchos programas –plugins– que se le pueden añadir y que permiten adaptarlo a nuestras necesidades, dependiendo de la funcionalidad que ofrecen. Para añadir uno de estos programas solo tenemos que acceder al menú Herramientas>Complementos y aparecerá la ventana de gestión de complementos. Para obtener más información sobre los complementos disponibles y para qué sirven, puedes ir a la web de Firefox.

Leer más sobre complementos para Firefox…

Safari

Una alternativa que destaca por la sencillez de su interface es Safari de Apple, aunque es un producto de una marca comercial como IE de Microsof, ofrece mayor compatibilidad con los estándares de internet y se ha popularizado mucho ya que es el navegador de los IPhones e IPods de Apple. También ofrece un elevado nivel de seguridad y rapidez en la presentación de las páginas.

Leer más sobre Safari…

Aunque con una cuota de mercado menor, Opera es un navegador que ha alcanzado cierta notoriedad, sobre todo por los pocos recursos que utiliza del ordenador, lo que hace de él una opción ideal cuando la memoria o velocidad de nuestro ordenador son algo a tener en cuenta.

Leer más sobre Opera, en Inglés…

Mi recomendación es usar Firefox por su versatilidad, sobre todo en número de extensiones y por su gestión de los Marcadores. Utilizar IE siempre es una posibilidad ya que es más fácil de lo que parece encontrarte con páginas que solo funcionan con IE. Por desgracia Microsoft no hace su navegador para otras plataformas como Linux o Apple con lo que provoca no pocos problemas.

Encontrarás los navegadores para descargar siguiendo los enlaces o haciendo click sobre el logo del navegador.

También te pueden interesar:

Para seguir este tutorial, necesitarás un editor de html, también puedes utilizar Wordpad asegurándote de utilizar el formato solo texto y cambiar la extensión del documento por .html o .css en cada caso.

Normalmente al diseñar una página decidiremos el tipo de letra que queremos utilizar, lo más habitual es utilizar fuentes “sans sherif” como Arial, Verdana, Helvética, Tahoma, etc. para nuestra página, la mayoría de navegadores mostrarán una fuente como Times si no definimos el tipo de letra. Para diseñar nuestra página con este formato deberemos incluir muchas etiquetas html del tipo font, no menos de unas 20 por página. Si multiplicamos esto por 5 o 6 páginas, veremos que rápidamente se convierte en cientos de etiquetas que tendremos que escribir y controlar. Consideremos la siguiente estructura de una página web:

<html>
<head>
<title> Una página </title>
</head>
<body>
<h1>Título 1</h1>
<p>...</p>
<h1>Título 2</h1>
<p>...</p>
<h1>Título 3</h1>
<p>...</p>
</body>
</html>

Con este código html obtendremos una página llamada “Una página” con tres títulos; 1, 2 y 3. Si queremos cambiar el tipo de letra de los títulos deberíamos escribir:

<html>
<head>
<title> Una página </title>
</head>
<body>
<h1><font face=”sans-serif” color=”#3366CC">Título 1</font></h1>
<p>...</p>
<h1><font face=”sans-serif” color=”#3366CC">Título 2</font></h1>
<p>...</p>
<h1><font face=”sans-serif” color=”#3366CC">Título 3</font></h1>
<p>...</p>
</body>
</html>

La página contiene tres títulos creados mediante la etiqueta <h1>. Para destacarlos del texto utilizamos la etiqueta html <font> que les da los atributos de fuente “sans-serif” y de color #3366CC. Como se puede ver, es necesario escribir estos atributos para cada elemento de la página. ¿Podemos evitar todo este trabajo repetitivo? La respuesta es si, observa la versión con CSS:

<html>
<head>
<title> Una página </title>
<style type=”text/css”>
h1 {
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h1>Título 1</h1>
<p>...</p>
<h1>Título 2</h1>
<p>...</p>
<h1>Título 3</h1>
<p>...</p>
</body>
</html>

El truco está en la etiqueta <style> que se encuentra en la cabecera <head>, donde definimos el tipo de letra “sans-serif” y el color #3366CC que deseamos aplicar a las etiquetas html <h1> de nuestra página. No te preocupes por la sintaxis, lo veremos en más detalle en un momento y verás que es muy fácil. Veamos también cómo ha quedado la parte html, de donde han desaparecido todas las etiquetas <font> que habíamos colocado anteriormente. Cuando modifiquemos una propiedad de la definición de estilo de la cabecera, los títulos <h1> de la página cambiarán consecuentemente, lo mismo ocurrirá para cualquier nuevo título <h1> que añadamos a la página. Ahora que ya tenemos una idea de qué es y cómo funciona CSS vamos a ver diferentes formas de incluir estilos CSS en nuestras páginas.

*CSS es el acrónimo de Cascading Style Sheet o Hoja de Estilos en Cascada. Lee más sobre CSS en Wikipedia…

La forma más sencilla de insertar los estilos en páginas web es la que hemos visto en el ejemplo anterior, incluir una etiqueta <style> en la cabecera <head> de nuestra página html de esta forma:

<style type=”text/css”>los estilos CSS se definen aquí</style>

El método funciona muy bien para una página, pero si nuestra web tiene más de una, tendremos que repetir el proceso para cada página, con lo que nos encontraremos con un problema similar al que teníamos al definir el estilo para cada etiqueta html, pero ahora con las páginas.

Normalmente este documento se denomina hoja de estilos y se le suele dar el nombre de styles.css. En cuanto a la ubicación del archivo puede encontrarse al mismo nivel que nuestras páginas html o en un directorio específico en el que tendremos también otros elementos que se puedan necesitar para dar estilo, como logos, iconos o fondos para la página.

Una alternativa para no tener que revisar cada página es colocar las definiciones de estilo en un documento de texto y hacer que el navegador lo lea cada vez que cargue una página, de esta forma cualquier modificación que hagamos en la hoja de estilos, se aplicará automáticamente a los elementos afectados de todas las páginas.
Para cargar una hoja de estilos en una página html, incluiremos una etiqueta <link> en la cabecera <head> de nuestro documento html:

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

Donde el link especifica el tipo de documento que el navegador leerá; una hoja de estilos de tipo texto css y href indica su ubicación, si se encuentra en una carpeta tendremos algo parecido a

href="/nombre_de_la_carpeta/style.css".

Volviendo al ejemplo que hemos empleado antes, tendremos el siguiente código en nuestra página:

<html>
<head>
<title> Una página </title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<h1>Título 1</h1>
<p>...</p>
<h1>Título 2</h1>
<p>...</p>
<h1>Título 3</h1>
<p>...</p>
</body>
</html>

Ahora es el documento styles.css el que contendrá todos los elementos de estilo de las páginas:

h1 {
font-family: sans-serif;
color: #3366CC;
{

Igual que ocurre con cualquier otro elemento de nuestra web, podemos reutilizar la hoja de estilos en las páginas que queramos introduciendo el correspondiente <link>, lo que nos asegurará un diseño uniforme y coherente. También podremos crear y utilizar más hojas de estilos si lo necesitamos.

En cada definición CSS participan al menos dos componentes: el selector, que define las etiquetas html a las que aplicaremos el estilo definido y los atributos, que especifican el estilo a aplicar. En el ejemplo que venimos utilizando h1 es el selector, los atributos son font-family y color. La sintaxis que hemos observado en los ejemplos significa lo siguiente: selector {atributo:valor;}  Cada selector puede tener uno o más atributos, cada atributo ha de tener su correspondiente valor. Entre valor y atributo se escriben dos puntos “:” al final de cada valor se escribe un punto y coma “;” para pasar a una nueva definición, todos los atributos y valores están encerrados entre dos corchetes “{}”. Como la hoja de estilos puede ir complicándose, de hecho suelen serlo,  se utiliza un formato de escritura que ayuda a aislar cada elemento de la hoja para mejorar su comprensión:

selector {
atributo:valor;
atributo:valor;
...
}

En el resto de este artículo utilizaremos un formato u otro indistintamente, la funcionalidad no se verá alterada. También podemos aplicar uno o varios estilos a más de una etiqueta html a la vez agrupándolas separadas por comas, por ejemplo para definir parámetros básicos para toda la web como el tipo de letra:

body,p,td,th,div,blockquote,dl,ul,ol {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
}

Este selector con varias etiquetas html aplica las definiciones de estilo: font, size y color a las etiquetas –html body,p,td,th,div,blockquote,dl,ul,ol– a la vez. Normalmente su aplicación a la etiqueta <body> que incluye a todas las demás debería de bastar, pero no todos los navegadores, sobre todo los más antiguos, aplican los estilos a tablas u otros elementos, así que mejor definir todas las etiquetas a las que queremos dar un estilo.

Selectores de clases “class”

Como hemos visto, podemos definir en una hoja de estilos, cómo representar las diferentes etiquetas html en una página o web, pero qué ocurre cuando queremos aplicar estilos diferentes a una misma etiqueta html en distintas partes de un documento. Para poder diferenciar un selector de otro en una misma página le daremos un atributo personal de tipo “class”. Por ejemplo el siguiente estilo escribe todos los párrafos de color azul:

p {
color:#0000FF;
}

Imaginemos que tenemos una columna de color azul sobre la que también aparecerán párrafos, en este caso el texto no sería visible ya que tendría el mismo color. Para diferenciar los párrafos del texto principal de los de la columna, aplicaremos a estos una “clase” que los identifique, por ejemplo .sidebar y aplicaremos los estilos CSS a esta clase:

p { color: #0000FF; }
.sidebar { color: #FFFFFF; }

la segunda regla indica que el estilo .sidebar, se aplicará a cualquier etiqueta html que tenga esa clase, el atributo de clase se aplica en las etiquetas de la página html. Para crear un párrafo de texto de la clase .sidebar, se añade el atributo de esta forma:

<p class=”sidebar”>Este texto se escribirá siguiendo las indicaciones de la clase .sidebar de la hoja de estilos CSS.</p>

<p>Este texto se escribirá siguiendo las indicaciones de estilo de la etiqueta de párrafo </p>

Un selector de tipo “class” puede añadirse a cualquier etiqueta html, podemos definir tantas clases como queramos. Las clases se definen mediante un punto al principio del nombre de la clase.

Selectores Pseudo-Class

No todas la etiquetas html tienen las mismas propiedades, por ejemplo la etiqueta <a> se utiliza para designar los enlaces o links y es más versátil que otras etiquetas html. Cuando la utilizamos en nuestra página podemos darle atributos link, vlink, y alink (no visitado, visitado y clic respectivamente) para identificar los diferentes estados del enlace utilizando por ejemplo texto de diferentes colores. Con CSS podemos definir el estilo de <a> en cada uno de los posibles estados, mira este ejemplo:

a:link { color: #0000FF; } /*no visitado*
a:visited { color: #FF00FF; } /*visitado*/
a:hover { color: #00CCFF; } /*el cursor está encima*/
a:active { color: #FF0000; } /*seleccionado*/

Dos puntos “:” separan al selector de la pseudoclase. En un documento CSS la etiqueta <a> puede tener 4 pseudo-clases; link afecta a todos los enlaces, visited a los que ya se ha visitado, hover es especial y actúa cuando el ratón pasa por encima del enlace tanto si se ha visitado o no, active funciona cuando se hace clic en el enlace. Para que la pseudo-clase actúe correctamente ha de respetarse la jerarquía que ves aquí en la hoja de estilos, hover siempre después de link y visited, active al final. Otras pseudo-clases son :lang que permite definir el idioma de un elemento concreto y :first-child que da estilo al primer elemento descendiente de otro. El texto entre /*…*/ se denomina comentario y sirve para anotar lo que queramos en el documento CSS, el texto entre estos separadores es ignorado por el navegador.

Hasta ahora hemos utilizado atributos como color o font-family

Lee las especificaciones de CSS2 en castellano…

También te pueden interesar:

Xarxa Telemàtica de Catalunya XTC

Competències Bàsiques en TIC per a la formació de persones grans.

1. Informàtica preliminar
2. Informàtica inicial
3. Informàtica bàsica
4. Iniciació a la Ofimàtica

En esta web puedes encontrar un curso muy completo para adquirir los conocimientos básicos en informática y está orientado especialmente a la formación de adultos. Dividido en cuatro módulos –que se explican solos, puedes acceder mediante los enlaces de la derecha– Para seguir el curso se utiliza Open Office , que es un paquete similar al Office de Ms pero con licencia Open Source, y por tanto gratuito, si todavía no lo tienes, te recomiendo que lo instales en tu ordenador.

Xarxa de Telecentres de Catalunya XTC

El telecentre és un espai orientat al desenvolupament de processos integrals d’alfabetització digital i d’accés a les noves tecnologies, dotat d’equipament informàtic i ajuda personalitzada.

En Catalunya hay una red de tele-centros promovida por la Generalitat. Muchos ayuntamientos ofrecen este servicio, puedes encontrar el de tu ayuntamiento en su página web, www.xarxa365.net. Entre otros recursos disponibles, puedes acceder a un curso completo de iniciación a la Informática. La diferencia con el anterior es que puedes descargarlo en tu ordenador. El curso consta de una parte de teoría en formato .pdf y una aplicación multimedia para practicar. Para acceder al curso haz clic aquí. Te recomiendo que explores otros enlaces de la web, algunos están en formato bilingue en Castellano y Catalán.

Òmnia

Òmnia es un tele-centro del Baix Camp, ofrece unos recursos fantásticos y muy variados para aprender en su web, especialmente para personas con más dificultades son los juegos: con el teclado, el ratón, el ordenador, windows…

También te pueden interesar: