sábado, 4 de agosto de 2018
DISEÑO WEB O DISEÑO GRAFICO
El
diseño web es una actividad que consiste en la planificación, diseño,
implementación y mantenimiento de sitios web. No es simplemente la
implementación del diseño convencional ya que se abarcan diferentes aspectos
como el diseño gráfico web, diseño de interfaz y experiencia de usuario, como
la navegabilidad, interactividad, usabilidad, arquitectura de la información;
interacción de medios, entre los que podemos mencionar audio, texto, imagen,
enlaces, video y la optimización de motores de búsqueda. A menudo muchas
personas trabajan en equipos que cubren los diferentes aspectos del proceso de
diseño, aunque existen algunos diseñadores independientes que trabajan solos.
La
unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta
la eficiencia de la web como canal de comunicación e intercambio de datos, que
brinda posibilidades como el contacto directo entre el productor y el
consumidor de contenidos.
El
diseño web ha visto amplia aplicación en los sectores comerciales de Internet
especialmente en la World Wide Web. A menudo la web se utiliza como medio de
expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet
un medio más para ofrecer sus producciones y utilizarlas como un canal más de
difusión de su obra.
DISEÑO WEB APLICADO
El
diseño de páginas web es la construcción de documentos de hipertexto para su
visualización en diferentes navegadores. Así como asignarle una presentación
para diferentes dispositivos de salida (en una pantalla de computador, en
papel, en un teléfono móvil, etc).
Estos
documentos o páginas web pueden ser creadas:
1. Creando archivos de texto en HTML, Asp, Aspx,
JavaScript, JSP, Python, Ruby.
2. Utilizando un programa visual WYSIWYG o WYSIWYM de
creación de páginas.
3. Utilizando Script del lado del servidor, para generar
la página web.
ETAPAS
Para
el diseño de páginas web debemos tener en cuenta tres etapas:
1. El diseño visual de la información que se desea
editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los
vínculos a otros documentos y otros objetos multimedia que se consideren
pertinentes. Es importante que antes de 'escribir' la página web se realice un
boceto o prediseño. Esto facilitará tener un orden claro sobre el diseño.
2. Estructura y relación jerárquica de las páginas del
sitio web. Para esto, y fundamentalmente para manejar los vínculos entre
documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces
que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de
hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con
información relacionada. La importancia de la estructura y arborescencia web
radica en que los usuarios no siempre entran por la página principal o inicial
y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además
permitirle navegar por el sitio.
La estructura básica de una
página web es la siguiente:
<html> // Comienzo de la pagina
<head><tittle></tittle></head> // Encabezado y titulo de la pagina
<body> // Inicio del cuerpo donde iran todo el contenido imagenes objetos audio etc...
</body> // Fin del cuerpo
</html> // Fin de la pagina
Posicionamiento
en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido
para mejorar la posición en que aparece la página en determinada búsqueda.
El
HTML consta de una serie de elementos que estructuran el texto y son
presentados en forma de hipertexto por agente de usuario o navegadores. Esto se
puede hacer con un simple editor de textos (debe guardarse como texto plano,
sin ningún tipo de formato y con extensión .html o .htm). Aprender HTML es
relativamente fácil, así que es sencillo crear páginas web de este modo. Esta
era la única manera de generarlas hasta que aparecieron, a mediados de 1996,
algunos editores visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con
estas herramientas no es necesario aprender HTML (aunque sí aconsejable), con
lo cual el desarrollador se concentra en lo más importante, el diseño del
documento.
FUNDAMENTOS
El
diseño web implica conocer cómo se deben utilizar cada uno de los elementos
permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro
de los estándares establecidos por la W3C y en lo referente a la web semántica.
Debido a la permisibilidad de algunos navegadores web como Internet Explorer,
esta premisa original se ha perdido. Por ejemplo, este navegador permite que no
sea necesario cerrar las etiquetas del marcado, utiliza código propietario,
etc. Esto impide que ese documento web sea universal e independiente del medio
que se utilice para ser mostrado.
La
web semántica, por otra parte, aboga por un uso lógico de los elementos según
el significado para el que fueron concebidas. Por ejemplo se utilizará el
elemento <P> para marcar párrafos, y <TABLE> para tabular datos
(nunca para disponer de manera visual los diferentes elementos del documento).
En su última instancia, esto ha supuesto una auténtica revolución en el diseño
web puesto que apuesta por separar totalmente el contenido del documento de la
visualización.
De
esta forma se utiliza el documento HTML únicamente para contener, organizar y
estructurar la información y las hojas de estilo CSS para indicar como se
mostrará dicha información en los diferentes medios (como por ejemplo, una
monitor de computadora, un teléfono móvil, impreso en papel, leída por un
sintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente
la accesibilidad del documento.
También
existen páginas dinámicas, las cuales permiten interacción entre la web y el
visitante, proporcionándole herramientas tales como buscadores, chat, foros,
sistemas de encuestas, etc. y poseen de un panel de control de administración
de contenidos. Este permite crear, actualizar y administrar cantidades
ilimitadas de contenido en la misma.
PARTES DE UNA PAGINA WEB
PARTES DE UNA PAGINA WEB
Una
estructura HTML se empieza con la etiqueta <html> y acaba con
</html>. Todo lo que esté en medio será la página web. Dentro de
<html></html> se encuentran 2 partes diferenciadas.La primera
<head></head> es la cabecera de la página. Aquí irán cierta
información que no es directamente el contenido de la página. Aquí se pone el
título de la página, los metadatos, estilos, código javascript (todo esto se
estudiará en capítulos venideros). La primera que se suele estudiar es
<title></title>, que indica el título de la página (lo que el
navegador pone en la parte superior izquierda).
La
segunda parte es <body></body>. Aquí va propiamente el contenido de
la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el
ejemplo de la página anterior, el siguiente código, podemos cambiar el título
de la página.
<html>
<head>
<title>Esto
es el título de la página.</title>
</head>
<body>
Hola mundo!<br>
<b>Esto
es negrita.</b><br>
<i>Y esto
itálica.</i><br>
</body>
</html>
Para
verlo, puedes ver el código fuente de esta misma página. Para eso, haz clic en
el botón derecho => ver código fuente, y verás así el código HTML de la
página:
Observad
el título en la parte superior izquierda de la página. Además, dentro de
<body></body> distinguimos varias etiquetas:
<br>
=> Indica salto de línea. En HTML un salto de línea normal (púlsando la
tecla Enter) no produce un salto de línea en el resultado. Es necesario
escribir <br> (u otra etiqueta similar).
<b></b>
=> Indica comienzo y fin de negrita.
<i></b>
=> Itálica.
También
observamos el código &iaacute; => Esto indica que queremos poner una “i”
con acento, es decir, “í”. Esto se explicará en un capítulo posterior.
Es
importante mencionar que las etiquetas se pueden escribir indistintamente en
mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y
<B>Esto es negrita.</B> produce el mismo resultado. Por otro lado,
toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe
cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador
podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que
no lo necesitan, como <br> o <hr>.
Puede interesarte este video donde mostramos un mensaje de alerta en nuestra paginas a los usuarios que la visiten y añadir un objeto GIF que mantenga su posición.
Puede interesarte este video donde mostramos un mensaje de alerta en nuestra paginas a los usuarios que la visiten y añadir un objeto GIF que mantenga su posición.
LAS TABLAS
Estas nos ayudan a mostrar información mas detalladamente la estructura
Te puede interesar este vídeo sobre como descargar e instalar brackets un excelente editor de código HTML para diseño de paginas web.
Te puede interesar este vídeo sobre como descargar e instalar brackets un excelente editor de código HTML para diseño de paginas web.
SISTEMAS OPERATIVOS
En el mundo de la informática se denomina sistema operativo al programa, o conjunto de ellos, que gestiona los recursos físicos de un si...
ES UN BLOGGERS MUY INTERESANTE ATRACTIVO VISUALMENTE Y CUENTA CON UNA BUENA SECCIÓN DE INFORMACIÓN BASTANTE RELEVANTE Y MUY INTERESANTE
ResponderEliminar