Módulo de DISEÑO Y DESARROLLO WEB
Objetivo: Diseñar y construir soluciones web de nivel intermedio con interfaz amigable, empleando herramientas multimedia que permitan promocionar la información e imagen de una organización y/o cliente.
Etiquetas de HTML mas utilizadas:<div> <p> Texto del párrafo </p> </div>
Elemento raíz
| Elemento | Descripcion |
| <!doctype html> | Define que el documento esta bajo el estandar de HTML 5 |
| Elemento | Descripción |
|---|---|
<html> | Representa la raíz de un documento HTML o XHTML. 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 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. |
<section>  | Define una sección en un documento. |
<nav> | Define una sección que solamente contiene enlaces de navegación |
<article> | Define contenido autónomo que podría existir independientemente del resto del contenido. |
<aside> | Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido |
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> | Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce. |
<header> | Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos. |
<footer> | Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos 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. |
<main> | Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el 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 parrafos de una sección o articulo o cualquier contenido. |
<pre> | Indica que su contenido esta preformateado y que este formato debe ser preservado. |
<blockquote> | Representa una 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 ennumerada. |
<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 terminos listados antes que él. |
<figure> | Representa una figura ilustrada como parte del documento. |
<figcaption> | Representa la leyenda de una figura. |
<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 . |
<small> | Representa un comentario aparte , es decir, textos como un descargo de 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 . |
<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. |
<data> | Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5). |
<time> | Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime. |
<code> | Representa un código de ordenador . |
<var> | Representa a una variable, es decir, una expresión matemática o 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. |
<kbd> | Representa la entrada de usuario, por lo general desde un teclado, pero 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. |
<i> | Representa un texto en una voz o estado de ánimo alterno, o por lo 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. |
<b> | Representa un texto hacia el cual se llama la atención para propósitos utilitaros. 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. |
<mark> | Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto. |
<ruby> |
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, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.
|
<rt> | Representa el texto de una anotación ruby . |
<rp> | Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones. |
<bdi> | Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto. Permite incrustar un fragmento de 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. |
<span> | Representa texto sin un significado específico. Este debe ser usado 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. |
<wbr> | 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 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. |
<embed> | Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML. |
<object> | Representa un recurso externo, que será tratado como una imagen, 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>. |
<video> | Representa un video , y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos. |
<audio> | Representa un sonido o stream de audio. |
<source> | Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio>. |
<track> | Permite a autores especificar una pista de texto temporizado para elementos multimedia como <video> o <audio>. |
<canvas> | 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 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. |
<svg> | Define una imagen vectorial embebida. |
<math> | Define una fórmula matemática. |
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 contretos 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, consistendo 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. |
<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. |
<datalist> | Representa un conjunto de opciones predefiniddas para otros 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 multi-línea. |
<keygen> | Representa un control de par generador de llaves. |
<output> | Representa el resultado de un cálculo. |
<progress> | Representa el progreso de finalización de una tarea. |
<meter> | Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido. |
Elementos interactivos
| Elemento | Descripción |
|---|---|
<details> | Representa un widget desde el que un usuario puede obtener información o controles adicionales. |
<summary> | Representa un resumen, título o leyenda para un elemento <details> dado. |
<command> | Representa un comando que un usuario puede invocar. |
<menu> | Representa una lista de comandos . |
<br> Permite aser un salto de linea
<br> Permite aser un salto de linea
PÁGINA WEB
Página Web
Una página web, o página electrónica, página digital, o ciberpágina es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.
Una página web, o página electrónica, página digital, o ciberpágina es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.
Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).
Una página web está compuesta principalmente por información de un tema factible (solo texto y/o módulos multimedia) así como por hiperenlaces; además puede contener o asociar hoja de estilo, datos de estilo para especificar cómo debe visualizarse, y también aplicaciones embebidas para así permitir interacción.
Las páginas web son escritas en un lenguaje de marcado que provee la capacidad de manejar e insertar hiperenlaces, generalmente HTML.
Respecto a la estructura de las páginas web, algunos organismos, en especial el World Wide Web Consortium (W3C), suelen establecer directivas con la intención de normalizar el diseño, y para así facilitar y simplificar la visualización e interpretación del contenido.
Una página web es en esencia una tarjeta de presentación digital, ya sea para empresas, organizaciones, o personas, así como una manera de comunicar ideas, pensamientos, conocimientos, informaciones o teorías.3 Así mismo, la nueva tendencia orienta a que las páginas web no sean solo atractivas para los internautas, sino también optimizadas (preparadas), para los buscadores a través del código fuente. Forzar esta doble función puede, sin embargo, crear conflictos respecto de la calidad del contenido.
Página Web Estática y Dinámica
Página Estática:
Los sitios Web estáticos son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin que pueda interactuar con la página Web visitada, las Web estáticas están construidas principalmente con hipervínculos o enlaces (links) entre las páginas Web que conforman el sitio, este tipo de Web son incapaces de soportar aplicaciones Web como gestores de bases de datos, foros, consultas on line, e-mails inteligentes...
Esta es una opción más que suficiente para aquellos sitios Web que simplemente ofrecen una descripción de su empresa, quiénes somos, donde estamos, servicios, etc... ideal para empresas que no quieren muchas pretensiones con su sitio Web, simplemente informar a sus clientes de sus productos y su perfil de empresa.
La principal ventaja de este tipo de páginas es lo económico que resulta crearlas, con un diseño vistoso e incluyendo las imágenes y el texto con el cual queremos informar a los navegantes, se puede crear fácilmente sin necesidad de ningún tipo de programación especial (php, asp, ...) un sitio Web estático.
La gran desventaja de los sitios Web estáticos reside en lo laborioso que resulta su actualización así como la pérdida de potentes herramientas soportadas con bases de datos, como pueden ser la creación de registros históricos de los clientes, pedidos on-line.
Ejemplos de Páginas Estática:
WEB QUEST:
Son sitios Web desarrollados principalmente por profesores y universidades, con un claro objetivo educativo, proponiendo a un grupo de alumnos un tema en particular (biología, geometría, física, literatura con un serie de cuestiones formuladas acerca del tema elegido, el grupo tiene disponible, en la misma Web, direcciones (links) a otras páginas Web donde pueden indagar e investigar acerca del tema, de tal forma que puedan responder a las preguntas planteadas. El principal objetivo de las Web Quest reside en aprender los contenidos del tema elegido de una manera interactiva.
BLOC O BITÁCORA:
Es un sitio Web donde se recopilan cronológicamente mensajes de uno o varios autores, sobre una temática en particular siempre conservando el autor la libertad de dejar publicado lo que crea pertinente, también llamado blog o bitácora.
WEB INFORMATIVA:
Aquellos sitios Web que simplemente ofrecen información acerca de un tema específico (Fiestas en Valencia: Las fallas, Gastronomía andaluza. por lo general estos sitios no se actualizan, de tal forma que los contenidos permanecen invariables a lo largo de su vida.
Los sitios Web estáticos son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin que pueda interactuar con la página Web visitada, las Web estáticas están construidas principalmente con hipervínculos o enlaces (links) entre las páginas Web que conforman el sitio, este tipo de Web son incapaces de soportar aplicaciones Web como gestores de bases de datos, foros, consultas on line, e-mails inteligentes...
Esta es una opción más que suficiente para aquellos sitios Web que simplemente ofrecen una descripción de su empresa, quiénes somos, donde estamos, servicios, etc... ideal para empresas que no quieren muchas pretensiones con su sitio Web, simplemente informar a sus clientes de sus productos y su perfil de empresa.
La principal ventaja de este tipo de páginas es lo económico que resulta crearlas, con un diseño vistoso e incluyendo las imágenes y el texto con el cual queremos informar a los navegantes, se puede crear fácilmente sin necesidad de ningún tipo de programación especial (php, asp, ...) un sitio Web estático.
La gran desventaja de los sitios Web estáticos reside en lo laborioso que resulta su actualización así como la pérdida de potentes herramientas soportadas con bases de datos, como pueden ser la creación de registros históricos de los clientes, pedidos on-line.
Ejemplos de Páginas Estática:
WEB QUEST:
Son sitios Web desarrollados principalmente por profesores y universidades, con un claro objetivo educativo, proponiendo a un grupo de alumnos un tema en particular (biología, geometría, física, literatura con un serie de cuestiones formuladas acerca del tema elegido, el grupo tiene disponible, en la misma Web, direcciones (links) a otras páginas Web donde pueden indagar e investigar acerca del tema, de tal forma que puedan responder a las preguntas planteadas. El principal objetivo de las Web Quest reside en aprender los contenidos del tema elegido de una manera interactiva.
BLOC O BITÁCORA:
Es un sitio Web donde se recopilan cronológicamente mensajes de uno o varios autores, sobre una temática en particular siempre conservando el autor la libertad de dejar publicado lo que crea pertinente, también llamado blog o bitácora.
WEB INFORMATIVA:
Aquellos sitios Web que simplemente ofrecen información acerca de un tema específico (Fiestas en Valencia: Las fallas, Gastronomía andaluza. por lo general estos sitios no se actualizan, de tal forma que los contenidos permanecen invariables a lo largo de su vida.
Páginas Dinámicas:
Los sitios web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, noticiarios, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada ... donde el administrador dispone la opción de gestionar dichos apartados, agregando, editando o eliminando contenidos.
La gran ventaja de los sitio web dinámicos es la versatilidad, apunta a la personalización de la información mostrada. Permite la toma de decisiones y muestra selectiva de información en función de criterios deseados.
Es útil para mostrar una imagen de empresa más sólida y profesional ya que permite guardar información en la computadora del navegante y mostrar en forma personalizada la página web de la empresa así como la información adecuada al tipo de navegante.
Ejemplo de páginas dinámicas:
Los sitios web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, noticiarios, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada ... donde el administrador dispone la opción de gestionar dichos apartados, agregando, editando o eliminando contenidos.
La gran ventaja de los sitio web dinámicos es la versatilidad, apunta a la personalización de la información mostrada. Permite la toma de decisiones y muestra selectiva de información en función de criterios deseados.
Es útil para mostrar una imagen de empresa más sólida y profesional ya que permite guardar información en la computadora del navegante y mostrar en forma personalizada la página web de la empresa así como la información adecuada al tipo de navegante.
Ejemplo de páginas dinámicas:
Blogs
Es un sitio web actualizado periódicamente que recopila de forma cronológica textos y artículos de uno o más autores, mostrando de primero el más reciente, donde los autores pueden publicar cualquier cosa que les parezca relevante. Usualmente, en cada artículo del Blog, los lectores pueden escribir sus comentarios y los autores pueden contestarles de vuelta, en una forma parecida a tener un diálogo. Cada blog tiene un uso o tema específico, puede ser personal, periodístico, empresarial, tecnológico, educativo, político, etc.
Construye tu propio Blog con todos los recursos y funciones necesarias, desde un Blog personal hasta un Blog de amplia red social. Los Blogs pueden ser configurados según su propósito o requerimientos, como sitios web académicos, club de fans, un servicio de soporte o hasta de noticias.
Es un sitio web actualizado periódicamente que recopila de forma cronológica textos y artículos de uno o más autores, mostrando de primero el más reciente, donde los autores pueden publicar cualquier cosa que les parezca relevante. Usualmente, en cada artículo del Blog, los lectores pueden escribir sus comentarios y los autores pueden contestarles de vuelta, en una forma parecida a tener un diálogo. Cada blog tiene un uso o tema específico, puede ser personal, periodístico, empresarial, tecnológico, educativo, político, etc.
Construye tu propio Blog con todos los recursos y funciones necesarias, desde un Blog personal hasta un Blog de amplia red social. Los Blogs pueden ser configurados según su propósito o requerimientos, como sitios web académicos, club de fans, un servicio de soporte o hasta de noticias.
Chat
Este sistema permite la comunicación instantánea entre participantes y es muy útil para una comunicación rápida y efectiva.
Ahora tienes la oportunidad de proveer un Chat en tu sitio web para que los usuarios puedan unirse y tener conversaciones de varios temas y salas de chat. También puedes moderar cada conversación y administrar a los usuarios.
Este sistema permite la comunicación instantánea entre participantes y es muy útil para una comunicación rápida y efectiva.
Ahora tienes la oportunidad de proveer un Chat en tu sitio web para que los usuarios puedan unirse y tener conversaciones de varios temas y salas de chat. También puedes moderar cada conversación y administrar a los usuarios.
Portales Web
Un portal puede tener herramientas y directorios para encontrar negocios y servicios. Es ideal para publicaciones con varios temas o categorías Puede ofrecer:
– Servicios de búsqueda: incluyendo mecanismos tipo directorios y páginas amarillas para localizar negocios o servicios.
– Contenidos: información de varios temas como noticias, deportes, pronósticos de clima, listas de eventos locales, mapas, opciones de entretenimiento, juegos, enlaces a estaciones de radio y a otros sitios con contenido especial en ciertas áreas de interés como coches, viajes y salud entre otros.– Facilidades de comercialización: anuncios clasificados para trabajos, coches y casas; subastas, pequeños agregados de vendedores y enlaces a otros sitios web que también se dedican a la venta.
Un portal puede tener herramientas y directorios para encontrar negocios y servicios. Es ideal para publicaciones con varios temas o categorías Puede ofrecer:
– Servicios de búsqueda: incluyendo mecanismos tipo directorios y páginas amarillas para localizar negocios o servicios.
– Contenidos: información de varios temas como noticias, deportes, pronósticos de clima, listas de eventos locales, mapas, opciones de entretenimiento, juegos, enlaces a estaciones de radio y a otros sitios con contenido especial en ciertas áreas de interés como coches, viajes y salud entre otros.– Facilidades de comercialización: anuncios clasificados para trabajos, coches y casas; subastas, pequeños agregados de vendedores y enlaces a otros sitios web que también se dedican a la venta.
Protocolo IP
El protocolo de IP (Internet Protocol) es la base fundamental de la Internet. Porta datagramas de la fuente al destino. El nivel de transporte parte el flujo de datos en datagramas. Durante su transmisión se puede partir un datagrama en fragmentos que se montan de nuevo en el destino. Las principales características de este protocolo son:
- Protocolo orientado a no conexión.
- Fragmenta paquetes si es necesario.
- Direccionamiento mediante direcciones lógicas IP de 32 bits.
- Si un paquete no es recibido, este permanecerá en la red durante un tiempo finito.
- Realiza el "mejor esfuerzo" para la distribución de paquetes.
- Tamaño máximo del paquete de 65635 bytes.
- Sólo ser realiza verificación por suma al encabezado del paquete, no a los datos éste que contiene.
El Protocolo Internet proporciona un servicio de distribución de paquetes de información orientado a no conexión de manera no fiable. La orientación a no conexión significa que los paquetes de información, que será emitido a la red, son tratados independientemente, pudiendo viajar por diferentes trayectorias para llegar a su destino. El término no fiable significa más que nada que no se garantiza la recepción del paquete.
La unidad de información intercambiada por IP es denominada datagrama. Tomando como analogía los marcos intercambiados por una red física los datagramas contienen un encabezado y una área de datos. IP no especifica el contenido del área de datos, ésta será utilizada arbitrariamente por el protocolo de transporte.
Direcciones IP
Para que en una red dos computadoras puedan comunicarse entre sí ellas deben estar identificadas con precisión Este identificador puede estar definido en niveles bajos (identificador físico) o en niveles altos (identificador lógico) de pendiendo del protocolo utilizado. TCP/IP utiliza un identificador denominado dirección internet o dirección IP, cuya longitud es de 32 bites. La dirección IP identifica tanto a la red a la que pertenece una computadora como a ella misma dentro de dicha red.
El protocolo de IP (Internet Protocol) es la base fundamental de la Internet. Porta datagramas de la fuente al destino. El nivel de transporte parte el flujo de datos en datagramas. Durante su transmisión se puede partir un datagrama en fragmentos que se montan de nuevo en el destino. Las principales características de este protocolo son:
- Protocolo orientado a no conexión.
- Fragmenta paquetes si es necesario.
- Direccionamiento mediante direcciones lógicas IP de 32 bits.
- Si un paquete no es recibido, este permanecerá en la red durante un tiempo finito.
- Realiza el "mejor esfuerzo" para la distribución de paquetes.
- Tamaño máximo del paquete de 65635 bytes.
- Sólo ser realiza verificación por suma al encabezado del paquete, no a los datos éste que contiene.
El Protocolo Internet proporciona un servicio de distribución de paquetes de información orientado a no conexión de manera no fiable. La orientación a no conexión significa que los paquetes de información, que será emitido a la red, son tratados independientemente, pudiendo viajar por diferentes trayectorias para llegar a su destino. El término no fiable significa más que nada que no se garantiza la recepción del paquete.
La unidad de información intercambiada por IP es denominada datagrama. Tomando como analogía los marcos intercambiados por una red física los datagramas contienen un encabezado y una área de datos. IP no especifica el contenido del área de datos, ésta será utilizada arbitrariamente por el protocolo de transporte.
Direcciones IP
Para que en una red dos computadoras puedan comunicarse entre sí ellas deben estar identificadas con precisión Este identificador puede estar definido en niveles bajos (identificador físico) o en niveles altos (identificador lógico) de pendiendo del protocolo utilizado. TCP/IP utiliza un identificador denominado dirección internet o dirección IP, cuya longitud es de 32 bites. La dirección IP identifica tanto a la red a la que pertenece una computadora como a ella misma dentro de dicha red.
Navegadores
Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, además de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software realmente habitual y muy utilizado actualmente.
Insistimos en que es algo que se usa con mucha frecuencia, ya que moverse por Internet es algo que hace la mayoría del público en los tiempos que corren. Sea para echar un vistazo al correo, para ojear una web de noticias o para entrar en YouTube, el navegador web suele ser el medio indicado para llevar a cabo dicha tarea, de ahí que esté tan presente y su uso esté tan normalizado.
Podemos encontrar muchos navegadores diferentes en la actualidad. Numerosas empresas como Google, Microsoft o incluso Mozilla se han lanzado a este terreno para llevar al público propuestas del estilo de Chrome o Internet Explorer, este último todo un nombre histórico en lo que a navegar por la red se refiere.
Una de las herramientas que más usamos en nuestro día a día, independientemente de que lo hagamos como usuarios domésticos o como profesionales. Sin los navegadores, consultar el contenido que ofrece y que amplía Internet a cada día que pasa sería una tarea prácticamente imposible. Son el vehículo que permite conectar nuestro dispositivo al entorno digital a través de una conexión a Internet.
Ejemplos:
-
Navegador web de opera.
En constante evolución y mejora, y con el navegador móvil más popular, Opera ha recorrido un largo camino desde ser un navegador hasta una suite de Internet completa. Navegador rápido y gratuito con buen soporte para actualizaciones.
-
Navegador web safari.
Es un navegador web desarrollado por Apple inc. Es el navegador más popular entre los usuarios de MAC. Safari es un navegador limpio, muy rápido basado en el motor de renderizado WebKit. Safari incluye las funciones que desea en un navegador moderno.
-
Google Chrome.
mejorado de las aplicaciones web. Cientos de extensiones útiles se pueden descargar e instalar de forma gratuita desde Chrome Store y se pueden usar para uso personal.
Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, además de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software realmente habitual y muy utilizado actualmente.
Insistimos en que es algo que se usa con mucha frecuencia, ya que moverse por Internet es algo que hace la mayoría del público en los tiempos que corren. Sea para echar un vistazo al correo, para ojear una web de noticias o para entrar en YouTube, el navegador web suele ser el medio indicado para llevar a cabo dicha tarea, de ahí que esté tan presente y su uso esté tan normalizado.
Podemos encontrar muchos navegadores diferentes en la actualidad. Numerosas empresas como Google, Microsoft o incluso Mozilla se han lanzado a este terreno para llevar al público propuestas del estilo de Chrome o Internet Explorer, este último todo un nombre histórico en lo que a navegar por la red se refiere.
Una de las herramientas que más usamos en nuestro día a día, independientemente de que lo hagamos como usuarios domésticos o como profesionales. Sin los navegadores, consultar el contenido que ofrece y que amplía Internet a cada día que pasa sería una tarea prácticamente imposible. Son el vehículo que permite conectar nuestro dispositivo al entorno digital a través de una conexión a Internet.
Ejemplos:
- Navegador web de opera.En constante evolución y mejora, y con el navegador móvil más popular, Opera ha recorrido un largo camino desde ser un navegador hasta una suite de Internet completa. Navegador rápido y gratuito con buen soporte para actualizaciones.
- Navegador web safari.Es un navegador web desarrollado por Apple inc. Es el navegador más popular entre los usuarios de MAC. Safari es un navegador limpio, muy rápido basado en el motor de renderizado WebKit. Safari incluye las funciones que desea en un navegador moderno.
- Google Chrome.mejorado de las aplicaciones web. Cientos de extensiones útiles se pueden descargar e instalar de forma gratuita desde Chrome Store y se pueden usar para uso personal.
¿Qué es una Hoja de estilo?
Una Hoja de estilo es un archivo que suele acompañar al fichero principal de cualquier página web, con la extensión css, y que se encarga de definir diferentes aspectos relacionados con el formato y el diseño de la web, estableciendo los parámetros que definen las etiquetas utilizadas en el código fuente de la misma.
Este fichero es donde se almacena información del estilo del tipo de fuente a utilizar, los colores, su tamaño, el espaciado entre párrafos, las dimensiones de los diferentes títulos y un larguísimo etcétera. Gracias a esto, los diseñadores y desarrolladores pueden dotar de un estilo unificado a todos los apartados y páginas de una web, consiguiendo una imagen homogénea y característica.
Una Hoja de estilo es un archivo que suele acompañar al fichero principal de cualquier página web, con la extensión css, y que se encarga de definir diferentes aspectos relacionados con el formato y el diseño de la web, estableciendo los parámetros que definen las etiquetas utilizadas en el código fuente de la misma.
Este fichero es donde se almacena información del estilo del tipo de fuente a utilizar, los colores, su tamaño, el espaciado entre párrafos, las dimensiones de los diferentes títulos y un larguísimo etcétera. Gracias a esto, los diseñadores y desarrolladores pueden dotar de un estilo unificado a todos los apartados y páginas de una web, consiguiendo una imagen homogénea y característica.
Para qué sirve una Hoja de estilos
Una Hoja de estilos sirve para dar coherencia al diseño de una web y mantener un estilo uniforme y homogéneo, sin secciones que usen fuentes distintas ni nada que rompa con la imagen que se desea transmitir al visitante. Esta unicidad resulta cómoda y atractiva estéticamente para cualquier usuario, lo que permite que permanezca más tiempo en la web.
Ejemplos de Hoja de estilos
Hay tantos Ejemplos de Hoja de estilos como web abiertas en Internet, por lo tanto, no es difícil dar con casos que ilustren el concepto del que hablamos. No obstante, vamos a hacer las cosas algo más sencillas con el siguiente post, en el que se muestra cómo es este fichero de forma bastante gráfica y representativa: desgranando una hoja de estilo.
Hay tantos Ejemplos de Hoja de estilos como web abiertas en Internet, por lo tanto, no es difícil dar con casos que ilustren el concepto del que hablamos. No obstante, vamos a hacer las cosas algo más sencillas con el siguiente post, en el que se muestra cómo es este fichero de forma bastante gráfica y representativa: desgranando una hoja de estilo.
¿Qué es una tabla o plantilla?
Una plantilla es un documento que contiene estilos de formato específicos, imágenes, tablas, objetos y cualquier otra información. Una plantilla se usa como base para crear otros documentos. Por ejemplo, puede definir estilos de párrafo y de carácter en un documento, guardarlo como plantilla y usarlo para crear un nuevo documento con los mismos estilos.
Si no lo especifica de otro modo, todos los documentos de texto nuevos de LibreOffice se basará en la plantilla predeterminada.
LibreOffice tiene un número de plantillas predefinidas que puede usar para crear tipos diferentes o documentos de texto, como las cartas comerciales.
Como personalizar tu plantilla:
Puede personalizar la apariencia de las tablas de planificación de paneles. Puede especificar la configuración de apariencia general, así como la información del circuito y el resumen de cargas.
- Haga clic en la ficha Gestionar
Plantillas de tabla de planificación de paneles 
Editar una plantilla.
- En el cuadro de diálogo Editar una plantilla, en Plantillas, especifique una plantilla y haga clic en Abrir.
- En la ficha Modificar plantilla de tabla de planificación de paneles, haga clic en Definir opciones de plantilla.
- Defina las opciones de plantilla de las siguientes categorías según sea necesario.
Una plantilla es un documento que contiene estilos de formato específicos, imágenes, tablas, objetos y cualquier otra información. Una plantilla se usa como base para crear otros documentos. Por ejemplo, puede definir estilos de párrafo y de carácter en un documento, guardarlo como plantilla y usarlo para crear un nuevo documento con los mismos estilos.
Si no lo especifica de otro modo, todos los documentos de texto nuevos de LibreOffice se basará en la plantilla predeterminada.
LibreOffice tiene un número de plantillas predefinidas que puede usar para crear tipos diferentes o documentos de texto, como las cartas comerciales.
Como personalizar tu plantilla:
Puede personalizar la apariencia de las tablas de planificación de paneles. Puede especificar la configuración de apariencia general, así como la información del circuito y el resumen de cargas.
- Haga clic en la ficha GestionarPlantillas de tabla de planificación de paneles Editar una plantilla.
- En el cuadro de diálogo Editar una plantilla, en Plantillas, especifique una plantilla y haga clic en Abrir.
- En la ficha Modificar plantilla de tabla de planificación de paneles, haga clic en Definir opciones de plantilla.
- Defina las opciones de plantilla de las siguientes categorías según sea necesario.
¿Qué son marcos (o frame )?
Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes.
Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá. Vamos a ver un ejemplo de este tipo de documento:<HTML> <HEAD> <TITLE>Mi primera página con marcos</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAME NAME="principal" SRC="introduccion.html"> <NOFRAMES> <P>Lo siento, pero sólo podrás ver esta página si tu navegador tiene la capacidad de visualizar marcos.</P> </NOFRAMES> </FRAMESET> </HTML>
Vamos a explicar detalladamente este ejemplo antes de investigar algo más a fondo cada una de las etiquetas. Vemos que la cabecera de la página es similar a un documento normal, pero el habitual BODY es sustituido por un FRAMESET. En cadaFRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas definidas o por el parámetro COLS o por ROWS. En éste, separado por comas, se define el número de marcos y el tamaño de cada uno.
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos poniendoles un nombre y especificando qué fichero HTML le corresponde mediante la etiqueta <FRAME>. Por último, especificamos lo que verá el usuario en el supuesto (cada vez más raro) de que su navegador no soporte frames dentro de la etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes.
Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá. Vamos a ver un ejemplo de este tipo de documento:<HTML> <HEAD> <TITLE>Mi primera página con marcos</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAME NAME="principal" SRC="introduccion.html"> <NOFRAMES> <P>Lo siento, pero sólo podrás ver esta página si tu navegador tiene la capacidad de visualizar marcos.</P> </NOFRAMES> </FRAMESET> </HTML>
Vamos a explicar detalladamente este ejemplo antes de investigar algo más a fondo cada una de las etiquetas. Vemos que la cabecera de la página es similar a un documento normal, pero el habitual BODY es sustituido por un FRAMESET. En cadaFRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas definidas o por el parámetro COLS o por ROWS. En éste, separado por comas, se define el número de marcos y el tamaño de cada uno.
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos poniendoles un nombre y especificando qué fichero HTML le corresponde mediante la etiqueta <FRAME>. Por último, especificamos lo que verá el usuario en el supuesto (cada vez más raro) de que su navegador no soporte frames dentro de la etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
Etiqueta <FRAMESET>
Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada marco, pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un par de parámetros más.
En general, los navegadores dibujan un borde de separación entre los marcos. Si deseas eliminarlo puedes hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el <FRAMESET>.
Cuando eliminas ese borde, podrás ver cómo el navegador deja aún un hueco entre marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0.
Vamos a examinar por último los parámetros COLS y ROWS. Deberemos asignarles una lista de tamaños separada por comas. Se admiten los siguientes formatos de tamaño:
Con porcentajes: Al igual que con las tablas, podemos definir el tamaño de un marco como un porcentaje del espacio total disponible.
Absolutos: Si ponemos un número a secas, el marco correspondiente tendrá el tamaño especificado en pixels.
Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que queremos todo el espacio sobrante para ese marco. Podemos poner este símbolo en varios marcos, que se repartirán el espacio equitativamente como buenos hermanos. Si queremos que uno tenga más deberemos ponerle al asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que su compañero, que tiene un asterisco sólo, el pobre.
Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos:
<FRAMESET COLS="10%,*,200,2*">
Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupará el 10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este último y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definición de marcos; debemos asegurarnos de tener al menos un marco con un tamaño relativo si queremos estar seguros del aspecto final de la página.
Por último, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:<FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAMESET ROWS="*,80"> <FRAME NAME="principal" SRC="introduccion.html"> <FRAME NAME="ejemplos" SRC="ejemplo.html"> </FRAMESET> </FRAMESET>
Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada marco, pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un par de parámetros más.
En general, los navegadores dibujan un borde de separación entre los marcos. Si deseas eliminarlo puedes hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el <FRAMESET>.
Cuando eliminas ese borde, podrás ver cómo el navegador deja aún un hueco entre marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0.
Vamos a examinar por último los parámetros COLS y ROWS. Deberemos asignarles una lista de tamaños separada por comas. Se admiten los siguientes formatos de tamaño:
Con porcentajes: Al igual que con las tablas, podemos definir el tamaño de un marco como un porcentaje del espacio total disponible.
Absolutos: Si ponemos un número a secas, el marco correspondiente tendrá el tamaño especificado en pixels.
Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que queremos todo el espacio sobrante para ese marco. Podemos poner este símbolo en varios marcos, que se repartirán el espacio equitativamente como buenos hermanos. Si queremos que uno tenga más deberemos ponerle al asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que su compañero, que tiene un asterisco sólo, el pobre.
Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos:
<FRAMESET COLS="10%,*,200,2*">
Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupará el 10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este último y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definición de marcos; debemos asegurarnos de tener al menos un marco con un tamaño relativo si queremos estar seguros del aspecto final de la página.
Por último, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:<FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAMESET ROWS="*,80"> <FRAME NAME="principal" SRC="introduccion.html"> <FRAME NAME="ejemplos" SRC="ejemplo.html"> </FRAMESET> </FRAMESET>
Etiqueta <FRAME>
Esta etiqueta define tan sólo las características de un marco determinado, no de un conjunto de ellos. Estos son los parámetros que admite:
Parámetro Utilidad NAME Asigna un nombre a un marco para que después podamos referirnos a él. SRC Indica la dirección del documento HTML que ocupará el marco. SCROLLING Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defectoAUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO. NORESIZE Si lo especificamos el usuario no podrá cambiar de tamaño el marco. FRAMEBORDER Al igual que su homónimo en la etiqueta <FRAMESET>, si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. MARGINWIDTH Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels. MARGINHEIGHT Igual al anterior pero con márgenes verticales.
Esta etiqueta define tan sólo las características de un marco determinado, no de un conjunto de ellos. Estos son los parámetros que admite:
| Parámetro | Utilidad |
|---|---|
| NAME | Asigna un nombre a un marco para que después podamos referirnos a él. |
| SRC | Indica la dirección del documento HTML que ocupará el marco. |
| SCROLLING | Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defectoAUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO. |
| NORESIZE | Si lo especificamos el usuario no podrá cambiar de tamaño el marco. |
| FRAMEBORDER | Al igual que su homónimo en la etiqueta <FRAMESET>, si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. |
| MARGINWIDTH | Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels. |
| MARGINHEIGHT | Igual al anterior pero con márgenes verticales. |
Acceso a otros marcos
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva página a la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que no sirve de índice y otro donde mostramos los contenidos sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible hacerlo gracias al parámetro TARGET.
Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces.
Pero para que un parámetro funcione, es habitual que le asignemos un valor, y TARGET no es una excepción. Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se abra en el marco principalpondremos:
<A HREF="pagina.html" TARGET="principal">
También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:_topElimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos._blankMuestra la nueva página en una ventana nueva y sin nombre del navegador._selfMuestra la nueva página en el marco donde está declarado el enlace._parentMuestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva página a la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que no sirve de índice y otro donde mostramos los contenidos sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible hacerlo gracias al parámetro TARGET.
Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces.
Pero para que un parámetro funcione, es habitual que le asignemos un valor, y TARGET no es una excepción. Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se abra en el marco principalpondremos:
<A HREF="pagina.html" TARGET="principal">
También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:_topElimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos._blankMuestra la nueva página en una ventana nueva y sin nombre del navegador._selfMuestra la nueva página en el marco donde está declarado el enlace._parentMuestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.
¿Qué es software de edición de sitios web?
Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.
Tipos de software para editar páginas web:
Los editores no son más que aplicaciones que permiten, que puedas crear y modificar archivos o documentos en HTML o XHTML.
Existen dos tipos de software para editar páginas web, estos son los editores visuales de HTML o también conocidos como WYSIWYG (Hacen referencia a what you see is what you get) de sus siglas en inglés al español sería: lo que observas es lo que tienes.
- Software para editar páginas webtipo visual o WYSIWYG:
Algunos editores son muy conocidos y reconocidos, se emplean en sistemas de Windows y Linux, son de fácil uso aunque hay personas que no les agradan.
Estos programas permiten editar y crear archivos en HTML, PHP entre otros que sean requeridos.
Entre los muchos beneficios de estos editores gráficos se encuentran el fácil manejo, la comprobación del código, la previsualización de la página y manuales de uso que pueden resolverte todo tipo de dudas.
Para quienes no están muy familiarizados con los códigos de edición de páginas, el editor gráfico actúa como una plantilla de programa fácil, dónde solo basta rellenarla con la información y las imágenes necesarias.
Todo lo que construyas o modifiques la aplicación automáticamente lo convertirá en lenguaje HTML.
- Software para editar páginas webtipo texto:
A diferencia del software de edición visual, en el cual no requieres muchos conocimientos de HTML para lograr modificar o editar tu página web, el editor de texto si lo requiere.
Al igual que el visual, cuenta con dos formas de hacerlo, una en Windows y la otra en Linux. Es importante saber sobre códigos, ya que todo lo haces sin imágenes y sin plantilla de relleno que sirva.
Lo que hagas, tampoco será guardado como HTML de forma instantánea, es tu deber crear todo desde los códigos fuente.
Existe una tercera opción totalmente diferente de estas dos, esta opción es para que la tengas en cuenta si ninguno de los editores te convence o no tienes tiempo que dedicarle a estos programas.
Esta opción consta de unas plantillas o templates que puedes encontrar en la web. Estos templates te permiten crear tu página a base de plantillas de relleno, sin necesidad de saber nada de códigos.
Si al final te aburres de los templates porque tienen el mismo diseño compartido con otros sitios, debes entonces emplear los editores mencionados.
Que es dominio de interned
Extensión o dominio de Internet es un nombre único que identifica a un sitio web en Internet.
El propósito principal de los nombres de dominio en Internet y del sistema de nombres de dominio (DNS), es traducir las direcciones IP de cada activo en la red, a términos memorizables y fáciles de encontrar. Esta abstracción hace posible que cualquier servicio (de red) pueda moverse de un lugar geográfico a otro en la Internet, aún cuando el cambio implique que tendrá una dirección IP diferente.[1]
Sin la ayuda del sistema de nombres de dominio, los usuarios de Internet tendrían que acceder a cada servicio web utilizando la
¿Que son soluciones web?
Estas soluciones son un conjunto de servicios destinados a proporcionar una alta visibilidad en internet, un diseño atractivo, sencilla navegabilidad, una alta conversión visita-cliente y accesibilidad desde dispositivos móviles. Y es que nuestro desarrollo web a través del CMS permite gestionar con facilidad cualquier cambio necesario para su sitio. Dichos cambios consisten en modificar sus imágenes, cambiar o añadir textos, estructurar de forma más clara el diseño web para facilitar la navegación y crear nuevos apartados o servicios que ofrecer a sus clientes y hasta incluir enlaces.
Nos encargamos de todos los procesos relativos al desarrollo web, incluyendo la imagen corporativa, ya que nos gusta tener una relación estrecha con nuestros clientes para mostrar así todo el potencial de su negocio en la red. La solución web integral que le ofrecemos está preparada y adaptada para los principales motores de búsqueda: Google, Yahoo y Bing, con el fin de beneficiar el posicionamiento natural en buscadores.
En lo que se refiere a Social Media, hacemos conexiones en las redes sociales de Twitter, Facebook, LinkedIn y Google creando enlaces directos desde su propia Web, para que así tengan un fácil acceso los clientes. En las redes sociales volcaremos toda su historia y servicios detalladamente, teniendo una imagen y usabilidad acorde con su negocio. Si lo desean, también podremos gestionarles la captación y fidelización de los clientes (Social Media).
Tenemos los certificados aprobados del W3C XHTML y CSS, creemos que nuestras soluciones web son la opción correcta para cualquier tipo de negocio que quiera llegar a los clientes nuevos y existentes, con un paquete de usabilidad muy fácil. En nuestra empresa de SEO Valencia creemos que una buena imagen en la red, a parte de un buen posicionamiento en Google, es un requisito muy importante para rentabilizar los negocios en la red. Además de agencia SEO en Valencia actuamos también en las provincias de Alicante, Castellón, Barcelona, Madrid, Zaragoza, Murcia y Albacete
Por ello realizamos un diseño web profesional y corporativo, y pretendemos ayudarle a conocer perfectamente su negocio ya que así podremos ofrecerles soluciones y un excelente marketing online. Estamos convencidos que le ayudaremos a realizar el mejor marketing online para ayudarle a llegar a su público y juntos hacer más rentable su negocio e inversión.
Que es una pagina diguital
Una plataforma digital es un lugar de Internet que sirve para almacenar diferentes tipos de información tanto personal como nivel de negocios. Estas plataformas funcionan con determinados tipos de sistemas operativos y ejecutan programas o aplicaciones con diferentes contenidos, como pueden ser juegos, imágenes, texto, cálculos, simulaciones y vídeo, entre otros.[1]
Las plataformas digitales también se pueden concebir como sistemas que pueden ser programados y personalizados por desarrolladores externos, como los usuarios, y de esta forma puede ser adaptado a innumerables necesidades y asuntos que ni siquiera los creadores de la plataforma original habían contemplado.[2]
¿Que es publicación?
La publicación (del latín publicare ‘hacer público’), en el origen designa la acción que consiste en llevar cierta información al conocimiento del público, o sea, «a publicarla». De esta manera, se hace usual decir que se publica una ley, o las cifras de desocupados, o los resultados del balance de una organización.
Por extensión, el término también adquirió el sentido de impresión, o sea de aparición o de puesta en venta de una obra impresa (periódico, libro, etcétera). En el lenguaje corriente, se le da el nombre de publicación a la obra efectivamente publicada (libro, artículo, revista, documento). También se habla de publicaciones científicas, de publicaciones clandestinas, de publicaciones especializadas, etcétera.
En el aspecto histórico, corresponde señalar la figura del pregonero, oficial público que en alta voz daba difusión a los pregones, para hacer público y notorio todo lo que se quería hacer saber a la población.
En fin, en un sentido más moderno, la publicación igualmente designa la puesta a disposición de datos o de informaciones o de documentos en un entorno informático, en particular registrando los mismos en un determinado banco de datos en Internet o en alguna otra red (publicación en línea, publicación electrónica, publicación digital).
El término también puede ser sinónimo de edición de documentos, como por ejemplo al decir «publicación asistida por ordenador» (o PAO).
Que es animación en 2d
2D" es sinónimo de "dos dimensiones". Las formas 2D incluyen cuadrados y círculos. "3D" significa tridimensional. Las formas 3D tienen profundidad, e incluyen cubos y esferas. Estos términos son importantes en el arte y el diseño —en la animación por computadora o el cine, por ejemplo. Los gráficos, diagramas y modelos pueden ser 2D o 3D. Estos términos también se usan metafóricamente para hablar de la profundidad o complejidad de una pieza de trabajo.
Que es animacion en 3d
Una imagen 3D es un objeto especial que actúa como un gráfico "sprite". Para crearla, el programa mapea una imagen 2D en una superficie vertical. Gracias a esta técnica denominada "billboarding" (valla publicitaria), la imagen siempre mira a la cámara. Sustituir un objeto 3D por un "sprite" acelera el funcionamiento del motor de procesamiento 3D en tiempo real. También puede utilizar imágenes 3D en lugar de objetos lejanos o de escasa importancia.
Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.
Tipos de software para editar páginas web:
Los editores no son más que aplicaciones que permiten, que puedas crear y modificar archivos o documentos en HTML o XHTML.
Existen dos tipos de software para editar páginas web, estos son los editores visuales de HTML o también conocidos como WYSIWYG (Hacen referencia a what you see is what you get) de sus siglas en inglés al español sería: lo que observas es lo que tienes.
- Software para editar páginas webtipo visual o WYSIWYG:
Algunos editores son muy conocidos y reconocidos, se emplean en sistemas de Windows y Linux, son de fácil uso aunque hay personas que no les agradan.
Estos programas permiten editar y crear archivos en HTML, PHP entre otros que sean requeridos.
Entre los muchos beneficios de estos editores gráficos se encuentran el fácil manejo, la comprobación del código, la previsualización de la página y manuales de uso que pueden resolverte todo tipo de dudas.
Para quienes no están muy familiarizados con los códigos de edición de páginas, el editor gráfico actúa como una plantilla de programa fácil, dónde solo basta rellenarla con la información y las imágenes necesarias.
Todo lo que construyas o modifiques la aplicación automáticamente lo convertirá en lenguaje HTML.
- Software para editar páginas webtipo texto:
A diferencia del software de edición visual, en el cual no requieres muchos conocimientos de HTML para lograr modificar o editar tu página web, el editor de texto si lo requiere.
Al igual que el visual, cuenta con dos formas de hacerlo, una en Windows y la otra en Linux. Es importante saber sobre códigos, ya que todo lo haces sin imágenes y sin plantilla de relleno que sirva.
Lo que hagas, tampoco será guardado como HTML de forma instantánea, es tu deber crear todo desde los códigos fuente.
Existe una tercera opción totalmente diferente de estas dos, esta opción es para que la tengas en cuenta si ninguno de los editores te convence o no tienes tiempo que dedicarle a estos programas.
Esta opción consta de unas plantillas o templates que puedes encontrar en la web. Estos templates te permiten crear tu página a base de plantillas de relleno, sin necesidad de saber nada de códigos.
Si al final te aburres de los templates porque tienen el mismo diseño compartido con otros sitios, debes entonces emplear los editores mencionados.
Que es dominio de interned
Extensión o dominio de Internet es un nombre único que identifica a un sitio web en Internet.
El propósito principal de los nombres de dominio en Internet y del sistema de nombres de dominio (DNS), es traducir las direcciones IP de cada activo en la red, a términos memorizables y fáciles de encontrar. Esta abstracción hace posible que cualquier servicio (de red) pueda moverse de un lugar geográfico a otro en la Internet, aún cuando el cambio implique que tendrá una dirección IP diferente.[1]
Sin la ayuda del sistema de nombres de dominio, los usuarios de Internet tendrían que acceder a cada servicio web utilizando la
¿Que son soluciones web?
Estas soluciones son un conjunto de servicios destinados a proporcionar una alta visibilidad en internet, un diseño atractivo, sencilla navegabilidad, una alta conversión visita-cliente y accesibilidad desde dispositivos móviles. Y es que nuestro desarrollo web a través del CMS permite gestionar con facilidad cualquier cambio necesario para su sitio. Dichos cambios consisten en modificar sus imágenes, cambiar o añadir textos, estructurar de forma más clara el diseño web para facilitar la navegación y crear nuevos apartados o servicios que ofrecer a sus clientes y hasta incluir enlaces.
Nos encargamos de todos los procesos relativos al desarrollo web, incluyendo la imagen corporativa, ya que nos gusta tener una relación estrecha con nuestros clientes para mostrar así todo el potencial de su negocio en la red. La solución web integral que le ofrecemos está preparada y adaptada para los principales motores de búsqueda: Google, Yahoo y Bing, con el fin de beneficiar el posicionamiento natural en buscadores.
En lo que se refiere a Social Media, hacemos conexiones en las redes sociales de Twitter, Facebook, LinkedIn y Google creando enlaces directos desde su propia Web, para que así tengan un fácil acceso los clientes. En las redes sociales volcaremos toda su historia y servicios detalladamente, teniendo una imagen y usabilidad acorde con su negocio. Si lo desean, también podremos gestionarles la captación y fidelización de los clientes (Social Media).
Tenemos los certificados aprobados del W3C XHTML y CSS, creemos que nuestras soluciones web son la opción correcta para cualquier tipo de negocio que quiera llegar a los clientes nuevos y existentes, con un paquete de usabilidad muy fácil. En nuestra empresa de SEO Valencia creemos que una buena imagen en la red, a parte de un buen posicionamiento en Google, es un requisito muy importante para rentabilizar los negocios en la red. Además de agencia SEO en Valencia actuamos también en las provincias de Alicante, Castellón, Barcelona, Madrid, Zaragoza, Murcia y Albacete
Por ello realizamos un diseño web profesional y corporativo, y pretendemos ayudarle a conocer perfectamente su negocio ya que así podremos ofrecerles soluciones y un excelente marketing online. Estamos convencidos que le ayudaremos a realizar el mejor marketing online para ayudarle a llegar a su público y juntos hacer más rentable su negocio e inversión.
Una plataforma digital es un lugar de Internet que sirve para almacenar diferentes tipos de información tanto personal como nivel de negocios. Estas plataformas funcionan con determinados tipos de sistemas operativos y ejecutan programas o aplicaciones con diferentes contenidos, como pueden ser juegos, imágenes, texto, cálculos, simulaciones y vídeo, entre otros.[1]
Las plataformas digitales también se pueden concebir como sistemas que pueden ser programados y personalizados por desarrolladores externos, como los usuarios, y de esta forma puede ser adaptado a innumerables necesidades y asuntos que ni siquiera los creadores de la plataforma original habían contemplado.[2]
¿Que es publicación?
La publicación (del latín publicare ‘hacer público’), en el origen designa la acción que consiste en llevar cierta información al conocimiento del público, o sea, «a publicarla». De esta manera, se hace usual decir que se publica una ley, o las cifras de desocupados, o los resultados del balance de una organización.
Por extensión, el término también adquirió el sentido de impresión, o sea de aparición o de puesta en venta de una obra impresa (periódico, libro, etcétera). En el lenguaje corriente, se le da el nombre de publicación a la obra efectivamente publicada (libro, artículo, revista, documento). También se habla de publicaciones científicas, de publicaciones clandestinas, de publicaciones especializadas, etcétera.
En el aspecto histórico, corresponde señalar la figura del pregonero, oficial público que en alta voz daba difusión a los pregones, para hacer público y notorio todo lo que se quería hacer saber a la población.
En fin, en un sentido más moderno, la publicación igualmente designa la puesta a disposición de datos o de informaciones o de documentos en un entorno informático, en particular registrando los mismos en un determinado banco de datos en Internet o en alguna otra red (publicación en línea, publicación electrónica, publicación digital).
El término también puede ser sinónimo de edición de documentos, como por ejemplo al decir «publicación asistida por ordenador» (o PAO).
Que es animación en 2d
2D" es sinónimo de "dos dimensiones". Las formas 2D incluyen cuadrados y círculos. "3D" significa tridimensional. Las formas 3D tienen profundidad, e incluyen cubos y esferas. Estos términos son importantes en el arte y el diseño —en la animación por computadora o el cine, por ejemplo. Los gráficos, diagramas y modelos pueden ser 2D o 3D. Estos términos también se usan metafóricamente para hablar de la profundidad o complejidad de una pieza de trabajo.
Que es animacion en 3d
Una imagen 3D es un objeto especial que actúa como un gráfico "sprite". Para crearla, el programa mapea una imagen 2D en una superficie vertical. Gracias a esta técnica denominada "billboarding" (valla publicitaria), la imagen siempre mira a la cámara. Sustituir un objeto 3D por un "sprite" acelera el funcionamiento del motor de procesamiento 3D en tiempo real. También puede utilizar imágenes 3D en lugar de objetos lejanos o de escasa importancia.
Agregar y eliminar imágenes 3D
Para agregar una imagen 3D, toque el botón Importar de la barra de la aplicación y elija el comando Desde archivo… (versión Pro) o Importar imagen… (versión gratis). A continuación seleccione un archivo gráfico y elija la opción Imagen 3D cuando se le pregunte.
Para eliminar una imagen 3D, abra su menú contextual y elija el comando Eliminar.
Para agregar una imagen 3D, toque el botón Importar de la barra de la aplicación y elija el comando Desde archivo… (versión Pro) o Importar imagen… (versión gratis). A continuación seleccione un archivo gráfico y elija la opción Imagen 3D cuando se le pregunte.
Para eliminar una imagen 3D, abra su menú contextual y elija el comando Eliminar.
Parámetros de las imágenes 3D
La mayoría de los parámetros de las imágenes 3D pueden modificarse en la ventana del Inspector.
1 y 2 – Anchura y altura de la imagen 3D, con la opción de bloquearlas.
3 – Mantener la proporción al cambiar el tamaño.
4 – Restaurar tamaño original del objeto.
5 – Elevación de la imagen 3D, con la opción de bloquearla.
6 – La propiedad Pegar por sirve para indicar si un objeto debe acoplarse al suelo o al techo.
7 – Abra el cuadro de diálogo Tipo y representación. Las imágenes en 3D solo permiten modificar la representación en 2D y las acotaciones.
La mayoría de los parámetros de las imágenes 3D pueden modificarse en la ventana del Inspector.
1 y 2 – Anchura y altura de la imagen 3D, con la opción de bloquearlas.
3 – Mantener la proporción al cambiar el tamaño.
4 – Restaurar tamaño original del objeto.
5 – Elevación de la imagen 3D, con la opción de bloquearla.
6 – La propiedad Pegar por sirve para indicar si un objeto debe acoplarse al suelo o al techo.
7 – Abra el cuadro de diálogo Tipo y representación. Las imágenes en 3D solo permiten modificar la representación en 2D y las acotaciones.
No hay comentarios:
Publicar un comentario