1.2 ARQUITECTURA DE LAS APLICACIONES WEB
Para empezar debemos tener en claro que es una aplicación web, esta es una base de programas que funcionan en internet, ya que con los datos y archivos que trabajamos son procesados y almacenados dentro de la web. Esta definición se relaciona con el almacenamiento en la nube ya que la información que manejamos se guarda de manera permanente en servidores que envian a nuestros dispositivos la información que pedimos en el momento dejando una copia temporal en nuestro equipo.
Y ahora explicaremos como es la arquitectura de una aplicación web, dicha arquitectura tiene tres componentes que son: un servidor web, conexión a red y los clientes.
- Lógica de negocio: esta es la parte más importante de la aplicación ya que define los procesos que estaran en ella y todas las operaciones que se necesitan para obtener el servicio.
- Administración de los datos: es la parte encargada de todo el manejo de la información.
- Interfaz: a traves de ella los usuarios acceden desde sus dispositivos y diferentes navegadores, esta también puede ser manipulada por la aplicación y con ella podemos acceder más fácil a la información.
Ya que identificamos el sistema
operativo, ahora identificar las fases que lleva la web, las cuales son las
siguientes:
- Diseñó
- Maquetación HTML/ CSS
- Programación cliente
- Programación servicios
- Depuración
- Subir ficheros al hosting
- Pruebas hosting
Y pues esto fue la parte de fases,
pero ahora falta la parte de herramientas de php en sus diferentes partes de
diseñó y de la implementación:
- Adobe PhotoShop
- GIMP
- Inkscape
- Adobe Fireworks
- Dreameweaver, Aptana, Amaya
Y pues esta son las herramientas tanto como las fases de las aplicaciones.
El diseño y desarrollo de sitios web y aplicaciones online conlleva la elección y el conocimiento de las tecnologías que se decidan emplear, con el objetivo de favorecer su implementación y garantizar un mantenimiento.
La planificación es una parte importante de las
aplicaciones web ya que con ella se esclarecen las dudas que se tienen, así
como los objetivos y metas a las que se quieren alcanzar.
Para poder planificar una aplicación web es importante definir, pensar y tener bien en cuenta algunos puntos importantes como:
- Planificar el futuro.
- Documentar.
- Diseño de la interfaz.
- Tener un plan del proyecto.
- Elegir lenguaje adecuado.
- Seguir un
control de calidad.
- Briefing: en esta etapa se presentan las necesidades que tienen los clientes, lo que quiere decir que el cliente cuenta al desarrollador que es lo que necesita, para cuándo y sus expectativas, así como se platica sobre el presupuesto con en el que cuenta.
- Cronograma: esta es una herramienta que sirve de mucha ayuda debido a que en ella se registran las actividades en forma de etapas, en las cuales se pueden establecer fechas de plazo de entrega las cuales tiene que ser realistas.
- Benchmarking: aquí es donde se pone en marcha una vez realizado el briefing y el cronograma ya que una vez conocidas las necesidades del cliente se da a la tarea de investigar las competencias que hay en el mercado y la forma en que los usuarios reaccionarían.
- Planificación: en esta etapa se organiza cada una de las actividades que se van a realizar como lo son crear un prototipo, plantear como será la experiencia del usuario, se pueden realizar mapas si es necesario y se resuelven las dudas que se tengan.
- Desarrollo: luego de hacer los prototipos, resolver dudas, tener el cronograma y saber las necesidades del usuario se empieza a diseñar y programar el sitio web.
- Pruebas: una vez terminado el proyecto web se empiezan a realizar pruebas para saber si existen errores, en donde y poder corregirlos.
- Publicación y mantenimiento: esta parte hace mas referencia a que una vez terminada y entregada la aplicación web al cliente no se deje de dar mantenimiento y se siga actualizando.
Gracias a la planificación es más fácil realizar, visualizar, organizar y saber administrar los tiempos en los que se realizaran las aplicaciones.
XML es además un lenguaje muy potente, ya que a partir de él se pueden definir múltiples lenguajes, para cualquer ámbito de aplicaciones. Por decirlo de alguna manera, es un metalenguaje.
CSS se
ideó para aplicar el formato en las páginas, de una manera mucho más detallada,
con nuevas posibilidades que no estaban al alcance de HTML. Al mismo tiempo,
gracias a la posibilidad de aplicar el estilo de manera externa al propio
documento HTML, se consiguió que el mantenimiento de las páginas fuese mucho
más sencillo.
Sin
embargo, no fue un camino sencillo. La primera versión de CSS era bastante
limitada y aunque rápidamente se lanzó una segunda versión, no llegó a cubrir
las necesidades de todos los desarrolladores y diseñadores. Sin duda fue un
paso adelante muy importante, pero la web siguió avanzando a un ritmo más
rápido que los estándares y los diseñadores seguían teniendo que arreglárselas
para conseguir efectos que eran imposibles con HTML y CSS. Ejemplos de ello
eran las cajas con sombras, los bordes redondeados, el uso de textos con fuentes
personalizadas, etc. Así que de esta manera css interactua con
html ya que desde allí se manda llamar con una extensión dentro de html.
Este
elemento es aquella información que conforma por lo regular el 90% de la página,
dicho texto se puede encontrar desde en títulos, pestañas, párrafos, citas,
referencias, así como puede tener diferente tamaño, color y tipo de letra. En
HTML dicho texto se puede escribir con y sin etiquetas.
Algunas
de las etiquetas básicas que se usan para el texto son:
· <FONT FACE=” Tipo letra”>…</FONT>. Para definir el tipo texto.
·
<FONT COLOR=”
Color”>…</FONT>. Define el color del texto.
·
<FONT SIZE=” Tamaño”>…</FONT>.Para
definir el tamaño.
·
<P>…. </P>. Permite definir los párrafos.
Ejemplo <FONT FACE=” Arial” COLOR=” blue” SIZE=”5″>…</FONT>.
Estos vínculos pueden ser de 3 tipos:
- Enlace externo: otro documento HTML situado en un ordenador remoto.
- Enlace local: otro documento HTML situado en el mismo ordenador.
- Ancla: otro lugar dentro del mismo documento HTML.
Como su nombre lo indica son elementos, palabras, frases,
números etc. que están de forma ordenada o desordenada por lo regular de forma
vertical. Que nos sirve para ordenar la información.
Listas ordenadas son aquellas que se despliegan de forma
jerárquica, o pueden seguir un orden determinado, se pueden escribir de la
siguiente forma <ol>.
Las listas desordenadas son similares a las ordenadas solo
con la diferencia de que no siguen un orden y pueden ser acomodadas de forma más
sencilla, la etiqueta para ponerlas es <ul>.
Otro tipo de listas que hay son las listas de definición la
cuales son las más utilizada en HTML, estas están compuestas por un término y
una definición
La etiqueta <dl> crea la lista de definición y las
etiquetas <dt> y <dd> definen el término y la descripción de cada
elemento de la lista.
Tablas
Una tabla es una herramienta que se utiliza para organizar
y ordenar información en filas y columnas, las tablas de HTML pueden contener
elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de
tabla, subdivisiones, cabeceras múltiples etc.
Las tablas más simples de definen con tres etiquetas:
• <table>
para crear la tabla.
• <tr>
para crear cada fila.
• <td>
para crear cada columna.
• <th>
celda cabecera de tabla.
Objetos
Mas allá del texto imágenes, tablas, listas y vínculos HTML
deja incluir otro tipo de archivos como applets de Java y vídeos en formato
QuickTime o Flash, debido a que el navegador no puede interpretar estos objetos
se usan programas llamados plugin que son los encargados de interpretarlos.
Imágenes
Uno de los elementos mas importantes de las páginas son las
imágenes por que hacen que se visualmente mas atractiva y no parezcan
aburridas.
Existen dos tipos de imágenes las que complementan la
información e informan y las que solo son de adorno y no contienen ningún tipo
de texto o información. Las imágenes de contenido se agregan a HTML mediante la
etiqueta <img>.
Aplicaciones
Las aplicaciones son programas que Internet Explorer
ejecuta con un programa llamado “mshta.exe” lo cual hace que el código HTML se
ejecute como si fuera una aplicación.
2.4 LENGUAJES DE PRESENTACION EN DOCUMENTOS WEB
Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos y que ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un número de reglas sintácticas para poder crear documentos. Uno de los lenguajes más comunes para presentar información web es HTML.
El
lenguaje de presentación es aquel que indica el formato del texto. Este tipo de
marcado es útil para maquetar la presentación de un documento para su lectura,
pero resulta insuficiente para el procesamiento automático de la información.
El
marcado de presentación resulta más fácil de elaborar, sobre todo para
cantidades pequeñas de información. Sin embargo, resulta complicado de mantener
o modificar, por lo que su uso se ha ido reduciendo en proyectos grandes en
favor de otros tipos de marcado más estructurados.
Se
puede tratar de averiguar la estructura de un documento de esta clase buscando
pistas en el texto. Por ejemplo, el título puede ir precedido de varios saltos
de línea, y estar ubicado centrado en la página. Varios programas pueden
deducir la estructura del texto basándose en esta clase de datos, aunque el
resultado suele ser bastante imperfecto.
2 .5 EL FORMULARIO
El formulario es una herramienta que nos ayuda a recolectar
datos externos en este caso cuando el usuario entra a la pagina web los
formularios permiten solicitar información la cual, al momento de apachurrar el
botón de enviar, dicha información se envía mediante una dirección URL a una
parte del código, la que tiene como destino final un servidor web. Dichos
formularios sirven para tener interacción usuario-página web y viceversa.
Un
formulario web está conformado por widgets (controles de formularios), dichos
controles pueden ser:
- Campos de texto.
- Botones de opción.
- Cajas desplegables.
- Casillas de
verificación.
- Áreas de texto.
Algunos tipos de formularios:
- Formulario de encuesta.
- Formulario de registro.
- Formulario de orden.
- Formulario de
generación de leads.
- Formulario de contacto.
1. Encabezado
Esta es la parte inicial. La cual sirve para indicar
el nombre del documento, su objetivo, quién solicita los datos y las
indicaciones que las personas deben seguir para completarlo correctamente.
2. Identificación
Esta parte va debajo del encabezado y sirve para
agregar las preguntas básicas, como nombre, edad, correo electrónico, etc.
3. Cuerpo
Aquí se agregan todas las casillas con las preguntas a
realizar. En esta parte se debe contener cuestiones claras y fáciles de
responder.
4. Campo de texto
Como su nombre
lo indica son campos en los que se introduce la información, en esta parte se
recomienda dejar solo un campo de texto por pregunta.
5. Indicador de progreso
En esta parte se muestra un indicador de progreso
cuando un formulario tiene más de un paso de ingreso de datos.
6. Pie de página
Va al final del formulario, es recomendable dejar un
agradecimiento y un botón de «Enviar formulario», «Compartir formulario»,
«Compartir respuestas», entre otros.
2.6 SELECTORES
Un
selector es una serie de elementos y términos que indican al navegador qué
elementos HTML se eligen para poder aplicarles una regla CSS. Los elementos elegidos
por el selector se les llaman sujeto del selector.
En
pocas palabras los selectores en CSS se usan para delimitar los elementos HTML de
una página web a los que queremos aplicar estilo. Existe una gran variedad de
selectores CSS, lo que ayudan una gran precisión a la hora de seleccionar
elementos a los que aplicar estilo.
Tipos de selectores:
|
SELECTOR |
EJEMPLO |
|
Selector de tipo |
h1 { } |
|
Selector universal |
* { } |
|
Selector de clase |
.box { } |
|
Selector de ID |
#unique { } |
|
Selector de atributo |
a[title] { } |
|
Pseudoclase |
p:first-child { } |
|
Pseudoelemento |
p::first-line { } |
|
Operadores de combinación descendentes |
article p |
|
Operador de combinación de elementos hijo |
article > p |
|
Operador de combinación de elementos hermanos adyacentes |
h1 + p |
|
Operador de combinación general de elementos hermanos |
h1 ~ p |
Ventajas
de CSS:
- Una instrucción puede
controlar varias áreas.
- Se necesitan usar pocas líneas de programación para cada página, lo que mejora la velocidad del sitio.
- Simplifica el
desarrollo del sitio web y el mantenimiento.
- Es menos complejo por
lo que el esfuerzo se reduce significativamente.
- Ayuda a formar cambios
espontáneos y consistentes.
- Los cambios de CSS son
aptos para dispositivos.
- Nos ayuda a determinar
los cambios en la posición de los elementos web que hay en la página.
- Fácil para el usuario
personalizar la página en línea
- Reduce el tamaño de la
transferencia de archivos.
Desventajas
de CSS:
- CSS, CSS 1 hasta CSS3,
crean confusión entre los navegadores web.
- Con CSS, lo que
funciona con un navegador puede no funcionar siempre con otro.
- Se debe probar la compatibilidad, ejecutando
el programa en varios navegadores.
- Existe una escasez de
seguridad.
- Compatibilidad con
navegadores (algunas hojas de estilos son compatibles y otras no).
- CSS funciona de manera
diferente en diferentes navegadores. IE y Opera admiten CSS como lógica
diferente.
- Puede haber problemas
entre navegadores al usar CSS.
- Hay múltiples niveles
que crean confusión para los no desarrolladores y los principiantes.
Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
- Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
- Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
- Borde (border): línea que encierra completamente el contenido y su relleno.
- Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
- Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
- Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
Las unidades más utilizadas para
indicar los márgenes de un elemento son los píxeles (cuando se requiere una
precisión total), los em (para hacer diseños que mantengan las proporciones) y
los porcentajes (para hacer diseños líquidos o fluidos).
