Ejercicio WordPress – Estructura de contenidos Soft Obert
Estructura de páginas
Página: “Webmaster”
Un webmaster (contracción de las palabras inglesas web y master) o en femenino webmistress es la
persona responsable de mantenimiento o programación de un sitio web. La definición específica de este
cargo puede variar según el ámbito en el que se presente a la persona: en ciertos casos es el responsable
de los contenidos del sitio, mientras que en otros es el encargado de la operatibilidad, programación y
mantenimiento de la disponibilidad de un sitio web sin que necesariamente intervenga en la creación de
contenidos.
De acuerdo a la definición del Diccionario de Oxford, el webmaster es la persona responsable por un
servidor de Internet, sin embargo en la jerga informática se puede indicar que el webmaster es el dueño del
sitio web o el encargado de mantener el sitio web habilitado.
La labor de un webmaster es multidisciplinar debido a la gran cantidad de tareas que realiza y a la
complejidad de las habilidades para ejecutarlas, por lo que es muy importante una capacitación constante.
Sin embargo hay algunos puntos básicos que un webmaster debería conocer para realizar mejor su trabajo.
[insertar diagrama]
HTML: Hypertext Markup Language (Lenguaje de Etiquetado de documentos Hipertextual)
CSS: Cascade Style Sheets (Hojas de Estilo en Cascada)
JS: JavaScript
AS: ActionScript
ASP: Active Server Pages (Páginas Activas del Servidor)
PHP: Personal Home Page ó PHP Hypertext Preprocessor
SQL: Structured Query Language (Lenguaje de Consulta Estructurado)
IIS: Internet Information Server
Página: “Tecnologías del Lado del Usuario”
Lenguajes y programas que se ejecutarán utilizando los recursos del ordenador del visitante de nuestra
web.
Página: “Marcado de texto HTML”
HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el
lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la
estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales
como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>).
HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede
Ejercicio WordPress – Estructura de contenidos Soft Obert
incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores
web y otros procesadores de HTML.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más
ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como
XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y
anteriores).
HTML consta de varios componentes vitales, incluyendo elementos y sus atributos, tipos de data, y
la declaración de tipo de documento.
Elementos
Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas:
atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere
válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej.
<nombre‐de‐elemento>) y una etiqueta de cierre (p.ej. </nombre‐de‐elemento>). Los atributos del
elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos
etiquetas (p.ej. <nombre‐de‐elemento atributo="valor"> Contenido
</nombre‐de‐elemento>).Algunos elementos, tales como <br>, no tienen contenido ni llevan una
etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.
El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece
«Golf» como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una
manera similar al título «Marcado HTML» al principio de esta sección. El marcado estructural no
define cómo se verá el elemento, pero la mayoría de los navegadores web han estandarizado el
formato de los elementos. Un formato específico puede ser aplicado al texto por medio de hojas de
estilo en cascada.
El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo,
<b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita, pero no
indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por
ejemplo, los que leen el texto en voz alta). En el caso de <b>negrita</b> e <i>itálica</i>, existen
elementos que se ven de la misma manera pero tienen una naturaleza más semántica:
<strong>enfásis fuerte</strong> y <em>énfasis</em>. Es fácil ver cómo un lector de pantalla
debería interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes
elementos presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un
libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado presentacional ha sido
desechada con HTML 4.0, en favor de hojas de estilo en cascada.
El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con
otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla
<a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace. Por
ejemplo, un enlace a la Wikipedia sería de la forma <a href=”es.wikipedia.org”>Wikipedia</a>.
También se pueden crear enlaces sobre otros objetos, tales como imágenes <a href=”enlace”><img
src=”imagen” /></a>.
Atributos
Ejercicio WordPress – Estructura de contenidos Soft Obert
La mayoría de los atributos de un elemento son pares nombre‐valor, separados por un signo de
igual «=» y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El
valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden
estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los valores sin comillas es
considerado poco seguro. En contraste con los pares nombre‐elemento, hay algunos atributos que
afectan al elemento simplemente por su presencia (tal como el atributo ismap para el elemento
img).
Página: “Estilos de hoja en cascada CSS”
El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus
siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito
en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el
encargado de formular la especificación de las hojas de estilo que servirán de estándar para los
agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de
su presentación.
Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que
es más importante que un bloque etiquetado como <H2>. Versiones más antiguas de HTML
permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el
tamaño de fuente). No obstante, cada etiqueta <H1> debía disponer de la información si se
deseaba un diseño consistente para una página y, además, una persona que leía esa página con un
navegador perdía totalmente el control sobre la visualización del texto.
Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar información sobre cómo será
visualizado, solamente marca la estructura del documento. La información de estilo, separada en
una hoja de estilo, específica cómo se ha de mostrar <H1>: color, fuente, alineación del texto,
tamaño y otras características no visuales, como definir el volumen de un sintetizador de voz, por
ejemplo.
La información de estilo puede ser adjuntada como un documento separado o en el mismo
documento HTML. En este último caso podrían definirse estilos generales en la cabecera del
documento o en cada etiqueta particular mediante el atributo "style".
Página: “Efectos dinámicos JavaScript”
JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se
define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
Se utiliza principalmente en su forma del lado del cliente (client‐side), implementado como parte
de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas,
aunque existe una forma de JavaScript del lado del servidor (Server‐side JavaScript o SSJS). Su uso
en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio
(mayoritariamente widgets) es también significativo.
Ejercicio WordPress – Estructura de contenidos Soft Obert
JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del
lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen
semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web.
Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del
Document Object Model (DOM).
Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y únicamente
en el marco de la aplicación cliente, sin acceso a funciones del servidor. JavaScript se interpreta en
el agente de usuario, al mismo tiempo que las sentencias van descargándose junto con el código
HTML.
Página: “Software propietario”
Programas que requieren licencia de compra para utilizarlos, y al visitante de nuestra web los
plugins necesarios para visualizarlos.
Página: “Animaciones con Adobe Flash”
Adobe Flash Professional es el nombre o marca comercial oficial que recibe uno de los
programas más populares de la casa Adobe, junto con sus programas hermanos Adobe
Illustrator y Adobe Photoshop y que se trata de una aplicación de creación y manipulación
de gráficos vectoriales con posibilidades de manejo de código mediante el lenguaje
ActionScript en forma de estudio de animación que trabaja sobre "fotogramas" y está
destinado a la producción y entrega de contenido interactivo para las diferentes audiencias
alrededor del mundo sin importar la plataforma.
Es actualmente desarrollado y comercializado por Adobe Systems Incorporated y forma
parte de la familia Adobe Creative Suite, su distribución viene en diferentes presentaciones,
que van desde su forma individual hasta como parte de un paquete siendo estos: Adobe
Creative Suite Design Premium, Adobe Creative Suite Web Premium y Web Standard,
Adobe Creative Suite Production Studio Premium y Adobe Creative Suite Master Collection.
Se usa en las diferentes animaciones publicitarias, de reproducción de vídeos (como ocurre
en YouTube) y otros medios interactivos que se presentan en casi todas las páginas web del
mundo le han dado la fama a éste programa dándoles el nombre de "animaciones Flash" a
los contenidos creados con éste.
Adobe Flash utiliza gráficos vectoriales y gráficos rasterizados, sonido, código de programa,
flujo de vídeo y audio bidireccional (el flujo de subida sólo está disponible si se usa
conjuntamente con Macromedia Flash Communication Server). En sentido estricto, Flash es
el entorno de desarrollo y Flash Player es el reproductor utilizado para visualizar los
archivos generados con Flash. En otras palabras, Adobe Flash crea y edita las animaciones o
archivos multimedia y Adobe Flash Player las reproduce.
Los archivos de Adobe Flash, que tienen generalmente la extensión de archivo SWF, pueden
aparecer en una página web para ser vistos en un navegador web, o pueden ser
reproducidos independientemente por un reproductor Flash. Los archivos de Flash
Ejercicio WordPress – Estructura de contenidos Soft Obert
aparecen muy a menudo como animaciones en sitios web multimedia, y más
recientemente en Aplicaciones de Internet Ricas. Son también ampliamente utilizados
como anuncios en la Web.
Página: “Programación en Flash ActionScript”
Adobe ActionScript es el lenguaje de programación de la Plataforma Adobe Flash.
Originalmente desarrollado como una forma para que los desarrolladores programen en
forma más interactiva. La programación con ActionScript permite mucha más eficiencia en
las aplicaciones de la plataforma Flash para construir animaciones de todo tipo, desde
simples a complejas, ricas en datos e interfaces interactivas.
La versión más extendida actualmente es ACTION 6.0, que significó una mejora en el
manejo de programación orientada a objetos al ajustarse mejor al estándar ECMA‐262 y es
utilizada en las últimas versiones de Adobe Flash y Flex y en anteriores versiones de Flex.
Desde la versión 2 de Flex viene incluido ActionScript 3, el cual mejora su rendimiento en
comparación de sus antecesores, además de incluir nuevas características como el uso de
expresiones regulares y nuevas formas de empaquetar las clases.
Página: “Tecnologías del lado del servidor”
Lenguajes y tecnologías que se utilizan en el servidor que aloja nuestra web
Página: “Script de servidor PHP”
PHP es un acrónimo recursivo que significa PHP Hypertext Pre‐processor (inicialmente PHP Tools,
o, Personal Home Page Tools). Fue creado originalmente por Rasmus Lerdorf en 1994; sin embargo
la implementación principal de PHP es producida ahora por The PHP Group y sirve como el estándar
de facto para PHP al no haber una especificación formal. Publicado bajo la PHP License, la Free
Software Foundation considera esta licencia como software libre.
Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y
plataformas sin costo alguno. El lenguaje PHP se encuentra instalado en más de 20 millones de
sitios web y en un millón de servidores, el número de sitios en PHP ha compartido algo de su
preponderante sitio con otros nuevos lenguajes no tan poderosos desde agosto de 2005. Este
mismo sitio web de Wikipedia está desarrollado en PHP. Es también el módulo Apache más popular
entre las computadoras que utilizan Apache como servidor web.
El gran parecido que posee PHP con los lenguajes más comunes de programación estructurada,
como C y Perl, permiten a la mayoría de los programadores crear aplicaciones complejas con una
curva de aprendizaje muy corta. También les permite involucrarse con aplicaciones de contenido
dinámico sin tener que aprender todo un nuevo grupo de funciones.
Aunque todo en su diseño está orientado a facilitar la creación de sitios webs, es posible crear
aplicaciones con una interfaz gráfica para el usuario, utilizando la extensión PHP‐Qt o PHP‐GTK.
También puede ser usado desde la línea de órdenes, de la misma manera como Perl o Python
pueden hacerlo; a esta versión de PHP se la llama PHP‐CLI (Command Line Interface).
Ejercicio WordPress – Estructura de contenidos Soft Obert
Cuando el cliente hace una petición al servidor para que le envíe una página web, el servidor
ejecuta el intérprete de PHP. Éste procesa el script solicitado que generará el contenido de manera
dinámica (por ejemplo obteniendo información de una base de datos). El resultado es enviado por
el intérprete al servidor, quien a su vez se lo envía al cliente. Mediante extensiones es también
posible la generación de archivos PDF, Flash, así como imágenes en diferentes formatos.
Permite la conexión a diferentes tipos de servidores de bases de datos tales como MySQL,
PostgreSQL, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird y SQLite.
Página: “Script de servidor ASP”
Active Server Pages (ASP), también conocido como ASP clásico, es una tecnología de Microsoft del
tipo "lado del servidor" para páginas web generadas dinámicamente, que ha sido comercializada
como un anexo a Internet Information Services (IIS).
La tecnología ASP está estrechamente relacionada con el modelo tecnológico y de negocio de su
fabricante. Intenta ser solución para un modelo de programación rápida ya que "programar en ASP
es como programar en Visual Basic y C#", por supuesto con muchas limitaciones y algunas ventajas
específicas en entornos web.
Lo interesante de este modelo tecnológico es poder utilizar diversos componentes ya desarrollados
como algunos controles ActiveX así como componentes del lado del servidor, tales como CDONTS,
por ejemplo, que permite la interacción de los scripts con el servidor SMTP que integra IIS.
Se facilita la programación de sitios web mediante varios objetos integrados, como por ejemplo un
objeto de sesión basada en cookies, que mantiene las variables mientras se pasa de página a
página.
Es limitado a solo funcionar con IIS, por lo que su uso es cuestionado por la mayoría de los
programadores web quienes prefieren otros lenguajes de programación del lado del servidor como
por ejemplo PHP, Perl, Java Etc.
Página: “Gestores de contenidos”
Dominio en la instalación, configuración e introducción de datos en sistemas de gestión de contenidos.
Página: “¿Qué es WordPress?”
La nueva sociedad de la información demanda cada vez más agilidad en la publicación de
contenidos en las webs. La necesidad de un gestor de contenidos web es vital para su propietario,
porque le permite no depender del desarrollador web para los cambios de textos, imágenes y
documentos en su web.
Aunque gestores de contenidos (CMS en sus siglas en inglés) hay muchos, WordPress destaca por
dos aspectos: su amplio soporte y su modularidad, aparte de ser una distribución libre y gratuita, lo
que implica un ahorro importante en estos tiempos.
Una amplia comunidad está colaborando a desarrollar nuevas y variadas extensiones que
implementan nuevas funcionalidades al ya de por sí completo pack inicial de instalación, la mayoría
de ellas de carácter gratuito.
Ejercicio WordPress – Estructura de contenidos Soft Obert
Por otro lado, WordPress tiene una filosofía de implementación de contenidos que permite
distribuir los diferentes elementos de la web por dónde y cuándo se quiera.
Veamos que nos permite gestionar WordPress en nuestro sitio web: para empezar, la filosofía de
separar el diseño de los contenidos nos permite cambiar el diseño de nuestra web en un momento
añadiendo nuevas plantillas que cambiarán la estética de nuesta web.
Respecto a los contenidos en sí, podemos organizar una estructura interna para nosotros pero
mostrar a los visitantes una estructura de menús diferente para potenciar algunos contenidos más
que otros. De igual forma, nos da mucha flexibilidad para poner avisos y banners publicitarios en las
diferentes partes de la página.
Y como hemos comentado antes, gracias al amplio soporte y sus numerosas extensiones podemos
implementar nuevas funciones en nuestra web como galerías de fotos, conexión a las redes sociales
o las necesidades específicas para nuestra web.
En definitiva, WordPress permite tanto a los desarrolladores web agilizar la creación de nuevos
proyectos de una forma profesional como a los particulares crear su propia web completamente
autogestionable.
Omar del Río (Formador de WordPress en Soft Obert)
Estructura de entradas
Caregoría: “HTML 5”
Novedades y consejos para el futuro estándar web
Entrada: “Novedades HTML 5 (I)” // Etiquetas: “código”
La nueva versión del código por excelencia para webs incorpora toda una serie de etiquetas para
evitar la "divitis" o uso en exceso de etiquetas <div> para estructurar nuestro documento.
<header> para generar cabeceras
<nav> para generar zonas de menús de navegación
<footer> para generar el pie de página
<article> para generar áreas de contenidos
<section> para generar un apartado dentro de un <article>
<aside> para generar áreas de contenidos secundarios (publicidad, etc.)
Entrada: “Novedades HTML 5 (II)” // Etiquetas: “código, programación”
Otra de las novedades de la 5ª versión es la inclusión de etiquetas para audio y vídeo
estandarizadas, así como otras etiquetas para añadir gráficos generados por javascript
<audio> para insertar un fichero de audio (por ejemplo un .mp3)
Ejercicio WordPress – Estructura de contenidos Soft Obert
<video> para insertar un fichero de video (por ejemplo un .ogg)
<canvas> para insertar un gráfico generado con javascript
Categoría: “SEO”
Consejos y trucos para posicionar correctamente nuestra web
Entrada: “SEO natural: utiliza bien las etiquetas HTML” // Etiquetas:
“código”
A google le gustan los documentos HTML que pesen poco, con lo que deberemos utilizar pocas
etiquetas pero distintivas para que el buscador sepa que es lo más importante de nuestras páginas.
Por tanto deberemos utilizar correctamente las etiquetas de encabezados, listas, definiciones y
citas para dotar de significado a los contenidos (utilizar marcado estructural) y evitar utilizar
etiquetas obsoletas que solo sirvan para dar estilos (marcado presentacional).
También es aconsejable nombrar los archivos y ponerles títulos con palabras que queramos
destacar, y utilizarlas también en los títulos y textos alternativos de las imágenes.
Si tenéis dudas sobre si vuestro código está correctamente creado revisad la herramienta de
validación del W3C para el código de marcado HTML.
