Tag: Design

(7 minutos de leitura)


Em 1991, Tim Berners-Lee projetou o HTML para possibilitar o compartilhamento de documentos de forma mais prática e rápida. Com a criação da World Wide Web, o HTML se transformou em uma ferramenta utilizada para tudo e por todos.

Em consequência do crescimento do HTML surgiu o CSS, pois quanto mais se usava o HTML, mais os desenvolvedores usavam da criatividade para deixar as páginas bonitas e estilosas. Porém, toda essa parte estética era escrita no mesmo arquivo da parte estrutural, deixando-os gigantes e cada vez mais difíceis de entender. Sendo assim, em 1995, foi criado o CSS para dar conta da parte estética da página, de forma separada da estrutura, ou seja, do papel do HTML.


HTML

Seu nome tem origem do inglês Hyper Text Markup Language, que significa “linguagem de marcação de hipertexto”, ou seja, HTML não é considerado uma linguagem de programação.

Imagine uma página web, como essa do nosso blog que você está lendo agora. É possível notar que existem diversos elementos separados, tais como cabeçalho, título, parágrafos, imagens e muitos outros. Toda a organização desses elementos é feita pelo HTML. Ele é usado para criar toda a estrutura da página e, para isso, utiliza as famosas tags para sinalizar onde cada tipo de elemento será implementado.

Por exemplo, se você deseja inserir um parágrafo na tela, poderá utilizar a tag <p></p> para isso, colocando o texto desejado dentro do elemento, como mostrado abaixo:


<p>Este é um parágrafo</p>


Resumindo, podemos dizer que existem diversas tags de diversas estruturas para montar o esqueleto da página. 

O HTML5 é uma versão aprimorada do padrão HTML original (se quer saber mais sobre HTML5 leia esse outro artigo em nosso blog).

O HTML5 foi desenvolvido para atender as crescentes demandas apresentadas pelas necessidades atuais da mídia, cross-device e internet móvel. É uma excelente ferramenta para desenvolvimento de aplicativos móveis multiplataforma porque muitos dos seus recursos foram adaptados com a consideração de acesso em dispositivos de baixa potência, incluindo Tablets e Smartphones.

O HTML5 oferece uma interface comum para tornar os componentes de carregamento mais simples. Por exemplo, o HTML5 não requer o plugin Flash porque o elemento será executado sozinho.


HTML5

Como dito anteriormente, HTML5 é a versão mais recente da linguagem de marcação usada para criar sites. Embora seja muito parecido com as versões anteriores, ela tem alguns recursos novos que são uma super mão na roda. 

Abaixo seguem os principais benefícios do HTML5:

- O HTML5 tem reprodução de vídeo e áudio, nas versões anteriores, os desenvolvedores eram obrigados a usar programas de terceiros para reproduzir vídeos e áudios. Isso acabava gerando muitos erros. O HTML5 resolveu este problema com todo o suporte para vídeo e áudio.

- O HTML5 oferece armazenamento em cache offline, assim os visitantes podem carregar determinados elementos em uma página da Web sem uma conexão ativa da internet (mas para isso é preciso que ele tenha acessado o site antes). Se a conexão de internet de um visitante for baixa, ele ainda pode carregar os elementos principais do site.

Agora, como como é possível deixar esse parágrafo colorido? Ou mudar a fonte da letra? Aí entra a nossa próxima tecnologia: CSS.


CSS

Cascading Style Sheet, mais conhecido como CSS, é uma linguagem de estilos que, assim como o HTML, não é considerada uma linguagem de programação. Ela é responsável por separar a parte estrutural da aplicação (que ficará nas mãos do HTML) da parte estética. Para utilizar o CSS, usamos da seguinte sintaxe:


strong {
	color: blue;
}

h1 {
	font-style: italic;
}


O seletor será o elemento que iremos estilizar (pode ser uma tag, uma classe, um identificador, etc.), a propriedade é o que queremos alterar (color, font-size, width, etc) e o valor é a alteração a ser feita.

Ao usar uma tag HTML, como a do exemplo acima, pode-se estilizá-la assim para que os parágrafos fiquem azuis.


p {
    color: blue;
}


Uma coisa bem interessante do CSS é que ele pode ser escrito dentro de um arquivo HTML, utilizando o style como elemento <style> ou como atributo de algum outro elemento <p style=””>. Assim como também pode ser escrito em um arquivo separado, apenas de CSS, importando-o no documento HTML da seguinte forma:


<link rel=”stylesheet” href=”nome_do_arquivo_css.css”>


É importante destacarmos que há a possibilidade de usar mais de um arquivo CSS ao mesmo tempo, para estilizar a aplicação. Daí a palavra “cascata”. Isso permite várias interações diferentes, porém é preciso tomar cuidado para não se perder e deixar o código confuso, seguindo sempre as regras para isso.


CSS3

O CSS sempre foi uma ferramenta extraordinária, com a qual se realiza inúmeros projetos de forma fácil, rápida e eficaz.  Essa nova versão, a CSS3, é ainda mais simples e foi muito bem aceita pela dos desenvolvedores web. 

Abaixo listamos as principais mudanças no CSS3:

- CSS3 é compatível com as versões antigas da linguagem, ou seja, os designers não precisam abandonar os trabalhos que fizeram com as versões anteriores ao CSS3. Essa nova linguagem pode ser retrabalhada em módulos antigos também. No entanto, pode haver alguns problemas de velocidade durante a conversão.

- CSS3 é feito de pequenos módulos que tornam a aplicação mais fácil e simples de usar. Seletores, cores, fundos, bordas, efeitos de texto e transformações 2D ou 3D são alguns dos módulos mais úteis que o CSS3 oferece.

- CSS3, por ser independente, carrega muito mais rápido que os seus precursores. Ela é bastante compatível com todos os navegadores disponíveis. Os módulos individuais também ajudam a economizar muito tempo durante o desenvolvimento, implementação e final da produção.


CONCLUSÃO

Com o uso do HTML5 e o CSS3, as empresas estão, cada vez mais, desenvolvendo e expandindo conteúdo na web e aplicativos com o propósito de criar páginas e sistemas bem definidos e precisos que podem ser acessados em diferentes dispositivos, navegadores e sistemas operacionais.

Portanto, conhecer bem a fundo essas duas linguagens irá fazer com que você se destaque no mercado de trabalho. Sem dizer que com eles você economiza tempo, deixa seu código mais curto e diminui as chances de erros.

Se você estava na dúvida se valeria a pena estudar essas duas linguagens, pode se jogar que com certeza não irá se arrepender.


O que achou do nosso artigo? Não deixe de nos seguir nas redes sociais e acompanhar o nosso blog para ficar atualizado!

(8 minutos de leitura)


HTML5 é a nova versão do HTML. Mas antes de falarmos dessa nova versão vamos falar um pouco da história do HTML?


HTML

Com o surgimento da internet foi preciso criar uma linguagem que fosse entendida por meios de acesso diferentes. Assim, Tim Berners-Lee desenvolveu o HTML. Na década de  1990, quando o browser desenvolvido por Marc Andreessen, o Mosaic, se popularizou, o HTML ganhou força e foi adotado por outros desenvolvedores e fabricante de browsers, compartilhando as mesmas convenções.

HTML é uma abreviação de Hypertext Markup Language, ou seja, Linguagem de Marcação de Hipertexto, ou seja, é linguagem usada para a publicação de conteúdo (texto, imagens, vídeos, áudio etc.) na web.

HTML é baseado no conceito de hipertexto, ou seja, conjuntos de elementos ligados por conexões, que podem ser palavras, imagens, vídeos, áudio, documentos etc. que quando conectados, formam uma grande rede de informação. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas.

Entre 1993 e 1995, surgiram novas versões (HTML+, HTML 2.0, HTML 3.0) onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem, mas, ela ainda não era tratada como padrão. Apenas em 1997, o grupo de trabalho do W3C, trabalhou na versão 3.2, fazendo com que ela fosse tratada como prática comum.

Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de empresas como Mozilla, Apple e Opera, onde se iniciou o trabalho de escrever a nova versão do HTML, o HTML5.


HTML5 – O QUE É?

Como dito no início do texto, HTML5 é a nova versão do HTML. 

HTML5 é uma linguagem de marcação de hipertexto que apresenta e estrutura o conteúdo web, sendo que esse novo padrão é para HTML, XHTML e HTML Dom. 

O HTML 5 permite adicionar novos elementos e funções, como por exemplo tags de vídeo e áudio e elementos canvas. E seu principal objetivo é facilitar a manipulação dos seus elementos, possibilitando a modificação das características dos objetos de forma não intrusiva, fazendo com que isso fique explícito para o usuário final.

Se compararmos HTML5 com seus antecessores notamos que ele tem uma séria de recursos adicionais, tais como: 

1) Suporte ao armazenamento de mídias offline;

2) Elemento de conteúdos mais específicos, como rodapé, cabeçalho, navegação;

3) Doctype mais simples;

4) Áudio e suporte à incorporação de vídeo.

Outra característica interessante do HTML5 é que ele fornece ferramentas para o CSS, Cascading Style Sheets, (para saber mais sobre CSS, leia nosso artigo), e o JavaScript (leia nosso texto para saber mais sobre JS) fazerem seu trabalho da melhor maneira possível, assim o site consegue ser leve e funcional.

Além do código no HTML5 ser escrito de maneira diferente a organização da página também é. Ela passou a ser mais semântica e com menos códigos, aumentando a interatividade sem a necessidade de instalar plug-ins que muitas vezes causava perda de performance. Já o código passou a ser interpolável, ou seja, está pronto para futuros dispositivos, facilitando a reutilização da informação de diversas maneiras.


ESTRUTURAS DO HTML5

A estrutura básica do HTML foi mantida no HTML5, a única alteração foi no doctype.

O objetivo do HTML5 é melhorar a experiência da web para seus usuários finais e também para os devs. A sua maior qualidade é que passou a ter suporte de áudio e vídeo em alto nível, o que não existia nas versões anteriores.

Agora listamos outras diferenças entre as versões HTML e HTML5.

1) SVG (scalabel vector graphics) – canvas e outros gráficos vetoriais são suportados em HTML5, enquanto no HTML o uso de gráfico vetoriais só era possível se usado em conjunto com diferentes tecnologias, como por exemplo: Flash, VML, Silverlight, etc.

2) HTML5 usa banco de dados SQL da web com cachê de aplicativos para armazenamento temporário de dados, enquanto isso, o HTML usa apenas o cachê do navegador. 

3) O HTML5 não é baseado no SGML (Standard Generalized Markup Language), permitindo que tenha regras de análise aprimoradas, que proporcionando melhor compatibilidade.

4) No HTML5, MathML inline e SVG podem ser usados no texto, isso não era possível em HTML. 

5) Alguns elementos que foram deixados de lado são no HTML5 são: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike e tt. 

6) O HTML5 suporta novos tipos de controles de formulário, como datas e horas, e-mail, número, intervalo, TEL, URL, pesquisa etc.


NOVOS ELEMENTOS DO HTML5

Muitos elementos da versão 4.0.1 foram excluídos na versão 5, uns por nunca terem sido usados, outros por estarem obsoletos e, ainda, os que eram usados indevidamente. A nova versão traz novidades que proporcionam ao usuário uma melhor estrutura, desenho e conteúdo multimídia.

As novidades da versão 5 estão ligadas diretamente às necessidades de suporte independente aos novos formatos de conteúdo multimídia, as novas funcionalidades de semânticas e a acessibilidade. 

Entre elas destacamos as seguintes:

1) Inclusão do canvas que permite desenhar gráficos em uma página web. Na versão anterior essa tarefa era realizada com a utilização de plugins externos. Com isso, é possível, via JavaScript, controlar todos os pixels, além de desenhar vários elementos gráficos, como círculo, retângulo, elipse, linha, texto, imagens etc.

2) Inclusão dos elementos vídeo e áudio para reprodução multimídia. Assim, mais uma vez há integração de plugins externos. Com essa inclusão de tags, o HTML5 dá suporte para a reprodução de áudio e vídeo, sem a necessidade de utilizar mecanismos externos.

3) Melhor suporte para armazenamento local, sendo que o HTML5 oferece dois novos objetos para armazenar dados localmente: SessionStorage, que armazena dados durante uma sessão ativa, e LocalStorage, que armazena dados sem limite de tempo.

4) Inclusão de novos elementos de conteúdo específico, já que muitos elementos da versão 4.0.1 foram excluídos da nova versão, que traz novos elementos.

5) Inclusão de novos controles para formulário para facilitar a vida dos devs, diferentemente da versão 4.0.1, que possuía uma escassa quantidade de controles para formulários. Apenas o elemento input permaneceu, mas ganhou novos valores para o atributo type, permitindo maior controle sobre a entrada de dados pelo usuário.

6) Total suporte ao CSS3. Com essa integração, as páginas webs conseguem receber os mais variados tipos de estilos como sombra nos textos e quadros, efeitos de transição, quadro com cantos arredondados e vários recursos novos que o CSS3 oferece.


CONCLUSÃO

Como dito anteriormente, o HTML5 vem com muitas novidades, desde a incorporação de vídeo e de áudio, até a utilização do elemento canvas. A linguagem de marcação também oferece múltiplos novos elementos, trazendo melhor compatibilidade com regras de análise aprimoradas.

Sendo assim, é essencial que os programadores aprendam, o mais rápido possível, sobre HTML5, para que consigam maximizar o potencial dos navegadores modernos. 


O que achou do nosso artigo? Não deixe de nos seguir nas redes sociais e acompanhar o nosso blog para ficar atualizado!