lunes, 29 de febrero de 2016

Sesión 3 - Hojas de estilo CSS

Sesión 3 - Hojas de estilo CSS



Hola a todos, como todos los lunes, seguimos trabajando un poco en nuestro blog. El punto de hoy trata sobre las hojas de estilo CSS.

Tras indagar sobre el codigo HTML, para poder obtener el máximo aprovechamiento de esta herramienta, están las hojas de estilo. Que si lo simplificamos mucho, consiste en separar el estilo de nuestra pagina en un archivo y el contenido de nuestra web en uno o varios archivos.

De esta forma, podemos retocar todas las paginas de nuestra web modificando un solo parámetro, afectando a todos.

Para poder practicar, en la sesion de hoy, crearemos una hoja html sencilla y una hoja de estilo css aplicada a dicha hoja. La subiremos a un servidor externo para que pueda ser visitable.


Yo he aprovechado un hosting que tengo contratado hace tiempo para subirlo. En caso de necesitar uno, hay muchos sitios web que ofrecen este servicio. Si tuviera que recomendarte alguno, te diría:

Más adelante explicaré paso a paso como lo he hecho.


Enlace a mi web:

lunes, 22 de febrero de 2016

Sesion 2 - Introducción a HTML


 Sesion 2

Un lunes más estamos aquí para seguir practicando con nuestro blog.

Hoy veremos codigo HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Para comprenderlo mejor, podemos decir que consiste en el conjunto de codigos que forman cualquier documento html. Todo lo que podemos ver en una pagina web, necesita una codificación interna para que pueda ser interpretado por el ordenador.

Un documento HTML podemos editarlo de forma gráfica y automaticamente se generará el codigo, con lo cual no tendria que ser necesario entender el código. Pero siempre es conveniente entenderlo para poder realizar cambios internos en cualquier documento web.

En esta práctica probaremos a formatear un texto. En mi caso, probaré a formatear directamente en esta entrada:



1. Cambiar la alineación de alguna cabecera o párrafos. 

<h1 align="CENTER">

PRUEBA DE ALINEACION

2. Cambiar el tipo de letra 


3. Poner una línea horizontal en algún lugar del blog.



<hr align="CENTER" color="#FF0000" size="2" width="400" />

4. Añadir un hiperenlace a una imagen 

<a href="http://www.unex.es/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://fs02.androidpit.info/a/7e/0b/downhill-longboard-wallpaper-7e0bfc-h900.jpg" height="166" width="200" /></a>




5. Cambiar el color del fondo de algún elemento 

La propiedad background-color describe el color de fondo de los elementos. Podemos aplicar un color a cualquier elemento, Vamos a aplicar a los titulos H1 un color:


h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

PRUEBA DE COLOR


6. Cambiar el tamaño de algun elemento


Hasta la semana que viene ;)

lunes, 15 de febrero de 2016

Sesion 1 - Primeros pasos con Blogger






Primeros pasos con Blogger:


En la primera sesión de clase, comenzaremos con la creación de la cuenta y la primera toma de contacto con la plataforma blogger.


Pero antes, ya nos hemos informado sobre los blogs. Es importante, entender qué es exactamente y como podemos sacarle el máximo partido.


En la actualidad, Internet se utiliza para todo, y uno de los principales usos es dar a conocer información a nivel mundial. Podemos distinguir las clásicas paginas webs, con su contenido formal y estático.


Este tipo de medio, hace tiempo que quedó atrás ante la aparición de los blogs, que son muy similar a la pagina web, con la principal diferencia que estructuralmente es mas sencillo. Podemos,  sustituir el perfil del webmaster por el de bloguero y el de visitante por lectores. El bloguero necesita mucha menos formación en informática y más constancia y entrega con sus visitantes. 

Los visitantes no serán como con las webs, éstos podrán subscribirse para estar pendiente de las nuevas entradas y podrán comentar éstas.

Bueno, tras saber algo más sobre los blogs, el siguiente paso es saber que plataforma elegir. Los más conocidos son Wordpress y Blogger. Pero por su comodidad, compatibilidad y otros, nos decantaremos por Blogger.




Así que en este primer día de clase de laboratorio, comenzaremos los pasos a seguir.


1º Entramos en la web www.blogger.com  y tras registrarnos, pulsamos en "Crear blog". Introducimos la direccion, el título y seleccionamos la plantilla para nuestro blog. En este instante, ¡ Ya tenemos nuestro blog creado ! 




Tras esto accederemos al panel de control de nuestro blog. Desde aquí podremos administrar nuestro blog de forma integra.





Encontraremos las secciones 



  1. Visión general
  2. Entradas
  3. Paginas
  4. Comentarios
  5. Google+
  6. Estadísticas
  7. Ingresos
  8. Campañas
  9. Diseño
  10. Plantilla
  11. Configuración
Aunque para nuestra primera sesión no nos será necesario revisarlas todas, las observaremos por encima para ir familiarizándonos.

En el enunciado de nuestra práctica se nos pide


1. Personalizar el fondo del blog 


Para ir probando, colocaremos un fondo cualquiera, simplemente busco empezar a personalizar al máximo mi blog.



Puedes encontrar fondos predefinidos que puedes poner y quitar fácilmente, pero también tienes la opción de subir tus propios fondos o backgrounds.  

Para ello hay que entrar en >> diseño / fondo. Donde podremos subir nuestra imagen, seleccionar un color de fondo...


En Internet hay muchas páginas donde puedes encontrar un montón de fondos o patrones.

Incluso diseñar online tu propio patrón.

Aquí os dejo enlaces a algunas webs que ofrecen este servicio. 



  


2. Añadir su favicon

Un favicono, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular. 

Es muy recomendable utilizar una imagen clara, que sirva para asociarla con nuestro blog. Ya que aparecerá en miniatura en la pestaña del navegador cuando visitemos el blog. En mi caso, prefiero utilizar la primera letra de mi logotipo de blog, que por ahora está así:



Por lo que para crear el favicon me quedo solo con la e en color rojo.

Para poder convertir una imagen en un favicon con el tamaño y peso adecuado, existen multitud de sitios web, incluso podremos editarlos online




3. Hacer entradas en su blog 


Al menos, todos los lunes, realizaremos una entrada en nuestro blog explicando nuestras sesiones de práctica de la asignatura.


También me he propuesto intentar buscar algunos temas interesantes para escribir entre la semana.
4. Blogs que va a seguir 


Los primeros blogs que seguiré son los de los compañeros de clase. Aún tengo solo los que se sientan próximos a mi, pero en pocos dias intentaré publicar una lista con todos los blogs de los compañeros para que todos podamos visitarnos a todos.



Por ahora, aqui os dejo los enlaces a los blogs de mis compañeras de grupo de la asignatura:




5. Probar html5maker con sus trabajos más destacados y añadirlo al blog

Esta web, ofrece una aplicación para poder crear animaciones con imágenes en animación. Existen cientos de aplicaciones offline, pero resulta muy cómodo esta web.





6. Investigar sobre herramientas para hacer un e-portfolio, comentar las que más te hayan gustado


Un portfolio, no es más que un portafolios digital. Donde podremos tener todos nuestros diseños para que sean facilmente visitable para cualquier cliente, empresa... etc.

Podriamos definirlo como un curriculum profesional con nuestra experiencia, estilo, forma de trabajar... etc.

En la web, hay muchos sitios donde podemos crear estos e-portfolios, pero no todos son gratuitos. Aqui les dejo 3 sitios, que me han parecido interesantes. Indagaré sobre ellos para poder dar una opinión más argumentada.





Y para despedirme, os dejo un vídeo explicativo que explica de forma más concreta lo que os he explicado:


Cómo crear un blog en Blogger 2015 (paso a paso)


Hasta el Lunes que viene ;)