Scribd
Cargar
35 vistas9 páginas

Clase 01

Cargado por

Natanael JV
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
35 vistas9 páginas

Clase 01

Cargado por

Natanael JV
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

Modulo:

DISEÑO DE SISTEMAS DE INFORMACIÓN

UNIDAD DIDACTICA:
ARQUITECTURA DE ENTORNO WEB

Docente: Ing. Oscar Ascón Valdivia

2023-2
CAPACIDAD DE LA UNIDAD DIDACTICA
Diseña páginas web aplicando las normas y estándares del diseño web, utilizando el lenguaje de
marcas de hipertexto HTML5.

Sitio web:
Un sitio web es un conjunto de páginas web accesibles a través de internet, convenientemente
enlazadas y con una finalidad concreta. Está identificado por una dirección URL única, que
usualmente es la página de inicio o Home page.

Página web
Es un documento creado en lenguaje HTML y almacenado en un lugar Web, denominado
servidor, listo para ser visto por un navegador

Dirección web
La dirección web es el "nombre" con el que se identifica una página en internet →
https://www.istpcsr.edu.pe/
Navegador
Un navegador web (del inglés, web browser) es un programa que permite visualizar en nuestro
ordenador la información que contiene una página web.

Funcionamiento de la Web
El navegador envía un mensaje de petición HTTP al servidor, pidiéndole que envíe una copia de
la página web para el cliente (ir a la tienda y hacer un pedido). Este mensaje y todos los datos
enviados entre el cliente y el servidor, se envían a través de tu conexión a Internet usando TCP/IP
Diseño Web
Consiste en la construcción de documentos de hipertexto para su visualización en diferentes
navegadores. Así como asignarle una presentación para diferentes dispositivos de salida ya sea
en una pantalla de computador, en papel, en un teléfono móvil, etc.

Tecnología Front End – Back End


Frontend: Es la parte de un programa o dispositivo a la que un usuario puede acceder
directamente. Son todas las tecnologías de diseño y desarrollo web que corren en el navegador y
que se encargan de la interactividad con los usuarios.
Para convertirte en Frontend Developer debes saber HTML y CSS, los lenguajes de maquetación
que nos permiten definir la estructura y estilos de una página web. Y también JavaScript, un
lenguaje de programación para definir la lógica de nuestra aplicación, recibir las solicitudes de
los usuarios y enviárselos al backend.
Backend: Es la capa de acceso a datos de un software o cualquier dispositivo, que no es
directamente accesible por los usuarios, además contiene la lógica de la aplicación que maneja
dichos datos. El Backend también accede al servidor, que es una aplicación especializada que
entiende la forma como el navegador solicita cosas.
El lenguaje HTML
• HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir
hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces
(hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con
inserciones multimedia (gráficos, sonido...).
• Cada página web de un sitio web se corresponde con un archivo cuya extensión es .htm o
.html
• La última versión de este lenguaje básico corresponde al HTML5, donde se introducen
nuevos elementos que mejoran la navegación y la usabilidad de los sitios web en los distintos
navegadores, como por ejemplo el uso de <canvas>, <video> o <footer>. Es el lenguaje más
recomendable y además el más utilizado a través de los años.
• Esta versión trae el encabezado (header), barras laterales (sidebars), el pie de página (footer),
los menús de navegación, como etiquetas ya establecidas.
• La utilización de "Canvas" o marcos de trabajo, sirven para utilizar animaciones sin necesidad
de instalar plugins ni usar un reproductor Adobe Flash para videos web.
• Para programar una página web en HTML, basta con utilizar cualquier editor de textos, como
por ejemplo el Bloc de Notas de Windows.
• El lenguaje HTML, como cualquier lenguaje de programación, consta de una serie de órdenes
o instrucciones denominadas tags.
• Cada instrucción del lenguaje tiene una sintaxis y una función determinada.
• Todos las instrucciones del lenguaje html se encierran entre los signos < y >, es decir,
<instrucción>.
Estructura básica de un documento HTML
Un documento HTML comienza con la etiqueta <html>, y termina con </html>.
Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien
diferenciadas: el encabezamiento, delimitado por <head> y </head>, que sirve para definir
diversos valores válidos en todo el documento; y el cuerpo, delimitado por <body> y </body>,
donde reside la información del documento.
En resumen, la estructura básica de un documento HTML queda de la forma siguiente:

<HTML>
<HEAD>
<TITLE>Título</TITLE>
</HEAD>
<BODY>
Texto, gráficos, enlaces, etc.
</BODY>
</HTML>
Etiquetas
Las páginas HTML se llena con lo que se denominan etiquetas. Estos son invisibles en la pantalla
para los visitantes, pero permiten que el equipo entienda lo que se desea mostrar. Las etiquetas
son fáciles de detectar. Están rodeadas de "galones", es decir, los símbolos < y >, de esta manera:
<etiqueta>
Hay dos tipos de etiquetas: las etiquetas huérfanas y las etiquetas de dos en dos
Etiquetas de dos en dos
se abren, contienen texto, y se cierran. Lo que aparece como:
<title> Este es un título </ title>
Etiquetas huérfanas
Estas son las etiquetas que más se utilizan para insertar un elemento en un lugar
específico. No es necesario delimitar el principio y el fin de la misma. Una etiqueta huérfana se
escribe así:
<image>
Atributos en HTML
A cada etiqueta podemos incluirle atributos, estos atributos pueden ser creados por nosotros
(javascrip) o utilizar los que el navegador entiende por defecto.

Etiqueta Cierre Atributo Explicación


<!-- --> Añadir un comentario no visible.
<b> </b> Texto en negrita.
<body> </body> Parte visible en pantalla del documento.
alink Modifica el color del vínculo cuando está activado.
background Para colocar una imagen de fondo.
bgcolor Para establecer un color de fondo.
link Modifica el color del vínculo antes de estar activado.
Modifica el color del vínculo cuando ya ha sido
vlink
visitado.
<br> Salto de línea.
<center> <center> Centra en horizontal.
Encabezado de primer orden.Hay otros 5:
<h1> </h1>
<h2><h3><h4><h5><h6>
<head> </head> Cabecera del documento.
<hr> Línea de separación horizontal.
align Alineación de la línea.
noshade Sin efecto tridimensional.
size Grosor de la línea.
width Anchura de la línea.
<html> </html> Apertura y cierre del código.
<sub> </sub> Subíndice.
<sup> </sup> Superíndice.
Establece el nombre del documento. Dentro de
<title> </title>
<head>

Editor de HTML
Un editor de HTML se utiliza para escribir la base de un sitio web. Y si bien cualquier editor de
texto puede hacer este trabajo, no significa que tengas que hacerlo sin ningún tipo de ayuda. Las
funciones adicionales, la comprobación de errores y un editor más intuitivo en general.
Sublime Text
Sublime es uno de los mejores editores HTM. Desarrollado por una empresa con sede en Sydney,
este software se encuentra en la categoría de freemium. Freemium significa que puedes usar
Sublime de forma gratuita, pero debes comprar una licencia para poder disfrutar de todas las
funciones.
Sublime ofrece muy buen soporte para garantizar que el programa se actualice constantemente.
Características

• Sublime es compatible con la API de Python que le permite al plugin expandir su


funcionalidad predeterminada.
• Edición simultánea. Puedes realizar cambios en muchas áreas seleccionadas al mismo
tiempo.
• Sublime está disponible en Windows, OS X y Linux. (32/64 bits).
• API potente y ecosistema de paquetes. Sublime proporciona miles de paquetes que están
disponibles y construidos por la comunidad. Estos paquetes son de código abierto.
• Edición por separado. Los desarrolladores pueden usar múltiples monitores y editar
diferentes tipos de código simultáneamente.
Mi primera página web: Diseñar una pagina web, donde se muestren los datos del PE y datos
del estudiante.

Para ver el resultado de la Pagina Web, dar anticlick en la pantalla de Sublime Text y seleccionar
la opción Open in Browser
Ejemplo 2:

Trabajo
1. Diseñar 5 páginas web utilizando lo aprendido en clase.

También podría gustarte