CSS

Css significa cascading style sheets (hojas estilo de cascada) es la herramienta por la cual se modifica el estilo, el color y el diseño del HTML o XML es decir del documento que contiene la web. La ayuda que ofrece el css al html es reducir código y no “ensuciar” de manera incomoda en si el código html si no crear un archivo css aparte donde se realizara la parte de diseño. 

Un archivo css conjuga los estilos que definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo.

El css funciona con reglas las cuales regulan el estilo del documento, estas se dividen en dos partes: selector y declaración.

Ejemplo:

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

En donde el selector hace como el enlace entre el documento y el estilo que se va asignar, enfocando así a elementos que se veran afectados por la declaracion que se hace.

Imagen

Existen tambien diferentes formas de usar el css una se llama  estilo en línea (online) es donde se coloca directamente el lenguaje del estilo dentro de una etiqueta html no tiene una manera estructural, ni organizada pero funciona, el segundo es una hoja de estilo interna es una hoja de estilo la cual esta definida por la etiqueta <style> que esta incrustada en el documento html, dentro de otra etiqueta llamada <head> separando propiamente la información del estilo, teniendo asi una organizacion en el documento, y la ultima manera es en una hoja de estilo externa es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML.

Tutoriales

http://librosweb.es/css/capitulo_15/ejercicio_2.html

http://librosweb.es/css/capitulo_16/solucion_ejercicio_7.html

Ejemplo:

/* Todos los elementos de la pagina */
* { font: 1em/1.3 Arial, Helvetica, sans-serif; }

/* Todos los párrafos de la pagina */
p { color: #555; }

/* Solo los párrafos contenidos en #primero */
#primero p { color: #336699; }

/* Todos los enlaces la pagina */
a { color: #CC3300; }

/* Los elementos em contenidos en #primero */
#primero em { background: #FFFFCC; padding: .1em; }

/* Todos los elementos em de tipo especial en toda la pagina */
em.especial { background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }

/* Elementos span contenidos en .normal */
.normal span { font-weight: bold; }

Anuncios

HTML

HTML significa Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es el lenguaje abstracto que aplicaciones pueden usar para representar documentos, con el cual tambien se  definen las paginas web.El HTML se creo con el objetivo de divulgar informacion con pocas imagenes, a medida que fue evolucionando su tema paso a ser mas dinamico y mas popular; este lenguaje es definido por conjuntos de etiquetas que sirven para incluir texto y otros elementos multimedia que se necesite colocar, las etiquetas son definidas entre los símbolos < y >, de la siguiente forma: <etiqueta>, estas  también pueden tener atributos, que sirven para indicar características específicas, y que se representan de la siguiente forma: <etiqueta atributo=”valor del atributo”>.

HTML no presenta ningún compilador, es decir que cualquier error de sintaxis que se presente este no lo detectara y se visualizara en la forma como este lo entienda.El HTMl permite que algunos códigos llamados scripts, los cuales  brindan instrucciones específicas a los navegadores que se encargan de procesar el lenguaje. Entre los scripts que pueden agregarse, los más conocidos y utilizados son JavaScript y PHP.

Estructura del HTML

El HTML se organiza colocando en la parte superio la palabra <HTML>, luego le sigue La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>) y por ultimo el cuerpo (body)que es lo mas importante en el documento, aquí es donde debemos colocar el contenido de nuestra página: texto, fotos, etc.El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> tiene algunos atributos como:

BGCOLOR : este parámetro usado para especificar el color de fondo de la página. El color se define como un conjunto de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul. También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.

TEXT: este parametro es usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.

LINK: este parametro demuestra el color de los links. Por defecto será azul.

VLINK: color de los links visitados. Por defecto será violeta.

El formato es el mismo que BGCOLOR.

BACKGROUND: este  parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento.

Ejemplo de estructura basica:

<HTML>

<HEAD>
<TITLE>Título de la página</TITLE>

</HEAD>

<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>

Ejemplo de HTML:

<HTML>

<HEAD>

<TITLE>Un Titulo para el Browser de turno </TITLE>

</HEAD>

<BODY>

<!– Aqui va todo lo chachi –>

<H1>Otro t&iacute;tulo, esta vez m&aacute;s largo. </H1>

<P> <IMG SRC= “./felix.gif “ALIGN= “MIDDLE ” ALT= “EL Gato Felix “>Hoola.

<P>Esto es un parrafo con informacion

super importante. Notese que las lineas salen pegadas aun dejando

espacios, saltos de linea, etc. <BR> &#161 Si pongo esto

si <STRONG>cambia </STRONG> de linea!

<P>Otro parrafo, esto ya es un poco rollo.

<H3>Pongamos un subtítulo<H3>

<P>Por cierto, &#191 que paso con las <A HREF= “#pepe “>anclas</A>?

<HR>

<UL>

<LI> Esto es una lista no ordenada.

<LI> Las listas quedan mejor si tienen varios elementos.

</UL>

Me voy al <A HREF= “http://www.iac.es/home.html “>IAC</A>.

<P>Vamos a crear un <EM>ancla </EM>, o lo que es lo mismo, un <A NAME=”pepe”>anchor.</A>

se vería así http://www.iac.es/galeria/westend/ejemplo.html

Tutoriales

http://es.html.net/tutorials/html/

Trabajo quiz.

Motor de búsqueda

 

Los motores de búsqueda son llamados también buscadores se basan en ayudar al usuario cuando se enfrenta a una pagina web en la cual por medio de palabras claves definen unos criterios de búsqueda.

 Al crearse el motor de búsqueda se debe acomodar a las necesidades del usuario, cuando este ingresa una palabra estos buscadores consultan su base de datos y presentan resultados clasificados por su relevancia. En las webs, los buscadores pueden almacenar desde la página de entrada, a todas las páginas que residan en el servidor; pero existen también casos fallidos o no salen resultados en este caso debe ampliar y especificar mejor los criterios de búsqueda y así conseguir los mejores resultados.

 Navegación y etiquetado

 Una pagina de navegación es la cual posee información general total del contenido, en donde el destino es la pagina de búsqueda que tiene información mas especifica de un tema.

 La etiquetas en un sitio web ayudan a organizar elementos por medio de iconos, palabras que relacionen al usuario con lo que se quiere decir.

Puede suceder que las etiquetas poco pensadas o poco profesionales pueden confundir y destruir la confianza o credibilidad en una compañía.

 Todas estas tienen que tener relación, que tengan consistencia para que el usuario se familiarice por medio de metáforas, con iconos o con palabras mas cercanas al usuario.

Existen tipos de sistemas de etiquetado los cuales son:

Icónico: por medio de iconos.

Textual: por  medio de texto

Labels

Los Labels pueden trabajar de maneras diferentes, existen dos tipos ya que se usan para mejorar la posibilidad de que un documento sea encontrado por un motor de búsqueda y para mejorar la navegación las cuales usan palabras claves visibles que el usuario utiliza.

Labels en el encabezado

 Llaman la atención del usuario ya que deben tener una idea general requiriendo consistencia en terminología y en granularidad.

User flow

El diseño de la interacción es el flujo real el cual los usuarios siguen para completar tareas básicas que la pagina puede ofrecer como es inscribirse en un boletín, navegar por una compra o el proceso de la compra;los diseñadores de interacción para facilitar y plasmar las ideas al crear la mejor manera de navegación de su pagina crean diagramas de flujo de usuario, los cuales se basan en mirar los posibles caminos que los usuarios pueden tomar para hacer su verdadero camino a la tarea deseada.

En las paginas web convencionales encontramos acciones y tareas que los usuarios básicamente realizan a diario, pero lo que se diferencia una de la otra es la manera como estas tareas se le muestran al usuario para que sea mas clara y no permita errores de uso.Unas de las tareas que básicamente se encuentras son: iniciar sesiónopción de búsqueda y volver a la pagina de inicial, en estas tareas ya existen diagramas que explican como el usuario las puede realizar de manera rapida, como es la barra de búsqueda, normalmente y en la mayoria de paginas web esta se ubica en la parte superior derecha, en la tarea de volver a la pagina de inicio actualmente se esta usando en los paises occidentales que el logo sea un enlace a la pagina inicial o que haya en la parte inferior de este un texto que diga Inicio.

La pregunta mas grande y mas retadora que los diseñadores de web tienen que hacerse es ¿dar prioridad a los flujos del usuario o solo importa como se ve?.. la respuesta a esta pregunta debería ser equitativa la que la consistencia de color, de gráficos y de identidad toda pagina lo debe tener, pero los diagramas de flujo son demasiado útil para que la pagina sirva de manera que de que aumente los rendimientos de la página web y facilite su utilización, deben entender el punto inicial desde donde el usuario inicia y donde su debe terminar. Son estos dos puntos entre los que el diseñador web tendrá que preparar su propio espacio que le dará la comodidad necesaria para el usuario.

Imagen

Imagen

Top

5 mejores

1)www.sandwichqbano.com

2) http://shop.mango.com/preHome.faces

3)http://www.colombina.com

4)http://www.disneylatino.com

5)http://dp.la

5 peores

1)proexport.com.co

2)http://ice.la14.com/ice/

3)http://www.canalrcnmsn.com

4)http://www.cali.gov.co/turista/#

5)http://www.starbucks.com/coffee

Entregas.

Diseño    Infografico     Nombre Autor            Comentario

60%         80%             Valentina Hoyos         Su orden se entiende, en algunas tipografías no se leían bien y algunos iconos no contrastaban muy bien.Buen uso de recursos infograficos.

95%          95%           Kamil Carranza           Buen uso del diseño, colores y texturas , se entiende muy bien el concepto, muy ordenada.

70%          80%           Alejandro Dominguez    Buena composición, pero en algunos gráficos le falto mas creatividad, y en algunos textos no se entendían muy bien.

90%          85%        Jose carvajal                 Buen uso de colores, se entiende el concepto, uso bien recursos infograficos solo en algunos textos los podría cambiar por algún recurso infografico 

85%          90%       Lili suarez                       Esta bien la composición, muy ordenada en algunos gráficos no se entendían sus recursos infográficos.

85%          90%       Mario Otalvaro          Esta bien la composición, pero en algunas partes la tipografía no ayuda es muy pequeña y necesita un poca mas de fuerza.En el recurso infográficos del circulo no lo entendí, era mucho texto.

60%         70%      Juan Felipe Chaparro      Gráficas sencillas, falta profudizar mas en gráficos, pocos recursos infográficos.

60%        70%      Luisa motta               Gráficas sencillas, falta profudizar mas en gráficos, pocos recursos infográficos.

100%       95%       Karol Giraldo         Muy buenas gráficas, se entiende lo que quiere expresar en el tema, buena elección de recursos infográficos.

100%      95%       Camilo Castro        Muy buenas gráficas, se entiende lo que quiere expresar en el tema, buena elección de recursos infográficos.

100%      90%       Daniela Delgado      Muy buena composición, se entiende el concepto, excelente uso de recurso infografico..En algunos textos falta quitarle peso.

75%        75%         Sebastian villamizar         Tiene buen orden pero falta un poco mas de diseño mas color y profundizar en la tipografía, no encontré mucho enfoque en el recurso infografico.

90%      90%          Felipe Ojeda                 Buen uso de color, buen orden y buen contraste.Gracias a los recursos infográficos se entiende muy bien.

90%      80%          Margalida Vivas          Buen uso de colores, buen orden, pero en el recurso infografico falto profundizar mucho mas, había mucho texto .

85%      85%         Maria Alejandra          Buen uso del diseño, buenas texturas.Falto un poco mas en la tipografía.

90%      80%        Diana                               Muy bien el diseño, buena explicación.Algunas gráficas estaban demasiado oscuras y no se entendían muy bien .

90%       95%       Julian                           Muy buena organización, se entiende muy bien el concepto.

 

Arquitecto de la información.

Un arquitecto de la información es la persona la cual organiza, distribuye organizando de manera necesaria los objetivos,  y estrategias las cuales le ayudaran al usuario para entender el sito web que ha sido creado.

Las estrategias las cuales todo arquitecto debe tener presente seria, tener claro el concepto el cual se quiere mostrar,tener una planificación de la experiencia del usuario frente a un sitio Web,envolviendo así investigación, análisis, diseño e implementación.

Las principales y primordiales serian:

· Aclarar la misión y la visión del sitio, centrándose en las necesidades de sus audiencias.

· Generar estructuras que soporten el cambio y el crecimiento en el tiempo.

· Determinar qué contenidos y funcionalidades deberá contener el sitio.

· Poner nombres entendibles a las áreas de Información.

· Crear sistemas de navegación intuitivos.

Para los constructores de la pagina de quienes la utilizan para la construcción de sitios web, podremos agregar que la Arquitectura de Información es el conjunto de prácticas que entendiendo el objetivo de un sitio web, organiza el contenido en subconjuntos de nombres comprensibles para el usuario final, facilitando las operaciones de búsqueda y uso de la Información que contienen.

Gracias a la A.I. existen grandes modelos en la Web como los buscadores, donde se oculta el trabajo de verdaderos estrategas profesionales capaces de comprender y adelantarse a los movimientos del usuario, a sus caprichos y errores: son los arquitectos de la información.

Un arquitecto de la información es, ante todo, una persona que resuelve problemas.

Articulos.

Comida rápida y obesidad

La Universidad de Tufts realizó un estudio en 42 restaurantes, tanto de comida rápida como de menú del día. La intención era comparar el contenido calórico de los alimentos con el que constataba en el menú del establecimiento, y el resultado fue que el 40% de los alimentos contenían 10 kcal más por porción que las que se indicaban en el envase o menú, y un 19% ofrecía al menos unas 100 kcal más por porción, un 52% tenía al menos 10 kcal menos de las indicadas en el envase o menú.

Evidentemente, la comida rápida no es la más saludable del mundo. Estados Unidos, el país donde el éxito de la comida rápida es más evidente, tienealrededor de 105 millones de obesos, un 34,4% de la población. La preocupación es tal que la Agencia Estadounidense de Medicamentos y Productos Alimentarios exige a través de una normativa aprobada por la Administración Obama el cumplimiento de las normas de etiquetado nutricional.

http://www.unitedexplanations.org/2011/10/04/el-consumo-de-comida-rapida-en-el-mundo/

Bocetos:

ImagenImagen

 

 

 

 

 

He leído numerosos escritos liberales que analizan el asunto de la liberalización de las drogas. Todos ellos llegan a una misma y válida conclusión: “No corresponde criminalizar lo que no constituye un crimen. No debe confundirse un vicio por el que una persona se daña a si misma o a su propiedad con una lesión al derecho de terceros, a través de lo cual se daña a otras personas o a sus propiedades”.

Sintéticamente, legalizar las drogas traería enormes beneficios: 1) Terminaría con el negocio del narcotráfico al traer a la superficie el mercado negro existente; 2) reduciría dramáticamente el precio de las drogas, al acabar con los costos de producción e intermediación que implica la prohibición, lo cual significaría que mucha gente que posee adicción a estas sustancias no tendría que robar o prostituirse con el fin de costear el actual precio inflado de dichas sustancias; 3) lograría que la fabricación de dichas sustancias se encuentre dentro del alcance de las regulaciones propias de un mercado legal (esto es significativo considerando que “el 80% de las muertes relacionadas con drogas se deben a la falta de acceso a dosis estandarizadas“); 4) acabaría también con la alianza del narcotráfico y el poder político, reduciendo la corrupción; 5) minoraría el gasto público, al no tener los gobiernos que continuar su lucha contra las drogas.

http://adrianravier.wordpress.com/2010/05/20/la-liberalizacion-de-las-drogas-y-los-menores-de-edad/

ImagenImagen