¿Qué es HTML? Cómo crear una página web

HTML es un lenguaje universal que funciona en cualquier plataforma y con cualquier navegador o browser. El precio que paga por su universalidad es su poca sofisticación, ya que es el viejo formato ASCII. Por ello, para que un documento HTML sea más que simples caracteres básicos, debe contener una serie de instrucciones para el browser que lo va a reproducir denominadas etiquetas o tags, distinguidas del texto porque van entre guiones. Estas etiquetas contienen todo el resto de la información de la página web.

Por tanto, si un documento HTML no es más que texto ASCII, cualquier documento web puede escribirse desde un sencillo programa básico de texto como el Cuaderno de Notas de Windows. Escribir un documento complejo así, exige un conocimiento exhaustivo de las etiquetas existentes y sus normas de uso; para evitarlo, hay una serie de programas denominados editores de HTML que permiten componer una página desde un interfaz parecido al de un procesador de textos.

A la hora de crear una página web, y aunque utilicemos un editor de HTML, es casi imprescindible comprender la disposición del etiquetado de un documento y manejar siquiera las etiquetas más elementales. Hay muchas razones que pueden aducirse a ello:

  • Los editores de HTML no son siempre herramientas perfectas. Frecuentemente será necesario consultar el código completo con las etiquetas HTML para corregir ñas disfunciones.
  • Lo ideal para aprender a diseñar páginas web es observar las páginas de los demás, cuyos códigos fuente están siempre disponibles para ser imitados.
  • Los mismos editores HTML manejan términos del lenguaje HTML que es preciso comprender.
  • Es fundamental un buen conocimiento de HTML para introducir otros códigos más potentes como los de Javascript.

El objetivo de este documento es aprender a componer una sencilla página web desde el más básico de los programas de texto disponibles en Windows. Así, seremos capaces de entender y manejar los códigos fuente de las páginas más complejas.

PC WORX: software de programación para todos los sistemas de control

PC WORX es un software de ingeniería universal para todos los sistemas de control de Phoenix Contact. Une la programación según IEC 61131, la configuración de bus de campo y el diagnóstico de la instalación en un solo software. Esto se traduce en trabajo en conjunto de hardware y software. Podrás llevar a cabo costosos conceptos de automatización. Según el número de E/S que deben soportarse, elija entre PC WORX BASIC y PC WORX PRO. Para un acceso rápido a la automatización con autómatas compactos ofrecemos el software de programación gratuito PX WORX EXPRESS.

Vista general del software

  • Programación intuitiva sobre la base de todos los lenguajes IEC 61131
  • Sencilla realización de topologías de red
  • Fácil uso de los dispositivos a través de la configuración y el direccionamiento PROFINET, Profibus, INTERBUS y Modbus-TCP
  • Inicio del proyecto rápido con asistentes de proyecto
  • Pruebas de programa prematuras gracias a la función de simulación
  • Herramienta de diagnóstico integradapara todos los componentes del sistema

Configuración de bus con PC WORX

  • Adecuado para INTERBUS, PROFINET, Profibus y Modbus-TCP
  • Diseño sencillo de varias redes PLC en un proyecto
  • Vista de árbol habitual para la representación de la red
  • Catálogo de dispositivos
  • Asistente para la sustitución de PLC
  • Catálogo de módulos para dispositivos de construcción modular
  • Lectura PROFINET e INTERBUS
  • Lectura de la topología PROFINET
  • Determinación del dispositivo con nombre de dispositivo DNS/PROFINET y direcciones IP
  • Reasignación de direcciones IP y de nombres de dispositivo para el proyecto completo
  • Generación automática de nombres de dispositivo PROFINET
  • Importación GSD

Diagnóstico y control de funcionamiento con PC WORX

  • Operación en línea fácil para el usuario
  • Capacidad de modificación en línea
  • Indicación gráfica de las variables forzadas en el código de programa
  • Integración completa de Diag+ para los diagnósticos de bus IBS y PN
  • Lista de variables forzadas
  • Watch-Windows
  • Analizador lógico
  • Representación de la topología Ethernet
  • Administración de recetas
  • Simulación sin PLC de hardware
  • Almacenamiento del código fuente en el sistema de destino
  • Operación en el propio contacto

Típicos errores de programación

Errores de programación: compilación

También conocidos como errores del compilador, son errores que impiden que su programa se ejecute. Cuando presiona F5 para ejecutar un programa, Visual Basic compila el código en un lenguaje binario que el equipo entiende. Si el compilador de Visual Basic se encuentra con código que no entiende, emite un error de compilador.

La mayoría de los errores del compilador son debidos a errores cometidos al escribir el código. Puedes escribir mal una palabra clave, omitir alguna puntuación necesaria o intentar emplear una instrucción End If sin antes usar una instrucción If. El editor de código de Visual Basic fue diseñado para identificar estos errores antes de que se intente ejecutar el programa.

Errores de programación: tiempo de ejecución

Los errores en tiempo de ejecución aparecen mientras se ejecuta su programa. Estos errores aparecen generalmente cuando su programa intenta una operación imposible de llevar a cabo.

Un ejemplo de esto es la división por cero. Suponga que tiene la instrucción siguiente:

Speed = Miles / Hours

Si la variable Hours tiene un valor de 0, se produce un error en tiempo de ejecución en la operación de división. El programa se debe ejecutar para que se pueda detectar este error y si Hours contiene un valor válido, no se producirá el error.

Cuando aparece un error en tiempo de ejecución, puede usar las herramientas de depuración de Visual Basic para determinar la causa.

Errores lógicos

Son errores que impiden que su programa haga lo que estaba previsto. Su código puede compilarse y ejecutarse sin errores, pero el resultado de una operación puede generar un resultado no esperado.

Por ejemplo, puede tener una variable llamada FirstName y establecida inicialmente en una cadena vacía. Después en el programa, puede concatenar FirstName con otra variable denominada LastName para mostrar un nombre completo. Si olvida asignar un valor a FirstName, sólo se mostrará el apellido, no el nombre completo como pretendía.

Los errores lógicos son los más difíciles de detectar y corregir, pero Visual Basic también dispone de herramientas de depuración que facilitan el trabajo.

Conoce Java desde el principio

Java es uno de los lenguajes más difíciles de aprender, no tanto por su sintaxis o por estar orientado a objetos sino por su amplitud. Dentro de Java tienes una biblioteca de clases para relizar cualquier cosa. Es muy difícil que desarrolles cualquier aplicación y comiences desde cero en Java, al contrario, siempre te apoyarás en algo ya escrito, que implementa las bases de aquello que quieres construir.

java es muy grande y aunque represente una dificultad en el aprendizaje, también es una de sus ventajas. Se podría decir que  es casi imposible que conozca todas las áreas para las que Java se puede utilizar, ya que son muchas. Generalmente, las clases que vas a emplear cuando realizas un tipo de programa, son diferentes a las que usarás para otro y lo habitual es que los proyectos requieran trabajar con un pequeño conjunto de los recursos que existen en Java.

Es un lenguaje multiplataforma que se ejecuta en cualquier máquina. Esto se debe a la JVM que nos permite ejecutar el códifo de Java en cualquier lugar para el que se haya creado dicha máquina virtual. Se trata del secreto y la clave de java como lenguaje multiplataforma.

La JVM hace de puente entre el código compilado de Java y la máquina donde se va a ejecutar. Podemos verlo como un traductor que interpreta el código de Java de manera que sea correctamente ejecutado en el sistema objetivo. Así, compilamos el código y el resultado de la compilación se ejecuta en la JVM que tenga el sistema operativo donde quieres poner en marcha el programa.

Casi en cualquier hardware se puede montar un JVM y gracias a ello ser compatible con Java. De hecho, los primeros móviles tenían la opción de ejecutar juegos en Java porque se había creado una JVM en ellos.

¿Conoces el Scratch?

Scratch se convierte en una oportunidad para ayudar a los estudiantes en el desarrollo de habilidades mentales a través del aprendizaje de la programación sin necesidad de saber del programa. Sus características han hecho que sea muy difundido en la educación de niños y adultos.

Scartch es un programa muy extendido entre los estudiantes, profesores y padres para crear animaciones de manera sencilla y puede servir de puente hacia el avance en el mundo de la programación. También puede usarse para un proyecto de ciencias o matemáticas, incluyendo simulación y visualización de experimentos, conferencias grabadas, etcétera.

Scratch permite usar programación dirigida por eventos con múltiples objetos activos denominados sprites. Los sprites pueden pintarse como gráficos vectoriales o mapa de bits, desde su propia web mediante un editor que forma parte del proyecto, o bien puede importarse desde fuentes externas incluyendo webcams.

Desde 2013, Scratch 2 está disponible on line y como aplicación de escritorio para Windows, OS X y Linux (requiere Adobe Air). El código fuente de Scratch 1.x se liberó bajo licencias GPLv2 y “Scratch Source Code Licencse”.

Scratch se hizo famoso en Reino Unido mediate los Code Clubs. Comenzaron a usar Scratch como lenguaje introductorio por su relativa facilidad para desarrollar programas interesantes, y porque las habilidades adquiridas mediante Scratch son aplicables a otro tipo de lenguajes básicos de programación como Python y Java.

El uso de Scartch permite a los más jóvenes entender la lógica básica de la programación, y colaborar y construir proyectos de manera creativa. Scratch también permite a los estudiantes desarrollar proyectos educativos, y a la vez con interés personal para ellos mismos. Esto les proporciona una herramienta práctica para auto expresarse después de aprender a usarlo.

CodinGame: aprende a programar jugando

CodinGame es una startup francesa que pone a tu disposición la posibilidad de aprender a programar mediante el juego. Se trata de una mexcla entre una plataforma de desarrollo online y otra de videojuegos, que propone al usuario distintos ejercicios y retos de programación. Además, puedes retar a otras personas para comparar avances mediante logros y puntuaciones, utilizando nueva y poderosa estrategia para influir y motivar a grupos de personas y una vez resuelto, te ofrece una respuesta muy visual.

Ofrece más de 23 lenguajes de programación y el jugador elige el lenguaje que desea aprender. Aquellos usuarios que deseen inscribirse en CodiGame tan solo necesitan un navegador de Internet. Con este sistema, es posible escribir el código y compilarlo en la misma ventana, es decir, podrá visualizarse el juego mientras se está programando.

Es imprescindible contar con una base mínima de programación o al menos saber orientarte mediante código. Esto será en los niveles más básicos, pero el juego también ofrece niveles más complejos para los que no son desarrolladores expertos.

Gracias a CodinGame puedes aprender conceptos acerca de la inteligencia artificial como si se tratase de un juego. Por otra parte, proporciona un entorno multijugador para usuarios que puedan confrontar con el código creado por ellos y, a su vez, competir por la eficiencia. Este modelo multijugador se ha vuelto muy popular entre los programadores más avanzados.

Cuenta aproximadamente con 230.000 usuarios inscritos en la página web, consiguiendo diferenciarse de sus competidores con la oferta de una experiencia de juego que va más allá del aprendizaje.

Iníciate en el mundo de WordPress

¿Qué es WordPress?

Se trata de un gestor de contenido, una plataforma en la que puedes agregar contenido: textos, artículos, imágenes… o lo que nos apetezca. Es el gestor de contenido más utilizado a nivel mundial, y es que con él podrás administrar de manera mucho más sencilla un sitio web, blog e incluso tienda online sin necesidad de tocar un sólo código.

¿Por qué WordPress y no otro?

Si no tienes mucha creatividad a la hora de diseñar un tema, no debes preocuparte. Puedes encontrar una amplia variedad de temas WordPress hechos y gratuitos que nos puedan servir como base para nuestra página web.

Resulta muy sencillo de utilizar, de manera que aunque tengas escasos conocimientos de informática puedes agregar, eliminar o modificar el contenido sin ningún tipo de problema. Por otro lado, aunque la mayoría de la gente piensa que WordPress solo sirve para crear blogs, también puede utilizarse para crear una tienda online, empleando para esta última más herramientas.

¿Cómo puedo instalarlo?

En primer lugar, accede a su página de descarga oficial para descargarlo. Te recomienso que descargues e instales la última versión de WordPress. Una vez lo hayas descargado, el paquete de instalación se guardará en el disco duro. Localiza el paquete y extrae el contenido en una nueva carpeta.

Ahora sube los archivos y carpetas extraídas a tu servidor web. La manera más sencilla es mediante un FTP. Una vez terminada la descarga, extrae el archivo y súbelo a tu cuenta de hosting. Puedes hacerlo mediante un FTP empleando una aplicación cliente como Filezilla o cPanel.

A continuación, crea una base de datos MySQL y asignar un usuario con permisos completos. Asegúrate de anotar el nombre de la base de datos, el nombre de usuario y la contraseña que acabas de crear. Ahora es el momento para ir a tu web y comenzar con el proceso de instalación. Si has subido WordPress al directorio public_html necesitas ir a http://tudonimio.com en su navegador favorito. Lo primero que verás es un mensaje avisándote de que no tienes un archivo wp-config.php, por lo que debes crear uno. Simplemente haz clic en el botón Crear un archivo de configuración.

Herramientas para que los niños aprendan a programar

Según la RAE, programar es elaborar programas para la resolución de problemas mediante ordenadores. Los programas son una serie de instrucciones elaboradas para el ordenador en cuestión. Visto de otra manera, el programador escribe un mensaje denominado código fuente, que el ordenador recibe, entiende y ejecuta después de una serie de traducciones. Así, se establece una interacción que comienza en la mente del programador y termina en los registros del CPU. Aquí tienes algunas herramientas para que los más pequeños aprendan a programar.

Alice

mbiente de programación creado en Carnegie Mellon University, donde los niños pueden contar historias animadas con bloques 3D.

Alice

Doma de serpientes

Basado en “Snake Wrangling for Kids”, es un libro electrónico para enseñar programación a niños mayores de ocho años mediante el lenguaje de programación Python, disponible en cualquier sistemas operativo. Éste lenguaje, cabe mencionar, es sencillo, flexible y poderoso.

Doma de Serpientes para Niños

Kids with Ruby

Es un software interactivo para aprender programación con el lenguaje Ruby. Como dijo Yukihiro Matsumoto, creador de Ruby, “espero ayudar a que cada programador en el mundo sea productivo, disfrute y sea feliz programando. Este es el principal propósito del lenguaje Ruby”.

Kids with Ruby

Kodu

Con Kodu los niños podrán crear juegos de manera visual desde el ordenador y XBox. Se trata de un programa diseñado para enseñar a programar con tres conceptos básicos: creatividad, resolución de problemas y narrativa.

kodu

LEGO MindStorms NXT

Se trata de robots programables, ya sea con el NXT Intelligent Brick para programas sencillos o con alguno de entre cincuenta lenguajes de programación disponibles.

LEGO MindStorms NXT

¿Qué es JavaScript?

¿Qué es exactamente JavaScript?

JavaScript es un lenguaje de programación utilizado para hacer páginas web interactivas. Se ejecuta en el ordenador de tus visitantes y no requiere constantes descargas desde tu sitio Web. JavaScript se utiliza a menudo para crear encuestas y cuestionarios. Pero para entender mejor que es JavaScript, sigue leyendo.

¿Son JavaScript y Java lo mismo?

No, son dos lenguajes completamente diferentes. Sólo sus nombres son similares. Hablaremos de Java más adelante en alguna sección, para quienes estén interesados también.

¿Qué necesito para ejecutar JavaScript?

El soporte de JavaScript está construido en todos los navegadores principales, incluyendo Internet Explorer, Firefox y Safari. Siempre que los visitantes de tu sitio utilizcen navegadores que soporta JavaScript (la mayoría lo hacen), y tengan JavaScript activado (está por defecto), JavaScript se ejecutará cuando visitan la página.

¿Necesito aprender Javascript para poder usarlo?

No. Hay un montón de JavaScript escrito ya, que las personas han hecho disponible para conectar directamente en tu página web.

¿Qué necesito para escribir JavaScript?

JavaScript es un lenguaje interpretado, así que no se requiere ningún programa especial para crear el código usable. Cualquier editor de texto como Notepad (Bloc de notas, uno de los accesorios que viene en Windows) es bastante satisfactorio para poder escribir JavaScript. Dicho esto, es un editor que colorea el código para que sea más fácil ver, qué es lo que hace más fácil encontrar tus errores.

¿Puedo usar HTML en lugar de JavaScript?

No. HTML y JavaScript son dos cosas totalmente diferentes. HTML es un lenguaje de marcado, diseñado para definir el contenido de la página web estática. JavaScript es un lenguaje de programación, diseñado para realizar tareas dinámicas. A veces la distinción es confusa, porque el código JavaScript puede ir en el mismo archivo como HTML.

¿Puedo usar PHP o algún otro lenguaje de servidor en lugar de JavaScript?

Tal vez. Depende de donde necesita el código ejecutarse. Si tiene que ejecutarse antes de la carga de la página, puedes utilizar un lenguaje server-side. Si se tiene que ejecutar después de la carga de la página, entonces debes utilizar JavaScript. Esto es, porque es la única lengua scripting apoyada por todos los navegadores que admiten secuencias de comandos de cliente.

¿Va Javascript en el mismo archivo que HTML?

Puede, pero las secuencias de comandos serán reutilizadas más fácilmente en varias páginas de tu sitio web si los pones en archivos separados. (Usar una extensión .JS ayuda a identificarlos como Javascript). Sólo tienes que linkear JavaScript en el HTML insertando una etiqueta de <script>. El mismo JavaScript puede agregarse luego a varias páginas, sólo añadiendo la etiqueta apropiada en cada una de las páginas para establecer el enlace.

Hasta aquí la introducción, que puede ayudar al inicio si no entendemos muy bien que es JavaScript. Para saber más, mira los próximos posts! 🙂

Como usar HTML y CSS

Entendiendo HTML y CSS (parte 2)

Combinar o hacer links de HTML con CSS

Combinación de HTML y CSS: Una pregunta muy común e importante es – ¿cómo sabe la hoja de estilo, que estilo se puso para un objeto determinado? Esta es una pregunta muy importante que debe surgir para los novatos. Bueno, hay bastantes procedimientos para hacer tu código de CSS entendible en cuanto a qué elemento desea tener acceso a tu estilo actual.

combinar-html-css

 

Hazlo con la ayuda de las clases y los identificadores, si quieres. Este es el procedimiento más común y es seguido como un golpe maestro en el mundo de internet. En el documento HTML, declarando un elemento, sólo tienes que añadir el atributo “class” y asignarle un nombre determinado. Lo mismo para “id”. Ahora en el archivo CSS, escribe sólo el nombre de clase o id y define tu estilo. Automáticamente, ese elemento en particular deriva las definiciones de estilo.

-Declarando con nombre de clase, en el archivo CSS, añade un punto en el frente. Para el ids, agrega un hash delante del nombre. Es la sintaxis. Ahora, la parte más importante.

-Así que, ¿cuál es la diferencia entre clases e ids? No puede ser igual si conviven. Sí, hay una gran diferencia. En el documento HTML, puedes nombrar a tantos elementos como desees con el mismo nombre de clase. Pero ID deben estar dedicados a un solo elemento. Por lo tanto, las clases se utilizan cuando tenemos el mismo estilo para los artículos múltiples en la página HTML e ids para labrar un solo elemento exclusivamente.

combinacion-html-css

 

Acceder a los elementos del DOM (modelo de objeto de datos), o los elementos HTML, por sus nombres de etiqueta. Por lo tanto, si queremos quitar los bordes correspondientes de todas las etiquetas de imagen en la página; Acabamos de escribir ‘img’ y declarar ‘ frontera: ninguno ‘. Sin embargo esto será aplicable a todas las etiquetas de imagen en el documento. ¿Puedes estar pensando, hay una manera que podemos señalar a un elemento específico (de una imagen por ejemplo la etiqueta) pero con su nombre de elemento? Sí hay una manera. Sumérgete en el punto siguiente.

combinación html y CSS

 

Elementos específicos de acceso por tu nombre de etiqueta. Es necesario, sin embargo, recorrer todo a través de tus elementos primarios hasta ellos. ¿Fue un poco duro fue? Está bien. Tomemos un ejemplo. Supongamos que tenemos un elemento form y luego un elemento de entrada en su interior. También tenemos elementos input fuera de la forma, sólo las apártalas, por ejemplo. Así, ahora si seguimos el punto anterior y declaras algún estilo en elementos de entrada; estos estilos se aplicarán en tanto elementos de entrada dentro y fuera de la forma.

Si queremos aplicar el estilo sólo en el elemento dentro de la forma, esto lo podemos hacer. Entrada de la forma {/ * declarar el estilo aquí * /}. Por lo tanto, observa cómo accedimos a la entrada de elemento que queremos específicamente del estilo. Primero el padre y luego el elemento principal. De esta manera, los elementos de entrada exteriores Haz descartados.