Categoria: Desenvolvimento

Conheça 4 programadoras que fizeram história

 

Para comemorar o Dia Internacional da Mulher, o Fórum Econômico Mundial destacou mulheres que fizeram história, na tecnologia e no mundo.

Para comemorar o Dia Internacional da Mulher, o Fórum Econômico Mundial destacou mulheres que fizeram história, na tecnologia e no mundo.

Algumas delas já são ícones culturais, como Grace Hopper, enquanto outras ganharam popularidade recentetemente, com adaptações cinematográficas como “O Jogo da Imitação” ou livros como “Os Inovadores”, de Walter Isaacson, que traça a história da atual revolução tecnológica.

Ada Lovelace

Filha do poeta britânico Lord Byron, Ada Lovelace cresceu famosa na Inglaterra vitoriana. Sua própria contribuição para o mundo foi em outra área: a matemática.

Lovelace trabalhou nas máquinas calculadoras de Charles Babbage, um dos pioneiros da computação programável digital, que a chamava de “encantadora dos números”.

Ela é considerada a fundadora da ciência da computação, assim como a primeira programadora do mundo.

Lovelace foi visionária também ao entender conceitos de programação que seriam provados muito depois, como a capacidade que máquinas têm para manipular símbolos e “não apenas números”, e por criar o primeiro algoritmo feito para ser processado por máquinas.

Leia: Por que todo profissional deve aprender programação?

Margaret Hamilton

“Quando eu comecei, ninguém sabia o que nós estávamos fazendo. Era como o Velho Oeste. Não havia cursos. Ninguém nos ensinou”, lembra Margaret Hamilton, que em 2016 foi condecorada com a Medalha Presidencial da Liberdade, a mais alta honraria civil americana.

Não é para menos. Hamilton foi diretora de engenheria de software do projeto responsável pelo código do Apollo Guide Computer, que guiou o voo da missão Apollo 11 e levou os primeiros homens à lua.

O projeto em si foi desenvolvido dentro do MIT Instrumentation Laboratory e começou do zero. O resultado foi o código para o primeiro computador portátil de história.

O peso da responsabilidade era grande. “Eu sempre imaginava as manchetes dos jornais [em caso de acidente], que apontariam para o que aconteceu e isso apontaria para mim.”

Ainda na ativa, Hamilton ajudou a criar o campo de engenharia de software, publicou mais de 130 papers e relatórios e tornou-se fundadora e CEO da própria empresa, a Hamilton Technologies.

Leia: Saiba como se tornar um programador em 8 passos

Grace Hopper

Uma figura muito querida da indústria, a almirante Grace Murray Hopper desenvolveu linguagens de programação acessíveis, que usavam palavras e não números para funcionar.

“O que eu buscava ao começar [a programar] em inglês era trazer todo um novo grupo de pessoas para usar o computador facilmente”, explicou.

Ela intuiu – corretamente – que, para ampliar o impacto dessa tecnologia, era preciso criar linguagens mais simples. Seus trabalhos levaram ao primeiro compilador para computadores à primeira linguagem que usava palavras e não números como comandos.

Uma das primeiras linguagens deste tipo, a COBOL (Common Business Orientated Language), foi popularizada por Hopper.

Hopper também foi a responsável por associar as palavras “bug” e “debug” a problemas de computadores depois de encontrar uma mariposa em uma máquina.

Nos anos 1980, em uma entrevista ao programa de televisão americano “60 Minutes”, ela falou sobre a dificuldade de aceitação que computadores enfrentaram no começo de sua carreira.

É um comentário que faz sentido ainda nos dias de hoje, quando o mundo se prepara para uma série de novas mudanças tecnológicas que terão efeitos sociais, econômicos e políticos.

“As pessoas tinham medo de computadores, assim como eu me lembro que havia pessoas que morriam de medo de telefones e não chegavam nem perto deles”, disse. “Havia pessoas que achavam que luz de gás era segura, mas luz elétrica não. Sempre passamos por isso com todas as mudanças.”

Joan Clarke

Colega e amiga próxima de Alan Turing, um dos maiores gênios da história da computação, Joan Clarke trabalhou com ele no departamento britânico responsável por quebrar códigos na Segunda Guerra Mundial.

Formada em matemática, ela fez parte da equipe que construiu alguns dos primeiros computadores do mundo, que tinham como objetivo desvendar as mensagens criptografadas pela famosa máquina Enigma, pertencente aos alemães.

Em 1939, Turing e sua equipe criaram uma máquina capaz de classificar milhares de combinações de letras rapidamente, o que permitiu que diversos códigos fossem revelados – e há quem estime que a guerra durou dois anos a menos graças a essa conquista.

A ideia de uma mulher criptoanalista era tão impensável na época que Clarke precisou ser contratada como linguista, já que não havia um processo para contratá-la de outra maneira, mesmo sem nenhum conhecimento sobre a profissão. Em um formulário da época, ela se divertiu ao preencher: “Profissão: linguista. Idiomas: nenhum”.

Em 1944, tornou-se vice-chefe da Hut 8, onde ficava a equipe de Turing durante a guerra. Três anos depois, ganhou honrarias do governo britânico e se tornou Membro da Ordem do Império Britânico.

As 12 melhores bibliotecas de gráficos para desenvolvedores web

 

Desenvolvedores web não se dão bem com planilhas, mas também não precisam mais: existem outras maneiras de representar dados

Muitos de vocês estão profundamente envolvidos em projetos de desenvolvimento web. Pensando nisso, Rohit Boggarapu, engenheiro de software na Adobe, escreve abaixo para compartilhar suas ferramentas gráficas de visualização de dados voltadas aos desenvolvedores web favoritas.

É um ponto de atenção. A diferença entre os dados e nossa interpretação deles pode ser gigantesca, sobretudo quando expostos em formatos ininteligíveis dentro de planilhas – talvez o pior modelo de todos.

Desenvolvedores web não se dão bem com planilhas, mas também não precisam mais: existem outras maneiras de representar dados, e Boggarapu oferece dicas, atalhos e conselhos para escolher a melhor para você.

Google Charts

A imensa biblioteca de informações disponíveis no Google Charts é um extraordinárioponto de partida para os que pretendem iniciar uma representação gráfica usando o JavaScript. Ali, você encontrará um grande número de códigos comentados, além de instruções passo a passo, que serão úteis na inclusão de gráficos HTML5/SVG em suas páginas da web.

Se você procura avançado nível de personalização e mais gráficos do que o native 18 do Google, abaixo veremos opções melhores e com maior variedade de recursos.

Ideal para: Desenvolvedores que buscam soluções flexíveis e bem documentadas.

MetricsGraphics

A MetricsGraphics é uma biblioteca gráfica desenvolvida em D3.js, mas otimizada para visualização e apresentação de dados de uma série temporal. Embora limitada a gráficos de linha, de dispersão, de colunas, histogramas e tabela, a ferramenta é excelente para as funções descritas.

Similar ao Google Charts, o Metrics Graphics – que é um produto Mozilla – apresenta uma vasta gama de documentos e exemplos de códigos no site. O que torna fácil a compreensão dos iniciantes.

Embora seja uma solução simplificada, o aprendizado ganha fluidez graças aos divertidosexemplos interativos (observação de ovinis??).

Ideal para: Desenvolvedores que buscam uma solução rápida e eficiente sem a necessidade de percorrer um emaranhado de códigos para tal.

FusionCharts

A FusionCharts suporta vanilla JavaScript, jQuery, Angular e outras bibliotecas conhecidas. Os mais de 90 gráficos e 1000 mapas o transformam em uma solução muito mais completa que o Google Charts ou o MetricsGraphics. Veja asespecificações técnicas e conheça a lista completa das representações gráficas disponíveis.

Levando em conta a escalabilidade de seu aplicativo ou site, é importante lembrar que a escolha de uma biblioteca gráfica incompleta pode representar um erro grave. O FusionCharts é utilizado por empresas como a Microsoft, Google e IBM. O que o torna uma ferramenta escalável mesmo para os requisitos corporativos.

Ideal para: Desenvolvedores que precisam de grande variedade de gráficos customizados.

Leia: Como montar um portfólio de desenvolvedor e apresentar meu trabalho?

Epoch

O Epoch é uma ferramenta desenvolvida em d3.js especificamente. Por isso, desenvolvedores podem usar gráficos em tempo real em seus projetos de aplicativos e sites. Além de amplamente documentado, o Epoch é de código aberto e 100% gratuito. Isso o torna uma boa opção aos que não estão dispostos a investir recursos na aquisição de uma solução.

Com cinco diferentes tipos de gráficos – seja básico ou de tempo real – o Epoch é compatível com ferramentas como o FusionCharts ou o Highcharts. No entanto, é o que apresenta melhor desempenho na representação de dados em tempo real.

Ideal para: Gráficos simples e flexíveis.

ECharts

O ECharts, da Baidu, é uma excelente ferramenta de gestão de dados já expostos a representações gráficas, pois apresenta uma característica única: O Drag-Recalculate permite que os usuários transfiram seções de dados de um gráfico para outro e que esses mesmos gráficos sejam recalculados em tempo real. Além disso, o EChart é desenvolvido para big data e pode traçar instantaneamente até 200.000 pontos em um gráfico cartesiano usando oZRender, uma biblioteca canvas feita especificamente para ECharts.

Brinque com o código do gráfico exposto acima e descubra do que o ECharts é capaz.

Ideal para: Código aberto, gestão de dados em tempo real através da ferramenta de recálculo.

D3.js

Embora não seja a ferramenta mais fácil de ser usada, não há como negar o poder do d3.js no desenvolvimento de gráficos em JavaScript. Muitas outras bibliotecas se desenvolvem porque apresentam todas as funcionalidades esperadas desse tipo de ferramenta: suporte HTML, SVG e CSS e, contanto que os gráficos não estejam desatualizados, incluem ainda uma enorme quantidade de contribuições criadas pelo usuário.

É válido pesquisar a respeito deste curso de visualização de dados e d3.js, pois, dada a complexidade de compreensão do D3.js, é preciso contar com uma sólida base de conceitos como essa.

Ideal para: Especialistas em gráficosque não se intimidem com as dificuldades de codificar.

Sigma

O Sigma, comparado a outras ferramentas já expostas, é um recurso mais segmentado, pois se dedica exclusivamente ao desenho de gráficos. É desenvolvido em Canvas, WebGL e apresenta API pública. Por isso, dispõe de uma grande variedade de plugins disponibilizados pela comunidade no GitHub. Este é um exemplo do que se pode fazer com o Sigma js:

O Sigma é altamente responsivo, permite interatividade por meio de toque e possibilita que os desenvolvedores adicionem suas próprias funções aos scripts, renderizando contornos às especificações.

Ideal para: Desenvolvedores que demandam uma ferramenta poderosa de desenho gráfico.

Leia: O que é data storytelling e como utilizá-la nos negócios

Highcharts

O popular Highcharts cria gráficos interativos sem que haja dependência de plugins. A API de gráficos flexíveis da Highcharts é utilizada por empresas como a Nokia, Twitter, Visa e Facebook.

O Highcharts é gratuito quando o uso não é comercial. No entanto, se houver pretensão de ganhar dinheiro com a ferramenta (e obter suporte enquanto o faz), é necessário pagar US$ 590 pela licença de desenvolvedor.

Veja um exemplo de gráfico desenvolvido no Highcharts:

Se tiver interesse em aprender mais a respeito do Highcharts, acesse este interessante tutorial.

Ideal para: Desenvolvedores que tenham a intenção de criar gráficos contando com o auxílio de um suporte técnico que, tal qual o produto, apresenta alto padrão de qualidade. Independentemente do nível de complexidade.

dc.js

dc.js é uma biblioteca Javascript de código aberto, ideal para a criação de representações gráficas interativas. Nesse tipo de gráfico interativo, qualquer alteração permite que todo o resto da ferramenta reaja de acordo com a manipulação feita em um dado específico. Segue exemplo:

Com exceção de alguns cursos online, a biblioteca é ensinada aos alunos exclusivamente por esse modelo. Assim, usando esse documento como base, é possível criar sua própria versão.

O dc.js não cria gráficos tão variados como algumas das ferramentas dessa lista (ECharts ou Google Charts), mas cumpre muito bem a função de explorar conjuntos de dados multidimensionais.

Ideal para: Desenvolvedores em busca de um painel de gráficos relacionais para um determinado projeto.

dygraphs

O dygraphs, originalmente desenvolvido pelo Google e hoje disponível no Google Correlate é uma verdadeira joia das ferramentas de criação de representações gráficas. Pode ser usado em projetos intensos, pois tem a capacidade única de traçar milhões de pontos de dados sem perder a velocidade – o que acaba tornando seu design (digamos, despojado) uma falha absolutamente tolerável.

O Dygraphs é ativamente apoiado e desenvolvido pela comunidade. Foi isso que transformou uma ferramenta interna do Google em um recurso público e amplamente utilizado. A fonte está aberta para exibição no GitHub.

Ideal para: Desenvolvedores que procuram uma ferramenta dedicada a traçar grandes conjuntos de dados.

Vega

A Vega é uma biblioteca baseada em d3.js para criar, compartilhar e salvar projetos de visualização. É composta de ferramentas e sistemas que, dentre outras coisas, rivalizam com o d3 sem a necessidade de escrever códigos. A Vega traduz JSON em gráficos SVG ou HTML5 que – embora nada extravagante – cumpre bem sua função.

Já que essabiblioteca não demanda programação (apenas a capacidade de editar valores em um arquivo JSON), trata-se de uma excelente alternativa ao d3, pois apresenta menor complexidade e os mesmo recursos.

Ideal para: Desenvolvedores que demandam a capacidade do d3 sem a complexidade de aprender tudo do zero.

Leia: Tutorial para iniciantes em Git e GitHub: faça seu primeiro commit

NVD3

A última ferramenta nesta lista é desenvolvida em d3, que é o precursor da maioria das bibliotecas gráficas de código aberto. O NVD3 é um conjunto de componentes que permite aos desenvolvedores a criação de gráficos reutilizáveis. Uma grande variedade de modelos e códigos pode ser explorada nosite do NVD3. Essa é, sem dúvida, a melhor maneira de desenvolver conhecimento a respeito da ferramenta.

Como você pode ver, o estilo do NVD3 é um pouco mais refinado do que o de outras ferramentas:

Além de suportar 11 tipos de gráficos (incluindo área, linha, barra, pizza, dispersão), é compatível com todos os navegadores modernos, do IE10 em diante.

Ideal para: Desenvolvedores com conhecimento em d3 que procurem gráficos reutilizáveis.

Se você está procurando por mais informações sobre as ferramentas de representação gráfica são as mais adequadas para o seu projeto, confira este esclarecedor quadro técnico comparativo (em inglês).

Embora essa lista seja voltada para desenvolvedores web, algumas das ferramentas aqui são tão fáceis de usar que você nem precisa ser um desenvolvedor para começar a trabalhar com elas.

Com a gama de exemplos interativos disponíveis online personalizar códigos, ficou fácil até para quem está apenas começando no desenvolvimento web.

_Artigo originalmente publicado no_ blog americano da Udacity

Bem-vindo ao editor Gutenberg

 

Sobre montanhas e primeiras impressões

O objetivo deste novo editor é tornar a inclusão de conteúdo rico no WordPress simples e agradável. Este post é todo composto de pedaços de conteúdo — algo parecido com os blocos LEGO — que você pode movimentar e com eles, interagir. Movimente o cursor pela tela e você vai notar que os vários blocos são ressaltados por linhas e setas. Clique nas setas para reposicionar os blocos rapidamente, sem o medo de perder alguma coisa no processo de copiar e colar.

O que você está lendo agora é um bloco de texto, o bloco mais básico de todos. O bloco de texto tem seus próprios controles para que seja movimentado livremente pelo post…

…como este aqui, que é alinhado à direita.

Os títulos também são blocos separados, o que ajuda no esboço e organização do seu conteúdo.

Uma imagem vale por mil palavras

Lidar com imagens e mídias com todo o cuidado é um dos focos básicos do novo editor. Esperamos que você ache bem mais fácil do que antes a maneira de adicionar legendas ou exibir as imagens em tela cheia.

Beautiful landscape
Se o seu tema permitir, você verá um botão “largo” na barra de ferramentas da imagem. Experimente.

Tente selecionar e remover ou editar a legenda. Agora você não precisa se preocupar com selecionar por engano a imagem ou outro texto e com isso estragar a apresentação.

A ferramenta de adição

Imagine tudo o que o WordPress pode fazer, está disponível para você rapidamente e no mesmo lugar na interface. Sem necessidade de lembrar sobre tags de HTML, classes ou lembrar da sintaxe complicada de shortcodes. Esse é o espírito por trás do adicionador, o botão (+) que você verá pelo editor, que permite navegar em todos os blocos de conteúdo disponíveis e adicioná-los ao seu post. Plugins e temas são capazes de registrar os seus próprios, abrindo todo o tipo de possibilidades para edição e publicação.

Experimente, você pode descobrir coisas que o WordPress já é capaz de adicionar nos seus posts e que você nem sabia. Aqui vai uma lista do que você já pode encontrar:

  • Textos & títulos
  • Imagens & vídeos
  • Galerias
  • Incorporados, como YouTube, Tweets ou outros posts do WordPress.
  • Blocos de layout, botões de curtir, imagens em destaque, separadores etc.
  • E listas como esta aqui, é claro 🙂

Edição visual

Uma enorme vantagem dos blocos é que você consegue editá-los no lugar e manipular o conteúdo deles diretamente. Em vez de ter campos para editar, por exemplo, o código de uma citação ou o texto de um botão, você pode alterar o conteúdo diretamente. Experimente editar a seguinte citação:

O editor se propõe a criar uma nova experiência de construção de posts e páginas, facilitando a criação conteúdos mais elaborados. Ele tem “blocos” para facilitar aquilo que atualmente envolveria shortcodes, HTML personalizados ou uma confusão de elementos incorporados.

Matt Mullenweg, 2017

A informação que corresponde à origem da citação é um campo separado, similar às legendas sob as imagens, de forma que a estrutura da citação esteja sempre certa, mesmo que você selecione, modifique ou remova essa origem. Também fica fácil adicioná-la de volta.

Os blocos podem ser qualquer coisa que você precisar. Por exemplo, você pode querer adicionar uma citação tímida como parte da composição do texto, ou talvez prefira exibir uma em estilo gigante. Todas essas opções estão disponíveis no adicionador.

Você pode mudar a quantidade de colunas em suas galerias mexendo no controle deslizante do inspetor de bloco da barra lateral.

Rico em mídia

Se você combinar os novos alinhamentos largura ampla e largura total com galerias, você pode criar uma boa apresentação visual muito rapidamente:

A acessibilidade é importante — não se esqueça dos atributos alt de imagem

É claro que uma imagem ocupando a largura total pode ficar muito grande. Mas às vezes a imagem vale a pena.

A galeria acima tem somente duas imagens. É uma maneira mais fácil de ter um visual atraente, sem ter que lidar com floats, um código CSS que pode ser bem complicado. Você também pode facilmente converter a galeria de volta a imagens individuais, usando o botão de transformação de blocos.

Qualquer bloco pode usar estes alinhamentos, até o bloco de mídias incorporadas, que já é responsivo por padrão:

Você consegue montar o bloco que quiser, estático ou dinâmico, decorativo ou simples. Aqui vai um bloco com citação em destaque:

Código é poesia

A comunidade WordPress

Se você quiser saber mais sobre como criar blocos adicionais ou se estiver interessado em ajudar no projeto, acesse o repositório do GitHub.


Obrigado por testar o Gutenberg!

👋