Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

HTML5 File API | Aula 1 de 6 – Apresentação e Feature Detection | Série HTML5 | SW9

HTML5 File API | Aula 1 de 6 – Apresentação e Feature Detection | Série HTML5 | SW9

Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)

O que veremos nesta aula?

Dando continuidade a MEGA Série sobre HTML5, agora chegou a vez de falarmos sobre a File API. Qual era a forma tradicional para manipulação de arquivos? Qual a motivação por trás da criação da API? O que é a File API? Quais os principais objetos? Como faço para detectar se a File API é compatível ou não com o navegador?

Todas estas perguntas serão respondidas ao longo desta primeira AULA 😀

Eu decidi dividir este tema em várias AULAS. O desafio agora é criar uma galeria de imagens.

#Projeto Galeria de Imagens

Nesta galeria será possível selecionar imagens, exibir informações destas imagens e o thumbnail correspondente.  Ao longo do projeto você terá condições de entender e aplicar o que você aprendeu sobre File API em seus projetos.

#A vida antes do HTML5 e File API

De vez em quando, eu faço uma reflexão de como a vida do desenvolvedor web era complicada a alguns anos atrás. Felizmente, à medida que o tempo passa, novas tecnologias surgem, padrões antigos são abandonados e dão espaço a soluções mais modernas, performáticas e mais fáceis de implementar.

No passado, quando havia uma necessidade de manipular arquivos em um projeto web, antes de qualquer coisa, era preciso fazer upload para o servidor.

Se fosse preciso criar uma funcionalidade para permitir seleção de arquivos, aplicar alguma validação (exemplo: tamanho máximo permitido por arquivo), ler cada arquivo e renderizá-lo no navegador, o pré-requisito era subi-los para o servidor :(

Dependendo da situação, várias chamadas ao servidor eram feitas para cumprir um determinado requisito. Esse vai e vem gera tráfego desnecessário e prejudica a performance.

Pelo bem da nação, o HTML5 chegou e com ele surgiu a File API. Tenha convicção que o File API vai resolver está questão com os pés nas costas.

Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.

#O que é o HTML5 File API?

O HTML5 File API permite você crie aplicações web onde o usuário pode interagir com arquivos de forma local, do lado do cliente (no navegador). Basicamente, você pode ler arquivos, aplicar validação, editar e renderizá-los no navegador, sem que seja necessário fazer upload para o servidor.

A minha vida, a sua e a de muitos outros, que trabalham com projetos web, até que enfim foi facilitada. Congratulations File API.

#File API e seus principais objetos

Posso citar 3 principais objetos que você precisa aprender para ter condições de manipular arquivos localmente. São eles:

  • File – é um objeto do tipo arquivo que possui alguns metadados. Este objeto faz referência ao arquivo que está sendo manipulado, e traz as informações principais do arquivo (nome, tamanho, mimetype e data da última alteração);
  • FileList – é uma lista de objetos do tipo arquivo;
  • FileReader – é o objeto que usamos para ler arquivos. Possui uma série de propriedades, métodos e eventos que permitem uma maior interação com os arquivos.

#Feature Detection

Sabendo da imensidão de dispositivos e navegadores, precisamos ficar atentos a compatibilidade dos recursos que usamos em nosso projeto Web. Com o HTML5 File API não é diferente.

Existe um serviço chamado Can I Use que permite consultar a compatibilidade de um determinado recurso em relação aos navegadores e dispositivos.

Acessando o link a seguir, você já será direcionado para a tabela de compatibilidade do File API: https://caniuse.com/#search=file%20api

Agora, eu vou abrir o projeto que vamos trabalhar, e implementar o processo de detecção de recurso (feature detection).

Mostrarei duas opções para checar a compatibilidade do File API. Uma delas é usando a biblioteca Modernizr. Para avançarmos com a biblioteca Modernizr vamos precisar:

  1. Referenciar a biblioteca na página;
  2. Configurar a biblioteca para carregar o recurso que iremos testar;
  3. Incluir a condição de teste na página que vamos usar (fileApi.html).

Bom, agora chegou o momento de assistir o vídeo que preparei para vocês :)

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[Conclusão]

Na aula de hoje [HTML5 File API | Aula 1 de 6 – Apresentação e Feature Detection | Série HTML5 | SW9], demos o ponta pé inicial sobre a File API. Qual a motivação por traz do surgimento desta API? O que é?  Quais os principais objetos?  Foram perguntas respondidas nesta AULA. Após a apresentação, implementamos o feature detection, para verificar se o navegador possui ou não compatibilidade com a API.

Está disponível na minha área de downloads o projeto parcial. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.

Dentro da minha área de Downloads, procure pela pasta HTML5/FILEAPI  O resto é com vocês :-)

Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

[Links úteis]

Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph

Link do vídeo: https://youtu.be/9aFYTXB1NDQ

PlayList Cloud 9: https://goo.gl/7aQbD6

PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

Modernizr: https://youtu.be/3NsNkGfsVXA

Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?