Информатика II: Проектирование, создание и объяснение веб-сайта
GAC Інформатика Тема 2 20:51 Английское озвучивание · Английский + китайские субтитры (встроенные)
Главы
Транскрипт
A school-transport website can help classmates understand the main result and inspect the study's method. A useful page needs a clear purpose, readable content, working navigation and appropriate evidence. This lesson follows the existing Computing II handout, then uses separate practical notes to build and explain a complete small page. The transport counts are invented for practice. Follow the current centre brief for the assessed project, required tools and publishing procedure. A local example demonstrates the skills, while an actual practical submission also needs the centre's required evidence of completed work.
Start by naming the reader and the information they need. For our example, classmates should find the main transport count and understand its limits. A wireframe shows where the title, navigation, findings and method belong. Information architecture describes how pages and sections relate, while visual hierarchy helps the eye find what matters. These decisions affect the site before a colour scheme is chosen. Ask a reader to explain where they would look for the method. If that path is unclear on paper, improve the structure before coding it.
HTML describes the structure and meaning of the page. An element may contain text or other elements, and its attributes give additional information. Some elements, such as an image, do not have a separate closing tag. Use a heading because the text is a heading, not just because you want larger letters. Regions such as navigation and main content help describe the document. An image's text alternative depends on its role: meaningful information needs a useful description, while a purely decorative image can have empty alternative text.
A selector identifies which elements a CSS rule affects. Its declarations set properties such as colour, spacing or width. The box model helps explain the space used by content, padding, borders and margins. The original handout's phone-card example shows why a flexible limit can be better than one fixed width. Test the page when the window narrows and when text grows. A media query can change a layout where that change is useful, but it does not automatically make an otherwise fixed or crowded page responsive.
The browser represents the page as a document tree, often called the DOM. JavaScript can find elements in that tree, read their properties and change the displayed content. Events such as a click or selection change can trigger a function. For this level, keep the interaction small enough to explain clearly. Our example filters a table and changes the theme. The basic report remains readable before those features are added. Browser JavaScript is visible to visitors and should not contain private keys or information that the audience is not permitted to see.
Hosting provides the service that delivers the site files, while a domain gives people an address to reach them. A successful local preview does not prove the hosted version works. Before an authorised launch, check links, keyboard use, text size, phone layouts and media permission. After delivering the required files through the approved process, open the actual URL and repeat the relevant checks. Keep private drafts and participant details out of public files. This lesson teaches the process; it does not authorise a public launch or show that a student has already completed one.
A promotion plan begins with the audience and objective. For example, a project may aim to help classmates find the approved report during project week. State what the post will say, where its link goes, when it will appear and who is responsible. Follow the centre and platform requirements. Measures such as reach, displays and link clicks describe different things. A large display count does not establish that readers opened or understood the report. Planning a post and interpreting practice metrics develop the skill; they do not show that a real promotion activity happened.
The practice page has a bounded job: give classmates a short overview of invented school-transport counts. It includes a title, section links, a table and the method's limits. An actual project should connect this overview to its approved report and sources, and a talk can guide listeners to the same page. We have not invented a report download or a public submission. The example is an original teaching case. Its design choices should help the reader find information, rather than make the page look more complicated than its content requires.
On the wireframe, identify what each area does. Findings contains the count table, while Method and limits explains how the practice values should be interpreted. A navigation link labelled Method and limits tells the reader where it goes; click here gives less information. A button label should describe an action such as changing the theme. Ask whether a reader can predict what will happen before using the control. This connects written content, organisation and usability, rather than treating navigation as a row of decorative items added at the end.
Save the complete example from the supplement as transport dot HTML and open it in a browser. It needs no library, account or network request. The head declares UTF-8 so the browser can interpret the text, sets the viewport to the device width and gives the tab a meaningful title. The document's language is English. The snippet here shows the beginning, while the supplement contains the complete file. A local preview is an appropriate first check. It is separate from hosting or any authorised public publication.
The navigation link uses a fragment beginning with a hash. Its value method points to the element with the ID method. The label tells the reader what is there, while the fragment tells the browser which element to reach. If the target ID is misspelled or missing, the label can still look correct but the navigation fails. Use unique IDs so the target is unambiguous. The section also has a heading that names its role. Check the actual link in the browser, rather than judging the code only by appearance.
The table caption states that these are practice counts, not research findings. Column headings identify the mode and number of responses, while each row heading names the mode. The invented counts are twelve for walking, eighteen for bus and six for cycling, giving thirty-six in total. Bus has the largest count. That comparison does not explain why a mode was chosen or establish the whole school's habits. Table structure and wording both matter: clear numbers in poorly described columns can still leave the reader unsure what is being counted.
The report's content is already in the HTML. JavaScript is used only for optional filtering and theme changes. The controls begin hidden so a script that is unavailable does not leave a visible but inactive filter. The script attaches the listeners before showing the controls. Without the script, readers still have the complete table, methods and section links. This is a small example of progressive enhancement. A larger project needs checks for its own features and failure cases; this pattern is not proof that every possible script error has been handled.
A CSS custom property stores a reusable value. The example uses named values for the page, text, borders and links. The body, buttons and selection control use the same page colour. Adding the dark class changes that colour set together, rather than leaving one reading area with a lighter fill. Sections stay separated by borders and space. The chosen text and link colours must remain readable against their background. Check the rendered page in both themes, including the controls and keyboard focus outline, rather than approving only a set of colour codes.
The reading area has a maximum width, but it can shrink with the window. Padding keeps the text away from the edge. Border-box sizing includes padding and borders in specified dimensions, making those dimensions easier to reason about. The navigation uses a flexible row that can wrap when space becomes limited. This directly addresses the small-page example without needing a breakpoint. If an adaptation adds two columns, it may need a media query to stack them at an appropriate point. Test the actual content because a layout that fits short labels may fail with longer ones.
Use the keyboard to move through the links and controls. The focus outline helps you identify the currently active item. Do not remove that cue only because it is visible. Underlined links provide a cue beyond colour, and table headings explain the cells. If an adaptation adds images, decide what they contribute. An informative image needs an appropriate text description; a purely decorative image can use empty alternative text. Also test enlarged text and narrow windows. Accessibility is a set of practical reading and interaction needs, not a label added after a visual design is complete.
The script first locates the controls, the category selection, the table rows and the status paragraph. Query selector returns the matching element for a selector such as hash mode. Query selector all returns the collection of table body rows, which the example turns into an array. These names make the later code easier to read. The script is placed after the page content, so those elements have already been parsed. The row collection represents three transport categories, not thirty-six separate responses. Keep that distinction when explaining what the counter measures.
When the selection changes, the event listener runs its function. The shown counter starts at zero for this change. For each row, the condition asks whether the chosen value is different from all and whether the row's mode differs from that chosen value. Both parts must be true to hide the row. If the row remains visible, the counter increases once. The condition compares categories, while the response number is a separate cell. A count of one visible category therefore does not mean there was only one bus response.
Trace the Bus selection row by row. The chosen value is bus, so it is not all. The walking row's mode differs and becomes hidden. The bus row matches and stays visible. The cycling row differs and becomes hidden. The shown counter ends at one category, while the bus cell still says eighteen responses. Now select all. The first part of the hidden condition becomes false for every row, so every row is visible and the counter becomes three. Filtering does not alter the original thirty-six-response total or prove anything about the real school.
After changing row visibility, the script updates the status paragraph as text. Its template includes the shown number and chooses category for one or categories otherwise. Text content treats the result as text rather than interpreting it as HTML. The paragraph has the status role, which can help assistive software announce the update. A real accessibility review should check the behaviour with the available tools, not assume an attribute solves every need. Here the message makes the filter result explicit to readers who might otherwise overlook which table rows changed.
The theme button listens for a click. Toggling the dark class adds it when it is absent and removes it when it is present. The returned Boolean tells the function which state now applies. The function then changes the button label to describe the next action: use light theme when dark is active, or use dark theme when light is active. The colour rules remain in CSS. This separates the event and state change from the appearance rules, making the small interaction easier to follow and adapt.
Progressive enhancement starts with useful basic content and adds optional features. In this example, the report, table and navigation are ordinary HTML. The script reveals the interactive controls after attaching their listeners. If the script is unavailable, the complete table remains readable and the controls stay hidden. A category filter is a view of the existing data, not a new dataset or analysis. The fictional counts and method limits remain stated even when only one row is shown. An adaptation should preserve that relationship between interaction and truthful explanation.
Before launch, record what you actually checked and what happened. Open every section link and any real report link. Move through controls using the keyboard, enlarge the text, inspect a phone-sized layout and compare both themes. Use an additional device or browser when required, and verify the basic content when optional scripts are unavailable. If a check fails, read the error and fix the cause before repeating that affected check. A list headed tested is not evidence of success unless its results show what was exercised and what remains unresolved.
A relative path identifies a file in relation to the current page's location. If the approved report is saved beside the page under the name report dot PDF, the link shown here can reach it. This is an adaptation example, not a link in the practice page, because we have not created that report. Add it when the actual approved file exists. Check the filename, case and delivered folder structure on the host. A link that happened to work in one local folder can still fail after files are moved or uploaded differently.
A static site can deliver stored HTML, CSS, scripts and images. Static does not mean that the browser cannot run JavaScript or change the displayed page. Our example's filter and theme toggle are browser interactions even though the file can be served as stored HTML. Hosting provides the delivery service; the domain provides an address people use to reach it. Buying or choosing a domain does not upload the required files. For the assessed work, follow the approved hosting and publishing procedure and verify the actual delivered result.
Before an authorised publication, check permission for images, fonts and other media and keep private drafts out of the delivered files. Upload the required files together using the centre's approved process. Then open the actual URL and inspect the relevant content, paths, controls and layout. Keep the editable sources and a known working copy. A local correction does not update the hosted site until it has been delivered. Record versions and dates so the group can explain which result was published. This preparation does not itself perform or prove a public launch.
Connect the media around the same question and evidence. A website overview can make the main result easy to find, while the full report contains detailed methods, evidence and references. A slide in an oral talk can show the address or an approved QR code, but the presenter must test that it reaches the intended version. Do not describe the practice counts as real findings. Check that the report, page and slides use consistent values and limitations. Using more than one medium is useful only when their contents work together rather than contradict one another.
For project week, a possible objective is to help classmates find the approved report. The plan identifies the audience, a short accurate description, the meaningful link, its timing and the person responsible. Check centre rules and platform requirements before using a real account or publishing a post. The destination should be the actual approved version rather than an unfinished draft. Explain how a proposed measure relates to the objective. Preparing this plan demonstrates planning; evidence of a completed promotion task must come from the activities and records required by the centre.
Interpret each metric using its actual definition. Impressions count displays, which may include repeat displays. Reach generally refers to distinct accounts within the service's definition and period. Neither automatically counts people who read the report. A link click records a different event and can also have counting limits or repeats. A click does not prove the page loaded successfully or that the report was read. State the period, numerator and denominator when calculating a rate. Choose evidence appropriate to the objective instead of treating the largest available number as success.
In the invented promotion example, post A has four hundred impressions and twenty link clicks. Using link clicks divided by impressions, its rate is twenty over four hundred, or five percent. Post B has two hundred and fifty impressions and twenty-five link clicks, giving ten percent. B has both more link clicks and a higher rate despite fewer displays. State that denominator because another measure could use a different one. These are practice counts for calculation, not evidence from a published campaign and not a count of confirmed report readers.
B's higher observed click-through rate does not prove its wording caused the difference. The audience, timing and other conditions may differ, and the event counts may include repeats. Clicks also do not establish that the destination loaded or the report was read. When planning an improvement, choose one change, record the context and compare a measure suited to the objective. This can make interpretation more disciplined, but an uncontrolled comparison still has limits. Keep unnecessary personal tracking outside the academic task and avoid conclusions stronger than the evidence supports.
Pause and answer the first practice questions. The Method link reaches the element whose ID is method, so the fragment and target must match. Selecting Cycling should show its row with six responses and a status count of one category. Filtering does not change the original total of thirty-six. Without JavaScript, the text, full table, method and section links remain useful, while optional controls stay hidden. Explain each answer by connecting the code to the actual displayed result. Then adapt one feature and check whether your prediction still matches the browser.
For the remaining checks, a domain does not deliver files by itself: the site needs approved hosting, file delivery and verification at the actual URL. Post C's rate is twenty-four divided by six hundred, giving four percent. B's higher rate does not prove that its wording is better because other differences and measurement limits remain. A completed task needs evidence such as the plan, source files, working interaction, checked results and the publishing, academic and promotion records required by the current brief. Reading the lesson prepares you for that work rather than proving it has already been done.