jueves, 14 de junio de 2018

LENGUAJE HTML

Lenguaje HTML

HTML quiere decir Hiper Text Markup Languaje y es el lenguaje más utilizado en el desarrollo de páginas web.



Estructura de un documento HTML

La estructura está dada por etiquetas con funciones específicas que abren y cierran y Éstas etiquetas están formadas por palabras clave y atributos y Se definen con símbolos de mayor y menor que (< >) para abrir y Para cerrar, se coloca una diagonal después del símbolo de menor que ().

Ejemplo de la estructura general de una página:
<html>
   <head>
      <title> Título del documento </title>
   </head>
 
   <body>
 
   </body>
</html>


Elementos principales:

  • El encabezado en donde se definen elementos que no serán visibles en la pantalla, elementos de configuración y referencia a otros archivos.
  • El cuerpo que contiene toda la estructura a mostrarse en pantalla
Para una mejor comprensión, observa el siguiente video:


Principales etiquetas
A continuación se presentan algunas etiquetas básicas:
  • <HTML>: Es la etiqueta que define el inicio del documento html, le indica al navegador que todo lo que viene a continuación debe tratarlo como una serie de códigos html.
  • <HEAD>: Define la cabecera del documento html, esta cabecera suele contener información sobre el documento que no se muestra directamente en el navegador. Como por ejemplo el título de la ventana de su navegador. Dentro de la cabecera <HEAD> podemos encontrar:
    • <TITLE>: Define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana
    • <LINK>: para definir algunas características avanzadas, como por ejemplo las hojas de estilo usadas para el diseño de la página, ejemplo :<link rel="stylesheet" href="/style.css" type="text/css">
  • <BODY>: Define el contenido principal o cuerpo del documento, esta es la parte del documento html que se muestra en el navegador, dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <BODY> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:
    • <H1>, <H2>,... <H6>: encabezados o títulos del documento en diferentes tamaños de fuente
    • <P>: párrafo nuevo
    • <BR>: salto de línea forzado
    • <TABLE>: comienzo de una tabla (las filas se identifican con <TR> y las celdas dentro de las filas con <TD>)
    • <A>: indica la existencia de un hipervínculo o enlace, dentro o fuera la página web. Debe definirse el parámetro de pasada por medio del atributo href (ejemplo: <a href="http://www.google.es">Google</a> se representa como Google)
    • <DIV>: comienzo de un área especial en la página
    • <IMG>: indica la existencia de una imagen para mostrarse en el navegador
    • <LI><OL><UL>:Es uno de los mas utilizados para el manejo de listas.

miércoles, 13 de junio de 2018

PROCESO DE DESARROLLO DE PÁGINAS WEB


Introducción

La mayoría de los autores recomiendan a los estudiantes tener una visión global del significado y antecedentes de Internet; así como de algunos conceptos elementales que el alumno debe dominar, previo al desarrollo de páginas web.

La Universidad Autónoma del Estado de Hidalgo UAEH, cuenta con un repositorio institucional abierto, por lo cual, recomiendo al lector dar un vistazo al tema de Internet, desarrollado por el L.S.C. Juan Luis Tellez López. Dar clic


                                  PROCESO DE DESARROLLO DE PÁGINAS WEB
A continuación debes conocer la ruta crítica para el desarrollo de una página web, es decir, elegir un método que te permita desarrollar de forma exitosa la página. Dicho proceso varia entre autor y autor, la siguiente imagen ilustra el proceso de desarrollo de páginas web.


Para la empresa acuattro creativos el diseño web "es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y video. Se trata básicamente de realizar un documento con información hiperenlazados con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de ordenador, en papel, teléfono móvil, tablet, etc)."


Algo muy importante es no confundir desarrollo de una página web, con el diseño web,  y para comprender un poco más sobre estos tópicos, les recomiendo el siguiente vídeo:









Herramientas para la creación rápida de páginas Web

Herramientas para la creación rápida de páginas Web

Hola, gracias por entrar a nuestro Blog.

Encontré un sitio en la web que trae una lista de 7 opciones para crear páginas web, solo te ofrezco el resumen, si quieres profundizar más puedes consultar directamente el sitio en https://traduversia.com/7-herramientas-para-crear-tu-propia-pagina-web-de-una-forma-sencilla/


7 herramientas para crear tu propia página web


Crear una página web nunca ha sido tan fácil. En los últimos años, han surgido un montón de herramientas diversas que nos facilitan el proceso de creación de un sitio web y nos ayudan a hacer cosas que difícilmente podríamos hacer tan rápido si tuviéramos que aprender HTML5, CSS3, PHP o Javascript. En esta entrada, vamos a repasar algunas de las herramientas más populares para que así puedas descubrirlas y empezar a usarlas si estás pensando en crearte tu propia página web. Vamos a distinguir entre tres tipos o grupos de herramientas: editores online, editores de HTML y sistemas CMS.

Editores online

1. Wix: cada vez surgen más sitios que te permiten crear tu página web usando editores visuales sin necesidad de escribir ni una sola etiqueta de código. Wix es uno de esos sitios. Es tan fácil de utilizar que cualquier usuario medio podría crearse una página web sencilla en poco tiempo. Su editor visual es muy intuitivo y te permite crear bloques y arrastrar elementos para que los ubiques justo en el sitio que tú quieras. Lo malo es que la versión gratuita tiene opciones limitadas, por lo que si quieres disfrutar de todas las ventajas de Wix vas a tener que contratar una cuenta Premium. Pero si no necesitas una página web demasiado compleja puede ser una buena opción.
editorwix
2. Weebly: Weebly es un editor similar a Wix. Su interfaz se parece más a un editor clásico de páginas web, aunque también permite modificar los elementos de una forma sencilla, pinchando y arrastrando o modificando directamente los contenidos dentro del editor visual. Personalmente, encuentro más cómodo e intuitivo el editor de Weebly que el de Wix, aunque si quieres hacer cosas más complejas como por ejemplo crear una web con TPV vas a tener que contratar un plan de pago.
CapturaWeebly

Editores HTML

3. Adobe Dreamweaver: Dreamweaver es el editor web más conocido y más utilizado por los diseñadores. Forma parte de la suite Creative Cloud de Adobe y, por tanto, es perfectamente compatible con otras herramientas de diseño gráfico de la misma suite, como Photoshop o Illustrator, lo que convierte a Dreamweaver en una opción más que recomendable si quieres invertir en una herramienta de pago. Es una herramienta idónea si tienes conocimientos de HTML5, CSS3 o PHP. De lo contrario, quizá lo mejor sería que optaras por una herramienta un poco más asequible hasta que adquieras un conocimiento mayor de estos códigos, pues Dreamweaver es una herramienta de perfil avanzado ideada para profesionales del diseño (aunque eso no significa que no puedas utilizarla :P).
DreamweaverCC
4. Kompozer: Kompozer es un editor de HTML gratuito. Es una herramienta muy versátil que es ideal si la utilizas como complemento de otras aplicaciones, aunque si quieres también puedes utilizarla para desarrollar un sitio web en HTML. Personalmente, la encuentro muy útil para ahorrar tiempo a la hora de crear elementos en HTML como barras de navegación, listas de enlaces, botones personalizados o galerías de imágenes. Es un editor ideal para empezar a sumergirte en HTML5, CSS3 o PHP.
kompozer

Sistemas CMS 

Los sistemas CMS se han ganado un puesto de honor entre las herramientas de desarrollo de páginas web. Desde su explosión a mediados de la década del 2000, cambiaron por completo el concepto de diseño que existía hasta entonces, en el que por lo general para poder crear un sitio web era necesario confeccionarlo en un editor tradicional a base de introducir código y más código. Los sistemas CMS permiten separar diseño y contenido, de forma que ahorran mucho tiempo y esfuerzo al usuario. De hecho, con ellos puedes confeccionar sitios web aparentemente complejos sin necesidad de utilizar código, pues ellos generan el código por ti de manera automática. A continuación, vamos a repasar los tres sistemas CMS más populares según los datos estadísticos del W3C: Joomla, Drupal y WordPress.
CapturaW3c
Sistemas CMS más utilizados (Fuente: W3C). En gris, el porcentaje de usuarios. En verde, la cuota de mercado.
5. Joomla: Joomla es un CMS gratuito basado en PHP que permite generar sitios web dinámicos. Su panel de administración te permite, entre otras cosas, instalar plantillas y personalizar tu sitio web por módulos, así que con poco vas a poder conseguir resultados muy buenos. Es una herramienta muy utilizada sobre todo para desarrollar sitios web de comercio electrónico, aunque en realidad se puede utilizar para fines muy diversos (plataforma de blogging, web personal, TPV, sitio de e-learning, etc.). No obstante, no considero que sea un CMS accesible para un usuario de perfil medio/bajo, dado que su panel de administración no es tan intuitivo como el de otros CMS.
Joomla
6. Drupal: Drupal es otro sistema CMS basado en PHP y combinable con MySQL (al igual que Joomla y WordPress), que puede utilizarse para múltiples propósitos, aunque curiosamente se ha estandarizado para desarrollar comunidades y sitios web participativos. Permite confeccionar sitios web utilizando plantillas y módulos (hay miles disponibles). No obstante, su curva de aprendizaje es bastante alta, dado que es una herramienta creada por programadores y para programadores, por tanto si buscas un sistema CMS fácil de usar e intuitivo quizá Drupal no sea la mejor opción (aunque eso no significa que no puedas aprender a utilizarlo).
Drupal_5_Screenshot
7. WordPress: como puedes ver en el gráfico anterior, WordPress es el sistema CMS más utilizado por los usuarios de Internet y el que tiene una mayor cuota de mercado (un dato importante). Al contrario de lo que ocurre con Drupal y Joomla, su interfaz es mucho más intuitiva, por lo que la mayoría de usuarios medios que quieren utilizar un CMS para desarrollar un sitio web suelen recurrir a esta herramienta. WordPress surgió inicialmente como plataforma de blogging, pero poco a poco fue evolucionando hasta el punto de que ahora puede utilizarse para crear cualquier tipo de página web. Hay miles de plantillas disponibles y miles de widgets y plugins que permiten a los usuarios potenciar sus páginas web sin necesidad de introducir código.
CapturaWordpress



Te recomiendo un sitio donde puedes encontrar un curso para crear una página Web: https://www.aulaclic.es/paginas-web/

También tiene un curso para el uso del editor de páginas web Dreamweaver, muy conocido y utilizado por diseñadores de páginas web: https://www.aulaclic.es/dreamweaver-cs6/ 

A continuación te ofrezco un vídeo de introducción a Dreamweaver.








LENGUAJE HTML

Lenguaje HTML HTML quiere decir Hiper Text Markup Languaje y es el lenguaje más utilizado en el desarrollo de páginas web. Estruct...