infoamazonia / jeo-theme Goto Github PK
View Code? Open in Web Editor NEWLicense: GNU General Public License v3.0
License: GNU General Public License v3.0
Ao clicar, o botão fica outline
Quando não clicar, o botão fica filled
https://www.w3.org/TR/WCAG21/
To do
INFOAMAZONIA
MEKONG EYE
EKUATORIAL
PASIFIKA
Readable by people with disabilities:
Tools
We can use these tools:
https://developers.google.com/web/tools/lighthouse
https://ace.accessibe.com/.
https://github.com/bbc/bbc-a11y
https://github.com/bbc/color-contrast-checker
The Newspack-plugin pre-installs these useful plugins:
To do
Update author.php (desktop). There are social icons and URL icon (this is the URL added in the user's profile page in wordpress)
Update author.php (mobile). There are social icons and URL icon (this is the URL added in the user's profile page in wordpress)
If the author doesnt' have photo, no photo must appear in the author page
post's featured photo must appear at the left of the post block
Include author's"most read" block when it is ready (#18)
The image slider will have the grid option and fullwidth image. Also each image has the credits icon as it was implemented for post with featured image : "behind the title"
https://mekongeye-jeo.hacklab.com.br/2020/06/26/survivors-of-pnpc-dam-collapse-in-laos-flee-deteriorating-relocation-centers/
we’ll want the theme to be developed with certain features:
Some references:
Stefano's suggestions (1)
https://web.dev/predictive-prefetching/ -> Uma biblioteca JavaScript que faz prefetch preditivo do conteúdo que o usuário mais terá probabilidade de clicar a seguir, a partir de dados do Analytics.
https://wordpress.org/plugins/predictive-preloader/ -> Este plugin aplica a biblioteca acima no WordPress e é uma possibilidade a se considerar, embora talvez tenhamos possibilidades melhores e quem sabe mais baratas (este custa US$5/mês/site).
https://web.dev/adaptive-loading-cds-2019/ -> Aqui tem algumas técnicas que se baseiam no uso de APIs do navegador para melhorar o carregamento do site em dispositivos de entrada ou conexões lentas. Algumas destas APIs são experimentais, então podemos considerá-las com cautela.
https://web.dev/load-faster-like-proxx/ -> Este artigo também traz algumas técnicas que podem ser bacanas para dispositivos de entrada.
https://web.dev/preload-responsive-images/ -> Este aqui mostra uma das técnicas do artigo acima, o preload, aplicada a imagens.
https://web.dev/native-lazy-loading/ -> E este é outro bem legal também para imagens: lazy-loading usando uma API do navegador. Parece incrível.
Uma última coisa nada a ver com velocidade: essa técnica aqui faz o ícone do site que se instala no Android ficar legal em qualquer tema que o usuário escolha -> https://web.dev/maskable-icon/
Pamela, estes recursos podem ajudar na otimização da velocidade dos sites, alguns dos quais já tratados antes como PWA: https://web.dev/vitals/. No site tem alguns links úteis, inclusive para uma extensão do Chrome que pode ajudar na avaliação.
O Google vai começar a considerar os resultados destes testes para fazer o site subir nas buscas: https://tecnoblog.net/359998/chrome-para-android-vai-rotular-paginas-que-carregam-rapido/.
Aí tem alguns plugins de WordPress que ajudam na implementação, mas não sei se são bons ou necessários, já que vocês já estão trabalhando nisso:
Dev team must evaluate if it is worth it or not to implement in our theme.
The JEO Theme is using a cookie plugin: https://wordpress.org/plugins/complianz-gdpr/
We need to evaluati if there are no conflicts with that plugin and the youtube mask.
Reference:
The youtube's mask improves speed on this site:
https://observatorioprivacidade.com.br/memoria/2010-2015-o-tema-entra-em-pauta/
Question:
Test:
Examples
https://ekuatorial-jeo.hacklab.com.br/2020/07/28/1381/
https://ekuatorial-jeo.hacklab.com.br/2020/07/27/the-young-women-sent-into-crowds-to-blow-themselves-up/
Long form description
Fixes to do:
The subscription form is a Mailchimp form (MC4WP plugin). Newspack has that plugin.
This block will be in:
The subscription block's structure:
General Styles
Functionality:
The user enters his/her email and clicks on "subscribe now" then a successful message is shown.
Uses:
Mekong Eye:
Ekuatorial:
Infopacific:
background: linear-gradient(135deg, #1779B5 0%, #2EC1DA 100%);
Layout in invision:
Category page
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/418177101/preview?scrollOffset=3966.666748046875
To do
Each preview post has this structure:
How post's external link works
If a post doesn't belong to the wordpress site, the title link redirects to the external source.
Block used in JEO Theme
The newspack-plugin has a block called "Home Posts Pages" that allow users to select which posts will be shown. This block will be used in Home Page mainly.
Newest releases:
https://github.com/Automattic/newspack-theme/releases
Download:
https://github.com/Automattic/newspack-plugin/releases
Download newspack-theme (latest version)
https://github.com/Automattic/newspack-theme/releases
Install both in localhost
To do
Create 3 types of category (see more details below)
(Excluded) Add filter in Homepage posts block to consider this new hierarchy of categories (see more details below)
The published post has to show POST TYPE / TOPIC in its heading (see image below)
Verify if the post URL can contain the main category (post type). Stefano is concerned about seo. post's url will have this format: category/year/month/day/name
Ex. opinion/2020/01/30/covid-world-impact
Every post will be categorized as:
POST TYPE / TOPIC
AUDIO / LIFE
VIDEO / INDUSTRY
OPINION / TECHNOLOGY
IMAGE GALLERY / ENVIRONMENT
STORY FORM
LONG FORM
3 types of category
Category: Post type
Category: Topic
--- ENVIRONMENT
--- LIFE
--- INDUSTRY
Category: Region
--- THAILAND
--- VIETNAM
--- CHINA
ENTRE AS SUBCATEGORIAS DO MESMO PAI: FILTRO COM "OU"
Ex. "audio" ou "video"
ENTRE AS SUBCATEGORIAS DE DIFERENTES PAI: FILTRO COM "OU"
Ex. "audio" e "china"
###CONTEXT
This is the behavior of this new block:
Improvements to do:
To do
Pre-conditions:
The Home page is using "Home posts" block available in plugin "Newspack blocks" which is pre-installed by Newspack-plugin.
https://github.com/Automattic/newspack-plugin/releases
Goal
Even though a similar feature already exists on some of the geojournalism sites – especially at Ekuatorial and InfoAmazonia –, they are more focused on presenting maps. The focus of this section is to help users to find relevant stories first, instead of putting the map first.
Visitors will be able
The theme will mostly focus on the layout of this page, as features will be developed already to be consumed by the theme.
See document here
Test cases here
Desktop (here)
Desktop Dark (here)
Pagination used in AirBnb (Example here):
Ekuatorial site is available in two languages so we will want the theme to be multilingual with the help of the WPML plugin, for which EJN has a non-profit grant that makes it free for use
To do
To do
Add a report error button in the published post. All posts will have this button.
Reference:
https://www1.folha.uol.com.br/cotidiano/2020/06/maioria-e-contra-reabertura-de-comercio-e-ve-piora-na-pandemia-diz-datafolha.shtml
After clicking on report error button, a new page with a contact form is opened. The URL of that page must have the post URL.
Audio Post description
This one might include a photo, some short description and one or multiple audio files with their player.
Audio Post layout
At the top of the audio type post, there is a heading :AUDIO/ < list of topics >
To do
Opinion post description
Posts that are opinion pieces
Layout Ekuatorial - Opinion: https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/419724934/inspect?scrollOffset=3966.666748046875
Layout Mekong Eye - Opinion:
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/418998769/inspect?scrollOffset=3966.666748046875
Layout Pasifika - Opinion:
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/420953549/inspect?scrollOffset=3966.666748046875
Opinion post layout
At the top of the audio Op-ed post, there is a heading : OPINION/ < list of topics >
There is a background color in the op-ed's header
To do
Layout Category/Tags for Pasifika
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/420953545/inspect?scrollOffset=3966.666748046875
Layout Category/Tags for Ekuatorial
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/418177101/inspect?scrollOffset=3966.666748046875
Layout Category/Tags for MekongEye
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/418179669/inspect?scrollOffset=3966.666748046875
To do
Image Gallery description
It will highlight photos in an article that’s essentially made of photos with captions.
Image gallery layout
At the top of the gallery type post, there is a heading : PHOTO GALLERY/ < list of topics >
To do
Bug fixed: Update author-bio.php with the updates from newspack-theme.
CSS fix for featured image behind title (web version)
CSS fix for post without featured image behind (mobile version)
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/421647478/preview?scrollOffset=3966.666748046875
When the post has "feature image behind title" and "modelo padrão" or "one column" or "one column wide", the title section is rendered correctly
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/415700091/inspect?scrollOffset=3966.666748046875
When the post has "default featured image" and "modelo padrão" or "one column" or "one column wide", the title section is rendered correctly
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/415582871/inspect?scrollOffset=3966.666748046875
TO DO
Change appeareance according to home's mobile layout - Mekong Eye. Invision Mobile; https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/421647477/inspect?scrollOffset=3966.666748046875
"Follow us" block do Twitter used in Mekong Eye layout has its own version in mobile version
Change appeareance according to home's mobile layout - Ekuatorial. Invision Mobile: https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/421655020/inspect?scrollOffset=3966.666748046875
Test the newsletter block with select vertical / horizontal option is working correctly
Change appeareance according to home's mobile layout - Pasifika. Invision Mobile: https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/421658266/inspect?scrollOffset=3966.666748046875
Check invision layout for posts
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/421655021/inspect?scrollOffset=3966.666748046875
Check invision layout for author page
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/420953547/inspect?scrollOffset=3966.666748046875
Check invision layout for category
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/423892322/inspect?scrollOffset=3966.666748046875
Sticky header in mobile must use background used in middle menu
In customize --> newsletter widget for Author and Categoy, there is a field "custom content". A class "newsletter-pasifika" was added to render its newsletter as this image:
Install the plugin : https://complianz.io/
https://wordpress.org/plugins/complianz-gdpr/
Configure the banner's settings (opt-in). In the message textarea, add the code below
<div class="row align-items-center"><div class="col-sm-3"><span class="cookie-title">COOKIE POLICY</span></div><div class="col-sm-9"><p class="cookie-custom-msg">By visiting this site, you agree to the use of cookies, which are designed to improve your experience and are used for the purpose of analytics and personalization. To find out more, please read our <a href="http://localhost/cookie-policy-eu/">Cookies policy</a>. You can change the settings also.</p></div></div>
Comentários do Stefano
Plugin (review):
https://wordpress.org/plugins/eu-cookie-law/
_Ó, Pamela. Selecionei alguns plugins que podem ajudar os sites a estarem de acordo com a GDPR. Estes parece que são compatíveis com o WPML, bloqueiam iframes até que sejam dadas as autorizações específicas a eles, possuem uma base forte de usuários e permitem selecionar, em uma página separada, quais cookies serão permitidos.
Todos estes são pagos, mas os dois primeiros estão na loja do WordPress, então dá pra baixar e testar. O terceiro encontrei para baixar aqui: https://www.downloadfreethemes.co/borlabs-cookie-v2-1-12-gdpr-eprivacy-wordpress-cookie-opt-in-solution/.
Não temos problema em pagar por qualquer solução deste tipo, mas acho que vocês têm que avaliar a melhor para o desenvolvimento e também que permita personalização da aparência das mensagens de autorização. Em termos de recursos, o primeiro parece ser o mais interessante, mas vejam se ele serve para o nosso tema.
Main header
Mekong Eye
Ekuatorial e Infopacific
Sticky header - 1st type
This header appears in pages
The sticky header has 3 parts in a single bar: hamburguer menu icon / logo / search icon
Sticky header - 2nd type
This header appears in any post
The sticky header has 4 parts in a single bar:- hamburguer menu icon / logo / post's title- popular social network list + button to show other social networks (LINE e WeChat)
Fixes to do:
The post's header could include a featured image
Post's header with featured image. This image must fill all width screen and it includes an "i" icon. After clicking on "i" icon, the description and author credit will appear (see image below).
About the featured image size
Default: 10x15 proportion size.
It is allowed to lose some parts of the image (25% of height or width)
Theme configuration (Opção: Apresentação -> Personalizar)
Also, InfoPacific will use 3 types of typography
Source Sans (primary)
Libre Basquesville (internal post)
Dosis Bold (other type of titles. Ex. “SPOTLIGHT: OCEANS”)
Customize Page / Header settings / Appearance
. This link could be "/discovery-page", "discovery-page" or "https//site.com/discovery-page".Customize Page / Header settings / Appearance
. The "map" icon appears always in the Discovery button. This button will be available in Main Menu.Here solid vs outline
Solid (filled with primary color and font is white)
To do
Add in Create/Edit Post a new block to enable/disable the "sorry we said wrong" block. If it is checked, user has to fill the mandatory textarea field to enter the correct text.
At the top of the published post will appear a link that redirects to this new block "sorry we said wrong". It could be an anchor. Ex. Sorry, we said wrong, see more here
A the bottom of the published post will appear the "sorry we said wrong" text with this layout
Add fixed toolbar in mobile mode
https://projects.invisionapp.com/d/main?origin=v7#/console/19859607/421659534/preview?scrollOffset=3966.666748046875
Share button of the bottom toolbar must open native apps
- Create a SOLID PULLQUOTE (LEFT)
- Create a SOLID PULLQUOTE (RIGHT)
- Create a BIG LEFT PULLQUOTE
This style doesn't have background and quote icon and bar has primary color.
Styles:
References
https://gogutenberg.com/blocks/pullquote/#:~:text=The%20pullquote%20block%20takes%20an,more%20flexibility%20over%20the%20alignment.
https://www.billerickson.net/block-styles-in-gutenberg/#block-names
To do
Video Post description
If the story is just a video that’s embedded on an external provider like YouTube or Vimeo, the layout should highlight it and not expect other content types like photos or texts to be added with.
Video Post layout
At the top of the video type post, there is a heading : VIDEO / < list of topics >
Template: /template-parts/content/content-single.php
If comments are allowed and there are no comments yet, this block will appear:
If comments are allowed, the contact form in the published post will have these fields name and comment (see image below) (PENDING : update comment form due to is wordpress' core)
The list of post's comments will have this structure:
Number of comments
person's name, comment's date and comment text for each comment. (see image below)
CONTEXT
Regular post's content will has:
Search modal
When the user clicks on the "glass" icon in the header:
Search Results Page
All the search results are listed (internal and external posts)
Filters:
Sort options:
To do
Mobile Dark (aqui)
--- Fix - switch light/dark mode (resolvido no plugin por Gustavo)
Dark mode: it’s possible to respect the visitors’ choice of using its device in the dark mode and show the website with a dark or light color theme
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.