Maujor, o dinossauro da Web, vem aí novamente

Dinossauro da CSS ministra aulas no Unipê

Quem trabalha com desenvolvimento Web já deve ter ouvido falar no Dinossauro das CSS. Considerado um dos introdutores das CSS no Brasil, que é uma linguagem de formatação de interfaces para Web, Maurício Samy Silva ministrará o módulo denominado Desenvolvimento de Interfaces para Web, da Especialização em Desenvolvimento de Aplicações para Web do Centro Universitário de João Pessoa – Unipê. Mais conhecido como Maujor, na área das Tecnologias da Informação – TIs, o professor abordará as três tecnologias do desenvolvimento front-end, que são a HTML5, as CSS3 e a JavaScript.

Basicamente, o desenvolvimento front-end engloba o conjunto das tecnologias responsáveis pelo que aparece na tela de visualização de um dispositivo, como o computador. “Nesse módulo, vamos estudar as camadas de desenvolvimento front-end”, comentou. “A HTML5 é uma linguagem de estruturação destinada a fazer com que o navegador entenda e transforme a marcação em um texto estruturado com títulos, subtítulos, parágrafos, etc. As CSS3 se destinam a apresentação da página Web, definindo cores, posicionamento e a montagem do layout. A JavaScript é a linguagem que permite definir comportamentos dos componentes da página Web”, explicou Maujor.

Segundo o professor, que é autor de 13 livros destinados aos assuntos do desenvolvimento front-end, serão 16h de aula nos dias 11, 12 e 13 de agosto. Maujor informou que os estudantes deverão montar componentes de um site por meio de um estudo dirigido produzido por ele. “O objetivo é nivelar o conhecimento dos alunos e, em cima desse nivelamento, montar a página inicial de um site, mostrando aos alunos o que temos de mais atual e mais moderno na área do desenvolvimento front-end”, disse.

O tema é a página de entrada de um site de venda de materiais de construção, contendo um slide show, componentes de vendas, barras de navegação, rodapé, ícones, etc. Como meio auxiliar de instrução, usarei uma interface, criada por mim, para que os estudantes possam experimentar, em tempo real, os efeitos das principais funcionalidades das CSS3, para depois empregar na criação da página de entrada do site”, adiantou.

Sobre Maujor

Maujor é Engenheiro Civil formado pelo Instituto Militar de Engenharia – IME do Rio de Janeiro e exerceu o magistério no Exército Brasileiro com aulas nas disciplinas de matemática e geometria descritiva. Maurício Samy Silva criou, em 1º de agosto de 2003, o site maujor.com, que tem a finalidade de ensinar as técnicas CSS e os padrões Web em geral. “Quando comecei, adotei esse nome para o meu site e acabei ficando conhecido por esse nome”, revelou. Maujor começou estudando as CSS entre 1999 e 2000, depois de se aposentar, buscando novos conhecimentos. “Eu comecei a estudar as técnicas de desenvolvimento front-end com 56 anos, e hoje eu tenho 72 anos”.

Maujor ministra palestras e workshops em diversos eventos de TI pelo Brasil nas áreas de desenvolvimento Web. “Quando criei meu site, não havia tantos eventos de TI. Hoje, existem vários, tanto na área de back-end como de front-end. Quando começaram a aparecer estes eventos no Brasil, passei a ser convidado para proferir palestras”, disse. Os 13 livros publicados por Maujor têm sites específicos cujos links se encontram no portal livrosdomaujor.com.br, que complementam o aprendizado do leitor. “A teoria sem a prática nada vale e a prática sem a teoria é cega. Então, os exercícios constantes de todos os meus livros estão funcionando nos sites dos livros” comentou.

Especialização em Desenvolvimento de Aplicações para WEB

O coordenador do curso, prof. Dr. Rodrigo Fujioka, ressaltou que este é o segundo módulo da segunda turma da pós-graduação, e que as inscrições continuam abertas para os interessados. “Esse é o único curso de Especialização em Desenvolvimento de Aplicações para Web aqui na Paraíba, e que tem esse diferencial de trazer professores desse calibre. Então é uma oportunidade única aqui no estado. Para aqueles que têm interesse, ainda existem vagas. As matrículas podem ser realizadas até o módulo 3″, disse. As inscrições podem ser realizadas no portal unipe.br/pos.

Anúncios

10 softwares livres que podem substituir alguns produtos da Adobe Creative Suite

Por enquanto, a Adobe não liberou nenhuma versão oficial, de seus produtos, para o Linux. Independentemente dos motivos, profissionais que trabalham com esses softwares, e que decidiram mudar para o Linux, precisam encontrar alternativas que possam atender as suas necessidades tanto pessoais como de mercado. Existem diversos softwares livres que podem suprir muitas delas; e, até mesmo, se tornarem opções equivalentes. Assim, segue lista com 10 softwares livres que podem substituir alguns produtos da Adobe Creative Suite.

DIVERSAS OPÇÕES

Atualmente, entre todos os produtos da Adobe Creative Suite (Adobe CS) disponíveis, a maioria deles possuem alternativas para o Linux.

Animate-ADOBE

O Adobe Animate é o programa de animação da Adobe. Anteriormente conhecido como Flash Pro, o programa de animação vetorial que foi usado no passado para criar animações em Flash. Agora que a web deixou de usar o Flash, mas o HTML5, a Adobe o rebatizou para Animate.

Synfig Studio tem sido a alternativa de fonte aberta para o programa da Adobe desde 2005, e ainda é a melhor escolha para aqueles que querem prosseguir animação vetorial 2D, sem precisar pagar nenhuma licença. É gratuito e possui um desenvolvimento ativo.

AUDITION-ADOBE

Anteriormente, conhecido como Cool Edit Pro, o Adobe Audition oferece recursos para editar áudio digital. O Audition é uma estação de trabalho de áudio digital, muito usado, principalmente, por podcasters profissionais; além de gravação e mixagem da sua própria trilha.

O Audacity é o software livre mais usado para edição de áudio. Contudo, quando se refere a produção de música profissional deve-se pensar no Ardour e/ou LMMS.

Direcionado para profissionais, o Ardour oferece gravação de áudio altamente avançada, mixagem e capacidades de edição não-linear. É uma ferramenta de edição de áudio dedicada a usuários que já trabalham em alguma área relacionada à mixagem de som. É uma alternativa ao Sony ACID. O Ardor é a melhor DAW (Digital Audio Workstation ) disponível no Linux agora. Não só tem uma interface limpa e utilizável, mas está cheio de recursos avançados. Muito bom e altamente recomendado.

Ardour-Alternativa-ADOBE-AUDITION

Já o LMMS é um aplicativo para você criar e editar sons, contendo diversas funcionalidades de um programa para repetição de trechos. É possível montar um áudio de estilo diferente, combinando exemplos, músicas, recortes de faixas e trechos contínuos. Mesmo com uma interface simples e fácil de usar, o aplicativo requer certo conhecimento técnico; pois trabalha com mixagem de música e outras funções avançadas.

Ilustrator-ADOBE

O Illustrator é um editor de imagens vetoriais desenvolvido e comercializado pela Adobe. Entre as opções livres disponíveis, esse produto da Adobe possui uma alternativa que atende completamente as necessidades do usuário desse programa.

O Inkscape é a alternativa mais completa para criar ou editar gráficos vetoriais no Linux. O Inkscape é completo de recursos e, certamente, pode ser usado em um ambiente profissional.

Inkscape-Alternativa-ADOBE-ILUSTRATOR

INDESGIN-ADOBE

Adobe InDesign é um software da Adobe. Foi desenvolvido para diagramação e organização de páginas; e criado para substituir o Adobe PageMaker.

A alternativa mais provável é o Scribus. Ele pode ser usado para criar folhetos, boletins informativos, cartazes e até mesmo layouts de livros. Ele também pode ser usado para criar PDFs animados e interativos – o tipo de coisa que você esperaria de qualquer programa de editoração eletrônica que se preze 😉

Scribus-Alternativa-ADOBE-InDESIGN

Ele tem algumas desvantagens. Entre elas, o fato de que não pode importar ou exportar arquivos do InDesign. Além disso, ele não é totalmente polido e livre de erros, o que pode revelar-se frustrante para os usuários mais profissionais. Felizmente, a documentação Scribus é muito boa.

Ligthroom-ADOBE

O Adobe Photoshop Lightroom é um software criado pela a Adobe designado a edição rápida e o armazenamento de fotos digitais. Ele permite que o usuário importe uma grande quantidade de fotos automaticamente a partir de uma câmera ou cartão de memória, podendo organizá-las em pastas e fazendo diversos ajustes. Ainda permite salvar as configurações para futuros trabalhos.

duas alternativas livres para Lightroom que são realmente muito boas. A primeira, o Darktablepromove a rápida edição e armazenamento de fotos digitais, em formato RAW (disponível em quase todas as máquinas fotográficas atuais). Permite que o usuário importe uma grande quantidade de fotos automaticamente a partir de uma câmera ou cartão de memória. Para quem já usou ou conhece o Adobe LightRoom, não terá nenhuma dificuldade. É o programa mais recomendado entre os fotógrafos que usam Linux.

Darktable-Alternativa-ADOBE-LIGHTROOM

A outra alternativa é o RawTherapee. É um programa bastante completo para quem precisa ajustar fotos de câmeras digitais, que normalmente são no formato “.raw”. Embora seja para manipulação de arquivos .raw, o programa pode importar arquivos de outros formatos mais populares como JPEG, TIFF e PNG e ser usado em complemento com o GIMP.

PHOTOSHOP_ADOBE

Alternativas para o Photoshop são um dos tópicos mais comentados no mundo software livre. Sem surpresas, o GIMP é logo sugerido.

RECOMENDO QUE LEIA:
Como viver sem o Photoshop?

Não que haja algo de errado com o GIMP; muito pleo contrário 😉 De fato, é uma excelente opção para substituir o Photoshop. Pois, ele é poderoso e cheio de recursos e, ainda, pode ser melhorado com diversos plugins de terceiros.

Krita-Alternativa-ADOBE-Photoshop

Contudo, há um outro programa que esteve mudando um pouco essa “soberania” do GIMP. É chamado de Krita e os usuários estão aos poucos saindo do GIMP e migrando pra ele. Krita é essencialmente uma ferramenta para pintores digitais e artistas, se esse é o tipo de trabalho que você faz. Então, mesmo com essa opção do Krita; o GIMP é, definitivamente, o programa mais próximo do Photoshop no momento.

PREMIERE-ADOBE

Adobe Premiere Pro é um programa que é usado para a edição de vídeos profissionais. Edição de vídeo profissional tem sido muitas vezes visto como uma atividade mais adequada para Macs, e só na última década teve opções viáveis no Windows. Mas para Linux? edição de vídeo pode ser um problema. #sqn 😉

Se você pode pagar por um software Linux de qualidade, recomendo o Lightworks. Ele é muito bom – foi usado para editar filmes como: “O Lobo de Wall Street”, “Hugo”, e muito mais. Entretanto, ele pode ser usado gratuitamente, mas com restrições. Você só pode exportar até 720p e você perde vários recursos providos na versão paga :( A versão paga desbloqueia tudo e permite exportar até em 4K, por exemplo.

Kdenlive-Alternativa-ADOBE-Premiere

Contudo, existem softwares livres que podem ser grandes ferramentas para profissionais da área. Um deles, é o Kdenlive. Ele é um software de edição video para o ambiente KDE (possível instalá-lo em outros ambiente também). É um poderoso editor de vídeo multitrack, que inclui as tecnologias de vídeo mais recentes. É um excelente software de edição de vídeo.

Fonte: Linux Descomplicado

Anunciada a versão 4 do Bootstrap

No 4º aniversário do Bootstrap, a equipe anunciou o lançamento, ainda em estágio alpha, da versão 4 do framework.
O criador do Bootstrap, Mark Otto, apresentou no post as principais mudanças dessa versão. Otto afirma que a versão 4 é uma “grande empreitada que afetou praticamente cada linha do código”.

As primeiras três versões do Bootstrap usaram o Less, mas a versão 4 troca o Less pelo pré-processador de CSS Sass. De acordo com Otto, os seguintes pontos motivaram a mudança:

O Sass tem uma comunidade de desenvolvedores maior e seus ciclos de iteração são mais rápidos do que os do Less. Além disso, o Sass é muito similar ao Less, resultando em uma transição mais fácil do que seria migrar para PostCSS. Por fim, o LibSass (implementação C para o tradicional Sass Ruby) é muito rápido (mais rápido do que o Less nos testes que fiz).

Visando o futuro, a versão 4 passou a suportar flexbox. Uma vez que o suporte ao flexbox oferecido pelos navegadores ainda não é universal, essa funcionalidade não está habilitada por padrão. Outra mudança importante é a troca do uso da unidade px para rem e em quando apropriado. O uso da unidade rem resulta no ajuste do tamanho dos elementos com base no seu tamanho em relação ao elemento um nível acima no HTML. No que diz respeito ao JavaScript, todos os plugins foram reescritos em ES6.

Desenvolvedores que ainda precisam de suporte ao IE8 devem ficar com a versão 3, uma vez que a versão 4 remove o suporte para esse navegador. Um guia de migração está disponível com mais detalhes a respeito do que mudou.

Também foi anunciado o Bootstram Themes. Mesmo sendo possível mudar o design de um aplicativo desenvolvido com Bootstrap, é comum a queixa de que os aplicativos tendem a ter a mesma aparência. Por muito tempo, temas de baixo custo foram disponibilizados em lojas como Themefores, mas o novo Bootstrap Themes tem três temas oficiais com suporte completo. Cada um custa U$99, incluindo atualizações gratuitas durante toda vida útil do tema. Os temas disponíveis no momento são para versão 3 do Bootstrap, mas serão atualilizados para versão 4.

Ainda não existe data de lançamento para versão 4. Otto afirma em seu post que, antes do release final, serão disponibilizadas mais algumas versões alpha, duas versões beta e dois RCs. Desenvolvedores podem participar do desenvolvimento através do repositório no GitHub e conversar com os criadores e com a comunidade no canal do Bootstrap disponível no Slack.

Fonte: Info Q Brasil

Google traz o Material Design Lite com CSS, HTML e JavaScript

O Material Design Lite (MDL) do Google permite adicionar o look and feel do Material Design em websites. O Material Design é a linguagem visual padrão para Android e que, agora, o Google propõe como multiplataforma.

De acordo com o Google, o MDL têm os requisitos para que seja caracterizado como “lite”:

  • Tem poucas dependências de forma que é fácil de instalar e usar;
  • Não depende de frameworks, permitindo que os desenvolvedores façam sua integração com qualquer cadeia disponível de ferramentas para front-end;
  • Sua base de código é relativamente pequena;
  • Têm foco restrito, implementando as boas práticas do material design e não é um framework abrangente.

O MDL não é a primeira implementação de HTML/CSS/JS do material design e existem alternativas como o Materialize e Material Bootstrap. A principal vantagem que o MDL trás em relação a estas opções desenvolvidas pela comunidade, de acordo com o Google, é que o MDL foi desenvolvido “com a colaboração das equipes de Material Design e Chrome UX e é constantemente revisado buscando aderência às especificações do material design”.

Antes do MDL, o Polymer era a implementação canônica de material design para CSS/JS. Porém, comparado ao MDL, o Polymer tem escopo maior e vai além do domínio visual, incluindo componentes para comunicação de dados e componentes não especificados pelo material design.

Até o presente momento, o MDL não é otimizado nem suporta o uso de componentes individuais, por exemplo, um botão. Ainda sim, para desenvolvedores que querem usar apenas uma parte dos componentes MDL, é possível criar uma distribuição MDL customizada comentando componentes indesejados do material-design-lite.css e scripts inadequados do Gulpfile. Feito isso, basta executar gulp.

O MDL segue a convenção BEM de forma que os nomes para cada classe css são consistentes, isolados e expressivos. O Google detalha quais boas práticas eles seguiram ao aplicar BEM no desenvolvimento do MDL. Por outro lado, o BEM pode levar a explosão no comprimento dos nomes de classes e, de acordo com o feedback inicial, o MDL parece ser sensível a esse problema, por exemplo, ao necessitar de dezessete nomes de classe diferente para um simples card que é um conceito básico do material design.

O Google afirma que o MDL funciona em todos os navegadores modernos (Chrome, Firefox, Opera, Microsoft Edge e Safari) com degradação suave em navegadores como o IE9. Também sugerem referenciar a CDN para incluir o MDL no website, mas também é possível baixar ou importá-lo via npm ou Bower.

Fonte: InfoQ Brasil

[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

Continuar lendo