viernes, 27 de noviembre de 2009

    Empezar a Usar CSS - Segunda Parte


    En un post anterior “Empezar a Usar CSS” iniciamos una serie de consejos para quienes se inician en el mundo de las hojas de estilos CSS. Como pudimos ver, la aplicación de CSS se basa en un selector y su declaración. El selector es el identificador del elemento HTML o XML (en este articulo obviaremos XML) al cual le aplicaremos estilos y su declaración es el valor o conjunto de valores para dicho selector, decimos el valor o conjunto de valores porque se pueden aplicar tantos como sean necesarios. Ej.:

    Elemento HTML al que queremos aplicar estilos =  Parrafo (ver la diferencia entre HTML y CSS)

    Tag HTML=
    <P>
    

    
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
    
    


    Estilo = Font Arial, color gris oscuro, alineación justificada, margen superior de 10px, margen inferior 10px, margen izquierdo 30px y color de fondo amarillo claro.

    Bien, aquí tenemos todo lo que deseamos hacer con un párrafo de nuestra página web. Veamos como lo aplicamos en CSS:
    
    <style type="text/css">
    <!--
    p {font-size: 12px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:justify; margin-top:10px; margin-bottom:10px; margin-left:30px; background-color:#FFFFCC}
    -->
    </style>
    

    Este será el resultado:


    En otras palabras, la hoja de estilos le esta diciendo a la pagina HTML:
    Donde quiera que encuentres un TAG HTML de parrafo, aplícale lo siguiente:
    Font size: 12 px
    Tipo de Font: Arial, si el usuario no tiene instalado Arial, usa Helvetica si no usa sans-serif
    Color del Font: Gris #333333
    Justificación del Texto: Justificado
    Márgenes: 10px desde arriba, 10px desde abajo y 30 px desde la izquierda
    Color de Fondo: Amarillo #FFFFCC

    Tipos de Selectores
    Es muy importante saber que existen tres tipos de selectores que se utilizan dependiendo el alcance de lo que queremos estilizar:

    SELECTOR CLASS o clase: Puede ser aplicado a cualquier TAG HTML
    SELECTOR TAG: Redefine el estilo o look de un TAG HTML
    SELECTOR ADVANCED o avanzado: Se utiliza para elementos HTML que poseen un ID o están identificados

    Si usamos en una hoja de estilos un selector TAG significa que será aplicado dicho estilos a todos los elementos HTML que estén contenidos en ese TAG. Ej.:
    -En el ejemplo que hemos descrito arriba la hoja de estilos se aplicara a todos los párrafos de la pagina.

    De aquí la importancia de conocer los tipos de selectores que usaremos.

    En un próximo post vamos a ver en detalle cada uno de los Tipos de Selectores e ilustraremos un ejemplo para mejor entendimiento.

    Hasta la próxima.

    martes, 24 de noviembre de 2009

    El concepto de site Persona en el proceso de diseño


    Las personas no funcionamos como las computadoras. Somos ante todo, entes sociables: nuestros cerebros se adaptan al medio social. Mientras las computadoras son muy buenas haciendo cálculos basados en reglas estrictas y números complejos los humanos somos muy buenos discerniendo basados en el significado de las cosas y hasta mediante al uso de reglas simples, a veces incluso partiendo de información incompleta. Esto difiere entre otras cosas a la inteligencia humana de la artificial.


    Para sobrevivir, nuestra especie ha aprendido a comunicarse de forma efectiva usando un lenguaje verbal o visual. Hemos también aprendido a interpretar algunas “pistas” provenientes del medio que nos rodea y que nos permiten pensar con intuición, por ejemplo ser cautos o evitar el peligro.

    Hablamos de intuición, de inteligencia, de discernir, del lenguaje visual y verbal o de varios aspectos emocionales o sicológicos del ser humano ya que cada uno guarda relación con el diseño de interface.

    Una forma muy eficaz de trabajar en el diseño de interface de nuestros proyectos web o multimedia es diseñar pensando en que la información fluya a través del “dialogo” entre el contenido y el usuario. Con relación a esta técnica existe también el concepto de Site Personas en el que este proceso de dialogo fluye como si nuestro sitio fuera una persona que interactúa o se comunica con el usuario, de esta forma le daríamos a nuestro sitio un nombre, una edad y lo dotaríamos de una personalidad ficticia frente al usuario con el objetivo de conseguir una mejor experiencia de interacción.

    Site Personas es una forma de dotar de personalidad nuestro sitio, esto nos ayudara a visualizar cómo debería responder a los input de los usuarios, qué tono usaremos, qué voz, cuánta asistencia usaremos y cuándo la usaremos.

    Entonces llega la pregunta: Quien seria nuestro site persona?
    Con esta pregunta enfocaríamos a que personalidad le impregnaríamos a nuestro sitio dependiendo de los objetivos:
    -Un entrenador
    -Un asistente personal
    -Un soporte técnico
    -Un profesor
    -Nuestro mejor amigo

    Es importante a tener en cuenta es que la personalidad que elijamos sea representativa de la(s) característica(s) de nuestra marca o de los productos y servicios.

    Veamos un ejemplo:



    Una vez empieces a ver tu sitio web como una persona debes comenzar a hacerte diferentes preguntas como cuál es la personalidad del sitio?, cuál es el tono?, cuál diseño reflejará mejor esa personalidad?, cómo puede el contenido reflejar esta personalidad?.

    Todo dialogo refleja una personalidad detrás. Si el dialogo es coherente y llevado de una forma consistente la personalidad del sitio será percibida como fuerte y mas confiable. Claro que este dialogo no usará solo “palabras”, se comunicará con el usuario mediante el lenguaje del diseño web (colores, tipografías, layout, etc).

    Diseñar un sitio web utilizando este concepto puede realmente ayudarnos a desarrollar las ideas de forma mas fácil, además, nos obliga a pensar en el contenido haciendo que el mismo siga esta personalidad que hemos creado.
     

    Sobre COMUDO

    COMUDO es una comunidad que pretende agrupar a los actores principales de la industria web y multimedia en la República Dominicana con el objetivo aportar y compartir conocimientos, opiniones, y recursos de manera que resulten en un aporte al desarrollo de nuestro oficio y que por consecuencia estas se puedan traducir en mejoras.

    Participa!

    Para participar en esta comunidad solo contáctanos a través de nuestro formulario de contacto o envíanos un correo electrónico a comudoblog@gmail.com con el Subject “Participar en COMUDO” e inmediatamente te enviaremos tu usuario y contraseña para empezar a escribir tus Post. Siéntete libre de expresarte en COMUDO.

    Contáctenos

    .

    Comunidad Multimedia Dominicana Comunidad Multimedia Dominicana Copyright © 2010 Community is Designed by Bie