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:
- Referenciar a biblioteca na página;
- Configurar a biblioteca para carregar o recurso que iremos testar;
- 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
[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
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário