[JS] Selecionando um intervalo de datas no Datepicker a partir do JSON

js

Durante o desenvolvimento Front-end nos deparamos constantemente com o desafio de relacionar o retorno de dados da aplicação com a interface que o usuário acessa efetivamente. Neste artigo apresentamos uma solução JavaScript para selecionar um determinado intervalo de datas no Datepicker a partir do JSON.

Introdução

JSON é um formato leve que pode ser interpretado ou gerado com facilidade e é completamente independente da linguagem utilizada. Estas qualidades fazem com que ele seja ideal para troca de dados.

O primeiro passo é analisar a estrutura do objeto que foi criado para o estudo:

[
   {
      "title":"Evento 1",
      "start":"22/05/2015",
      "end":"25/05/2015"
   },
   {
      "title":"Evento 2",
      "start":"28/05/2015",
      "end":"30/05/2015"
   },
   {
      "title":"Evento 3",
      "start":"03/06/2015",
      "end":"03/06/2015"
   }
]

Continue Lendo “[JS] Selecionando um intervalo de datas no Datepicker a partir do JSON”

Anúncios

Onze IDE’s de programação em ambiente Linux

Muitos usuários migram para o Linux, mas não podem dispensar as suas tarefas de programador. Para facilitar sua pesquisa pela “IDE perfeita” segue uma lista com 10 opções para o universo Linux. Lembrando que, livre de comparações com outros sistemas ou programas, essas 10 opções podem suprir completamente suas necessidades. Continue Lendo “Onze IDE’s de programação em ambiente Linux”

Mozilla lança primeiro Firefox Developer Edition de 64 bits

A Mozilla lançou ontem a versão de número 38 da Developer Edition do Firefox. O navegador, voltado para desenvolvedores a fim de testar novos recursos, traz pela primeira vez uma versão de 64 bits para Windows.

Uma versão de 64 bits tem um espaço de endereço bem maior do que os 4GB que limitam a versão 32 bits e, com o crescimento de aplicativos para o navegador, assim como jogos, é chegada a hora de começarem a aparecer as novas versões dos browsers. A imagem abaixo, por exemplo, foi tirada de um game sendo construído na Unreal Engine para a Developer Edition do Firefox.

DevEditionEpic

Capaz de acessar novos registros e instruções do hardware, a versão de 64 bits do Firefox promete também ganhos em velocidade, de maneira “significativa” no JavaScript, por exemplo. E o maior espaço de endereço permite que o navegador use a proteção de memória do hardware e melhore a efetividade do ASLR (Adress Space Layout Randomization), dificultando a produção de malware.

Novidades Continue Lendo “Mozilla lança primeiro Firefox Developer Edition de 64 bits”

[série] A estrutura e a semântica do HTML5 – Parte 3 (final)

… Continuação. Parte 3 do artigo/tutorial A estrutura e a semântica do HTML5

Ferramentas

Bem, chegou a hora de falar sobre as ferramentas. Talvez você espere que eu fale aqui sobre o Dreamweaver – afinal, bem ou mal, é o editor mais popular. Mas não, não falarei do Dreamweaver, nem de nenhuma ferramenta da Adobe.

Vou comentar aqui sobre três ferramentas que acho bem mais interessantes para o nosso trabalho (afinal, são as ferramentas que eu uso no meu trabalho). A primeira é a IDE Aptana Studio 3, a segunda é o editor Sublime Text 2, e a terceira é o HTML5 Boilerplate.

Aptana Studio 3

Aptana

Aptana (http://www.aptana.com/products/studio3) é uma IDE Open Source multi-plataforma para desenvolvimento web baseada no Eclipse, e sempre se destacou como um dos melhores editores para HTML, CSS e Javascript.

Nessa versão 3, o Aptana trás diversas novidades, entre elas o suporte integrado a PHP, Ruby on Rails e Python. Mas entre as novidades que mais me agradaram está o suporte ao HTML5 e ao CSS3, além do Zen Coding que antes necessitava da instalação de um plugin, e agora também está integrado aoAptana.

Aptana possui um dos melhores (senão o melhor) assistentes de desenvolvimento de código, que inclui informações sobre o nível de suporte para cada elemento nos principais navegadores. Nessa versão 3.0 ele traz suporte na criação de HTML, CSS, JavaScript, PHP e Ruby, além de suportar as mais recentes especificações HTML5 e CSS3.

Também é possível personalizar o seu ambiente de desenvolvimento, ampliando os recursos por meio de scripts com centenas de comandos personalizados, que o Aptana apresenta de acordo com o contexto do tipo de documento que estivermos editando.

Sublime Text 2

Sublime Text

Sublime Text (http://www.sublimetext.com/) foi o editor que desde a primeira vez que utilizei, me apaixonei e não larguei mais. Isso porque ele é muito leve, sem frescuras, limpo e com visual muito agradável.

É um editor simples, mas com funções muito úteis. Com ele você pode otimizar uma série de tarefas com recursos de auto-completar, repetir ações, construção automática e criação de macros, além de poder personalizar teclas de atalho, menus e barra de ferramentas.

A interface do Sublime Text te dá a possibilidade de dividir a tela em várias janelas, mudar as cores, visualizar uma miniatura de todo o código e navegar por abas entre documentos. Além de tudo isso, ele dá suporte para uma vasta gama de linguagens, como C, C++, C#, CSS, HTML, Haskell, Java, LaTex, PHP, Ruby, SQL, XML, JavaScript, Groovy e várias outras. Sem dúvida nenhuma, esse é o editor que eu recomendo para o seu trabalho.

HTML5 Boilerplate

HTML5 Boilerplate

HTML5 Boilerplate (http://br.html5boilerplate.com/) nada mais é do que um template HTML5 para servir como base aos seus projetos. Ele foi criado utilizando os melhores modelos de HTML/CSS/Javascript, com as melhores práticas de normalizações cross-broswer, otimizações de desempenho, e até mesmo de recursos opcionais como cross-domain para Ajax e Flash. Possui um arquivo .htaccess de configuração do Apache com regras de cache preparado para o seu site oferecer vídeos em HTML5, usar @font-face, comprimir com gzip, entre outras coisinhas mais.

HTML5 Boilerplate definitivamente é a melhor opção para você começar a trabalhar com HTML5 a partir de uma base sólida e bem construída. Você pode tanto baixá-lo através do site, como também pode gerá-lo através do Aptana Studio 3, no momento da criação de um projeto.


Gostou do post? Achou as informações úteis, ou falta alguma coisa? Comente e deixe sua opinião, vamos compartilhar informação 😉

[série] A estrutura e a semântica do HTML5 – parte 2

… Continuação da série sobre  A estrutura e a semântica do HTML5.

Charset

A metatag Charset é usada para indicar a codificação de caracteres que a nossa página está utilizando. No exemplo abaixo, estamos indicando uma codificação de caracteres do tipo:

<meta charset="utf-8">

Essa metatag foi simplificada em relação a forma que era utilizada na versão anterior do HTML. Porem, a forma antiga ainda é suportada no HTML, apesar de não recomendada:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

A semântica das novas marcações

Em todas as páginas da Web existem divisões básicas referentes aos tipos de conteúdo que são colocados em cada parte do layout, como cabeçalho, rodapé ou menu de navegação.

Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões. Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas as situações, e criando seus próprios padrões de nomeclaturas através dos atributos id ou class.

No HTML5 foram criadas diversas tags semânticas para indicar aos user-agents quais conteúdos estão sendo inseridos em cada uma das divisão da página, organizando e padronizando o desenvolvimento.

Anatomia do HTML5

Cabeçalho com o elemento <header>

O elemento <header> é usado para definir o cabeçalho de uma página ou sessão, e pode conter logo, títulos, menu de navegação, campo de busca, etc.

<header>
   <img alt="logo" src="/img/logo.png">
   <h1>Entendo a estrutura e semântica do HTML5</h1>
   <form action="www.enderecodosite.com.br/search" id="searchform" method="get">
       <label for="s">Pesquisa</label>
       <input type="text" placeholder="Pesquisa" id="s">
       <input type="submit" value="Pesquisa" class="submit">
   </form>
</header>

Dentro do <header> podemos também inserir o elemento <hgroup>, que serve para agrupar dois ou mais elementos de títulos (h1 até h6), organizando-os hierarquicamente. O elemento <hgroup> foi descontinuado e não deve mais ser usado.

O site http://destroyafteruse.com/ utiliza a marcação <header> em seu cabeçalho, como podemos ver (de forma simplificada) logo abaixo.

<header>
	<h1><a href="http://destroyafteruse.com/">Agent</a></h1>
	<p id="site-description">Disruptive Innovation &amp; Strategic Product Design</p>
	<div id="logo"><a href="http://destroyafteruse.com/"><img src="logo.gif"></a></div>
	<p class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></p>	                
        <nav>
		<ul>
			<li><a href="http://destroyafteruse.com/category/news">News</a></li>
			<li><a href="http://destroyafteruse.com/about-agent">ABOUT AGENT</a></li>
			<li><a href="http://destroyafteruse.com/category/missions">Top Missions</a></li>
			<li><a href="http://destroyafteruse.com/the-way-of-the-agent">THE AGENT WAY</a></li>
			<li><a href="http://destroyafteruse.com/business-units">Business Units</a></li>
			<li><a href="http://destroyafteruse.com/services">SERVICES</a></li>
			<li><a href="http://destroyafteruse.com/our-process">Our Process</a></li>
			<li><a href="http://destroyafteruse.com/category/the-agents">The Agents</a></li>
			<li><a href="http://destroyafteruse.com/category/press">Press</a></li>
			<li><a href="http://destroyafteruse.com/jobs">JOBS</a></li>
			<li><a href="http://destroyafteruse.com/meeting-point">Meeting point</a></li>
		</ul>
	</nav>
</header>

destroyafteruse.com

Continue Lendo “[série] A estrutura e a semântica do HTML5 – parte 2”

Como ser um dev frontend usando Linux

Muita gente me pergunta:

Você trabalha com frontend e usa Linux? Como faz pra usar Photoshop?

Como se front-end só trabalhasse com Photoshop. Mas vem comigo que te mostro.

Trabalhar com desenvolvimento frontend envolve muito código, por isso Linux – ao menos pra mim – é a melhor solução. Usar uma distribuição que não te deixe na mão e facilite a instalação de pacotes é essencial. No momento estou usando duas distros:Ubuntu Gnome – porque o Unity é muito palha – e Elementary OS.

As duas resolvem bem qualquer tipo de problema.

Uso o Terminator no lugar do terminal padrão do Ubuntu (dica do Carlos Becker, que inclusive tem uma coleção de dotfiles bem da hora).

Para codar, Sublime Text com algumas configurações específicas.

Shutter, para tirar prints da tela.

Gimp para tratar alguma imagem – não fico mexendo muito com imagens, uso mais para fazer as capas dos posts do blog.

Fogger para criar apps a partir de web apps – um que faz uma frente é o DevDocs.io

Mas e quando você recebe um layout no Photoshop, como você abre os PSDs?

Bom, já rodei Photoshop no Wine, – fica razoavelmente bom, com poucos bugs, mas fica pesado – já testei em máquina virtual, mas fica lento também. Até pouco tempo atrás, essas eram as únicas soluções.

Mas – por incrível que pareça – a Adobe pensou nos devs frontend que, como eu, gostam de usar Linux e só usam Photoshop para fazer recorte de imagens, pegar medidas, fontes, tamanhos de fontes, cores, etc., e lançou um serviço lindo chamadoProject Parfait, onde você faz exatamente isso: pode fazer upload de um PSD (ou vários), e extrair cores, fontes, exportar imagens, etc.

Agora você não tem mais desculpinha pra ficar usando Windows! E nem falo nada de programador BACK-END que usa Windows!

Don't Panic - It's not Windows

Mas brincadeiras à parte, use o sistema que você se sentir mais confortável, e te fizer mais produtivo! 😀 Desde que não seja Windows.

E você, qual o seu sistema operacional? E qual o seu workflow? Comente!

Post ooriginal por blog da2k

Guia do Front-end das galáxias

Oi pessoal!

Hoje trago uma dica de leitura boa para quem é ou deseja se tornar, assim como eu, um bom desenvolvedor front-end. Para quem não sabe, um front-end é o responsável pela parte amigável do site, as funcionalidades de interação com o usuário (a grosso modo).

Essas dicas valem ouro, e o nobre Davidson Fellipe (@davidsonfellipe) entrega de mão beijada em um slide ‘da hora’. Sirva-se a vontade.