Dayanara Valle
CONCEPTOS BÁSICOS W e b y M u l t i m e d i a
21-10-2018
y G r á f i c o D i s e ñ o
Determina los elementos básicos que se debe tomar en cuenta para la creación de sitios mediante la bùsqueda de los diferentes tipos de sitios web.t
M u l t i m e d i a
OBJETIVO
3 5 7 10 11 13
Estructura Básica HTML
página.
Estructura Semántica
página.
Estructura de Archivos CSS yJavaScrip
página.
Sitio Web
página.
página.
Construcción de sitios web: TECNOLOGIAS NECESRIAS
Clasificación de sitios web
Estructura Básica HTML Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).. La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código, podemos cambiar el título de la página
3
Dreamweaver
Es la primera línea del archivo.
1
<!doctype html>
2
<html> </html>.
Va primero y al igual del resto contiene una etiqueta de apertura y una etiqueta de cierre.
3
<head> </head>
Este se representa como un juego de caracteres que permite observar la presentación del texto.
4
<meta charset="UTF-8"> texto.
5
<title>Documento sin título</title
6
<body></body>
HTML es la raíz de la estructura global que comprende este lenguaje.
Esta etiqueta especifica el título del documento.
Representa el cuerpo es la parte visible de todo el documento dentro de esta mantiene una estructura de cuerpo.
4
Estructura Semántica
Uno de los aspectos más importantes de las estructura de una página web es decidir dónde posicionaremos los menús de navegación y enlaces a otras páginas web y dónde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras estándares de páginas web que especifican la posición de los menús de navegación y el contenido, manteniéndose esta estructura y diseño durante toda la navegación por el sitio web. Busca estructurar de una manera lógica el contenido de las páginas, etiquetas que permiten ver y luego poder utilizarlas como css. Encontrar la etiqueta del tipo de contenido que quiero y en donde lo quiero.
5
Dreamweaver
<HEADER> Menú de navegación, donde se encuentran todos los apartados de la
Cabecera de la web, incluye el logo en ocasiosiones otros elementos adicionales
<Nav>
<Section> <Article> <Aside>
Contenido
Barra lateral donde se encuentran otras secciones
<Article>
FOOTER 6
Pie d epágina
Estructura de Archivos CSS yJavaScript
Al igual que los documentos HTML, los documentos CSS son archivos de texto donde se escribe una serie de órdenes y el cliente (navegador) las interpreta y aplica a los documentos HTML asociados. Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto. Por ejemplo, el elemento p. Realmente, esto es mucho más complejo, pero ya dedicaremos una serie de capítulos exclusivamente a este tema. Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS e iremos aprendiendo. Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento.
7
El lenguaje JavaScript permite agrupar funciones y disponerlas en un archivo separado a la página HTML. Esto trae muchos beneficios: Reutilización de funciones de uso común. No tenemos que copiar y pegar sucesivamente las funciones en las páginas en las que necesitamos. Facilita el mantenimiento de las funciones al encontrarse en archivos separados. Nos obliga a ser más ordenados. Crear un archivo con extensión *.js y tipear las funciones en la misma:
Es decir debemos disponer el siguiente código para importar el archivo funciones.js: <script src="funciones.js"></script> Mediante la propiedad 'src' indicamos el nombre del archivo a importar. Luego, podemos llamar dentro de la página HTML, a las funciones que contiene el archivo externo funciones.js; en nuestro ejemplo llamamos a las funciones retornarFecha() y retornarHora(). Como podemos ver, el archivo html queda mucho más limpio.
Creamos un archivo html que utilizará las funciones contenidas en el archivo funciones.js
Es importante notar que primero se importa el archivo 'funciones.js' y recién podemos llamar a las funciones contenidas. Si quiere probar en su equipo este ejemplo debe generar los dos archivos 'funciones.js' y 'pagina1.html', luego llamar desde el navegador la página HTML.
8
59
Sitio Web Un sitio web es un conjunto de páginas web desarrolladas en código html, relacionadas a un dominio de Internet el cual se puede visualizar en la World Wide Web (www) mediante los navegadores web o también llamados browser como ser Chrome, Firefox, Edge, Opera entre otros. Cada página web perteneciente al sitio web tiene como objetivo publicar contenido, y este contenido podrá ser visible o no al público.
10
Construcción de sitios web:
TECNOLOGIAS NECESRIAS
Los sitios Web requieren una combinación de tecnologías que ayudan a crear las páginas web.
Javascript
CSS
Javascript proporciona ciertos controles de interfaz de usuario que puede hacer un sitio web más interesantes, así como añadir características de uso fácil en el sitio web. Ratón roll overs, Downs caída de navegación y validación de formularios web son algunos de los más usos prácticos de JavaScript.
Aunque el CSS no es una tecnología, vale la pena mencionar su ayuda, ya que crea la uniformidad en todo el sitio web. Las Hojas de Estilo en Cascada o CSS permiten a los diseñadores crear las reglas de la pantalla en un archivo central que luego se aplican a través de la página web.
11
Recibir accidentes de interacción
(INTELIGENCIA)
Programación que se ocupa de monstrar los contenidos en la patalla
(MEMORIA)
HTML Hyper Text Markup Lenguaje o HTML proporciona la base para la creación de páginas web. Crea archivos de texto que son leídos por los navegadores web. Los archivos HTML son muy versátiles, ya que permiten la entrega de archivos de imagen, contenido y campos de formulario en línea para los usuarios.
12
Colores Estilo Posición
(ASPECTO)
Clasificación de sitios web
SITIOS WEB PUBLICOS SITIOS WEB PUBLICOS Es un WebSite normal, una página dirigida al público general, sin restricciones de acceso en principio. INTRANETS Son Sitios limitados por el tipo de usuarios que pueden acceder, por ejemplo los proveedores de una empresa determinada, o los clientes. EXTRANETS Son sitios cuyo acceso está restringido a una empresa u organización, normalmente funcionan dentro de redes privadas, aunque no siempre es así.
DINAMISMO DINÁMICOS Conjunto de aplicaciones en línea que permiten crear y mantener fácilmente un sitio web, encargándose hasta de las tareas más tediosas que ocupaban el tiempo de los administradores del sitio web. INTERACTIVOS El usuario puede influir sobre el contenido del sitio que variará en función de cada usuario y delos objetivos de éste. ESTÁTICOS Los usuarios no pueden modificar o añadir nada al sitio, de cuyos contenidos se encargan exclusivamente sus diseñadores.
13
SITIO POR PROFUNDIDAD COMERCIALES Realizar actividades económicas, pueden ser corporativas, promocionales. PERSONALES: Al igual que los anteriores, son un medio de expresión de su creador o creadores. Sus objetivos y su audiencia pueden ser de lo más variopinto.
POR SU A PERTURA ESTRUCTURA ABIERTAS Todos los documentos tienen su dirección & los usuarios pueden acceder a cualquier punto del website. Estructura cerrada: Se limita a pocos puntos de entrada, es decir requiere un registro. ESTRUCTURA SEMICERRADA Se sitúa a medio camino de las anteriores ya que obliga al usuario a acceder por puntos específicos.
INFORMATIVOS: Su finalidad principal es distribuir información. La audiencia de este tipo de sitios depende del tipo de información que distribuyen.. OCIO: Aunque normalmente son sitios con una finalidad económica, son un caso especial. No son sitios fáciles de crear ni de mantener y a veces siguen reglas propias. NAVEGACIÓN: Su finalidad es ayudar al usuario a encontrar lo que busca en Internet. ARTÍSTICOS: Son un medio de expresión artística de su creador o creadores.
14
Conclusiones: Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. t Dentro de <html></html> se encuentran 2 partes diferenciadas. La primera <head></head> es la cabecera de la página. La segunda parte es <body></body>. Aquí va propiamente el contenido de la página. La estructura semántica se compone mediante el panel principal (<main>), encabezado(<header>), navegación(<nav>), artículo(<article>), aside(<aside>) y el pie de página (<footer>.) Un sitio web es un conjunto de archivos de hipertexto (página web y carpetas relacionadas entre sí, cada sitio web tendrá una dirección única). Javascript: Recibir accidentes de interacción Html: Programación que se ocupa de monstrar los contenidos en la patalla CSS: estilos Existen muchas maneras de clasificar un sitio web, cada uno de ellos poseen características particulares, convirtiendo a la internet en una gran autopista con lugares que se adapten a las necesidades del visitante.
Bibliografía: https://lenguajecss.com/p/css/introduccion/estructura-de-csshhttps://lenguajecss.com/p/css/introduccion/estructura-de-css http://www.tutorialesprogramacionya.com/javascriptya/temarios/descripcion.php?cod=40&inicio= https://definicion.de/sitio-web/ http://www.a2sistemas.com/blog/2008/12/22/tecnologias-utilizadas-para-el-diseno-de-un-sitio-web/http://sitioswebysuclasificacion.blogspot.com https://www.icesi.edu.co/blogs_estudiantes/sibunmarketing/2009/09/02/clasificacion-de-sitios-web/ https://www.icesi.edu.co/blogs_estudiantes/sibunmarketing/2009/09/02/clasificacion-de-sitios-web/