Blog

Publicado o Web-Site da H2 Eventos! Com uma abordagem em tela cheia, o site foi concebido com intuito de se adaptar à área disponível na janela dos navegadores, mantendo sua identidade visual e integrando-se a qualquer resolução de tela ou tamanho de monitor. Confira!

http://www.h2eventos.com.br

Foi publicado o web-site desenvolvido para o escritório de arquitetura Marta Kemeny, confira!

http://www.martakemeny.com.br/

A quem possa interessar.

Amigos, desenvolvi e coloquei em prática um projeto há algum tempo porém devido a diversos fatores (grana, principalmente) tive que interromper. Se trata de um projeto para incentivar o ciclismo utilitário, que eu chamei de Venha de Bicicleta. Na época, apresentei o projeto a alguns amigos que trabalham com administração e formataram o projeto de acordo com os padrões recomendados. Buscaram, inclusive, patrocínio, porém eles também estavam iniciando a empresa deles e não puderam continuar, porém sua ajuda foi valiosa.

Com uma abordagem diferente, sua rolagem horizontal com menu fixo garante uma navegação ágil, bem como seu sistema de seleção de páginas, que cria movimento e sensação de integridade e uniformidade.

Seu desenho, com poucos limites e caixas de diálogos, cria uma sensação de amplitude e liberdade intencionalmente concebida para despertar um desejo específico em seu público-alvo: pular em uma piscina! Se você navegou pelo site e sentiu vontade de dar um mergulho, curta este post e entre em contato com a Reclub Piscinas!

Confira! Faça uma visita através do endereço http://www.reclubpiscinas.com/

Uma das últimas demandas interessantes foi criar uma solução online para gerenciamento de inscrições para um workshop que teria duração de 3 dias e seria realizado em um clube de campo cujos quartos teriam capacidades para 2 a 5 pessoas, ou seja, haveriam quatro tipos de quartos e diversas intenções de agrupamentos por parte dos usuários, incluindo inscrições individuais. Haveria também necessidade de integração com sistema bancário para geração automática de boleto e identificação de liquidação de pagamento, além de interfaces de administração de inscrições.

O aplicativo foi desenvolvido e permtiu a inscrição de grupos de até cinco pessoas e gerenciamento completo por parte da comissão organizadora. Seu funcionamento pode ser resumido da seguinte forma:

Na primeira tela o usuário informa os e-mails dos inscritos e solicita cadastramento.

Havendo vagas, o sistema envia por e-mail link para cada um dos requisitantes para preenchimento da ficha de inscrição. Em ambos formulários foi integrado o módulo anti-robô “Captcha” e o dispositivo de confirmação ativa de cadastramento, por questões de segurança.

Uma vez preenchida, um outro e-mail contendo boleto bancário é enviado a cada usuário que, ao ter seu pagamento identificado recebe confirmação de inscrição efetivada, bem como as instruções e últimos informes sobre o evento.

A área de administração possibilita gerenciamento das inscrições, geração de 2a via de boleto, cancelamento de inscrição, liquidação manual, liquidação automática via processamento de arquivo retorno Santander com 400 posições, visualização de vagas preenchidas, de inscritos por quarto, dentre outras funcionalidades.

Foi publicado e utilizado com sucesso por mais de 500 usuários, no segundo semestre de 2011, se mostrou de grande utilidade para a comissão organizadora e participantes, principalmente no que se refere ao aspecto inovador e funcional da inscrição em grupo.

Navegando pelas documentações e exemplos de aplicações que utilizam jQuery me deparei com um artigo sobre uma solução integrada a CSS cuja implementação seria supostamente impossível sem o uso de jQuery, porém já é possível criar um menu deste tipo usando CSS Puro e imagens transparentes em PNG.

A solução é bastante simples, se comparada à versão integrada (http://www.kevinleary.net/the-impossible-slanted-diagonal-navigation-setup-with-css-jquery-xhtml/). Se utiliza basicamente da propriedade CSS “margin-left” e “hover” para criar o efeito desejado.

Veja um exemplo em https://whestudio.com.br/blog-exemplos/Menu_diagonal_em_CSS_Puro/index.php

Código fonte HTML

<body>
<div id=”pagina”>
<div id=”menu_horizontal”>
<div id=”menu_horizontal_div”>
<a href=”#” id=”link_item_0″ target=”_self”></a>
<a href=”#” id=”link_item_1″ target=”_self”></a>
<a href=”#” id=”link_item_2″ target=”_self”></a>
<a href=”#” id=”link_item_3″ target=”_self”></a>
<a href=”#” id=”link_item_4″ target=”_self”></a>
<a href=”#” id=”link_item_5″ target=”_self”></a>
</div>
</div>
</div>
</body>

Código fonte CSS

@charset “utf-8″;
/* CSS Document */</code>
 
body {
margin:0;
padding:0;
}
 
#pagina {
width:980px;
position:absolute;
top:0;
left:50%;
margin-left:-490px;
}
 
#menu_horizontal {
position:absolute;
top:14px;
width:980px;
height:68px;
background:url(../images/index_1_11_MENUH_FUNDO.jpg) repeat-x;
}
 
#menu_horizontal_div {
top:0;
left:116px;
position:absolute;
}
 
a#link_item_0 {
width:132px;
height:68px;
background:url(../images/0_up.png) no-repeat;
display: table-cell;
top:0;
left:0;
position:absolute;
}
a#link_item_0:hover {
width:132px;
height:68px;
background:url(../images/0_hover.png) no-repeat;
top:0;
left:0;
position:absolute;
}
 
a#link_item_1 {
width:142px;
height:68px;
background:url(../images/1_up.png) no-repeat;
display:table-cell;
top:0;
left:113px;
position:absolute;
}
a#link_item_1:hover {
width:142px;
height:68px;
background:url(../images/1_hover.png) no-repeat;
top:0;
left:113px;
position:absolute;
}
 
a#link_item_2 {
width:138px;
height:68px;
background:url(../images/2_up.png) no-repeat;
display: table-cell;
top:0;
left:236px;
position:absolute;
}
a#link_item_2:hover {
width:138px;
height:68px;
background:url(../images/2_hover.png) no-repeat;
top:0;
left:236px;
position:absolute;
}
 
a#link_item_3 {
width:132px;
height:68px;
background:url(../images/3_up.png) no-repeat;
display: table-cell;
top:0;
left:349px;
position:absolute;
}
a#link_item_3:hover {
width:132px;
height:68px;
background:url(../images/3_hover.png) no-repeat;
top:0;
left:349px;
position:absolute;
}
 
a#link_item_4 {
width:160px;
height:68px;
background:url(../images/4_up.png) no-repeat;
display: table-cell;
top:0;
left:462px;
position:absolute;
}
a#link_item_4:hover {
width:160px;
height:68px;
background:url(../images/4_hover.png) no-repeat;
top:0;
left:462px;
position:absolute;
}
 
a#link_item_5 {
width:127px;
height:68px;
background:url(../images/5_up.png) no-repeat;
display: table-cell;
top:0;
left:603px;
position:absolute;
}
a#link_item_5:hover {
width:127px;
height:68px;
background:url(../images/5_hover.png) no-repeat;
top:0;
left:603px;
position:absolute;
}