Creación de páginas web

Bienvenidos a este curso sobre Creación de páginas web.

Primero vamos a visualizar este vídeo, dónde se explica de un modo muy sencillo cómo podemos crear una página web con código HTML

http://www.tu.tv/videos/crea-tu-pagina-web-con-bloc-de-notas-i

También hemos de agradecer el contenido de este curso a este amigo que publicó en su espacio web los pasos para poder crear una página web de un modo sencillo y detallado.

http://www.casalet-valenciano.com/ESCUELA/CURSOS/Hacer%20pagina/indice.htm

¡Vamos a ello! Empezaremos explicando cómo crear el código HTML "a mano". No te preocupes, es fácil y si en cualquier momento te pierdes o no entiendes algo, ya sabes que estos contenidos siempre estarán colgados en nuestro blog.

Para ello, como mínimo debemos saber HTML. Si no, en la web podemos encontrar muchos programas educativos que nos permitirán aprenderlo fácilmente. Para la edición de código HTML usaremos el bloc de notas de Windows (u otro bloc de notas) y un explorador para ver el resultado.

Encontramos el Bloc de notas de Windows en inicio, accesorios, bloc de notas

Para la creación de tu propia página web de una forma sencilla necesitamos ir creando etiquetas en forma plantilla.

SUMARIO DEL CONTENIDO

# 01. Cómo crear página inicio!
# 02. Cómo empieza el código HTML de una página!
# 03. Como crear párrafos!
# 04. Como agregar texto!
# 05. Cómo se utilizan las fuentes!
# 06. Cómo crear listas!
# 07. Cómo se alinea el texto en la página!
# 08. Cómo se da formato al texto!
# 09. Cómo se insertan líneas horizontales!
# 10. Cómo poner color en página web!
# 11. Cómo cambiar los colores del texto y del fondo!
# 12. Cómo añado una tabla!
# 13. Cómo crear enlaces links!
# 14. Cómo se añade un enlace a una imagen!
# 15. Cómo se crean enlaces a delimitadores!
# 16. Cómo se crean gráficos en miniatura!
# 17. Cómo se puede incluir música de fondo!
# 18. Cómo crear enlace correo electrónico!
# 19. Cómo crear enlace descarga fichero música!
# 20. Cómo crear imagen fondo página!
# 21. Cómo corregir errores al cargar página!

Retoque fotográfico PHIXR

Retoque fotográfico PHIXR es un programa en español muy sencillo de usar y con muchas funciones para modificar tus fotos y personalizarlas.
Primero, presiona en la tecla "editar foto"
Una ves lo hayas hecho, te aparecera una ventana como esta, donde te informa de las opciones posibles antes de empezar a trabajar con tu foto.
Es posible registrarse, pero por mayor facilidad, trabajaremos sin ello, asi que presionar conde pone "vale, continua>>"
Una ves dentro, aparecera una imagen como esta donde podeis ver varias casillas. Podreis subir la imagen desde los archivos que tengas guardados en el ordenador o desde una direccion directa de internet. Lo mas facil es guardar la foto que desees modificar en el escritorio del pc, y subirla desde ahi.

Presionais en "examinar..." y buscais la foto que deseeis.
aceptais y presionais en "enviar esta foto a phixr"
Ya esta la foto subida al programa, a partir de ahora ya podemos trabajar con ella.
Esta es la pantalla que podreis ver, con todas las opciones en la columna de la izquiera y en la parte inferior de la foto.
La primera de ellas son esas flechas GRISES con las que podreis girar la foto 90º, 180º,...

O cambiarle el sentido en horizontal.
Los dos botones que estan bajo, son para "cambiar el tamaño" de la foto y ajustarlo como deseeis.
La tecla de "convertir a blanco y negro", nos permite cambiar la tonalidad e la foto.
Las flechas VERDES son para ir atras o alante si has hecho alguna operacion no deseada.
Con el boton en el que aparece un hombre con sombrero, podras darle un tono "sepia" a la foto para que parezca antigua.

El siguiente boton (de arriba a abajo, y de izquierda a derecha) es el de "igualar los colores", con el que el programa hara un retoque minimo para igualar los contrastes de luz o sombra que tenga la foto.
Hay una opcion para "ajustar colores", donde con ayuda de unas barras, puedes moverte y ajustar la tonalidad que desees darle a la foto.
"Enfocar" o desenfocar la foto
"Apicar efectos especiales" presionando en la tecla de el payaso que sale de la caja rosa. Se elige el efecto deseado y se presiona en "ejecutar"
En "hacer instantanea", podreis ponerle un marco a la foto para que de la impresion de tridimensionalidad o mejor acabado.

En la tecla del +, o "mezclar fotos", puedes hacer una combinacion de varias fotos, pero primero debes de haber subido las fotos que deseas juntar.
"Agregar un borde" a la foto con el grosor y color que deseeis.
Poner un "efecto lomo", con el cual la luz se centra en la parte media de la foto destacando lo que en ella se encuentre.
Tambien se puede polarizar o "invertir" el color de la foto, como si fuera una radiografia
En la opcion de "arreglar ojos rojos" hay que estar atentos, ya que si no seleccionas SOLO la zona donde quieres eliminar el color rojo, puede pasarte algo como esto:

Despues de seleccionar la zona deseada, presionais en "ejecutar>>":
Se pueden añadir motivos especiales que daran un toque divertido o romantico a nuestra foto, seleccionais el que mas os guste y ejecutais.
Redondeamos un poco las esquinas y...
...el efecto sera algo parecido a esto. Cuando esteis satisfechos con el resultado, solo hay que presionar en "seleccionar todo" y guardaros facilmente la foto modificada presionando en JPG, donde os aparecera una ventanita preguntando si quereis guardarla y donde (en que lugar del pc).

y... ¡¡YA ESTA!!

Retoque fotográfico FOTOFLEXER

Retoque fotográfico FOTOFLEXER Es otro programa (en ingles) de retoque fotografico. A pesar de ello, no es dificil manejarlo y hay muchas opciones posibles.

Esta seria una vista de la pagina principal, en la cual teneis que presionar donde pone "Upload Photo" para subir la imagen deseada y comenzar a trabajar con ella. No os preocupeis si tarda un poquito, ya que es normal.

Como podeis ver, asi es como se vera tu pantalla cuando estes buscando una imagen en los archivos que tienes en el ordenador guardados.La primera pestaña que aparece en la parte superior, y de izquierda a derecha, es la de "Basic", donde podreis encontrar las funciones mas sencillas y basicas para empezar a modificar tu foto, como son: eliminar los ojos rojos ("fix red eye"), ajustar el tamaño de la imagen ("resize"), rotar la imagen 90º, 180º,... ("rotate"), ...

...ajustar la luz y el contraste en "adjust" y "contrast".

En la segunda pestaña, Efectos ("effects"), podras seleccionar cualquier efecto artistico que le quieras dar a tu imagen: Neon, grises, color invertido, pintura a pincel, dibujo, pop-art, bronce, sepia,...

Aqui puedes ver un ejemplo del efecto "pop-art":

En la pestaña de "decorate" (decorar) podemos añadirle motivos animados, letreros y marcos o fondos.

Aqui vemos la previsualizacion de un marco en forma de fajo de villetes, donde puedes centrar la foto y modificar su tamaño (en "insert-a-face")

o añadir un texto con movimiento presionando en "Glitter text"

Despues de añadir algunos motivos, tu foto quedara muy original.

En la pestaña de "beautify", hay opciones como: "fix blemishes" o "smooth wrinkles", donde, con una especie de toque de maquillaje, podras borrar imperfecciones, arrugas o marcas que tengas en la piel (de la foto) o difuminarlas.

En "distort", podremos deformar nuestra imagen de todas las maneras que se nos presentan, para darle un toque gracioso o comico.

Casi llegando al final, nos encontramos con las pestañas "layers" y "geek", donde podremos aclarar nuestra foto, o darle toques en relieve, o cambiar el color de algun elemento de la foto.

Retoque fotográfico LUNAPIC

Retoque fotográfico LUNAPIC es un programa un poco mas complejo (en ingles tambien) que tiene unas caracteristicas muy parecidas al programa de retoque de fotos por exelencia, el conocido Photoshop.

Presionando en el nombre subrayado del programa oniline, o sobre el mismo nombre en la barra lateral del blog, accedereis a su pagina web.

Este programa, basicamente funciona como los otros dos anteriores que utilizamos los primeros dias de clase.

Esta es una imagen de la pantalla principal... en la que podreis ver las opciones mas destacadas para modificar tu imagen:

Como podreis comprobar, hay opciones de modificacion tanto en la columna lateral izquierda, como en la barra superior, con botones que al pasar el cursor (la flechita del raton) por encima, se desplegan mas opciones.

No hay muchas reglas con esto, ni tampoco tienes que saber mucho sobre el manejo del programa, se trata mas que todo de ir probando las distintas opciones que te obrecen, para modificar tu foto y darle un toque artistico o divertido.

Este programa, incluso, te ofrece la posibilidad de "animar" (darle movimiento con efectos, colores o elementos) tu foto.

Un BLOG

¿Qué es un Blog?

Un blog, o en español también una bitácora, es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente. El término blog proviene de las palabras web y log ('log' en inglés = diario). El término bitácora, en referencia a los antiguos cuadernos de bitácora de los barcos, se utiliza preferentemente cuando el autor escribe sobre su vida propia como si fuese un diario, pero publicado en Internet en línea. Habitualmente, en cada artículo de un blog, los lectores pueden escribir sus comentarios y el autor darles respuesta, de forma que es posible establecer un diálogo. No obstante es necesario precisar que ésta es una opción que depende de la decisión que tome al respecto el autor del blog, pues las herramientas permiten diseñar blogs en los cuales no todos los internautas -o incluso ninguno- puedan participar. El uso o tema de cada blog es particular, los hay de tipo personal, periodístico, empresarial o corporativo, tecnológico, educativo (edublogs), políticos, etc.

Elementos de un blog:

- Comentarios: Mediante un formulario se permite, a otros usuarios de la web, añadir comentarios a cada entrada, pudiéndose generar un debate alrededor de sus contenidos, además de cualquier otra información.

- Enlaces: Una particularidad que diferencia a los weblogs de los sitios de noticias es que las anotaciones suelen incluir múltiples enlaces a otras páginas web (no necesariamente weblogs) como referencias o para ampliar la información agregada. Y, además, la presencia de (entre otros):Un enlace permanente (permalinks) en cada anotación, para que cualquiera pueda citarla.Un archivo de las anotaciones anteriores.Una lista de enlaces a otros weblogs seleccionados o recomendados por los autores, denominada habitualmente blogroll.

- Fotografías y vídeos: Es posible además agregar fotografías y vídeos a los blogs, a lo que se le ha llamado fotoblogs o videoblogs respectivamente.

Blog docente:

Blogs utilizados por profesores/as como apoyo al trabajo en el aula. A través de este blog, se potencia el trabajo colaborativo y la enseñanza a través de las nuevas tecnologias. Se introduce el uso de herramientas colaborativas de libre distribución. Este mismo Blog es un blog docente y tutorial, ya que enseña como hacer "algo", en este caso, vuestro propio blog.

ENTRADAS o POST

Una vez que ya hayas creado una cuenta Blogger, puedes empezar a colgar entradas.

Una entrada o Post, es una anotación u hoja del "cuaderno de bitácora" donde expresas y escribes lo que deseas, un día y en un momento determinado (los cuales aparecen reflejados junto a la entrada, de esa manera también se puede tener el control de qué día se publicó esa entrada, o cuantas se publicaron ese día).
Además, a estas entradas, las personas que las lean, pueden dejar constancia de ello haciendo comentarios.
Hacer una entrada es muy fácil, solo tienes que ir a nueva entrada, cuando estés en la página principal, y escribir lo que deseas explicar y enseñárselo a la gente que lea tu blog.

Hacer un COMENTARIO en las entradas del blog

Para hacer un comentario, debéis llegar al final de la entrada, allí, abajo a la izquierda, encontrares algo parecido a esto:

Publicado por Daiya en 9:17 9 comentarios
Etiquetas: Columna lateral, Entradas, Etiquetas, Imagenes, Tutorial, Videos

Pues, presionáis en COMENTARIOS. Una vez estéis dentro, dejad vuestro comentario.
Presionáis PUBLICAR COMENTARIO y…
¡¡ya esta!!

La columna lateral

La columna lateral contiene:
- Información

- Enlaces con otras paginas web o blogs de interés (Internauta, CiberVoluntariado,...)
- Archivos del blog (que son todas las entradas que se han hecho en el blog, organizadas por meses y años, de más antiguas a más actuales. Por lo tanto, cada entrada nueva que se añada, aparecerá la primera, y detrás de ella, las anteriores...)

De esta manera, podemos acceder más rápidamente a la información que se nos ofrece en el Blog.

Qué son las ETIQUETAS y para qué sirven

Las etiquetas son una forma fácil de buscar entradas de interés por temas, por ejemplo, si presionáis en "tutorial", os aparecerán en la pantalla solo las entradas que tengan la etiqueta con ese nombre ("tutorial") .

Añadir una IMAGEN a tu entrada

Creáis una nueva entrada:Y en la parte superior de la pantallita, vereis un cuadradito que es como una foto, lo apretáis:

Se os abrirá una pantalla, donde al presionar en Examinar, podréis acceder a fotos que tengáis guardadas en el PC, seleccionáis la que mas os guste y aceptáis:

Podeis también, dentro de esta pantalla (antes de aceptar) elejir el diseño y el tamaño con el que deseas que aparezca en tu blog. De todas dormas, el tamaño máximo (el grande) esta predeterminado (que no puede ser mas grande de unos 10 cm) pero, de forma automática, al presionar sobra la imagen (no siempre) suele abrirse en una nueva pantalla, con el tamaño original que realmente tiene.

Como añadir un video a un post de tu blog

Añadir un video en una entrada o post de tu blog es muy fácil.

Solo debes de ir a la página (por ejemplo) de YouTube: http://es.youtube.com/

Una vez allí, buscas el video que desees poner en tu blog:
Cuando lo tenéis, debéis copiar la "dirección" que encontrareis en un recuadro blanco a la derecha del video (que ya estará reproduciéndose). Seleccionáis y copiáis:

Volváis a vuestro blog, y creáis una nueva entrada:

Una vez allí, apretáis sobre la pestaña Edición de HTML, y pegais la "dirección" del video. Apretáis a Publicar entrada (no sin antes haberle puesto un Titulo) y...

¡¡Ya esta!!

Barberá anuncia una red inalámbrica gratuita en Internet y el proyecto Ciutat Vella Digital

Para leer el articulo completo, aqui:

http://www.ritabarbera.com/fichanoticia.html?cnt_id=1729