Recherche avancée
Médias (91)
-
Spoon - Revenge !
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
My Morning Jacket - One Big Holiday
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Zap Mama - Wadidyusay ?
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
David Byrne - My Fair Lady
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Beastie Boys - Now Get Busy
15 septembre 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Audio
-
Granite de l’Aber Ildut
9 septembre 2011, par
Mis à jour : Septembre 2011
Langue : français
Type : Texte
Autres articles (104)
-
MediaSPIP 0.1 Beta version
25 avril 2011, parMediaSPIP 0.1 beta is the first version of MediaSPIP proclaimed as "usable".
The zip file provided here only contains the sources of MediaSPIP in its standalone version.
To get a working installation, you must manually install all-software dependencies on the server.
If you want to use this archive for an installation in "farm mode", you will also need to proceed to other manual (...) -
MediaSPIP version 0.1 Beta
16 avril 2011, parMediaSPIP 0.1 beta est la première version de MediaSPIP décrétée comme "utilisable".
Le fichier zip ici présent contient uniquement les sources de MediaSPIP en version standalone.
Pour avoir une installation fonctionnelle, il est nécessaire d’installer manuellement l’ensemble des dépendances logicielles sur le serveur.
Si vous souhaitez utiliser cette archive pour une installation en mode ferme, il vous faudra également procéder à d’autres modifications (...) -
Amélioration de la version de base
13 septembre 2013Jolie sélection multiple
Le plugin Chosen permet d’améliorer l’ergonomie des champs de sélection multiple. Voir les deux images suivantes pour comparer.
Il suffit pour cela d’activer le plugin Chosen (Configuration générale du site > Gestion des plugins), puis de configurer le plugin (Les squelettes > Chosen) en activant l’utilisation de Chosen dans le site public et en spécifiant les éléments de formulaires à améliorer, par exemple select[multiple] pour les listes à sélection multiple (...)
Sur d’autres sites (11328)
-
Merge file without data loss using FFmpeg inside of WASM
9 septembre 2023, par DejiEdit : I'm rewriting this entire question


Goal : To reconstruct a video from its pieces/chunks from a network stream inside of an
@ffmpeg/ffmpegworker

Problems :


- 

- Video chunks/pieces which come after the first piece/chunk are reported by
@ffmpeg/ffmpegto have invalid data, as seen in the log below :




{
 "type": "stderr",
 "message": "video-0_chunk-1.part: Invalid data found when processing input"
}


- 

- How would I merge these chunks/pieces to reconstruct the full video using
@ffmpeg/ffmpeg(after solving the first issue above)




My current code situation :


- 

- For merging the video pieces




const constructFile = async (chunks: Uint8Array[], queueId: number) => {
 await Promise.all(
 chunks.map(async (chunk, index) => {
 const chunkFile = `video-${queueId}_chunk-${index}`;
 await ffmpeg.writeFile(chunkFile, chunk);

 // Return information about newly created file
 ffmpeg.exec(["-i", chunkFile]);
 })
 );
};


I'm reading the logs/output for


ffmpeg.exec(['-i', chunkFile])


using


ffmpeg.on('log', (log) => console.log(log))


- 

- For fetching the videos using streams




await useFetch(Capacitor.convertFileSrc(file.path), {
 responseType: "stream",

 onResponse: async ({ response }) => {
 if (response.body) {
 const reader = response.body.getReader();

 while (true) {
 const { done, value } = await reader.read();

 if (done) break;
 file.chunks.push(value);
 }
 reader.releaseLock();
 }
 },
});


Note : file.chunks is linked to a reactive value which is passed to
constructFile()when initialized

These are the logs I get from the code currently above :


chunk-4OF65L5M.js:2710 <suspense> is an experimental feature and its API will likely change.
(index):298 native App.addListener (#25407936)
(index):298 native FilePicker.pickVideos (#25407937)
(index):272 result FilePicker.pickVideos (#25407937)
(index):298 native VideoEditor.thumbnail (#25407938)
(index):272 result VideoEditor.thumbnail (#25407938)
Processing.vue:135 {type: 'stderr', message: 'ffmpeg version 5.1.3 Copyright (c) 2000-2022 the FFmpeg developers'}
Processing.vue:135 {type: 'stderr', message: ' built with emcc (Emscripten gcc/clang-like repla…3.1.40 (5c27e79dd0a9c4e27ef2326841698cdd4f6b5784)'}
Processing.vue:135 {type: 'stderr', message: ' configuration: --target-os=none --arch=x86_32 --…e-libfreetype --enable-libfribidi --enable-libass'}
Processing.vue:135 {type: 'stderr', message: ' libavutil 57. 28.100 / 57. 28.100'}
Processing.vue:135 {type: 'stderr', message: ' libavcodec 59. 37.100 / 59. 37.100'}
Processing.vue:135 {type: 'stderr', message: ' libavformat 59. 27.100 / 59. 27.100'}
Processing.vue:135 {type: 'stderr', message: ' libavdevice 59. 7.100 / 59. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libavfilter 8. 44.100 / 8. 44.100'}
Processing.vue:135 {type: 'stderr', message: ' libswscale 6. 7.100 / 6. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libswresample 4. 7.100 / 4. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libpostproc 56. 6.100 / 56. 6.100'}
Processing.vue:135 {type: 'stderr', message: "Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'video-0_chunk-0':"}
Processing.vue:135 {type: 'stderr', message: ' Metadata:'}
Processing.vue:135 {type: 'stderr', message: ' major_brand : mp42'}
Processing.vue:135 {type: 'stderr', message: ' minor_version : 0'}
Processing.vue:135 {type: 'stderr', message: ' compatible_brands: isommp42'}
Processing.vue:135 {type: 'stderr', message: ' creation_time : 2022-11-29T14:46:32.000000Z'}
Processing.vue:135 {type: 'stderr', message: ' Duration: 00:00:51.50, start: 0.000000, bitrate: 81 kb/s'}
Processing.vue:135 {type: 'stderr', message: ' Stream #0:0[0x1](und): Video: h264 (High) (avc1 …6], 259 kb/s, 30 fps, 30 tbr, 15360 tbn (default)'}
Processing.vue:135 {type: 'stderr', message: ' Metadata:'}
Processing.vue:135 {type: 'stderr', message: ' creation_time : 2022-11-29T14:46:32.000000Z'}
Processing.vue:135 {type: 'stderr', message: ' handler_name : ISO Media file produced by Google Inc. Created on: 11/29/2022.'}
Processing.vue:135 {type: 'stderr', message: ' vendor_id : [0][0][0][0]'}
Processing.vue:135 {type: 'stderr', message: ' Stream #0:1[0x2](und): Audio: aac (LC) (mp4a / 0…706D), 44100 Hz, stereo, fltp, 127 kb/s (default)'}
Processing.vue:135 {type: 'stderr', message: ' Metadata:'}
Processing.vue:135 {type: 'stderr', message: ' creation_time : 2022-11-29T14:46:32.000000Z'}
Processing.vue:135 {type: 'stderr', message: ' handler_name : ISO Media file produced by Google Inc. Created on: 11/29/2022.'}
Processing.vue:135 {type: 'stderr', message: ' vendor_id : [0][0][0][0]'}
Processing.vue:135 {type: 'stderr', message: 'At least one output file must be specified'}
Processing.vue:135 {type: 'stderr', message: 'Aborted()'}
Processing.vue:135 {type: 'stderr', message: 'ffmpeg version 5.1.3 Copyright (c) 2000-2022 the FFmpeg developers'}
Processing.vue:135 {type: 'stderr', message: ' built with emcc (Emscripten gcc/clang-like repla…3.1.40 (5c27e79dd0a9c4e27ef2326841698cdd4f6b5784)'}
Processing.vue:135 {type: 'stderr', message: ' configuration: --target-os=none --arch=x86_32 --…e-libfreetype --enable-libfribidi --enable-libass'}
Processing.vue:135 {type: 'stderr', message: ' libavutil 57. 28.100 / 57. 28.100'}
Processing.vue:135 {type: 'stderr', message: ' libavcodec 59. 37.100 / 59. 37.100'}
Processing.vue:135 {type: 'stderr', message: ' libavformat 59. 27.100 / 59. 27.100'}
Processing.vue:135 {type: 'stderr', message: ' libavdevice 59. 7.100 / 59. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libavfilter 8. 44.100 / 8. 44.100'}
Processing.vue:135 {type: 'stderr', message: ' libswscale 6. 7.100 / 6. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libswresample 4. 7.100 / 4. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libpostproc 56. 6.100 / 56. 6.100'}
Processing.vue:135 {type: 'stderr', message: 'video-0_chunk-1: Invalid data found when processing input'}
Processing.vue:135 {type: 'stderr', message: 'Aborted()'}
Processing.vue:135 {type: 'stderr', message: 'ffmpeg version 5.1.3 Copyright (c) 2000-2022 the FFmpeg developers'}
Processing.vue:135 {type: 'stderr', message: ' built with emcc (Emscripten gcc/clang-like repla…3.1.40 (5c27e79dd0a9c4e27ef2326841698cdd4f6b5784)'}
Processing.vue:135 {type: 'stderr', message: ' configuration: --target-os=none --arch=x86_32 --…e-libfreetype --enable-libfribidi --enable-libass'}
Processing.vue:135 {type: 'stderr', message: ' libavutil 57. 28.100 / 57. 28.100'}
Processing.vue:135 {type: 'stderr', message: ' libavcodec 59. 37.100 / 59. 37.100'}
Processing.vue:135 {type: 'stderr', message: ' libavformat 59. 27.100 / 59. 27.100'}
Processing.vue:135 {type: 'stderr', message: ' libavdevice 59. 7.100 / 59. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libavfilter 8. 44.100 / 8. 44.100'}
Processing.vue:135 {type: 'stderr', message: ' libswscale 6. 7.100 / 6. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libswresample 4. 7.100 / 4. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libpostproc 56. 6.100 / 56. 6.100'}
Processing.vue:135 {type: 'stderr', message: 'video-0_chunk-2: Invalid data found when processing input'}
Processing.vue:135 {type: 'stderr', message: 'Aborted()'}
Processing.vue:135 {type: 'stderr', message: 'ffmpeg version 5.1.3 Copyright (c) 2000-2022 the FFmpeg developers'}
Processing.vue:135 {type: 'stderr', message: ' built with emcc (Emscripten gcc/clang-like repla…3.1.40 (5c27e79dd0a9c4e27ef2326841698cdd4f6b5784)'}
Processing.vue:135 {type: 'stderr', message: ' configuration: --target-os=none --arch=x86_32 --…e-libfreetype --enable-libfribidi --enable-libass'}
Processing.vue:135 {type: 'stderr', message: ' libavutil 57. 28.100 / 57. 28.100'}
Processing.vue:135 {type: 'stderr', message: ' libavcodec 59. 37.100 / 59. 37.100'}
Processing.vue:135 {type: 'stderr', message: ' libavformat 59. 27.100 / 59. 27.100'}
Processing.vue:135 {type: 'stderr', message: ' libavdevice 59. 7.100 / 59. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libavfilter 8. 44.100 / 8. 44.100'}
Processing.vue:135 {type: 'stderr', message: ' libswscale 6. 7.100 / 6. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libswresample 4. 7.100 / 4. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libpostproc 56. 6.100 / 56. 6.100'}
Processing.vue:135 {type: 'stderr', message: 'video-0_chunk-3: Invalid data found when processing input'}
Processing.vue:135 {type: 'stderr', message: 'Aborted()'}
Processing.vue:135 {type: 'stderr', message: 'ffmpeg version 5.1.3 Copyright (c) 2000-2022 the FFmpeg developers'}
Processing.vue:135 {type: 'stderr', message: ' built with emcc (Emscripten gcc/clang-like repla…3.1.40 (5c27e79dd0a9c4e27ef2326841698cdd4f6b5784)'}
Processing.vue:135 {type: 'stderr', message: ' configuration: --target-os=none --arch=x86_32 --…e-libfreetype --enable-libfribidi --enable-libass'}
Processing.vue:135 {type: 'stderr', message: ' libavutil 57. 28.100 / 57. 28.100'}
Processing.vue:135 {type: 'stderr', message: ' libavcodec 59. 37.100 / 59. 37.100'}
Processing.vue:135 {type: 'stderr', message: ' libavformat 59. 27.100 / 59. 27.100'}
Processing.vue:135 {type: 'stderr', message: ' libavdevice 59. 7.100 / 59. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libavfilter 8. 44.100 / 8. 44.100'}
Processing.vue:135 {type: 'stderr', message: ' libswscale 6. 7.100 / 6. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libswresample 4. 7.100 / 4. 7.100'}
Processing.vue:135 {type: 'stderr', message: ' libpostproc 56. 6.100 / 56. 6.100'}
Processing.vue:135 {type: 'stderr', message: 'video-0_chunk-4: Invalid data found when processing input'}
Processing.vue:135 {type: 'stderr', message: 'Aborted()'}
</suspense>

Notes :


- 

- The sections which start with
Processing.vuecome from the logging system I've setup. - The pieces/chunks gotten from the network where stored in exactly the same order in which they came
- If you've seen the old question, the
ReferenceErrorhappens as a result of HMR by Vite
- 

- Similar to this, some logs were repeated twice because I was actively changing some things and the component had to rerun from the start












Summary : If my problem is still not clear, you could provide another way of fetching a large file (video) from a network, loading the file into memory and passing the file data to
@ffmpeg/ffmpegfor further processing

- Video chunks/pieces which come after the first piece/chunk are reported by
-
8 Best Tools to Analyse Website Traffic
12 septembre 2023, par Erin — Analytics Tips, MarketingDo you want to analyse your website traffic ?
Maybe you want to know how well you’re converting your traffic. Or maybe you’re looking to track the performance and ROI of your marketing campaigns. Regardless, you won’t get far without relying on a dependable web traffic analysis platform.
In this article, we’ve compiled a list of the top web analytics tools available (including the pricing for each one).
Let’s dive in.
What is website traffic analysis ?
Curious about what it means to analyse website traffic ?
Simply put, it involves collecting and examining data about your website visitors and the actions they take. Marketers, analysts and website owners can then take this data and use it to optimise their strategy to improve site traffic, conversion rates and ROI.
A website analytics tool is software that tracks and measures various visitor activities and behaviours on your website. Common metrics include pageviews, traffic source, bounce rate and average time on page. Using a web analytics solution can give you insights into what’s working (and what’s not working) so you can optimise your website, campaigns or marketing strategy.
Advantages of using a website traffic analysis tool
1. Performance measurement and optimisation
Tracking the success of your marketing efforts is a challenging task. The primary benefit of using a web analytics tool is implementing effective performance measurement. If you don’t know how to measure your efforts, you won’t know what’s working and what’s not with your campaigns and content.
A web analysis tool can give you the insights you need to understand whether your marketing initiatives have been successful or if they need to be improved.
For instance, your new web design facelift may seem beautiful, but if visitors aren’t staying on your site as long and it is resulting in lower conversions, then it’s time to go back to the drawing board.
2. Audience insights to improve the user experience
Web traffic analysis platforms don’t just show you what your visitors are doing. It shows you who your audience is. A powerful website analytics tool will give you in-depth audience data, including demographics like geographical location (e.g., city, state or country), to help you better understand your audience.
Additionally, you can learn more about your audience by seeing how they interact with different content on your site. You’ll start to see that certain content performs better than others, giving you a greater understanding of your audience’s needs and wants. This means you’ll be able to tailor your website content and marketing efforts to your audience to improve the overall user experience.
3. Improve SEO
In the first two advantages, we touched on how insights can help you craft better content for the visitors already coming to your site to improve the user experience and improve conversions. But did you know that using a website analytics tool can also help improve how much traffic you’re getting to your site ?
Since a web analytics tool can help you craft better content, one side effect is an increase in traffic from organic search through SEO. Additionally, your platform will likely show you other traffic sources that your visitors are coming from (i.e., another website is referring traffic to you) so you can tap into those high-performing sources and optimise your incoming traffic over time.
Top 8 Tools to Analyse Website Traffic
Here’s a breakdown of the top eight web analytics platforms to help you analyse each tool’s unique features, price, advantages and disadvantages so you can make the best decision.
1. Matomo
Matomo is an open-source website analytics tool that’s focused on protecting user privacy and data while offering robust insights into your web traffic. It’s one of the most powerful tools to track the entire customer journey on your site.
Why Matomo : As the leader in open-source, privacy-friendly and ethical web analytics, Matomo is trusted by more than 1 million websites, including NASA, the United Nations and the European Commission.
Matomo plays well with Google Analytics to track your websites by filling in the gaps where Google Analytics has limitations (i.e., cookie consent banner requirement). Matomo combines traditional and behavioural web analytics for deeper insights while ensuring compliance with the strictest privacy regulations like GDPR, LGPD and HIPAA.
Matomo Standout Features and Integrations :
Standout features include comprehensive visitor tracking, multi-attribution, goal tracking, event tracking, custom dimensions, custom reports, automated email reports, session recordings, tag manager, roll-up reporting to pull data from multiple sites, Google Analytics importer, heatmaps and more.
Integrations include WordPress, Google Ads, Wix, Drupal, Joomla, Cloudflare, Magento, Vue, SharePoint, WooCommerce and more.
Pricing starts free for Matomo On-Premise (but requires technical skills and servers to set up) and $23/month for Matomo Cloud, which includes a 21-day free trial (no credit card required).
Pros
- Best for respecting visitor privacy
- You own your data — ensuring that it’s not shared with third parties for purposes like advertising
- Compliant with the strictest privacy laws
- Greater flexibility with open-source advantages, as well as the option to either self-host or cloud host
- Can run cookieless — providing 100% accurate data and a better user experience without the need for an annoying cookie consent banner
- Exceptional customisability — from white labeling, alerts and custom dimensions to dashboards and reports, tailor your insights for faster decisions, deeper insights and superior outcomes
Cons
- On-Premise is free, but there are additional costs for advanced features
- On-Premise requires servers and technical expertise to manage
2. Google Analytics
Google Analytics is the most well-known and used web analytics platform in the world, with nearly 30 million active websites.
Why Google Analytics : It’s one of the leading web traffic analysis tools backed by the Alphabet group of companies. For anyone getting started, it’s a great free option to understand your web traffic and your audience.
Google Analytics Standout Features and Integrations :
Standout features include in-depth visitor tracking, event tracking with Google Analytics 4 (GA4), easy integration with Google marketing tools (i.e., Google Search Console and Google Ads), custom reports and easy data importing from third-party sources.
Integrations include Google Ads, Google Webmaster Tools, AdSense, WordPress, Wix, Shopify, Zendesk, Facebook, Marketo, WordPress, Hotjar, SEMrush, Salesforce, Hootsuite and more.
Pricing is free.
Pros
- Detailed audience insights
- Customisable reports
- Seamless integration with other Google products
- Easy to set up
Cons
- Not privacy-friendly — you don’t own your data (data is shared with third parties for advertising purposes)
- Complex interface
- Requires cookie consent banner for GDPR compliance, which negatively impacts data accuracy and user experience
3. Fathom Analytics
Founded in 2018, Fathom Analytics is a privacy-friendly and lightweight web analytics tool. The platform offers a simple, minimalistic dashboard.
Why Fathom Analytics : Fathom Analytics is a minimalistic tool to help website owners gain insights into customer behaviour without compromising on privacy. It’s an easy-to-use tool that offers a simplified breakdown of the most popular data points. For newcomers to web analytics seeking essential metrics like visitor counts and traffic sources, Fathom Analytics provides a straightforward, cost-effective solution.
Fathom Analytics Standout Features and Integrations :
Standout features include easy, automated GA4 importing with lifetime data retention, a single-page dashboard for a quick overview of metrics, traffic summaries for chosen timeframes, visually striking graphs for better data digestion and privacy protection covering major compliance regulations.
Integrations include Google Analytics, Squarespace, Drupal, WordPress, Discourse, Bloggi, ConvertKit, Webflow, Transistor, Remix, Gatsby and Carrd.
Pricing starts at $14/month for up to 100k pageviews (with a 30-day free trial).
Pros
- Doesn’t use cookies
- Out-of-the-box GDPR, ePrivacy, PECR and CCPA compliance
- Great for visual data insights
- Lightweight tracking script for fast loading
Cons
- Can’t easily see traffic trends on specific pages
- Metrics may be too simple for those wanting advanced analytics
4. Mixpanel
Mixpanel is a web analytics platform that helps you track visitors as well as improve customer retention. The software has 8,000 customers worldwide, including Netflix, Yelp, BuzzFeed and CNN.
Why Mixpanel : Mixpanel is great for websites with e-commerce functionality. The tool helps you understand both your site visitors and your customers so you can optimise your customer experience and improve conversions.
Mixpanel Standout Features and Integrations :
Standout features include deep insights into how your products are being used, including your most popular features, user cohorts that let you segment users based on specific actions, and visual analysis showing where users drop off.
Integrations include Google Cloud, Figma, Mailchimp, Zoho CRM, Databox, Marketo, Hotjar, Slack, Zapier, Amazon Web Services, Google Ads and HubSpot.
Pricing starts free for up to 20 million events per month and $20/month for Growth.
Pros
- Interface is easy for beginners
- Exhaustive reporting options
- Custom event tracking options
- Predict user actions based on data science models
- Send targeted messages to specific users to encourage action
Cons
- User-based pricing isn’t the most ideal for everyone
- Alert management can be confusing
5. Kissmetrics
Kissmetrics is a marketing and product analytics tool that helps e-commerce and SaaS companies grow through qualitative data insights. The web analytics tool is trusted by 10,000 users, including Microsoft, Unbounce, AWeber, Dropbox DocSend and SendGrid.
Why Kissmetrics : As an e-commerce-driven analytics platform, the platform is best suited for Enterprise businesses, but it also offers flexible pricing plans that make it easy for someone to get their feet wet with website analytics.
Kissmetrics Standout Features and Integrations :
Standout features include a customisable dashboard to see key metrics at a glance, comprehensive visitor tracking, cohort analysis including power user tracking to understand your most active visitors and customers and insights into customer lifetime value and churn rate.
Integrations include Chargify, HubSpot, Slack, Live Chat, Marketo, Optimizely, Mailchimp, Recurly, Wufoo Forms, Facebook Ads, WordPress, Shopify and WooCommerce.
Pricing starts at $0.0025/event for the Pay As You Go Plan, $25.99/month for Build Your Plan and $199/month for Small Teams, which includes a 7-day free trial.
Pros
- Flexible pricing options
- Easy to install
- Several analytics viewing options
- Visual checkout funnel insights
- Track sessions by desktop or mobile
Cons
- Despite more pricing options, it’s still quite expensive overall
- Difficult to use for beginners
6. Adobe Analytics
Adobe Analytics is a web and marketing analytics platform within the Adobe Experience Platform. Used by over 170,000 businesses, it’s one of the most popular analytics solutions available.
Why Adobe Analytics : Adobe Analytics was created for large organisations. It’s essentially the enterprise version of Google Analytics. The tool does a great job of offering a customised analytics solution that’s capable of delivering personalised user experiences at scale.
Adobe Analytics Standout Features and Integrations :
Standout features include attribution, AI-driven predictive analytics, robust customer segmentation and automation based on customer behaviour.
Integrations include all Adobe products, Salesforce, Hootsuite, Contentsquare, Sisense, Mouseflow, Google Ads, Google Search Console, HubSpot and Microsoft Teams.
Pricing is custom and available upon request, but users can expect to pay at least $2,000 per month, and there is no free trial.
Pros
- Built for enterprise businesses
- Seamless workflow integration for Adobe Experience Cloud users
- Incredible customisation options
- Integration process is flexible
- Capable of accurately tracking large volumes of traffic
Cons
- Very expensive
- Not suitable for small businesses
- The setup is challenging for beginners
7. SimilarWeb
SimilarWeb is a robust analytics platform used to track your website data and compare it to other websites. Backed by a team of experienced data scientists and mathematicians for in-depth website traffic and search engine analysis. Founded in 2007, the platform is trusted by major brands like Adidas, DHL, PepsiCo and Walmart.
Why SimilarWeb : The tool relies on multiple scientific methodologies and approaches to data analysis to help provide a better understanding of visitors and customers. The platform is great for crafting prediction models for customer acquisitions by using machine learning to offer SEO insights and competitive analysis.
SimilarWeb Standout Features and Integrations :
Standout features include competition traffic and engagement analysis, in-depth visitor tracking, keyword analysis to optimise your SEO and search ads, affiliate traffic analysis, search traffic analysis and funnel insights.
Integrations include Salesforce, HubSpot, Google Analytics, Google Search Console, Shift, AT Internet, Adverity, SimilarTech, Biscience and more.
Pricing starts at $125/month for the Starter plan, which includes a 7-day free trial.
Pros
- Has a user-friendly dashboard for simple insights
- Highly customisable platform to meet your specific needs
- Easy competition analysis
- Funnel insights to improve your conversion rates
- Great customer support
Cons
- Expensive pricing
- Doesn’t include a code snippet to pull data directly from websites
- Doesn’t show sub-domains of your site
8. Hotjar
Hotjar is a behavioural website analytics tool with a focus on providing insights into individual user sessions with features like heatmaps and session recordings. Founded in 2014, Hotjar is used by 900,000 sites around the world.
Why Hotjar : Unlike traditional web analytics tools like Google Analytics, Hotjar is a behavioural analytics tool that provides in-depth behaviour insights session by session. The tool offers a variety of features that give you a sneak peek into your users’ behaviours by watching how they interact with your site action by action.
Hotjar Standout Features and Integrations :
Standout features include comprehensive heat mapping, visitor session recordings to see what visitors did moment by moment, feedback polls to gain insights from site visitors and conversion funnels to help you analyse leaks in your funnel at each conversion stage.
Integrations include HubSpot, Slack, Jira, WordPress, Shopify, Google Analytics, Mixpanel, Microsoft Teams, Zapier and ClickFunnels.
Pricing starts at free for the Basic plan and $80/month for Business, which includes a 15-day free trial.
Pros
- You can see exactly where visitors click, move and scroll
- Watch session replays to see what visitors did step-by-step
- See what percentage of visitors take certain actions
- Data segmentation features to help you understand KPIs in-depth
- There are no user limits with the platform, making it easy to scale
Cons
- While it offers behavioural analytics, Hotjar doesn’t provide insights into traditional web analytics like Matomo does, including traffic sources and bounce rate
- History data monitoring is complex
Elevate your website performance today
Understanding your visitors’ behaviour and needs is essential when you’re looking to improve your website performance.
By leveraging a website analytics platform, you’ll be able to gain new insights into your visitors and use insights from your content and campaign performance to improve your user experience.
If you’re looking to start using a web traffic analysis tool today, then Matomo is an excellent choice.
Matomo is a powerful, privacy-friendly and compliant tool that gives in-depth insights into your audience, your content and your marketing efforts to help you improve your site’s performance.
The platform also includes a variety of robust behavioural analytics features like heatmaps, session recording and more, which are included in your Cloud subscription.
Start your 21-day free trial of Matomo today (no credit card required).
-
A systematic approach to making Web Applications accessible
22 février 2012, par silviaWith the latest developments in HTML5 and the still fairly new ARIA (Accessible Rich Interface Applications) attributes introduced by the W3C WAI (Web Accessibility Initiative), browsers have now implemented many features that allow you to make your JavaScript-heavy Web applications accessible.
Since I began working on making a complex web application accessible just over a year ago, I discovered that there was no step-by-step guide to approaching the changes necessary for creating an accessible Web application. Therefore, many people believe that it is still hard, if not impossible, to make Web applications accessible. In fact, it can be approached systematically, as this article will describe.
This post is based on a talk that Alice Boxhall and I gave at the recent Linux.conf.au titled “Developing accessible Web apps – how hard can it be ?” (slides, video), which in turn was based on a Google Developer Day talk by Rachel Shearer (slides).
These talks, and this article, introduce a process that you can follow to make your Web applications accessible : each step will take you closer to having an application that can be accessed using a keyboard alone, and by users of screenreaders and other accessibility technology (AT).
The recommendations here only roughly conform to the requirements of WCAG (Web Content Accessibility Guidelines), which is the basis of legal accessibility requirements in many jurisdictions. The steps in this article may or may not be sufficient to meet a legal requirement. It is focused on the practical outcome of ensuring users with disabilities can use your Web application.
Step-by-step Approach
The steps to follow to make your Web apps accessible are as follows :
- Use native HTML tags wherever possible
- Make interactive elements keyboard accessible
- Provide extra markup for AT (accessibility technology)
If you are a total newcomer to accessibility, I highly recommend installing a screenreader and just trying to read/navigate some Web pages. On Windows you can install the free NVDA screenreader, on Mac you can activate the pre-installed VoiceOver screenreader, on Linux you can use Orca, and if you just want a browser plugin for Chrome try installing ChromeVox.
1. Use native HTML tags
As you implement your Web application with interactive controls, try to use as many native HTML tags as possible.
HTML5 provides a rich set of elements which can be used to both add functionality and provide semantic context to your page. HTML4 already included many useful interactive controls, like <a>, <button>, <input> and <select>, and semantic landmark elements like <h1>. HTML5 adds richer <input> controls, and a more sophisticated set of semantic markup elements like such as <time>, <progress>, <meter>, <nav>, <header>, <article> and <aside>. (Note : check browser support for browser support of the new tags).
Using as much of the rich HTML5 markup as possible means that you get all of the accessibility features which have been implemented in the browser for those elements, such as keyboard support, short-cut keys and accessibility metadata, for free. For generic tags you have to implement them completely from scratch.
What exactly do you miss out on when you use a generic tag such as <div> over a specific semantic one such as <button> ?
- Generic tags are not focusable. That means you cannot reach them through using the [tab] on the keyboard.
- You cannot activate them with the space bar or enter key or perform any other keyboard interaction that would be regarded as typical with such a control.
- Since the role that the control represents is not specified in code but is only exposed through your custom visual styling, screenreaders cannot express to their users what type of control it is, e.g. button or link.
- Neither can screenreaders add the control to the list of controls on the page that are of a certain type, e.g. to navigate to all headers of a certain level on the page.
- And finally you need to manually style the element in order for it to look distinctive compared to other elements on the page ; using a default control will allow the browser to provide the default style for the platform, which you can still override using CSS if you want.
Example :
Compare these two buttons. The first one is implemented using a <div> tag, the second one using a <button> tag. Try using a screenreader to experience the difference.
<style> .custombutton cursor : pointer ; border : 1px solid #000 ; background-color : #F6F6F6 ; display : inline-block ; padding : 2px 5px ; </style> <div class="custombutton" onclick="alert(’sent !’)"> Send </div>
<button onclick="alert(’sent !’)"> Send </button>
2. Make interactive elements keyboard accessible
Many sophisticated web applications have some interactive controls that just have no appropriate HTML tag equivalent. In this case, you will have had to build an interactive element with JavaScript and <div> and/or <span> tags and lots of custom styling. The good news is, it’s possible to make even these custom controls accessible, and as a side benefit you will also make your application smoother to use for power users.
The first thing you can do to test usability of your control, or your Web app, is to unplug the mouse and try to use only the [TAB] and [ENTER] keys to interact with your application.
Try the following :
- Can you reach all interactive elements with [TAB] ?
- Can you activate interactive elements with [ENTER] (or [SPACE]) ?
- Are the elements in the right tab order ?
- After interaction : is the right element in focus ?
- Is there a keyboard shortcut that activates the element (accesskey) ?
No ? Let’s fix it.
2.1. Reaching interactive elements
If you have an element on your page that cannot be reached with [TAB], put a @tabindex attribute on it.
Example :
Here we have a <span> tag that works as a link (don’t do this – it’s just a simple example). The first one cannot be reached using [TAB] but the second one has a tabindex and is thus part of the tab order of the HTML page.
(Note : since we experiment lots with the tabindex in this article, to avoid confusion, click on some text in this paragraph and then hit the [TAB] key to see where it goes next. The click will set your keyboard focus in the DOM.)
Click
<style> .customlink text-decoration : underline ; cursor : pointer ; </style> <span class="customlink" onclick="alert(’activated !’)"> Click </span>
Click <style> .customlink text-decoration : underline ; cursor : pointer ; </style> <span class="customlink" onclick="alert(’activated !’)" tabindex="0"> Click </span>
You set @tabindex=0 to add an element into the native tab order of the page, which is the DOM order.
2.2. Activating interactive elements
Next, you typically want to be able to use the [ENTER] and [SPACE] keys to activate your custom control. To do so, you will need to implement an onkeydown event handler. Note that the keyCode for [ENTER] is 13 and for [SPACE] is 32.
Example :
Let’s add this functionality to the <span> tag from before. Try tabbing to it and hit the [ENTER] or [SPACE] key.
Click <span class="customlink" onclick="alert(’activated !’)" tabindex="0"> Click </span>
<script><br />
function handlekey(event) {<br />
var target = event.target || event.srcElement;<br />
if (event.keyCode == 13 || event.keyCode == 32) { target.onclick(); }<br />
}<br />
</script>
Click<span class="customlink" onclick="alert(’activated !’)" tabindex="0" onkeydown="handlekey(event) ;"> Click </span> <script> function handlekey(event) var target = event.target || event.srcElement ; if (event.keyCode == 13 || event.keyCode == 32) target.onclick() ; </script>Note that there are some controls that might need support for keys other than [tab] or [enter] to be able to use them from the keyboard alone, for example a custom list box, menu or slider should respond to arrow keys.
2.3. Elements in the right tab order
Have you tried tabbing to all the elements on your page that you care about ? If so, check if the order of tab stops seems right. The default order is given by the order in which interactive elements appear in the DOM. For example, if your page’s code has a right column that is coded before the main article, then the links in the right column will receive tab focus first before the links in the main article.
You could change this by re-ordering your DOM, but oftentimes this is not possible. So, instead give the elements that should be the first ones to receive tab focus a positive @tabindex. The tab access will start at the smallest non-zero @tabindex value. If multiple elements share the same @tabindex value, these controls receive tab focus in DOM order. After that, interactive elements and those with @tabindex=0 will receive tab focus in DOM order.
Example :
The one thing that always annoys me the most is if the tab order in forms that I am supposed to fill in is illogical. Here is an example where the first and last name are separated by the address because they are in a table. We could fix it by moving to a <div> based layout, but let’s use @tabindex to demonstrate the change.
Firstname :
Address :
Lastname :
City :
<table class="customtabs"> <tr> <td>Firstname : <input type="text" id="firstname"> </td> <td>Address : <input type="text" id="address"> </td> </tr> <tr> <td>Lastname : <input type="text" id="lastname"> </td> <td>City : <input type="text" id="city"> </td> </tr> </table>Click here to test this form,
then [TAB] :Firstname :
Address :
Lastname :
City :
<table class="customtabs"> <tr> <td>Firstname : <input type="text" id="firstname" tabindex="10"> </td> <td>Address : <input type="text" id="address" tabindex="30"> </td> </tr> <tr> <td>Lastname : <input type="text" id="lastname" tabindex="20"> </td> <td>City : <input type="text" id="city" tabindex="40"> </td> </tr> </table>Be very careful with using non-zero tabindex values. Since they change the tab order on the page, you may get side effects that you might not have intended, such as having to give other elements on the page a non-zero tabindex value to avoid skipping too many other elements as I would need to do here.
2.4. Focus on the right element
Some of the controls that you create may be rather complex and open elements on the page that were previously hidden. This is particularly the case for drop-downs, pop-ups, and menus in general. Oftentimes the hidden element is not defined in the DOM right after the interactive control, such that a [TAB] will not put your keyboard focus on the next element that you are interacting with.
The solution is to manage your keyboard focus from JavaScript using the .focus() method.
Example :
Here is a menu that is declared ahead of the menu button. If you tab onto the button and hit enter, the menu is revealed. But your tab focus is still on the menu button, so your next [TAB] will take you somewhere else. We fix it by setting the focus on the first menu item after opening the menu.
<script><br />
function displayMenu(value) {<br />
document.getElementById("custommenu").style.display=value;<br />
}<br />
</script><div id="custommenu" style="display:none ;"> <button id="item1" onclick="displayMenu(’none’) ;">Menu item1</button> <button id="item2" onclick="displayMenu(’none’) ;">Menu item2</button> </div> <button onclick="displayMenu(’block’) ;">Menu</button> <script> function displayMenu(value) document.getElementById("custommenu").style.display=value ; </script><script><br />
function displayMenu2(value) {<br />
document.getElementById("custommenu2").style.display=value;<br />
document.getElementById("item1").focus();<br />
}<br />
</script><div id="custommenu" style="display:none ;"> <button id="item1" onclick="displayMenu(’none’) ;">Menu item1</button> <button id="item2" onclick="displayMenu(’none’) ;">Menu item2</button> </div> <button onclick="displayMenu(’block’) ;">Menu</button> <script> function displayMenu(value) document.getElementById("custommenu").style.display=value ; document.getElementById("item1").focus() ; </script>You will notice that there are still some things you can improve on here. For example, after you close the menu again with one of the menu items, the focus does not move back onto the menu button.
Also, after opening the menu, you may prefer not to move the focus onto the first menu item but rather just onto the menu <div>. You can do so by giving that div a @tabindex and then calling .focus() on it. If you do not want to make the div part of the normal tabbing order, just give it a @tabindex=-1 value. This will allow your div to receive focus from script, but be exempt from accidental tabbing onto (though usually you just want to use @tabindex=0).
Bonus : If you want to help keyboard users even more, you can also put outlines on the element that is currently in focus using CSS”s outline property. If you want to avoid the outlines for mouse users, you can dynamically add a class that removes the outline in mouseover events but leaves it for :focus.
2.5. Provide sensible keyboard shortcuts
At this stage your application is actually keyboard accessible. Congratulations !
However, it’s still not very efficient : like power-users, screenreader users love keyboard shortcuts : can you imagine if you were forced to tab through an entire page, or navigate back to a menu tree at the top of the page, to reach each control you were interested in ? And, obviously, anything which makes navigating the app via the keyboard more efficient for screenreader users will benefit all power users as well, like the ubiquitous keyboard shortcuts for cut, copy and paste.
HTML4 introduced so-called accesskeys for this. In HTML5 @accesskey is now allowed on all elements.
The @accesskey attribute takes the value of a keyboard key (e.g. @accesskey="x") and is activated through platform- and browser-specific activation keys. For example, on the Mac it’s generally the [Ctrl] key, in IE it’ the [Alt] key, in Firefox on Windows [Shift]-[Alt], and in Opera on Windows [Shift]-[ESC]. You press the activation key and the accesskey together which either activates or focuses the element with the @accesskey attribute.
Example :
<script><br />
var button = document.getElementById('accessbutton');<br />
if (button.accessKeyLabel) {<br />
button.innerHTML += ' (' + button.accessKeyLabel + ')';<br />
}<br />
</script><button id="accessbutton" onclick="alert(’sent !’)" accesskey="e"> Send </button> <script> var button = document.getElementById(’accessbutton’) ; if (button.accessKeyLabel) button.innerHTML += ’ (’ + button.accessKeyLabel + ’)’ ; </script>Now, the idea behind this is clever, but the execution is pretty poor. Firstly, the different activation keys between different platforms and browsers make it really hard for people to get used to the accesskeys. Secondly, the key combinations can conflict with browser and screenreader shortcut keys, the first of which will render browser shortcuts unusable and the second will effectively remove the accesskeys.
In the end it is up to the Web application developer whether to use the accesskey attribute or whether to implement explicit shortcut keys for the application through key event handlers on the window object. In either case, make sure to provide a help list for your shortcut keys.
Also note that a page with a really good hierarchical heading layout and use of ARIA landmarks can help to eliminate the need for accesskeys to jump around the page, since there are typically default navigations available in screen readers to jump directly to headings, hyperlinks, and ARIA landmarks.
3. Provide markup for AT
Having made the application keyboard accessible also has advantages for screenreaders, since they can now reach the controls individually and activate them. So, next we will use a screenreader and close our eyes to find out where we only provide visual cues to understand the necessary interaction.
Here are some of the issues to consider :
- Role may need to get identified
- States may need to be kept track of
- Properties may need to be made explicit
- Labels may need to be provided for elements
This is where the W3C’s ARIA (Accessible Rich Internet Applications) standard comes in. ARIA attributes provide semantic information to screen readers and other AT that is otherwise conveyed only visually.
Note that using ARIA does not automatically implement the standard widget behavior – you’ll still need to add focus management, keyboard navigation, and change aria attribute values in script.
3.1. ARIA roles
After implementing a custom interactive widget, you need to add a @role attribute to indicate what type of controls it is, e.g. that it is playing the role of a standard tag such as a button.
Example :
This menu button is implemented as a <div>, but with a role of “button” it is announced as a button by a screenreader.
<div tabindex="0" role="button">Menu</div>
ARIA roles also describe composite controls that do not have a native HTML equivalent.
Example :
This menu with menu items is implemented as a set of <div> tags, but with a role of “menu” and “menuitem” items.
<div role="menu"> <div tabindex="0" role="menuitem">Cut</div> <div tabindex="0" role="menuitem">Copy</div> <div tabindex="0" role="menuitem">Paste</div> </div>
3.2. ARIA states
Some interactive controls represent different states, e.g. a checkbox can be checked or unchecked, or a menu can be expanded or collapsed.
Example :
The following menu has states on the menu items, which are here not just used to give an aural indication through the screenreader, but also a visual one through CSS.
<style> .custombutton[aria-checked=true]:before content : "\2713 " ; </style> <div role="menu"> <div tabindex="0" role="menuitem" aria-checked="true">Left</div> <div tabindex="0" role="menuitem" aria-checked="false">Center</div> <div tabindex="0" role="menuitem" aria-checked="false">Right</div> </div>
3.3. ARIA properties
Some of the functionality of interactive controls cannot be captured by the role attribute alone. We have ARIA properties to add features that the screenreader needs to announce, such as aria-label, aria-haspopup, aria-activedescendant, or aria-live.
Example :
The following drop-down menu uses aria-haspopup to tell the screenreader that there is a popup hidden behind the menu button together with an ARIA state of aria-expanded to track whether it’s open or closed.
<script><br />
var button = document.getElementById("button");<br />
var menu = document.getElementById("menu");<br />
var items = document.getElementsByClassName("menuitem");<br />
var focused = 0;<br />
function showMenu(evt) {<br />
evt.stopPropagation();<br />
menu.style.visibility = 'visible';<br />
button.setAttribute('aria-expanded','true');<br />
focused = getSelected();<br />
items[focused].focus();<br />
}<br />
function hideMenu(evt) {<br />
evt.stopPropagation();<br />
menu.style.visibility = 'hidden';<br />
button.setAttribute('aria-expanded','false');<br />
button.focus();<br />
}<br />
function getSelected() {<br />
for (var i=0; i < items.length; i++) {<br />
if (items[i].getAttribute('aria-checked') == 'true') {<br />
return i;<br />
}<br />
}<br />
}<br />
function setSelected(elem) {<br />
var curSelected = getSelected();<br />
items[curSelected].setAttribute('aria-checked', 'false');<br />
elem.setAttribute('aria-checked', 'true');<br />
}<br />
function selectItem(evt) {<br />
setSelected(evt.target);<br />
hideMenu(evt);<br />
}<br />
function getPrevItem(index) {<br />
var prev = index - 1;<br />
if (prev < 0) {<br />
prev = items.length - 1;<br />
}<br />
return prev;<br />
}<br />
function getNextItem(index) {<br />
var next = index + 1;<br />
if (next == items.length) {<br />
next = 0;<br />
}<br />
return next;<br />
}<br />
function handleButtonKeys(evt) {<br />
evt.stopPropagation();<br />
var key = evt.keyCode;<br />
switch(key) {<br />
case (13): /* ENTER */<br />
case (32): /* SPACE */<br />
showMenu(evt);<br />
default:<br />
}<br />
}<br />
function handleMenuKeys(evt) {<br />
evt.stopPropagation();<br />
var key = evt.keyCode;<br />
switch(key) {<br />
case (38): /* UP */<br />
focused = getPrevItem(focused);<br />
items[focused].focus();<br />
break;<br />
case (40): /* DOWN */<br />
focused = getNextItem(focused);<br />
items[focused].focus();<br />
break;<br />
case (13): /* ENTER */<br />
case (32): /* SPACE */<br />
setSelected(evt.target);<br />
hideMenu(evt);<br />
break;<br />
case (27): /* ESC */<br />
hideMenu(evt);<br />
break;<br />
default:<br />
}<br />
}<br />
button.addEventListener('click', showMenu, false);<br />
button.addEventListener('keydown', handleButtonKeys, false);<br />
for (var i = 0; i < items.length; i++) {<br />
items[i].addEventListener('click', selectItem, false);<br />
items[i].addEventListener('keydown', handleMenuKeys, false);<br />
}<br />
</script><div class="custombutton" id="button" tabindex="0" role="button" aria-expanded="false" aria-haspopup="true"> <span>Justify</span> </div> <div role="menu" class="menu" id="menu" style="display : none ;"> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="true"> Left </div> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="false"> Center </div> <div tabindex="0" role="menuitem" class="menuitem" aria-checked="false"> Right </div> </div> [CSS and JavaScript for example omitted]3.4. Labelling
The main issue that people know about accessibility seems to be that they have to put alt text onto images. This is only one means to provide labels to screenreaders for page content. Labels are short informative pieces of text that provide a name to a control.
There are actually several ways of providing labels for controls :
- on img elements use @alt
- on input elements use the label element
- use @aria-labelledby if there is another element that contains the label
- use @title if you also want a label to be used as a tooltip
- otherwise use @aria-label
I’ll provide examples for the first two use cases - the other use cases are simple to deduce.
Example :
The following two images show the rough concept for providing alt text for images : images that provide information should be transcribed, images that are just decorative should receive an empty @alt attribute.
Image by Noah Sussman<img src="texture.jpg" alt=""> <img src="lolcat.jpg" alt="shocked lolcat titled ’HTML cannot do that !"> <img src="texture.jpg" alt="">
When marking up decorative images with an empty @alt attribute, the image is actually completely removed from the accessibility tree and does not confuse the blind user. This is a desired effect, so do remember to mark up all your images with @alt attributes, even those that don’t contain anything of interest to AT.
Example :
In the example form above in Section 2.3, when tabbing directly on the input elements, the screen reader will only say "edit text" without announcing what meaning that text has. That’s not very useful. So let’s introduce a label element for the input elements. We’ll also add checkboxes with a label.
<label>Doctor title :</label> <input type="checkbox" id="doctor"/> <label>Firstname :</label> <input type="text" id="firstname2"/>
<label for="lastname2">Lastname :</label>
<input type="text" id="lastname2"/><label>Address :
<input type="text" id="address2">
</label>
<label for="city2">City :
<input type="text" id="city2">
</label>
<label for="remember">Remember me :</label>
<input type="checkbox" id="remember">In this example we use several different approaches to show what a different it makes to use the <label> element to mark up input boxes.
The first two fields just have a <label> element next to a <input> element. When using a screenreader you will not notice a difference between this and not using the <label> element because there is no connection between the <label> and the <input> element.
In the third field we use the @for attribute to create that link. Now the input field isn’t just announced as "edit text", but rather as "Lastname edit text", which is much more useful. Also, the screenreader can now skip the labels and get straight on the input element.
In the fourth and fifth field we actually encapsulate the <input> element inside the <label> element, thus avoiding the need for a @for attribute, though it doesn’t hurt to explicity add it.
Finally we look at the checkbox. By including a referenced <label> element with the checkbox, we change the screenreaders announcement from just "checkbox not checked" to "Remember me checkbox not checked". Also notice that the click target now includes the label, making the checkbox not only more usable to screenreaders, but also for mouse users.
4. Conclusions
This article introduced a process that you can follow to make your Web applications accessible. As you do that, you will noticed that there are other things that you may need to do in order to give the best experience to a power user on a keyboard, a blind user using a screenreader, or a vision-impaired user using a screen magnifier. But once you’ve made a start, you will notice that it’s not all black magic and a lot can be achieved with just a little markup.
You will find more markup in the WAI ARIA specification and many more resources at Mozilla’s ARIA portal. Now go and change the world !
Many thanks to Alice Boxhall and Dominic Mazzoni for their proof-reading and suggested changes that really helped improve the article !
Syndiquer tout le site
