janela pacheco v
Conceptos básicos º estructura básica de html. º estructura semántica. º estructura de archivos css y javaScript. º sitios web. º clasificación de los sitios web. º construcción de los sitios web: tecnologías necesarias.
OBJETIVO: 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.
ยบ estructura bรกsica de html.
Declaraciรณn del tipo de documento (Document Type Definition o DTD) La primera lรญnea de cรณdigo para una pรกgina web es lo que se denomina la declaraciรณn del tipo de documento, o DTD.
Inicio y fin del cรณdigo <html></html> El inicio y el fin del cรณdigo de la pรกgina se determina con la apertura y cierre de la instrucciรณn html: <html> </html>. Todo lo que se encuentra entre la apertura y cierre de esta es el cรณdigo de la pรกgina.
En el bloque <head></head> se incluyen las instrucciones especiales para el Navegador, como pueden ser el juego de caracteres que utiliza la página, los datos del autor, el título de la página, instrucciones para los motores de búsqueda o el llamado de archivos para que realicen algo en la página, por ejemplo los archivos de Estilos en Cascada. Metadatos <meta> Es indispensable indicar el juego de caracteres que utilizaremos mediante la instrucción meta y el atributo charset, el estándar actual es UTF-8: <meta charset=”utf-8 > Título <title></title> En medio del bloque de la instrucción title se incluye el título de la página, el cual aparece en la pestaña o barra superior del navegador:
Cuerpo del documento <body></body> En medio del bloque de la instrucción body ingresamos todas las instrucciones que dan la estructura y contenido de la página web. A diferencia de las instrucciones que se incluyen dentro del bloque de la instrucción head, lo que se incluye dentro de body es visible en la pagina web.
º estructura semántica. La estructura y contenido semántico del html de tu página web determina lo difícil, o no, que lo tendrán buscadores, bots, apps o dispositivos para interpretar y extraer el contenido de tu página web.
Header: Contiene la información corporativa tal como el logo, quizás alguna imagen, un reclamo, un call to action y seguramente el menú de navegación que recogeremos dentro de la etiqueta <nav>. Article: Recoge el contenido principal del que trata la página.
Section: Ayuda a estructurar el contenido de <article>. Aside: Contenido que no tiene relación con el artículo o no aporta nada a la información. Se usa para menús secundarios, banners, formularios… Footer: Espacio destinado a la firma, copyright, avisos legales, datos de contacto y temas así.
º estructura de archivos css y javascript.
El lenguaje HTML (HyperText Markup Language) nos aporta la estructura básica de los sitios, mejorada y modificada por otras tecnologías como CSS y JavaScript .
CSS u Hojas de Estilo en Cascada (Cascading Style Sheets)se utiliza para controlar la presentación, el formato, y el diseño de nuestra aplicación. Gracias a ella podemos dar forma al estilo que queremos que se muestre.
JavaScript se utiliza para controlar el comportamiento de los diferentes elementos, esto es, aporta funcionalidad, dinámica, a nuestros elementos.
º sitios 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.
º CLASIFICACIÓN DE LOS sitios web. Sitio por Audiencia: Públicos: Es un WebSite normal, una página dirigida al público general, sin restricciones de acceso en principio.
Extranet: Son Sitios limitados por el tipo de usuarios que pueden acceder, por ejemplo los proveedores de una empresa determinada, o los clientes.
Intranet: Son sitios cuyo acceso está restringido a una empresa u organización, normalmente funcionan dentro de redes privadas, aunque no siempre es así.
º CLASIFICACIÓN DE LOS sitios web. Sitio por Dinamismo: Interactivos: El usuario puede influir sobre el contenido del sitio que variará en función de cada usuario y de los objetivos de éste. Normalmente, las páginas se generan cuando el usuario las solicita, personalizando la información que se le ofrece.
Estáticos:Los usuarios no pueden modificar o añadir nada al sitio, de cuyos contenidos se encargan exclusivamente sus diseñadores.
º CLASIFICACIÓN DE LOS sitios web. Sitio por Apertura: Estructura Abierta: Todos los documentos disponen de su dirección y los usuarios pueden acceder a cualquier punto del WebSite .
Estructura Cerrada: Limita el acceso a unos pocos puntos de entrada (incluso a uno sólo). Un ejemplo sería un sitio que requiere un registro previo para entrar, el usuario siempre tendría que pasar primero por el registro antes de poder acceder al resto de la página.
Estructura Semicerrada: A medio camino entre ambas, obliga a los usuarios a acceder por unos puntos específicos, cómo por ejemplo sólo la página principal y las páginas de entrada a las secciones más importantes.
º CLASIFICACIÓN DE LOS sitios web. Sitio por Profundidad: Basada en el número de enlaces que hay que pulsar para llegar al contenido. En general los usuarios prefieren sitios poco profundos. Una buena regla a seguir es que el usuario no tenga que pulsar más de 3 enlaces para encontrar lo que busca.
Sitio por Objetivo: Comerciales: Están creados para promocionar los negocios de una empresa. Su finalidad es económica. Su audiencia puede estar formada por clientes (actuales y potenciales), inversores (actuales y potenciales), empleados (actuales y potenciales) e incluso la competencia y los medios de comunicación.
º CLASIFICACIÓN DE LOS sitios web. Buscadores: un sitio que proporciona información general y está pensado como entrada o búsqueda para otros sitios. Ejemplos Google, y Yahoo!
Comunidad Virtual: un sitio donde las personas con intereses similares se comunican con otros, normalmente por chat o foros. Por ejemplo: MySpace. Sitio weblog (o blog): sitio usado para registrar lecturas online o para exponer diarios online; puede incluir foros de discusión. Ejemplos: blogger, Xanga. Comercio Electrónico: para compra y venta de bienes, como Ebay.com. Wiki: un sitio donde los usuarios editan colaborativamente (por ejemplo: Wikipedia). Educativo: promueven cursos presénciales y a distancia, información a profesores y estudiantes, permiten ver o descargar contenidos de asignaturas o temas. otros recursos en Internet o una intranet. Portal Web: un sitio web que proporciona un punto de inicio, entrada o portal a otros recursos en Internet o una intranet.
º construcción de los sitios web: tecnologías necesarias. Los sitios Web requieren una combinación de tecnologías que ayudan a crear las páginas web. 1. 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. HTML pueden ser creadas por la dirección el código directamente en el Bloc de notas o con la ayuda de los editores de HTML que se utilizan en gran medida por los diseñadores. Algunos de los más populares son los editores de HTML Dreamweaver y Frontpage.
2. Photoshop: Si bien Photoshop es un software que se utiliza para edición de imágenes, es apropiado mencionar aquí ya que la mayoría de las imágenes en línea son editadas con la ayuda de Photoshop. Photoshop proporciona herramientas para manipular las imágenes de un sitio web y, a veces, los diseñadores pueden incluso crear la base del diseño web en Photoshop y con la aprobación del cliente seguir adelante y convertir a HTML.
º construcción de los sitios web: tecnologías necesarias.
3. Flash: Una forma interesante de interactividad de páginas web se crean con la ayuda de Flash. El uso de Flash se ha empezado a utilizar ampliamente. La razón detrás de esto es bastante simple, el aumento en la disponibilidad de ancho de banda de todo el mundo se ha traducido en la capacidad de los usuarios para acceder a sitios web flash con bastante facilidad. Los archivos de Flash tienden a ser ligeramente más pesados que los ordinarios archivos HTML, debido a que el código contiene elementos interactivos
Conceptos bรกsicos