Operação Do Blog on kenji.blog

Sobre a Marca de Obrigatório em Formulários de Entrada

Mon, 14 Jul 2025 13:47:51 +0900

Organizamos informações sobre a marca de “obrigatório” na interface do usuário (formulários) no exterior, juntamente com materiais de diretrizes de UI.

📌 Principais Marcas de Obrigatório e Melhores Práticas

Uso do Asterisco (*)
- Geralmente o mais difundido, adiciona-se “*” aos campos obrigatórios.
- No entanto, uma explicação como " * é um campo obrigatório" no início do formulário é obrigatória (Nielsen Norman Group, California State University, Northridge).
- Também existem exemplos que usam cor para dar ênfase (como texto em vermelho).
Especificar “Required” ou “(required)” no rótulo
- Ao incluir a palavra “Required” no rótulo, pode-se indicá-lo claramente para leitores de tela, melhorando a acessibilidade (Deque).
Uso combinado de atributos ARIA e do atributo required do HTML5
- Além da exibição visual, usando aria-required="true" e <input required>, o campo também é comunicado como obrigatório de forma programática (Deque).
Especificar campos opcionais usando “(optional)”
- Há também a abordagem de especificar os campos opcionais como “(optional)” em vez dos campos obrigatórios, o que é eficaz quando ambos estão misturados.
- No entanto, a Nielsen-Norman aponta que “é mais fácil de avaliar se os campos obrigatórios também forem especificados de forma clara” (TPGi).

✅ Resumo de Materiais de Diretrizes de UI

Fonte	Conteúdo
NN/g: Marking Required Fields in Forms	A combinação de um asterisco com um texto explicativo é recomendada; exibir apenas os opcionais é considerado pouco amigável (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	・A palavra “Required” ou uma imagem é usada em combinação dentro do rótulo. ・Afirma claramente que a indicação apenas com cores é insuficiente.
W3C Techniques (H90)	Há exemplos de inclusão de um asterisco ou “(required)” no rótulo e definição do seu significado no início do formulário.
TPGi (Doing what’s required)	Considerando a acessibilidade, a combinação de asterisco + atributos ARIA + inserção de texto no rótulo é avaliada como a melhor.
Guia de UX de Formulários Contensis	Organizado de forma concisa: uma marcação consistente (* ou (optional)) é importante.

✅ Abordagens Recomendadas para Implementação

Adicionar um texto explicativo no início do formulário :

Fields marked with * are required. (Ou “All fields are required” para todos de uma vez, ou “unless marked optional” se houver campos opcionais)
Atribuição de Rótulo :
- Escrito como First Name * ou Email (required).

Atributos ARIA e Atributos HTML5 :

1
2


<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

Não confie apenas na cor : Suporte tanto visual quanto programaticamente.

🔗 Links de Referência (Materiais de Diretrizes de UI)

NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

Se necessário, também posso fornecer exemplos específicos de código HTML/CSS, ou templates de design de componentes de UI para Sketch e Figma. Sinta-se à vontade para perguntar!

Lista de Comandos Hugo

Fri, 31 May 2024 01:36:00 +0900

O que é o Hugo

O Hugo é um dos geradores de sites estáticos. Você pode criar um site convertendo arquivos Markdown em HTML. O Hugo é escrito na linguagem Go e roda muito rápido.

Este blog também é criado com o Hugo.

Instalação da CLI do Hugo

Para instalar a CLI do Hugo, execute o comando abaixo.

※ Exemplo para o caso do macOS. Para outros sistemas operacionais, consulte a documentação oficial.

1

brew install hugo

Você pode instalar usando o Homebrew.

Lista de Comandos Hugo

O Hugo oferece vários comandos. Abaixo estão resumidos os comandos usados com mais frequência.

Criar um novo site

1

hugo new site <nome-do-site>

Comando para criar um novo site. Em <nome-do-site>, especifique o nome do site.

Criar um novo artigo

1

hugo new <nome-do-artigo>.md

Comando para criar um novo artigo. Em <nome-do-artigo>, especifique o nome do artigo.

Iniciar o servidor

1

hugo server

Comando para iniciar o servidor local. Pode ser acessado em http://localhost:1313.

Fazer o build

1

hugo

Comando para compilar o site. Arquivos HTML serão gerados no diretório public.

Fazer o deploy

1

hugo deploy

Comando para fazer o deploy do site. As configurações do destino de deploy são feitas no arquivo config.toml.

Exibir a lista de artigos

1

hugo list all

Comando para exibir a lista de artigos.

Verificar configurações

1

hugo config

Comando para verificar as configurações.

Exibir ajuda

1

hugo help

Comando para exibir a ajuda.

Exibir versão

1

hugo version

Comando para exibir a versão.

Essa é a lista de comandos do Hugo. Como existem muitos outros comandos disponíveis, consulte a documentação oficial.

Referência

Documentação Oficial do Hugo

Como obter e colocar o ranking de páginas populares do Google Analytics

Mon, 10 Apr 2023 20:26:57 +0900

Introdução

Usando um serviço chamado Ranklet, você pode facilmente obter o ranking de páginas populares do Google Analytics e colocá-lo em seu site.

Neste artigo, apresentamos como adicioná-lo a um blog HUGO.

Exemplo de funcionamento

Preparação

Ter o Google Analytics configurado em seu site

Passos

Acesse o Ranklet
Clique em Sign in with Google e faça login com sua conta do Google (ela deve estar vinculada à sua conta do Google Analytics)

Clique em Permitir (許可)

Configure as informações básicas

Configurei como mostrado acima.

Em Google Analytics ビュー (Visualização do Google Analytics), selecione a visualização da qual deseja obter o ranking.

Configure a substituição de texto

Configurei como mostrado acima. Esta configuração serve para remover | kenji.blog do título da página.

Configure o template

HTML (os números do ranking foram ocultados)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS (o tamanho da fonte foi alterado e o texto da descrição foi configurado para ser exibido em até 3 linhas)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // リセット
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 行数 */
 }
 }
 }
}

JavaScript sem alterações

Copie o HTML da seção de publicação no site

Copie o HTML exibido

Cole no template do HUGO

Crie layouts/partials/ranklet.html e cole o HTML copiado

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

Cole o código abaixo na linha antes de </footer> em layouts/_default/single.html

1

{{- partial "ranklet.html" . }}

É isso. Agora o ranking será exibido na parte inferior da página, como mostrado abaixo.

【HUGO】Visualização no ambiente local

Mon, 05 Sep 2022 12:28:01 +0900

Instalação do HUGO

Download

Download do HUGO

A partir do site acima, baixe e extraia o módulo do Windows que corresponde ao seu ambiente. No meu caso, baixei “hugo_0.102.3_Windows-64bit.zip”.

Extração

Extraia o arquivo zip baixado e copie o hugo.exe dentro dele para uma pasta que você criar, por exemplo, C:\bin.

Registrar nas Variáveis de Ambiente

Registre nas variáveis de ambiente para poder executar o hugo.exe de qualquer lugar. As operações abaixo são para o Windows 11, mas você deve conseguir registrar com um procedimento semelhante:

Pressione Win+Pause para abrir as informações da versão
Clique em Configurações avançadas do sistema
Clique em Variáveis de Ambiente
Selecione Path e clique em Editar
Clique em Novo, digite “C:\bin” em uma nova linha e clique em OK para fechar a caixa de diálogo

Visualizar o blog

No prompt de comando, navegue até a pasta do blog HUGO e execute o comando abaixo.

hugo server -D

O resultado da execução está abaixo. (-D é uma opção para exibir artigos em rascunho.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
 Pages | 39
 Paginator pages | 0
 Non-page files | 7
 Static files | 0
 Processed images | 0
 Aliases | 13
 Sitemaps | 1
 Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Como o endereço é exibido durante a execução (no exemplo acima, http://localhost:1313/), copie o endereço no seu navegador. A visualização é atualizada automaticamente toda vez que o arquivo é salvo. Para terminar a visualização, digite Ctrl+C no prompt de comando.

Comecei um blog

Fri, 02 Sep 2022 07:23:00 +0900

Comecei um blog

Algo como fogos de artifício, o código está aqui

Olá. Por algum motivo, decidi começar um blog.

Não há um propósito grandioso como “Quero publicar isso!”, mas achei que seria bom ter um lugar para escrever coisas sobre tecnologia, sobre o dia a dia e o que me vier à cabeça.

Pretendo fazer isso como um bloco de notas, sem me esforçar muito.

Estou fazendo com um tal de Hugo

Estou fazendo este blog com um gerador de sites estáticos chamado “Hugo”. Encontrei um tema legal, então decidi adotá-lo no impulso. (É segredo que demorei cerca de 2 horas para escolher o tema)

Pretendo fazer anotações de forma casual sobre código e ferramentas que me interessam.

A história da manhã no Komeda

A propósito, esta manhã acordei um pouco mais cedo e fui ao Komeda Coffee. Saí às 8h30 e caminhei enquanto respirava o ar da manhã.

Pedi o combo matinal A com um mini Shiro-Noir e café com leite. Acho que custou cerca de 800 ienes? (não me lembro)

Café da manhã é muito bom. Sinto que o dia corre melhor quando tenho um tempinho para relaxar antes do trabalho.

Bem, a partir de agora vou escrever de forma descontraída. Pretendo misturar histórias de tecnologia e do dia a dia.

Conto com vocês!