A Monsanto lançou agora no fim de 2011 a segunda versão da sua página voltada para o publico interno,  mantendo o mesmo objetivo da versão anterior, porém adicionando mais interações com os funcionários, aumentando assim, o conhecimento dos mesmos sobre todas as áreas da empresa.

Dentre as novas funcionalidades, os novos aprendizados para mim, foram o controle total de usuários logados e visitantes, o desenvolvimento de um plugin com um quiz e um de relatórios específicos para o site e um filtro de categorização diferenciado, nada muito fora da realidade, mas foi bem interessante o desenvolviemento.

A Home novamente mostra sua característica bem longe dos padrões de blogs, mas para o desenvolvimento nada de novo, a mesma estrutura de códigos do anterior.

Nesse projeto iniciei uma nova organização de CSS e utilização de Gzip para o JavaScript, os ganhos de performance, organização e perda de Kb’s foram expressivos, e entraram para a minha “galeria” de padrões.

A Allumer Telecomunicações lançou seu novo site em outubro de 2011, com foco em vendas nos produtos da Vivo a Allumer já explora o mercado de Rádios a algum tempo.

O site é relativamente simples, se não levarmos em conta o menu criado pelo nosso amigo Gilson Delicado, o CSS deu um pouco de trabalho, mas foi relativamente tranquilo.

O que me incomodava era criar um menu diferente para cada categoria, para mostrar parte do menu principal na lateral esquerda da página, então resolvi me meter com plugins pela primeira vez, e criei o plugin RVSubMenus que faz isso automáticamente, foi um grande aprendizado e uma bela otimização de trabalho.

O novo site da e|ou foi um desafio, não só pelo layout, mas pelas páginas diferentes que haviam: Prêmios, Cases e Clientes.

A maneira de exibir os posts, o próximo post e o post anterior, também dificultaram o desenvolvimento, a página de prêmios foi meu ápice no wordpress, criação de box específicos para o tema na área administrativa dos posts, me mostraram o poder que eu tinha nas mãos ao utilizá-lo.

A maneira de exibir os cases também é muito peculiar, fazendo eu utilizar muito nosso amigo jQuery e a biblioteca jQueryUI.

O layout e arquitetura foram desenvolvidos pelo senhor Diogo Pace. A diagramação do site, não foi mais complicada do que o de costume, quem deu trabalho foi realmente o serverside, visto as páginas específicas que tínhamos.

Desenvolvido novo site do TAM Kids, intitulado TAM Kids 2.0, levando em conta que o número de interações que as crianças podem executar no site, aumentou.O novo site, foi desenvolvido pensando diretamente nas interações possíveis para as crianças dentro das limitações especificadas pelo cliente.

Inicialmente pensei em desenvolver o site com wordpress, facilitando a publicação do conteúdo e a administração do site como um todo, porém, áreas específicas do site, como: área do usuário (cabine do comandante). aquisição de insígnias, alteração de temas do site, curtir página, comentários pré definidos, sugestões de matérias e claro, o prazo disponível para o projeto, me deixaram exitantes com o número de widgets que eu teria que criar e utilizar junto ao wordpress. Com essas considerações, achei prudente fazer tudo do inicio, sem nenhum CMS.

Com um layout orientado ao conteúdo, muito mais do que o site anterior desenvolvido pelo Diogo Pace e pelo Fábio Espósito, o TAM Kids promete facilitar a navegação, diminuir o tempo de carregamento do site, e aumentar a atração de um publico, que tem menos paciência para esperar o seu carregamento do que a maioria dos internautas.

Infelizmente dentro das restrições do projeto, ainda tínhamos o IE6, o que guiou algumas restrições no funcionamento e no layout do site, mas não prejudicou tanto a ideia original do 2.0 que o site levava.

As funcionalidades do site, foram diversas, publicação de conteúdo dinâmico, páginas específicas para administração, url’s amigáveis, monitoração de interações, concursos recorrentes, insignias por interação, o site é um monstro, no quesito tamanho.

Para agilizar o desenvolvimento, fiquei responsável pelo frontend do site e suas funcionalidades e o Leonardo Delgado, pelo backend, o Bruno Sapienza ficou responsável por algumas páginas e pelo CSS do nosso querido IE6 e algumas compatibilidades com o IE7.

Para mim o principal aprendizado, ficou a cargo das URL’s amigáveis e pela utilização do GZip, que hoje julgo bem simples de ser aplicado, em comparação a vantagem que é levada ao publico final.

Nesse ano a ação da laborprint para impactar seus prospect, seguiu a mesma base dos anos anteriores, porém o usuário pode criar um avatar, que foi gravado em camisetas e todo material disponibilizado.

A parte de personalização foi desenvolvida em Flash, já a de personalização do calendário não teve muito segredo, eu já tinha feito 2 vezes, mais uma não seria tão difícil.

Tentamos melhorar a usabilidade da área de personalização do calendário, evitando reload de páginas e alerts desnecessários.

Usei bastante JQuery e a programação com PHP para gerar os calendários como de costume foi bem trabalhosa de fazer, mas ficou muito bom.

A diagramação do layout feito pelo Fabio Esposito não gerou grandes problemas, principalmente por não termos levado em conta o nosso velho amigo IE6.

A SulAmérica lançou uma campanha para ajudar as crianças da ABRINQ, cada cadastro realizado no site serve como uma cota para doação de algum prêmio para a instituição, é como se fosse uma doação coletiva.

O layout foi feito pelo Diogo Pace, como de costume uma verdadeira arte, a diagramação foi rápida, nada muito complexo de fazer, algumas adaptações para IE6, mas nem tantas, como o sistema era pequeno e o prazo era menor, enquanto fiz o client-side, o server-side ficou para o Leonardo Delgado desenvolver, a integração no final foi bem sussa, e tudo funcionou como esperado.

A Unifem lançou um site para falar especificamente para falar e instruir sobre a lei maria da penha, com materiais para aulas, explicações sobre a lei, e fórum para que as pessoas possam tirar dúvidas.

O layout foi desenvolvido por Fabio Esposito e Gilson Delicado, a diagramação não foi das mais difíceis, mas deu bastante trabalho, principalmente por causa dos cantos arredondados, e a necessidade do suporte ao IE6 que continua me atormentando. No server-side utilizei o wordpress para suportar toda a plataforma, utilizei alguns plugins, para permitir posts pelo usuário sem moderação, fora algumas adaptações.

O site na verdade são dois, um voltado para o publico em geral e outro voltado para profissionais de direito, para administrar tudo em um mesmo ambiente utilizei o multi-site do wordpress3, que facilitou muito o desenvolvimento.

O layout impressiona de cara, mais limpo que isso é completamente impossível, diagramação praticamente não teve, feito no wordpress é atualizado muito rápido, sem dor de cabeça e atende o objetivo do Edu.

Segredo mesmo foi encontrar um plugin para colocar os ícones ao lado dos links das páginas, depois que encontrei foi só fazer umas adaptações no CSS e no PHP que ficou show.

A BSP criou um conceito de publicação eletrônica para divulgar os artigos de seus docentes, e de outras pessoas ligadas a BSP, afim de divulgar mais o seu trabalho como instituição acadêmica.

Como o impacto visual não era o objetivo do projeto, foi fácil diagramar o layout feito pelo Fabio Esposito, com os blocos bem definidos, que conhece o WP sabe que não tive muita dor de cabeça.

O mais chato mesmo foi fazer o plugin de tradução funcionar exatamente como precisamos, já que usei o Multi-sites do wordpress para organizar as publicações praticamente como uma revista mesmo.

A Monsanto criou um site interno, para snar dúvidas de seus funcionários sobre o funcionamento da empresa, sobre as sementes criadas, e todos os processos que rola dentro da empresa.

Criamos uma plataforma com o wordpress que para facilitar a administração do site,  a inclusão de novos tópicos e a resposta de perguntas feitas pelos funcionários.

O layout foi criado pelo senhor Diogo Pace, que como de costume cria layouts muito bunitos, mas que fazem qualquer programador client-side chorar, mas como ele sabe desafios são sempre bem-vindos.

A parte que deu mais trabalho foi o footer as adaptações para IE6, e claro reduzir o máximo as imagens para o site ficar leve, por mais que seja uma intranet, vai saber qual é a placa de rede que a galera tá usando por lá.

O site da BSP foi refeito pensando no conteúdo a ser apresentado para os usuários. Aumentamos o destaque dos cursos e treinamentos oferecidos pela escola, e redesenhamos o mapa de navegação.

O layout foi refeito pela Virgínia Porpino, a usabilidade e acessibilidade foram definidas por ela, pelo Alessandro Rodrigues e por mim.

Para diagramar o site utilize o máximo que pude do html5, já que o site tinha que funcionar no IE6. A diagramação não teve segredo, o mais chato são os cantos arredondados, como o layout foi bem blocado, não tive dificuldades.

Para gerenciar o conteúdo utilizei o Joomla, e tive boas experiências escrevendo 3 módulos para ele: o slider da home, as imagens personalizadas para cada página e o banner rotativo da home que fica do lado direito. Nada muito sofisticado, inclusive o das imagens personalizadas poderia ter ficado melhor, mas como de costume em agências, falta tempo.

É muito fácil culpar o mundo pelos seus problemas, por todas as coisas que aconteceram com você, o difícil mesmo, é ter humildade de admitir que fez escolhas erradas, que quando teve a oportunidade de tomar uma atitude recuou, acomodado em alguma situação que facilita a sua vida, que aos seus olho parece ser mais fácil.

A humildade citada é pra você mesmo, não precisa sair falando pra todo mundo que você errou, alias é muito fácil dizer que errou, difícil é ser adulto de encarar-se de frente ao espelho e ter a humildade de admitir que tomou a atitude errada, ou que podia ter escolhido outro caminho, mas preferiu manter-se onde estava por comodidade.

Então reflita mais antes de se colocar como vítima, vai descobrir que na maioria das vezes somos vítimas de nós mesmos, nos boicotamos o tempo todo, nos subjulgamos todo o tempo, é mais fácil do que assumir a vida e encara-lá de frente.

Por que escrevi isso??  Sei la, só não me pergunte .

Faça algo por você!

Então resolvi desenvolver um script, a ideia é facilitar o upload, passar os parametros e a classe cuidar de tudo, inclusive das validações de mime e dimensões.

A classe é grande, 230 linhas por enquanto, conforme eu conseguir otimizar o código eu posto atualizações.

Dúvidas serão bem-vindas.

	
if($_FILES['fileImage']['tmp_name']){
    $options = array("fileName" 	=> $NomeDaImagem
                     ,"extensao" 	=> "jpg"
                     ,"sizes"		=> array(array(1024, 768), array(800, 600), array(133, 100))
                     ,"paths"		=> array("./img/g/", "./img/m/", "./img/p/")
                     ,"validarSize"	=> true
                     ,"corrigirSize" => false);
	
    $up = new UpImage($_FILES['fileImage'], $options);
    if(!$up->execute()) throw new Exception($up->get_error());
    $NomeDaImagem	= $up->get_fileName();
}
	
class UpImage{
	private $file;
	private $mime;
	private $error;
	
	private $fileName;
	private $extensao;
	private $sizes;
	private $paths;
	private $validarSize = false;
	private $corrigirSize = false;
	private $jpgQuality = 80;
	
	public function __construct($file, $options = NULL){
		$this->file = $file;
	
		if($options){
			foreach($options as $prop => $value){
				if(!property_exists(get_class($this), $prop)) throw new Exception("Erro de sistema!");
	
				if(method_exists($this, 'set_'.$prop)){
					call_user_func(array($this, 'set_'.$prop), $value);
				}else{
					$this->$prop = $value;
				}
			}
		}
	
		$this->mime = array("jpeg" 	=> array('application/save', 'image/jpeg', 'image/pjpeg', 'mage/jpeg', 'image/pjpeg'),
							"jpg" 	=> array('application/save', 'image/jpeg', 'image/pjpeg', 'mage/jpeg', 'image/pjpeg'),
							"gif"	=> array('application/save', 'image/gif'),
							"png"	=> array('application/save', 'image/png'));
	
	}
	public function set_fileName($value){$this->fileName = $value;}
	public function set_extensao($value){$this->extensao = str_replace(".", "", $value);}
	public function jpgQuality($value){$this->jpgQuality = $value;}
	
	/*
		array(0 => array(width, height),
			  1 => array(width, height),
			  n => array(width, height));
	
	*/
	public function set_sizes($value){$this->sizes = $value;}
	
	/*
		array(0 => "../img1/",
			  1 => "../img2/",
			  n => "../imgn/",);
	
	*/
	public function set_paths($value){$this->paths = $value;}
	
	public function get_fileName(){return $this->fileName.".".$this->extensao;}
	public function get_error(){return $this->error;}
	
	public function get_uniqPath($dir){
		$path = realpath("./").$dir.$this->get_fileName();
		while(file_exists($path)){
			$this->fileName = uniqid()."_".$this->fileName;
			$path = realpath("./").$dir.$this->get_fileName();
		}
		return $path;
	}
	
	public function execute(){
		if(!$this->sizes || !$this->paths) return false;
	
		$file = &$this->file;
		if($file[error] == 1 || $file[error] == 2){
			$this->error = "O tamanho do arquivo excedeu o limite de 2MB!";
			return false;
		}elseif($file[error] == 3){
			$this->error = "Ocorreu um erro ao copiar o arquivo. Por favor tente novamente!";
			return false;
		}elseif(array_search($file['type'], $this->mime[$this->extensao]) === false){
			$this->error = "A extensão do arquivo deve ser: ".$this->extensao."! - ".$file['type'];
			return false;
		}
	
		if(!$this->fileName){$this->fileName = "img_".uniqid();}
	
		$pathAtual = $file['tmp_name'];
		foreach($this->sizes as $k => $size){
			$path = $this->get_uniqPath($this->paths[$k]);
	
			if($k == 0){
				if($this->validarSize){
					$sAtual = getimagesize($file['tmp_name']);
					if($sAtual[0] != $size[0] || $sAtual[1] != $size[1]) throw new Exception("As dimenções da Imagem estão incorretas! - $sAtual[0]x$sAtual[1] - $size[0]x$size[1]");
					move_uploaded_file($pathAtual, $path);
					$pathAtual = $path;
				}else{
					$this->corrigeWH($size[0], $size[1], $pathAtual, $path);
					$this->diminuir($size[0], $size[1], $pathAtual, $path);
					$pathAtual = $path;
				}
			}else{
				$this->diminuir($size[0], $size[1], $pathAtual, $path);
			}
		}
	
		return true;
	}
	
	public function corrigeWH($baseW, $baseH, $path, $dest){
		$oldimg = $this->my_imagecreate($path);
		$size = getimagesize($path);
		#Tamanhos atuais
		$w = $size[0];
		$h = $size[1];
	
		#Base da proporção
		$bW = $baseW;
		$bH = $baseH;
	
		#Novos tamanhos
		$nW = 0;
		$nH = 0;
	
		if($h > $w){
			$nW = $w;
			$nH = floor($bH * $nW / $bW); #Aplicando a proporção
			$posY = round(($nH/2)-($h/2));
	
			$newimg = imagecreatetruecolor($nW, $nH);
			$bg = imagecolorallocate($newimg, 255, 255, 255);
			imagefill($newimg, 0, 0, $bg);
	
			imagecopyresampled($newimg,$oldimg,0,$posY,0,0,$nW,$nH,$w,$h);
		}else{
			$nH = $h;
			$nW = floor($bW * $nH / $bH);
			$posX = round(($nW/2)-($w/2));
	
			$newimg = imagecreatetruecolor($nW, $nH);
			$bg = imagecolorallocate($newimg, 255, 255, 255);
			imagefill($newimg, 0, 0, $bg);
	
			imagecopyresampled($newimg,$oldimg,$posX,0,0,0,$nW,$nH,$w,$h);
		}
		imagedestroy($oldimg);
		$bg = NULL;
	
		$this->finaliza($newimg, $dest, 100);
	
		imagedestroy($newimg);
		$oldimg = $newimg = NULL;
	}
	
	public function diminuir($nw, $nh, $source, $dest, $rotate = NULL) {
		$size = getimagesize($source);
		#Tamanhos atuais
		$w = $size[0];
		$h = $size[1];
	
		$simg = $this->my_imagecreate($source);
		$dimg = imagecreatetruecolor($nw, $nh);
		$bg = imagecolorallocate($dimg, 255, 255, 255);
		imagefill($dimg, 0, 0, $bg);
		$bg = NULL;
	
		$wm = $w/$nw;
		$hm = $h/$nh;
	
		$h_height = $nh/2;
		$w_height = $nw/2;
	
		if($w > $h) {
			$adjusted_height = $h / $wm;
			$half_height = $adjusted_height / 2;
			$int_height = $half_height - $h_height;
			imagecopyresampled($dimg,$simg,0,-$int_height,0,0,$nw,$adjusted_height,$w,$h);
		} elseif(($w < $h) || ($w == $h)) {
			$adjusted_width = $w / $hm;
			$half_width = $adjusted_width / 2;
			$int_width = $half_width - $w_height;
			imagecopyresampled($dimg,$simg,-$int_width,0,0,0,$adjusted_width,$nh,$w,$h);
		} else {
			imagecopyresized($dimg, $simg, 0, 0, 0, 0, $nw,$nh,$w,$h);
		}
		imagedestroy($simg); $simg = NULL;
	
		if($rotate){
			$white = imagecolorallocate($dimg, 255, 255, 255);
			$dimg = imagerotate($dimg, $rotate, $white);
			$white = NULL;
		}
	
		$this->finaliza($dimg, $dest);
		imagedestroy($dimg); $dimg = NULL;
	}
	
	public function finaliza($img, $path){
		$ext = $this->extensao;
		switch($ext) {
			case 'gif':
			@imagegif($img,$path);break;
	
			case 'jpg':
			case 'jpeg':
			@imagejpeg($img,$path,$this->jpgQuality);break;
	
			case 'png':
			@imagepng($img,$path);break;
	
			default: $img = NULL; break;
		}
	}
	
	public function my_imagecreate($source){
		$ext = $this->extensao;
		switch($ext) {
			case 'gif':
			$img = imagecreatefromgif($source);break;
	
			case 'jpg':
			case 'jpeg':
			$img = imagecreatefromjpeg($source);break;
	
			case 'png':
			$img = imagecreatefrompng($source);break;
	
			default: $img = NULL; break;
		}
	
		return $img;
	}
}

Página de Downloads do TAM Kids – Deu 3 dias de trampo essa página.

Nos últimos tempos, andei melhorando o site TAM Kids, postei sobre ele um tempo atrás. Estou fazendo a migração de todas as páginas para HTML, pensa no ódio neh, tendo que fazer várias adaptações para IE6 e IE7, mas tudo bem, to aprendendo bastante.

Os resultados com SEO principalmente já estão aparecendo, melhoras nas colocações e novas keywords, é um trabalho cansativo, mas está valendo apena, quem fica feliz é o Fabito, responsável pela atualização do conteúdo, agora com painel administrativo ele está economizando horas para atualizar e fazer revisões.

Hoje, inclui o módulo de segurança completo, definindo para cada grupo de usuários suas áreas pertinentes, e se tudo der certo, a partir de amanhã, vou implantar um sistema de log, pro caso de algum erro, termos histórico do que foi alterado e do dono do erro, rsrsrs. A galera não costuma gostar muito, mas enfim.

Agora falta a página de jogos, destino em destaque, que particularmente vai ser bem difícil de implementar, e depois vou partir pro maior desafio, a HOME, vários eventos, muitos sliders e sons, viva ao jQuery. rsrsrsrs.

O blog inteiro pede resolução máxima, sendo de um puta designer o bagulho só podia ser extremamente rico em detalhes.

Recortei as imagem da melhor forma que encontrei, ainda assim ficamos pelos 700Kb, mas ficou muito bom.

PSD Proposto

Quando recebi o layout a primeira coisa que pensei foi: “Tenho que fazer o possível para deixar o mais fiel possível ao psd“. Deu um bom trabalho, mas trouxe aprendizagem, não parece possível, mas a cada layout aprendo algo a mais.

Diagramação fiel ao PSD

Mais detalhes sobre os prêmios na página da ABEMD e no blog da e|ou

Os prêmios foram:

TAM KIDS - Bronze

Detalhes sobre o TAM Kids.

Lupa Citroën - Ouro

A parte WEB do projeto da lupa consistia em um sistema em ASP para que o publico interno acompanhasse tudo sobre a Peugeot e seus beneficios. Com emissão de relatórios de acesso e de cadastros a ferramenta apresente um grande número de acessos mensais.

Guarda-sol Peugeot - Prata

Disco Interativo Peugeot - Prata

O site foi criado para funcionar corretamente no IE6 (Não fui eu que quis assim…), utilizamos jQuery, para dar um efeito legal, e para as páginas não ficarem tão longas, assim facilita  a leitura dos tópicos, nada muito espetacular.

SuAmérica Uso Consciente

No desenvolvimento optamos por ignorar por completo o IE6, os usuários que o utilizam deram sorte, pq não ficou tão ruim, só perdeu alguns efeitos de transparência e de sombra.

Novo site da Fabiana Cozza

Criei o site, preocupado com o peso em KB,  o Designer, utilizou muitas imagens, como a imagem de fundo que começou com 700K e consegui deixa-la com 200K mais ou menos. A preocupação com SEO foi muito grande também, exigi bastante do pessoal da redação, principalmente na definição das palavras chaves.

O site tem uma brincadeira legal para os amantes de futebol, foi criado um Quiz com várias perguntas sobre os maiores times de São Paulo.

Placar 40 anos - Onde o esporte se reinventa

No começo a minha idéia é divulgar mais os jobs que faço, como um portifólio, mas já teve algumas vezes que quis colocar pra fora a raiva que eu sentia sobre algum assunto, e simplesmente não tinha onde, então não sei bem em que vai se resumir o conteúdo.

Os prováveis temas que posso escrever estão dentro da minha profissão, ou seja, Css, HTML, PHP, Javascript, Joomla, WP,  mas não vou rotular o blog com isso.

Nesse projeto o cliente também pediu um sistema de controle para os pacientes de corrida.

O sistemas tem 3 grupos, administrativo, médicos e pacientes. Os adms podem fazer o cadastro de médicos e pacientes, os médicos acessão os dados, laudos, fotos e vídeos de todos os pacientes a ele vinculados, e os pacientes têm acesso aos seus dados, inclusive com fotos com observações, comentários dos médicos e o laudo médico.

O sistema ficou muito prático, para os 3 personagens e ao que parece teve grande sucesso.

O sistema conta com cadastros de alunos, docentes, controle de notas e faltas, impressão de boletim entre outros.

Página inicial

O link do site era http://fmadm.fm.usp.br/ataad acho que ainda está no ar.

Consulta de Crachá