#also i did try to add alt text to the middle images but the icon doesn’t appear. it only worked on the first and last ones. sorry | Explore Tumblr posts and blogs

gfm97-blog · 8 years ago

Text

Redd Web Development

Task4: Home Page:

Here I’m going to describe the function of the home page: At the top right corner you can find the follow us link in order to follow the website and receive notifications, if you click on any of the social media icons it will direct you to the original website and account. As you click on the photo shown in the page it will refresh the news and provide new news. On the part next to the photo that I referred to above where there’s the live score presented you can scroll on in order to be able to see all the matches that are being played. In this website while visiting the live score page I tried to do a grid instead of writing the live scores in a linear way.

News Page:

When you click on the news page important or old news will pop up. You can go to the next article by clicking on the provided arrows, one place on the left and the other on the right. The follow us link can be also accessed in this page.

Gallery Page:

As you click on the gallery option photos will be presented and if you click on the desired photo it will pop up and get larger in order to be observed better. On the top right of the image selected you can see cross button in order to exit the photo and choose another one. As the photo pops up there are arrows on both left and right to go to the next or previous image. Below each photo there will be the name and theme representing the photo. The follow us link can be also accessed in this page. In the empty space below the images I tried to insert more images but I couldn’t manage.

About Us Page:

The about option opens up in a page that tells information about the website and what does it contain. The follow us link can be also accessed in this page.

The contact us option leads you to a page where its divided into two. You can add comments in your reference and see information about the opening hours of the company. The follow us link can be also accessed in this page.

Home Page Code Errors:

In the <section class=”col-md-6” Id=”box”> I had an extra id box so I deleted the id part in order to become like this: <section class=”col-md-6 box”>.

News Page Code Errors:

In the <section class=”col-md-6” Id=”boxnews”> I had an extra double id box so I deleted both id’s and left them as a class in order to become like this: <section class=”col-md-6 boxnews”>.

Gallery Page Code:

I had a double <body> code as an error and removed one of it as there should be only one <body> In the code. In the code ... I had to add alt=”” as I had an error and the photo remains there.

In the About us and Contact us pages I had no errors in the code.

Main.css Code:

In this code .submit_btn I had two options that do not exist so I had to delete them from the main code.

Process:

Home Page:

News Page:

Gallery Page:

About Us Page:

Main.css:

In the past years I did some html and CSS when I used to attend another Mcast branch at Paola and also designed some websites but I wanted to refresh my memory. I also viewed some videos on YouTube and I got some examples from W3schools. Redd gave us some exercises that we had to do by our self such as a Facebook page and started creating a Facebook page from scratch with the search box, home button, name of account, Facebook logo, etc and I got more confidence. I decided to use Atom as a text editor as our lecturer started to show us how it works. First if all I created all the HTML files plus the CSS and a folder containing images that I was going to use. After I decided to change my plan, removed the ‘competitions’ page and added the ‘contact us’ page as in my opining I thought it would make more sense. As I started coding the website I found it difficult because id didn’t know everything. The teacher helped us with our difficulties along the lessons. I also watched some videos in order to try to be more confident with the building of the website. The teacher helped me by teaching me how to use “Inspect Element” so I could fix my errors. I learnt most of the coding from previous websites that I used to test on and used some of their coding in my new website. Even though I had few time to build the website as I had another assignments to do I really enjoyed doing it as its very interesting and Im satisfied with the final work I managed to do.

Cons:

Time management

Problems with the code errors

Gallery structure

Prons:

User friendly

Tried to use good colour scheme in order to not affect the eye

Easy to use the galler

Task 3: Started creating my website:

I decided to use Atom as a text editor as our lecturer started to show us how it works. First if all I created all the HTML files plus the CSS and a folder containing images that i was going to use. After I decided to change my plan, removed the ‘competitions’ page and added the ‘contact us’ page as in my opining i thought it would make more sense.

In the header I included the logo with the name of the website and made social media buttons such as facebook, instagram, google + and youtube in order to provide a link of my website so visitors could follow. I took some ideas regarding the logo from the website Goal.com.

First I created the logo at the top left corner and then I created the menu subdividing into all the buttons(pages).After I made every page active so when you click it it will remain active with the white colour in the background.

I created a hover element with the white colour as a background like the previous one and after the footer with the copy right symbol in it and the year it was created 2017. I decided to use red as a background colour, made a copyright symbol and the date at the middle of the footer while being active on every page selected.

Starting to learn HTML and CSS

In the first week of this unit, our teacher showed us how to design a website from scratch step by step. In the past years I did some html and CSS when i used to attend another Mcast branch at Paola and also designed some websites but I wanted to refresh my memory. I also saw some videos on YouTube and on the Web. By the second and third week our lecturer Redd started to show us how to code step by step and how to write the “Hello World” in the html code and display it on Google chrome. He then gave us some exercises such as a Facebook page and started creating a Facebook page from scratch with the search box, home button, name of account, facebook logo, etc while the other lecturer Andrew helped us to design our website with wireframes on illustrator so it could be easier for us to work acting as a guide.

Task 2

https://drive.google.com/open?id=0B8HZM5zIiGvRRjZtSXdNTk5YeFE

Task 1

https://drive.google.com/open?id=0B8HZM5zIiGvRX0k0VFlwUFlUNms

0 notes

usefulstuffmouzon · 8 years ago

Text

Modifying HTML Email Signatures for MacOS Sierra

One of the most un-Mac-like things that Apple does is the way it handles HTML email signatures, and it changes slightly with every version of the operating system. This is this version’s procedure. I haven’t updated my signatures since 2014 because we don’t need to change addresses, but I’m now working on a new book and want to swap out the New Media cover image I’ve been using for the Walk Appeal cover image.

I edit my signatures using Komodo, which is free and easy to use. Except for two signatures which still used our old address, the only thing that needed to change was the book image. But since I did this last, Retina-quality displays have become common, both with Apple and with other manufacturers as well. It turns out that there’s a really simple way to handle this. Upload an image double the resolution you need. In this case, my book image shows up 288 pixels high on an ordinary screen, so I uploaded an image 576 pixels high. Specify 288 as the height in the html, but when a computer with double-resolution displays like a Retina display reads your email, it’ll get the higher-res version of the image. So cool! I was afraid it would be really complicated. One more thing: I don’t just put the image on there as email decoration. Rather, it’s the anchor for a link back to the Walk Appeal subscription page. I’ll change that later to the Amazon sales page once the book is out. Here are the steps to making the new signatures:

1. Create the new book cover graphic as noted above, and save it wherever you save such things.

2. Upload the graphic to your web host. I keep all my hosted graphics that aren’t on any of my websites in one folder on my host so they’re easy to find. I get to it using something A2 Hosting calls “File Manager.” Your web host should have a similar way of getting to all your hosted files.

3. Keep your HTML signatures in a folder on your computer named by the year they were made or modified. This means you can duplicate that folder, rename it for the current year, and edit out signatures for previous employees, etc. They take up almost no space, and you might need something from an older version someday.

4. Open the first signature in HTML editor (Komodo for me, as noted above) and make these changes to the line of code that defines the image: a. Change the width attribute to be 18 wider than the image… at least that’s what I use. You may want to play with this. b. Change the href attribute to the URL you want people to go to when they click the book image. c. Change the src attribute to the URL of your hosted graphic. d. Change the width and height attributes to half of the full size. To clarify from above, the full-resolution image is 384 x 576 pixels, so I set width=“192” height=“288” because these are precisely half of the full-resolution images so they’ll display properly on Retina displays (the quotation marks are part of the code). e. Change the alt attribute to what you want to pop up when someone hovers their mouse over the book image in your email. For me, I used alt=“Walk Appeal book”.

5. Copy this entire line of code. Open each other signature for which you’d like to use this image and paste the code over the existing code with the previous image.

6. While you’re in each file, make any other necessary modifications, like address changes, link changes, etc.

Now comes the un-Apple-like part. Buckle up.

7. Go to Mail>Preferences and click the Signatures tab, then click on All Signatures at the top of the left column. In the middle column, select the signature you want to update. Click the minus button at the bottom of the column to delete the old one.

8. Click the plus button beside it to create a new signature. Rename it the same as the one you just deleted. Close the Preferences window and quit Mail. Very Important: None of the stuff below will work right unless you quit out of Mail!

9. While researching how to do this with MacOS Sierra, I came across this helpful page, but they had one big difference… not sure if it was because they were on an earlier update of Sierra whereas I’m on the latest or what, but they said that if you have your iCloud Drive activated, you should follow a completely different set of instructions from what I’m about to describe. If what I’m describing doesn’t work for your setup, try theirs. Here’s mine:

10. In case you don’t visit your Library often, you might not remember how to get there. Apple has hidden it to keep young children from screwing stuff up, so from the Finder, mouse down on the Go menu while pressing the Option key and you’ll see Library appear on the drop-down menu between Home and Computer. Click on Library. Once inside the Library, go to Mail>V4>MailData>Signatures.

11. In the Signatures folder, you’ll see one file for each of your signatures; they’re the ones with the .mailsignature extension. The file names themselves are complete gobbledygook, but look for the .mailsignature file with the most recently-modified time. There’s also an AccountsMap.plist file that should be modified at the same time; be sure to open the .mailsignature file instead. It should open in TextEdit. If it doesn’t for some reason, open it manually in TextEdit by dragging the file to the TextEdit icon on your Dock.

12. Open the HTML file for the signature you’re modifying in Komodo. The easiest thing to do is open the Get Info window for all your HTML signatures and change the Open With window to Komodo Edit. This way, they’ll all automatically open in Komodo from now on. Once it’s open, Select All and Copy.

13. In the .mailsignature file you have open in Text Edit, you’ll see several lines (5 for me) of metadata at the top, then a space, then the code for the placeholder text in the signature you just created in Mail in Step 8. Don’t touch the metadata or the empty space below it, but select the placeholder code and delete it all. Paste the code from your HTML file. Save and close the .mailsignature file.

14. Very Important: Be sure to do this step, or Mail will overwrite your new signature when you open it in a moment! In the Finder, click the .mailsignature file you just edited and Get Info. Click the Locked checkbox. This prevents Mail from overwriting it.

15. Reopen Mail, go to Preferences, and click the Signatures tab. Click on the new signature and make sure it looks right in the right window. You may need to drag the window to make it larger to see your entire signature. The hosted graphic will only show up here as a blue box with the alt title you set in Step 4(e), which is normal. Now drag the signature you just updated from the middle window to the account(s) where you want to use it in the left column. Click on the account(s). If you want that signature to be the default signature for that account, select it in the Choose Signature drop-down menu at the bottom. For most of my accounts, I have only one signature per account, but for my mouzon.com account, I have several because I have more than one Mouzon company. Once you’ve done these things, create a new email, select the right account, and if you have more than one signature on that account, select the right one. Look closely to be sure that everything looks right. For reasons I can’t explain, Mail occasionally adds an extra line above the signature, or has one less line than you expect. Maybe I should have restarted or something. If something like this happens, do what I didn’t do and restart. If the problem persists, go back to Step 7 and do it over. Once you’ve updated a signature or two and get the hang of it, the whole process only takes a couple minutes. Once you’re satisfied with that signature, if you have more signatures to update, go back to Step 7 and repeat. Otherwise, go to Step 16.

16. One last thing: once you’re done, look back and see if any of the .mailsignature files have Modified dates earlier than when you started your latest modifications. If they do, open them and see what they are. It may be that you locked earlier versions, so those could be old signatures you no longer need. If so, delete them. Then congralate yourself… you’re done!

0 notes