Submarino.com.br

TEKSblog

curso de java e muito mais!
Subscribe
← Previous Entries

Mash-up não é picolé !!!

June 13, 2008 By: Rogerio Cesar Palmieri Category: Web 2.0

Ao ouvir esta palavra pela primeira vez, achei que fosse o nome de um novo picolé lançado por uma dessas firmas de sorvete no mercado. Mas depois pensei, por que uma firma de sorvetes estaria fazendo em propaganda na área de informática???? realmente não tinha nada a ver. Mas oque é mash-up então???

Mash-up

Mash-up é mais uma das inovações da web 2.0. Muitas empresas de internet disponibilizam sites de seviços utilizados pelos internautas.Empresas como Google, Yahooo, Ebay, possuem estes tipos de serviço. O mash-up nada mais é do que um desenvolvidor de web se utilizar de um desses programas criados e desenvolver, atrvés da fucionalidade deste programa, uma nova expreriência ao usuário. Não entendeu. utilizando de uma linguagem simples, seria como colocar uma tolalha sobre uma mesa para uma festa. Você muda a “cara da mesa” de acordo com a que você esta querendo. Como criar uma mascara para um determinado programa mas acrescentando alguma coisa que seja relevante para o usuário.

O mash-up deve conter 3 componetes:

- um site provedor do serviço a ser “mashupeado”;

- um site que hospede a aplixcação mash-up;

- o navegador na maquina do usuário.

O mash-up tambem pode ser fornecido, atavés de técnicas de programação( java ) diretamente para o computador do usuário.

São exemplos de mash-up os sites:

ChicagoCrime que se utiliza do Google Maps para demonstrar a criminalidade da cidade de Chicago;

an thems on map também se utiliza do Google Maps e YooTube para disponibilizar os hinos nacionais dos paises;

twittervision , http://googlemapsmania.blogspot.com , http://www.webmashup.com/

possuem varios exemplos de mash-up.

Para finalizar vou diponibilizar um vedeio que explica muito bem o queé mash-up. o video é de David Berlind, editor executivo da revista ZDnet. O unico problema é que o video está em inglês ( se voc~e não sabe inglês ta na hora de aprender). mesmo que você não entenda vale a pena ver o que apronta no quadro.

Espero que tenham gostado !!

Obrigado!!

Refêrencias;

Video acima.

http://www.ibm.com/developerworks/blogs/page/ctaurion?tag=Mashup

http://www.masternewmedia.org/pt/gestao_de_informacao_e_visualizacao_de_dados/agregar-conteudos/mashups/o-que-e-um-mashup-tipos-de-mashups-tecnologias-de-suporte-a-mashups.htm

http://pt.wikipedia.org/wiki/Mashup

Tags: ,

No Comments →

CSS – propriedade Background

June 09, 2008 By: Rogerio Cesar Palmieri Category: CSS, Web 2.0, programação

Vamos estudar hoje a propriedade background do CSS. Abra um documento no bloco de notas do windows, ou um editor de textos simples ( não use o word pois li em alguns sites que não funciona) e salve seu documento como estilo.css. Este documento é o nossa folha de estilo que vamos inserir as formatações para nossa pagina Html como vimos na ultima aula.

A propriedade background define a cor de fundo de um elemento, uma imagem para fundo e ainda se essa imagem será ou não repetida horizontalmente ou verticalmente.

Para linkar sua página HTML na página CSS basta digitar o seguinte código no cabeçário (Head) da página HTML:

<html>
<head>
<title>Meu documento</title>
<link rel=”stylesheet” type=”text/css” href = ” style / estilo. css” />
</head>
<body>

Background-color

A cor de fundo em uma página é definida pela seguinte sitaxe:

background-color:propriedade

onde propriedade é igual a :

#FFFFFF Código hexadecimal da cor
rgb(255,235,0) Código rgb
Red , blue, green Nome da cor
Transparent Tranparente

È mais comum se utilizar o código hexadecimal das cores A tabela de cores em hexadecimal você pode ver neste site. Ao colocar na página basta digitar o código:

body {

background-color:#6AAD6A

}

e executar a página em html que a cor de fundo entrará automáticamente.

Background-image

Se você quiser por uma imagem de fundo a sintaxe é :

background-image: url (“caminho da imagem”);

Como no exemplo abaixo:

body {
background-image: url(“/images/tecs2.png”)
}

Background-repeat

Usa-se para repetir ou não a imagem na tela de fundo. A sintaxe é :

background-repeat: propriedade;

onde propriedade é igual a :

repeat repete a imagem por toda tela de fundo
repeat-y repete a imagem verticalmente
repeat-x repete a imagem horizontalmente
no-repeat não repete a imagem

Exemplo:

body {
background-image: url(“/images/tecs2.png”);
background-repeat: repeat-x;
}

Background-attachment

A propriedade background-attachment faz com que a imagem fique fixa na tela ou acompanhe a página conforme a barra de rolagem do navegador é utilizada.A sintaxe é:

background-attachment: propriedade;

onde a propriedade é igual:

fixed fixa a imagem na página
a imagem acompanha a barra de rolagem

Exemplo:

body{
background-image:url”/images/tecs2.png”);background-repeat: no-repeat;

background-attachment: fixed;

}

Background-position

A propriedade position da função background faz com que posicionemos esta imagem de fundo na página.Sua sintaxe é : background-position: propriedade onde propriedade é igual :

x-pos y-pos coordenadas da posição
x-% y-% coordenada da posição na tela em porcentagem
top left imagem fica no topo a esquerda
top right a imagem fica no topo a direita
top center a imagem fica no topo no centro da página
center left a imagem fica no meio da página a esquerda
center center a imagem fica no meio da página no centro
center right a imagem fica no meio da página a direita
bottom left a imagem fica na esquerda no botton
botton center a imagem fica no centro no botton
botton right a imagen fica na direita no botton

Exemplo;

body {

background-image: url(“/images/tecs2.png”);

background-repeat: no-repeat;

background-position: 200px 70px;

}


Utilizar todas a propriedades em uma única declaração.

Para se utilizar todas as propriedades deve se seguir a seguinte sitaxe:

background: color image repeat attachment position;

em qualquer ordem podendo omitir uma ou mais propriedades. Veja o exemplo:

body {background: #00FF00 url(“tecs2.png”)

no-repeat fixed 200px 70px;

}

Com o tempo vamos explorar mais a propriedade background. Pratique estas propriedades para se ambientar bem com elas pois são muito úteis.

Espero que tenham gostado !

Obrigado !

Refêrencias:

http://www.w3schools.com/css/

http://www.maujor.com/tutorial/backtut.php

http://www.pt-br.html.net/tutorials/css/lesson3.asp

Tags: , , ,

No Comments →

« Previous Entries

Monetizado com WP-HOTWords.