DISEÑO Y PUBLICACIÓN DE PÁGINAS WEB: mayo 2019

sábado, 18 de mayo de 2019

Alojamiento de sitios web y trasferencia de ficheros

El último paso de la creación de una página web es colocarla en Internet. A partir de ese momento se debe mantener y actualizar. Las empresas, generalmente, incluyen estos tipos de espacios cuando ofrecen Internet, algunos gratis, pero con publicidad, otros no, pero requieren otros requisitos, como pagar.
En estos lugares se hay que conformar con la URL asignada, aunque se puede comprar un dominio,algo común en empresas.
Para comunicar el servidor con el ordenador se emplean FTP, que son programas de transferencia de programas, de manera que ese conjuntos de archivos comparten el sitio web y que se manipulan en el ordenador, pueden sustituir a los del servidor.
Todos funcionan de manera similar. Tiene una barra de direcciones en la que se escribe la dirección del servidor que se quiere conectar, el nombre del usuario y la contraseña. Contienen dos paneles a ambos lados, el de la izquierda contiene los archivos del ordenador del ordenador local y el de la derecha el sitio web remoto.

Ejemplo del uso de los TFP

Editores de páginas web

Sirven para crear páginas web. Se dividen en:

Editores WYSIWYG: Siglas de What You See Is What You Get, se tratan de editores que transforman el texto escrito en un procesador de textos en código HTML.
Editores más avanzados como NVU o KompoZer, que mejora loas prestaciones del anterior NVU. Su entorno de trabajo es muy pareciso, ninguna soporta HTML5, aunque KompoZer es más sencillo.

Logo de BlueGriffon. Este acepta HTML5

Logo de NVU

Lenguaje JavaScript

Es junto al HTML el lenguaje más antiguo para desarrollar páginas web. Se trata de un lenguaje dinámico que se ejecuta en los navegadores (se ejecuta en local), que se encargan de la ejecución del programa. Se diferencia del HTML en que el navegador interpreta y ejecuta el código. Actualmente evolucionó a AJAX (Asynchronous JavaScript and XML) o JSON (JavaScript Object Notation).
Resultado de imagen de javascript ajax json

Resultado de imagen de javascript ajax json

Lenguaje HTML

HTML son las siglas para HyperText Markup Language (lenguaje de marcas hipertextuales). Se usan por diseñadores para crear páginas usando el lenguaje en que están escritas. La función de los navegadores es interpretar el HTML y transformarlo en la página web.
Una página web se puede crear usando este código o guardando con la extensión adecuada un texto escrito con un procesador de textos.
EL lenguaje HTML tiene 5 características básicas:

Se escribe entre corchetes angulares < >. Pueden ser de apertura o de cierre.
Siempre empieza con la etiqueta de apertura <html> y siempre cierra con la etiqueta </html>.
Tiene el aspecto de una figura. Se distiguen dos partes principales: ek encabezado, entre las marcas <head> y </head> construye una instrucción de cabecera del documento y el cuerpo, entre <body> y</body>, constituye el cuerpo de la página.
Las etiquetas se complementan con atributos, que definen las propiedades y el comportamiento de las mismas, van siempre en la etiqueta de apertura y entre comillas.
Siempre está compuesto de dos etiquetas (apertura y cierre).

Ejemplo de lenguaje HTML

En 2014 se lanzó HTML5, diseñado para incorporar etiquetas multimedia (audio, vídeo...) y sentenciar al lenguaje Flash.

Logo de HTML5

Herramientas de publicación y gestores de contenido

Herramientas de publicación: Son herramientas de fácil uso que permiten crear contenidos y publicarlos en Internet sin la necesidad de contar con conocimientos técnicos para hacerlo.
Gestores de contenidos: Herramientas de publicación para generar contenidos web y actualizarlos sin necesidad de conocimientos técnicos. Se basan en plantillas que el usuario puede adaptar a sus gusto. Son las plantillas las que le dan un aspecto homogéneo al contenido. Se dividen en:

Wikis: Sitios web de construcción colectiva sobre un tema en específico. Puede ser modificad por cualquier usuario de la web. LA más conocida es Wikipedia.

Logo de Wikipedia

Blogs: Se constituyen como un diario en Internet. Se forma con artículos ordenados cronológicamente por el más reciente. Se pueden comentar.

Ejemplos de blogs

Estándares de accesibilidad informativa

La legislación española obliga a las páginas web a satisfacer los estándares de publicación en navegabilidad y accesibilidad para personas con discapacidades. Existe un compromiso para que estos sitios cumplan unas normas para recibir el máximo número de visitantes.
Los denominados criterios de accesibilidad están recogidos por la World Wide Web Consortium. La mayoría de los sitios web poseen la calificación AA, son muy pocos los que tienen el AAA. Los criterios de accesibilidad aportan numerosos beneficios como aumentar el número de los visitantes, la reducción del tiempo de carga de la página o la disminución de errores.

Logo de la World Wide Web Consortium (W3C)

https://www.w3c.es/ (página de la World Wide Web Consortium en español).

Diseño

A la hora de diseñar una página web, hay que tener en cuenta varios aspectos fundamentales, como el contraste del texto con el fondo, que depende de los gustos del diseñador.
En el diseño se aprecian:

La maquetación: Organiza los espacios y contenidos escritos, visuales y audiovisuales. Se encarga de las partes semántica y formal de la aplicación digital. Se distinguen tres elementos en la maquetación:

Elementos gráficos y tipográficos: La tipografía, la linea, el punto o el color. Imprescindible para cualquier maquetación.
Elementos de imagen: Imágenes, fotos etc. Sirven para atraer las miradas.
Elementos funcionales: Convierten la maquetación en interfaz. Se pueden seleccionar entre las herramientas del editor o diseñarse (botones, hipervínculos...).

La interfaz: Comandos y métodos que facilitan la interacción entre el usuario y el sitio web.

Ejemplo de interfaz de texto

Prediseño y estructura

La primera fase es el prediseño. En esta fase se analizan los elementos que llevará la página y se construye. Se puede analizar a que público irá destinada, el tiempo que llevará o la tecnología de la que se dispone.

Respecto a la estructura de una página web, un diseño consistente es fundamental para una web de calidad. Se debería:

Crear una jerarquía visual clara en cada página.
Usar convenciones (lo mayoritario en las páginas web).
División en áreas claramente definidas.
Simplificar la información.

En cualquier página web deben aparecer:

Encabezamiento
Logotipo
Menú de navegación
Titular
Contenidos
Pie de página

Resultado de imagen de disposicion de elementos de una pagina web

Elementos de una página web

jueves, 16 de mayo de 2019

Funcionamiento de las páginas web

Las páginas web son creadas por los programadores y los diseñadores. Tras crearlas son los webmasters (administradores) los que se encargan de mantenerlas.

Habitualmente un administrador crea en su ordenador un sitio local (conjuntos de archivos que conforman la web), donde manipula la página web y un sitio remoto, el sitio en Internet al que pueden acceder todos los usuarios. Ese sitio se denomina servidor y el proceso, alojamiento.
Los ordenadores que almacenan las páginas web y las ponen en disposición de todos son los servidores.

Resultado de imagen de funcionamiento de una pagina web

Funcionamiento de una página web

viernes, 10 de mayo de 2019

Clasificación de páginas web

Las páginas web se divisen en dos grupos: las estáticas y las dinámicas. Las páginas web estáticas siempre muestran el mismo contenido al cargarlas. Se realizan en HTML y el usuario no puede modificarlas. En las dinámicas, el servidor interpreta las peticiones del usuario y devuelve diferentes respuestas en cada caso. Se crean combinando HTML con lenguajes dinámicos como ASP.

Diferencia entre ambos tipos. La dinámica pasa por una base de datos, la estática no.

Cómo se crea una página web?

Una página web puede crearse usando en un editor de textos (Microsoft Word, por ejemplo) el lenguaje HTML y guardarlo con la extensión adecuada (.html/.htm). Este sistema sólo se usa con fines educativos.
Para crear una página web de forma sencilla e intuitiva se usan editores de páginas web. Se distinguen dos tipos: editores WYSIWYG(What You See Is What You Get), que crean un código HTML automático según un texto escrito en un procesador de textos o editores que trabajan con HTML, que requiere conocer el lenguaje.
Ambos tiene ventajas e inconvenientes. En los primeros, el código no queda tan limpio, pero no se maneja, es fácil aprender y la página web se hace rápidamente. En los segundos el código queda limpio, pero hay que saber manejarlo con precisión, también puede reutilizarse, su aprendizaje es más complicado y lleva mas tiempo.
página web creada por HTML

Página web creada por WYSIWYG

Qué es una página web?

Una página web designa habitualmente a un sitio web. Las páginas web son un conjunto de documentos que comparten una dirección común de acceso. Contienen hipervínculos,animaciones,gráficos... Para acceder a ellas se emplean los navegadores (Google Chrome, Internet Explorer, Mozilla Firefox...), que se encargan de comunicar el ordenador con los servidores donde se encuentran las páginas para poder mostrarlas o descargarlas. El lenguaje usado por estas es el HTML, HTML5 es su última versión.