Jogo online em CSS Puro!

É possível criar um jogo ou alguma aplicação com as ações sendo controladas sem uma linguagem de programação em si? Eu te provo que SIM!

Anúncios

É possível criar um jogo ou alguma aplicação com as ações sendo controladas sem uma linguagem de programação em si? Eu te digo que SIM!

O desenvolvedor Elad Shechter provou que é sim possível. Através do simples uso de HTML e CSS ele criou um mini-jogo bem interativo. Como o HTML 5 permite você o uso de tags de maneira a simplificar a vida do desenvolvedor, juntamente com os possíveis controles de posições, formatos e tempo do CSS, a “brincadeira” fica mais fácil de acontecer.

O resultado pode ser visto na conta de Shechter no Codepen.io (clique aqui).

Saiu o Bootstrap 4 Beta!

Foi lançada a versão BETA do novo Booststrap 4. Esperada por desenvolvedores web ansiosamente, essa versão promete novidades para a criação de sites cada vez mais compatíveis as diversas telas e resoluções na criação de aplicações web cada vez mais “responsivas”.

O Bootstrap é um conjunto de ferramentas de código aberto para desenvolvimento com HTML, CSS e JavaScript. Essa ferramenta permite a criação de um protótipo rapidamente, auxiliando em projetos, idéias e criação de aplicativos completos com as variáveis ​​Sass e mixins, sistema de grade responsivo, extensos componentes pré-construídos e plugins poderosos criados no jQuery.

Para baixar e experimentar a novidade, clique aqui meu jovem padawan.

11 de Agosto, dia do Estudante

estudante

“Sabe voar, estudante?” [NASCIMENTO, Capitão]

Dessa frase ‘inspiradora’, faço minha homenagem aos meus alunos, ex-alunos e a todos os estudantes que me seguem. Parabéns pelo seu dia! Seja sempre um estudante, não importa do que, estude sempre.

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.

[CSS+HTML] Criando abas de forma simples

Olá Pessoal. Hoje vou apresentar um pequeno tutorial de criação de abas utilizando apenas HTML e CSS. O objetivo é trazer um exemplo simples que pode ser usado em projetos já existentes. Para este exemplo, nós vamos ter uma simples estrutura de abas em HTML e usando a propriedade de listas com a tag <ul> e 3 <li>.

1. Criando a estrutura HTML.

Primeiramente, temos o seguinte código HTML:

<!-- Criando a listagem -->
<ul class="abas">
    <!-- Aqui, criação da primeira aba -->
	<li class="aba" id="aba-1">
     <a href="#aba-1">Aba1</a>
<section class="conteudo"> Conteúdo da Aba 1 </section></li>
<!-- Aqui, criação da segunda aba -->
	<li class="aba" id="aba-2">
     <a href="#aba-2">Aba 2</a> 
<section class="conteudo"> Conteúdo da Aba 2 </section></li>
<!-- Aqui, criação da terceira aba -->
	<li class="aba" id="aba-3">
     <a href="#aba-3">Aba 3</a> 
<section class="conteudo"> Conteúdo da Aba 3 </section></li>
</ul>

No bloco de código anterior, criamos uma lista com a tag <ul> com 3 opções, intituladas “Aba 1”, “Aba 2” e “Aba 3”. Repare que definimos classas para a <ul>. Para os itens da lista <li> além de classes, definimos um ID para cada um, que servirá para linkar as abas. Para os links, utilizando a técnica de âncoras (#nome-da-aba) sendo o mesmo ID de cada item da lista de abas.

2. Definindo o Estilo CSS

Após a criação da estrutura em HTML, precisamos definis as classes através do CSS. Criaremos portanto as seguintes classes:

.abas {
position: relative;
}
.aba {
display: inline;
}
.aba &amp;amp;amp;gt; a {
float: left;
padding: 0.5em 1em;
background: linear-gradient(#FFF, #EEE);
border-width: 1px;
border-style: solid;
border-color: #CCC #CCC #FFF;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.aba:not(:target) a {
border-bottom: 0 none;

}
.aba:target a, a:hover {
background: white;
}
.conteudo {
position: absolute;
left: 0;
top: calc(2em + 4px); /* altura do link + bordas */
z-index: -2;
border: 1px solid #CCC;
background-color: white;
}
.aba:target .conteudo {
z-index: -1;
}

Repare que definimos apenas classes. Os IDs que usamos no código HTML serviram apenas para utilizarmos as âncoras para serem o link de cada aba. Pronto, de forma simples temos o resultado final. A título de exemplo, criei uma pagina simples em HTML incorporando o CSS dentro da mesma. Vale lembrar que é aconselhável criar um arquivo CSS à parte em seu projeto, e adicionar o trecho de código HTML onde você precisar dentro da sua página web.

O código completo ficaria assim:

<!DOCTYPE html>
<html>
<head>
  <title>
    Criando Abas
  </title>
  <meta charset="UTF-8" />
<style type="text/css">
    .abas {
    position: relative;
    }
    .aba {
    display: inline;
    }
    .aba > a {
    float: left;
    padding: 0.5em 1em;
    background: linear-gradient(#FFF, #EEE);
    border-width: 1px;
    border-style: solid;
    border-color: #CCC #CCC #FFF;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    }
    .aba:not(:target) a {
    border-bottom: 0 none;
    }
    .aba:target a, a:hover {
    background: white;
    }
    .conteudo {
    position: absolute;
    left: 0;
    top: calc(2em + 4px); /* altura do link + bordas */
    z-index: -2;
    border: 1px solid #CCC;
    background-color: white;
    }
    .aba:target .conteudo {
    z-index: -1;
    }
  </style>

</head>
<body>
  <!-- Criando a listagem -->
<ul class="abas">
    <!-- Aqui, criação da primeira aba -->
	<li class="aba" id="aba-1">
     <a href="#aba-1">Aba1</a>
<section class="conteudo"> Conteúdo da Aba 1 </section></li>
<!-- Aqui, criação da segunda aba -->
	<li class="aba" id="aba-2">
     <a href="#aba-2">Aba 2</a> 
<section class="conteudo"> Conteúdo da Aba 2 </section></li>
<!-- Aqui, criação da terceira aba -->
	<li class="aba" id="aba-3">
     <a href="#aba-3">Aba 3</a> 
<section class="conteudo"> Conteúdo da Aba 3 </section></li>
</ul>
</body>
</html>

O código-fonte completo você pode acessar pelo meu Github clicando aqui.

Espero ter ajudado você, até a próxima.

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

Quer programar? Eu digo Bora!

Hoje nós não temos tantas limitações em se tratando de desenvolvimento. Linguagens tidas como para programação desktop já tem suas opções de vinculo com a web, e vice-versa. Partindo desse pressuposto, as dicas que trago aqui valem para quem quer aprender linguagens atuais para desenvolvimento de softwares e apps.

Trouxe aqui então dicas de livros e materiais úteis para quem quer começar a programar “sozinho”, mas com uma leve instrução de quem entende um pouco mais. As dicas são válidas para quem quer desenvolver para a web. Vale sempre lembrar que programar não é bicho de 7 cabeças, mas requer o mínimo de dedicação e vontade, além de organização de prefêrencia. Mas vamos ao que interessa.

JavaScript

Para a linguagem, livros atuais são bem mastigados e com vários exemplos, o que ajuda bastante. Indico os livros da editora Casa do código. Com uma variedade grande de escritores, seus livros são extremamente bem elaborados e com um material gráfico bacana. Destaque para os livros DOMINANDO JAVASCRIT COM JQUERY e COLETÂNEA FRONT-END. Outro livro bacana que encontrei grátis online é o JAVASCRIPT FURTIVO do Eric Douglas (até o lançamento desse post, o livro ainda estava em desenvolvimento contínuo).

HTML5 e CSS3

Assim como para JS, o livro COLETÂNEA FRONT-END trás uma gama de artigos e tutoriais compilados em um único livro, com dicas e ótimas formas de se trabalhar com estas linguagens básicas para o desenvolvimento web. O livro é um apanhado de textos de feras no assunto Front-end.

PHP Continue Lendo “Quer programar? Eu digo Bora!”