Entretanto, a configuração do botão do Facebook deve ser feita corretamente para que a recomendação apareça de uma forma clara e bonita no site do Facebook. Se não, de que adianta o usuário clicar em um botão de recomendar uma camiseta se no Facebook aparece uma foto de uma caneta com laser?

Um pouco de teoria

Quando o usuário clica no botão de recomendar a página, o Facebook irá adicionar uma entrada no mural do usuário exibindo uma imagem (caso ele encontre), o título da página e uma descrição.

A implementação é simples e feita através de meta-tags que nesse contexto chamamos de propriedades. Algumas delas são requeridas, outras opcionais, recomendadas e específicas para vídeos, áudios e games. Veja um exemplo:

<!--start Facebook Open Graph Protocol-->
<meta property="og:site_name" content="Nome do seu site" />
<meta property="og:title" content="Título da página." />
<meta property="og:url" content="http://seusite.com/url-da-pagina/"/>
<meta property="og:image" content="http://seusite.com/url-da-pagina/imagem-da-pagina.gif"/>
<meta property="og:description" content="Uma sinopse do que o usuário irá encontrar acessando a URL."/>
<!--end Facebook Open Graph Protocol-->

o exemplo acima, ilustro o uso das quatro propriedades requeridas: og:title, og:type, og:url e og:image. Duas opcionais: og:site_name e og:description. Além de outras três proprietárias do Facebook: fb:admins, fb:app_id e fb:page_id.

O código do Facebook

O código para adicionar o botão de curtir / recomendar do Facebook é muito simples. Basta alterar as informações do seu site no código abaixo:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/pt_BR/all.js#xfbml=1"></script>
<fb:like href="http://www.seusite.com/url-da-pagina/" send="true" layout="button_count" width="450" show_faces="false" font="arial"></fb:like>

Aproveite e acesse a Fan Page da Webtopia no Facebook

O código é muito simples:

#box {
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
}

Segundo o autor do artigo acima, as propriedades devem funcionar com a versão 7 do Internet Explorer, mas como sempre eu recomendo a você realizar os testes.

Veja o demo está aqui .

Fonte: gabrieleromanato

Estávamos atados ao html puro, no máximo, com direito a algumas firulas, tais como gifs animados vertiginosamente bizarros e outras coisas pouco úteis (comparando com o cenário atual). Novas tecnologias surgiam, muitas delas sem um problema para resolver, ou sem um campo real para aplicação prática, o que ocasionou mortes antes mesmo da concepção. Outras justificaram sua existência e garantiram alguma posição na seleção natural.

Vários conceitos e ideologias ganharam lugar – RIA, WYSIWYG, orientação a objetos, enfim. Vimos-nos com os pés na areia. Ondas de novas possibilidades e inovações chegando minuto a minuto, vindas de um mar infinito. Claro, muitos benefícios. Contudo, perceba as incompatibilidades entre tecnologias, a dificuldade em acompanhar, ao menos de longe, o turbilhão de conhecimento a ser digerido para que se possa usufruir de, ainda, uma pequenina porcentagem desse mundo de maravilhas. É justamente aí que se torna engraçado (ha-ha)!

Saímos do ponto de partida descalços, precariamente vestidos e fazendo completo uso de tudo que estava ao alcance, para sobreviver. Em poucos anos, foi posta à disposição uma infinidade de roupas e calçados! Tênis concebidos nas raízes da física quântica, vestimentas tão modernas que levam pelo menos duas estações do ano para serem compreendidas e, quando finalmente conseguimos vesti-la em um dos braços, ela já não se adequa aos padrões da sociedade e deve ser descartada!

Percebe a espiral? O que faz com que a linha tome esta trajetória é a forma mal organizada como as coisas acontecem. Há 15 anos, os browsers não suportavam certos websites. Hoje, as aplicações devem oferecer compatibilidade a “n” browsers diferentes, moldados segundo pontos de vista contraditórios. É neste paradoxo que milhares de pessoas gastam suas energias tentando encontrar soluções, e com o qual outras milhares sequer se preocupam (público-alvo deste apelo ).

Aos navegantes de primeira viagem, e aos lobos-dos-mares: ponham-se em direção aos padrões de desenvolvimento! Exageros à parte, padrões são legais. Garantem que seja lá o que você tenha desenvolvido apresente compatibilidade mínima para navegação com os principais browsers do mercado. Além de dar credibilidade à sua obra, e colocá-lo em vantagem em relação a concorrentes que ainda não fazem uso dos padrões da Web.

Fique atento!

Estar nos conformes da criação de Sites e Aplicações Web deixou de ser uma opção dispendiosa há algum tempo. Trata-se de uma necessidade para sobrevivência. Termos como navegabilidade, usabilidade, tableless, css, Javascript não-obtrusivo etc, devem fazer parte do vocabulário de qualquer um que arrisque autodenominar-se desenvolvedor.

Utilidade pública:

• Site da W3C (Brasil)

• As 7 regras do Javascript não-obtrusivo (Em inglês)

Uma dúvida que muitas vezes aparece na hora em que inicia-se um novo projeto é qual a melhor largura usar para que o site não tenha aquela indesejável rolagem horizontal. Esta pergunta é claro tem ligação direta com o público-alvo do site e a sua resolução de tela mais comum: geralmente 800×600 ou 1024×768.

Outra questão à respeito de rolagem que não aparece com tanta frequência, mas que pode ser tão relevante quanto a largura do layout, é a sua ‘altura’, ou mais precisamente o posicionamento de elementos importantes acima da área de ‘corte’ da tela do browser, aqueles que ficarão visíveis logo no início da página sem que seja necessário que o usuário ‘role’ o conteúdo. É essencial ter em mente que esta área é a responsável por causar a primeira impressão no usuário com relação ao site, quando trata-se ainda da primeira visita desse usuário a importância do que está ali é ainda maior. É comprovado que conteúdos otimizados visando esse fato tem taxas de convesão até 40% mais altas e melhores taxas de pageviews/visita.

Então segue aqui uma tabela que eu costumo usar na hora de decidir estes dois fatores, largura e altura:

Alguns bons links onde procurar mais informações sobre o assunto:
Jakob Nielsen – Screen Resolution and Page Layout
Screen Resolutions and Better User Experience – Smashing Magazine
Methodologie Browser Size Test

Fonte: Top rated

Para testes, aconselho utilizar um banco de dados separado e um diretório diferente. Lembre-se que é uma versão BETA, ou seja, ainda não está oficialmente terminada, então, use-a com cautela.

Esta nova versão traz uma série de novas opções, nomeadamente artigos customizados, uma nova theme default, e ainda um novo gestor de menus.

Veja todos os detalhes da nova versão:

1. ESCOLHA O SEU USERNAME E PASSWORD

A instalação do novo WordPress 3.0 inclui novidades interessantes. Actualmente, quando você instala o WordPress na raiz do seu servidor, você recebe automaticamente um username admin, e uma password gerada aleatoriamente. Isso deixará de acontecer – de agora em diante, o WordPress permite-lhe escolher o seu username e password no momento da sua instalação. Isto significa maior segurança desde o primeiro minuto. Antigamente todos os potenciais hackers sabiam que o username por defeito era “Admin”, sendo que nesta nova versão do WP3.0 esse dado passa a ser totalmente desconhecido.

2. NOVO THEME DEFAULT

O novo WordPress 3.0 oferece também um novo theme por defeito, intitulado TwentyTen (2010). Aparentemente, a equipa por detrás do WordPress tem como objectivo lançar um novo theme por defeito a cada ano que passa! O novo TwentyTen é um tema simples e bastante atractivo. O tipo de letra utilizado é Georgia; oferece duas colunas, uma barra lateral e rodapé com suporte a widgets – e integra ainda menus dropdown muito atractivos! Pode ainda contar com uma alteração simplificada do cabeçalho e background, tal como acontecia com a versão actual do WordPress.

3. SUPORTE A BACKGROUNDS CUSTOMIZÁVEIS

O novo WordPress 3.0 adiciona também o novo suporte a backgrounds customizáveis. Basta adicionar o seguinte código no seu ficheiro functions.php para que o seu template passe a suportar também esta nova opção:

add_custom_background();

Adicionando essa opção no seu código, você será brindado com um novo menu Background no seu separador Aparência, que se encontra no painel administrativo. Embora esta nova opção não seja propriamente o inventar da roda para todos os desenvolvedores web que já programam esta opção nos seus templates, ela poderá ser uma mais-valia para todos os novatos em WordPress.

4. CAPACIDADE PARA MULTI-SITE E FUSÃO COM WPMU

O WordPress e o WPMU (WordPress MultiUser) irão fundir o seu código. Isto torna muito mais fácil a gestão de grandes redes de projectos em WordPress. As novas opções para gestão Multi-Site passam a encontrar-se no menu Opções>Rede.

Uma rede de sites em WordPress passa a ser muito mais fácil e simples de gerir – mesmo para quem utiliza estruturas baseadas em subdomínios do tipo subdomínio.domínio.com, ou mesmo para quem utiliza sub-directorias do tipo domínio.com/subdirectoria. Esta opção de carácter opcional, e os utilizadores tanto do WordPress como do WPMU não deverão sentir dificuldades em realizar a actualização.

5. NOVOS TIPOS DE ARTIGOS

Esta é também uma das grandes novidades do WP3.0! Antigamente, a única coisa que você poderia adicionar ao seu blog a partir do seu painel de administração eram novas páginas e novos artigos. Agora, você pode criar novos tipos de artigos para aparecerem no seu painel. Adicione o seguinte código para criar um novo tipo de artigos ‘Portfolio’:

function post_type_portfolio() {
register_post_type( ‘Portfolio’,
array( ‘label’ => __(‘Portfolio’), ‘public’ => true, ’show_ui’ => true ) );
register_taxonomy_for_object_type(‘post_tag’, ‘Portfolio’);
}

add_action(‘init’, ‘post_type_portfolio’);

Isto significa que aos poucos o WordPress está a tornar-se algo mais do que um CMS. Esta nova opção abre possibilidade infinitas aos desenvolvedores, e faz também com que estes deixem de ter necessidade de utilizar os campos personalizados (custom fields).

6. TAXONOMIAS CUSTOMIZÁVEIS

As taxonomias customizáveis foram tornadas mais simples de utilizar, especialmente no que toca à hierarquia– isso significa que você poderá ter uma taxonomia ‘Votos’ com várias sub-taxonomias. Isto significa que o WordPress está a fugir cada vez mais de um CMS típico e dedicado aos blogs, promovendo novas capacidades, tornando-o num CMS mais flexível, dinâmico e capaz.

7. NOVO GESTOR DE MENUS

Esta é uma das grandes novidades do WordPress 3.0 – um gestor de menus. Este gestor foi originalmente criado pela WooThemes para os seus fantásticos wordpress themes, e mais tarde adaptado pela equipa do WordPress para a construção do seu novo painel de gestão de menus. Você pode criar rapidamente vários menus, categorias, e ainda links customizados para utilização interna ou externa! Do ponto de vista prático, esta novidade traz-nos um interface fantástico para criação de menus, ele facilita o trabalho de todos aqueles que desenvolvem para WordPress e torna a utilização do WordPress ainda mais simples para os utilizadores.

OUTRAS NOVIDADES A TER EM CONTA:

- Guia de boas-vindas: O novo WordPress 3.0 irá incluir um guia de boas-vindas para ajudar os novos utilizadores a compreenderem melhor o sistema e ensiná-los também o básico da utilização.
- Templates específicas para autores: Actualmente já existe hierarquia para categorias e tags no Template Hierarchy, mas agora é possível fazer o mesmo com os autores. Isto significa que, se o autor se chamasse ‘Paulo’ com um id 1, o WordPress iria procurar primeiro pelo ficheiro author-paulo.php, e depois pelo author-1.php antes do author.php nos ficheiros do template.
- Redesign do interface de Mídia: Iniciado, mas não integrado no WordPress 2.9, o novo separador Media no painel de administração irá sofrer um redesign muito interessante.

por Paulo Faustino – love wordpress

A forma mais correta de desenvolvermos páginas para Web é dividindo a estrutura em três camadas: conteúdo (HTML), comportamento (Javascript) e apresentação (CSS). Trabalhando o CSS em uma camada separada do restante da estrutura, conseguimos uma melhor consistência visual, uma vez que os layouts de todas as páginas estarão baseados em uma mesma folha de estilos. Também ganhamos tempo e facilidade na hora de fazer um redesign ou manutenções visuais, pois a alteração de um único arquivo terá impacto em todo o site. Com o CSS em um arquivo separado, também conseguimos fornecer maior acessibilidade ao criar folhas de estilo específicas para diferentes dispositivos como sintetizadores de fala e som, aparelhos e impressoras em Braille, celulares e outros dispositivos móveis etc. O carregamento das páginas também será mais rápido, já que após o primeiro acesso ao site, o arquivo CSS estará carregado em cache.

Um bom exemplo de como o CSS pode ser poderoso quando bem usado é o CSS Zen Garden. O site fornece um modelo de página HTML para download, e diversos designers criam folhas de estilos para essa mesma página. O resultado pode ser visto na galeria: alterando apenas a folha de estilo, diferentes layouts são aplicados na mesma página HTML.

CSS ainda deixa a desejar

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes familias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

O que nos trará o CSS3?

Propriedades de CSS3 já são suportadas pelas versões mais recentes de alguns navegadores, como o Safari 4 e o Firefox 3.6. Com isso podemos testar os novos recursos que estão por vir. Para que alguns dos novos recursos possam ser testados, é necessário adicionarmos os prefixos -moz- (para a renderização no Firefox) e -webkit- (para renderização no Safari).

A seguir, exemplos de algumas das novas propriedades que a nova versão da linguagem irá nos fornecer:
– border-radius: com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px.
– text-shadow: permite adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999.
– shadow: funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10px 0px #333.
– border-colors: podemos adicionar um efeito gradiente nas bordas de um elementos, aplicando cores em diferentes camadas: -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc.
- Opacity: podemos adicionar opacidade aos elementos: opacity: 0.2.
- Columns: podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em.
- Multiple backgrounds: podemos definir diferentes planos de fundo para um mesmo elemento: background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y.
– @font-face: podemos definir uma tipografia diferenciada para os textos da página através da importação de um arquivo de fonte: @font-face { font-family: Agni; src: url(‘agni-font.otf’) }. Em seguida aplicamos essa fonte a um elemento de texto: h3 { font-family: Agni, sans-serif }.

O CSS3 ainda não deve ser usado definitivamente em suas páginas. A nova versão da linguagem ainda se encontra em fase de rascunho na W3c, e a maioria dos navegadores não fornece suporte. Porém é essencial que possamos conhecer e testar os novos recursos, descobrir aos poucos o que vem por aí, e nos preparar para o momento em que o CSS3 será lançado como uma recomendação em definitivo.

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes familias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

Fonte: Imasters

Conheço variados serviços, vou tentar reunir alguns dos mais básicos, certamente o leitor conseguirá deixar a sua sugestão podendo aumentar o leque de oferta.

SNIPURL
Este serviço permite mascarar um endereço, tornando-o ao mesmo tempo mais curto, isto é imagine que tem um endereço muito longo, ao mandar por mail, ou mesmo quando quer referir esse link nalgum local por ser demasiado cumprido este torna-se pouco funcional e até pode dar azo a erros se não for devidamente escrito. Dentro destes serviço terá na sua conta os links originais e a respectiva equivalência.

TinyURL
Este serviço faz o mesmo que o anterior, mas ainda deixa o endereço mais pequeno. Se os endereços que mete ficam cortados perdendo o valor, então use esta ferramenta para deixar os links com outra aparência.

dwarfURL
Este é outro serviço que transforma um endereço longo num pequeno e arranjado endereço. Depois de os “transformar” este nunca expiram, possibilitando um arranjo ou uma mascara eterna para determinados links.

Polaroize
Polaroize é um serviço muito interess
ante, se quiser dar um aspecto de fotografia polaroid às suas imagens então pode usar este scrip muito simples disponível neste lugar. Pouco há para dizer, apenas escolha a imagem a polarizar, defina a qualidade e execute, copie e utilize, simples.

BrowseatWork
Este serviço permite-lhe ultrapassar algumas linhas de proibição que possa ter dentro da sua rede de trabalho. Nalgumas empresas, escolas e serviços públicos, as pessoas estão limitadas quanto à utilização da Internet, usando um proxy o utilizador pode contornar algumas dessas barreiras e navegar “quase” livremente. Este é um serviço, mas muitos outros existem, fica apenas o exemplo.

ResizR
Tem uma imagem grande e precisa de a recortar? Está numa máquina sem um editor de imagem que lhe faça isso.. e não sabe como pode resolver? Então este serviço é para si. ResizR permite redimensionar uma imagem usando a web. Importe a imagem do seu PC ou directamente da Internet, escolha a largura da imagem e converta. O serviço é rápido e o nível de qualidade é aceitável. Permite também rodar a imagem.

FotoFlexer
Ter um editor de imagem online também ajuda. Seguindo mais a fundo o passo anterior, imaginamos agora que precisamos de retocar uma imagem, ou mesmo elaborar um trabalho mais requintado, então o FotoFlexer vem mesmo a calhar. Neste serviço podemos importar uma imagem, alterar o tamanho, adicionar efeito, adicionar filtros de correcção, rodar, inverter, etc. Muitas possibilidades estão disponíveis. É um excelente serviço de edição de imagem.

Yotophoto
Para quem gosta e fotografia e imagens este local é obrigatório. Se pretende usar essas fotos para expor, então tem de cuidar dos direitos de autor, mas existem milhões delas que foram disponibilizadas de forma livre, as chamadas imagens copyleft. Livres de direitos de autor, prontas a serem usadas sem que tenha de pagar para isso. Este motor de pesquisa faz isso mesmo, encontra este tipo de imagens.

Improve Your Images
Esta ferramenta serve para melhorar as suas imagens. É um serviço mais restrito, apenas usa filtros para limpar algumas incorrecções que possam existir nas fotografias, por exemplo o efeito de olhos vermelhos, desequilíbrio de tonalidades cores, etc.

Zamzar
Este serviço é fantástico, converte (quase) tudo o que possa imaginar. Seja imagem, vídeo ou ficheiros de dados este serviço tem sempre as possibilidade de conversão. Quer converter um .doc em .pdf? Então tem aqui a solução.Mandaram-lhe um .docx e não sabe como o converter? Não instale nada, converta online. Recolha vídeo de uma url e transforme imediatamente para um formato amigável, descarregue a conversão directamente no seu ambiente de trabalho. Ao fazer o registo o serviço dá-lhe mais recursos para conversão. Guarde bem este serviço.

Media Convert
Media-Convert funciona sem inscrição e gratuitamente. Não tem de instalar nada e nenhum “software” específico é necessário. Penas necessitam do browser. Pode converter diversos formatos de ficheiros. Os ficheiros estão acessíveis 7/7 dias, 24h/24. Escolham o formato de entrada (o formato o vosso ficheiro), depois o de saída (o formato desejado), e enviam o ficheiro através do formulário e é só esperar pelo ficheiro convertido. Além disso pode dividir o ficheiro em partes com determinado tamanho.

WebMath
É daquelas pessoas que detesta matemática? Não sabe multiplicar fracções? Problemas a calcular áreas? Então agarre-se a este serviço. Tem a “papinha” toda prontinha, é só usar. Para os estudantes este serviço é uma gota de mel no fel do dia a dia matemático. São dezenas de funções, cálculos, conversões e derivados.

ConvertIcon
Este serviço é muito simples de entender e de usar. Se tem imagens que gostava que se tornassem num agradável ícone do seu ambiente de trabalho não precisa de procurar mais. Não necessita de instalar aplicações, siga apenas o caminho deste serviço.

Basta fazer o upload da imagem (PNG ou ICO) e esperar um segundo pelo link de download. Temos a nossa imagem pronta a usar com a correcta formatação .ico divirtam-se.

WebCAlc
Aqui também de calculam valores. Mais simples embora mais especifico. Pode utilizar as categorias, seleccionar o tipo de cálculo e obter os resultados sem erro. Uma ferramenta importante no dia a dia.

Live Search Maps
Antes de viajar passe em revista o caminho por onde irá passar. Os mapas indicam-lhe além do caminho, obviamente, zonas alternativas de passagem, já que a imagem aérea o informa de outros pormenores. Este serviço é rápido e pormenorizado, pode imprimir rotas pré-preparadas. Serviço desenvolvido pela Microsoft.

Google Maps
Este serviço, à semelhança do anterior, também lhe permite pesquisar e visualizar mapas e imagens de satélite da Terra. É um serviço gratuito na web fornecido pela empresa Google. Actualmente, o serviço disponibiliza mapas e rotas para qualquer ponto nos Estados Unidos, Canadá, na Europa, Austrália e Brasil, entre outros.

Pic Resize 2.0
O Pic Resize é um dos sítios na Internet que permite redimensionar imagens no seu computador, mas uma breve busca no Google irá retornar muitos outros serviços semelhantes. Pode redimensionar a imagem para 75%, 50% ou 25% do tamanho original ou especificar uma largura e altura, em pixels ou percentagem. Para além disso pode seleccionar entre 12 efeitos para a imagem redimensionada, desde uma simples rotação, até escala de cinza. O formato da imagem final pode também ser escolhido pelo utilizador, entre JPG, GIF ou PNG. Depois, é só gravar e usar!

Vector Magic
Este serviço online permite transformar as imagens em formato vectorial. Uma imagem vectorial normalmente é composta por curvas, elipses, polígonos, texto, entre outros elementos, isto é, utilizam vectores matemáticos para sua descrição. Num trecho de desenho sólido, de uma cor apenas, um programa vectorial apenas repete o padrão, não tendo que armazenar dados para cada pixel.

Este serviços web permite-nos converter online imagens em formato compactado, como o JPG por exemplo, em formato vectorial.

Super Conversor Web
Este serviço é polivalente e multi funcional. Com ele poderemos fazer muitíssimas tarefas, podemos converter online vídeos do YouTube, oferece um serviço de conversão de unidades e ainda um serviço de alojamento de ficheiros temporários, onde lhe é solicitado um endereço para receber o link onde poderá fazer o respectivo downlod. Muitas outras funções poderão ser descobertas neste fantástico serviço que, só a título de exemplo, tem mais de 150 possibilidades de conversão dentro das categorias imagens, vídeo, áudio e dados.

Passe os seus MP3 favoritos para celular
Nesta página do serviço é possível converter as suas músicas favoritas para celular. Basta fazer o upload da sua música em formato mp3 e de seguida escolher qual a parte da música mais lhe agrada, poderá ser o refrão por exemplo. Passados uns momentos terá um excerto de 20 segundos da parte da música que seleccionou. Há a possibilidade de fazer o download para o nosso computador, blog ou directamente através do celular (também suporta iPhone).

drop.io – O seu local privado!
drop.io é um serviço que lhe permite partilhar imagens, dados, vídeos, musica simplesmente definindo quem poderá ter acesso a estes conteúdos, quando quer que expire o link que construiu, se tem ou não password de acesso ao conteúdo, entre outras possibilidades.

Pode descarregar dentro da sua conta um vídeo por exemplo e utilizar o mesmo embutido no seu site, por exemplo. Além disso o serviço permite ter acesso a estas possibilidades sem ter de criar um registo com e-mail e todas aquelas exigências desnecessárias.

13 serviços de Web 2.0 desenvolvidos no Brasil

A Web 2.0 brasileira cresceu e multiplicou. Há cerca de um ano, eram raros os serviços disponíveis. Hoje, é difícil fazer uma seleção sem cometer injustiças.

Veja 13 serviços de Web 2.0 desenvolvidos por brasileiros. A seleção buscou mostrar exemplos de sites nas mais diversas áreas.

Nesta lista você vai encontrar sites de mídia e favoritos sociais, despesas pessoais online e aplicativos para empresas, entre muitos outros. A ordem dos serviços é a alfabética.

Apontador
O Apontador, site da primeira fase de internet, adaptou-se à Web 2.0. Ao estilo dos principais serviços de mapas, ele traz imagens de satélites e permite navegar pelas páginas apenas clicando e carregando.

Os serviços continuam parecidos, mas agora preparados para a nova era da internet. Você pode saber onde fica uma rua, traçar uma rota, verificar o trânsito e o clima. Além disso, pode marcar seus locais, como a residência ou o endereço do trabalho.

Outro recurso é a possibilidade de marcações pessoais nas regiões escolhidas, como comércio, imóveis, educação, esporte, gastronomia, governo, saúde, serviços, transportes e turismo.

É possível encontrar também algumas marcações de lojas feitas diretamente pelo Apontador, em um sinal de que o site está trabalhando em um serviço local de classificados via mapas.

Aprex
Os concorrentes do Aprex são o Google, a Microsoft e Yahoo, as três maiores empresas de internet do mundo. Nada que desanime os fundadores do serviço, uma das mais bem-sucedidas investidas de brasileiros na área de aplicativos online.

Os serviços online são calendário, lista de contatos, tarefas, disco virtual, blogs, enquetes, apresentações e e-mail marketing (as duas últimas ainda em beta).

O sócio-diretor do Aprex, Guilherme Coelho,  explicou porque acredita que o Aprex vai dar certo:

1) Simplicidade: a facilidade de uso é considerada melhor que a dos sites internacionais.

2) Integração: muitos dos serviços concorrentes não têm todos os recursos em um único lugar, como o Aprex.

3) Serviços profissionais: como um dos alvos do Aprex são as pequenas e médias empresas, as aplicações Web 2.0 contam com recursos de segurança, o que dá mais confiabilidade para quem usa.

Blogblogs
O Blogblogs acabou de ganhar uma nova versão. O principal diretório de blogs brasileiros, desenvolvido por Manoel Lemos em um trabalho solitário, incorporou recursos, criou rankings e ficou mais parecido com o Technorati, o seu modelo de inspiração.

Agora, o Blogblogs traz um ranking com os principais blogs brasileiros. O critério é o mesmo do Technorati: o número de blogs que linkam para o seu blog é um sinal da sua popularidade. Se houver empate, o número de links é o critério para desempatar.

Mas o ranking é apenas um dos recurso que melhoraram e muito o Blogblogs. Agora, o dono de um blog pode cadastrar o seu blog, escolher os seus blogs favoritos, indexar seus posts e acrescentar suas tags. Se quiser, pode automatizar o “ping”, recurso que avisa o sistema do Blogblogs toda vez que um novo conteúdo está no ar.

Uma informação que estava na versão anterior, e agora não é mais encontrada, é a quantidade de blogs indexados. Em fevereiro, eram 143 mil.

Boo-box
Esse é o serviço de Web 2.0 que maior repercussão conseguiu fora do Brasil. O Boo-box, que associa imagens e palavras a sites de comércio eletrônico, foi destaque no TechCrunch, considerado a principal referência do ramo internacionalmente.

A idéia é de dois brasilienses, Raphael Vasconcellos e Marco Gomes, que, em dezembro de 2006, ao verem uma foto da modelo brasileira Gisele Bündchen com o tênis All Star se questionaram: “E por que não comprar o tênis apenas clicando na imagem”?

Essa é a concepção do Boo-box. Os blogueiros colocam um script em sua página e depois, na hora de publicar o texto, acrescentam um tag na imagem e no texto.

Simples assim. Para dar certo, o Boo-box terá de provar a eficiência do seu modelo e ter parcerias com lojas de prestígio do comércio eletrônico brasileiro e internacional (sim os objetivos são além mar). Não é demais registrar que modelos para que blogueiros ganhem dinheiro não faltam: do Google ao UOL.

Camiseteria
Você já ouvir falar de rede social, mídia social e outras formas de colaboração que estão surgindo na esteira da Web 2.0, não? E comércio social? Que tal dar uma olhada no Camiseteria, do blogueiro e um dos pioneiros da Web 2.0 nacional, Fábio Seixas.

O Camiseteria é um site que vende camisetas com estampas feitas pelos próprios usuários, que enviam pela internet e passam pelo crivo dos internautas em uma votação aberta.

A votação de cada estampa dura 10 dias corridos e durante esse período qualquer usuário cadastrado no site poderá votar.

Após os 10 dias, a estampa sai de votação e recebe uma nota média final, que fica disponível no perfil do autor. Os vencedores recebem R$ 350 em dinheiro e R$ 350 em produtos.

Quem quiser comprar uma camiseta da coleção do Camiseteria, no entanto, vai ter de colocar a mão no bolso. Elas custam até 55 reais.

Debit
A burocracia é um monstro feito sob medida para os contadores. Mas esse demônio começa a ser domado por um preço razoável e com controle total pela Web.

O Debit não é um serviço para usuários finais, mas sim para pequenas e médias empresas e profissionais liberais.

Entre os serviços estão o Debit Atualiza, que faz cálculos de correção monetária, de juros, multas, custas e honorários, e o Debit Trabalhista, para cálculos como diferenças salariais, 13º salário, encargos como IRFF e INSS.

Alguns aplicativos online são gratuitos, como o Debit SAC, para controle do serviço de atendimento a clientes, e o Debit Ponto, para controle de cartões de ponto.

DicaSP
Ninguém percebeu, mas a poderosa editora Abril está fazendo um teste na Web 2.0, usando a base de dados de bares e restaurantes da Veja São Paulo.

O modelo é simples. Os usuários podem procurar bares e restaurantes, mas não incluir os seus preferidos. Os internautas registrados podem criticar, comentar e indicar um local.

Você pode montar a sua lista de lugares preferidos em São Paulo, deixar seus comentários, navegar pela lista de outras pessoas e até marcar encontros e happy hours.

É possível saber quais são os lugares mais populares e, para desgostos de alguns proprietários, os menos populares.

No site, não há nenhuma referência sobre quem é a empresa por trás do empreendimento. Na home da Veja São Paulo, apenas uma chamada discreta para a nova comunidade.

Garimpar
Você não precisa garimpar muito para saber qual é a inspiração do Garimpar, um site de favoritos sociais, cujo modelo é baseado do del.icio.us, serviço popular entre os norte-americanos e também entre os brasileiros.

A idéia é simples. Em vez de guardar os seus favoritos na desktop, o serviço permite que eles sejam salvos na internet, classificados com etiquetas, chamadas na Web 2.0 de tags. Assim, de qualquer lugar, você pode acessar o conteúdo.

Os favoritos salvos em sua conta podem ser públicos, privados ou anônimos. Conforme você vai adicionando novos conteúdos, sua nuvem de tag vai sendo formada. Mas o Garimpar tem ainda que melhorar para se comparar ao seu par norte-americano.

O serviço brasileiro não tem uma nuvem com as tags mais comuns, nem permite navegar por categorias para saber os itens mais populares. Reflexo, talvez, do seu baixo ainda número de usuários.

Overmundo
Criado pela parceria entre o chairman do iCommons, Ronaldo Lemos, o antropólogo Hermano Vianna e o advogado Marcelo Zacchi, o OverMundo é considerado o primeiro site apoiado pelo Governo a explorar a Web 2.0.

Definida por Lemos como “jornalismo cidadão”, a iniciativa permite que usuários publiquem textos de assuntos diversos, que carregam a licença Creative Commons e tragam a mínima relação com cultura nacional.

Após a publicação, a comunidade do Overmundo pode votar e categorizar as notícias, no mesmo sistema proposto pelo Digg.

Peqno
Na primeira fase da internet, durante o ano 2000, um bom plano de negócios envolvia um serviço para o mercado latino-americano, modelo consagrado pela StarMedia, e a abertura de capital na Nasdaq, modelo consagrado pela StarMedia.

Na era Web 2.0, não há ambições de abrir o capital – afinal, na maioria dos casos não há capital – mas a América Latina cedeu espaço para, simplesmente, o mundo. Isso mesmo. Software como serviço permite que você atinja vários países, sem a necessidade de subsidiárias e investimentos em estruturas físicas.

Basta um servidor na mão e um bom plano de negócios. Tome o exemplo do Peqno, um site de dois catarinenses cuja missão é simples: transformar URLs gigantes em pequenas, com diz o nome.

O Peqno.com surgiu primeiro em inglês. Já tem versão em português e espanhol. Prepara-se para lançar o site em italiano e alemão. E o objetivo é também ser entendido pelos chineses, o maior mercado em expansão do planeta. A versão em mandaria, dizem os fundadores, está a caminho.

Rec6
Não faltam candidatos ao Digg nacional. Entre eles, EuCurti, Linkk e OutroLado. Nenhum deles ainda chegou perto do Rec6, que foi adotado principalmente pela comunidade de tecnologia.

Além de um visual mais limpo, próprio do estilo de design da Web 2.0, o Rec6 é mais rápido e fácil de se cadastrar que seus pares. Além disso, foi incorporando ferramentas que o torna ainda melhor.

Uma delas é um widget, ainda é em beta, outra característica da Web 2.0, que permite ao usuário saber em que notícias votou, as notícias dos seus contatos e as notícias do seu interesse.

Um recurso recém-lançado mantém o internauta mais tempo dentro do Rec6. Ao clicar em uma notícia, o leitor é direcionado para a página do conteúdo. Uma barra na lateral esquerda, relaciona outras notícias do Rec6 associadas com aquele conteúdo.

Para ser um editor do Rec6 ou votar na notícias, é preciso se cadastrar no Via6, uma comunidade profissional dos meus fundadores do Rec6. Nada que vá doer.

As duas, Rec6 e Via6, acabaram de receber um investimento de capital de risco da Confrapar, cujo valor não foi revelado.

Spesa
Se o mês é grande demais para caber no seu salário, está na hora de controlar e saber quais são os seus gastos. Essa é a proposta do Spesa, um aplicativo que ajuda a controlar as despesas pessoais.

Os usuários dos browsers Firefox e do sistema operacional Mac OS X, da Apple, podem baixar widgets e ter na tela do seu desktop um aplicativo com todas as informações de sua movimentação: dos débitos aos créditos.

Lançado em fevereiro, o site tinha 861 contas criadas e registrados em sua base de dados 4.531 lançamentos e 904 agendamentos. Você pode acompanhar tudo também através de RSS. O serviço é gratuito.

Videolog
Você não pode imaginar o quanto é dura, e quente, a vida nos trópicos. Pegue o exemplo do Videolog, que em dezembro anunciou acordo com o portal UOL.

O Videolog surgiu nove meses antes do YouTube e com o mesmo conceito que levou o site de compartilhamento de vídeos norte-americano a ser adquirido pelo Google por 1,6 bilhão de dólares em 2006.

É claro que a versão brasileira não vale essa quantia. O que pode também ser visto de uma forma positiva. Não haverá também uma Viacom pedindo 1 bilhão de dólares em indenização por violação de direitos autorais.

A qualidade dos vídeos do Videolog é boa e também não deixa a desejar ao YouTube. O que falta é ainda a grande variedade é que possível encontrar no site norte-americano. Entre os brasileiros, consolida-se como a melhor opção.

Idgnow | Peopleware

Definição, Arquitetura, Design, Implementação

A divisão do trabalho nestas etapas não significa a existência exata de uma fronteira entre elas. Na verdade, no decorrer do processo as etapas interagem enquanto são redefinidos detalhes do projeto. Grandes empresas geralmente têm equipes formadas por especialistas nas diversas tarefas de criação de um site. Cada um deles responsável por um assunto específico no projeto.

Definição

Esta é a primeira etapa do projeto de um website e tem início na primeira reunião com o cliente, onde a equipe de projeto tem o primeiro envolvimento com o material que deve ser disponibilizado no site.

O material coletado nesta fase deve ser analisado pela equipe e os objetivos e soluções começam a se delinear. Aqui já podemos ter uma idéia incial dos módulos que teremos dentro do site.

É importante ressaltar que nesta fase o projeto deve se adequar às exigências de orçamento e prazos impostas e assim podemos limitar o escopo do projeto, considerando os diferentes módulos e tecnologias a serem empregadas.

Pontos importantes :

Objetivos X Orçamento
É importante definir qual o objetivo do site e o que o cliente está esperando de retorno deste trabalho; também precisamos definir o tempo estimado para finalização e disponibilização do site na rede. Estes parâmetros nos ajudam a delimitar o escopo do projeto e o tamanho do site em termos gerais.

Levantamento de Fontes
As informações passadas pelo cliente nas reuniões iniciais devem ser anotadas para posterior discussão pela equipe, assim como devemos coletar todo o material disponível na forma de impressos ( folders, manuais, guias, etc ) ou já digitalizados em diferentes formatos eletrônicos ( textos em fomatos doc , pdf, outros; planilhas Excel ; etc ) . Da mesma forma devemos coletar imagens como fotografias (digitalizadas ou não ), logotipos , e também , se for o caso imagens em vídeo.

Análise do Conteúdo
A equipe de projeto deve decidir num primeiro momento , frente ao material coletado , o que é interessante para constar no site e o que pode ser deixado de lado. Cada mídia tem sua especifidade e peculiaridades. Devemos ter em mente as limitações e recursos da Web ao selecionarmos o material passado pelo cliente.

Observar também a qualidade de conservação do material, o que pode compremeter o resultado final da digitalização, e a atualidade das informações contidas em impressos. Nesta etapa podemos identificar diferentes ferramentas necessárias para manipular o material coletado e também para converter o que já está digitalizado.

Análise de Contexto
Uma vez que já temos definido o objetivo do nosso site devemos observar também em que cenário o trabalho estará sendo inserido. Para tanto é aconselhável uma visita a alguns sites “concorrentes” na procura de um certo diferencial que traria maior notoriedade ao site em desenvolvimento e eventualmente amior valor ao produto veiculado.

Público Alvo e Tecnologias Empregadas
Estar usando as últimas tecnologias disponíveis na rede nem sempre é o ideal em um site, uma vez que muitas destas tecnologias dependem de um plug-in instalado ou de uma configuração mínima de processador, vídeo, etc. Precisamos ter uma idéia do perfil do nosso público alvo no que se refere ao tipo de equipamento e de software que utiliza, o tipo de resolução de vídeo mais comum (800×600 ou 480×640), além de situar este público em termos sócio-culturais e econômicos. Conhecer o público alvo é um fator determinante não só na escolha das tecnologias, como também na linguagem que o site deve transmitir.

Protótipo e Aprovação
Considerados os pontos citados acima, a equipe de projeto tem condições de apresentar um protótipo do site proposto contendo já alguns dos elementos de design e um primeiro nível de navegação para que o cliente possa ter uma idéia mais concreta sobre o produto que estará sendo desenvolvido. Uma vez aprovado este protótipo a equipe pode passar às novas fases do projeto.

Arquitetura

Nesta fase a equipe de projeto analisa as informações levantadas na etapa anterior , determinando a relevância do material recolhido, a estrutura da informação, os diferentes grupos de informação que serão tratados no site, a prioridade como estas informações devem ser apresentadas.

Aqui devemos ter um bom senso em privilegiar as informações mais relevantes, considerando o objetivo do site, e colocar em destaque as seções mais importantes para o público alvo, facilitando ao máximo o acesso às informações procuradas.

Pontos Importantes :

Definição da “Mensagem do site”
O que consideramos como objetivo do site deve aparecer de forma bem definida pela estrutura proposta.

Estrutura da Informação
Esta tarefa consiste em agrupar as informações, identificando-as e separando em blocos organizados por seções ou assuntos principais. Aqui podemos utilizar gráficos que representem toda a árvore de navegação onde podemos identificar a profundidade em níveis de hierarquia da informação e a largura do site referente ao número de blocos de informação em cada um dos níveis. É interessante que haja um certo equilíbrio entre largura e profundidade, pois sites com grande largura significam opções e saídas em excesso a partir de uma mesma página (o que pode confundir o navegante) , e sites com muitos níveis de profundidade representam muitas páginas a serem carregadas até se chegar à informação procurada o que pode fazer com que o visitante desista de chegar ao final de sua busca.

Recursos da Interface
Para cada um dos blocos de informação definidos devemos aproveitar os recursos que a interface nos oferece, determinando a melhor maneira de apresentar estas informações considerando diferentes mídias. Não devemos esquecer das possibilidades de integração do site com recursos de Bancos de Dados que podem enriquecer o site propiciando um maior número de serviços a oferecer; tecnologias como ASP, Active Server Pages, da Microsoft possibilitam a geração de páginas dinâmicas a partir de informações previamente cadastradas em um banco de dados Access. Programação Cgi ( C++,Perl, Java, … ) , e outros recursos e tecnologias proprietárias ou abertas , são de grande ajuda na implementação de funções mais complexas e tarefas mais sofisticadas.
Outra possibilidade é a inclusão de módulos de Comércio Eletrônico onde o visitante poderia estar adquirindo produtos e serviços on-line.

Interatividade
Pensar como a interatividade deve estar presente no site quando ela se fizer necessária, e de que maneira, ou a que níveis. A interatividade deve estar presente se encaixar perfeitamente no contexto do site.

Navegabilidade
Também definimos como será o processo de navegação pela interface, como o visitante poderá navegar pelo site. Podemos definir o trajeto como exploratório onde ao interagir com o site o navegante vai aos poucos descobrindo suas diversas informações, funções e serviços, ou explanatório, onde de início já aparecem informadas e descritas de forma explícita o que se pode conseguir do site. As duas formas são válidas dependendo da situação em que apresentam.

Ainda em relação ao trajeto podemos definir diferentes formas de ligação entre os módulos definidos na estrutura do site permitindo possibilidades diferentes aos navegantes.

Podemos chamar de navegação de “circular” onde de qualquer ponto podemos chegar diretamente aos outros módulos do site; neste caso a partir de qualquer página podemos alcançar as demais existentes no site , ou as páginas das seções principais. Isto, a princípio, e o que mais facilitaria ao navegante percorrer o site.

Outro tipo de estrutura permite a navegação de forma sequencial, como se estivéssemos lendo um livro página após página. Em alguns casos isso pode ser interessante.

Podemos ainda pensar em estruturas rigidamente hierárquicas o que a princípio não parece ser interessante pois exige um excesso de vai e vem no site até que o navegante chegue ao final de sua busca.

Design

Uma vez definida a estrutura do site e sua funcionalidade, passamos a pensar na proposta gráfica apresentada pelo designer. Aqui temos o encaixe da Arquitetura das Informações com o Projeto Gráfico, onde as metáforas visuais são incorporadas ao site auxiliando e melhorando a navegação proposta na fase anterior.

Pontos Importantes :

Tipografia
Este é um detalhe de extrema importancia que muitas vezes não é levado em conta. Existe uma série de estudos em relação ao uso de diferentes tipos de fonte possíveis. O tipo de fonte usado em seu site deve-se adequar à mensagem que você está querendo transmitir. Considere também o aspecto legal que rege a utilização e veiculação.

A lnguagem é bastante limitada no que se refere à tipografia. Alguns tipo de fonte são definidos no Html padrão e outras podem ser utilizadas através de diretivas específicas que referenciam fontes supostamente instaladas no cliente; como nem sempre o cliente tem a fonte especificada perdemos o controle sobre o que será apresentado.

A disponibilização de imagens na forma de gráficos contorna este problema mas depara em outros como descrito a seguir. Via de regra utilizamos gráficos para representar textos quando se trata de títulos, banners ou outras chamadas na forma de ícones dentro do site.

Redação de textos
Na fase de definição levantamos parte do material na forma de textos que deverão ser revistos, algumas vezes redigitados, ou importados de diferentes formatos. Devemos nos lembrar que a forma de apresentação de textos na rede tem suas peculiaridades; geralmente o visitante do site não dispõe de tempo e paciência para ler textos demasiadamente extensos na frente de um monitor. É aconselhável então apresentar textos na forma resumida e possibilitar o acesso a textos na íntegra no forma de documentos no formato PDF ( Adobe ) ou DOC ( Microsoft ). A apresentação do texto em colunas que não preencham toda a extensão horizontal da tela também facilitam a leitura.

O tipo de fonte utilizado também devem seguir alguns padrões. Sugerimos a utilização da fonte Arial ( ou Helvética ) , tamanho 10 para textos genéricos, 12 para textos em destaque, e 8 para observações sem muito destaque. Também é possível disponibilizar textos na forma de imagem, eliminando assim o problema de visualização caso o visitante não possua a fonte usada no site; no entanto esse procedimento recebe algumas críticas devido ao tamanho das imagens e impossibilidade de pesquisa por palavra chave dentro destes textos.

Criação de Imagens
As imagens utilizadas em um site são, via de regra, nos formatos .GIF (Graphics Interchange Format) e .JPG ( Joint Photographics Experts Group ) , assim sendo , algumas das imagens já digitalizadas , obtidas na fase incial, talvez devam ser transformadas para os padrões citados.

Para visualização das imagens no vídeo não necessitamos de alta resolução nas imagens, sendo aconselhável a densidade de 72 dpi, o que resulta em imagens mais reduzidas em bytes que facilitam o tráfego pela rede.

As imagens coletadas na fase inicial e que ainda não estão digitalizadas devem então ser escaneadas ( observando a densidade de 72 dpi já citada ) e tratadas em softwares específicos como Adobe Photoshop , Paint Shop Pro , ou similares.

Implementação

Esta é a fase final do desenvolvimento do site que já aprovado pelo cliente deve ser então ser disponibilizado na rede. Temos assim uma finalização da criação de todas as páginas, imagens, e outras mídias.

Pontos Importantes :

Programação
Nesta etapa temos a finalização e integração de todas as páginas e programação cgi , verificação de todos os links, etc. Uma especial atenção deve ser dada ao caminho dos links que eventualmente não serão os mesmo no servidor.

Teste da Interface
É importante uma verificação final de todo o site enfim de analisar se a interface está correspondendo ao esperado na fase de Definição. Verficar a visualização em diferentes browsers e versões e também em diferentes modos de configuração de monitor e definição de cores. Observar se não há falhas na lógica de navegação.

Definição do servidor
Faça um estudo prévio das necessidades de hardware e software antes de decidir por um ou outro servidor.
Empresas que hospedam páginas têm diferentes políticas de preços de acordo com tamanho do site e o tipo de serviços disponíveis, como endereços e-mail, contadores de acesso, tratamemto de formulários, integração com banco de dados, etc. A definição do endereço também interfere no preço como descrito a seguir.

Além do preço, devemos considerar as especificações técnicas sem as quais o site se tornará deficiente. Existem diferentes servidores Web disponíveis no mercado; o uso de certas tecnologias como disponibilização de bancos de dados integrados ao site por exemplo, depende de servidores específicos de determinados fabricantes; o mesmo para disponibilização de outras mídias como som e vídeo. Também questões referentes à velocidade do link devem ser levadas em conta.

Definição do endereço (URL)
O endereço do site (URL – Uniforme Resource Locator) indica o entrada inicial de nosso site.

Pode aparecer como um domínio próprio (www.suaempresa.com.br) ou sublocado (www.servidor.com.br/suaempresa) ; as duas formas de disponibilização são válidas sendo que o endereço com domínio próprio depende de cadastramento junto aos órgãos que controlam a definição de endereços (registro.br, no Brasil e Internic nos Estados Unidos).

Upload de arquivos
Uma vez definido o servidor e o domínio devemos tranferir todos os arquivos para a máquina onde ficará instalado nosso site. Via de regra isso acontece utilizando diferentes programas de FTP.

Lançamento do site
Existem milhares de sites disponíveis na rede. Para que seu trabalho não passe desapercebido neste mar de informações é necessário um trabalho de divulgação utilizando vias impressas convencionais como mala direta, revistas, jornais, outdoors, panfletos, etc, e até mesmo propaganda em televisão.

A divulgação via eletrônica através de listas, ou grupos de discussão deve ser feita de forma criteriosa para não criar spams indesejáveis o que pode comprometer a imagem do cliente.

Fonte: http://www.unicamp.br/~everaldo/websites/arquitetura_websites.html

Abaixo, apresentamos 30 ferramentas de desenvolvimento extremamente útil, templates, geradores, e sugestões de segurança, esperando que você se inspirou para utilizar estas ferramentas úteis para tornar sua vida mais fácil.

1. CSS e Ferramentas de Desenvolvimento

Scaffold

CSScaffold CSS é um framework escrito em PHP. Ao invés de tentar criar um quadro estático, que utiliza as capacidades padrão de CSS, como Blueprint, ele usa o PHP para estender CSS. A sintaxe olha e se sente exatamente como CSS, exceto que você tem alguns novos, habilidades poderosas.

Compass

Compass é uma ferramenta de criação de estilo que usa a linguagem de estilo Sass para fazer o seu estilo menor e seu Web site mais fácil de manter.

css_doc

css_doc Ruby é uma biblioteca e uma ferramenta de linha de comando para extrair documentação de arquivos CSS. O formato da documentação é muito semelhante ao JavaDoc.

CSSHttpRequest

Como JavaScript inclui, isto funciona porque o CSS não está sujeita à política de mesma origem que afeta XMLHttpRequest. Funções CSSHttpRequest à semelhança JSONP, e está limitada a solicitações GET. Ao contrário JSONP, não confiáveis de terceiros JavaScript não pode executar no contexto da página de chamada.

CSS Sandbox

Diga adeus à tentativa e erro, mas dizer Olá a uma ferramenta e um brinquedo para testar CSS em tempo real. É uma alternativa simples e rápida de recarregar uma página e ver os últimos ajustes para o seu código. Role o mouse sobre o botão de código ea formatação para o código CSS necessário estará pronto para o seu site.

CodeBurner

Esta é uma ferramenta útil para desenvolvedores da Web para verificar as propriedades CSS ou elementos HTML. Após a instalação, você pode executar uma busca ou clicar em um item na página para ver as informações de compatibilidade do navegador, sintaxe e exemplos de código. Ele fornece uma referência rápida disponível no seu navegador.

Markup Validator SAC

Esta versão stand-alone de HTML do W3C / XHTML Markup Validator não requer instalação. Basta colocar o Validator onde você precisa, como um flash drive, CD ou disco rígido. É possível validar os arquivos locais, sites, ou ser configurado como um serviço Web para permitir que os usuários para validar através da rede local. Basta arrastar e soltar arquivos e URLs para o ícone do aplicativo, ou usar o comando Arquivo> Abrir.

CodeRun

Ferramenta útil que nos permite fazer upload de pesquisa e projetos de código executável, modificar ou criar um código com coloração conclusão, depuração de código cliente / servidor, bem como publicar links código. Para a nuvem, podemos implantar com um clique, gerir os recursos de nuvens, e as versões completa com SVN. Ele suporta várias línguas.

Google Code Playground

Ferramentas de desenvolvimento online script vamos implementar ricos, sites dinâmicos em menos tempo. Com este parque AJAX API, podemos experimentar com novas funções como o JavaScript ou mapas, ou mesmo baixar feeds. Então, essas funções podem ser exportados, totalmente pronto para implementar. Novas ferramentas de continuar a ser adicionados, por isso este é um bom lugar para se revisitar a linguagem, blogger, gráficos e outros códigos de visualização.

Boks

Boks é um aplicativo AIR, o que significa que funciona em Windows, Mac e Linux. Ele fornece uma interface de usuário para Blueprint quadro CSS e pode lidar com grade e configuração do ritmo de base, antes de exportar grid.png e comprimido CSS.

Bluefish

Este editor Open Source é voltada para programadores e web designers e funcionará na maioria dos sistemas operacionais, incluindo Linux, FreeBSD, MacOS X, OpenBSD e Solaris. Bluefish centra-se na edição de sites dinâmicos e interativos e os scripts, e suporta muitos programação e linguagens de marcação. Não será neste momento executado no Windows, mas um nativo Bluefish 1.0.7 binário.

FireCrystal

FireCrystal é uma extensão do Firefox para ajudar os programadores e designers descobrir como comportamentos interativos na web funcionam. Ele permite aos usuários “rewind” suas interações com as páginas da web ao mesmo tempo mostrando o código correspondente. No entanto, é atualmente uma versão alfa e podem sofrer de tempos de carregamento longos ou falhar em Javascript intensivo páginas.

Adobe BrowserLab

Esta ferramenta está disponível como um trecho da música, assim que os profissionais da web deve experimentá-lo, enquanto podem. Adobe BrowserLab fornece web designers com uma cópia exata de suas páginas em vários navegadores e sistemas operacionais. É uma solução para testes de compatibilidade cross-browser e pode ser personalizado com suas preferências, além de ser um serviço online que pode ser acessado a partir de praticamente qualquer computador conectado à web.

checkmycolors

Esta ferramenta é para verificar novos e combinações de cor de fundo de todos os elementos do DOM para determinar se eles fornecem um contraste suficiente quando visualizados por alguém que tenha défices de cor. Você digita um endereço web e checkmycolors retorna resultados de teste com base em algoritmos sugeridos pela W3C.

2. Tipografia

Typography Keyboard Layout

Uma ferramenta simples, mas útil, que permite que você digite os caracteres que são geralmente não disponível em um teclado com facilidade. Esta coisa é um layout de teclado normal, só que com a tecla Alt no Mac ou a tecla Alt Gr no Windows que permite que você digite todas estas personagens perfeitamente agradável. O layout também suporta vários tipos de sinais diacríticos, assim você pode digitar palavras como ingênuos ou café e se divertir.

Typedia

Enciclopédia compartilhada de fontes, com recursos para classificar, categorizar e ligar fontes.

FontBook

Esta web telespectador com fonte permite que você olhar para todas as fontes com seu texto amostra através da incorporação de fontes HTML5. Você pode visualizar as métricas, glifos ou o corpo do texto fonte. Suporte em breve deverá estar disponível para a marcação, classificação e favoriting.

3. Ferramentas de Referência

Regex Widget
Este widget interactivo é útil para testar JavaScript, Sed, Ruby, Perl ou expressões. A interface de usuário é simples, maiúsculas e minúsculas, tem interruptor global, e corresponder ver índice de matriz para codificadores para implementar testes de forma fácil e eficaz.

HTML Entity Character Lookup

Utilizando entidades de HTML é o caminho certo para garantir todos os personagens em sua página são validados. No entanto, muitas vezes, encontrar o código de entidade de direito requer a digitalização através de 250 linhas de caracteres. Essa pesquisa permite-lhe encontrar rapidamente a entidade com base na sua aparência, por exemplo, como um <ou a letra C.

PHPQuickReference (Mac Dashboard Widget)

PHPQuickReference lhe dá o direito de referência útil PHP no Dashboard. Pesquisa com autocompletar e sugestões e copiar e colar o código de exemplo para seu projeto. Você pode achar mais útil Mac Dashboard Widgets para web designers e desenvolvedores aqui e aqui.

4. Edição de imagem e Otimização

punypng

Punypng é uma ferramenta gratuita que reduz drasticamente os tempos de carregamento da página, reduzindo o tamanho do arquivo de uma imagem sem qualquer perda de qualidade.

Smush.it

Smush.it é uma ferramenta de otimização de edição de imagem que leva a maioria dos tipos de formatos de imagem e converte para PNGs menores sem mudar sua aparência ou qualidade visual. Ele irá fornecer dados sobre quantos bytes seriam salvos por meio da otimização, bem como produzir um arquivo zip para download com os arquivos de imagem minimizada.

PNG8

Most of us use Photoshop, but Fireworks allows us to use an alpha transparency with PNG8 for a smaller file size while maintaining edges that blend smoothly and look great. Select the number of colors needed or setup a color matte and save a PNG8 image with alpha transparency. In the Optimize pallet, select PNG8 format with alpha transparency selected, and then click “Rebuild” in the lower right corner. Smaller file sizes equal faster page loads and this works the best for logos, shadows and gradients to be fully optimized.

Finetuna

Finetuna editor de imagens pode ser usado para divertimento ou para locais mais grave. Você pode fazer upload de uma imagem ou uma escolha de uma página web, antes de adicionar rapidamente os seus comentários para qualquer imagem. A única coisa que resta a fazer é compartilhar.

iConvert

Esta ferramenta faz a conversão de imagens para ícones rápido e simples. É um processo um passo para a criação de ícones para Windows, Mac e Linux.

5. Freelancing

Astuteo

Web designers e desenvolvedores de sites podem utilizar esta ferramenta simples para estimar o tempo rapidamente e materiais necessários para um projeto da proposta. Digite o título do projeto e sua taxa horária padrão, em seguida, ajustar o seu horário antecipado para gerar sua estimativa total do projeto. Os resultados podem ser impressos ou salvos em um PDF.

redmark

Redmark é uma ferramenta útil para os designers e os seus clientes para se comunicar visualmente em três passos simples. Carregue o seu design, e-mail automaticamente para os clientes que podem fazer comentários, fazer revisões e repetir, automaticamente, antes de publicação.

6. Melhorar o fluxo de trabalho

Web Form Factory

Web Form Factory é uma fonte aberta gerador de formulários Web que gera automaticamente o código necessário backend para amarrar o seu formulário para uma base de dados.

Printliminator

O Printliminator é um bookmarklet com algumas ferramentas simples que você pode usar para websites de impressão faz melhor. Um clique para activar e, em seguida, clique para remover elementos da página, remover gráficos, e aplicar um estilo de impressão melhor.

Split Browser

Multitarefa é obrigatória. Dependendo da memória RAM e tamanho da tela, essa ferramenta permite que o navegador FireFox para ser dividida infinitamente. A janela de configuração pode ser dividido em colunas ou no entanto, é necessário comparar várias páginas da Web. Escolha o “Split Browser para” menu e, em seguida, arrastar e soltar links, bookmarks, calendários, agendas ou guias nas janelas divididas.

LiberKey

LiberKey  é o “canivete suíço” equivalente a 250 programas de softwares que oferecem locais e / ou utilização portátil. Os melhores programas Open Source ou Freeware foram selecionados para atender às necessidades mais práticas, mantendo 100% de portabilidade.

Fonte: http://www.noupe.com/design/fresh-web-development-goodies-bag.html

]]> http://webtopia.com.br/blog/cinto-de-utilidades-para-webdesigners/feed/ 0