sexta-feira, 7 de agosto de 2020

Abrir imagens em formato WebP no Photoshop

COMO ABRIR IMAGENS WEBP NO PHOTOSOP?

O WebP (pronuncia-se weppy) é um formato de imagem da Google com uma compressão superior e mantendo a qualidade de imagem, em comparação com os restantes formatos. Também utiliza as vantagens dos formatos png e gif de uso de transparências e animações.


1 – DESCARREGAR PLUG-IN
:

Para abrir as imagens em formato WebP dentro do Photoshop, é necessário descarregar o plug-in deste website:
http://telegraphics.com.au/sw/product/webpformat 

2 – DESCOMPRIMIR:

Depois de descarregar devemos descomprimir o ficheiro para uma localização à nossa escolha. Irá aparecer um ficheiro tipo 8BI File.

3 – COPIAR E COLAR:

Copiamos o ficheiro WebPFormat64 e colamos dentro da pasta plug-ins que existe no Photoshop. Normalmente o caminho da instalação do Photoshop é esta:

Com o plug-in inserido na pasta do Photoshop, abrimos o programa de início para ler os plug-ins e já conseguimos visualizar e abrir as imagens no formato WebP.

 

CONCLUSÃO:

Existe à data um aumento de navegadores compatíveis a utilizarem o formato WebP e a Google já está a aconselhar a sua utilização. Com todas as vantagens de compressão, uso de transparências e animações será positivo utilizarmos este formato de forma ao nosso site obter uma melhor classificação.

quarta-feira, 22 de julho de 2020

Transformar imagem em desenho

COMO TRANSFORMAR IMAGEM EM DESENHO?

Finalmente a Adobe disponibilizou uma Ação para o Photoshop que permite converter imagens em desenhos facilmente e com boa qualidade. Para isso, será necessário verificar algumas preferências no Photoshop, descarregar o ficheiro e instalar e selecionar a área da imagem para converter.


1 – VERIFICAR PREFERÊNCIAS:

  1. Se tem disponível o filtro Oil Paint Filter incorporado na versão CC 2015.5
    (Filtro/Estilização/Pintura a Óleo)
  2. Se a imagem está em modo RGB (Imagem/Modo/Cores RGB)
  3. Se o processador gráfico está ativo para a renderização.Graphic Processor (Editar/Preferências/Desempenho)

2 – DESCARREGAR E INSTALAR:


Depois de descarregar e descomprimir o ficheiro, será necessário instalar dentro do Photoshop.
  1. Instalar a Action (Janela/Ações/Carregar Ações)
  2. Instalar o Pattern (Janela/Padrão em Photoshop mais recente)(Editar/Predefinições/Gerenciador de Predefinições/Padrões/Carregar)

3 – CONVERTER A IMAGEM EM DESENHO:

Criar uma camada superior à existente e desenhar com o pincel ou lápis a área que se pretende converter em desenho. Isto irá funcionar como uma máscara.

Com apenas as duas camadas, vamos aplicar a ação que instalámos dentro do painel Ação. Para isso, pressionamos no botão Play. Aparecem várias mensagens que pressionamos OK para prosseguir. O tempo de renderização depende de cada imagem, no entanto não deverá ultrapassar os 5 minutos.


Existem muitas camadas, mas a estrutura é simples: 

  • Camada para o fundo: BG Color
  • 3 grupos com elementos de fundo: BG patterns, BG FX, e Border FX.
  • 3 grupos com os efeitos de desenho: Toon Color, Toon Lines, e Toon Details. 
  • 2 grupos com efeitos adicionais e um para adicionar texto: FG FX, Post FX, e Replace With Your Text. 


Mais informações sobre as camadas e sua organização podem ser encontradas dentro do ficheiro Guia que foi descarregado.


CONCLUSÃO:
Após várias tentativas de criar uma ação que permita transformar imagens em desenhos, a Adobe finalmente acertou e criou uma ação com ótima qualidade e rápida renderização. Consoante a ferramenta que se utilize para criar a área a converter, a sua dureza e transparência os resultados de conversão serão diferentes. O processo é testar e verificar as camadas. Verifique o vídeo e boas conversões!!!

terça-feira, 26 de maio de 2020

Adobe Muse vai terminar


O QUE IRÁ ACONTECER COM O ADOBE MUSE?

A partir de 26 de março de 2020 o suporte técnico e os updates do Muse vão terminar. Os sites publicados vão continuar ativos e editáveis, no entanto a publicação e hospedagem no Business Catalyst não será possível de realizar.
.

1 – AS ALTERNATIVAS:

Existem três possibilidades de utilização que substitui o Muse. A primeira mais simples utilizando o Adobe XD. Este permite desenhar protótipos de aplicações e websites interativos, no entanto não gera código como o Muse fazia.

A segunda possibilidade é a utilização do Adobe Spark. Este permite criar imagens animadas (Post), páginas web estilo revista (Page) e vídeos curtos (Video). Para quem cria páginas, este programa é útil para projetos não mais que uma página como portfolios, curriculum, apresentações, catálogo de produtos, publicações de blog e foto galerias.

A terceira alternativa e a mais profissional de todas é a utilização do Adobe Dreamweaver. Este programa é mais complexo, no entanto permite ter todo o controlo dos nossos projetos e desenvolver qualquer tipo de aplicação.

2 – OS SITES PUBLICADOS:

Se os sites foram hospedados em uma plataforma de terceiros, estes mantêm-se ativos e visíveis. Se foram hospedados no Business Catalyst, terão de ser republicados em outra plataforma de hospedagem até 26 de março de 2021. Podem verificar o anúncio do término de vida para este serviço de hospedagem em:


CONCLUSÃO:
A internet muda rapidamente e não existindo serviço de suporte nem atualizações é melhor por em práticas as alternativas e desistir do Adobe Muse o quanto antes. Manter um website que irá trazer incompatibilidades a médio prazo não faz sentido. Este é um problema que acontece quando utilizamos programas e widgets que são proprietários de outras entidades. Ficamos dependente deles! O meu conselho, é a utilização de um bom editor de código e ir aprendendo o básico de HTML e CSS, desta forma o código é nosso e compatível com todos os browsers.

quinta-feira, 21 de maio de 2020

Compatibilidade entre Browsers



 

COMO MANTER COMPATIBILIDADE ENTRE BROWSERS?

Além da compatibilidade entre todos os dispositivos (responsive design), devemos assegurar que quando desenhamos um website este será visualizado corretamente em todos os navegadores (browsers). Desta forma, existem procedimentos que podemos realizar para garantir o correto funcionamento cross-browsers.


1 – ASPECTOS A CONSIDERAR:

Quando desenvolvemos o código, temos que ter em consideração o utilizador final, de que forma o utiliza e onde irá visualizar o nosso website. Poderá ser um utilizador que não utilize rato, pode utilizar dispositivos antigos e consequentemente browsers desatualizados ou ainda pessoas com deficiência.

2 – DEFINIR UM DOCTYPE VÁLIDO:

É o início do ficheiro HTML onde se dá instruções ao browser sobre a versão da linguagem que será utilizada. Anteriormente ao HTML5 era utilizado uma definição extensa normalmente com duas linhas, hoje apenas necessitamos de:

3 – FRAMEWORKS:

As frameworks como Bootstrap, Foundation ou Skeleton oferecem uma percentagem bastante elevada de compatibilidade entre os browsers. No entanto, devemos sempre ler a sua documentação e os detalhes da compatibilidade da sua utilização com os browsers existentes.

4 – SIMPLIFICAR O CÓDIGO:

Ao utilizarmos HTML/CSS/JS devemos ao máximo simplificar o nosso código e verificar sempre a possibilidade de utilizar o mínimo número de linhas possível. Quando não for possível simplificar e temos um código extenso, podemos dividir e criar blocos para diminuir a sua extensão. Nas CSS podemos utilizar pré-processadores. Desta forma, torna-se mais fácil realizar a verificação de erros e correção (track and debug).


5 – RESETAR AS CSS:

Utilizamos esta limpeza das folhas de estilo CSS no início de forma a limpar aspectos no desenho que sejam específicos daqueles browsers. Os títulos, botões, margens ou outras características do desenho podem ser visualizadas de forma diferente em diferentes browsers. Com o reset, conseguimos uniformizar/limpar as características de desenho definido no início das CSS os estilos que pretendemos.

6 – CÓDIGO CONDICIONAL:

Podemos selecionar especificamente como pretendemos que apareçam os estilos em cada um dos browsers. Para isso, utilizamos o código HTML condicional utilizando IF:
    <!--[if IE]>
       Utiliza IE
    <![endif]-->
    <![if !IE]>
       Utiliza outro browser
    <![endif]>

7 – VALIDADORES DE HTML E CSS:

Existem programas externos ou plugins/addons de editores de código que permitem verificar os erros do nosso código e se está dentro das normas da W3C (Organização que padroniza a Web). Também fornecem um serviço de padronização online através de hiperligação:
https://validator.w3.org/

8 – VERIFICANDO E TESTANDO AS DIFERENÇAS:

Devemos testar em diferentes dispositivos e browsers de forma a encontrar diferenças de visualização ou funcionamento.

De forma a facilitar estas tarefas, existem ferramentas online que nos ajudam a testar em vários browsers e dispositivos em simultâneo. Uma que costumo utilizar é:
https://crossbrowsertesting.com/
CONCLUSÃO:
Para desenvolver um website sem incompatibilidades, devemos ter em consideração onde este será visualizado e utilizado. De forma a minimizar estes problemas, inicialmente devemos resetar as CSS, utilizar pré-processadores, utilizar o mínimo de código possível, utilizar uma framework, eliminar os erros utilizando a Console do browser e no final validar e verificar todas as diferenças. Para corrigir estas diferenças, podemos utilizar condições de diferenciação entre browsers.

terça-feira, 5 de maio de 2020

O que é o FTP



O QUE É O FTP? 

É um protocolo standard de transferência de ficheiros de um computador para um servidor. As siglas significam File Transfer Protocol. Um programa gratuito e bastante conhecido para todos os sistemas operativos é o Filezilla.



1 – INSTALAR E CONFIGURAR FILEZILLA:

Após descarregar de http://filezilla-project.org/ e de realizar a instalação, será necessário configurar os seguinte parâmetros:

  1. Servidor: localização do seviço de hosting através de nome ou IP.
  2. Nome de utilizador: identificador da conta no servidor.
  3. Password: senha protetora relacionada com a conta.
Após a configuração correta, a listagem das pastas no servidor será bem sucedida e visualizada no lado direito. Na parte inferior podemos confirmar o processo das transferências.


2 – OUTROS FTP:

Além do Filezilla, existem outros serviços que funcionam da mesma forma:
Windows:
  • CoreFTP: http://www.coreftp.com/
  • WinSCP: http://winscp.net/
  • SmartFTP: http://www.smartftp.com/

Mac OS X:
  • Cyberduck: http://cyberduck.ch/
  • Transmit: http://www.panic.com/transmit/
  • Fetch: http://fetchsoftworks.com/fetch/

Unix/Linux:
  • gFTP: http://gftp.seul.org/
  • kasablanca: http://kasablanca.berlios.de/
  • NcFTP: http://www.ncftp.com/ncftp/

CONCLUSÃO:
No servidor, podemos utilizar o serviço Cpanel que permite a transferência de ficheiros do computador para o servidor ou então utilizar um programa de FTP. No cado de utilizar um programa de FTP terá as vantagens de rapidez e verificação dos processos realizados.

Regras de domínio e onde comprar?



REGRAS DE DOMÍNIO E ONDE COMPRAR?


Um domínio é o identificador/nome do website online. Será o nome ou a morada do seu local na internet. É composto por ( https://nomedosite.com ) ou seja, protocolo, nome do site e extensão (.org, .com, .pt).

 

 

1 – REGRAS PARA CRIAR UM DOMÍNIO:

No nome do domínio, podemos utilizar letras, números e hífens apesar do hífen ( - ) ser desaconselhado por poder causar confusão com o underscore ( _ ). Deve ter um tamanho mínimo de 3 caracteres e máximo recomendado de 26. Este nome completo de domínio deve conter apenas o nome e extensão sem utilizar o www (world wide web). 

As extensões dos domínios podem ser nacionais, referentes ao seu país de origem (.pt, .br, .fr, etc ) ou internacionais, referentes a tipos de negócios genéricos (.com, .net, .org, .biz). É importante escolher corretamente a extensão consoante o tipo de negócio para ser facilmente identificado o tipo de website online.


2 – DOMÍNIO E ALOJAMENTO:

Quando criamos um website necessitamos de criar o nome do site (domínio) e de um local/servidor onde alojar o site (hosting). A maioria dos serviços de alojamento/hosting já oferecem o domínio gratuito quando subscrevemos os seus serviços por um período de 1 ano. Neste caso, quando pretendemos criar o nosso espaço online, estes hostings fornecem o alojamento e o domínio num único processo. Isto facilita a criação da nossa presença online, no entanto devemos ter atenção se depois pretendemos mudar o domínio para outro serviço de hosting.

3 – ONDE COMPRAR UM DOMÍNIO:

O alojamento/hosting podemos comprar em qualquer fornecedor de serviço consoante as nossas necessidades e a oferta que têm, no entanto é recomendável que o domínio seja adquirido por uma entidade independente de registo de domínios. Isto porque os domínios quando comprados, são na realidade apenas alugados por um período de tempo e se deixamos de pagar perdemos o direito de utilização. Ao comprar um domínio através do nosso hosting, tecnicamente o domínio pertence ao serviço de hosting e podem proibir a transferência do domínio para outro serviço de hosting ou cobrar por essa transferência.

Se pretender comprar um domínio num serviço independente:


  • Dominios: https://www.dominios.pt/
  • Gandi: http://en.gandi.net/
  • Namecheap: http://www.namecheap.com/
  • GoDaddy: https://www.godaddy.com/
  • 1&1 IONOS: https://www.ionos.com



CONCLUSÃO:
Ao alugar um domínio é recomendável fazer essa subscrição num serviço independente do alojamento/hosting. Desta forma, previne-se problemas/gastos no futuro se pretender alterar o domínio para outro serviço de hosting.