chrome – Hom Digitalis

Qual a sua velocidade de acesso à Internet? O Chrome pode responder

Publicado em 18/02/201917/02/2020 por homdigitalis

A Google tem no Chrome uma das suas maiores montras de tecnologia. Tudo o que seja relacionado com a Internet está neste browser e disponível a todos.

Uma das mais recentes novidades que surgiram, de forma muito discreta, foi a possibilidade de ser medida a velocidade de acesso à Internet. Veja como pode ter acesso a essa informação.

Para muitos utilizadores é importante saberem a sua velocidade de acesso à Internet. Por norma esta informação surge com o recurso a apps ou a serviços externos, mas a Google resolveu embeber no Chrome a capacidade de medir e apresentar esta informação.

Está acessível através de uma API que os sites podem consultar, mas qualquer utilizador pode ter acesso a ela, de 2 formas simples e rápidas. Vamos ver como pode saber a sua velocidade de acesso à Internet usando o browser da Google.

A velocidade de acesso à Internet pela consola do Chrome

A primeira forma é das duas a mais localizada no Chrome. Recorrendo à consola do browser tem acesso a ela. Basta por isso abrir a consola do Chrome, recorrendo à tecla F12 no Windows ou ao menu e depois a Mais ferramentas -> Ferramentas de programador.

Ai dentro só precisam de escolher o separador Consola e colocar o comando navigator.connection, seguido de um enter. De imediato é apresentada a informação pretendida.

A velocidade de acesso à Internet por uma API do Chrome

Se preferirem, e porque esta informação está nativamente presente no browser, só precisam de aceder a um site que chame a API do Chrome. A título de exemplo fica o site da Google no GitHub.

Na página Network Information API Sample podem ver e registar o histórico da velocidade de acesso à Internet. Presente está também informação sobre como podem implementar esta API num serviço. Devem ter o Chrome 65 para a poderem usar.

Como podem ver, o Chrome consegue ser uma verdadeira caixa de surpresas e dar ao utilizador ferramentas que normalmente teria de aceder através de serviços externos ou apps. Aqui, para além da informação da velocidade de acesso, têm ainda o tipo de ligação e o RTT.

How to use Chrome DevTools like a Pro

Publicado em 02/10/201502/10/2015 por homdigitalis

As the name implies Chrome Developer Tools is a tool that allows web developers to interfere and manipulate applications via the browser. With this tool you can:

Manage interface problems
Debug Javascript Code with using breakpoints
Optimize your code

To open DevTools, you can right-click anywhere on the page and select inspect element or you can choose the “tools > developer tools” option from the top right menu.

The following examples are using the Canary version of Google Chrome.

1. Quick-edit a HTML Element

To try it:

Select the “Elements” panel.
Choose a DOM element within the Elements Panel editor.
Double click on the opening tag and edit it.

When you are finished, the closing tag is automatically updated.

2. Go to a Line Number

You can use this feature in the “:linenumber:columnnumber” format from the Sources panel.

To try it:

CMD + O

3. Expand All Child Nodes

To try it:

Select the “Elements” panel.
Choose a DOM element and Alt + Click the arrow within the Elements Panel editor to expand all child nodes.

4. Change DevTools Positions

To try it:

CMD + Shift + D

Dock options:

Undock DevTools
Dock to bottom
Dock to right

5. DOM Search by CSS Selectors

To try it:

CMD + F / CTRL + F and enter your class name or id name base search selector.

6. Material and Custom Color Palettes

You can click on the little switcher icon in front of hex code. you can choose from the following:

Page Colors: This palette is auto generated from your web site (in your CSS).
Material Design: This palette automatically generates primary colors from The Material Design palette.

7. Multiple Cursor

Move the cursor with the CMD + Click to add multiple cursors. You can alsoundo your last selection with CMD + U.

8. Copy Image as Data URI

To try it:

Select “Network” panel.
Choose your image within the Resources Panel
Right click and copy it as a Data URI (base 64 encoded)

9. Triggering of Pseudo Classes

To try it:

Right click in the left panel and select “Force Element State”.
Alternatively, the toggle element state icon can be clicked in the right panel.

10. Column Selection by Dragging

To try it:

Select “Sources” panel.
Choose your file within the Sources Panel editor.
Hold Alt and dragging the mouse.

11. Get the current element with “$0”

To try it:

Select “Elements” panel.
Choose a DOM element within the Elements Panel editor.
Click Console and write $0 to access it.

12. Reveal in Elements

To try it, if you choose an a DOM node:

Right click on it within the Console panel.
Select “Reveal in Elements Panel”.

13. View Event Listeners

To try it:

Select the “Elements” panel.
Navigate to the Event Listeners and choose an event.
You can also view source by right click and choose “Show Function Definition” in context menu.

14. Easing Previews

To try it:

Click the easing icon (purple icon) and see a preview.
You can view it via choose other previews or you can set new easing format.

15. Media Query

To try this:

In Device Mode, click the icon (‘bars’) in the upper left corner of the page.
Click the breakpoint (‘blue’, ‘green’, ‘orange’) bars and change.

If you right click on a bar, you can reveal its position within the source code.

16. Network Filmstrip

“Film Strip” shows page rendering screenshots and times from start to finish. You can click a screenshot and view in the timeline-style view.

To try this:

Select “Network” panel.
Click “Camera Icon”.
Reload page.

17. Copy Response

You can copy the response/request headers of a network resource.

To try it:

Select “Network” panel.
Choose your file within the Resources Panel.
Right click and click “Copy Response”.

18. Run Predefined Snippets

To try it:

In the left sidebar: Sources > Snippets
Right click > Select New
Enter a file name and write your snippets in the right panel
Right click on the snippet and select Run

19. Device Emulation Sensors

You can also simulate mobile devices sensors like:

Touch Screen
Geolocation Coordinates
Accelerometer

To try this:

Select “Elements” panel.
Click “Esc” and choose “Emulation > Sensors”

20. Workspaces

To try this:

Select “Sources” panel.
Right click within sources pane and choose “Add Folder to Workspace”
Choose your file and right click > Map to Network Resources
Change your file code and view it.

References:

Fonte: How to use Chrome DevTools like a Pro — JotForm — Form Builder — Medium

Extensão Chrome: QRreader beta – Leia códigos QR pelo browser

Publicado em 12/10/201111/09/2015 por homdigitalis

Extensão Chrome: QRreader beta – Leia códigos QR pelo browser

Criado por Pedro Simões em 4 de Outubro de 2011 | 0 comentários

Já por muitas vezes vos apresentámos aqui os códigos QR. Foram apresentadas soluções para a criação destes códigos e soluções para conseguirem ler esses códigos nos mais diversos equipamentos.

Estes códigos permitem que coloquem a mais diferente informação dentro das imagens e que as possam ler e distribuir das mais diferentes formas. Uma das formas de aceder a esses conteúdos e que ainda não tínhamos apresentado era através do browser. Pois agora é já possível e via Google Chrome com a extensão QRreader.

Esta extensão, que ainda está em beta, permite que leiam os conteúdos dos códigos QR que entenderem e necessitarem.

A forma de a usarem é extremamente simples. Depois de instalada passam a ter no menu de contexto do vosso Chrome mais uma opção.

Essa opção permite que leiam códigos QR e que extraiam deles o seu conteúdo. Caso esse conteúdo seja um endereço de uma página web então esta será aberta num novo separador.

Caso o conteúdo desse código seja um texto então será mostrada uma caixa com o que for extraído do código QR.

Se pretenderem podem copiar esse conteúdo para a memória do vosso computador para posterior utilização. Para isso basta que cliquem no botão OK da caixa de diálogo que é apresentada.

A extensão QRreader está ainda numa fase beta mas as suas principais funcionalidades estão já plenamente funcionais.

Existem planos do seu criador para que sejam adicionadas novas funcionalidades, tais como a capacidade de criar código QR directamente a partir do Chrome.

Usem o QRreader para conseguirem ler o conteúdo dos códigos QR que vos forem passados. Conseguem assim, tal como através de qualquer dispositivo móvel, aceder ao texto que está dentro dessas imagens.

Basta um simples clique em cima de uma dessas imagens e o acesso é imediato. Se for um link o Chrome trata de o abrir, se for texto então é mostrado para o poderem copiar.

Veja aqui mais extensões e aplicações Chrome

Leia mais informação sobre plugins Chrome no Forum Pplware: Google Extensions e Google Chrome

Download: QRreader beta 0.1
Homepage: QRreader beta

Extensão Chrome: Chrome Remote Desktop

Publicado em 12/10/201111/09/2015 por homdigitalis

Extensão Chrome: Chrome Remote Desktop

Criado por Pedro Simões em 10 de Outubro de 2011 | 7 comentários

O Chrome, browser da Google, tem estado lentamente a tornar-se um dos preferidos dos internautas. Para além de uma facilidade de utilização extrema, podemos adicionar-lhe características e funcionalidades únicas.

Uma dessas funcionalidades, que prometem revolucionar a Internet, foi agora apresentada, apesar de ter estado a ser desenvolvida há já bastante tempo. Falamos da possibilidade de termos um remote desktop sem termos de recorrer a software de terceiros, graças à extensão Chrome Remote Desktop.

Esta extensão, a primeira a fazer uso da funcionalidade de remote desktop do Chrome, permite que acedam a computadores remotos sem terem de usar softwares como o TeamViewer ou outros.

Basta que tenham a última versão estável do Chrome e a extensão Chrome Remote Desktop instalada. Esta extensão irá ficar acessível junto das outras WebApps e basta que cliquem no ícone que está disponibilizado.

O Chrome Remote Desktop está disponível em todas as plataformas onde o Chrome pode ser executado, o que abrange o Windows, o Linux, o Mac OS X e os ChromeBooks.

Para poderem usar o Chrome Remote Desktop devem ter uma conta Google ou Google Apps e devem permitir que esta aceda aos vossos dados. Este processo é realizado na primeira utilização do Chrome Remote Desktop.

Depois deste processo terminado é-vos mostrada a possibilidade de acederem a uma máquina remota ou darem acesso à vossa máquina.

O processo de ligação é controlado através da geração de uma chave numérica que deve ser partilhada com quem pretendem que aceda ao vosso computador. O Chrome Remote Desktop usa os portos 443 e 5222 para que as ligações sejam estabelecidas.

Basta então que gerem o vosso código de acesso e que o partilhem para que o acesso à vossa máquina seja garantida. Por outro lado basta que coloquem o código de acesso que partilharem convosco para que passem a ter acesso ao computador que pretendem controlar.

O utilizador a quem o computador estão a aceder pode a qualquer momento terminar a ligação remota bastando para isso que feche a janela do browser onde o Chrome Remote Desktop está a ser executado. Podem ainda usar uma janela de controlo que foi aberta no inicio da ligação.

O Chrome Remote Desktop está ainda numa fase beta do seu desenvolvimento, mas tem já disponível todas as funcionalidades básicas e necessárias para o seu correcto funcionamento. Podem confiar nesta extensão pois a mesma foi desenvolvida pela equipa que desenvolve o Chromium.

Testem o Chrome Remote Desktop e vejam mais uma das funcionalidades que o Chrome disponibiliza em primeira mão. Vai ser assim que todos os que têm ChromeBooks vão poder requerer suporte para os seus computadores.

Se durante a utilização do Chrome Remote Desktop tiverem algum problema, podem sempre recorrer à página de suporte da Google.

Veja aqui mais extensões e aplicações Chrome

Leia mais informação sobre plugins Chrome no Forum Pplware: Google Extensions e Google Chrome

Download: Chrome Remote Desktop Beta 1.2.20109.8300
Homepage: Chrome Remote Desktop Beta

Chrome chegou à versão 12 e traz muitas novidades…

Publicado em 03/04/201113/09/2015 por homdigitalis

Chrome chegou à versão 12 e traz muitas novidades…

Criado por Pedro Simões em 27 de Março de 2011 | 65 comentários

Tal como prometido pela equipa de desenvolvimento do Chrome, as versões estão a sair a um ritmo estável e cadenciado. Em todas elas são apresentadas novidades que vão sendo amadurecidas e passadas para as versões mais estáveis.

O incremento dos números de versão reflete sempre uma alteração a nível do motor do Chrome ou do motor do Javascript. Por essa razão saíram esta semana duas novas versões na família Chrome. A versão Beta atingiu a versão 11 e a Dev chegou à 12. Qualquer uma delas está repleta de novidades que vão com certeza ser do agrado dos muitos utilizadores.

Estas duas versões são a antecâmara do que vai ser passado para a versão final do Chrome. São aqui testadas e amadurecidas novas funcionalidades antes de serem disponibilizadas a todos os utilizadores do Chrome. Cada uma das duas versões tem por isso número de versão distinto, consoante a maturidade das implementações.

Algumas dessas novas funcionalidades não são disponibilizadas de forma directa, sendo necessário activá-las através da interface que os programadores disponibilizaram dentro do Chrome. Ficou assim mais simples activar ou desactivar cada uma delas, sem termos de recorrer a adições de flags à linha de comando do executável do Chrome. Coloquem na Omnibox do vosso Chrome o texto about:flags e activem as que entenderem ser necessárias.

Chrome Dev 12

Esta versão é, dentro da familia Chrome, a uma das mais desenvolvidas e a que apresenta sempre as maiores novidades. Apenas tem à sua frente a versão Canary, e mesmo esta apenas retém durante alguns dias essas mesmas novidades.

A release 12 desta versão apresenta algumas novidades que vão com certeza ser incorporadas nas restantes versões, depois da devida maturação e resolução de eventuais bugs que surjam. Depois de ter visto o seu ícone ser alterado, o Chrome voltou atrás e nesta versão aparece o antigo. Provavelmente esta alteração será revertida.

Outras novidades que a versão 12 apresenta estão relacionadas com funcionalidades do próprio browser. Existe uma nova página quando abrimos um separador novo. Esta aparenta estar preparada para equipamentos com suporte para toque. Para já, está numa fase ainda muito embrionária e apenas disponibiliza o acesso às WebApps instaladas. Se a quiserem testar devem activa-la na zona de experiências do Chrome (about:flags).

Outra novidades que também está acessível na mesma zona é a disponibilização de um contador de FPS sempre que a aceleração por hardware for usada.

Chrome Beta 11

A nova versão beta do Chrome trouxe para a ribalta algumas das funcionalidades que estão em testes na versão Dev há já algum tempo. A primeira e mais visível é a alteração do logótipo do Chrome (que entretanto voltou à original na versão Dev). Existiram ainda alterações no motor Webkit e no V8, motor de JavaSript, e foram adicionadas funcionalidades como transformações CSS 3D e compositing suportadas por aceleração GPU.

Para além das novidades mais óbvias, existe uma que fará as delicias de todos os utilizadores desta versão Passou a estar disponível o suporte para a utilização de uma funcionalidade que o HTML5 implementa e que é o HTML5 Speech Recognition, ou seja, o reconhecimento de voz. Passamos a poder introduzir texto no Chrome através da utilização da nossa voz, podendo assim ditar texto para o Chrome e este converte-o de forma automática. Podem testar esta funcionalidade nesta página. Devem ter instalado no vosso computador a versão Beta 11 ou a Dev 12.

Todas as novidades que têm sido apresentadas para o Chrome estão a torna-lo num browser muito apetecido de usar. Está na linha da frente na implementação de funcionalidades que representam os avanços neste campo.

Este browser é desde as suas primeiras versões capaz de competir de forma igual com as restantes propostas do mercado, com uma vantagem óbvia por libertarem actualizações com uma elevada frequência. Deixamos de ter de esperar meses ou anos a fio para vermos implementadas as funcionalidades que precisamos agora.

Se não são utilizadores do Chrome aconselhamos que o testem de forma exaustiva, para que entendam que é tão bom ou melhor que o browser da vossa preferência.