[go: up one dir, main page]
Scribd
Cargar
154 vistas28 páginas

Conceptos Estructura de Una Pagina Web

Este documento lista y describe los elementos principales de HTML5 para crear la estructura y contenido de una página web. Incluye elementos para definir la cabecera, navegación, contenido principal, secciones laterales y pie de página. También describe elementos semánticos para agrupar y dar formato a texto, listas, citas e imágenes. CSS y JavaScript se utilizan para dar estilo y funcionalidad interactiva a las páginas web.

Cargado por

Luis carlos Benitez
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
154 vistas28 páginas

Conceptos Estructura de Una Pagina Web

Este documento lista y describe los elementos principales de HTML5 para crear la estructura y contenido de una página web. Incluye elementos para definir la cabecera, navegación, contenido principal, secciones laterales y pie de página. También describe elementos semánticos para agrupar y dar formato a texto, listas, citas e imágenes. CSS y JavaScript se utilizan para dar estilo y funcionalidad interactiva a las páginas web.

Cargado por

Luis carlos Benitez
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/ 28

ESTRUCTURA DE UNA PAGINA (WEB)

HTML 5
<!DOCTYPE html>

<html>
<head>
<title>Ejemplo</title>
<meta>
</head>
<body>
<main>
<header> </header>
<nav> </nav>
<aside> </aside>
<footer> </footer>
</main>
</body>
</html>
HTML 5 (LENGUAJE DE ÉTIQUETAS MARCADO DE HIPERTEXTOS)

<BODY>

<HEADER></HEADER>

<main>

<Section>

<article>

<p>
<NAV>
<video> <ASIDE>

div

br

h1 h6

form

<canva>

<FOOTER>

</BODY>
CSS 3 (HOJAS DE ESTILO EN CASCADA - MAQUETACIÓN)

ESTILO O ASPECTO VISUAL

VALIDACIONES (Javascript y PHP7)

JavaScript --- Lenguaje de programación al lado del cliente (front-end)

PHP 7 ---- Lenguaje de programación al lado servidor (back-end) c#, VB, (.net) ruby, Ajax.. br.

BASE DATOS: Mysql, mariaDB, postgres, MONGODB, ORACLE,

MODELO E-R

FRAMEWORKS

• ANGULAR
• .NET
• VuEJS
• REACT
Todos los elementos del estandar HTML5 están listados aquí, descritos por su
etiqueta de apertura y agrupados por su función. Contrariamente al indice de
elementos HTML el cual lista todas las posibles etiquetas, estandar, no-estandar,
válidas, obsoletas o aquellas en desuso, esta lista solamente los elementos válidos
de HTML5. Solamente aquellos elementos listados aquí son los que deberían ser
usados en nuevos sitios Web.

El simbolo indica que el elemento fue añadido en HTML5. Nótese que otros
elementos listados aqui pueden haber sido modificados o extendido en su significado
por la especificación HTML5.

Elemento raíz

Elemento Descripcion

<!doctype html> Define que el documento esta bajo el estandar de HTML 5

Elemento Descripción
Representa la raíz de un
documento HTML o XHTML.
<html> Todos los demás elementos
deben ser descendientes de este
elemento.

Metadatos del documento

Elemento Descripción

<head>
Representa una colección de metadatos acerca del documento,
incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.

<title>
Define el título del documento, el cual se muestra en la barra de
título del navegador o en las pestañas de página. Solamente
Elemento Descripción
puede contener texto y cualquier otra etiqueta contenida no será
interpretada.
<base> Define la URL base para las URLs relativas en la página.

<link>
Usada para enlazar JavaScript y CSS externos con el
documento HTML actual.

<meta>
Define los metadatos que no pueden ser definidos usando otro
elemento HTML.
<style> Etiqueta de estilo usada para escribir CSS en línea.

Scripting

Elemento Descripción

<script>
Define ya sea un script interno o un enlace hacia un script externo. El
lenguaje de programación es JavaScript

<noscript>
Define un contenido alternativo a mostrar cuando el navegador no
soporta scripting.

Secciones

Elemento Descripción

<body>
Representa el contenido principal de un documento
HTML. Solo hay un elemento <body> en un documento.

Define una sección en un documento.


<section>
Elemento Descripción
Define una sección que solamente contiene enlaces de
<nav> navegación

Define contenido autónomo que podría existir


<article> independientemente del resto del contenido.

Define algunos contenidos vagamente relacionados


con el resto del contenido de la página. Si es removido,
<aside>
el contenido restante seguirá teniendo sentido

Los elemento de cabecera implementan seis niveles


de cabeceras de documentos; <h1> es la de mayor
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> y <h6> es la de menor importancia. Un elemento de
cabecera describe brevemente el tema de la sección
que introduce.

Define la cabecera de una página o sección.


Usualmente contiene un logotipo, el título del sitio Web
<header>
y una tabla de navegación de contenidos.

Define el pie de una página o sección. Usualmente


contiene un mensaje de derechos de autoría, algunos
<footer> enlaces a información legal o direcciones para dar
información de retroalimentación.

<address>
Define una sección que contiene información de
contacto.

Define el contenido principal o importante en el


documento. Solamente existe un elemento <main> en el
<main>
documento.

Agrupación de Contenido

Elemento Descripción
<p> Define una parte que debe mostrarse como un párrafo.

<hr>
Representa un quiebre temático entre párrafos de una sección
o articulo o cualquier contenido.
Elemento Descripción

<pre>
Indica que su contenido esta preformateado y que este
formato debe ser preservado.
<blockquote> Representa un contenido citado desde otra fuente.
<ol> Define una lista ordenada de artículos.
<ul> Define una lista de artículos sin orden.
<li> Define un artículo de una lista enumerada.

<dl>
Define una lista de definiciones, es decir, una lista de términos
y sus definiciones asociadas.
<dt> Representa un término definido por el siguiente <dd>.
<dd> Representa la definición de los términos listados antes que él.

Representa una figura ilustrada como parte del documento.


<figure>

Representa la leyenda de una figura.


<figcaption>

<div>
Representa un contenedor genérico sin ningún significado
especial.

Semántica a nivel de Texto

Elemento Descripción
<a> Representa un hiperenlace, enlazando a otro recurso.
<em> Representa un texto enfatizado, como un acento de intensidad.
<strong> Representa un texto especialmente importante.

Representa un comentario aparte, es decir, textos como un descargo de


<small> responsabilidad o una nota de derechos de autoría, que no son
esenciales para la comprensión del documento.
<s> Representa contenido que ya no es exacto o relevante.
Elemento Descripción
<cite> Representa el título de una obra.
<q> Representa una cita textual inline.

<dfn>
Representa un término cuya definición está contenida en su contenido
ancestro más próximo.

<abbr>
Representa una abreviación o un acrónimo ; la expansión de la
abreviatura puede ser representada por el atributo title.

Asocia un equivalente legible por máquina a sus contenidos. (Este


elemento está sólamente en la versión de la WHATWG del estandar
<data>
HTML, y no en la versión de la W3C de HTML5).

Representa un valor de fecha y hora; el equivalente legible por máquina


<time> puede ser representado en el atributo datetime.

<code> Representa un código de ordenador.

Representa a una variable, es decir, una expresión matemática o


<var>
contexto de programación, un identificador que represente a una
constante, un símbolo que identifica una cantidad física, un parámetro
de una función o un marcador de posición en prosa.
<samp> Representa la salida de un programa o un ordenador.

Representa la entrada de usuario, por lo general desde un teclado, pero


<kbd> no necesariamente, este puede representar otras formas de entrada de
usuario, como comandos de voz transcritos.

<sub>,<sup> Representan un subíndice y un superíndice, respectivamente.

Representa un texto en una voz o estado de ánimo alterno, o por lo


<i>
menos de diferente calidad, como una designación taxonómica, un
término técnico, una frase idiomática, un pensamiento o el nombre de
un barco.

Representa un texto hacia el cual se llama la atención para propósitos


<b> utilitarios. No confiere ninguna importancia adicional y no implica una
voz alterna.

<u>
Representa una anotación no textual sin-articular, como etiquetar un
texto como mal escrito o etiquetar un nombre propio en texto en chino.

Representa texto resaltado con propósitos de referencia, es decir por su


<mark> relevancia en otro contexto.
Elemento Descripción
Representa contenidos a ser marcados con anotaciones ruby,
recorridos cortos de texto presentados junto al texto. Estos son
utilizados con regularidad en conjunto a lenguajes de Asia del Este,
<ruby>
donde las anotaciones actúan como una guía para la pronunciación,
como el furigana japonés.

Representa el texto de una anotación ruby.


<rt>

Representa los paréntesis alrededor de una anotación ruby, usada para


mostrar la anotación de manera alterna por los navegadores que no
<rp>
soporten despliegue estandar para las anotaciones.

Representa un texto que debe ser aislado de sus alrededores para el


formateado bidireccional del texto. Permite incrustar un fragmento de
<bdi>
texto con una direccionalidad diferente o desconocida.

<bdo>
Representa la direccionalidad de sus descendientes con el fin de anular
de forma explícita al algoritmo bidireccional Unicode.

Representa texto sin un significado específico. Este debe ser usado


<span>
cuando ningún otro elemento semántico le confiere un significado
adecuado, en cuyo caso, provendrá de atributos globales
como class, lang, o dir.
<br> Representa un salto de línea.

Representa una oportunidad de salto de línea, es decir, un punto


sugerido de envoltura donde el texto de múltiples líneas puede ser
<wbr>
dividido para mejorar su legibilidad.

Ediciones

Elemento Descripción
<ins> Define una adición en el documento.
<del> Define una remoción del documento.
Contenido incrustado

Elemento Descripción
<img> Representa una imagen.

<iframe>
Representa un contexto anidado de navegación, es decir, un
documento HTML embebido.

Representa un punto de integración para una aplicación o contenido


<embed> interactivo externo que por lo general no es HTML.

Representa un recurso externo, que será tratado como una imagen,


<object> un sub-documento HTML o un recurso externo a ser procesado por
un plugin.

<param>
Define parámetros para el uso por los plugins invocados por los
elementos <object>.

Representa un video, y sus archivos de audio y capciones


<video> asociadas, con la interfaz necesaria para reproducirlos.

Representa un sonido o stream de audio.


<audio>

Permite a autores especificar recursos multimedia alternativos para


<source> los elementos multimedia como <video> o <audio>.

Permite a autores especificar una pista de texto temporizado para


<track> elementos multimedia como <video> o <audio>.

Representa un área de mapa de bits en el que se pueden utilizar


scripts para renderizar gráficos como gráficas, gráficas de juegos o
<canvas>
cualquier imagen visual al vuelo.
<map> En conjunto con <area>, define un mapa de imagen.
<area> En conjunto con <map>, define un mapa de imagen.

Define una imagen vectorial embebida.


<svg>

Define una fórmula matemática.


<math>
Datos tabulares

Elemento Descripción
<table> Representa datos con más de una dimensión.
<caption> Representa el título de una tabla.
<colgroup> Representa un conjunto de una o más columnas de una tabla.
<col> Representa una columna de una tabla.

<tbody>
Representa el bloque de filas que describen los datos concretos de
una tabla.

<thead>
Representa el bloque de filas que describen las etiquetas de
columna de una tabla.

<tfoot>
Representa los bloques de filas que describen los resúmenes de
columna de una tabla.
<tr> Representa una fila de celdas en una tabla.
<td> Representa una celda de datos en una tabla.
<th> Representa una celda encabezado en una tabla.

Formularios

Elemento Descripción

<form>
Representa un formulario, consistiendo de controles que
puede ser enviado a un servidor para procesamiento.
<fieldset> Representa un conjunto de controles.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un control de formulario.
Elemento Descripción

<input>
Representa un campo de datos escrito que permite al usuario
editar los datos.
<button> Representa un botón.

<select>
Representa un control que permite la selección entre un
conjunto de opciones.

Representa un conjunto de opciones predefinidas para otros


<datalist> controles.
<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.

<option>
Representa una opción en un elemento <select>, o una
sugerencia de un elemento <datalist>.
<textarea> Representa un control de edición de texto multilínea.

Representa un control de par generador de llaves.


<keygen>

Representa el resultado de un cálculo.


<output>

Representa el progreso de finalización de una tarea.


<progress>

Representa la medida escalar (o el valor fraccionario) dentro


<meter> de un rango conocido.

Elementos interactivos

Elemento Descripción
Representa un widget desde el que un usuario puede obtener
<details> información o controles adicionales.

Representa un resumen, título o leyenda para un


<summary> elemento <details> dado.
Elemento Descripción

Representa un comando que un usuario puede invocar.


<command>

Representa una lista de comandos .


<menu>

Elementos interactivos
HTML ofrece una selección de elementos que ayudan a crear objetos de interfaz
de usuario interactivos.

Elemento Descripción

<details> El elemento de detalles HTML ( <details>) crea un widget de divulgación en el


que la información es visible solo cuando el widget se cambia a un estado "abierto".

<dialog> El elemento HTML<dialog> representa un cuadro de diálogo u otro componente


interactivo, como una alerta, un inspector o una subventana descartables.

<menu> El elemento HTML<menu> representa un grupo de comandos que un usuario puede


realizar o activar. Esto incluye tanto menús de lista, que pueden aparecer en la
parte superior de una pantalla, como también menús contextuales , como los que
pueden aparecer debajo de un botón después de hacer clic en él.

<summary> El elemento HTML Disclosure Summary element ( <summary>) especifica un


resumen, título o leyenda para <details>el cuadro de divulgación de un elemento.
Componentes Web
Web Components es una tecnología relacionada con HTML que permite,
esencialmente, crear y utilizar elementos personalizados como si fuera HTML
normal. Además, puede crear versiones personalizadas de elementos HTML
estándar.

Elemento Descripción

<slot> El elemento HTML <slot>, parte de la suite de tecnología de componentes


web , es un marcador de posición dentro de un componente web que puede
llenar con su propio marcado, lo que le permite crear árboles DOM separados
y presentarlos juntos.

<template> El elemento Plantilla de contenido HTML ( <template>) es un mecanismo


para mantener HTML
que no se debe representar inmediatamente cuando se carga una página,
pero se puede crear una instancia posteriormente durante el tiempo de
ejecución utilizando JavaScript.

Elementos obsoletos y obsoletos


Advertencia: Estos son elementos HTML antiguos que están en desuso y no deben
usarse. Nunca debe usarlos en proyectos nuevos y debe reemplazarlos en
proyectos antiguos tan pronto como sea posible. Se enumeran aquí solo con fines
informativos.
Elemento Descripción

<acronym> El elemento de acrónimo HTML ( <acronym>) permite a los autores indicar


claramente una secuencia de caracteres que componen un acrónimo o
abreviatura de una palabra.
Elemento Descripción

<applet> El obsoleto HTML Applet Element ( <applet>) incrusta un applet de Java en el


documento; este elemento ha quedado obsoleto en favor de <object>.

<basefont> El elemento de fuente base HTML obsoleto ( <basefont>) establece un tipo,


tamaño y color de fuente predeterminados para los otros elementos que
descienden de su elemento principal.

<bgsound> El elemento de sonido de fondo HTML solo de Internet Explorer ( <bgsound>)


configura un archivo de sonido para que se reproduzca en segundo plano
mientras se utiliza la página; utilizar <audio>en su lugar.

<big> El HTML Big Element obsoleto ( <big>) muestra el texto adjunto con un tamaño
de fuente un nivel más grande que el texto circundante (se mediumconvierte large,
por ejemplo, en).

<blink> El HTML Blink Element ( <blink>) es un elemento no estándar que hace que el
texto adjunto parpadee lentamente.

<center> El HTML Center Element obsoleto ( <center>) es un elemento a nivel de


bloque que muestra su contenido a nivel de bloque o en línea centrado
horizontalmente dentro de su elemento contenedor.

<command> El elemento de comando HTML ( <command>) representa un comando que el


usuario puede invocar. Los comandos se utilizan a menudo como parte de un
menú contextual o una barra de herramientas.

<content> El elemento HTML <content>, una parte obsoleta del conjunto de tecnologías
de Componentes Web , se usó dentro de Shadow DOM como un punto de
inserción , y no estaba destinado a usarse en HTML ordinario.

<dir> El elemento de directorio HTML obsoleto ( <dir>) se utiliza como contenedor


para un directorio de archivos y / o carpetas, potencialmente con estilos e iconos
aplicados por el agente de usuario .

<element> El elemento HTML<element> obsoleto era parte de la especificación


de componentes web ; estaba destinado a ser utilizado para definir nuevos
elementos DOM personalizados.

<font> El elemento de fuente HTML ( <font>) define el tamaño de fuente, el color y la


cara de su contenido.
Elemento Descripción

<frame> <frame>es un elemento HTML que define un área particular en la que se puede
mostrar otro documento HTML. Se debe utilizar un marco dentro de a <frameset>.

<frameset> El elemento HTML<frameset> se utiliza para contener <frame>elementos.

<image> El elemento HTML Image<image> obsoleto ( ) es un remanente obsoleto de una


versión antigua de HTML perdida en la noche del tiempo; utilice
el <img>elemento estándar en su lugar.

<isindex> <isindex> era un elemento HTML obsoleto que colocaba un campo de texto en
una página para consultar el documento.

<keygen> El <keygen>elemento HTML existe para facilitar la generación de material de


claves y el envío de la clave pública como parte de un formulario HTML . Este
mecanismo está diseñado para su uso con sistemas de gestión de certificados
basados en web. Se espera que el <keygen>elemento se utilice en formato HTML
junto con otra información necesaria para construir una solicitud de certificado y
que el resultado del proceso sea un certificado firmado.

<listing> El elemento de listado HTML ( <listing>) muestra el texto entre las etiquetas de
inicio y finalización sin interpretar el HTML en el medio y usando una fuente
monoespaciada. El estándar HTML 2 recomendó que las líneas no se rompan
cuando no superen los 132 caracteres.

<marquee> El <marquee>elemento HTML se utiliza para insertar un área de texto de


desplazamiento. Puede controlar lo que sucede cuando el texto llega a los bordes
de su área de contenido utilizando sus atributos.

<menuitem> El elemento HTML<menuitem> representa un comando que un usuario puede


invocar a través de un menú emergente. Esto incluye menús contextuales, así
como menús que pueden estar adjuntos a un botón de menú.

<multicol> El elemento Diseño de múltiples columnas HTML ( <multicol>) fue un


elemento experimental diseñado para permitir diseños de múltiples columnas y no
debe utilizarse.

<nextid> <nextid> es un elemento HTML obsoleto que sirvió para permitir que la
herramienta de diseño web NeXT generara etiquetas NAME automáticas para
sus anclajes.
Elemento Descripción

<nobr> El <nobr>elemento HTML obsoleto y no estándar evita que el texto que contiene
se ajuste automáticamente a lo largo de varias líneas, lo que podría hacer que el
usuario tenga que desplazarse horizontalmente para ver todo el ancho del texto.

<noembed> El <noembed>elemento es una forma obsoleta y no estándar de proporcionar


contenido alternativo o "alternativo" para los navegadores que no admiten
el <embed>elemento o no admiten el tipo de contenido incrustado que un autor
desea utilizar.

<noframes> El HTML obsoleto No Frames o repliegue marco elemento, <noframes>,


proporciona contenido que se presentará en los navegadores que no soportan (o
tienen el apoyo para personas con discapacidad) del <frame>elemento.

<plaintext> El HTML Plaintext Element ( <plaintext>) muestra todo lo que sigue a la etiqueta
de inicio como texto sin formato, ignorando cualquier HTML siguiente.

<shadow> El elemento HTML <shadow>, una parte obsoleta de la suite de tecnología


de Componentes Web , estaba destinado a ser utilizado como un punto de
inserción de DOM en la sombra .

<spacer> <spacer>es un elemento HTML obsoleto que permitía la inserción de espacios


vacíos en las páginas. Fue diseñado por Netscape para lograr el mismo efecto
que una imagen de diseño de un solo píxel, que era algo que los diseñadores
web solían usar para agregar espacios en blanco a las páginas web sin usar
realmente una imagen. Sin embargo, <spacer>ya no es compatible con ningún
navegador importante y ahora se pueden lograr los mismos efectos usando CSS
simple.

<strike> El elemento HTML<strike> (o Elemento HTML Tachado ) coloca un tachado


(línea horizontal) sobre el texto.

<tt> El obsoleto elemento HTML Teletype Text ( <tt>) crea texto en línea que se
presenta utilizando el tipo de letra monoespaciado predeterminado del agente de
usuario .

<xmp> El HTML Example Element ( <xmp>) representa texto entre las etiquetas de inicio y
finalización sin interpretar el HTML en el medio y utilizando una fuente
monoespaciada. La especificación HTML2 recomendó que se renderice lo
suficientemente ancho como para permitir 80 caracteres por línea.
Páginas web dinámicas
Introducción
Creación de una página web dinámica

Las páginas estáticas contienen información que no cambia hasta que


el diseñador o programador la modifica manualmente. En los primeros
días de internet, simplemente subirse al carro de internet era importante
para las corporaciones. Y no era tan importante lo que las empresas
publicaban en la web, siempre y cuando tuvieran una presencia en la
red donde los clientes pudieran obtener información básica sobre la
entidad y sus productos.

Las páginas web estáticas, compuestas únicamente de HTML y CSS,


como se ha visto previamente se realizan fácilmente. Pero una de las
grandes limitaciones de las páginas web estáticas es el esfuerzo que se
requiere para actualizarlas. Cambiar un solo elemento en una página
web estática requiere reconstruir y recargar en el servidor toda la
página, o a veces incluso un grupo de páginas web.

Este proceso es demasiado engorroso para una organización que con


frecuencia necesita publicar información en tiempo real, tal como
eventos. Además, durante este proceso, un desarrollador puede
cambiar accidentalmente otros artículos en la página, arruinando
seriamente la información de la web, o incluso el diseño completo del
sitio.

Las páginas web dinámicas permiten cambiar fácilmente su contenido


en tiempo real sin siquiera tocar el código de la página. Sin hacer
manualmente cualquier cambio en la página en sí, la información en la
página puede variar. Esto hace posible mantener el contenido de la
página actualizado para que lo que un el visitante ve allí pueda ser
actualizado o substituido en un día, una hora, o un minuto. El diseño
central de la página web puede seguir siendo el mismo, pero los datos
presentan cambios constantes.

Para crear con éxito una página web dinámica, se debe conocer un
método para insertar automáticamente datos en tiempo real en el
código HTML que se envía al navegador del cliente. Aquí es donde
entran en juego los lenguajes de script, que permiten insertar código
de programa dentro de una web, que genera dinámicamente HTML
que el navegador del cliente.

Como el código de programación está insertado en la página web, en


alguna parte se debe ejecutar dicho código para producir el HTML
dinámico para el nuevo contenido. Hay dos lugares donde se puede
ejecutar el código de programa insertado:

- En el equipo del cliente, después de que el navegador web descarga


la página web. Esto se conoce como programación del lado del
cliente.

- En el servidor web antes de que se envíe la página. Esto se conoce


como programación del lado del servidor.
A continuación se analiza cómo cada uno de estos tipos de
programación difiere en la creación de contenido dinámico para un sitio
en internet.

Programación del lado del cliente

En la programación del lado del cliente, se inserta el código del


programa dentro del código HTML que el servidor envía al navegador
del cliente. El navegador debe poder detectar el código del programa
incorporado y ejecutarlo, ya sea dentro del navegador o como un
programa separado fuera del navegador. La figura muestra este
proceso.
JavaScript

Actualmente el lenguaje de programación más popular del lado del


cliente es JavaScript, es un lenguaje de script que se inserta dentro del
código HTML en la página web. Se ejecuta dentro del navegador del
cliente y puede utilizar funciones del navegador a las que normalmente
no se puede acceder desde HTML estándar. El código JavaScript se
usa comúnmente para producir mensajes emergentes y cuadros de
diálogo con los que las personas interactúan cuando ven la página.
Estos son elementos que el código HTML no puede generar.

Como se muestra en la figura previa, toda la página web con el código


JavaScript insertado se descarga al navegador del cliente. El navegador
del cliente detecta el código JavaScript incorporado y lo ejecuta en
consecuencia. Hace esto mientras también procesa las etiquetas HTML
dentro del documento y aplica estilos CSS definidos. La desventaja de
JavaScript es que, como se ejecuta en el navegador del cliente, se está
a merced de cómo un navegador web interpreta el código. Aunque el
lenguaje HTML comenzó como un estándar, JavaScript era algo
diferente. En los primeros días de JavaScript, diferentes navegadores
implementaron distintas características de JavaScript usando varios
métodos. No era raro ejecutar una página web que funcionaba bien para
un tipo de navegador, pero no funcionaba en otro, todo a causa de las
inconsistencias de JavaScript.

Eventualmente, se trabajó para estandarizar JavaScript. El lenguaje fue


retomado por la organización de estándares Ecma International, que
creó el estándar ECMAScript, que es en lo que ahora se basa
JavaScript. A medida que evolucionó el estándar ECMAScript, cada vez
más desarrolladores de navegadores comenzaron a ver los beneficios
de utilizar un lenguaje de programación estándar del lado del cliente.
Actualmente, la octava versión de la norma, llamada ECMAScript 2017,
se ha finalizado y se ha implementado en la mayoría de los
navegadores.

jQuery

JavaScript es popular, pero una de sus desventajas es que puede ser


algo complicado de programar. Con tantas características diferentes
incorporadas por tantos desarrolladores, hoy en día un programa
JavaScript puede convertirse rápidamente en un gran esfuerzo de
codificación.

Para ayudar a resolver este problema, un grupo de desarrolladores se


unieron para crear un conjunto de bibliotecas para facilitar la
programación del lado del cliente con JavaScript. Así nació jQuery.

El software jQuery no es un lenguaje de programación separado; en


cambio, es un conjunto de bibliotecas de código JavaScript. Las
bibliotecas son funciones autónomas de JavaScript a las que se puede
hacer referencia en la programación de JavaScript para realizar
funciones comunes, como encontrar una ubicación en una página web
para mostrar texto o recuperar un valor ingresado en un campo de
formulario HTML.

En lugar de tener que escribir líneas y líneas de código JavaScript, solo


es necesario hacer referencia a una o dos funciones de jQuery para que
hagan el trabajo por el programador. Esto ahorra mucho tiempo,
además de ser un excelente recurso para implementar funciones
avanzadas que nunca se hubieran podido codificar usando solo
JavaScript.

• Programación del lado del servidor

El otro aspecto de la programación web es la programación del lado del


servidor. Los lenguajes de programación del lado del servidor resuelven
el problema de diferentes intérpretes de código de cliente ejecutando el
código en el servidor. En la programación del servidor, el servidor web
interpreta el código de programación insertado antes de enviar la página
web al navegador del cliente.

Luego, el servidor toma cualquier código HTML que el código de


programación genere y lo inserta directamente en la página web antes
de enviarlo al cliente. El servidor hace todo el trabajo ejecutando el
código de script, por lo que tiene la garantía de que cada página web se
ejecutará correctamente. La siguiente figura ilustra este proceso.
A diferencia de la programación del lado del cliente, hay muchos
lenguajes de programación populares del lado del servidor que están en
uso actualmente, cada uno con su propio conjunto de pros y contras.
Seguidamente se echa un vistazo a algunos de los lenguajes de
programación más populares.

CGI

Uno de los primeros intentos de soporte de programación del lado del


servidor fue la "interfaz de puerto de enlace común" (CGI) del servidor
web Apache. CGI proporcionaba una interfaz entre el servidor web y el
sistema operativo del servidor subyacente, que a menudo estaba
basado en Unix. Esto permitía a los programadores incorporar código
de script comúnmente utilizado en la plataforma Unix para generar
HTML de forma dinámica.
Dos de los lenguajes de script más comunes utilizados en el mundo de
Unix y, por lo tanto, comúnmente utilizados en la programación CGI son
Perl y Python.

Aunque la programación CGI se hizo popular en la primera época de la


web, no pasó mucho tiempo antes de que fuera explotada en aspectos
de seguridad. Era demasiado fácil para un administrador novato aplicar
los permisos incorrectos a las secuencias de comandos CGI, lo que
permite a un atacante ingenioso obtener acceso privilegiado al servidor.
Se tuvieron que desarrollar otros métodos de procesamiento del código
de programación del lado del servidor.

Java

Uno de los primeros intentos de un lenguaje de programación


controlado del lado del servidor fue Java. Aunque el lenguaje de
programación Java se hizo popular como un lenguaje para crear
aplicaciones independientes que se podían ejecutar en cualquier
plataforma informática, también se puede ejecutar como un lenguaje de
programación del lado del servidor en la web. Cuando se utiliza de esta
manera, se denomina "servidor de páginas de Java" (JSP).

El lenguaje JSP requiere que se tenga un compilador Java en el servidor


web. El servidor web detecta el código de Java en el código HTML y
luego lo envía al compilador de Java para su procesamiento. Cualquier
salida de Java el programa la envía al navegador del cliente como parte
del documento HTML. La plataforma JSP más común es el servidor
Apache Tomcat.

Familia Microsoft ASP.NET

La primera entrada de Microsoft en el mundo de la programación del


lado del servidor (Active Server (ASP)) tenía un aspecto similar al de
JSP. Los programas ASP incorporaron código de script ASP dentro del
código HTML estándar y requirieron que se incorporara un servidor ASP
con el servidor web estándar de Microsoft Internet Information Services
(IIS) para procesar el código.
Sin embargo, los desarrolladores de Microsoft determinaron que no era
necesario mantener un lenguaje de programación separado para la
programación web del lado del servidor, por lo que combinaron la
programación del lado del servidor y los entornos de programación de
escritorio de Windows en una sola tecnología.

Con el advenimiento de la familia .NET de lenguajes de programación,


Microsoft lanzó ASP.NET para el entorno web, como una actualización
del antiguo entorno ASP. Con ASP.NET, se puede insertar cualquier
tipo de código de programación de Microsoft .NET dentro de los
documentos HTML para producir contenido dinámico. La .NETfamily
incluye Visual Basic .NET, C#, J# e incluso Delphi.NET. Esto permite
aprovechar el mismo código que usa para crear aplicaciones de
escritorio de Windows, para crear páginas web dinámicas. A menudo se
pueden usar las mismas funciones de Windows, como botones, barras
deslizantes y barras de desplazamiento, dentro de las aplicaciones web
que ven en las aplicaciones de Windows.

JavaScript

Sí, lo leíste bien. El mismo lenguaje JavaScript que es popular en el


mundo de la programación del lado del cliente ahora está comenzando
a avanzar como un lenguaje de programación del lado del servidor. La
biblioteca Node.js permite interconectar código JavaScript dentro de
páginas web HTML para procesarlas en el servidor.

La ventaja de usar Node.js es que solo se necesita aprender un lenguaje


para la programación tanto del lado del cliente como del lado del
servidor. Aunque todavía es relativamente nuevo el lenguaje Node.js es
cada vez más popular.

PHP

Lo que comenzó como un simple ejercicio de ajuste de scripts CGI se


convirtió en un nuevo lenguaje de programación del lado del servidor
que tomó al mundo por sorpresa. Rasmus Lerdorf escribió el lenguaje
"Programación de Página Personal" (PHP) como una forma de mejorar
el funcionamiento de los scripts CGI. Después de un poco de aliento y
ayuda, PHP se transformó en su propio lenguaje de programación, y un
nuevo nombre, PHP: Pre-procesador de Hipertexto (utiliza el acrónimo
dentro de su nombre, que se llama acrónimo recursivo).

Los desarrolladores de lenguaje PHP admiten abiertamente que


tomaron prestadas muchas características de otros lenguajes
populares, como Perl, Python, C e incluso scripts de shell de Unix. Sin
embargo, PHP fue desarrollado específicamente para la programación
del lado del servidor, y tiene muchas características integradas que no
están disponibles en otros lenguajes de script. No se necesita luchar
con configuraciones o características extrañas para que PHP funcione
en un entorno web. Ha madurado en un completo catálogo de
características avanzadas que cubren todo, desde el acceso a la base
de datos hasta los gráficos de dibujo en una página web.

Debido a la dedicación de los desarrolladores de PHP para crear un


lenguaje de programación de primera clase en el servidor, y a que es
un software libre de código abierto, PHP se convirtió rápidamente en el
preferido del mundo de internet. Muchas empresas de alojamiento web
incluyen PHP como parte de sus paquetes de alojamiento básico.

Combinación de la programación del lado del cliente y del lado del


servidor

La programación del lado del cliente y del lado del servidor tienen pros
y contras. En lugar de tratar de elegir un método para crear páginas web
dinámicas, se pueden utilizar ambos al mismo tiempo.

Se puede insertar fácilmente el código de programación del lado del


cliente y del lado del servidor en la misma página web para ejecutar en
el servidor, como se muestra a continuación.
Un uso común para JavaScript y PHP es la validación de datos. Cuando
se proporciona un formulario HTML para que lo llenen los visitantes de
un sitio web, se debe tener cuidado de que llenen el tipo correcto de
datos para cada campo. Con la programación del lado del servidor, no
se puede validar los datos hasta que el visitante del sitio completa y
envía el formulario al servidor. Si un visitante del sitio web se salta
accidentalmente el llenado de un solo campo y el formulario entero debe
completarse nuevamente, puede ser una experiencia frustrante.

Para resolver este problema, se puede insertar código JavaScript en el


formulario para verificar a medida que el visitante ingrese los datos en
el formulario. Si alguno de los campos del formulario está vacío cuando
se hace clic en el botón Enviar, el código JavaScript puede bloquear el
envío del formulario y señalar el campo vacío. Luego, cuando todos los
datos se completan y el formulario se envía correctamente, el código
PHP en el servidor pueden procesar los datos para garantizar que sean
del tipo y formato de datos correctos.

Gestión de contenido
Almacenamiento de contenido

La última pieza del rompecabezas de la aplicación web dinámica es el


contenido real. Con las páginas web estáticas, el contenido ya está
integrado en el código de la página web. Para cambiar la información
en una página web estática, se debe recodificar la página.
Desafortunadamente, la mayoría de las veces, cuando se actualiza una
página web, se pierde la versión anterior.

Con aplicaciones web dinámicas, el contenido proviene de algún lugar


fuera de la página web. ¿Pero donde? El lugar más común es una base
de datos. Las bases de datos son una forma fácil de almacenar y
recuperar datos. Son más rápidas que el almacenamiento de datos con
archivos estándar y proporcionan un nivel de seguridad para proteger
sus datos. Al almacenar contenido en una base de datos, también se
puede archivar y referenciar fácilmente el contenido anterior y
reemplazarlo con contenido nuevo según sea necesario.

Al igual que el mundo de la programación del lado del servidor, el


entorno de las bases de datos tiene muchas opciones diferentes de
software. Estos son algunos de los más populares:

Oracle: Oracle ha establecido el estándar de hecho para las bases de


datos. Se encuentra en muchos entornos comerciales de alto perfil.
Aunque Oracle es muy rápido y admite muchas funciones, también
puede ser algo costoso.

Microsoft SQL Server: la entrada de Microsoft en el mundo de los


servidores de bases de datos, con SQL Server, está orientado a
entornos de bases de datos de gama alta. A menudo se encuentra en
entornos que utilizan servidores de Microsoft Windows.
PostgreSQL: el servidor de base de datos PostgreSQL es un proyecto
de código abierto que intenta implementar muchas de las funciones
avanzadas que se encuentran en las bases de datos comerciales. En
sus inicios, PostgreSQL tenía una reputación de ser algo lento, pero ha
hecho grandes mejoras. Desafortunadamente, las viejas reputaciones
son difíciles de superar, y PostgreSQL aún tiene problemas para
superarlas.

MySQL: el servidor de base de datos MySQL es otro proyecto de código


abierto. A diferencia de PostgreSQL, no intenta hacer coincidir todas las
características de los paquetes comerciales. En cambio, se enfoca en
la velocidad. MySQL tiene una reputación de ser muy rápido en
inserciones y consultas de datos simples, perfecto para el mundo de las
aplicaciones web de ritmo rápido. Principalmente debido a su velocidad,
el servidor de base de datos MySQL se ha convertido en una
herramienta popular para almacenar datos en aplicaciones web
dinámicas. También ayuda que, dado que es un proyecto de código
abierto, las empresas de alojamiento web pueden instalarlo de forma
gratuita, lo que lo convierte en una combinación perfecta con el lenguaje
de programación de servidor PHP para aplicaciones web dinámicas.

También podría gustarte