Módulo de DISEÑO Y DESARROLLO WEB
Objetivo: Diseñar y construir soluciones web de nivel intermedio con interfaz amigable, empleando herramientas multimedia que permitan promocionar la información e imagen de una organización y/o cliente.
1.2. Etiquetas
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".
A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, ...
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacias, como la etiqueta
<br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacias no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacias son <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato
<etiqueta atributo1="valor"atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.
Por ejemplo,
<a href="https://www.aulaclic.es">Visita aulaClic</a>
Produce este resultado en el navegador:
Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo
<etiqueta atributo="valor1 valor2">.
En general las etiquetas se pueden anidar pero no se pueden 'cruzar'. Estas dos etiquetas
<p> y <div>, están anidadas correctamente:<div>
<p>
Texto del párrafo
</p>
</div>
Es incorrecto cruzarlas así:
<div>
<p>
Texto del párrafo
</div>
</p>
La sintaxís de las etiquetas HTML ha sufido variaciones a lo largo del tiempo y hay etiquetas que ya no está recomendado su uso. Por esto se pueden encontrar páginas web antiguas cuyo código HTML no se considera correcto hoy en dia, sin embargo, esas páginas siguen funcionando y mostrando el contenido para el que fueron diseñadas.
Por otro lado, los navegadores pueden obviar pequeños errores y mostrar la página correctamente, como si no tuviera esos erores.
Para ver los errores de una página web existen validadores de código HTML, como el de W3C, que nos muestran los errores indicando su grado de gravedad.
ETIQUETAS DE HTML MAS UTILIZADAS
<div> </div>
<p> Define una parte que debe mostrarse como un párrafo.<html> Representa la raíz de un documento HTML o XHTML.<head> Representa una colección de metadatos acerca del documento<div> Representa un contenedor genérico sin ningún significado especial. <dd> Representa un término definido por el siguiente <dd>. <article> Define contenido autónomo que podría existir independientemente del resto del contenido. <html> <head> <title>Mi primera página</title> </head> <body> <p>Hola mundo</p> </body> </html>
Página web
Una página web, o página electrónica, página digital, o ciberpágina12 es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.
Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).
TIPOS Y EJEMPLOS DE WEB ESTÁTICA Y DINÁMICA
¿QUE ES UNA WEB ESTÁTICA?
Es aquella que esta compuesta de una serie de archivos que contiene el código HTML que constituye la pagina en si y que permiten mostrar los textos, imágenes, vídeos etc. que conforman el contenido de la pagina.
Los sitios Web estáticos son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin que pueda interactuar con la página Web visitada, las Web estáticas están construidas principalmente con hipervínculos o enlaces entre las páginas Web que conforman el sitio, este tipo de Web son incapaces de soportar aplicaciones Web como gestores de bases de datos, foros, consultas en linea , e-mails inteligentes.
CARACTERÍSTICAS
- De programación especial un sitio Web estático.
- Destaca por su sencillez, rapidez, comodidad y, sobre todo, por ser la forma más económica de tener una página web profesional.
- La gran desventaja de los sitios Web estáticos reside en lo laborioso que resulta su actualización así como la pérdida de potentes herramientas soportadas con bases de datos, como pueden ser la creación de registros históricos de los clientes, pedidos en línea.
- El proceso de actualización es lento, tedioso y esencialmente manual.
- No se pueden utilizar funcionalidades tales como bases de datos, foros, etc.
- Gran número de posibilidades en su diseño y desarrollo.
Curriculum Vitae.
Cada día nos encontramos con más personas que utilizan la Web para presentar su curriculum vitae, es una buena manera de presentarse hacia las empresas a la hora de encontrar trabajo o establecer relaciones comerciales.
WEB QUEST:
Son sitios Web desarrollados principalmente por profesores y universidades, con un claro objetivo educativo, proponiendo a un grupo de alumnos un tema en particular (biología, geometría, física, literatura con un serie de cuestiones formuladas acerca del tema elegido, el grupo tiene disponible, en la misma Web, direcciones (links) a otras páginas Web donde pueden indagar e investigar acerca del tema, de tal forma que puedan responder a las preguntas planteadas. El principal objetivo de las Web Quest reside en aprender los contenidos del tema elegido de una manera interactiva.
BLOC O BITÁCORA:
Es un sitio Web donde se recopilan cronológicamente mensajes de uno o varios autores, sobre una temática en particular siempre conservando el autor la libertad de dejar publicado lo que crea pertinente, también llamado blog o bitácora
WEB INFORMATIVA:
Aquellos sitios Web que simplemente ofrecen información acerca de un tema específico (Fiestas en Valencia: Las fallas, Gastronomía andaluza. por lo general estos sitios no se actualizan, de tal forma que los contenidos permanecen invariables a lo largo de su vida
WEB ESTÁTICA
Son páginas fijas y a la vez dinámicas donde usted puede ir publicando noticias o lo que desee, desde un simple panel, podrá escribir lo que desee comunicar, lo cual aparecerá automáticamente en su sitio una vez publicado. Además podrá tener todo los servicios de un web informativo.
Se construyen haciendo uso de otros lenguajes de programación, siendo el más utilizado de todos el PHP, con lo Cual podemos definir las funciones y características que se deben cumplir de acuerdo a nuestras necesidades.
CARACTERÍSTICAS
- Permiten crear aplicaciones dentro de la propia Web.
- Son mas complicadas.
- Requieren conocimientos específicos de lenguajes de programación así como creación y gestión de bases de datos.
- Es la posibilidad de trabajar con bases de datos, las cuales puede almacenar cualquier tipo de datos que a usted le interese para posteriormente realizar cualquier tipo de consultas.
TIPOS
- CGI: Se trata de un estándar para la interacción entre aplicaciones externas y servidores web.
- PHP: Ampliamente utilizado sobre el servidor web Apache.
- ASP: para su servidor web Internet Información Server y basado en Visual Basic Script'.
- JSP: Lenguaje script creado por Sun, basado en la tecnología Java. No es necesario que el usuario disponga de la máquina virtual de Java ya que ésta se encuentra en el servidor que crea las páginas HTML
- Cold Fusion: Lenguaje script creado por la compañía Allaire. Los scripts tienen la extensión .
- http://janetes.jimdo.com/tipo-y-caracteristicas-pagina-web-dinamica/
El protocolo ip
Un protocolo es un conjunto de normas que rigen el funcionamiento de las cosas en una determinada tecnología, por lo que de esta forma se consigue que exista algún tipo de estandarización. Cuando hablamos de comunicaciones de red, un protocolo es el conjunto de normas que rigen cómo los paquetes de comunicación se transmiten a través de la red. Cuando tienes un protocolo, puedes estar seguro de que todas las máquinas de una red (o del mundo, cuando se trata de Internet), por muy diferentes que sean, hablan el mismo idioma y pueden integrarse en cualquier sistema.
Desarrollado durante la década de 1970, el protocolo IP es el protocolo de red fundamental usado a través de Internet, las redes domésticas y las redes empresariales. El protocolo IP se utiliza a menudo junto con el protocolo de control de transporte (Transport Control Protocol o TCP) y entonces se les llama de manera intercambiable tanto protocolo IP como protocolo TCP/IP.
¿Qué es un navegador web?
Se conoce como navegador web (o simplemente navegador) o también explorador web (o simplemente explorador) a un programa informático que permite al usuario ingresar a las páginas Web que desee, siempre que conozca la dirección URL en donde se encuentra (por ejemplo: www.google.com) o bien que haga clic en un hipervínculo que conduzca a dicha página.
Los navegadores web son programas sumamente utilizados hoy en día, ya que sin ellos no se podría navegar en Internet. Algunos vienen ya preinstalados en nuestras computadoras (como Internet Explorer en Windows), mientras que otros deberemos descargarlos en línea (como el Google Chrome) o instalarlos de algún otro modo.
Fuente: https://concepto.de/navegador-web/#ixzz5vkJgXctL
Ejemplos de navegador Web
Los navegadores más populares y comunes actualmente son los siguientes:
- Google Chrome. De la empresa del mismo nombre, es un navegador sumamente ágil que se puede descargar gratis de Internet. Su aparición revolucionó el mundo de los navegadores, obligando al mercado a hacer programas más livianos y veloces.
- Internet Explorer. Diseñado por Microsoft, es el explorador que viene instalado en sus versiones de Microsoft Windows, aunque se ha actualizado para poder seguir siendo competitivo.
- Mozilla Firefox. Otro navegador muy popular, el primero en contar con un diseño de pestañas que permitieran manejar distintas ventanas de navegación al mismo tiempo, fue durante un tiempo el rey de los navegadores de Internet.
- Apple Safari. Safari es el navegador por excelencia para los computadores MacIntosh, así como para los teléfonos inteligentes y todos los productos de Apple.
- Opera. Un navegador sumamente simple y veloz, cuyas características lo hacen ideal para teléfonos inteligentes y tabletas, pues ocupa poco espacio y demanda pocos recursos.
¿Qué es una hoja de estilo?
Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que forman una página *.HTML.
Su principal ventaja es definir un mismo aspecto para todas las páginas de un sitio web. Se crea una hoja de estilo y se vinculan todas las páginas del sitio web a este archivo. Cualquier cambio efectuado en la hoja de estilo afecta instantáneamente al formato de todas las páginas vinculadas a la misma.
Cuando desde el editor HTML visual se asocia un formato a un fragmento de texto o bien se convierte en un enlace lo que realmente se está haciendo es situar ese texto entre etiquetas HTML para que el navegador lo interprete y visualice adecuadamente.
Ejemplo: Si desde Kompozer seleccionas el texto titular de una página web y a continuación despliegas la lista de formatos para seleccionar Título 1 (de forma similar a lo propuesto en las actividades anteriores de este curso), realmente el fragmento de texto se ha “etiquetado” como <h1> Texto seleccionado … </h1>. Si hubieramos elegido Título 2 se habría etiquetado con <h2> … </h2>, etc.
QUE SON MARCOS FRAMES
Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes.
Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá. Vamos a ver un ejemplo de este tipo de documento:
<HTML>
<HEAD>
<TITLE>Mi primera página con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAME NAME="principal" SRC="introduccion.html">
<NOFRAMES>
<P>Lo siento, pero sólo podrás ver esta página
si tu navegador tiene la capacidad de visualizar
marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Vamos a explicar detalladamente este ejemplo antes de investigar algo más a fondo cada una de las etiquetas. Vemos que la cabecera de la página es similar a un documento normal, pero el habitual BODY es sustituido por un FRAMESET. En cadaFRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas definidas o por el parámetro COLS o por ROWS. En éste, separado por comas, se define el número de marcos y el tamaño de cada uno.
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos poniendoles un nombre y especificando qué fichero HTML le corresponde mediante la etiqueta <FRAME>. Por último, especificamos lo que verá el usuario en el supuesto (cada vez más raro) de que su navegador no soporte frames dentro de la etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
Que es un software de edicion de sitios web
Existen editores de texto específicamente diseñados para la edición Web, que como Kate, incluyen dentro de su simplicidad coloreado de sintaxis y las etiquetas de marcado usuales necesarias en el lenguaje de hipertexto. Dichos editores incluyen una serie de botones para insertar rápidamente las etiquetas, o combinaciones de estas, más corrientes, salvar el documento con un clic y visionarlo posteriormente en una nueva ventana.
Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.
https://gacetafrontal.com/biografia-de-javier-pulgar-vidal/
ResponderEliminarVida de Javier Pulgar Vidal
De acuerdo a lo que se ha podido conocer como la vida de Javier Pulgar Vidal, se ha establecido que este hombre nació en Panao en Perú para el 2 de Enero de 1911