julho 2012 - Fabiana Tavares
JQuery Carousel II
A algum tempo fiz uma postagem sobre o JQuery Carousel, no entanto ele utilizava de botões de ação(next e prev), dessa vez vou ensina-los a fazer um Jquery Carousel automático e com botões diferenciados. Vamos lá?
Primeiro não vamos precisar baixar o jquery, vamos utilizar o link direto da API do Google, então dentro da sua tag Header coloque o seguinte comando:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> <script type="text/javascript" src="js/js.js"></script>
Na qual o primeiro script puxa o link do api do Google, o segundo script puxa o link do script do carousel, e o terceiro é a configuração que você irá escolher para o seu efeito carousel, lembre-se de criar o seu arquivo script, ou então coloque-a dentro da tag head.
O efeito que escolhi para o exemplo foi o "fead", porem existem outros disponíveis no site, então vejamos como ficou o comando:
// JavaScript Document $(document).ready(function() { $("#slideshow ul#slide").cycle({ fx : 'fade', speed : 2000, timeout : 5000, pager : '#nav', pagerAnchorBuilder : function(idx, slide) { return '#nav li:eq(' + (idx) + ') a'; } }); });
$("#slideshow ul#slide").cycle({
pager : '#nav',
Vamos entender um pouco desse código:
Primeira observação o selector #slideshowé o nome da div onde irá rodar o efeito de transição de slides, ul#slide é o nome recebido pela lista não ordenada. fx : 'fade' é o nome do efeito que escolhi para utilizar, speed : 2000, é a velocidade da transição de slides, timeout : 5000, é tempo em que um slide ficara disponível para leitura, pager : '#nav', é o nome dado a ul de lista não ordenada dos botões de links. pagerAnchorBuilder , é uma função para poder navegar entre os slides independente da ordem.
Agora na pagina onde você deseja que fique a sua transição de slides coloque os seguintes comandos:
<div id="slideshow"><!--Inicia a Transição de Slides !--> <ul id="nav"> <li id="link-1"><a href="#" title="index1"></a></li> <li id="link-2" ><a href="#" title="index2"></a></li> <li id="link-3" ><a href="#" title="index3"></a></li> </ul> <ul id="slide"> <li class="portfolio"><img src="img01"/></li> <li class="blog"><img src="img02" /></li> <li class="noticia"><img src="img03" /></li> </ul> </div><!--Termina a Transição de Slides!-->
<div id="slideshow"><!--Inicia a Transição de Slides !-->
<li id="link-1"><a href="#" title="index1"></a></li>
<li id="link-2" ><a href="#" title="index2"></a></li>
<li id="link-3" ><a href="#" title="index3"></a></li>
<li class="portfolio"><img src="img01"/></li>
<li class="blog"><img src="img02" /></li>
<li class="noticia"><img src="img03" /></li>
</div><!--Termina a Transição de Slides!-->
Preserve o nomes de id tanto o da div quanto as de ul, caso faça opção por mudar as de li para facilitar a identificação de cada conteúdo que você criou, tenha bastante cuidado, pois estes nomes são importantes para a definição da folha de estilos, conforme mostra o exemplo abaixo.
#slideshow{width:690px; height:200px; margin-top:18px; margin-left:5px; margin-bottom:5px;}
Acima temos um exemplo de como eu fiz o estilo da minha div #Slideshow, você claro, irá configurar de acordo com a sua necessidade, de tamanho, background, margens, etc.
Abaixo tempos novamente o significado dos nomes das li, no meu caso cada uma identifica uma imagem diferente da minha transição de slides.
.portfolio{background:url('img01') no-repeat;} .blog{background:url('img02') no-repeat;} .noticia{background:url('img03') no-repeat;}
.portfolio{background:url('img01') no-repeat;}
.blog{background:url('img02') no-repeat;}
.noticia{background:url('img03') no-repeat;}
Conforme mostra o comentário abaixo, a ul e nav controlam os botões de ação.Vc pode criar seus próprios botões e com efeito sprite, como estes que eu fiz como mostra a imagem abaixo, e é neste botões que se baseiam o restante do css abaixo.
/*format ul nav controla os bullets e os efeitos sprites*/ #nav{float:left; width:122px; height:18px; margin-left:620px; margin-top:184px; position:relative; z-index:10;} #nav li{float:left; width:18px; height:15px; background:url('images/bullets.png') no-repeat; margin-left:5px; cursor:pointer; display:block; overflow:hidden; } #nav li a{display:block; float:left; height:15px; width:18px;} #link-1{background-position: -54px 0px !important} #link-2{background-position: -27px 0px !important} #link-3{background-position: -1px 0px !important} #nav li#link-1.activeSlide{background-position: -54px -17px !important;} #nav li#link-2.activeSlide{background-position: -27px -17px !important;} #nav li#link-3.activeSlide{background-position: -1px -17px !important;}
/*format ul nav controla os bullets e os efeitos sprites*/
#nav{float:left; width:122px; height:18px; margin-left:620px; margin-top:184px;
position:relative; z-index:10;}
#nav li{float:left; width:18px; height:15px; background:url('images/bullets.png') no-repeat;
margin-left:5px; cursor:pointer; display:block; overflow:hidden; }
#nav li a{display:block; float:left; height:15px; width:18px;}
#link-1{background-position: -54px 0px !important}
#link-2{background-position: -27px 0px !important}
#link-3{background-position: -1px 0px !important}
#nav li#link-1.activeSlide{background-position: -54px -17px !important;}
#nav li#link-2.activeSlide{background-position: -27px -17px !important;}
#nav li#link-3.activeSlide{background-position: -1px -17px !important;}
Para ver o exemplo funcionando corretamente, acesse o site:
www.frtavares.com.br
Tente fazer o jquery carousel, no inicio é um pouco desafiador, mas precisamos insistir para pegar o jeito, caso tenha mais duvidas por favor deixe um comentário, assim que puder eu irei responder, espero que tenham gostado e boa sorte!
Publicado em 30/07/2012 09/11/2016 Categorias FerramentasTags jquery
Contrato de Prestação de Serviços: Dicas
Durante a faculdade, aprendi diversos métodos que envolvem pequenos e grandes projetos, mas foi trabalhando em micros, pequenas, medias e grandes empresas que pude adquirir conhecimento sobre tal.
Hora você elabora todo o seu conteúdo (Software ou Site) muito bem feito, e depois basta correr atrás das vendas. Será?
O contrato de Prestações de serviços e muito utilizado por Freelancers, micro e pequenas empresas, tem por objetivo descrever o trabalho que será feito, os valores, os prazos, impedimentos, e descrição das ferramentas que poderão ser utilizadas, dentre outros fatores, após a conferencia do cliente ele irá assinar se concordar.
1 – Pesquisar contratos no Google.
Caso você ainda não tenha ideia de como elaborar o seu contrato de prestação de serviços faça uma busca no Google a respeito do assunto, com certeza você vai encontrar diversos modelos, que seguem uma mesma linha de raciocínio, mas tenha cuidado, pois, quem nunca ouviu por ai que "que a faculdade só te dá o básico e que se quiser alguma coisa basta procurar no google", bom acredito que não é bem assim, na verdade o Google deve ser utilizado sim igual a uma faculdade, ou seja, ele só vai te dar o básico, você é quem deve estudar o conteúdo e elaborar de maneira que atenda ao seu projeto, até porque copia é plagio, e justamente por existir diversos contratos, você pode acabar pegando um cheio de "entre linhas" e isto pode te complicar depois diante do questionamento do cliente.
2 – Seja Claro quanto ao conteúdo a ser desenvolvido.
Descreva de maneira precisa o que foi acordado verbalmente entre você e o cliente, evite termos técnicos, pois o cliente poderá não se lembrar de o que significa quando ler o contrato.
Determinar prazos para um trabalho é muito difícil, se você já possui uma carga de experiência então pode basear-se em projetos passados, caso não seja, procure utilizar ferramentas que contem o tempo enquanto você está programando alguma etapa dos novos trabalhos, isso irá te ajudar a determinar prazos para o futuro.
Lembre-se jogue este prazo para dias a mais, por exemplo, se você gasta 15 dias para elaborar um site simples, bom, jogue este prazo para 18 dias ou 20 dias. Pense que eventos inesperados podem acontecer, ou coloque isto também no contrato e converse com o cliente, explique que o prazo pode se estender em casos de eventos inesperados, como a falta de luz, e/ou linha telefônica, dentre outros fatores.
Pense se você trabalha em sábados, domingos e feriados. Pensou?
Essa é uma parte importantíssima dos prazos de um projeto, deixe claro no contrato se este será feitos em "DIAS UTEIS" ou "DIAS CORRIDOS", um erro desses pode deixar o seu programador na mão, ou é só mais uma tentativa de frustra-lo.
Eis mais uma parte importantíssima do Contrato, os valores. Separe bem os valores de acordo com os projetos adquiridos, ou seja, de um preço para o site, outro para as redes sociais, outro para o email marketing, deixe separado e claro.
Uma das partes mais difíceis para um prestador de serviços de websites é decidir se vai oferecer os serviços de hospedagem, ou se vai deixar isto por conta do próprio cliente. Conversei recentemente com amigos com maior experiência a respeito disto, boa se você está com um cliente na qual não pretende manter vínculos, então é mais indicado que você apenas o oriente a como obter registro de domínio e hospedagem e deixar que o mesmo faça as assinaturas com os dados próprios.
No entanto se você está com um cliente bacana e pretende continuar os vínculos, bom ai sim vale a pena facilitar o serviço e fazer você mesmo à hospedagem.
Mas estes dados precisam estar no contrato, ou seja, de quem será a responsabilidade pela hospedagem do site, caso seja você, coloque no contrato os valores e datas de pagamento do registro de domínio + hospedagem. Deixe claro também que o caso de "Não pagamento" no prazo correto, o site irá ser suspenso até que retome o pagamento, assim ele voltará ao ar após efetuar o pagamento.
Mais uma vez envolvendo os vínculos com os clientes, o sistema de suporte e manutenção é determinado a partir deste momento, coloque no contrato se o cliente irá ter suporte por um determinado período de dias, no caso de manutenção (trocas de textos, imagens, etc) deixe explicito qual será o valor cobrado para este serviço. Caso você opte por não ter vínculos com o cliente após entrega do site, coloque no contrato que ele (cliente) é livre para escolher qualquer outro para fazer a manutenção/atualização do site, já que o mesmo possui os dados FTP de acesso na hospedagem do site.
Outra parte importante a ser conversado com o cliente é a respeito do site (ou parte dele) ser editado pelo mesmo, nestes casos cobre um valor mais alto pelo trabalho, pois será um pouco mais trabalhoso fazer essa parte e você provavelmente não fará manutenções futuras no site.
7 – Treinamentos
Caso o site tenha uma área de edição, pense na possibilidade de oferecer um treinamento para o cliente, para não causar problemas, decida também se vai incluir o valor do treinamento no pacote completo e/ou aparte, afinal você poderá ser chamado outras vezes para dar este treinamento.
8 – Project CharterNão é Contrato de prestação de Serviços.
O Project Charter como o nome sugere é o "Termo de abertura do projeto" é um documento utilizado internamente pelos envolvidos no desenvolvimento do projeto, seja um Sistema WEB e/ou site.
Nele alem de conter o nome da Agencia/Organização, nome do projeto, versão e data de revisão e contem também assinatura dos envolvidos.
Em seu conteúdo tem a identificação do projeto, justificativa, objetivo dentre outros dados relevantes ao projeto e que só cabem a estas pessoas que estão trabalhando em seu desenvolvimento.
Mas este será um assunto aprofundado em nossas próximas postagens. Até lá pessoal.
Publicado em 12/07/2012 09/11/2016 Categorias Assuntos Gerais, Ferramentas, Gestão de ProjetosTags contratos, freela
Sistema de previsão do tempo em php
A alguns dias eu estava fazendo a área administrativa de um site, muito simples por sinal, e meio veio a mente que tipo de conteúdo eu poderia colocar que fosse útil ao meu cliente, e meu cliente é uma pessoa que praticamente passa o dia todo trabalhando na rua, sempre visitando seus clientes, então eu pensei: "poxa vou colocar o sistema de previsão do tempo do google", e foi muito útil, fiz algumas pesquisas e encontrei uma forma bem bacana de fazer o sistema, vou passar para vocês agora.
O primeiro passo é ir até a url e colocar os seguintes comandos:
Base: http://www.google.com/ig/api?weather=cidade,estado,país&hl=idioma
Com parâmetros: http://www.google.com/ig/api?weather=Belo Horizonte,Minas Gerais,Brazil&hl=pt-br
Coloque a cidade e o estado com espaços, não tem problema, se for junto o Google não reconhece.
Imediatamente ele irá gerar um arquivo XML, copie todo o texto XML e cole no seu editor(notepad, notepad++, dreamweaver) e salve-o como previsão.xml
Em seguida vamos criar um arquivo de classe, salve-o como previsão.class.php e coloque nele o seguinte código:
< ?php // Localização $cidade = 'Belo horizonte'; // Cidade $estado = 'Minas Gerais'; // Estado (sem abreviação!) $pais = 'Brazil'; // País (em inglês) $idioma = 'pt-br'; // Idioma de resposta (pt-br) // URL principal da API $googleWeather = 'http://www.google.com/ig/api'; // Montamos a URL que será chamada // Usamos a função urlencode() para substituir caracteres especiais $apiUrl = $googleWeather . '?weather=' . urlencode($cidade) . ',' . urlencode($estado) . ',' . urlencode($pais) . '&hl=' . $idioma; // Pegamos o resultado da API $resultado = file_get_contents($apiUrl); // Usamos o SimpleXML para pegar a resposta // O SimpleXML precisa receber valores em UTF-8, então usamos o uft8_encode() $xml = simplexml_load_string(utf8_encode($resultado)); // Separamos as informações encontradas $info = $xml->xpath('/xml_api_reply/weather/forecast_information'); $atual = $xml->xpath('/xml_api_reply/weather/current_conditions'); $proximos = $xml->xpath('/xml_api_reply/weather/forecast_conditions'); ?>
$cidade = 'Belo horizonte'; // Cidade
$estado = 'Minas Gerais'; // Estado (sem abreviação!)
$pais = 'Brazil'; // País (em inglês)
$idioma = 'pt-br'; // Idioma de resposta (pt-br)
// URL principal da API
$googleWeather = 'http://www.google.com/ig/api';
// Montamos a URL que será chamada
// Usamos a função urlencode() para substituir caracteres especiais
$apiUrl = $googleWeather . '?weather=' . urlencode($cidade) . ',' . urlencode($estado) . ',' . urlencode($pais) . '&hl=' . $idioma;
// Pegamos o resultado da API
$resultado = file_get_contents($apiUrl);
// Usamos o SimpleXML para pegar a resposta
// O SimpleXML precisa receber valores em UTF-8, então usamos o uft8_encode()
$xml = simplexml_load_string(utf8_encode($resultado));
// Separamos as informações encontradas
$info = $xml->xpath('/xml_api_reply/weather/forecast_information');
$atual = $xml->xpath('/xml_api_reply/weather/current_conditions');
$proximos = $xml->xpath('/xml_api_reply/weather/forecast_conditions');
E por fim na pagina em que você deseja que apareça o sistema de previsão do tempo coloque o seguinte código:
Previsão do Tempo - < ?php echo date('d/m/Y', strtotime($info[0]->forecast_date['data'])); ?> Cidade: < ?php echo $info[0]->city['data']; ?> Previsão Atual <'img src="http://www.google.com< ?php echo $atual[0]->icon['data']; ?>" alt="weather" '/> < ?php echo $atual[0]->temp_c['data']; ?>° C condition['data']; ?> Próximos dias < ?php foreach ($proximos AS $item) { ?> <'img src="http://www.google.com< ?php echo $item->icon['data']; ?>" alt="weather" '/> < ?php echo $item->day_of_week['data'];?> < ?php echo $item->low['data']; ?>/high['data']; ?>° C < ?php echo $item->condition['data']; ?> < ?php } ?>
Previsão do Tempo - < ?php echo date('d/m/Y', strtotime($info[0]->forecast_date['data'])); ?>
Cidade: < ?php echo $info[0]->city['data']; ?>
<'img src="http://www.google.com< ?php echo $atual[0]->icon['data']; ?>" alt="weather" '/>
< ?php echo $atual[0]->temp_c['data']; ?>° C condition['data']; ?>
< ?php foreach ($proximos AS $item) { ?>
<'img src="http://www.google.com< ?php echo $item->icon['data']; ?>" alt="weather" '/>
< ?php echo $item->day_of_week['data'];?>
< ?php echo $item->low['data']; ?>/high['data']; ?>° C < ?php echo $item->condition['data']; ?>
Para publicar este codigo eu precisei fazer duas moficações, e quando vocês forem inserir no codigo de vocês fiquem atendos para:
1 – juntar o espaço existente entre a tag do php " < ?php "
2 – retirem a aspas simples que está na tag de imagem <'img src=…
Espero que tenham gostado, boa sorte e até a próxima.
Publicado em 09/07/2012 09/11/2016 Categorias Ferramentas, PHPTags api, php, previsão do tempo
Como lidar com CRITICAS – Parte II
Pessoal, chegamos a segunda parte do nosso post, a primeira parte foi uma breve apresentação da situação ocorrida e na qual o foco foi o design, vamos continuar essa segunda postagem com os demais assuntos apontado por aquele que deve se achar "o cara".
Logo após despejar seus conhecimentos de design sobre essa que vos escreve, o "cara" decidiu apontar os fatores importantes para minha carreira das quais eu "provavelmente" não tinha conhecimento. O "Cara" comentou que eu deveria saber me vestir diante dos clientes, que eu deveria vê-lo em "ação" em palestras e seminários, utilizando inclusive de objetos de outras marcas para impressionar os clientes. Para essa parte tentei imaginar o seguinte, que ele deve pensar que vou no cliente da mesma forma como eu ia para a faculdade, de calça jeans, camisas do Linkin Park e tênis All Star.(Risos frenéticos), ou então ele deve pensar que vou ao cliente de calça Jeans rasgada e chinelo de dedo.
O que eu responderia neste caso, para alguém que não me conhece, e essa dica ridícula para alguém da minha idade e formação(desculpem a falta de modéstia)?
Pois é, sem modéstia eu responderia que, trabalho desde os 15 anos de idade, já passei por vários cargos que ninguém sabe, a não ser aqueles que realmente me conhecem, inclusive já trabalhei carregando chapas de madeira em uma das maiores madeireiras de BH. Também me formei aos 19 anos de idade como Técnica de Segurança do trabalho, existe algo mais complicado que lidar com peão de obra?
Até o momento passei por quatro empresas de TI, acabei de me formar e já estou pensando na pós-graduação, aulas de ética não me faltaram durantes esse 10 anos em que trabalho, ou seja, se comportar em um ambiente de trabalho ou com o cliente não é problema para mim, muito pelo contrário por tudo que passei, estou realmente pronta para tentar seguir com os meus negócios, mesmo que seja em segundo plano.
Mas Fabiana o que no fim das contas você respondeu para o "cara"? e o que você tem a dizer a nós no caso de passar por situações semelhantes a esta?
Bom naquele momento, eu respondi apenas: "Obrigado pelas dicas". Mas porque somente isto? Bom porque ele quis dar uma de cara "bonzão", que entende muito do assunto, e quando você responde com palavras rápidas e curtas, na verdade quem sai por cima é você, pois ele certamente não se dará como satisfeito e entenderá que (assim esperamos) que você não precisa dessa critica sem fundamentos, ou seja, uma critica que não é construtiva e nem destrutiva, a única diferença que ela irá causar em você é que, se te incomodar muito, você deve exatamente domina-la e utiliza-la para algo que te deixei conhecedor dos seus limites, no que você está muito a frente dessa pessoa, em que você tem para ser diferencial com as pessoas e os clientes. E eu utilizei como um ótimo meio de comunicação, neste POST para vocês. Aproveitei para reforçar meu compromisso com o cliente, com meus verdadeiros amigos, minha ética, e meu respeito pelas profissões da área de TI.
Publicado em 06/07/2012 09/11/2016 Categorias Assuntos GeraisTags assuntos gerais1 comentário em Como lidar com CRITICAS – Parte II