UNIVERSIDAD MEXIQUENSE DEL BICENTENARIO

UES TEPOTZOTLÁN

TECHNICAL ENGLISH 1
“WEBSITE”

WORK PRESENTED BY DIAZ GARCIA GEYMMY, GODÍNEZ

ETCHEGARAY JESÚS SANTIAGO, HERRERA ZAMORA
JOSAFAT, SÁNCHEZ HERNÁNDEZ MARTIN, MELCHOR
MEDRANO KENNET, PIÑA VILLEGAS ÁNGEL URIEL TO
CREDIT THE SUBJECT "TECHNICAL ENGLISH 1" OF THE
CAREER OF ENGINEERING IN INFORMATION AND
COMMUNICATIONS TECHNOLOGIES.
Advisors: García Galiano Karen Argelia and Figueroa Castro
Antonio

March 2021
 Members
• Díaz Garcia Geymmy
• Godínez Etchegaray Jesús
Santiago
• Herrera Zamora Josafat
• Sánchez Hernández Martin
• Melchor Medrano Kennet
• Piña Villegas Ángel Uriel

TECHNICAL UMB UES Tepotzotlán

25IT181

ENGLISH 1 Advisors
• Garcia Galiano Karen Argelia
• Figueroa Castro Antonio

“WEBSITE”
Draft

1
 Índice
Introduction.......................................................................................... 3
Overall objective .................................................................................. 5
Specific objectives ............................................................................... 5
Hypothesis........................................................................................... 5
Developing .......................................................................................... 6
1 Previous investigation ................................................................... 6
1.1For our website we will work with visual studio Code. .............. 6
1.2 What’s css for? ....................................................................... 8
1.3 What they allow you to do? ..................................................... 9
1.4 What is it for? ......................................................................... 9
1.5 What allows you to do?........................................................... 9
1.6 What’s HTML used for? .......................................................... 9
1.7 What allows you to do?..........................................................10
Bibliography........................................................................................11

2
 Introduction
The project in English matter, it is up to a web side on a digital and
interactive technical book about our career, an investigation was started
on programming languages that will help us develop a web side with
high quality, less time and better results. This research aimed to find the
best program that helps us to create a digital and dynamic book, the
language to be used will be (HTML, CSS, JavaScript).
We will help us from a software code editor in this case we will use
Visual Code since this editor will allow us the interaction and creation of
web design, in the coding from scratch in the same way will give us the
option to preview web development. HTML is a tool that will help us for
the creation of the same web development, this tool is fundamental since
without these codings you could not structure our page, it will also help
us for the definition of content of one as text, images, etc.
CSS helped us to web design since HTML is the creation tool, but CSS
is the style of this, it will help us to give better view of the page giving
better shape, design, color, presentation and help us reduce the
complexity and repetition of code in the structure of the document. And
finally, JavaScript will be responsible for giving the dynamic aspect since
at the time of design and coding the same page it will be essential for
design since this tool will allow us to give movement, realism and
interpretation since JavaScript is a tool that will allow that Dynamism to
the page.
These will be the languages to use in our project would only be missing
to add a hosting and web design as we will transform our website to
mobile application with myappside help. Once the research has been
done, we propose the tools that we use as the book and multimedia
content of this, having well defined the tools to use was made a sketch
of how our website will be, as we want to have that you have and how
we want you to see visually.
It was defined that it will have different sections for the best visualization
and accessibility of those who access it, in the same way that it can be
manipulated by anyone with visual aid. Is currently working with the first
lines of code in Visual Studio Code in the .html section, for this the book

3
is scanned to work and the extraction of the audios, to be able to include
these tools on our website.
What is expected to be achieved and the main objective is to make a
visually attractive and understandable web page for anyone, in this it will
be visualized and it will be possible to interact with a book already
assigned for the subject of technical English 1, the page or the book
Digital will have the following sections:
• Home: This section will show the book and access to it.
• Book: within this you can see how the pages change, and likewise the
digital book will have two tools:
Audios to solve the exercises
Pop-up windows to solve different exercises in the book where the user
will be allowed to answer and check if their answers were correct or
incorrect.

4
 Overall objective

Implement a work tool (Digital Book) that provides support to students

who take the subject of technical English 1.

Specific objectives

• Use knowledge acquired throughout the degree to be able to carry out

the work.
• Promote the use of information and communication technologies.
• Implement new forms of work to provide support to students.

Hypothesis

With the use of this tool that incorporates the use of ICTs, students
receive support that facilitates interaction with the Technical English 1
workbook, likewise UMB students put into practice their knowledge
acquired throughout the career for this Proyect

5
 Developing
1 Previous investigation
1.1For our website we will work with visual studio Code.

Visual Studio Code is a source code editor built on top of the Electron
framework. It supports many programming languages and a set of
features that may or may not be available for a given language. Previous
requirements:
• Microsoft Visual Studio Code
• Knowledge of one or more programming languages and a markup
language, such as HTML
• A computer running one of the following operating systems:
• Windows: Windows 7, 8, 10
• Mac: macOS 10.9 or later
• Linux: Ubuntu, Debian, Red Hat, Fedora or SUSE 1(Velasco, 2021)
Visual Studio Code is a completely free and open source plain text editor
developed by Microsoft to offer users an advanced programming tool as
an alternative to Notepad. This editor is written entirely in Electron, a
framework used to bridge Chromium and Node. Visual Studio Code is
an application based on Electron. Electron is a framework for
programming graphical desktop applications using web technologies,
and includes Chromium (the free version of Google Chrome) as a
graphics engine and the Node.js environment to execute JavaScript
(Node.js in turn uses V8, the compiler Chrome JavaScript). (Velasco,
2021)
Visual Studio Code development takes place on GitHub. GitHub allows
any user to create notifications (called issues) aimed at developers, to
report bugs or make requests. Each issue allows you to track its
evolution: if it is taken into consideration, if it is rejected, comments from

1 Velasco, R. (26 de Mayo de 2021). softzone. Recuperado el 10 de Marzo de 2022, de softzone:

https://www.softzone.es/programas/utilidades/visual-studio-code/
6
other users, its resolution process, final resolution, etc. For Visual Studio
Code, the page is https://github.com/microsoft/vscode/issues.
Programming languages to use:
• CSS
•HTML
•JavaScript
Image 1. programming languages

HTML provides the basic structure of sites, which is enhanced and

modified by other technologies such as CSS and JavaScript. CSS is
used to control presentation, formatting, and layout. JavaScript is used
to control the behavior of different elements. An overview:

• HTML provides the basic structure of sites, which is enhanced and

modified by other technologies like CSS and JavaScript.
• CSS is used to control presentation, formatting, and layout.
• JavaScript is used to control the behavior of different elements.
• Now, let's go over each one individually to help you understand
the roles each plays on a website and then we'll cover how they fit
together. Let's start with good ol' HTML. 2(Cox, 2020)

2Cox, L. K. (19 de Octubre de 2020). HubSpot. Recuperado el 10 de Marzo de 2022, de HubSpot:

https://blog.hubspot.com/marketing/web-design-html-css-javascript
7
1.2 What’s css for?
CSS is a language that is used to provide presentation and appearance,
"style", to web pages (HTML documents). CSS is not a programming
language. We could say that it is a language that usually appears related
or close to a programming language or that it usually collaborates with a
programming language, but it is not a programming language explicity.
CSS is a language that appeared to make web development easier and
to improve the appearance of web developments. A web development
includes multiple areas of knowledge. 3(Krall, 2019)

Image 2. "Web development"

3 Krall, C. (2019). aprenderaprogramar.com. Recuperado el 17 de Marzo de 2022, de

aprenderaprogramar.com:
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=707:ies-
css-un-lenguaje-de-programacion-ipara-que-sirve-diferencias-entre-html-css-php-asp-
cu01004d&catid=75&Itemid=203
8
1.3 What they allow you to do?
It is responsible for providing a pleasant structure and presentation to
what the web page user sees. CSS is a language to provide presentation
and style to web pages whose basic aspects must be known by both
web programmers and web designers. In practice, programming code is
often mixed with HTML code and CSS code, which is why colloquially
we speak of "web programming" to refer to this whole set, although
formally neither HTML nor CSS are programming languages.4 (MDN,
2020)

1.4 What is it for?

JavaScript is a programming or scripting language that allows to
implement complex functions on web sites, every time a web page
displays static information for you to view, it displays timely content
updates, interactive maps, 2D/3D graphics animation, scrolling video
player machines, so on., you can bet JavaScript is probably involved.
(MDN, 2020)

1.5 What allows you to do?

It's a scripting language that allows to create dynamically updating
content, control multimedia, animated images, and everything about
else.
1. Store useful values inside variables.
2. Operations on pieces of text (called. "strings" in programming).
3. And it executes code in response to certain events that happen on a
web sites.

1.6 What’s HTML used for?

Hypertext Markup Language (HTML) is the code used to structure and
display a web site and its contents. For example, their contents could be

4MDN. (2020 de Diciembre de 2020). MDN. Recuperado el 17 de Marzo de 2022, de MDN web docs:
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
9
paragraphs, a bulleted list, or images and data tables. HTML is not a
programming language; it is a markup language that defines the
structure of your content.
HTML consists of a series element that you will use to enclose different
pieces of content so that they look or behave in a certain way. Enclosing
tags can make a word or image a hyperlink to another site, change words
to italics, make fonts larger or smaller the letter, an so on. (MDN, 2021)

1.7 What allows you to do?

It allows us to indicate the structure of our document through labels.
This language offers us great adaptability, a logical structure and is easy
to interpret by both humans and machines. However, throughout its
different versions, have been incorporated and removed, in order to
make it more efficient and facilitate the development of web pages
compatible with different browsers and platforms (desktop PCs, laptops,
smartphones, tablets, so on5. (MDN, 2021)

5
MDN. (11 de Febrero de 2021). MDN. Recuperado el 17 de Marzo de 2022, de MDN web docs:
https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/What_is_JavaScript

10
 Bibliography
Cox, L. K. (19 de Octubre de 2020). HubSpot. Recuperado el 10 de
Marzo de 2022, de HubSpot: https://blog.hubspot.com/marketing/web-
design-html-css-javascript
Krall, C. (2019). aprenderaprogramar.com. Recuperado el 17 de Marzo
de 2022, de aprenderaprogramar.com:
https://www.aprenderaprogramar.com/index.php?option=com_content
&view=article&id=707:ies-css-un-lenguaje-de-programacion-ipara-que-
sirve-diferencias-entre-html-css-php-asp-
cu01004d&catid=75&Itemid=203
MDN. (2020 de Diciembre de 2020). MDN. Recuperado el 17 de Marzo
de 2022, de MDN web docs:
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_
web/HTML_basics
MDN. (11 de Febrero de 2021). MDN. Recuperado el 17 de Marzo de
2022, de MDN web docs:
https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Wha
t_is_JavaScript
Velasco, R. (26 de Mayo de 2021). softzone. Recuperado el 10 de
Marzo de 2022, de softzone:
https://www.softzone.es/programas/utilidades/visual-studio-code/

11