• 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:

Internet

Firefox

http://www.getfirefox.com/
Sustituye a Internet Explorer
Si todavía no has cambiado a Firefox, ya tardas. Elimina todos los pop-ups y tiene muchas extensiones para adecuarlo a tus gustos y necesidades, desde correctores ortográficos en infinidad de idiomas incluidos: Catalán, Gallego y Euskera. Además le puedes poner diferentes skins para tenerlo a tu gusto e infinidad de extensiones para desarrollo. Solo tienes que ir al menú: y navega por la pantalla.

Thunderbird

http://www.mozilla.org/thunderbird/
Sustituye a Microsoft Outlook o Eudora
Thunderbird es un cliente de correo electrónico gratuito, rápido y con muchas funcionalidades. Tiene un magnífico filtro anti-spam y te protege de los correos falsos.

Sunbird

http://www.mozilla.org/sunbird/
Sustituye las funciones de calendario de Microsoft Outlook
Complementa a las anteriores. Es muy fácil de utilizar y se puede descargar en muchos idiomas. Además te permite compartir tus calendarios con otras personas.

Pidgin (antes conocido como AIM)

http://developer.pidgin.im/
Alternativa a AIM, Windows Messenger, etc.
La única pega es que de momento solo está disponible en inglés, pero las ventajas que ofrece creo que compensan. En una sola aplicación puedes chatear en MSN, Yahoo, ICQ, AIM, Myspace, QQ, Mobile Me, XMPP, Simple, Livejournal, Zephyr, Gadu-Gadu, Novell Groupwise y Lotus Sametime.

Ofimática

Abiword

http://www.abisource.com/
Una alternativa a Microsoft Word
Si quieres un buen procesador de texto AbiWord es una buena alternativa para Windows y Linux, para utilizarlos en cualquier idioma hay que instalar los diccionarios correspondientes, los encontrarás en su página. Guarda y lee los formatos de Word y WordPerfect y no necesita un ordenador muy potente para funcionar.

OpenOffice

http://www.openoffice.org/
Sustituye a Microsoft Excel, Microsoft PowerPoint, Microsoft Word y Access.
Si quieres una alternativa al Office que venía en tu ordenador y que ha caducado, tu mejor opción es OpenOffice. En la web encontrarás otras descargas y un foro de ayuda para sacarle el máximo partido.

PDFCreator

http://www.pdfforge.org/products/pdfcreator/translations
Sustituye Adobe Acrobat
PDFCreator te permite imprimir un documento en PDF(del inglés Portable Document Format, Formato de Documento Portátil). Crea una impresora virtual en tu ordenador que al imprimir crea un pdf que puede ser visto en prácticamente cualquier ordenador e imprimirse en cualquier impresora.

Grafismo

GIMP

http://www.gimp.org.es/
Sustituye Adobe Photoshop
Un magnífico programa GNU de manipulación de imágenes. La mayoría de gente que piratea el Photoshop, en realidad no lo necesita, incluso muchos que lo utilizan de forma legal tampoco. Con Gimp podrás hacer prácticamente cualquier cosa de las que harías en Photoshop y es gratis.

Paint.NET

http://www.paint.net/
Sustituye a Microsoft Paint
Paint.net es un software gratuito de dibujo y edición fotográfica para Windows. Es muy fácil de usar, con un interface muy simple y multitud de herramientas. Soporta capas, efectos especiales y otras funciones que lo hacen muy útil. Puedes encontrar extensiones y tutoriales en Internet.

InkScape

http://inkscape.org/download/
Sustituye a Adobe Illusatrator, CorelDraw o Xara X
Un editor gráfico Open Source con capacidades similares a los programas comerciales, basado en el formato de fichero estándar para gráficos escalables del W3C (SVG). Te puedes suscribir en la web para tener acceso a una increíble galería de imágenes.

Blender

http://www.blender.org/
Sustituye a Maya
Blender es un programa de diseño en 3D, está disponible para diversos sistemas operativos pero en Inglés. Sólo para especialistas.

Multimedia

VLC Media Player

http://www.videolan.org/vlc/
Sustituye a Windows Media Player, Quicktime, RealPlayer, etc.
Cada película con su reproductor. ¡Pues no! Con VLC Media podrás ver prácticamente cualquier tipo de vídeo. Se actualiza fácilmente y funciona muy bien.

Songbird

http://www.songbirdnest.com/
Sustituye a Windows Media Player y a iTunes.
Una solución para la gestión de tu música similar a MusikCube con una interface más moderna y agradable. Si solo quieres reproducir música es una Buena solución, soporta muchos reproductores mp3.

Antivirus

ClamWin

http://es.clamwin.com/
Sustituye a Norton AntiVirus, Panda Antivirus o McAfee.
ClamWin es un antivirus que no necesita casi mantenimiento, solo hay que hacer actualizaciones de tanto en tanto. Por lo demás ofrece una seguridad semejante a los antivirus de pago pero no es tan exigente con el ordenador ni da ningún tipo de problemas, cosa que no se puede decir de sus semejantes comerciales. ¿Entonces para qué pagar por algo que puedes tener gratis?

Utilidades

7 zip

http://www.7-zip.org/
Es un compresor des-compresor de archivos muy eficiente y Open Source para Windows.

Notepad++

http://notepad-plus.sourceforge.net/es/site.htm
Sustituye a Notepad
Notepad++ es un sustituto del Notepad de Windows con muchas más prestaciones. Permite trabajar con múltiples documentos y formatos como html, C+ y macros.

También te pueden interesar:

Las aplicaciones y programas informáticos comerciales, es decir que son propiedad de una empresa y se venden, como por ejemplo todas las aplicaciones de Microsoft incluido el Windows, serian de Código cerrado o Propietario. En las aplicaciones Open Source no hay un propietario, sino que es el producto de la colaboración de diferentes personas que dedican parte de su tiempo a desarrollar y mejorar las aplicaciones de código abierto. Estas aplicaciones están disponibles para que la gente las utilice sin tener que pagar por ellas.

Free en inglés puede significar diferentes cosas: gratuidad y libertad. Por ello, por un lado, permite pensar en “software por el que no hay que pagar” (software gratuito) y, por otro, se adapta al significado que se pretendió originalmente (software que posee ciertas libertades). El término “Open Source” para algunos no resultó apropiado como reemplazo para el ya tradicional “free software”, pues eliminaba la idea de libertad..
Puedes aprender más sobre Opensource en Wikipedia>>

Si necesitas una aplicación para tu ordenador, pero no quieres pagar por ella, prueba a buscar en Internet el tipo de aplicación seguido de “open source”, por ejemplo; si quieres un procesador de texto y no quieres pagar por el Office de Microsoft, busca “procesador de texto open source”. Encontrarás varias opciones de calidad y, sobre todo, legales y gratuítas.

Tambien puedes visitar el artículo: aplicaciones-open-source-indispensables-gratis

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: