Edgar J. Gómez | January 23, 2012
No comments

Optimizar tu web

Quiero tratar un tema que a veces dejamos de lado pensando que tiene poca importancia y al final no lo pensamos bien o ni siquiera lo pensamos. Se trata de la importancia de optimizar bien nuestra página web para que los motores de búsqueda puedan indexarla correctamente. Y más concretamente, Google, que es el motor de internet hoy en día por llamarlo de alguna manera.

El caso es, que hay una serie de aspectos que debemos tener en cuenta y pensárnoslos un par de veces antes de añadirlos a la web. Así que, ¿cómo optimizar una página web?

Promociona y publicita tu página web

Posiblemente es la parte más importante. Tienes que publicitarte tanto en internet como fuera de el. Utiliza las redes sociales. Ni uno ni dos, todas las que puedas, pierde tiempo en entablar relaciones con gente que te siga para que tus actualizaciones de estado lleguen a mucha gente.

Otro factor importante puede ser el crear un blog o microsite de noticias relacionado directamente con tu página web desde donde poner contenido variado pero siempre dentro del campo que utilices. Esto ayuda a atraer gente que luego puede acabar en tu web.

Metatags en el <head></head>

Es necesario que hayan tres elementos importantes bien identificados en este apartado y que en todas los archivos html sean los mismos dentro de la medida de lo posible.

Title

El primero es la etiqueta <title></title>, la cual debe contener el nombre de la página, de la empresa, de la organización o de la persona. Pero nada más, solo el título, la palabra o par de palabras mas identificativas.

Metatag description

Importante un texto claro, identificativo, con palabras descriptivas de lo que aporta nuestra web y a ser posible reducido a unos 150 carácteres.

Metatag keywords

Puede que este no sea tan importante como los dos anteriores, y muchos dicen que incluso puede llegar al desuso. Pero no cuesta nada ponerlo. Se trata de poner algunos términos que describan o indiquen el contenido principal de tu web. Cada término separado de otro por comas y que no sea muy extenso. De unos 5-7 términos.

Aspecto y contenido

Muchas veces, intentamos imaginar un diseño fantástico, lleno de color, de formas… pero muchas veces son precisamente los diseños tan cargantes los que hacen que al final la página sea incomoda para el usuario.

Es importante elegir bien los colores que utilizaremos. Si son muy llamativos a la larga será molesto para el usuario que tenga que leer nuestros artículos o nuestros productos.

El diseño tiene que ser minimalista y espacioso, que quede cada sección bien definida, cada bloque.

Los textos tienen que ser claros, sin redundancias y a poder ser no muy extensos , hablando solo de lo que ofreces.

Navegación

La navegación es otro aspecto a tener muy en cuenta. Tiene que ser limpia y clara. Que no hayan muchos botones o enlaces y que ningun contenido este a más de tres o cuatro clicks porque posiblemente nunca lleguen a el.

Sobre todo, la página principal tiene que estar muy bien definida ya que muchos usuarios entrarán en ella directamente y deben tener un enlace a cada producto bien enfocado.

También puede ayudar mucho la creación de un sitemap, el remarcar en que página está el usuario en cada momento y crear una página de error por si se hace una petición erronea y la página no existe que ofrezca al usuario varias alternativas a lo que buscaba.

 

Etiquetas

Es importante que todas las etiquetas del HTML que pueden tener un parámetro descriptivo o informativo, lo tengan.

H1, H2, H3

Estas etiquetas son importantísimas ya que distribuyen la información de forma jerarquizada. El H1 solo hay que usarlo una vez por página y su contenido tiene que ser similar al del título de la página. De la misma manera no hay que abusar de los H2 y H3 usándolos para pequeños títulos o textos de subcontenido del apartado principal. Cuando un motor de búsqueda actúa estas etiquetas están muy presentes a la hora de aportar datos.

Enlaces

Los enlaces tienen opciones como title o anchor text. Hay que intentar que sean muy descriptivos para saber a donde apuntamos.

Imágenes

Muy importantes dotarlas de la opción “alt” con un texto descriptivo o un nombre.

 

 

Con estos consejos vuestro sitio cumplira muchas y de las más importantes características para estar bien posicionado e indexado por los motores de búsqueda. Pero lo que cuenta de verdad es un trabajo continuo, publicitarse, y ganar clientes que visiten tu sitio. La clave es el trabajo continuo.

Category: Uncategorized | Tags:
Edgar J. Gómez | January 17, 2012
No comments

Google web fonts

Google web fonts es otro servicio más de Google. En este caso, otro gran recurso para desarrolladores web. Nos permite con una sola linea de código llamar a una o varias fuentes de entre las que hay actualmente 404.

Es una gran ayuda y una manera de ahorrar tiempo ya que antes si querías que la letra de tu página web fuera distinta, y no las típicas tipografías de verdama, tahoma o sans-serif, tenías que instalar la fuente en tu servidor.

Pues bien, como decía, ahora tienes 404 tipografías entre las que elegir y con una sola linea de código hacer la llamada para más tarde aplicar el tipo de letra desde el CSS.

Desde el siguiente enlace podemos ir mirando que tipografías nos gustan más:

http://www.google.com/webfonts#ChoosePlace:select

Es importante que nos fijemos en el nombre de la fuente porque es necesario para añadirlo en la linea de código que utilizaremos. La linea que utilizaremos será:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nombre_fuente">

Donde pone “Nombre_fuente” es donde tenemos que reemplazar con el nombre de la tipografía deseada. En esa misma linea de código que, por si estáis perdidos, se tiene que insertar entre las etiquetas <head></head>, se pueden introducir varios nombres de fuentes con lo que estaremos llamando con solo esa linea a todas las fuentes que queramos para poder utilizarlas indistintamente si es lo que deseamos.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Esteban|Lusitana|Ruluko">

Eso es todo, de nuevo una gran ayuda para desarrolladores web que nos ahorra tiempo y trabajo y sobretodo abre posibilidades infinitas.

Category: Google | Tags: ,
Edgar J. Gómez | October 26, 2011
No comments

Tema 6: Marcos

Para entender este tema hay que pensar en los marcos como si fueran ventanas. Como si estuvieras en un habitación mirando a través de una ventana, que ves parte del interior de la habitación y el exterior.

Pues bien, los marcos serán ventanas que añadamos a nuestra página HTML y en las cuales podremos mostrar contenidos externos o internos siempre manteniendo una parte estática.

Vamos a verlo con ejemplos de como crearíamos una página sencilla con marcos. Utilizaremos un código que solo deberéis copiar de los ejemplos. Se explicara lo que es  en el Libro CSS.

El código para crear un marco es:

<iframe src=”"></iframe>

Dentro del src=”" apuntaremos a una dirección o archivo HTML para que se abra dentro de ese marco. El código extra que utilizaremos será para darle tamaño a ese marco. Juntándolo todo quedaría el siguiente ejemplo:

El resultado que obtendremos al ejecutar el archivo será el documento HTML con un cuadro de 500 píxeles x 500 píxeles (código que ya explicaremos en el Libro CSS) y cuyo contenido es la página Wikied tal y como hemos señalado en el src=”".

Atributos de los marcos

Vamos ha hablar de algunos atributos de los marcos aunque  se especificarán más en el Libro CSS, pero es interesante conocerlos ya para los ejemplos que realizaremos.

Los atributos o propiedades son:

  • Width: anchura del marco
  • Height: altura del marco
  • Scrolling: si tiene barras de desplazamiento o no
  • Name: darle un nombre para referenciarlo
  • Frameborder: tamaño del borde que rodea al marco
  • src: dirección que se mostrará dentro del marco

Para seguir entendiendo la idea podemos ver y crear el siguiente ejemplo. Una página básica cuya parte superior tiene unos enlaces a distintas páginas. Debajo de esos enlaces habrá un marco del tamaño que queramos donde se irán mostrando las páginas o archivos declarados en los enlaces. Utilizaremos una de las propiedades de los enlaces que dijimos que veríamos en el Tema 3: Enlaces. Veámoslo:

Si ejecutamos veremos el resultado y entenderemos que al poner una etiqueta name=”" en el marco y referenciarlo en un enlace con target=”" el enlace se abre en el marco con ese nombre. Igual que abrimos enlaces a otras páginas podemos abrir archivos HTML que esten en la misma carpeta en la que estamos trabajando o en otras como ya explicamos en el Tema 3: Enlaces.

Si seguimos jugando con el código anterior podemos obtener otros resultados. Por ejemplo cambiando el tamaño del marco, añadiendo más enlaces poniendo que no tenga barras de desplazamiento, etc.

En una página HTML puede poner todos los marcos que quieras. Hay páginas formadas solo con marcos dispuestos de distintas maneras y tamaños usando uno fijo como menú otro como titulo o cabecera y el central en el cual se cargan los contenidos referenciados desde los enlaces.

Un ejemplo de página hecha con marcos es: http://lauragallego.com/ (es posible que con el tiempo cambien la web y ya no este hecha con marcos)

 

Ejercicio 6.1

Crea un documento HTML que contenga dos lineas de enlaces y entre cada una de ellas un marco (2 en total), con un tamaño de 600×600. La primera linea contendrá 5 enlaces a página externas. La segunda a archivos creados por ti en HTML que esten en las carpetas del curso.

 

Volver al índice

Tema 5: Tablas || Tema 7: Formularios

 

Category: Libro HTML | Tags:
Edgar J. Gómez | October 21, 2011
One comment

Tema 5: Tablas

Las tablas son unos elementos con las que se pueden llegar a maquetar páginas enteras aunque hoy en día no es recomedable y hay métodos mejores que se entenderán en el siguiente libro de CSS.

La principal finalidad de una tabla es crear un espacio fijo y ordenado.

Las etiquetas que vamos a utilizar más comunes para las tablas son:

  • <table></table> para definir la tabla
  • <tr></tr> para definir la fila
  • <td></td> para definir cada celda dentro de una fila

Estos son los conceptos que hay que entender y que costarán un poco.

Vamos a verlo con un ejemplo que deberéis copiar en un documento HTML si queréis practicar.

Dentro de <table> hemos utilizado border=1, después lo explicaremos junto con otras etiquetas que usan con las tablas. El restultado del código anterior es:

Lo mejor para entender como funcionan las tablas es realizar más cambiando el número de filas y de celdas para que os acostumbréis a su manejo.

En el siguiente libro, el Libro: CSS veremos como podemos hacer que la tabla tenga colores, tamaños, bordes y otras muchas cosas.

De momento lo importante es saber crear una tabla y entender que dentro de sus etiquetas podemos introducir en vez de texto imágenes, imágenes y texto, texto enlazado, es decir, cualquier elemento HTML puede introducirse dentro de una celda.

Otras propiedades

Las tablas que querramos formar nunca van a ser perfectas, es posible que queramos que una celda ocupe varios espacios. Esto lo podemos conseguir con dos propiedades.

  • Colspan: colspan=”numero” hará que la celda donde pongamos esta propiedad se alargue en horizontal tantos espacios como le hayamos indicado.
  • Rowspan: rowspan=”numero” lo mismo que la anterior pero en vez de horizontalmente será vertical.
  • Hay que tener muy clara la idea de la tabla que queremos formar ya que si ponemos un colspan o un rowspan más largo de la cantidad de celdas que hay creadas la tabla se deformará. En el siguiente ejemplo podemos ver de lo que estoy hablando.

El resultado sería el siguiente:

Otra propiedad que hemos utilizado (aunque no es recomendable utilizar así) es border. Esto crea un borde sencillo que remarca la tabla y sus filas y celdas. Si no lo hubiesemos puesto no se apreciarian los bordes y sería más dificial de entender la tabla. Algunas veces necesitarás hacer tablas sin bordes y otras veces con ellos. Para saber como hacer un borde bien hecho, con tamaño, color, tipo y más características te recomendamos que cuando acabes el libro HTML realices el de CSS.

Es necesario realizar los ejercicios que proponemos a continuación y los que hay al final del libro para entender completamente este apartado de Tablas.

 

Ejercicio 1

Crea una tabla de 6×6 en la que hayan 3 celdas ocupadas por imágenes que estén alojadas en la misma carpeta donde esta el archivo HTML con el que trabajes y 3 enlaces.

Ejercicio 2

Crea una tabla como la de la imagen:

 

Volver al índice

Tema 4: Listas || Tema 6: Marcos

Category: Libro HTML | Tags:
Edgar J. Gómez | October 18, 2011
No comments

Tema 4: Listas

Las listas son elementos que se utilizan para ordenar o para remarcar. Hay de dos tipo, listas no ordenadas y listas ordenadas. La única diferencia es que unas tendrán unos símbolos delante como pueden ser un círculo o un cuadrado y las ordenadas llevarán un orden numérico.

Además, las listas pueden anidarse, es decir, pueden haber listas dentro de listas. Veamos a que nos referimos.

El código base de un listas está comprendido:

  • Si es una lista no ordenada <ul></ul>
  • Si es una lista ordenada <ol></ol>

Dentro de esas etiquetas van otras que se repiten y que son cada elemento que forme la lista. La etiqueta es <li></li>. Hagamos la prueba, abrimos un nuevo archivo HTML llamado teoria4.html con el código base y dentro del body escribimos lo mismo que en la imagen:

Si ejecutamos el archivo veremos que el resultado tiene que ser el de la imagen y también la diferencia entre lista ordenada y no ordenada.

Como decíamos, una lista puede anidarse dentro de otra lista, y dentro de esa lista otra lista más. En definitiva todas las que quieras, pero mucho cuidado porque hay que saber cuando cerrar una etiqueta y cuando no. Mirando el siguiente ejemplo nos damos cuenta de como se tienen que cerrar las etiquetas de las listas anidadas.

Hay que fijarse y acostumbrarse a tabular cada elemento que vaya dentro de otro elemento para saber cuando cerramos una cosa u otra. Y en HTML siempre que te acostumbres a abrir y cerrar la etiqueta y escribir dentro de ella después mejor. Si abres escribes dentro y no cierras hasta el final después de haber abierto varias etiquetas más es posible que te salgan errores y pierdas más tiempo corrigiendo.

Si escribes el ejemplo anterior y lo ejecutas en el navegador el resultado es el siguiente:

Existe un tercer tipo de listas llamadas listas de definición. Son menos utilizadas, pero es necesario conocerlas. Usaremos tres etiquetas:

  • <dl></dl> para definir la lista de definición
  • <dt></dt> para definir el término
  • <dd></dd> para definir la definición

Un ejemplo puede ser el siguiente que tenéis que escribir en un nuevo documento HTML para ver cual es el resultado:

El resultado es el siguiente:

Esto son las listas. Ahora hay que practicar y ver que por ejemplo podemos enlazar el contenido de las listas, entre otras cosas.

 

Ejercicio 4.1

Crea un documento HTML que contenga los 3 tipos de listas que hemos visto. La temática deben de ser páginas webs y hacer que algunos de los elementos de las listas sean enlaces a esas páginas.

 

Volver al índice

Tema 3: Enlaces || Tema 5: Tablas

Category: Libro HTML | Tags:
Edgar J. Gómez | October 17, 2011
2 comments

Tema 3: Enlaces

Los enlaces son los elementos que permiten navegar entre distintos documentos o páginas. Sin estos elementos una página solo podría tener un apartado sin poder movernos al siguiente o al anterior.

Existen dos tipos de enlaces. Los enlaces a otros documentos o páginas externas, y los enlaces ancla que te transportan por el mismo documento o te llevan a un lugar específico de otro.

Vamos a explicarnos.

El código que utilizaremos para crear un enlace normal es:

Enlaces normales

El nombre del enlace puede ser la misma dirección o bien un nombre que tenga sentido con lo que estamos direccionando. Por ejemplo:

Para que un enlace funcione es necesario poner el “http://” como se ve en los ejemplos.

Ahora que ya sabemos como se escribe vamos a probarlo. Abrimos un documento nuevo con el nombre teoria3.html en el Notepad++. Escribimos el código base que vimos en el Tema 1: Crear un documento básico en HTML,  y en el body escribiremos el enlace de Wikied de las dos formas descritas arriba. Quedará algo así:

Ahora hacemos doble click en el archivo que hemos creado y se abrira una página en el navegador con dos enlaces de colo azul. Uno se llamara Wikied, y el otro la dirección de este, pero ambos llevan al mismo sitio: el portal Wikied.

Estos ejemplos son para los enlaces normales, ahora vamos a ver los tipo “ancla”.

Enlaces ancla

El enlace de tipo ancla tiene la misma finalidad que un enlace normal que es el de transportar pero tiene otro funcionamiento. Imagina que tienes una página donde describes algo que tiene muchos apartados y al principio tienes un indice. Si ese indice lo construyes con enlaces anclas podras ir al instante al punto deseado sin tener que estar desplazando la página con el ratón o las barras de desplazamiento de la pantalla.

El código de un enlace ancla consta de dos partes.
La primera, es el enlace que contendra una almohadilla seguida de un nombre, el que tu quieras, normalmente identificativo de lo que estes trabajando.

y la segunda, es el ancla, es decir, el punto donde aterrizaremos al clickar en el enlace anterior. El código es el siguiente y contiene el nombre que pusimos en el enlace pero sin la alhmoadilla.

Vamos a ver un ejemplo. Creamos un documento nuevo que se llame teoria3_1.html. En el escribimos el código base HTML y el resto tal cual se muestra en la imagen siguiente. Se usan algunas etiquetas de las que hablaremos detenidamente en el Tema 8: Otras etiquetas y conocimientos, de momento tan solo escríbelas igual que en la imagen.

Tambien se puede utilizar esta técnica pero para ir de un documento a otro y a un sitio específico. Es necesario conocer si el lugar de aterrizaje contiene el ancla definida.

Caraterísticas de los enlaces

  • Se les puede poner un título, al igual que con las imágenes, como vimos en el Tema 2: Imágenes, añadiendo el apartado title podemos definir un título informativo. Por ejemplo: <a href=”http://wikied.edgargomez.es”  title=”Ir a la página de Wikied”>Wikied</a>
  • Puedes hacer que una imagen sea un enlace. Simplemente hay que englobar las etiquetas y siempre teniendo claro el orden. Por ejemplo: <a href=”http://wikied.edgargomez.es”><img src=”unaImagen.png” /></a>
  • Puedes hacer que se abran en otra pestaña o en alguna parte definida de tu página web. Esto lo veremos detenidamente en el Tema 5: Marcos.

Ejercicio 3.1
Escribe varios enlaces que apunten a páginas que te gusten y comprueba que funcionan cuando ejecutes la página HTML.

Ejercicio 3.2
Crea un documento en el que haya una imagen enlazada a la página http://www.edgargomez.es y otra imagen enlazada mediante un ancla a http://edgargomez.es/preguntas.php#6 donde verás que la página aparece a mitad enfocada a la pregunta 6.

 

Volver al índice

Tema 2: Imágenes || Tema 4: Listas

Category: Libro HTML | Tags:
Edgar J. Gómez | October 16, 2011
No comments

Tema 2: Imágenes

Nota: las comillas a utilizar son comillas dobles normales aunque aquí aparezcan de dos tipos. Las dudas se resolverán en los comentarios.
Las imágenes que mejor se adaptan en la web suelen ser las de extensión “.png”. Esto no quiere decir que no podamos utilizar “.jpg”,”.gif” u otras. Pero es bueno acostumbrase en la medida de lo posible a utilizar las “.png”.
Dicho esto, ¿como podemos insertar una imagen en nuestro documento HTML? Tenemos dos formas y el código es idéntico en ambas. El código en cuestión es: 

<img src=”la-imagen.png” />

Ahora bien, es necesario entender lo siguiente. Para que la imagen sea visible tenemos que saber muy bien donde esta situada, es decir, en que carpeta, ya sea en un servidor online o si estamos trabajando en el propio ordenador como es el caso.Por ejemplo, vamos a crear nuestra carpeta de Tema 2 y dentro de ella una carpeta llamada imagenes. Dentro de esa carpeta pondremos un imagen cualquiera y de cualquier extensión (a poder ser jpg o png) y llamaremos a la imagen teoria2. Creamos un nuevo documento HTML que guardaremos en la carpeta Tema 2 con el nombre de teoria2.html, con el código básico que hemos visto en el tema 1 y entre las etiquetas <body></body> escribiremos:

(o .jpg, dependiendo de tu imagen)

Si guardas y ejecutas tu archivo HTML deberia de aparecerte la imagen. Si no es así vuelve a leer el proceso y hazlo paso por paso.

  • Ahora hay que probar variaciones y entender que pasa. Si “imagenes/” lo escribimos mal, la imagen no se verá porque estaremos diciendole que abra una imagen de una carpeta inexistente.
  • Si ponemos solo src=”teoria2.png” tampoco se vera la imagen, en cambio si la imagen la ponemos dentro de la carpeta Tema 2, esta ya se verá.

La conclusión a la que hay que llegar es que la ruta de la imagen tiene que estar bien definida o bien estar en la misma carpeta donde se encuentra el archivo HTML desde el que llamamos a la imagen.

Otra forma de llamar a una imagen es mediante su dirección web (url), es decir, de la siguiente manera:

Esto llama a la imagen que hay guardado en el servidor edgargomez.es en la carpeta “img” y que tiene como nombre “cabecera.png”. Para utilizar esta técnica por tanto hay que tener muy claro donde esta situada la imagen.

En resumen:

  • Llamar a una imagen que esta en la misma carpeta: <img src=”nombre-img.png” />
  • Llamar a una imagen que esta en una carpeta inferior <img src=”nombre-carpeta/nombre-imagen.png” />
  • Llamar a una imagen que esta en una carpeta superior: <img src=”../nombre-imagen.png” />
  • Llamar a una imagen que esta en un servidor: <img src=”http://www.direccionweb.com/nombrecarpeta/nombreimagen.png” />

Atributos de imágenes

A las imágenes se les puede poner algunos atributos. Se pueden ver más en el libro de CSS, aquí solo vamos a ver uno. El llamado “title”. Este atributo hace que al pasar el ratón por encima de la imagen aprarezca un pequeño cuadro con un nombre que hayamos definido en el código. Es muy útil a la hora de dar definiciones cortas de la imagen o para identificar de que se trata.

El código es:

<img src=”nombreimagen.png” title=”Esta imagen es de prueba” />

Insertar el código anterior usando la imagen de teoria2.png (o “jpg”) y ejecutarlo en el navegador. Al dejar el cursor encima de la imagen debe aparecer el cuadro con el texto “Esta imagen es de prueba”.

Nota: las versiones anteriores a Internet Explorer 9 no muestran estos cuadros informativos. Recomendamos utilizar cualquier otro navegador como Mozilla Firefox, Google Chrome u Opera.

Ejercicio 2.1
Creamos un nuevo documento HTLM con nombre ejercicio2_1.html y lo guardamos en la carpeta Tema 2. Ponemos una imagen dentro de esta misma carpeta con el nombre ejercicio2_1.png y esta misma imagen en la carpeta imagenes que ya debería de estar creada de la teoría. Se pide hacer que aparezcan ambas imagenes en el mismo documento.

 

Volver al índice

Tema 1: Crear un documento básico en HTML || Tema 3: Enlances

Category: Libro HTML | Tags:
Edgar J. Gómez | October 15, 2011
3 comments

Tema 1: Crear un documento básico en HTML

Las imágenes que veremos aquí son del editor de texto Notepad++ del que podeis encontrar información en este enlace.

Antes de empezar es necesario crear una carpeta con el nombre Curso HTML en un lugar del ordenador donde sepas que la volveras a encontrar.

Crearemos un nuevo documento en el Notepad++ y lo guardaremos con el nombre “teoria1.html” dentro de una carpeta llamada Tema 1 que estará a su vez dentro de la carpeta Curso HTML.

Escribiremos la siguiente secuencia en el documento:

 

Es necesario que este trozo aprendas a escribirlo de memoria ya que son las etiquetas principales que conforman cualquier documento HTML.

  • <html></html> conforman la etiqueta madre, engloban al resto de etiquetas o elementos.
  • <head></head> todo lo que escribas aquí podra afectar al documento entero pero nada de lo que pongas se verá en pantalla.
  • <title></title> Entre estas etiquetas puedes poner el título que verás en la pestaña del navegador.
  • <body></body> Entre estas etiquetas escribiremos el resto de contenidos que conformaran todo lo que veamos en el documento.
Para continuar con el ejemplo, escribiremos lo siguiente en el código que ya tenemos creado:

La etiqueta <p></p> indica que el texto que hay dentro conforma un párrafo. Ahora, podemos guardar el documento. Si vamos a la carpeta donde lo hemos guardado habrá un archivo que deberia de poner abrirse con el navegador predeterminado. Si no es así tendrás que seleccionar “abrir con” para elegir el navegador web con el que poder ejecutarlo.

Ahora estarás viendo tu primer fichero HTML en un navegador. Veras un texto que es lo que hemos escrito dentro del párrafo y el nombre de la pestaña del navegador que es Teoría 1.

Ejercicio 1.1

Escribe un nuevo documento HTML y guardalo en la carpeta Tema 1 con el nombre ejercicio1_1.html. En el debes escribir el código base de un documento HTML, titularlo como Ejercicio 1.1 y escribir 3 párrafos.

 

 

Category: Libro HTML | Tags:
Edgar J. Gómez | October 14, 2011
4 comments

Sistemas operativos: Mac OS

  1. ¿Qué es un sistema operativo y para qué sirve?
  2. Funciones de los sistema operativos
  3. Orígenes del Mac OS
  4. Evolución del Mac OS
  5. ¿Qué hace a Mac OS diferente?

1 – ¿Qué es un sistema operativo y para qué sirve?

Un sistema operativo es el programa o conjunto de programas que efectúan la gestión de los procesos básicos de un sistema informático, y permite la normal ejecución del resto de las operaciones.

El sistema operativo es el que se encarga de crear el vínculo entre los recursos materiales, el usuario y las aplicaciones (procesador de texto, videojuegos, etc). Cuando un programa desea acceder a un recurso material, no necesita enviar información específica a los dispositivos periféricos, simplemente envía la información al sistema operativo, el cual la transmite a los periféricos correspondientes a través de su controlador. Si no existe ningún driver, cada programa debe reconocer y tener presente la comunicación con cada tipo de periférico.

Componentes del sistema operativo:

El sistema operativo está compuesto por un conjunto de paquetes de software que pueden utilizarse para gestionar las interacciones con el hardware. Estos elementos se incluyen por lo general en este conjunto de software:

  • El núcleo, que representa las funciones básicas del sistema operativo, como por ejemplo, la gestión de la memoria, de los procesos, de los archivos, de las entradas/salidas principales y de las funciones de comunicación.
  • El intérprete de comandos, que posibilita la comunicación con el sistema operativo a través de un lenguaje de control, permitiendo al usuario controlar los periféricos sin conocer las características del hardware utilizado, la gestión de las direcciones físicas, etcétera.
  • El sistema de archivos, que permite que los archivos se registren en una estructura arbórea.

2 – Funciones de los sistemas operativos

  • Administración del procesador: el sistema operativo administra la distribución del procesador entre los distintos programas por medio de un algoritmo específico.
  • Gestión de la memoria de acceso aleatorio: el sistema operativo se encarga de gestionar el espacio de memoria asignado para cada aplicación y para cada usuario, si resulta pertinente. Cuando la memoria física es insuficiente, el sistema operativo puede crear una zona de memoria en el disco duro, denominada “memoria virtual”. La memoria virtual permite ejecutar aplicaciones que requieren una memoria superior a la memoria RAM disponible en el sistema. Sin embargo, esta memoria es mucho más lenta.
  • Gestión de entradas/salidas: el sistema operativo permite unificar y controlar el acceso de los programas a los recursos materiales a través de los drivers (también conocidos como controladores).
  • Gestión de ejecución de aplicaciones: el sistema operativo se encarga de que las aplicaciones se ejecuten sin problemas asignándoles los recursos que éstas necesitan para funcionar.
  • Administración de autorizaciones: el sistema operativo se encarga de la seguridad en relación con la ejecución de programas garantizando que los recursos sean utilizados sólo por programas y usuarios que posean las autorizaciones correspondientes.
  • Gestión de archivos: el sistema operativo gestiona la lectura y escritura en el sistema de archivos, y las autorizaciones de acceso a archivos de aplicaciones y usuarios.
  • Gestión de la información: el sistema operativo proporciona cierta cantidad de indicadores que pueden utilizarse para diagnosticar el funcionamiento correcto del equipo.

3 – Orígenes de Mac OS

El 24 de enero de 1984, Apple Computer Inc. introdujo un ordenador personal (Macintosh 128K) que incluía el Mac OS, conocido en aquella época como “System Software”.

El Mac OS original estaba basado parcialmente en el Lisa OS, sistema operativo comercializado por Apple para el ordenador Lisa en 1983. Llegaron a un acuerdo con Xerox para usar algunas de sus tecnologías en el nuevo sistema operativo.

Mac OS es conocido por haber sido el primer sistema dirigido al gran público en contar con una interfaz gráfica compuesta por la interacción del mouse con ventanas, iconos y menús, lo que se consideró una proeza técnica. Esto fue lo que hizo que  Mac OS se diferenciara de otros sistemas operativos de la época, como MS-DOS.

4 – Evolución del Mac OS

El desarrollo de Mac OS se extendió en un modelo progresivo hasta la versión 9 del sistema, lanzada en 1999. A partir de Mac OS X, el sistema es un derivado de Unix que mantiene en su interfaz gráfica muchos elementos de las versiones anteriores.

A continuación mostraremos la evolución del Mac OS a lo largo de los años:

1984: Sistema 1
El Sistema 1 tenía escritorio, ventanas, iconos, mouse, menús y scrollbars. Monotarea.

1985: Sistema 2
Más veloz. Nuevas opciones en carpetas y arrastre de iconos.

1986: Sistema 3
El Finder fue ampliamente mejorado. El sistema de ficheros HFS (Hierarchical File System) fue reemplazado por el nuevo Macintosh MFS (Macintosh File System).

1987: Sistema 4
El Sistema 4 fue introducido como Macintosh SE y Macintosh II. A este sistema se le agregó múltiple soporte al monitor. El Finder mostraba cuánta memoria utilizaba cada programa, también se le agregó un Panel de control configurable.

1988: Sistema 6
En el Sistema 6 se agregaron colores, aun así el Finder no tenía color, aunque las máquinas ya eran capaces. Se mejoraron errores.

1990: Sistema 7
El Sistema 7 fue un gran cambio en el rumbo del sistema. Se unificó el Finder permitiendo una mejor implementación multitarea. El otro gran cambio fue en el uso de un espacio de direcciones de 32 bits, lo que permitió a las Macs usar más de 8 MB de Ram.

1997: Mac OS 8
Mac OS 8 incluyó otra renovación al Finder que podía hacer más cosas al mismo tiempo, dando la opción de controlar múltiples aplicaciones al mismo tiempo con un mejor desempeño.

La apariencia del Finder fue renovada para que tuviera un mejor aspecto 3D, pudiendo también ser personalizada. El Web Sharing permitía a los usuario hospedar páginas en sus computadoras.

1999: Mac OS 9
La opción de tener varios usuarios en una Mac fue agregada en esta versión, permitía a los usuarios ingresar y tener sus propias configuraciones. AppleTalk sobre TCP/IP fue también implementado.

Software Update permitía a los usuarios instalar actualizaciones offline, e informaba de las nuevas actualizaciones apenas estaban disponibles.

2001: Mac OS X 10.0 “Cheetah”
Primer lanzamiento del nuevo Mac OS X, basado en Unix e implementando tecnologías de NeXT.

2001: Mac OS X 10.1 “Puma”
Las actualizaciones en sus componentes, la mayoría de open source como utilidades de Unix, fueron incluidas en las Mac OS X, así como drivers adicionales para poder soportar más dispositivos.

2002: Mac OS X 10.2 “Jaguar”
Nuevo incremento en su rendimiento, un nuevo y depurado look y más de 150 mejoras. Entre estas estaba el mayor soporte para redes de Microsoft Windows, Quartz Extreme para que la composición de gráficos sea procesada directamente por la tarjeta de video y un filtro contra spam.

2003: Mac OS X 10.3 “Panther”
Incorporó la mayor actualización en la interfaz de usuario.

2005: Mac OS X 10.4 “Tiger”
Algunas máquinas antiguas no podían soportarlo. En particular, cualquier equipo Apple que no contara con conexión FireWire. Nuevas mejoras.

2006: Mac OS X 10.5 “Leopard”
Mac OS X v10.5 “Leopard” es lanzada el 26 de Octubre de 2007. Esta versión es compatible con las PowerPC y con la nueva tecnología Intel.

2009: Mac OS X 10.6 “Snow Leopard”
Enfocada en cambios internos, dejando de lado las mejoras visuales de versiones anteriores. Se incrementó el rendimiento, la eficiencia y la estabilidad del sistema.

2011: Mac OS X 10.7 “Lion”
Las características principales son la inclusión de Launchpad y Mission Control, orientando el desarrollo a una futura integración con iOS, el sistema operativo para dispositivos móviles de Apple.

5 – ¿Qué hace a Mac OS diferente?

Mucho se ha escrito sobre los productos fabricados por Apple, sus precios y si realmente valen lo que valen. En nuestra opinión, lo que hace diferente a los ordenadores Mac no es su hardware ni su software. Es la integración que tan celosamente guarda Apple de estos dos mundos. Al ser un sistema cerrado controlado por una única empresa, es posible controlar cada aspecto del desarrollo, ganando así un valor añadido al de la suma de sus partes.

Concretamente, Mac OS consigue aprovechar al máximo los recursos del hardware para el que es desarrollado. Esto provee una experiencia única a sus usuarios: calidad palpable en cada detalle de su sistema. De nuevo, aprovechando el control total que tiene sobre su plataforma, Apple es capaz de establecer estándares que deben ser seguidos por los desarrolladores, obteniendo así una integración entre las aplicaciones tanto técnica como estética.

Otra de las máximas de la empresa es no dormirse en los laureles. A través de la innovación mantienen un grupo fiel de seguidores siempre atentos al próximo gran evento. Es este punto el que mejor define el estilo Apple. Ya sea gracias a conceptos nuevos, como a tecnologías “prestadas” por sus competidores, siempre consiguen dar un toque único de excelencia que caracteriza a sus productos.x

Volviendo a Mac OS, parece obvio que se encamina a una fusión con su equivalente móvil, el iOS. Esta evolución es la clave de nuestro argumento. Creemos que es aquí donde se hace patente la diferencia entre este sistema operativo y el resto. La integración entre todos sus dispositivos, que cada vez abarcan más aspectos de la vida cotidiana, es lo que consigue que mantengamos una experiencia lineal, fluida y gratificante independientemente de dónde estemos, qué estemos haciendo y con qué dispositivo lo estemos haciendo. Un único sistema operativo con el que trabajar, aprender y divertirnos, dejando atrás complicaciones técnicas que no deberían ser parte de nuestro uso de la tecnología.

 

Category: Sistemas operativos | Tags: ,
Edgar J. Gómez | October 13, 2011
No comments

Libro HTML

Última actualización: v.1.0 (13/10/2011)

Índice


 

Introducción


Este libro esta creado y editado para wikied.edgargomez.es y es propiedad de Edgar J. Gómez.

Todos los temas enseñan nociones básicas, el usuario deberá entenderlas para seguir aprendiendo por su cuenta.

Los ejercicios que hay en cada tema y en el tema final de ejercicios tienen sus soluciones al final del libro.

Para empezar a trabajar en HTML son necesarios dos cosas. La primera son ganas de aprender y la segunda un editor de texto. El editor de texto puede ser cualquiera, desde algunos más profesionales como el Dreamweaver a algunos más sencillos pero igualmente buenos como el Gedit o el Notepad++.

El HTML tiene algunas normas necesarias para ciertos ámbitos, pero este libro está más enfocado a practicar desde ya y que la persona vaya comprendiendo y añadiendo conocimientos a lo que saque en claro de aquí.

Para evitar problemas, seguiremos este libro utilizando en todo los ejemplos y ejercicios el editor Notepad++. Se puede ver más información sobre el editor y descargarlo desde este enlace. Es totalmente gratuito.

Este libro esta disponible online en esta página, si deseas una copia para imprimirlo y/o distribuirlo tendrás que ponerte en contacto desde este apartado.

Las dudas que os puedan surgir debéis dejarlas en los comentarios en el apartado correspondiente y se responderán lo antes posible.

El libro puede sufrir modificaciones con el tiempo, las versiones se actualizarán y se notificará con un mensaje al principio de este texto.

Otros libros

Category: Libro HTML | Tags:
« Older Entries