 Contests & Activities: October 05, 2022 Issue [#11593] |
This week: Using ML Code to Improve and Impress Edited by: Schnujo is Late to Lannister  
More Newsletters By This Editor 
 
1. About this Newsletter
2. A Word from our Sponsor
3. Letter from the Editor
4. Editor's Picks
5. A Word from Writing.Com
6. Ask & Answer
7. Removal instructions
Last minute, I decided to remove about 3/5 of the information in here and save it for another Newsletter because it's just so long. But I didn't realize the Newsletters get mailed out to subscribers the night before they are posted on the Newsfeed. Yes, I can edit after it's been sent out...as I'm doing now. But I felt weird about removing large chunks of information after people had already started reading it, so you get what you get--a WritingML encyclopedia. lol Enjoy!
People who have double clicked my Plus Sign are well aware that I'm all about helping users enjoy WdC to the fullest. I love to provide tips and tricks to get a better user experience. Sometimes those tips and tricks are for us to use to give others a better user experience. If we want people to return to our activities over and over, having a pleasant experience is necessary. Today we'll be discussing WritingML also known as ML code. We will be specifically discussing the code and usage of double braces, dropnotes, hyperlinks, line code, and x-links.
Read on for more information about each. If you like what you read, save a link to this Newsletter in your Notepad with {nl:11593}. The Newsletter number can be found below the image at the top or after the date in the bar at the very top. |
| ASIN: B07RKLNKH7 |
Product Type: Kindle Store
|
Amazon's Price: $ 0.99
|
|
WdC has a lot of ML code (WritingML) that goes underutilized. We'll be discussing some of that code. We will talk about double braces for displaying ML code to others, dropnotes for tucking away info for a cleaner forum look, hyperlinks to allow the user to jump to specific parts of the page such as the rules or the forum, line code, a new code available to provide line breaks and visual interest, and x-links which allow us to create a clickable link to another page or outside source while still maintaining the flow of the words because the link is replaced by clickable words of our choice.
For more ML code, check "Enhance Your Item With WritingML" and https://www.writing.com/main/tools/action/writingml/ as well as "Noticing Newbies Newsletter (July 27, 2022)" .
Double Braces
First, let's discuss how I'll be displaying the code so that you can see it. Admittedly, some of you won't need this too often, but it's good information to know and since I'll be using it to teach you, I thought I'd teach you what I am using. There are two ways to do double braces for displaying code. Both methods have beginning and ending code, much like the code for changing colors or font sizes. One method is a great option for a long list of things like reviews or users where you want the code to be visible for someone (such as the raffle owner) to be able to quickly and easily copy and paste the entire list. That method uses {db} and {/db}. In the other method, you literally create 2 sets of braces as I do here with my username. {{huser:schnujo}} Note that in order to show you two sets of braces, I actually created 3 sets because one set is always invisible. This is convenient when you are only showing a little code. The resulting code, if I used only 2 sets of braces, would demonstrate the code as {huser:schnujo}. This is perfect for teaching someone how to do a bitem link. You type {{bitem:########}} and they see {bitem:########}.
One caveat with demonstrating code is that it is VERY easy to get mixed up and miss one little thing, throwing it all off. When demonstrating, especially to a newbie, always preview your demo to ensure they will see what you think they will see. And remember that every opening brace must have a closing brace to match.
Here are the {db} and {/db} double braces in action. (The others have already been demonstrated.) However, because the double braces deactivate the double brace code, I will also be having to use additional braces to deactivate the code for the usernames within the {db} and {/db} code when I have double braces on the code to demonstrate it. Confused? It's fine. Just know that demoing can be complicated, so preview before sending it along.  Note that you can put the names on the same line as the beginning and ending db code, but I separated it to make it easier for you to read.
This is what it looks like behind the scenes.
{db}
{huser:lilli_in_fl}
{huser:vpbanjo}
{huser:tuozzo}
{huser:poulynoe}
{/db}
The resulting code will appear as an easily copiable list, perfect for a raffle purchase.
{huser:lilli_in_fl}
{huser:vpbanjo}
{huser:tuozzo}
{huser:poulynoe}
Dropnotes
One of the more important, albeit, more commonly used codes creates dropnotes. Dropnotes are used to hide text away so that it can be easily accessible by participants, but the forum still looks clean and tidy. Dropnotes also have a 2-part code, meaning code at the beginning and the end, like the code to change the color or size of a font. Dropnotes are always blue and have a telltale arrow on the right side to help guide participants to click and reveal the hidden information. While you can't change the color, you can make them bold or italicized by putting bold/italics tags around the top dropnote code. When creating your dropnote, you'll need a title for the dropnote, something like "Rules" if you are hiding the rules or "4th Round Winners" if you are tucking those away there.
The basic code is:
{dropnote:"TitleOfDropnoteHere"}
Hidden text in here.
{/dropnote}
Here's an example of the code behind the scenes.
{dropnote:"Available WdC Newsletters"}
Action/Adventure
Comedy
Contests & Activities
Drama
Fantasy
For Authors
Horror/Scary
Mystery
Noticing Newbies
Poetry
Romance/Love
Short Stories
Spiritual
{/dropnote}
And here is the code in use.
Available WdC Newsletters ▼
Action/Adventure
Comedy
Contests & Activities
Drama
Fantasy
For Authors
Horror/Scary
Mystery
Noticing Newbies
Poetry
Romance/Love
Short Stories
Spiritual
Hyperlinks
Creating hyperlinks to jump to different areas of the forum is a convenient way for your participants to quickly and easily be able to navigate to different parts of the page such as the rules, current prompt, winners, and the forum. Note that to send them to the forum, you are simply posting the link at the bottom of the page above the forum. If you want them posting in the forum in a specific format, you can give an example of that format just above the forum and create the hyperlink so that it lands just above the example posting so they can easily find/see it. Note that hyperlinkss not only have code at the beginning and the end, but that there are actually 2 sets of code--the clickable portion you can see and the portion located at the landing site, where you want the reader to end up.
The basic code is: {x-link:#Location}Words telling them to click and where they will land{/x-link}
Here's an example of the code behind the scenes.
{x-link:#Bottom}Click here to jump to the bottom of this section{/x-link}
And here is the code in use.
Click here to jump to the bottom of this section
That's the visible part. The you will need the actual location code placed where you want them to land {loc:Location}.
"Loc" stands for "location" because this is the location you want them to end up. I placed both the viewable and the invisible code at the bottom of this section so you can see how it works. I used the code {loc:Bottom}. Go ahead and click the brown (default color, but changeable) clickable link above. Then return to continue learning.
Welcome back--assuming you actually clicked the link above. An important note about this code is that the word with the loc must be the same as the word with the hashtag. In this case, I used the word "bottom" because I'm directing you to the bottom of this section. You can use words like "rules," "winners," "tips," and "forum" to help you keep the code straight by using the appropriate word to label where the reader is jumping.
Line Code
Line code is a new bit of code that has a wide variety of options with it. To save space here, I'll simply discuss some of the options and display a piece of code. For further information, check out The StoryMaster  's Newsfeed. (He's the site owner who writes all the code for us to use.) Here are his Newsfeed notes on the subject, "Note: Howdy and hey!
I'm posting a completely ra...", "Note: Just a little playing around before bed, adding a ...", "Note: line WritingML gains spacing
A reminder: Lin...", "Note: *Ball* Rolling right along the line...
He...", and "Note: Some late night twiddling...
{e:space...".
Be sure to save these notes for future reference. You can save them by clicking the little arrow thingy in the upper right corner of each note. In the dropdown menu, you will see Save This Note. Click that. To retrieve saved notes, along the top of your Newsfeed, click Saved Newsfeed Notes. Read through the comments as well because they not only ask some good questions, but provide some wonderful examples of how to use the code.
Line code allows you create a line of emojis across the screen. This is different from creating a line by typing in the emoji code over and over because that won't adjust itself to the screen size and device like the line code will. One thing about the line code is that you can (and generally will) end up with a partial emoji on each end. Even if you adjust so that this is no longer the case, that's only for your screen. Other screens will still have partial emojis.
To begin, choose one or more emojis to create your line. Experiment because some emojis create very professional looking lines while others are fun and whimsical. Next, decide on the options you want to use. The emojis can be rotated and/or flipped, multiple emojis can be used, space can be placed between them, and the width of the line, in relation to the screen, can be adjusted by using a percentage.
In it's simplest form, here's the zodiac cancer  set in line form using the code {line:ZodiacCancer}. It's quick and easy.
Here is a complicated line using brontosaurus and t-rex dinosaur emojis. They'll be flipped and rotated and 5 spaces will be added between each dinosaur, the line will be kept to only 25% of the width of the screen, and the dinosaurs will be viewed at 50% opacity (they will be 50% more transparent than normal). If you want the line centered, you need to use the centering code before and after the line code.
This is what it looks like behind the scenes.
{center}{line:dinobronto,dinotrex,dinobronto=R,dinotrex=L,dinobronto=V,dinotrex=H:spacing=5,width=25%,opacity=50%}{/center}
As you can see, the code can get very tricky. I had right (R) and left (L) rotations, vertical (V) and horizontal (H) flips, spacing (in this case, 5), width limits (in this case, 25%), and opacity (how transparent to make them, 50%. Thus, why I direct you to the 5 Newsfeed notes SM posted on how to fully use the new line code.
And here is what this code above looks like in use.
X-Links
Not to be confused with hyperlink code, which does include the term "x-link," x-links allow you to create clickable text that will take the reader to another page/site without displaying the actual web address in the forum to help with the flow of the words. Of course, they can mouse over the x-link and see where it leads by looking in the lower left corner of their screen. These links require both the web address and the words you want to replace it with. Again, there is beginning and ending code as there is with color and font size code. The first part is the website. The second part is the words you want to replace it with.
The basic code: {x-link:InsertWebsiteHere}Insert Words They Will Click Here{/x-link}
I'm using code to link to an outside page owned by our friend, Christopher Roy Denton  . Here's a look at the code from behind the scenes.
{x-link:https://theromancebloke.com/mr-pembrokes-ward-jennifer-sanders-ashley-j-barner/}A Regency werewolf with a mixed-race ward. What could go wrong?{/x-link}
And here's what it looks like behind the scenes:
A Regency werewolf with a mixed-race ward. What could go wrong?
The double underline indicates that this is a clickable link. The default color is blue, but if you put color code tags on the outside of the entire x-link code, you can change the color of the text, make it bold, etc.
I hope you've learned something about using ML code and I expect you to use your new knowledge in forums, Newsfeed notes, blog posts, static items, etc. Some of the codes can be quite tricky, so practice is key. I also recommend copying examples you aren't familiar with into your Notepad for future reference.
And finally, here's the ending code to the hyperlinks that directed you to the bottom of this section:
{loc:Bottom} (This code is displayed using double braces for a behind the scenes look for your benefit. The code doesn't show in proper usage.)
|
Let's learn more code and see the code we've learned in practice!
Now that you've learned about some code, let's take a look at some forums around WdC and what they use to create a nice user experience. Mind you, I haven't looked at their code, so I'm only making assumptions about what they are using. While we discuss the code, think about what you like and what you'd do differently for your own activities, including blog posts, Newsfeed notes, etc. And remember that if you're not a Premium member and you're having difficulty getting some code to work, you may not be able to post that code. Check the membership benefits to see what each level is able to post. Premium members can host/post any item/code except audio files. Audio files require a Premium Plus membership. To see what types of items and code your membership can host/post, see https://www.writing.com/main/handler/item_id/688627-Compare-Free-and-Paid-Member....
Additionally, if you continue to struggle, and you've triple checked the code, try a different browser as some browsers may be more cooperative than others.
I'll be putting more code lessons below in bold to make them easier to spot.
This forum uses dropnotes to provide a sleek, uncluttered appearance. It also demonstrates the rewards by posting badges. You can only post badges you have given or received. To post a badge, use {badge:######}. The # represents the badge number which is found near the bottom of the popup when you click on the MB. You can also change the size with {sbadge:######} and {mbadge:######} to create a small and medium version of the badge. The default badge code displays the largest badge size. This forum is also using emojis to create breaks and markers. I can't say whether they've used individual emojis or the newest line code, but it improves the look and helps guide the eyes. They also provides a bitem (big item) link to the associated cNote shop and an item link to the activities bank.
This raffle tastefully displays their awardicons in the upper left corner. Awardicons can be shown with the code {award:######}. If you forget and type {awardicon:######}, the code will automatically revert to {award:######}. Like the badge code, they come in 3 sizes with the largest being the default when you don't use "s" or "m" to indicate a small or medium awardicon to be displayed. This member saved a colorful image of tickets in their port and have posted it. Images are posted with {image:#######}. Images can't be enlarged beyond 100%, their default size, but they can be shrunk to the percentage stated with the following code: {image:#######-20%} would create the image at 20% of the full size. It's a bit hard to see, but note that there is a hyphen between the number signs and the percentage. This page has been nominated for "The Quills" and is displaying the logos, but they are also linked to "The Quills" so that if you click the image, they direct you to that page. Creating a clickable image that directs people to a specific page is done when the image is initially saved as an image item. Under Image Settings, while setting up the image, add the item number to the item you want the image to link to by placing the item number in the box labeled Link to Item ID. Additionally, to help draw attention to certain information, they've used code to highlight certain lines. Highlighting words is done with the {highlight:yellow} and {/highlight} code. This code also comes in pink, blue, green, and orange. Note the colon after the word "highlight" to help determine which color will be highlighting the text. Finally, they've posted trinkets for visitors to collect. Trinkets are posted with {trinket:########}.
Using many of the same ingredients as most forums--images (including one linking to "The Quills" ), dropnotes, MBs, and item links, this owner has opted to create hyperlinks to help participants easily jump to the forum. They've also opted to use some divider images (simply images of dividers) to help create a sense of defined space. And while I didn't touch on this, they are also using emojis, colored fonts, and enlarged fonts. I do recommend larger fonts, 3.5 or 4, to accommodate our members with poor eyesight. This Newsletter is using the font size 3.5. While computers can enlarge the fonts, not everyone knows how to do that. The point is to make our activity accessible to everyone, not to force them to learn the intricacies of changing their computer's settings.
This activity also continues with the use of hyperlinks to allow users to jump to the bottom without scrolling. And there are images--a popular choice for attracting the eye and making a space seem comfortable, and over time, familiar. Beneath the image is a link to the outside website for the activity everyone is prepping for here--National Novel Writing Month or NaNoWriMo. Link to an outside website with {link:InsertLinkHere}. However, this activity owner did the special x-link to create clickable words instead of simply the link. This is better illustrated in the end of the first rule. There's a link to NaNoWriMo, but it's underlined with two lines. That indicates that it's a clickable link. Again, you see line code to create the line of leaves under the image...or perhaps they simply copied and pasted emojis over and over. But remember that using the line code helps the line fit whatever size screen the page is being viewed on, whereas this isn't the case with simply posting emojis. Dropnotes are in use here as well. But at the bottom of this forum, they also use links to outside surveys to allow for the submission of entries and links to the Google documents where information is stored such as how many entries the participant has submitted.
Here we have a couple new codes we've not discussed yet...well, mostly one new code and an adjustment of another. Along with the standard: images, dropnotes, links, etc., this owner embeded YouTube videos. The code is easy. To embed a video, copy the web address of the YouTube video you want to embed and use the code {embed:YouTubeLinkHere}. Now, notice the animated book opening and closing. That's done by saving an animated image (found online or created through Canva or another image making site) as a GIF instead of a PNG, etc. and then an image item is created and the GIF is uploaded and saved as would be any other image. The rest is as normal for posting an image. Because it was saved as a GIF and it was originally animated, it continues to be animated on the forum page as well. Alternately, if you can find a GIF on WdC that you like, you can use that in the forum. Search official WdC GIFs (not GIFs owned by other members) through the mostly black box on the far right of the ML buttons above the text box.
Remember to save this newsletter in your Notepad with {{nl:11593}] so you can refer back to it later.
|
Have an opinion on what you've read here today? Then send the Editor feedback! Find an item that you think would be perfect for showcasing here? Submit it for consideration in the newsletter!
https://www.Writing.Com/go/nl_form
Don't forget to support our sponsor!
| ASIN: B085272J6B |
Product Type: Kindle Store
|
Amazon's Price: $ 9.99
|
|
| ASIN: B07NPKP5BF |
Product Type: Toys & Games
|
Amazon's Price: Price N/A
|
|
To stop receiving this newsletter, click here for your newsletter subscription list. Simply uncheck the box next to any newsletter(s) you wish to cancel and then click to "Submit Changes". You can edit your subscriptions at any time.
|
This printed copy is for your personal use only. Reproduction
of this work in any other form is not allowed and does violate its copyright. |
View Portfolio
Visit Notebook
Send Gift Points
Awards
Badges
Send Email
