UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO

Transcripción

1 UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO Nombre del proyecto: PLANEACIÓN ESTRATÉGICA Empresa: BOSS TECNOLOGÍA INFORMÁTICA Memoria que como parte de los requisitos para obtener el título de: INGENIERO EN INNOVACIÓN Y DESARROLLO EMPRESARIAL Presenta: RICARDO BORIS HERNÁNDEZ SÁNCHEZ Asesor de la UTEQ M.A. Luis Adolfo Gutiérrez Pérez Asesor de Empresa Lic. Fernando Hernández Sánchez Santiago de Querétaro, Qro. Junio del 2013

2 Resumen Este trabajo describe la planeación, desarrollo e implementación del proyecto de website comercial para BOSS Tecnología Informática, el cual consiste en una programación, redacción y diseño sin base previa del primer portal web de la empresa, como parte de un proyecto mayor que contempla una formalización de su imagen corporativa, estrategias de mercadeo y posicionamiento, cuyo objetivo principal es promover y publicar los servicios que la empresa ofrece y realiza, segmentando áreas dedicadas por el giro de los servicios y por el segmento al que se encuentran dirigidos. El desarrollo contempla la definición y redacción de contenido, diseño de interface gráfica y programación del código necesario para la estructura de la página. Finalmente el prototipo se coloca en estado beta fuera del alcance general de las redes de internet, cuya finalidad es permitir el acceso solo a un grupo tester que realice pruebas de funcionalidad, desempeño, experiencia de usuario y contenido, tras lo cual se realizaran las correcciones y recomendaciones que grupo tester hubiese solicitado. Tras la corrección y aprobación del proyecto, será decisión de los administradores de la empresa fijar la fecha de lanzamiento de sitio web para así habilitarlo para su visita abierta al público mundial. (Palabras clave: tesis, diseño, web, mercadeo) 1

3 Astract This project describes the planning, development and implementation of the commercial website for BOSS Tecnología Informática, which consists in programming, writing and design without prior basis of the first web site of the company, as part of a larger project that includes an image corporate formalization, marketing and positioning strategies, whose main objective is to promote and publicize the services that the company provides and performs, choosing dedicated areas by the line of business services and the segment to which they are directed. The development includes definition and content writing, graphic design and programming interface code to the page structure. Finally a beta prototype is placed outside of the general scope of Internet networks, which aims to allow access only to a tester team, to test the functionality, performance, user experience and content, after which, corrections and recommendations a tester team had requested will be made. After correction and the project approval, it will be up to the company managers to set the website launch date to enable the visit and opening to the public worldwide. 2

4 Dedicatorias Un hombre nunca alcanzaría su máxima grandeza ni sus más grandes logros sin antes reconocer que necesita ayuda para lograrlo, así pues dedico este trabajo a las personas cuyo apoyo fugaz o continuo aportaron lo necesario para impulsar y apoyar la culminación y acreditación de mis estudios en esta universidad. 3

5 Agradecimientos En especial agradezco a mis padres, cuyo apoyo y amor recibí de variadas maneras, a mi esposa cuya fortaleza y determinación siempre me han ayudado en los momentos de duda, a mi amigo Luis Adolfo quien me brindo su más sincero apoyo y amistad en todo momento, a mi hermano Luis Alberto quien nunca perdió la fe ni la confianza en mí, a mis hijos quienes son mi motivación genuina, a mi amiga Paola Gudiño quien demostró ser una excelente amiga y una compañera de primera, gracias. 4

6 ÍNDICE Resumen... 1 Astract... 2 Dedicatorias... 3 Agradecimientos... 4 ÍNDICE... 5 I. Introducción... 8 II. Antecedentes III. Justificación IV. Objetivos V. Alcances Definición de objetivos Definición de los contenidos Definición de la estructura de la web Definición de la navegación Definición del diseño visual Desarrollo de código Desarrollo grafico Integración Testing Reproceso Lanzamiento VI. Fundamentación teórica Elementos de contenido Uso de plantillas Uso de encabezado y pie de página Uso de tablas Presentación de elementos de navegación Selección de tipografía

7 6.1.6 Selección de color Uso de gráficos Dimensiones Teoría de las hojas de estilo Menú Formularios Lenguaje HTML <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BASE> </BASE> <BODY> </BODY> <H1>, <H2>, <H3> <P> <BR> <!-- --> <A> <A HREF="URL">...</A> <UL> <OL> <LI> <B> <U> <I> <PRE> <HR> <BR> <TABLE> <TR> <TD> <IMG> <TEXTAREA> Creación del sitio web Definición del sitio y planificación Arquitectura Diseño Construcción

8 Mantenimiento VII. Plan de actividades VIII. Recursos materiales, humanos y financieros Recursos materiales Recursos Humanos Recursos Financieros IX. Desarrollo del proyecto Diagrama de árbol de sitio web Código CSS de hoja de estilo principal Código HTML inicial Código CSS de hoja de estilo para el slider principal Código del script de java empleado para efectuar animación Código de HTML para la sección de nosotros Código de HTML para la sección de contacto Código de PHP para la recolección, validación de información Código de HTML de la sección de servicios web Código de HTML de la sección de soluciones personales Código de HTML de la sección de soluciones empresariales X. Resultados obtenidos XI. Análisis de riesgo XII. Conclusiones XIII. Recomendaciones XIV. Referencias bibliográficas

9 I. Introducción El desarrollo de una organización o empresa exige una planeación cautelosa que visualice todos los aspectos de su macro y micro entornos, debido a esto podemos encontrar que corporaciones y empresas transnacionales realizan planes de desarrollo cautelosos y estudiados que incluyen e involucran todas las áreas de la empresa, esto es con el propósito de orientar todos los esfuerzos realizados hacia el mismo fin, fortaleciendo la estrategia general. El área critica de una empresa comercial en cuanto a penetración y presencia en el mercado es el área mercadológica, cuyas acciones impactan directamente en el posicionamiento de la marca, producto, servicios, precios y relaciones con sus clientes, y es altamente responsable del nivel de éxito comercial de que la empresa goce. Actualmente las áreas mercadológicas cuentan con múltiples herramientas y estrategias a disposición que permiten penetrar en diversos segmentos de mercado, muchas de estas herramientas suelen ser específicas y otras muy generales, aunque de acuerdo al giro de la empresa y al producto o servicio que esta ofrece, puede llegar a ser mandatorio el uso de algunos medios para lograr la colocación, penetración o permanencia en su mercado, tal es el caso de las empresas que ofrecen servicios web, tales como diseño, desarrollo, alojamiento, registro y mantenimiento de sitios web, cuyo giro y producto convierten en obligatorio el contar con un sitio propio que muestre y promocione 8

10 ejemplos, datos y pruebas del producto que se ofrece, pues es de esperarse que los individuos o empresas que requieran y busquen servicios de esta índole comiencen por buscar proveedores que cuenten con presencia en la internet. 9

11 II. Antecedentes La empresa BOSS Tecnología Informática inicio sus operaciones en Octubre del año 2009, dichas actividades fueron iniciadas únicamente por Fernando Hernández Sánchez como persona física ofreciendo servicios profesionales relativos a la Tecnología Informática, dado esto no se realizó ningún proyecto de negocios, inversión, desarrollo o crecimiento; fue en Abril del año 2012 cuando las actividades comerciales tuvieron tal auge que se decidió formalizar y consolidar la empresa. La empresa formulo un proyecto que tenía por objetivo fortalecer y consolidar la empresa como un proveedor de servicios informáticos maduro y confiable, respaldado por un grupo de trabajo formado por expertos en las áreas de servicio ofertadas, alejándose de la imagen casual e informal que la persona física transmitía. Dicho proyecto mayor se enfoca principalmente en dos objetivos principales que son: La mecanización, estandarización y división de actividades por áreas internas de trabajo, y la creación de un plan ambicioso de mercadeo que incluye la creación de una imagen corporativa, plan de mercadeo, material publicitario y división de fuerza de ventas. Dentro del segundo objetivo se advirtió que una estrategia clave para la colocación de la nueva imagen, así como la formalización publica de la empresa seria el contar con un website que sirviera tanto como carta de presentación, como herramienta de venta, además dado que BOSS Tecnología Informática 10

12 ofrece servicios web, tales como diseño profesional, Hosting y comercio electrónico entre otros, se consideró de importancia crítica contar con un website que sirviese de testigo y demostración del potencial profesional de la empresa en el área de servicios web, generando así un sub proyecto de alta importancia dentro del plan general de la empresa. 11

13 III. Justificación El desarrollo de un sitio web para BOSS Tecnología Informática es de alta importancia debido a su giro comercial, deberá ser una plataforma publica que además de ofrecer información sobre la empresa a manera de carta de presentación, deberá de proveer el soporte necesario para impulsar las labores comerciales de venta, esto es mostrando dicho sitio web como ejemplo del trabajo que se realiza en la empresa, tal como una compañía inmobiliaria presta especial atención al diseño del inmueble en el que opera. Una encuesta silenciosa mediante análisis de tráfico y trazado de IP realizada en Junio del 2012 por BOSS Tecnología Informática revelo que aproximadamente el 78% de las visitas al dominio eran realizadas por prospectos del área comercial (ver grafica 1) y tomando solo este grupo de visitantes se descubrió que solo el 12% de estos contactos prosiguieron a etapas maduras del proceso de prospección (ver grafica 2), se asume entonces que el restante 88% de los prospectos que realizaron una visita al dominio de la empresa en búsqueda de una página web no obtuvieron el refuerzo necesario para continuar con el proceso, sino que posiblemente todo lo contrario (ver grafica 3 y tabla 1). 12

14 Visitas al dominio 22% 78% Prospectos Otros visitantes Grafica 1, Porcentaje de visitas por prospectos. Seguimiento de proceso de prospección 12% 88% Continuaron Abandonaron Grafica 2, Porcentaje de abandono de proceso de prospección. 13

15 Observación de trafico en dominio 9% 22% 69% Otros visitantes Abandonan Continuan Grafica 3, Porcentajes absolutos relativos al proceso de prospección. Muestra total Visitantes aleatorios Visitantes que abandonan proceso Visitantes que continuan proceso Porcentaje 100% 22% 69% 9% Numero de visitantes Tabla 1, Porcentajes ejemplificados con una población de 1000 visitantes. 14

16 IV. Objetivos Los objetivos del proyecto de desarrollo de sitio web son el acceder al porcentaje de usuarios que visitan el dominio de la empresa buscando un sitio web pero que al no encontrarlo abandonan el proceso de prospección, así como atraer el porcentaje de visitantes aleatorios y acceder a nuevas oportunidades de venta, esto es un incremento del 767% en la retención de prospectos comerciales y un incremento adicional del 244% de oportunidades de venta de usuarios aleatorios. 15

17 V. Alcances El proyecto de desarrollo del sitio web para BOSS Tecnología Informática parte del diseño corporativo ya realizado por la empresa, incluyendo definiciones de visión, misión, identidad, logo, productos y precios. El proyecto de desarrollo del sitio web para BOSS Tecnología Informática no incluirá el desarrollo de material gráfico para publicidad impresa, televisiva o de correo electrónico, tampoco incluye un portal de comercio electrónico de venta directa, esto debido a la naturaleza de los servicios y productos ofertados. El desarrollo de dicho proyecto transcurrirá a través de las siguientes etapas contempladas para su realización: 5.1 Definición de objetivos Se trata entre otras cosas de la definición de audiencia, se debe establecer el posible público de la web teniendo en cuenta varios factores, como la capacidad técnica del usuario, su capacidad física (sitios accesibles) y su ubicación geográfica (sitios locales, regionales, nacionales o de alcance mundial). (Tiempo estimado: 1 día) 16

18 5.2 Definición de los contenidos Una vez definidos los objetivos y la audiencia se debe estudiar el contenido que se incorporará al sitio. Luego se procederá a filtrarlo y agruparlo de manera consistente para presentarlo al usuario. (Tiempo estimado: 5 días) 5.3 Definición de la estructura de la web La estructura de la web es la diagramación del menú y el formato que tendrán las páginas web. Se define así el esqueleto de la web utilizando módulos para dividir cada sección y ordenarlas en base a su importancia. (Tiempo estimado: 1 día) 5.4 Definición de la navegación El sistema de navegación es el que permite al usuario acceder a las diferentes páginas del sitio web. Es necesario lograr un diseño web claro y una navegación sencilla que guíe al usuario por el sitio y que sea una guía de lo que va a encontrar. (Tiempo estimado: 2 días) 17

19 5.5 Definición del diseño visual El diseño web visual comprende la parte estética de la página web. Se realiza tomando en cuenta la identidad corporativa de la empresa, sus colores, logotipos, etc. Se presenta en esta etapa uno o varios bocetos del diseño web que mostrarán una versión cercana a la final. (Tiempo estimado: 5 días) 5.6 Desarrollo de código El desarrollo de código incluye toda la programación relativa al motor de funcionamiento y estructura del sitio web, incluyendo códigos en html, css, javascript y php, que deberá ser realizado en paralelo al Desarrollo grafico de los elementos del sitio web. (Tiempo estimado: 15 días) 5.7 Desarrollo grafico El desarrollo grafico consiste en el diseño de todos los elementos visuales que serán incluidos en la estructura y contenido del sitio web, tales como fotografías, iconos, imágenes, fondo, botones, banners, menú, logotipo y cualquiera que fuere la imagen que se requiriese. (Tiempo estimado: 10 días) 18

20 5.8 Integración Esta etapa funde y pule el desarrollo de código y el desarrollo grafico en uno solo, realizando las primeras interacciones y pruebas del aspecto del sitio web, es también la etapa en la que se comienza a requerir reprocesos en control de calidad. (Tiempo estimado: 15 días) 5.9 Testing Tras finalizar la integración del código y el diseño gráfico, el resultado es colocado a disposición de un grupo de sujetos de prueba con la intención de realizar pruebas de funcionalidad, desempeño, experiencia de usuario y contenido. (Tiempo estimado: 1 día) 5.10 Reproceso Esta etapa representa un ciclo continuo junto con la etapa de Testing, pues el grupo de sujetos de prueba tras reportar hallazgos, fallas y recomendaciones, accionara actividades de reproceso en código y diseño gráfico hasta lograr el visto bueno del grupo de pruebas. (Tiempo estimado: 2 días) 19

21 5.11 Lanzamiento Es la etapa final, en la que el sitio web ha sido revisado y es colocado al alcance del público global en la red mundial. (Tiempo estimado: 1 día) VI. Fundamentación teórica 6.1 Elementos de contenido Se debe cuidar el estilo del diseño un sitio web, de manera que el resultado quede homogéneo. Esto facilitará la navegación del usuario y dará personalidad al conjunto. Una composición homogénea se logra a través de un color de fondo, un fondo gráfico, uso de tamaño, color y tipo de letra, gráficos, iconos, etc. La composición debe guiar al usuario visualmente. Distinguir en un principio las áreas de Información, navegación principal, secundaria, local, etc. El contraste es importante y nos ayuda a mantener módulos de información y a facilitar la lectura Uso de plantillas. Usar una misma plantilla no quiere decir que la página sea aburrida, al contrario utilizar la misma plantilla mantiene una página consistente, limpia y ordenada. 20

22 6.1.2 Uso de encabezado y pie de página. Los encabezados deben de presentar la identidad gráfica del sitio y el pie de página presenta por lo general el origen del sitio y ligas acerca del sitio: información legal, derechos de autor, año de producción, contacto, etc Uso de tablas. El uso de tablas es sumamente importante. No solo sirven para presentar datos de forma tabular, o como las conocemos fuera del contexto de Web, sino porque nos ayudan a crear espacios editoriales Presentación de elementos de navegación. Gran parte del éxito de una buena navegación se debe a la estructura del sitio en general; como decidimos agrupar nuestro contenido, bajo que secciones, etc., pero la otra parte se la debemos a una clara presentación y localización de elementos de navegación Selección de tipografía. La selección y uso de tipografía es quizá el elemento más difícil dentro del proceso de diseño. La tipografía asume un doble papel tanto como comunicador visual y como verbal. La tipografía nos ayuda a distinguir visualmente grupos de texto y de esta manera ayuda al usuario a predecir qué tipo de información 21

23 encontrara en ciertas áreas de la página. Lo que hacemos al diseñar páginas Web es básicamente pintar el texto, no solo aplicando color al texto sino al combinarlo con otros bloques de texto y con el fondo de la página. El ojo viajara de bloque en bloque a lo largo de la página y es gracias a estos bloques tipográficos que podemos alcanzar una buena jerarquía de información Selección de color. Ya se mencionó anteriormente, que el balance de color puede ayudar a nuestros usuarios a navegar con mayor facilidad nuestra página al delimitar áreas y al agrupar diferente tipo de información. Cuando se habla de contraste no necesariamente quiere decir que haya contraste entre un claro y un oscuro. Al contrario, el contraste debe de ser muy sutil, muchas veces se logra entre variaciones de un mismo color, hay sitios que son monocromáticos en su totalidad o sitios que usan diferentes porcentajes y variaciones de color en varias secciones, eso es suficiente para facilitar la lectura y layout de la página Uso de gráficos. La trampa número uno en el diseño de Web: pensar que las gráficas harán de nuestra página una página bien diseñada, atractiva e interesante. El uso excesivo de imágenes resulta en una página muy poco funcional y que lo primero que provoca es ahuyentar a nuestros usuarios. Por un lado si las gráficas no han sido correctamente optimizadas para Web, serán muy pesadas 22

24 y tardarán mucho en visualizarse en el navegador. Otro gran problema es que las imágenes llegan a saturar el layout de nuestra página muy fácilmente Dimensiones. El diseño de Web implica una serie de limitaciones. Dada la naturaleza del medio, nuestras páginas deben de funcionar en diferentes plataformas y con distintas dimensiones de pantalla. Debemos mantenernos al corriente de estadísticas del usuario. La siguiente página proporciona estadísticas de uso de sistemas operativos, navegador, resolución, etc. De acuerdo a este sitio, actualmente la mayor parte de usuarios usa una resolución de pantalla de 1024 x 768 y en segundo lugar sigue la resolución de 800x600. Antes de empezar el diseño y la producción de un sitio de Web, debemos definir con nuestro equipo de trabajo que formato seguiremos. El siguiente sitio proporciona una plantilla de navegador (Browser Grid: en donde podemos ver las áreas "seguras" dentro de cada una de las dimensiones de pantalla. Quiere decir que si por ejemplo decidimos hacer una página para una resolución de 800x600 entonces debemos trabajar con unas dimensiones reales de 760x420, este es el espacio visible, la diferencia en los números se debe al espacio utilizado por botones de navegación que requiere el navegador y nuestro propio sistema operativo. 23

25 6.2 Teoría de las hojas de estilo Los estilos CSS (hoja de estilo en cascada) son un lenguaje para definir el formato de nuestra página web, como colores, bordes, formato de letra, alineaciones, márgenes etc. Se recomienda separar los estilos en un archivo externo, este archivo se guarda con la extensión.css Si se desea incluir un css a nuestra página web se tiene que agregar al inicio de la página web, dentro del <head></head>, por ejemplo: <link href= menus.css rel= stylesheet type= text/css /> Ejemplo de estilos: body { font-family: 'Lucida Sans Unicode', sans-serif; /*Tipo de letra*/ font-size: 14px; background-color: #FFFFFF; text-align: justify; width: 900px; 24

26 6.2.1 Menú. Básicamente el menú es un conjunto de enlaces a las distintas partes de nuestro sitio. La estructura más común para hacer un menú es con una lista (<ul></ul>). Por lo tanto, cada elemento del menú es un elemento de la lista <li></li>. El elemento contendrá normalmente un enlace (<a href= "></a>) a una página del sitio. Ejemplo: <u1> <li><a href="inicio.html">inicio</a></li> <li><a href="integrantes.html">integrantes</a></li> <li><a href="discografia.html">discografia</a></li> <li><a href="formulario.html">contacto</a></li> </ul> Formularios. Un formulario es un elemento que permite recoger datos introducidos por el usuario. Se utilizan para conocer las opiniones, dudas, para registrarse en alguna página o para introducir pedidos a través de la red, se insertan a través de las etiquetas <form> y </form> 25

27 Elementos de un formulario: Áreas de texto <textarea> Permiten a los usuarios insertar varias líneas de texto. Suelen utilizarse para que incluyan comentarios. ejemplo: <textarea name= ejemploarea cols= 30 rows= 3 >Escribe el texto que quieras</textarea> Elementos de entrada <input> Para insertar un elemento de entrada como texto, contraseña, botón, casillas de verificacion es necesario incluir la etiqueta <input>. Ejemplo: <input name= campo type= password value= password size= 20 maxle ngth= 15 > Campos de selección <select> Se utilizan para insertar menús y listas desplegables. Para insertar uno de estos es necesario insertar las etiquetas <select> y </select>. Ejemplo para insertar: habría que escribir en HTML: <select name="mascota"> <option selected>--- Elige animal ---</option> <option>perro</option> <option>gato</option> </select> 26

28 6.2.3 Lenguaje HTML. El HTML (Hyper Text Markup Language ó lenguaje de marcación de hipertexto), es un lenguaje de programación, cuando alguien abre su navegador y ve una página, no está viendo el código HTML directamente, sino el navegador interpreta el código y lo despliega en la pantalla. Una buena noticia es que los navegadores cada vez están más estandarizados y es más factible que el diseño de la página sea permanente, independientemente del navegador utilizado por el usuario. Para tener una vaga idea del HTML es necesario conocer un poco sobre gramática y sintaxis. El código HTML está compuesto por banderas (tags) las cuales contienen los atributos y valores de esos atributos, existen bastantes banderas que se pueden incorporar en una página web, las banderas están definidas por los siguientes signos <> como podrá ver a continuación. Se puede escribir el código directamente en cualquier editor de texto; sin embargo, actualmente existen muchos editores de html como Dreamweaver, los cuales facilitan y agilizan el diseño de las páginas. Una de las grandes ventajas del html, es que puede añadírsele audio, animaciones, video, scripts, etc. Por lo tanto la página puede ser completamente interactiva. La mayor parte de las etiquetas basicas no son imprescindibles para poder mostrar información en nuestra página, de hecho, un fichero de texto sin ninguna etiqueta puede ser visualizado con el explorador. Pero sí es 27

29 conveniente que nos ajustemos a las normas HTML, para tener una página correctamente definida. Además, en un futuro, algunas etiquetas que ahora son meros formalismos, serán indispensables para que los navegadores puedan manejar nuestras páginas de manera eficiente. Este es el formato básico de un documento html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN"> <HTML> <HEAD>... </HEAD> <BODY>... </BODY> </HTML> Un documento html se divide en tres secciones principales, indicadas por las etiquetas: <HTML>, <HEAD>, <BODY>. La primera abarca todo el documento html. El head le agrega elementos de interactividad, asi como programación no visible para los usuarios. El body representa todos los elementos visibles de nuestro documento. 28

30 Cada sección de la página está limitada por una etiqueta < > en el inicio y una etiqueta </ > al final de cada instrucción. Por lo que siempre observaremos dos etiquetas de cada sección. Ejemplo: <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML> EL W3C (World Wide Web Consortium: encargado de la creación de los Standard webs, define que los ficheros HTML, XML, XHTML deben tener una declaración de tipo DOCTYPE que debe hacer referencia a una de las tres definiciones del tipo de documento que existen. Esta declaración debe ser la primera línea de nuestro documento y es necesaria para decirle al navegador qué versión de HTML es la que se usa en la página. Si no se hace, el navegador procesara la página en modo Quirks (modo de compatibilidad) pudiendo no interpretar correctamente el código de la página. 29

31 La DTD (definición del tipo de documento) es la estructura reglamentaria, es decir, los elementos y atributos que están disponibles para cada tipo de documento. Para HTML 4.01 (las versiones anteriores no son recomendables debido a que no son del todo compatibles con las Hojas de Estilo). El HTML 4 transitorio incluye todos los elementos y cualidades de HTML 4 Strict pero agrega cualidades presentational, elementos desaprobados o elementos obsoletos. Se llama Transitional porque está pensado como transición hacia HTML 4 estricto. El modo de definirla es: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \" El HTML 4.01 Frameset es una variante de HTML 4 transitorio para los documentos que utilizan Frames (marcos). El modo de definirla es: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\" \" 30

32 Si declaramos este DTD el navegador pasará a actuar cumplimiento de los estándares (Standards compílanse). Esto implicara que solo puedan usarse las etiquetas de HTML Este es el modo recomendado por el W3C, ya que es compatible con el CSS y puede ser interpretado correctamente por todos los navegadores, haciendo mucho más fácil el paso de nuestros documentos al XHTML que muy posiblemente tienda a sustituir al HTML en los próximos años. El modo de definirla es: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \" Si queremos saber si nuestra página cumple con el DTD definido podemos hacerlo desde <HTML> </HTML> FUNCIÓN: Esta etiqueta, no tiene otra función que indicar el comienzo y el final de los documentos web. Por tanto, es la primera (si no se especifica la etiqueta DOCTYPE) y la última etiqueta de una página web. Dentro de ella, estarán contenidos tanto el encabezamiento como el cuerpo del documento. Puede ser omitida sin que haya ningún problema en la interpretación de nuestra página. 31

33 6.2.5 <HEAD> </HEAD> FUNCIÓN: Define la zona de cabecera de las páginas. Entre sus límites, se incluyen etiquetas que dan información sobre nuestra página <TITLE> </TITLE> FUNCIÓN: Da título a la página. Este título es el que aparece en la parte superior de la ventana y el que se muestra al minimizar dicha ventana (en la mayoría de los navegadores). Entre sus límites, sólo se admiten caracteres de texto; no podremos incluir ningún otro elemento del lenguaje, ni tampoco etiquetas de estilo de fuente. Cualquier etiqueta que escribamos dentro del título, será mostrada como si fuera parte del texto. Los títulos son etiquetas de cabecera, por lo tanto, sólo tienen sentido dentro de las etiquetas <HEAD> y </HEAD> <BASE> </BASE> Podemos utilizar esta etiqueta, para especificar los puntos de partida para nuestros enlaces (HREF) y las ventanas de destino por defecto cuando usamos marcos (TARGET). Sólo puede incluirse en la cabecera de las páginas (<HEAD> </HEAD>). 32

34 ATRIBUTOS: NOMBRE Efecto / Valores que acepta HREF Determina un origen base para referencias a otras páginas. Un URL o parte de él. TARGET Asigna un marco de destino para las referencias de nuestra página. Nombre de marco (frame) <BODY> </BODY> Encierra el contenido visible del documento. Toda la programación que se encuentre encerrada entre estas etiquetas aparecera visiblemente en la página de internet <H1>, <H2>, <H3> Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las etiquetas <H1> Titular </H1>. Se definen mediante las etiquetas <H1>...</H1> hasta <H6>...</H6> <P> Párrafos. En principio, sin entrar en detalles de alineación u otras características, digamos que se definen por las etiquetas <P>...<P>. Esta 33