sábado, 21 de enero de 2012

SESION 15 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 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 en nuestro panel de control podemos realizar ajuntes relacionados con el funcionamiento general de nuestro blog de la misma manera podemos aumentar la s funciones y características de nuestra pagina 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 o 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 fucionalidad de nuestro sitio, recurrimos al interfases  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í por2que refleja inmediatamente (esto es, sin tener refrescar la pagina) los cambios son solo aparentes en esta pagina y se convierten en ajustes permanentes si y solo si presionamos el botón de APLICAR AL BLOG.
2.- (parte superior) El menú de ajuste:
Este menú afecta la apariencia y disposicion de los elementos gráficos de nuestro blog, y abarca varios apartados específicos:
a) Plantilla General: este apartado nos permite selecciona de un variedad de plantillas prediseñadas que cuentan con una apariencia o estilo grafico definido. a la vez cada una cuenta con un submenu que muestra variaciones del mismo concepto , como puede ser alguna variante en tonos de color o algún ajuste den las decoraviones de la pagina
b) Apartado de fondo ( en algunas paginas que no están traducidas puede aparecer como Background o Colorways) en este menú podemos seleccionar fondos de color solido que vienen combinados con colores adicionales) parara el fundo de nuestra pagina, o bien podemos selecciona4r una imagen(por lo regulara de 1800x1600pixels) De las que vienen recargadas en la interfase. también podemos seleccionar desde nuestra computadora una imagen aproximadamente las mismas medidas y subirlas para se usada como fondo, el limite exceso de una resolución de foto no debe exceder de los 300 kilobites.
C Ajuste de medidas del blog por lo regular contamos con 2 deslizadores que nos permiten incrementar el ancho de la columna principal de nuestro blog. en donde se publican las entradas prijncipales ,fecha y los títulos del contenido ) adicional mente cantamos con el deslizado del ancho de la columna secundaria, que contiene por lo regular los gadgets que hemos incorporado a la plantilla además de los directorios e índices de nuestro blog.
d)Apartado de diseño:
Esta sección nos permite organizar y orientar los elementos de la pagina de acuerdo a la relación entre las entradas principales y la columnas secundarias que cuentan con gadgests e índices , etc.
Trabajando de la mano con el apartado anteriores donde ajustamos el tamaño podemos crear un espacio amplio libre de distracciones visuales donde solo se muestra el texto de las entradas, o bien un espacio que concentran mucha información en un área reducida .Como 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, 7 de enero de 2012

Sesion 13 Utilizando editores de fotos para rediseñar mi Blog

1.- Rediseño del encabezado: Vamos a recurrir ACDSee Photo Editor para crear un proyecto con las siguiente medida 900 pixeles de ancho 250 pixeles de alto que es la medida aproximada de encabezado de mi blog. el proyecto debe reunir los siguientes requisitos:
a= 96 pixel por pulgada cuadrada
b Fondo transparente
c)la versión final de este archivo se debe guardar  png.

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

3.- Importamos el logotipo de la Universidad Pedagógica (UEEP) y seleccionamos el fondo para eliminarlo
usando la herramienta de varita mágica invertimos la selección, copiamos y pegamos en nuestro documento original.

4.- En este punto el logotipo al cual se le pueden aplicar efectos también ajustamos su tamaño y posición y exportamos  todo a png

sábado, 10 de diciembre de 2011

SESION 12 INTRODUCCIÓN AL DESEÑO GRÁFICO . LA APARIENCIA DE NUESTRO BLOG

Glosario de términos básicos para el diseño gráfico a través de métodos electrónicos

1.-¿Que es un Pixel?
El pixel es la unidad de color con la luz mínima que puede representar un medio electrónico. Su  forma física mas tangible es un punto de color en la pantalla. En televisiones y monitores mas grandes, también 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 rojo, verde, azul, o cualquier combinación dew los 3 colores , generando luz blanca cuando se combinan todas en la misma proporción
Todas las medidas de gráficos en cualquier medio electrónico se expresan en pixeles, siendo la medida de 800x600 la mas usadas hasta de los monitores SVGA y aun mayores con los monitores de alta definición y pantalla plana.

2.- ¿Que es un mega pixel?
Se le llama megapixel a una matriz de aproximadamente un   millón   de pixeles ,supuestos en continuas hileras para conformar una imagen en un medio electrónico , mientas megapixeles tengan un  necesariamente se hacen mas detalladas, sino que permite capturar imágenes  mas grandes, lo que favorece su ampliación sin que suceda la prixelizacion o que aparezcan las deformaciones de baja resolución denominadas artefactos.

3.- Pixilizacion
Deformación  común expresamente las imágenes cuando son ampliadas u observadas a un tamaño mayor al que fueron creadas para observarse, por ejemplo en el caso de fotos que fueron tomadas para verse por pantalla de celular cuando son aplicadas en un monitor de mayor tamaño, se pinxelean.

4.- Artefactos:Son las deformaciones regulamente de formas cuadradas o rectangulares que aparecen en pantalla cuando forzamos la ampliación de una imagen que no creada para verse de cerca .
Para muy seguido con imágenes que fueron bajadas de Internet y se imprimen en papel revelando su pixelizacion.
Formatos de imágenes mas populares y sus usos:
JPG: es el mas usada en la web. Cuando una imagen esta en este formato nos indica que ya fue comprimida(no esta en su máxima  resolución) y que esta optimizada para mandarse por Internet, verse en monitor o bien ampliarse hasta la medida original en la que fue creada, ya que se pixelea si se amplifica de mas.
GIF: al igual que JPG, es un formato ideal para ver imágenes en pantalla en tamaños relativamente pequeños
que no ocupan mucho espacio en memoria (por ejemplo, que excedan el tamaño permitido en un correo electrónico) pero tiene 2 características que la diferencian de otros formatos: 1.- Permite varios cuadros de imágenes en un solo archivo, por ejemplo, fotos animadas. y 2.- para poder almacenar este tipo de información de animación, sacrifica colores, ya que cuenta con un numero limitado de colores para mostrar.

sábado, 26 de noviembre de 2011

Sesion: 11: Interconectividad en redes sociales y nuestro blog 2 microblogging

Microblogging
Esta variante de la publicidad de bitacoras en linea se distingue  por ser la mas concisa y estar implementada para su rapida asimilacion en la forma de enunciados limitados por un numero predeterminado de caracteres, pero integrado en su mensaje todas herramientas basicas que conforman una bitacora electronica, como lason las respuestas, las re-publicaciones, los hipervinculos, las etiquetas y las busquedas por topico, periodicidad, autor, o region geografica.
El servicio de Microblogging mas popular es twitter.
Twitter 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 twitter (comparandolos con el trinar de una ave o tweets) puedan estar conformados por frases o una combinacion de enunciados con hipervinculos (vil) o una serie de marcadores precedidas 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:/twtter.com
b)Acceder a nuestro cliente de informacion de TWITTERFEED
c)Activar la cuenta de twitter integrandola al servicio que alimenta a facebook

Sesion 10: Interconectividad en redes sociales y nuestro blog 2 Microblogging

MICROBLOGGING

Esta variante de la publicación de bitácora en linea se distingue por ser la mas implementada para su rápida asimilación en la forma de enunciados limitados por su numero predeterminado de caracteres, pero integrando en su mensaje todos las herramientas básicas que conforman una bitácora electrónica, como loson las respuestas,la re-publicaciones, los hipervinculos, las etiquetas y las búsquedas por tópico, periodicidad, autor, o región geográfica.
El servicio de Microblogging mas popular es twitter.

Twitter es creado como una plataforma de comunicacion cuya particularida es la extension de sus mensajes: solo
140 caracteres incluyendo letras, numeros y espacios. Estos mensajes, o Twwitter (comparandolos con el trinar de una ave o tweets) puedan estar conformados por frases o una combinacion 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://twiter.com
b)  Acceder a nuestro cliente de informacion de TWITTERFEED
ç)  Activar la cuenta de twitter integrandola al servicio que alimenta a Facebook.