Vitor A. Vale

Recentemente me deparei com a necessidade de pegar os valores de vários itens selecionados pelo usuário em uma lista e submetê-los para processamento, resolvi então fazê-lo com jQuery utilizando tanto para a leitura dos dados quanto para o envio (AJAX). Numa rápida olhada na Internet pelo blog do Ashley Ford – PaperMashup.Com recomendo – encontrei este exemplo que utilizei.

Ele funciona basicamente com duas funções, uma que adiciona / remove a classe quando o checkbox é clicado e uma que quando o botão de envio é acionado percorre a função adicionando os valores dos elementos que possuírem a classe “ativada” (aplicada pela outra função) em um array para depois efetuar o processamento.

Veja um exemplo em ação aqui

O código

$(document).ready(function() {
 $("input").click(function () {
 $(this).toggleClass('selected');
 });

 $(".submit").click(function () {
 var itemsarray = [];
 $("#lista-itens li .selected").each(function () {
 var items = $(this).attr('value');
 itemsarray.push(items);
 });

 // Adicione o envio do processamento via AJAX

 });
});

O HTML

<ul id="lista-itens">
 <li><input type="checkbox" name="test[]" value="Valor" id="x_field"><label for="x_field">Valor</label></li>
</ul>
<a href="#" class="submit">ENVIAR</a>

Existem diversas formas de se adicionar suporte ao CSS3 para o IE, esta é apenas mais uma delas mas sem duvida a minha favorita por funcionar perfeitamente bem.

O que é?

IE-CSS3 é um script (.htc) que pode ser utilizado dentro de seu CSS (aplicando behavior:url(ie-css3.htc) no elemento) habilitando o suporte no IE para dois itens muito utilizado na construção de sites atualmente: border-radius e box-shadow.

Como usá-lo?

Para utilizar basta aplicar o estilo normalmente incluindo ao final a nova linha:

.section{
  /* Borda arredondada */
  -moz-border-radius: 10px; /*Firefox*/
  -webkit-border-radius: 10px; /* Safari e Chrome */
  border-radius: 10px; /* Opera 10.5+, navegadores futuros, e agota também o IE(gte 6) usando IE-CSS3 */

  /* Sombra */
  -moz-box-shadow: 10px 10px 20px #000; /*Firefox*/
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari e Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, navegadores futuros, e agota também o IE(gte 6) usando IE-CSS3 */
  /* IMPORTANTE */
  behavior: url(ie-css3.htc); /* Informa ao IE para ativar o script nos elementos desta classe */

}

Problemas e Soluções

Ocorrem alguns problemas com o z-index, principalmente quando você utiliza um elemento com o IE-CSS3 ativado dentro de outro, existem duas soluções simples:

- Definir o z-index do elemento filho maior que seus elementos pais

- Certificar-se que o elemento que está com o IE-CSS3 ativado esteja posicionado (position: relative ou absolute)

Download e informações: http://fetchak.com/ie-css3/
Obs: Ele só irá executar quando seu projeto estiver rodando em um servidor web (Apache, IIS…) ;D

Recomendo este treinamento para você que deseja aprender a utilizar o jQuery junto as suas aplicações web em .NET tendo em vista que a Microsoft passou a adotar este framework como alternativa ao AJAX Control ToolKit. Neste vídeo você aprenderá traves da construção de uma aplicação em ASP.NET com jQuery a manipulação de seletores, CSS,  DOM, comunicações assíncronas, utilização de serviços invocados do WCF.

O arquivo está dividido em seis partes hospedadas no HotFile totalizando 1.3GB.

Download (lista de links)

Uma das grandes irritações com as versões antigas do Internet Explorer é a utilização de imagens no formato PNG com fundo transparente. Existem hoje diversas formas (Hacks) para fazer a exibição correta da transparência para o Internet Explorar, hoje vou demonstrar uma delas utilizando o Framework jQuery (outras informações aqui) e o plugin jQuery.pngFix.

Este script funciona com as versões 5.5 e 6 do IE de forma não obstrutiva e trabalha diretamente nas imagens linkadas, aplicadas ao background (CSS) mantendo todos os atributos e propriedades das imagens.

Como usar o jQuery.pngFix

1. Faça download do jQuery e do plugin jQuery.pngFix

2. Adicione o jQuery e o pngFix no cabeçalho de seu site (entre as tags <head>..</head>)

<head>
...
<script type="text/javascript" src="jquery.pack.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
...
</head>

3. Adicione após a chamada dos scripts a ativação do plugin

<head>
...
<script type=”text/javascript”>
 jQuery(document).ready(function($){
     $(document).pngFix();
 });
</script>
...
</head>

Obs.: Desta forma fizemos com que o pngFix seja executado em todos os elementos do site, para aplicar a uma área especifica altere o $(document) pelo área onde será aplicado $(“#elementoXYZ”)

Há algum tempo falei sobre o padrão MVC, para criação de sites dinâmicos orientados a dados com uma forma de provê uma programação “mais rápida” para a web. Felizmente a equipe do ASP.NET não ficou para traz e deu inicio ao desenvolvimento de sua estrutura de aplicativo web similar aos WebForms já conhecidos e admirados mas com um conjunto de funções melhoradas baseando-se no padrão MVC.

Esta é uma tecnologia incrível para projetos web, podemos utilizá-la para manter, testar e atualizar e criar sistemas de forma escalável, por isto hoje resolvi reunir alguns links sobre o ASP.NET MVC para que você possa iniciar seus estudos e conhecer um pouco mais a tecnologia.

1. Padrões de Projeto : O modelo MVC – Model View  Controller
2. ASP.NET – MVC – Model-View-Controller – Introdução
3. Criando aplicativos Web sem Web Forms

Gostaria de dar um destaque especial ao “Tutorial da aplicação NerdDinner ASP.NET MVC” de ScottGu (Scott Guthrie) que além de ser gratuito possui um tutorial passo a passo para a construção de uma aplicação pequena e completa utilizando ASP.NET MVC a partir do zero. Com ele você irá aprender:

• Criar um banco de dados
• Construir um modelo de dados com validação e regras de negócio
• Implementar UI (Interface do Usuário) para listas/detalhes de dados em um site usando Controladores e Visões
• Habilitar CRUD (Criar, Atualizar, Deletar) dados
• Usar o padrão de projeto ViewModel para passar informação de um Controlador para uma Visão
• Reusar UI por todo o site usando parciais e páginas master
• Implementar paginação de dados eficiente
• Implementar segurança na aplicação usando autenticação e autorização
• Usar AJAX para entregar atualizações dinâmicas
• Usar AJAX para adicionar suporte interativo a mapas
• Executar testes unitários automatizados (incluindo injeção de dependência e mocking (simulação de objetos))

Links para download

• Faça o download do capítulo tutorial do início ao fim no formato PDF
• Faça o download do código fonte + testes unitários para a aplicação completa
• Aprenda mais sobre o livro a partir da página oficial da Wrox

Recomendo que vejam também o vídeo da construção do NerdDinner e um para a criação de uma versão móbile

1. File|New -> Company: Creating NerdDinner.com with Microsoft ASP.NET Model View Controller (MVC)
2. Mix: Mobile Web Sites with ASP.NET MVC and the Mobile Browser Definition File

[Atualização]

Navegando pelo blog do Ramon Durães vi um post que me chamou a atenção, “ASP.NET MVC Music Store”, mais um tutorial de construção de aplicativo utilizando o ASP.NET MVC só que agora com o MVC 2 demonstrando toda a produtividade que pode se obter e utilizando o Entity Framework 4 para o acesso aos dados. Vale a pena dar uma conferida também:

• MVC Music Store no CodePlex
• Faça downlod do tutorial no formato PDF e do código fonte

Bem estes são bons materiais para iniciar seus estudos, para visualizar outros exemplos e tutoriais recomendo que visite o site do ASP.NET MVC.

Que tal se divertir fazendo o que gosta, ganhar conhecimentos preciosos, conhecer pessoas interessantes e quem sabe ainda levar prêmios incríveis?

Se gostou da idéia participe da Copa Microsoft de Talentos que visa passar conteúdos técnicos de alto nível de diversos produtos e tecnologias. A disputa é realizada em duas etapas: a primeira é classificatória por pontuação e a segunda é eliminatória, ao melhor estilo “mata-mata”.

A premiação varia de bons itens materiais como TV LED 42’’ e Xbox 360 a inscrições no MSDN Subscription e Technet Plus.

Deseja mais informações sobre o evento ou quer participar acesse o Site da Copa Microsoft de Talentos e participe, aprenda, ensine e seja um vencedor.

Well, o ano finalmente começou. E que semana essa depois do carnaval.

Tivemos ótimas aulas de português, inglês, AW, LP, SO e FUI. Onde tivemos oportunidade de conhecermos melhor os professores (alguns fodões).
Também foi a semana onde se começam a formar os grupinhos (sigam me os bons), conheci um pessoal legal, que passou a andar comigo, nos divertimos bastante falando de tudo e de nada ao mesmo tempo.

Curti bastante as aulas de AW com o Diogo e LP com o Jonathan, acho que por serem mais próximas da minha realidade (trabalho). Mas no geral todas as aulas foram boas, tirando um pequeno problema na aula de TI com o professor.
Acredito que para uma pessoa poder dar aula principalmente em instituições como o Cefet ela deveria saber como tratar as pessoas. Isto é o máximo que tenho a dizer sobre o ocorrido.

Agora é muito estudo e muitos trabalhos :s

Primeiramente gostaria de notificar que estarei comentando as semanas que se passarem não os dias assim conseguirei manter as atualizações mais facilmente.

Bem é interessante notar a grande diferença de um curso federal, para um curso particular, e a maior surpresa ficou por conta do Português que vem com o objetivo de tornar os alunos capazes de redigir e interpretar textos em diversos gêneros e tipos. Além da criação correta de relatórios e monografias seguindo normas e padrões técnicos (ABNT) e redações oficiais (requerimentos, ofícios, procurações, etc).

Outra novidade interessante são as aulas de Inglês, voltada para leitura de conteúdos (artigos, tutoriais, etc) específicos de informática, estaremos trabalhando com os livros da Editora Oxford:

- Basic English for Computing
Eric H. Glendinning
John McEwan

- Oxford English for Information Technology
Eric H. Glendinning
John McEwan

Também começamos com um pouco de lógica e algoritmos em L.P, nada muito complexo ainda, mas o suficiente para confundir alguns já. Essa pode ser uma das matérias mais complexas, pois o que não for aprendido agora irá faltar com certeza durante a matéria de C/C++ e posteriormente em JAVA.


Primeiro dia de aula, muita animação, muita apresentação (depois quero dedicar um post somente sobre o que não fazer em sua apresentação perante o corpo de alunos e os professores) e algumas surpresas.

“A lona estava armada e o picadeiro iluminado”, com isto descrevo bem o que passou nos primeiros momentos durante a apresentação dos alunos, fomos de um “achei que era mais fácil” até um “não sei porque estou aqui” (orly) quando as pessoas tentavam descrever o motivo de trem optado por este curso.

Ficamos conhecendo o primeiro professor e a primeira matéria, desenvolvimento web, que terá inicialmente os módulos:

- www
- HTML
- xHTML
- padrões web (W3C)
- CSS
- JavaScript
- jQuery *

Um conteúdo até intersante para quem está iniciando e sobrinhos para que tenham uma base quando estivermos (quem chegar) no próximo módulo dessa matéria.

Vamos ver o que vai dar
Vitor A. Vale

Estando a menos de 24h do início das aulas no Cefet de Divinópolis – MG venho compartilhar com vocês tudo que passei para poder entrar nessa instituição.

Quando conto as pessoas que passei pro Cefet sem nem mesmo estudar, e sabendo quase nada das matérias da prova escrita elas se espantam e até duvidam. Mas fazer o que se até eu não consegui compreender como passei.

Bem indo do começo vou contar toda a loucura do dia 12 de dezembro (dia que antecedeu a prova) até o dia 8 de janeiro (dia que finalmente realizei minha matrícula).

12 de dezembro de 2009 – sábado
Acordei lá pelas 6 da matina para começar a me arrumar para ir para a fazenda com o pessoal do trabalho (www.Onlinesites.com.br), bem foi um dia legal, deu pra da uma relaxada beber uma cervejinha e curtir um descanço.
Consegui chegar em casa a noite e não estava conseguindo dormir.
Pelo que lembro a última vez que olhei no celular eram mais de 2hrs da madrugada.

13 de dezembro de 2009 – domingo
Levantei eram 8hrs, sai na correria pois tinha que atravessar a cidade até o bairro ipiranga para fazer a prova. No caminho não conseguia pensar em mais nada a não ser “me fu…” não havia estudado nada, tinha quase 3 anos desde minha formatura no EM (onde não aprendi nada de física) e teria que fazer uma prova enorme com todas as matérias que passei a odiar por causa de professores descompromissados, meu próprio descompromisso com a escola e os estudos, e escolas com pouca (para não dizer nenhuma) infra estrutura. E estaria disputando diretamente uma vaga com pessoas mais bem “preparadas” (a.k.a gastei toda grana do papai em cursinho).
Bem cheguei em cima da hora (mas a tempo) de entrar na sala e começar a prova. Ia lendo as questões e chutando respostas (na maioria) até conseguir terminar todas as questões. Deixei o local de prova junto com o Hyago (ele também passo – não gosto de deixar os leitores no suspense) eu brincava dizendo que passaria no Cefet sem saber “nada”.

Fiquei numa longa espera até a data que saia o resultado oficial. Meio incrédulo recebi o link do resultado pelo twitter (obrigado @Cefet_div) e fui da uma conferida (depois da primeira consulta repeti o processo mais 4 ou 5 vezes) e descobri que havia sido aprovado em 9. Nesse momento pensei que estava tudo tranquilo (tolinho) o inferno ia começar.

04 de janeiro de 2010
Ia eu tranquilamente pelas ruas de Divinópolis Horário de almoço correria total, peguei toda a papelada e fui corendo pro Cefet fazer a inscrição no primeiro dia (na minha cabeça se eu tivesse feito a inscrição e eles tivessem feito a correção errada eu estaria seguro :p) começou toda a jornada, prenche formulário para um lado, apresenta documentos do outro e vem a grande surpresa. Não poderia fazer minha inscrição oO

Passado a surpresa descobri que não poderia fazer a inscrição por que estava devendo alguns pontos em física do 3 ano. Após algumas negociações consegui um prazo até o dia 04 de fevereiro (início das aulas) para apresentar meu histórico de conclusão do EM. Volto tranquilo e relaxado para a minha vida.

08 de janeiro de 2010
Os fatos iniciais desse dia não são relevantes.
Os acontecimentos a seguir ocorrem entre as 14 e 17 horas.

Telefone toca…
Eu: alô
Voz: jack sr. Vitor A. Vale, aqui e do Cefet
E meio como a voz maldosa do big fone diz:
você tem até as 17 horas para apresentar sua documentação no Cefet ou perderá sua matrícula.

Nesse momento comecei a ver um relóginho vermelho na minha frente marcando o tempo para a “destruição da minha vida/carreira”.

Literalmente abandonei meu posto de trabalho, chamei meus familiares para me pegarem (nesse momento me arrependi de ainda não ter tirado carteira, pois havia comprado meu carro a alguns dias) e corri até minha casa para pegar os documentos e depois voltar para tentar ir ao sesec pagar física (só é permitida a entrada até as 15hrs) cheguei lá as 14:58 em ponto, motivo de uma pequena discussão com a secretária que não queria me deixar entrar. Novamente vai de gaiato na frente de uma prova, dessa vez 30 questões somente de física :\, novamente chutei muito e 15min depois estava no corredor já esperando a coreção da prova que demoraria 10min.
Quando a aplicadora me entregou o resultado e disse – você fez 53 (%) pontos – meu coração subiu a garganta, eu soltei um ‘puta merda’, peguei a folha com o resultado pensei – não deu – e sai de cabeça baixa e fui na secretaria entregar o resultado.
Eis que a mulher me olha sorrindo (senti vontade de mandar ela se fu…) e diz – parabéns, a nota de aprovação e 50. Que injeção de ânimo, ainda me restavam 1h30 para fechar a inscrição. Corri para bater as fotos 3×4 (aliás absurdo demorar 20min para imprimir 9 fotos digitais, mas não vem al caso) aproveitei pra tomar um café e descancar um pouco.

No dia 08 de janeiro de 2010 às 16:45 (aprox) realizei minha inscrição (finalmente) no Cefet Divinópolis para o curso de informática para internet (antigo pgti), que estarei iniciando amanhã dia 04 de fevereiro.

Você que leu até aqui deve estar se perguntando “e agora?”
Sinceramente não sei, novas amizades, muita confusão, diversão, troca de experiências e tudo que tiver que rolar. Estarei comentando aqui os principais acontecimentos e notícias durante esses simestres que ficarei por lá (se não reprovar).

Até lá,
Vitor A. Vale