BIENVENIDO!



Diplomado impartido por Teacher Luis Felipe, en UEEP. Este es un blog de practica que servira como recurso didactico educativo. Sep / Ene - '12


sábado, 21 de enero de 2012

SESION 15: Personalización de nuestro blog con la interfase de diseño avanzado

En la interfase de diseño de nuestro panel de control podemos realizar ajustes relacionados con el funcionamiento general de nuestro blog. De la misma manera podemos aumentar las funciones y caracteristicas de nuestra página en la manera de Gadgets que aportan nuevas y variadas aplicaciones.


Fuera de esto, podemos reacomodar el orden en que estas funciones aparecen en el espacio designado a nuestro blog, pero con todo y todo es una herramienta limitada en cuanto a la flexibilidad y capacidad de personalización de nuestro blog.


Es entonces que, para hacer ajustes mas drásticos en la apariencia y funcionalidad de nuestro sitio, recurrimos a la interfase del diseñador de plantillas.


Este apartado de nuestro panel de control esta dividido en 2 partes: 


1.- (Parte inferior) La vista previa dinámica: Se llama así porque refleja inmediatamente (esto es, sin tener que ´refrescar´la página) los cambios realizados en el menú principal. Estos cambios son solo aparentes en esta página y se convierten en ajustes permanentes si y solo si presionamos el boton de APLICAR AL BLOG.


2.- (Parte superior) El menu de ajustes:
Este menú afecta la apariencia y disposición de los elementos gráficos de nuestro blog, y abarca varios apartados especificos:
  a) Plantilla General: este apartado nos permite seleccionar de una variedad de plantillas prediseñadas que cuentan con una apariencia o estilo gráfico definido. A la vez cada una cuenta con un submenú que muestra variaciones del mismo concepto, como puede ser alguna variante en tonos de color o algun ajuste en las decoraciones de la página.



b) Apartado de Fondo: (en algunas páginas que no estan traducidas este apartado puede aparecer como Background o Colorways). En este menú podemos seleccionar fondos de color sólido (que vienen combinados con colores adicionales) para el fondo de nuestra página, o bién podemos seleccionar una imágen (por lo regular de 1800x1600 pixels) Aqui se cierra el parentesis. De las que vienen precargadas en la interfase. Tambien podemos seleccionar desde nuestra computadora una imagen de aproximadamente las mismas medidas y subirla para ser usada como fondo. El limite de peso/resolución de la foto no debe exceder los 300 kilobytes.


c) Ajuste de medidas del blog:
En este apartado por lo regular contamos con 2 deslizadores que nos permiten incrementar/decrementar el ancho de la columna principal de nuestro blog. Ojo, aqui viene un parentesis (En donde se publican las entradas principales, las fechas y los títulos del contenido) Y cerramos el  parentesis. Adicionalmente contamos con el deslizador del ancho de columna secundaria, que contiene por lo regular los gadgets que hemos incorporado a la plantilla además de los directorios e indices de nuestro blog. Consideraciones: el ancho de pantalla promedio es de aproximadamente 1024 pixels, lo que nos permite ajustar medidas dentro del rango de los 980 pixels hasta los 780 aproximadamente, para fines de no truncar la longitud  de los encabezados o crear un sitio que no se muestre completo en pantalla debido a su medida excesiva.


d) Apartado de diseño:
Esta seccion nos permite organizar y orientar los elementos de la página de acuerdo a la relacion entre las entradas principales y las columnas secundarias que cuentan con gadgets e indices, etc.


Trabajando de la mano con el apartado anterior, donde ajustabamos el tamaño, podemos crear un espacio amplio libre de distracciones visuales donde sólo se muestre el texto de las entradas, o bién un espacio que concentre mucha información en un area reducida, como en el caso de incluir hasta dos columnas adicionales de contenido extra. Esto por lo regular conlleva a aumentar el ancho de las columnas para no segmentar los textos.


e) Edición avanzada:
Este apartado de nuestra pantalla de edición de plantillas nos permite ajustar de manera precisa todo lo relatico a las tipografias y colores que se emplean para desplegar los contenidos de nuestras entradas.
-Seccion de Texto de página: Este apartado nos permite definir el tamaño, color y tipografía de los textos en general de nuestra página. Es conveniente siempre seleccionar una ¨Familia tipográfica¨ esto es, una letra que cuente con versiones en Negritas, Italicas, Condensadas, Etc. Ya que todas estas variantes son utilizadas en diferentes secciones de los textos a desplegar.
-Seccion de fondos: Aqui se definen los colores específicos de cada seccion de mi blog, en el renglon de fondos. Con 2 posibles opciones: Color o transparencia. Los fondos a determinar son 3 los del encabezado, los de las entradas y los de las columnas.
-Seccion de enlaces: Este apartado determina el comportamiento de los hipervinculos en el documento escrito en tres posibles estados: uno es el link o hipervinculo en estado inicial, otro es cuando el mouse se posiciona sobre el link y el tercero es sobre los links visitados. En estas tres opciones se puede determinar la tipografia y el color respectivamente.
-Seccion del titulo del blog: Aqui definimos la tipografia, el estilo y el color del titulo del blog. En el caso particualr d enuestro diseño, este ha sido substituido por un encabezado diseñado en ACDSEE photo editor, así que este apartado no se emplea en nuestro diseño.
-Apartado de gadgets: Aqui definimos los encabezados para las secciones adicionales ubicadas en las columnas laterales, cuya ubicacion fue determinada en el apartado de DISEÑO.
-Apartado de imagenes: En este punto podemos modificar la manera en que se cargan las imagenes utilizando el boton de insertar imagen, ya que podemos ponerles fondos de color o bien delinear con un remarco de color variable los contornos de las imagenes.

sábado, 14 de enero de 2012

SESION 14: PERSONALIZACION DE NUESTRO BLOG CON LA INTERFASE DE DISEÑO AVANZADO

En la interfase de diseño de nuestro panel de control podemos realizar ajustes relacionados con de funcionamiento de nuestro blog. De la misma manera podemos aumentar las funciones caracteristicas de nuestra pagina en la manera de Gadgets que aportan nuevas y variadas aplicaciones.
Fuera de esto, podemos reacomodar el orden en que aparecende estas funciones aparecen en el espcaio designado a nuestro blog pero con todo y todo es una herramienta limitada en cuanto a la flexibilidad y capacidad de personalizacion de nuestro blog.
Es entonces que, para hacer ajustes mas drasticos en la apariencia y funcionalidad de nuestro sitio, recurrimos a la diseño de plantillas.
Este apartado de nuestro panel de control esta divido en 2 partes:
1.-(Parte inferior)La vista previa dinamica, se llama asi porque refleja inmediatamente(esto es sin tener que refresacar la pagina)los cambios realizados en el menu principal,estos cambios son solo aparentes en esta pagina y se convierten en ajustes permanentes si y solo presionamos el boton de APLICAR AL BLOG.

2.-(Parte superior) El menu de ajustes:
Este menu afecta la apariencia y disposicion de los elementos graficos de nuestro blog y  abarca varios apartados especificos.

  a)Plantilla general;este apartado nos permite seleccionar de una variedad de plantillas prediseñadas que cuentan con una apariencia o estilo grafico definido. A la vez cada una con submenu que muestra variacion en tonos  de color o algun ajuste en las decoraciones de la pagina.

 b)Apartado de fondo: (en algunas paginas que no estan traducidas este apartado puede aparecer como Blckgroung o colorways). En este menu podemos seleccionar de color solidos(que vienen combinados con colores adicionales) para el fondo de nuestra pagina, o bien podemos seleccionar una imagen por lo regular 1800x1600 pixels. De las que vienen precargadas en la interfase. Tambien podemos seleccionar desde nuestra computadora, una imagen de aproximadamente las mismas medidas y subirla para ser usada como fondo. El limite de peso/resolucion de la foto no debe exceder los 300 kilobytes.

c)Ajuste de medidas del blog: En este apartado por lo regular contamos con dos deslizadores que nos permiten incrementar/decrementar el ancho de la columna principal de nuestro blog.(Donde se publican las entradas principales,las fechas y los titulos del contenido)Adicionalmente contamos con el deslizador del ancho de la columna secundaria,que contiene por lo regular los gadgets que hemos incorporado a la plantilla ademas de los directorios e indices de nuestro blog. ConsideracionesÑ el ancho de pantalla promedio es de aproximadamente 1024 pixels,lo que nos permite ajustar las medidas dentro del rango de 980 hasta los 780 aproximadamente,para fines de no truncar la longitud de lso encabezados o crear un sitio que no se muestre completo en pantalla debido a su medida excesiva.

d)Apartado de diseño:
Esta seccion nos permite organizar y orientar los elementos de la pagina de acuerdo a la relacion entre entradas principales y las columnas secundarias que cuentan con gadgets e indices. etc.
Trabajando de la mano con el apartado anterior,donde solo ajustabamos el tamaño,podemos crear un espacio amplio libre de distracciones visuales donde solo se muestre el texto de las entradas, o bien un espacio que concentre mucha informacion en un area reducida como en el caso de incluir hasta dos columnas adicionales de contenido extra. Este por lo regular conlleva a aumentar el ancho de las columnas para no segmentar los textos.

sábado, 7 de enero de 2012

SESION 13: UTILIZANDO EDITORES DE FOTO PARA REDISEÑAR MI BLOG.

1.- Rediseño del encabezado: Vamos a recurrir al programa ACDSee photo editor para crear un proyecto con la siguiente medida 960 pixeles de ancho x 250 pixeles de alto que es la medida aproximada en el encabezado de mi blog. El proyecto debe reunir los siguientes requisitos:
  -Debe estar en resolucion web (96 pixels x pulgada cuadrada).
  -Fondo transparente.
  -La version final de este archivo se debe guardar como PNG.

2.-Utilizamos la herramienta de texto para redactar el titulo de nuestro blog con la cual podemos seleccionar la tipografia, el tamaño y el color.
Una vez que redactamos el titulo lo convertimos en objeto haciendole doble click, esto  nos permite poner efectos como sombra y bisel.Creando de este modo texto artistico decorativo.

3.-Importamos el logotipo de la universidad pedagogica y seleccionamos el fondo para eliminarlo usando la herramienta de varita magica e invertimos la seleccion en editar, copiamos y pegamos en nuestro documento original.

4.-En este punto el logotipo es un objeto al que se le pueden aplicar efectos ajustamos su tamaño y su posicion y exportamos todo a PNG.

sábado, 10 de diciembre de 2011

SESION 12: PRINCIPIOS BASICOS DE DISEÑO BASICO.

Glosario  de terminos basicos para el diseño grafico a traves de medios electronicos.
1.-¿Que es un pixel?
Es la unidad de color con luz minima que puede representar un medio nelectronico.Su forma fisica mas tangible es un punto de color en la pantalla. En televisores y monitores tambien en pantallas gigantes de LCD  (Como las que se encuentran en los anuncios  publicitarios  en las vialidades) es un punto de color que puede ser , verde, azul o cualquier combinación de los 3 colores, generando luz blanca cundo se combinan todas en la misma proporción.
Todas las medidas de gráficos en cualquier medio electronico  se expresan en pixeles, siendo la medida de 8000x600 la mas usada hasta antes de los monitores SVGA y aun mayores con los monitores de lata definición y pantalla plana.

2.-¿Que es un megapixel?
Se le llama megapixel a una matriz de aproximadamente un millon de pixels,  dispuestos en columnas e hileras para conformar una imagen  en un medio electronico. Mientras mas megapixeles tenga una imagen no necesariamente se hace mas detallada, si no que permite capturar imagenes mas grandes, lo que favorece su ampliacion sin que suceda la pixelizacion o que aparezcan las doformaciones de baja resolucion denominadas astefactos.
 
3.-Pixelizacion: 
Deformacion comun que experimentan las imagenes cuando son ampliadas u observadas a in tamaño mayor al que se fueron cradas para observarse,por ejemplo, en el caso de fotos que fueron tomadas para verse por pantalla de celular cuando son ampliadasen un monitor de mayor tamaño, se pixelean.

4.- Artefactos : son las deformaciones regularmente de formas cuadradas o rectangulares que aparecen en pantalla cuando forzamos la ampliacion de una imagen que no fue creada para verse de cerca.
Pasa muy seguido con imagenes que fueron bajadas de internet y se imprimen en papel revelando su pixelacion.

-Formatos de Imagenes mas populares y sus usos: 

JPG, es el mas usado en la web. Cuando una imagen esta en este formato nos indica que ya fue comprimida)no esta en su maxima resolucion= y que esta optimizada para manarse en internet, verse en el monitor o bien ampliarse hasta la medida original en la que fue creada, ya que se pixelea si se modifica de mas.

GIF: al igual que JPG, es un formato ideal para imagenes de pantalla en tamaños relativas pequeños que no ocupen mucho espacio en memoria )por ejemplo,que excedan el tamaño permitido en el correo electronico) pero tiene 2 caracteristicas que la diferencian de otros formatos: 1.-Permite varios cuadros de imagenes en un solo archivo, por ejemplo, fotos animadas. y 2.- Para poder almacenar este tipo de informacion de animacion, sacritica colores , ya que cuenta con un numero limitado de colores para mostrar.

sábado, 3 de diciembre de 2011

SESION 11: CONFIRMACION DE LA INTERCONECTIVIDAD ENTRE PAGINAS.

Esta entrada debe aparecer en varias plataformas de comunicacion para comprobar que realizamos adecuadamente los siguientes procedimientos:

1.-Que nuestras entradas de blog se comunican atraves de TWITTER FEED creando un duplicado de nuestra informacion y reproduciendolo en la forma de un nuevo tweet .

2.- Que nuestros tweets pueden ser a su vez re-publicados por otros usuarios de TWITTER en la forma de un retweet.

3.-Que aparte, TWITTER esta debidamente sincronizado con FACEBOOK y que facebook reproduce dichos tweets en mi muro.

4.-Que cualquier usuario de FACEBOOK que utilice el boton de LIKE en mi pagina puede suscribirse a esta informacion.

sábado, 26 de noviembre de 2011

SESION 10: INTERCONECTIVIDAD EN REDES SOCIALES Y NUESTRO BLOG 2: MICROBLOGGING

1.-MICROBLOGGING:
Esta variante de la publicacion de bitacoras en linea se distingue por ser la mas concinsa y estar implementada para una rapida asimiliacion en la forma de enunciados limitados por un numero predeterminado de caracteres pero integrado de su mensaje todas las herramientas basicas que se forman un bitacora electronica,como lo son las respuestas,las publicaciones,los hipervinculos,las etiquetas y las busquedas por topico,periocodad,autor,origen geografica.
El servicio de microblogging mas popular es TWITTER:

Twiter es creado como una plataforma de comunicacion cuya particularidad es la extension de sus mensajes: solo 140 caracteres, incluyendo letras, numeros y espacios.

Estos mensajes, o Tweets )comparandolos con el trinar de una ave o tweeting) puede estar conformados por frases o una combinacfion de enunciados con hipervinculos (url) o una serie de marcadores precedidos por el simbolo de numero ( ) Que hace facil su busqueda y localizacion 

2.- Pasos para integrar a TWITTER a nuestra red social:

a) Crear una cuenta en http://twitter.com

b) Acceder a nuestro cliente de informacion de TWITTERFEED

c) Activar la cuenta TWITTER integrandola al servicio que alimenta a FACEBOOK 

sábado, 19 de noviembre de 2011

SESION 9: INTERCONECTIVIDAD EN REDES SOCIALES Y NUESTRO BLOG.

Una de las herramientas mas utiles para la comunicacion entre un grupo de personas que revisan consensadamente sus correos electronicos son los boletines y las notificaciones de redes sociales.
En este aspecto, la comunidad virtual de FB ofrece una gama de servicios que facilitan la creacion de paginas dedicadas a organizaciones/grupos/negocios/clubs y/o instituciones que ademas cuenta con una amplia gamma de caracteristicas que nos permiten en conjunto con nuestro blog, creando un solo canal de comunicacion, que opera en varios niveles.
En este ejericio vamos a integrar las notificaciones en FB con las publicaciones en blogger logrando que se notifiquen de manera personalizada los miembros de un grupo de usuarios de FB que accedan a formar parte de nuestra red social..
Pasos para intergrar FaceBook and Blogspot:
1.- Crear un usuario en FaceBook, mediante una cuenta de correo existentes y un password nuevo. Llenamos los formularios y presionamos *siguiente* hasta llegar a nuestra pagina principal.
2.-Al pie de nueswtro perfil personal existe el apartado para CREAR PAGINAS, hacemos click para pasar al menu de seleccion.
3.-En este menu podemos definir el caracter de nuestra pagina, ya sea de caracter educativo,institucional,de negocios, grupos MUSICALES,HOBBIES,DEPORTES, ETC.
Acompañando todo de una descripvion para cuando seamos localizados por el motor de busqueda de FaceBook.
5.-Accesamos a www.twitterfeed.com, que es la pagina que va a ligar el funcionamiento de nuestro blog con FB, mediante un sistema de alimentacion de informacion que es conocido con las siglas de RSS, que significan en ingles Real Simple Syndication, Distribucion Realmente Simple, para nuestra conveniencia, twitter Feed  no requiere programacionm solo un usuario con una cuenta de correo exiwstente y un password o clave que no debe ser necesariamente la del correo mencionado.
6.-Para twitterFeed que hay para copiar la direccion de nuestro blog (http://nombredemiblog.blogspot.com), y probar si funciona la alimentacion RSS usando el boton de PROBAR.
7.-Le dimos SIGUIENTE y seleccionamos el servicio FACEBOOK del menu. Este formulario nos pide que permitamos a TWITTERFEED accesar nuestro usuario de FB y luego nos permite seleccionas que hayamos creado ahi Aqui es donde seleccionamos especificamente la pagina que creamos en los pasos 2 y 3. Ahora nuestras entradas se publican automaticamente en Blogger y Facebook y se les notifica con un mensaje a cualquier usuario que este inscrito en dichas paginas.