sábado, 24 de setembro de 2016
quinta-feira, 22 de setembro de 2016
Modelos de Templates
Alguns modelos de Templates!
Em breve estarei postando mais.
Halcyonic
Minimaxing
10 dicas que desenvolvedores web iniciantes devem saber
Veja estas 10 dicas para desenvolvedores novatos e comece sua carreira com o pé direito
Se você é um desenvolvedor iniciante, pode ser confuso sobre onde você deve começar no mundo do desenvolvimento web, já que o ramo é amplo e oferece muitas opções de escolha. Há muitas perguntas a serem feitas, tais como “Que linguagem de programação quero aprender?” ou “Eu deveria saber sobre front-end ou apenas back-end?”, e existem, literalmente, centenas de outras.
Mas, para que você não fique tão perdido, esta lista de 10 dicas que desenvolvedores web iniciantes devem saber realmente pode ajudá-lo a iniciar sua carreira como desenvolvedor ou, caso já tenha começado, pode servir de norte para você perceber se realmente escolheu a área certa ou se vai mudar.
Este é um artigo traduzido do original 10 Things Beginner Developers Should Know, do blog1stwebdesigner – e sofreu pequenas adaptações.
Decida quais habilidades você quer
Ao iniciar na carreira de desenvolvedor web, você realmente precisa se concentrar em alguma coisa e aceitar o fato de que não é possível ser um “generalista”. Acredite: mesmo dando muita vontade de atuar em vários e vários campos do desenvolvimento web, isso é impossível! Além do mais, geralmente o mercado valoriza mais um expert numa área do que um “faz tudo web”.
Não há nada de errado em querer em ser excelente em vários campos, mas você realmente não poderá fazer isso no começo. O que você pode fazer é centrar seus esforços no aprendizado em uma habilidade e se tornar um perito nesse campo. Pode ser PHP, Ruby, ASP.net ou C #, mas tem que ser bom no que faz… Muito bom! Depois de dominar um deles, você pode seguir em frente, mas não faça isso até que você tenha grande conhecimento nesse campo.
Esta dica também é bom para front-end designers, que sempre começam com HTML e CSS, depois passam para JavaScript, jQuery, AJAX, ou quaisquer outros que estiverem interessados . Claro, é possível aprender HTML e CSS ao mesmo tempo, mas isso é porque eles meio que trabalham em conjunto. Você não pode realmente dominar PHP e ASP.net ao mesmo tempo – a menos que você gaste 20 horas de estudos por dia, o que, definitivamente, não é recomendado -, portanto, você tem que adquirir suas habilidades uma a uma.
Mas, já que você é um novato e, provavelmente, não deve saber muito sobre linguagens de programação hardcore, escolher uma área para começar pode ser complicado, mas há uma solução: pense no que você quiser desenvolver: se for temas para WordPress, então seu caminho é o PHP; se for sistemas de gestão personalizados, tente ASP.net; jogos de iPhone, aprender C# e assim por diante.
Basta pesquisar um pouco sobre o que cada linguagem pode fazer e começar a aprender. E, neste caminho, você certamente vai aprender que é possível fazer as mesmas coisas usando diferentes linguagens…
Aprenda direito
Outra dica para novatos é, independentemente da linguagem que você escolher, aprenda direito! Se você aprender HTML codificando layouts com tabelas, isso não é nada certo – e eu tenho certeza que outros especialistas concordam comigo. Codificar usando os mais recentes padrões da web parece inútil para alguns, mas é realmente importante e é altamente recomendado a aprender assim, já que isso não vai só melhorar a velocidade de carregamento de seus projetos, mas também será mais fácil e fará mais sentido.
Google é o seu melhor amigo
Realmente não importa que tipo de problema que você tem, estou certo de Google pode resolvê-lo (na maioria dos casos, pelo menos).
Fóruns de programação são altamente recomendados, também, mas, antes de postar uma pergunta em algum fórum, tente buscar uma solução no Google porque, na maioria das vezes, você vai encontrar uma resposta para sua pergunta – ou, pelo menos, uma resposta que irá guiá-lo para resolver a questão.
Analise o código alheio
Isso vale principalmente para designers, mas, às vezes, desenvolvedores têm conhecimentos de design de front-end e fazem seus próprios layouts antes de começar a codificá-los. É importante olhar outros sites para entender como eles são codificados. Se você gosta de algum estilo ou elemento de um site, olhe para o código fonte e o analise! O Firebug funciona maravilhosamente bem nestes casos. Esta é a maneira pela qual a maioria das pessoas aprende a codificar.
O que não é aconselhado é roubar o design do alheio. Isso é imperdoável e digno de um “Que deselegante!”, além de mostrar uma falta de respeito e tremenda falta de profissionalismo, mas, geralmente, a comunidade de desenvolvedores não vê maiores problema em “pegar emprestado” alguns trechos de código (caso isso não infrinja alguma lei ou patente, claro).
Portanto, fica a “regrinha”: você pode até copiar algum código aqui e ali – este é o caminho para aprender a fazer as coisas – mas nunca roube um design!
Entre numa rede de conhecimentos
Outra coisa importante é participar de uma rede dentro de seu campo de conhecimento. Nunca é demais conhecer outros desenvolvedores e designers. Um cenário não muito interessante é você ter que voltar trás e buscar coisas no Google; um cenário melhor é você ter discussões interessantes e poder obter ajuda através de discussões com pessoas da mesma área. Você pode até colaborar com seu colegas desenvolvedores em projetos maiores, o que, quase sempre, é bom para todos os envolvidos.
Você está perto de conseguir um projeto mas não tem certeza se você pode lidar com o tipo de trabalho solicitado? Recomende um de seus colegas desenvolvedores! Ele(s) provavelmente irá(ão) executar o trabalho melhor do que você – se for(em) especialista(s) nessa área específica – e você pode fechar algum tipo de parceria em algum momento futuro. Faça parte de uma rede e a mantenha ativa e sempre por perto. Há sempre a demanda por um desenvolvedor que esteja “ao redor”.
A própria ideia de tradução deste artigo surgiu no grupo de discussão html5-css3-brasil e viu como isso foi uma boa coisa? ;-)
Entenda os designers
É altamente aconselhável que você compreenda os designers, caso não tem ideia de como eles trabalham. E isso vale tanto para designers gráficos quanto para front-end designers.
É sempre bom para aprender como eles trabalham e porque eles podem entregar páginas estáticas que realmente não correspondem aos mais recentes padrões da web. Aprenda a conversar com eles e explicar o que está errado e saber pedir para corrigir seus próprios erros. Dessa forma, sua relação de trabalho será mais próxima e o resultado bem melhor.
Use ferramentas profissionais
Apesar de HTML e CSS poderem ser feitos até com o Bloco de Notas, isso não é recomendado. E, se isso não é aconselhado para HTML e CSS, é igualmente desaconselhado para PHP, ASP.net ou Ruby. Trabalhe com ferramenta profissionais como Eclipse, Aptana, NetBeans ou outra qualquer, mas use o que os profissionais usam, caso contrário você não será um deles!
Esse tipo de ferramenta verifica erros, tem autocomplete e dá sugestões durante a codificação. Há uma razão pela qual Eclipse e NetBeans são 2 dos IDEs (Integrated Development Environment ou Ambiente de Desenvolvimento Integrado) mais usados no mundo: eles fazem o trabalho em grande estilo!
Então comece a trabalhar agora, mesmo, com alguma ferramenta profissional, caso ainda não o tenha feito!
Deixe as coisas legais por último
Cada linguagem tem a sua própria “versão cool”. Por exemplo, HTML tem HTML5, CSS tem CSS3, JavaScript e AJAX tem jQuery e assim por diante. É muito melhor se você aprender a linguagem básica e depois estudar mais até chegar no estágio cool. E, também, as coisas “cool” trabalham a partir dos elementos básicos, então você não será capaz de desenvolver e entender um controle deslizante com jQuery se você não compreender o JavaScript básico.
Mantenha-se informado e atualizado
É sempre bom se manter informado e atualizado sobre o que está acontecendo no mundo do desenvolvimento web, em especial da(s) área(s) que você atua. Você pode fazer isso através da leitura de feeds, livros “de verdade”, blogs e screencasts. Fique atualizado e certifique-se de que você é um dos primeiros a oferecer produtos desenvolvidos com a tecnologia mais recente.
No começo, pode não funcionar muito (as pessoas podem querer manter o “velho” até que as novas tecnologias mostrem seu valor), mas, certamente, também há aquelas pessoas que querem ter um produto totalmente novo, desenvolvido com as mais recentes tecnologias – e isto lhe dará uma vantagem e fará você conhecido no ramo.
Continue com o processo de aprendizagem
Depois de se tornar um especialista no campo que escolheu, trilhe seu caminho rumo ao aprendizado de outras linguagens e/ou áreas de atuação. Fique de olho aberto nas linguagens mais importantes e aprenda aquelas que julgar serem as mais interessantes. Quando você domina duas, vá para a terceira e assim por diante.
E continue até que não haja muito mais para aprender – embora, como já foi dito, isso seja impossível. Este é o caminho para o sucesso!
Conclusão
É bastante comum que desenvolvedores iniciantes passem por tempos difíceis neste campo profundo do desenvolvimento web, mas estas dicas servem justamente para ajudar que cada um encontre seu caminho.
Nem sequer importa muito por onde começar, tudo o que importa é você comece! Isso geralmente é o que leva mais tempo, então não desperdice estes dias preciosos e comeceagora a estudar e a desenvolver a web! ;-)
Fonte:http://desenvolvimentoparaweb.com/miscelanea/10-dicas-desenvolvedores-web-iniciantes-devem-saber/
Aprenda CSS3
CURSO DE CSS3
Apostila
A apostila de CSS, utilizada no curso, pode ser utilizada livremente.
Programa do curso
- O que é CSS
- Seletores complexos
- Gradiente
- Columns
- Transform
- Transições e animações
- Bordas
- Múltiplos backgrounds
- Módulo Template Layout
- Cores
- Paged media
- @font-face
- Presentation-levels
Documentos do W3C
- Link para página Cascading Style Sheets W3c Internacional.
- CSS Backgrounds and Borders Module Level 3.
- CSS Color Module Level 3.
- CSS Image Values and Replaced Content Module Level 3.
- CSS Multi-column Layout Module.
- CSS3 Selectors - Selectors Level 3.
- CSS Fonts Module Level 3.
- CSS3 Module: Paged Media.
- CSS Text Level 3.
- CSS Template Layout Module.
- CSS Transitions Module Level 3.
- CSS Animations Module Level 3.
- CSS 2D Transforms Module Level 3.
- Flexible Box Layout Module.
- Media Queries.
- Official W3C Test Suites.
Listas de discussão
Fonte:http://www.w3c.br/Cursos/CursoCSS3
Tutorial jQuery: o que é e como usar o jQuery!
Tutorial jQuery: o que é e como usar o jQuery!
“Escrever menos e fazer mais” É este o lema de jQuery, uma biblioteca de funções de Javascript, de formato leve, sintaxe simples e fácil de aprender. A sua aparição remonta a Janeiro de 2006, tendo sido anunciado no BarCampNYC, sendo que até à data tem tido constantes actualizações, novos addons e melhorias. Veio ajudar a resolver problemas de incompatibilidades entre os navegadores, reduzir o tamanho de código e introduzir a reutilização de código através de plugins. Além disso, permite a implementação de recursos de CSS1, CSS2 e CSS3 e trabalha com AJAX e DOM. Neste tutorial, vou abordar os temas mais usados em jQuery, desde os selectores, à sintaxe, ou desde a integração AJAX aoCSS. Partilhe e comente deixando-nos a sua opinião sobre o tutorial!
1. ANTES DE COMEÇAR
2. O QUE É JQUERY?
- É uma biblioteca de funções Javascript
- É uma biblioteca com o lema “Escrever menos e fazer mais”
- Contém os seguintes recursos
3. COMO ADICIONAR A BIBLIOTECA JQUERY
A biblioteca jQuery é guardada num ficheiro Javascript, que contém as funções jQuery. Para adicionar a uma página web, utilize o seguinte código
1
2
3
| <head><script type="text/javascript" src="jquery.js"></script></head> |
Existem 2 versões disponíveis para download, uma simplificada, e outra descomprimida, para correcção de erros ou leitura. Ambas podem ser baixadas em jQuery.com
Alternativamente, se não pretender baixar os arquivos, poderá utilizar os ficheiros alojados nos servidores da Google ou da Microsoft
Google
1
2
3
| <head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head> |
Microsoft
1
2
3
| <head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script></head> |
4. SINTAXE JQUERY
A sintaxe jQuery é orientada para seleccionar elementos HTML e de seguida efectuar acções nos mesmos.
A sintaxe básica é $(selectorHTML).acção()
Trocando por palavras, o simbolo $ é para definir jQuery, (selectorHTML) é onde se introduz o elemento e acção() é onde irão ser introduzidas as acções a efectuar nos elementos.
Exemplos:
1
2
3
4
5
6
7
| $(this).hide() // Esconde o elemento actual$("p").hide() // Esconde todos os parágrafos$("p.teste").hide() // Esconde todos os parágrafos com a classe="teste"$("#test").hide() // Esconde o elemento com o id="teste" |
5. SELECTORES JQUERY
Os selectores permitem-lhe seleccionar e manipular elementos HTML. É possível seleccionar por nome, nome de atributo ou conteúdo.
1 – Selectores de elementos
1
2
3
4
5
| $("p") selecciona os elementos <p>$("p.intro") seleccionar todos os elementos <p> com class="intro".$("p#demo") selecciona o primeito elemento <p> com id="demo". |
2 – Selectores de Atributos
jQuery utiliza expressões XPath para seleccionar elementos com dados atributos.
1
2
3
4
5
6
7
| $("[href]") // Selecciona todos os elementos com um atributo href$("[href='#']") // Seleccionar todos os elementos com um valor href igual a "#"$("[href!='#']") // Selecciona todos os elementos com um valor href não igual a "#"$("[href$='.jpg']") // Selecciona todos os elementos com um atributo href que acabe em ".jpg" |
3 – Selectores CSS
No exemplo a seguir alteramos a cor de fundo de todos os elementos “p” para amarelo
1
| $("p").css("background-color","yellow"); |
6. EVENTOS JQUERY
6.1 – Eventos
Os eventos jQuery são peça chave. As funções que lidam com os eventos são chamados quando “algo acontece” no HTML. Quando isto acontece, o termo “accionado por um evento” é muito conhecido e frequentemente utilizado.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});</script></head><body><h2>Isto é um titulo</h2><p>Isto é um parágrafo.</p><p>Isto é mais um parágrafo.</p><button>Clica-me</button></body></html> |
No exemplo acima, uma função é chamada quando o evento de clique no botão é accionado:
$(“botão”).click(função() {código}
E esta função esconde todos os elementos <p>:
$(“p”).hide();
6.2 Utilizar funções em ficheiro separado
Se a sua página web contém inúmeras páginas, e pretende que as suas funções jQuery tenham fácil acesso para manutenção, pode introduzi-las num ficheiro .js separado. Nos casos citados acima, temos introduzido as funções jQuery na secção <head>. No entanto, algumas vezes é preferível introduzir as funções num ficheiro, e chamá-las através do atributo “src”. Vejamos:
1
2
3
4
| <head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="a_minha_funçao.js"></script></head> |
6.3 – Conflitos de nomes jQuery
jQuery usa o símbolo $ como atalho para jQuery. Outras bibliotecas Javascript também utilizam este símbolo para as funções. No entanto, para evitar conflitos com jQuery, o método noconflict()permite atribuir um nome alternativo, por exemplo “jq”, em vez de utilizar o simbolo $.
7. EFEITOS JQUERY
7.1 Mostrar e Esconder ( hide(), show() )
Com jQuery é possível mostrar, esconder elementos HTML com estas funções.
1
2
3
4
5
6
| $("#hide").click(funçao(){ $("p").hide();});$("#show").click(funçao(){ $("p").show();}); |
Ambos podem funcionar em conjunto com parâmetros opcionais: “speed” e “callback”.
1
2
3
| $(selector).hide(speed,callback)$(selector).show(speed,callback) |
O parâmetro “speed” especifica a velocidade de mostrar/esconder, e pode ter os valores “slow”, “normal”, “fast” ou em milisegundos:
1
2
3
4
5
| $("botao").click(funçao(){$("p").hide(800);)); |
O parâmetro “callback” é o nome de uma função a ser executada depois da função hide/show estar completa.
7.2 Alternar ( toggle() )
O método toggle() permite alterar a visibilidade de elementos HTML que usam a função show/hide. Os elementos escondidos são mostrados, e os elementos visíveis são escondidos.
1
| $(selector).toggle(speed,callback) |
Tal como referido anteriormente, o parâmetro “speed” aceita valores “slow”, “normal”, “fast” ou em milisegundos.
1
2
3
4
5
| $("botao").click(funçao(){$("p").toggle(850);)); |
7.3. Deslizar ( slideDown(), slideUp(), slideToggle() )
Os métodos de deslizamento do jQuery alteram gradualmente a altura dos elementos seleccionados, através dos seguintes métodos
1
2
3
4
5
| $(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback) |
Mais uma vez, relembro que o parâmetro “speed” aceita valores “slow”, “normal”, “fast” ou em milisegundos.
O parâmetro “callback” é o nome de uma função a ser executada depois da função hide/show estar completa.
7.3.1 Exemplos Práticos
slideDown()
1
2
3
4
5
| $("flip").click(function(){ $(".panel").slideDown();)); |
slideUp()
1
2
3
4
5
| $("flip").click(function(){ $(".panel").slideUp();)); |
slideToggle()
1
2
3
4
5
| $("flip").click(function(){ $(".panel").slideToggle();)); |
7.4 Desvanecer ( fadeIn(), fadeOut(), fadeTo() )
Os métodos de desvanecer alteram gradualmente a opacidade dos elementos seleccionados
jQuery tem os seguintes métodos de desvanecimento:
1
2
3
4
5
| $(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback) |
Os parâmetros de “speed” e “callback” são os mesmos de anteriormente, e o parâmetro “opacity” permite desvanecer para uma opacidade escolhida, como irá ser demonstrado no exemplo mais à frente.
7.4.1 Exemplos práticos
fadeIn()
1
2
3
4
5
| $("botão").click(funçao(){ $("div").fadeIn(2000);)); |
fadeOut()
1
2
3
4
5
| $("botão").click(funçao(){ $("div").fadeIn(2000);)); |
fadeTo()
1
2
3
4
5
| $("botão").click(funçao(){ $("div").fadeTo("slow",0.30);)); |
7.5 Animações jQuery
As animações são introduzidas através do seguinte código
1
| $(selector).animate({parametros},[duracao],[e asing],[callback]) |
O parâmetro chave é “parametros” onde irão ser introduzidas propriedades CSS que vão ser animadas. Podem ser animadas várias propriedades ao mesmo tempo.
1
| animate({width:"60%",opacity:0.3,marginTop:"0.3in",fontsize:"2em"}) |
O segundo parâmetro é a duração, que define o tempo da animação. Aceita valores “slow”, “fast”, “normal” e em milisegundos.
Vejamos um exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script type="text/javascript">$(document).ready(funcao(){ $("botao").click(funcao(){ $("div").animate({left:"29px"},"slow"); $("div").animate({fontsize:"4em","slow"); ));)); |
1
| </script> |
7.6 Exemplos de efeitos jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| $(selector).hide()$(selector).show()$(selector).toggle()$(selector).slideDown()$(selector).slideUp()$(selector).slideToggle()$(selector).fadeIn()$(selector).fadeOut()$(selector).fadeTo()$(selector).animate() |
8. FUNÇÃO CALLBACK
Vamos agora ficar a conhecer o que é o “callback” em jQuery.
A função callback é executada depois de a animação estar concluída. As declarações Javascript são executadas linha-a-linha. No entanto, com as animações, a próxima linha de código pode ser executada mesmo que a animação não esteja concluída, o que pode levar a erros. Para prevenir estas situações, cria-se a função callback. Esta não será chamada antes de animação estar terminada.
Exemplo:
1
2
3
| $("p").hide(1000,function(){ alert("O parágrafo foi escondido");}); |
9. MANIPULAÇÃO HTML
jQuery tem ferramentas muito poderosas que permitem alterar e manipular atributos e elementos HTML.
9.1 Alterar conteúdo HTML
Utilizando esta sintaxe $(selector).html(content) alterámos o conteúdo de um dado parâmetro.
1
| $("p").html("Escola de Criatividade"); |
9.2 Adicionar conteúdo HTML
Utilizando a sintaxe $(selector).append(content), pode-se anexar informação aos elementos seleccionados.
Utilizando a sintaxe $(selector).prepend(content), pode-se “des-anexar” informação dos elementos seleccionados.
1
2
| $("p").append("Escola de Criatividade");$("p").prepend("Escola de Criatividade"); |
9.3 Inserir conteúdo depois de elementos HTML
Utilizando a sintaxe $(selector).after(content) pode ser introduzido conteúdo depois do elemento escolhido.
1
| $("p").after(" Escola de Criatividade."); |
9.4 Inserir conteúdo antes de elementos HTML
Utilizando a sintaxe $(selector).before(content) pode ser introduzido conteúdo antes do elemento escolhido.
1
| $("p").before("Escola de Criatividade."); |
10 – MÉTODOS CSS
10.1 Método css()
jQuery tem um método bastante importante para manipulação CSS que é css(). Tem três sintaxes diferentes:
css(nome) – Devolve o valor de uma propriedade CSS
css(nome,valor) – Define um valor numa propriedade CSS
css({propriedades}) – Define múltiplos valores em múltiplas propriedades
10.2 Devolver propriedade CSS
Utilize o método css(nome) para devolver uma propriedade CSS escolhida, que será extraída do primeiro elemento encontrado que tenha a propriedade.
1
| $(this).css("background-color"); |
10.3 Definir propriedade e valor CSS
Utilize css(nome,valor) para definir as propriedades de uma propriedade CSS para todos os elementos que combinam com o introduzido.
1
| $("p").css("background-color","yellow"); |
10.4 Definir múltplas propriedades e valores CSS
Utilize css({propriedades}) para definir uma ou mais proriedades/valores para os elementos seleccionados
1
| $("p").css({"background-color":"yellow","font-size":"200%"}); |
10.5 Métodos de Altura e Largura ( height () e width() )
Altera a largura e altura para os elementos seleccionados
1
2
3
| $("#div1").height("200px"); // altura$("#div1").width("200px"); // largura |
11 – JQUERY E FUNÇÕES AJAX
AJAX significa “Asynchronous JavaScript and XML”. É uma técnica para criar páginas rápida se dinâmicas
AJAX permite que páginas sejam actualizada de forma assincronizada alterando pequenas quantidade de dados com o servidor a fazer o trabalho. Isto significa que é possivel actualizar partes da página sem actualizar toda a página.
11.1 Escreva menos, faça mais
A função jQuery load() é uma função AJAX simples mas muito poderosa, que pode ser utilizada com a seguinte sintaxe $(selector).load(url,data,callback).
Utilize o selector para definir os elementos HTML a alterar e o parâmetro url para especificar o endereço web para os dados.
11.2 AJAX de baixo nível
A sintaxe para o baixo nível das funções AJAX é $.ajax(opçoes) que oferece mais funcionalidade do que as funções de alto nível, como “load”,”get” entre outros, mas é também um pouco mais difícil de utilizar. O parâmetro opções aceita nomes/valor que definam dados url, passowords, tipos de dados, filtros, funções de erro, entre outros.
12 – DICAS
- Função Documento Pronto
Esta função permite-lhe garantir que o conteúdo jQuery só é acedido depois de a página estar completamente aberta. Isto evita que o jQuery tente aceder a elementos da página que ainda não tenham sido baixados.
1
2
3
4
5
| $(document).ready(function(){ // Funções jQuery entram aqui}); |
Aceitam-se mais dicas e truques para adicionar e criar uma extensa e útil lista. Participe!
